import $ from "jquery";
import * as JSX from './jsx';

import { Dropdown, DropdownItem, Page, GroupBox } from './components';

interface TutorialPage {
  title: string,
  content: HTMLElement
}

const pages: TutorialPage[ ] = [
  {
    title: "Choosing the right model",
    content:
    <span>
      It would get quite wordy if we were to discuss every model in detail that we provide,
      so our best suggestion is to check out our <a onclick={ () => JSX.navigate( "/models" ) }>Models</a> page.
      <br />
      Here, you can see the various personalities our models come with by default,
      the provided tooling, as well as licensing information for each respective model!
    </span>
  },
  {
    title: "Effective chatting",
    content:
    <span>
      Effective chatting best practices are also, as with most things, on a model-by-model basis.
      However, there are some good standards to abide by when interacting with any LLM to increase effectiveness.
      We'll list a few of our personally notable ones here, in no particular order:
      <div style="padding: 10px 10px 0;">
        <b>1) Prompting :</b> A good prompt can drastically change the output of a large language model,
                              effective prompts will be elaborated on in the <a onclick={ () => selectPage( pages[ 2 ] ) }>next</a> section.
        <br /><br />
        <b>2) Clarify :</b> As the saying "garbage in, garbage out" goes with computing, it continues here to an extraordinary extent.
                            One of, if not, the most effective methods of improving LLM responses is by providing and continually improving:
                            queries, instructions, sample code, or other data you feed into the language model that fits your current need.
        <br /><br />
        <b>3) Reminders :</b> LLMs, just like humans, need reminders sometimes. If you are sending large amounts of data, or
                              if you are having a model make many web requests, it's very likely you will leave the model's
                              context window. This can lead to unpredictable and unexplainable results, so do with that information
                              what you will.
        <br /><br />
        <b>4) Tooling :</b> Luckily for you, utilizing our provided <a onclick={ () => selectPage( pages[ 4 ] ) }>tooling</a> is not something that you will have to initiate.
                            Models equipped with tooling functionality will automatically use our provided tools to better complete your requests.
                            All this being said, you will have to "manage" your tooling. For web requests, as mentioned above, they can quickly
                            devour your avaiable context window and cause erroneous responses to occur. Notes as well, when above capacity, can
                            cause the same. We do provide a way to manage notes, and we can only suggest to keep web requests to a minimum.
      </div>
    </span>
  },
  {
    title: "Prompting",
    content:
    <span>
      We feel like this cannot be understated, so we will mention it again.
      Each model is different, and will respond differently to the same query, prompt, image, etc.
      This is what we describe as "personalities".
      <br />
      However, as with chatting, we can provide general advice that applies across the board.
      As well, we will attach some resources below that we have used in our journey in this process.
      We feel these are of good quality and dig into a low level in layman's terms to help you
      understand easily.
      <br />
      <div style="padding: 10px 10px 0;">
        <b>1) Prompt format matters :</b> As seen in the resources below, there are many types of prompting.
                                          Using the wrong style of prompt for the wrong purpose could hinder
                                          service performance rather than improve it. Make sure you have a
                                          rudimentary understanding of what prompting is and what it does before
                                          embarking on your quest.
        <br /><br />
        <b>2) Prompt interferes with context window :</b> This is a good one to keep in mind. Though it will
                                                          likely never be an issue for the average user, advanced
                                                          power users may find a point in which a lengthy prompt
                                                          causes a model to *only* output erroneous data. Keeping
                                                          your prompt clear and concise should be the goal of any
                                                          power user.
        <br /><br />
        <b>3) Test, test, and test again :</b> This is the most important step. The true essence of trial and error
                                                is found here. Attempting different variations, structures, and wordings
                                                of the same prompt can lead to vastly different outcomes, all coinciding
                                                with the previously discussed points.
      </div>
      <br />
      The aforementioned resources are as follows, in an order that we'd suggest approaching this topic with :
      <div style="padding: 10px 10px 0;">
        1) <a href="https://github.blog/ai-and-ml/generative-ai/prompt-engineering-guide-generative-ai-llms/" target="_blank">What is prompting</a>
        <br />
        2) <a href="https://github.com/tghurair/agentic-prompting/tree/main/techniques" target="_blank">Basic prompting examples</a>
        <br />
        3) <a href="https://www.promptingguide.ai/models" target="_blank">Model-specific prompting tips</a>
      </div>
    </span>
  },
  {
    title: "Modules",
    content:
    <span>
      Modules are a product that we offer outside of being a convenient host and frontend for a wide array of hand-picked open source LLMs.
      They can be created using a fraction of our available <a onclick={ () => selectPage( pages[ 5 ] ) }>api</a>, and still create a lively environment for any
      chatbot, website, video game dialog, or any other endeavour only the mind can uncover.
      <br />
      At the moment, our pricing for module implementation to your service starts at $250 USD, and of course goes up with project scope.
    </span>
  },
  {
    title: "Tools",
    content:
    <span>
      To not repeat ourselves too much here, we'd suggest reading #4 of <a onclick={ () => selectPage( pages[ 1 ] ) }>effective chatting</a> before this portion.
      <br /><br />
      As stated there, our provided tooling is initiated automatically by the will of the selected model, but you are in charge
      of managing its resource consumption. If you notice it taking a lot of notes, it will be worthwhile to clean out notes that
      aren't so important. If your current conversation has a lot of web requests in it's history, it could prove resourceful to
      start a new chat to initiate a new context window to refreshing the models "short-term memory", while carrying over useful
      notes from past conversations. These nuanced tweaks will become frictionless and scale overtime to further hone in the model
      to become tailored to you, the user.
    </span>
  },
  {
    title: "API",
    content:
    <span>
      Our OpenAI-compatible API is the core that powers this entire site.
      As you can see for yourself in the inspector, this site is written completely with an in-house framework.
      None of the nonsense that plagues the modern industry. We understand the importance of simplicty.
      What makes this all possible, outside of our ability to "Make It Work" as developers, is our robust API.

      To dig deeper and become a power user, please visit <a onclick={ () => JSX.navigate( "/api" ) }>this</a> page.
    </span>
  }
];

let selected_page: TutorialPage = pages[ 0 ];
export default function Tutorial() {
  return <Page>
    <GroupBox title="Tutorial" style="width: 85%; display: flex;">
      <div id="page-selector-wrapper">
        <Dropdown title={ selected_page.title } inline id="tutorial-links-box">
          { pages.map( ( p ) => <DropdownItem onclick={ () => selectPage( p ) }> { p.title } </DropdownItem> ) }
        </Dropdown>
      </div>

      <div class="tutorial-section">
        <span id="tutorial-content">
          { selected_page.content }
        </span>
      </div>
    </GroupBox>
  </Page>
}

function selectPage( page: TutorialPage ) {
  selected_page = page;
  $( "#tutorial-links-box" ).text( page.title ); // moneyjsx todo @nave : FIX PLEASE, I SHOULDN'T HAVE TO DO THIS ( IT'S BROKEN ON MODEL PAGE AS WELL ) -- intuitive functionality is that it rerenders when the selected_page var is modified
  $( "#tutorial-content" ).html( page.content ); // if we could add a reactive body to that as well that responds when selection changed, we could remove this entire need for onclick, but that's also probably a fuck ton of work .
}