Chat
Conversation building blocks: scroller, message rows, bubbles, attachments, and markers.
The Chat components are the building blocks for conversational and AI
interfaces: a scroll container that gets streaming right, message rows, message
bubbles, file attachments, and inline status markers. They are ported from the
shadcn 2026-06 chat set
and adapted to Spark (Spark color scales and tokens, cn from cnfast, Base
UI useRender in place of Radix Slot/asChild, and MaterialSymbol icons),
so they share the same theming and primitives as the rest of
Spark UI.
MessageScroller builds on the headless
@shadcn/react
message-scroller primitive; the rest are plain composed elements.
Message Scroller
Chat scroll container: anchored turns, streaming, jump-to-message.
Message
A conversation row with avatar, alignment, header, and footer.
Bubble
The message surface, with variants, alignment, and reactions.
Attachment
File and image cards with media, metadata, and upload state.
Marker
Inline status updates, system notes, and labeled separators.