Mermaid and Chat Cost Features

[evalstate]

Added a couple of features in my instance of Hugging ChatUI that people may have an interested in:

Mermaid Charts

• Uses Mermaid "Default" and "Dark" theme depending on the current ChatUI theme, but doesn't update on theme switch (needs refresh).
• Waits until streaming of message is complete before attempting rendering.
• Has an "Edit on Mermaid Live" button - I prefer this to trying to put pan/zoom controls everywhere.

Chat Cost / Context Calculation

• Required upgrade of Anthropic Client Library (from 0.17 to 0.25 as earlier versions had a defect where token counter wasn't accumulating).
• Configured by model. If Context Window size is supplied, displays "Context Use". If Price information is supplied, displays "Last Turn" cost. Clicking reveals the calculation table. I had included a graph showing usage, but it looked too much like a scrollbar so took it back out.
• Only added supported on the Anthropic endpoint for the moment (will be adding OpenAI and others soon).
• Token Usage is stored against the message, pricing only comes from the configuration. This means that the displayed values will change if the pricing configuration changes - this was by choice to keep implementation simple. The display is for instructive rather than financial purposes.

[julien-c]

interesting stuff!

[evalstate]

Sorry, forgot to say it's on this fork:
https://github.com/barrensconsulting/llmindset-hug-ui

If anyone wants a PR or has questions just let me know. I was hoping to just be able to use Mermaid.run(), but with multiple diagrams on a page, it seems to suffer from some kind of re-entrancy/race condition issues that I couldn't track down so reverted to SVG rendering and promise, with error handling to scoop up the famous "mermaid bombs".