Update default system prompt to specify a chart library

[humphd]

I often want to generate some kind of chart, for example a bar chart. The LLMs will usually hallucinate a Mermaid diagram that uses an invalid chart type (you can only do pie charts in Mermaid.js).

However, if I explicitly prompt it to use chart.js, it does what I want.

I did a test today to compare some different chart libraries:

https://chatcraft.org/c/humphd/AsI25XEORVC57AKsPI-rF

I wonder if we should add a line to the default system prompt to say something like, "- For any chart type other than a Pie Chart, use chart.js and HTML"

[tarasglek]

This is a pretty interesting exploration. Some raw thoughts:

1. This is an extremely cool documentation page, we should make one of these for every "unusual" chatcraft feature
2. We should add code to determine size of content within iframe and size iframe accordingly
3. I use mermaids for all of the chart types it supports. I think we can explicitly list out which chart types to use mermaid for
4. This might actually be a good usecase for making charting tools..where you have a function which spits out inline html-within-raw-markdown instead of an iframe and a prompt to go with it.
5. It might be a good idea to render html by extracting the content inside of tag instead of doing (2)

[humphd]

1. I love testing ChatCraft stuff with ChatCraft, it's so much fun! I agree we should see if we can create demo chats this way to show people how to do things.
2. I filed #205 for this
3. Listing the supported Mermaid types is probably smart
4. I think taking HTML from GPT and rendering it direct into app is a great way to completely break things in ways you can't recover (e.g., it breaks the page UI such that you can't delete/update without blowing away db). One thing we could do is host a canvas in a chat and say, "I'll draw whatever you want in this canvas" or use an offscreen canvas in a worker, and do it as an image we host)

[humphd]

For 3. I think the list is (see https://mermaid.js.org/intro/):

• flowchart, sequence, class, state, entity, gantt, quadrant, git graph, c4, mindmap, timeline, zenuml, sankey, pie chart

This seems long. I wonder if it's easier to say:

- Use Mermaid diagrams when discussing visual topics (for charts other than Pie Charts, use Chart.js and HTML instead of Mermaid)

[humphd]

This is very similar to #313 and #318.