Message Scroller
A scrollable container for chat messages with auto-scroll behavior and a scroll-to-bottom button.
Usage
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,
MessageScrollerContent,
MessageScrollerItem,
MessageScrollerButton,
} from "uilab-core"<MessageScrollerProvider>
<MessageScroller>
<MessageScrollerViewport>
<MessageScrollerContent>
<MessageScrollerItem>
{/* message content */}
</MessageScrollerItem>
</MessageScrollerContent>
</MessageScrollerViewport>
<MessageScrollerButton />
</MessageScroller>
</MessageScrollerProvider>MessageScroller must be wrapped in MessageScrollerProvider — omitting it throws "useMessageScroller must be used within a MessageScroller."
Dual buttons
Use two MessageScrollerButtons with direction="start" and direction="end" for two-way navigation.
Scrollable state
Use useMessageScrollerScrollable to read which directions have more content, and update surrounding UI accordingly.
All messages fit on the screen
Jump controls
Use useMessageScroller to drive the transcript from outside — jump to the start, end, or a specific message.
Visibility tracking
Use useMessageScrollerVisibility to detect which messages are currently in view — useful for read receipts or active-turn indicators.
Current message: — · Visible: 0