Message Scroller
Smooth autoscroll container for streaming chat messages.
Smooth autoscroll container for streaming chat messages. Automatically scrolls down as new content streams in unless the user manually scrolls up.
tsx
import { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton,} from "@celestia-project/ui/composite/message-scroller"
export function ChatScroller() { return ( <MessageScrollerProvider> <MessageScroller className="h-[400px]"> <MessageScrollerViewport> <MessageScrollerContent> <MessageScrollerItem messageId="1"> {/* Chat message content */} </MessageScrollerItem> </MessageScrollerContent> </MessageScrollerViewport> <MessageScrollerButton /> </MessageScroller> </MessageScrollerProvider> )}Subcomponents
| Component | Description |
|---|---|
MessageScrollerProvider | Context provider managing scroll positions and visibility state |
MessageScroller | Root container for the message scroller |
MessageScrollerViewport | Scrollable viewport element with overflow handling |
MessageScrollerContent | Inner content wrapper that manages spacer offsets |
MessageScrollerItem | Individual message item with optional scrollAnchor and messageId |
MessageScrollerButton | Floating scroll-to-bottom / scroll-to-top button |
Hooks
useMessageScroller()— returns{ scrollToEnd, scrollToMessage, scrollToStart }useMessageScrollerScrollable()— returns{ start: boolean, end: boolean }useMessageScrollerVisibility()— returns{ currentAnchorId, visibleMessageIds }