Make custom elements a first class citizen #2428
Conversation
dosubot
bot
added
size:L
|
As promised @asvishnyakov |
|
If these changes are something you would like to add then I'd be happy to create some good docs on how to use this kind of workflow to quickly create custom UI elements that you can integrate in your chatbot :-). |
|
Thanks for this contribution @josca42 this looks very promising! Do you have some examples code to run and see how this works? Docs/Cookbook will be very helpful for the community once this is released for sure. |
sandangel
requested review from
hayescode,
asvishnyakov and
sandangel
as code owners
| dangerouslySetInnerHTML={{ | ||
| __html: Object.entries(THEMES) | ||
| .map( | ||
| ([theme, prefix]) => ` | ||
| ${prefix} [data-chart=${id}] { | ||
| ${colorConfig | ||
| .map(([key, itemConfig]) => { | ||
| const color = | ||
| itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || | ||
| itemConfig.color; | ||
| return color ? ` --color-${key}: ${color};` : null; | ||
| }) | ||
| .join('\n')} |
There was a problem hiding this comment.
hi, why do we need dangerouslySetInnerHTML? can it be set from style attribute instead of dangerouslySetInnerHTML
|
some example usage would be great. currently I'm not sure how to use this component. |
|
This PR is stale because it has been open for 14 days with no activity. |
github-actions
bot
added
the
stale
asvishnyakov
added
keep-for-a-while
|
any update on this? |
Quickly creating beautiful UI elements in claude and adding them as custom elements in chainlit enables creating beautiful UX flows that differentiate from the just another chat bot experience. A quick example of this is shown in this video .
Claude natively uses shadcn and recharts so everything almost work out of the box but a few key changes are needed. More tailwind styling needs to be made available to the custom elements.
And since a lot of chainlit users will likely be using it related to analysis workflows - preferring chainlit to streamlit etc. - then the charting functionality used by claude should be available. This means recharts and the shadcn chart component.
This also addresses #2328