Walk me through how the kit handles message bubbles.
AI
Each row is a Message with optional Avatar, Content, Text, and Action parts. Variants live on MessageText so you can mix bubble and plain segments.
N
What's the right way to render assistant streams?
AI
Wrap streaming text in a sibling like Markdown or ResponseStream. The Message itself stays presentational, so you only pay for parsing when you render it.
N
And actions go where?
AI
Inside MessageContent, after the text segments. MessageAction is just a layout row. Drop a Button with iconOnly and the ghost variant inside for the standard look.
N
Can I use my own avatar component?
AI
Yes, MessageAvatar accepts any children. A direct <img> child is sized to fill the slot, anything else lays out centered.
N
How does the Conversation manage scroll?
AI
It tracks distance from the bottom on the viewport element and exposes a context so the floating button can scroll to the latest message.
N
What if I want a flat list with no auto-scroll?
AI
Drop ConversationScrollButton entirely and the auto-stick still works, or stop calling scrollToBottom by editing the file. The kit copies into your repo.
N
Does it cooperate with virtualization?
AI
Not out of the box. If you need virtualization, render your own viewport via the render prop on ConversationContent. The behavior here is for moderate threads.
N
Where do I theme the scrollbar?
AI
By default the viewport uses native scroll. Pass render on Conversation and ConversationContent to swap in a custom scroll area like Base UI's ScrollArea.
N
Final question: does it handle reduced-motion preferences?
AI
scrollTo uses smooth by default. If a user has reduced-motion set, the browser already swaps it for instant. You can also pass behavior to scrollToBottom.