frontend: compact/hidden chat threads

[haraldschilly]

• this adds a button to the bottom of a thread to fold it. uses a new icon "to-top-outlined". To unfold, the icon is rotate by 180°.
• this also unravels some of the chat message code, such that it is clearer which part belongs to what, moves a locally defined function in a function to be standalone, etc. far from perfect, but at least I can read the code much better.
• I'm changing tooltip to use our "Tip" component, to make this more consistent.
• I wanted to add a menu item to fold all LLM threads in one go, but I failed. I tried to model this after a jupyter notebook, but no luck. Instead, I added a button next to the video chat (with a smaller label for side chat).
• Nothing changes behind the scenes, i.e. folding is based on an attribute of the root message.

screenshots

they show the threads as they are, partially closed, and well, the most interesting view is a long side chat with many LLM interactions, which can be closed with one button press.

side chat

side chat after clicking "fold LLM"

[williamstein]

I wanted to add a menu item to fold all LLM threads in one go, but I failed. I tried to model this after a jupyter notebook, but no luck.

Jupyter has its own second level of complexity. The easiest way to do what you want would be to add a top-level action (in code-editor/actions.ts) called something like "foldAll". Make a command to do that that is a general generic menu item, like most of them, and then define foldAll in the actions for chat. it would in fact also be nice to have a fold all command for code editors using codemirror and code folding.