# Adding new training content

If you're ever tasked with the grueling task of adding more tips from manuals, my condolences.

There are 4 components of a training content tip: the tip itself, the question, the additional and the segment.

The tip is the actual tip, if the manual doesn't have an exercise that relates to that tip fill this out:

```json
{
    "category": "<the category of the tip that will be used to categorize the embeddings and also used in the tip header>",
    "embedding": "<the relevant part of the tip that is needed to make the embedding (clean the tip of useless info that might mislead the queries)>",
    "text": "<The text that the llm will use to assess whether the tip is relevant according to the performance of the student (most of the time just include all the text of the tip)>",
    "html": "<The html that will be rendered in the tip component>",
    "id": "<a uuid4>",
    "verified": <this is just to keep track of the tips that were manually confirmed by you>,
    "standalone": <if the tip doesn't have an exercise this is true else it's false>
}
```

If the manual does have an exercise that relates to the tip:

```json
{
    // ...    
    "question": "<the exercise question(s) html>",
    "additional": "<context of the question html>",
    "segments": [
        {
            "html": "<the html of a segment, you MUST wrap the html in a single <div> >",
            "wordDelay": <the speed at which letters will be placed on the segment, 200ms is a good one>,
            "holdDelay": <the total time that the segment will be paused before moving onto the next segment, 5000ms is a good one>,
            "highlight": [
                {
                    "targets": ["<the target of the highlight can be: question, additional, segment, all>"],
                    "phrases": ["<the words/phrases/raw html you want to highlight>"]
                }
            ],
            "insertHTML": [
                {
                    "target": "<the target of the insert can be: question, additional>",
                    "targetId": "<the id of an html element>",
                    "position": "<the position of the inserted html can be: replace, prepend and append. Most of the time you will only use replace>",
                    "html": "<the html to replace the element with targetId>"
                },
            ]
        }
    ]
}
```

In order to create these structures you will have to mannually screenshot the tips, exercises, context and send them to an llm (gpt-4o or claude)
with a prompt like "get me the html for this", you will have to check whether the html is properly structured and then
paste them in the prompt.txt file of this directory and send it 
back to an llm.

Afterwards you will have to check whether the default styles in /src/components/TrainingContent/FormatTip.ts are adequate, divs 
(except for the wrapper div of a segment) and span styles are not overriden but you should aim to use the least ammount of
styles in the tip itself and create custom reusable html elements
in FormatTip.ts.

After checking all of the tips render you will have to create new embeddings in the backend, you CAN'T change ids of existing tips since there 
might be training tips that are already stored in firebase.

This is a very tedious task here's a recommendation for [background noise](https://www.youtube.com/watch?v=lDnva_3fcTc).

GL HF