Components / Chat
Chat
The chat vocabulary: MessageScroller keeps the conversation pinned to the live edge, Message and Bubble render each row, and Marker divides the stream with separators like day markers.
import { Bubble, BubbleContent } from '@layers/ui/bubble'
import { Marker, MarkerContent } from '@layers/ui/marker'
import { Message, MessageContent } from '@layers/ui/message'
import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from '@layers/ui/message-scroller'Rendered stock
House rules
- In the product, ChatPane owns the MessageScroller; pages and features never mount their own scroller.
- Never hand-roll a scroll container, a stick-to-bottom hook, or a chat bubble div. 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; user-sent messages set scrollAnchor so sending snaps the view to them.