Message Scroller
A scrollable container for chat messages with auto-scroll behavior and a scroll-to-bottom button.
"use client"
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,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.
"use client"
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,Scrollable state
Use useMessageScrollerScrollable to read which directions have more content, and update surrounding UI accordingly.
All messages fit on the screen
"use client"
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,Jump controls
Use useMessageScroller to drive the transcript from outside — jump to the start, end, or a specific message.
"use client"
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,Visibility tracking
Use useMessageScrollerVisibility to detect which messages are currently in view — useful for read receipts or active-turn indicators.
Current message: — · Visible: 0
"use client"
import {
MessageScrollerProvider,
MessageScroller,
MessageScrollerViewport,