Components / Chat
Chat
The chat stream vocabulary: MessageScroller keeps the conversation pinned to the live edge, and Marker divides the stream with separators like day markers. Row content (message bubbles) is owned by the consuming surface.
import { Marker, MarkerContent } from '@layers/ui/marker'
import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from '@layers/ui/message-scroller'Rendered stock
House rules
- Marker has three variants. variant="separator" centers the label between two rules, which is the day marker above. variant="border" rules underneath instead, for a label that heads the rows below it rather than parting them. The default is unruled: a bare line of muted text.
- In the product, ChatPane owns the MessageScroller; pages and features never mount their own scroller.
- Never hand-roll a scroll container or a stick-to-bottom hook. The scroller auto-follows, yields when the user scrolls up to read history, and offers jump-to-latest.
- Every row is wrapped in a MessageScrollerItem. Rows are labels, not scroll targets — the scroller sticks to the live edge and never jumps to an individual message.