Message
A chat message row with assistant markdown, action toolbar, branches and attachments.
$
Registry itembunx shadcn@latest add @nx-ui/ai-messageUsed byai-chat
User and assistant exchange
User turns bubble to the right; assistant turns render markdown inline.
Can I theme this for light and dark mode with a single set of classes?
Yes — you can absolutely use theme tokens for that. A few pointers:
- Reach for semantic colours like
text-muted-foregroundrather than raw palette values. - Both light and dark modes inherit from the same tokens, so you only style once.
- For code, wrap it in fences and it renders with syntax highlighting.
Let me know if you'd like an example component.
With an action toolbar
Hover-friendly actions for copying, regenerating and rating a response.
Theme tokens resolve per colour scheme, so you rarely need explicit dark: overrides. Style once and both modes stay in sync.
With attachments
File parts render as image thumbnails or file chips above the message.
Here are the mock and the spec — does the layout match the brief?
Branch switcher
Step through regenerated variants of the same answer.
Here's a concise version: use theme tokens, style once, and both modes just work.
API reference
Exported parts and their props, extracted from the component source.