Chat
Conversation building blocks: scroller, message rows, bubbles, attachments, markers, and traces.
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, inline status markers, and assistant step
traces. They are ported from the
shadcn 2026-06 chat set
and the 2026-10 AI elements release
and adapted to Spark (Spark color scales and tokens, cn from cn, Base
UI useRender in place of Radix Slot/asChild, and Spark 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.
Trace
An assistant's steps with status and expandable detail.