Message Scroller

A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.

Message Scroller

A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.

Preview

New Chat

How can I help you today?

I'm building a chat app and the scroll behavior is jumping around when streaming responses.

Wrap your message list in MessageScroller — the viewport pins to the bottom as new messages arrive.

Does auto-scroll pause if I scroll up to read earlier history?

Yes! The moment you scroll up, auto-scroll pauses and MessageScrollerButton appears so you can return anytime.

Press send to test auto-scrolling behavior.

Installation

pnpm dlx vibe-ui-kit@latest add message-scroller message input button dropdown-menu

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: message, input, button, dropdown-menu

Streaming

Simulates real-time AI response token streaming (word-by-word text assembly). MessageScroller continuously keeps the viewport pinned to the live edge as text expands.

Streaming Messages

Auto-scroll follows the live edge as tokens stream in word-by-word.

How does MessageScroller handle live streaming AI text?

MessageScroller detects new content as tokens land in the viewport. When autoScroll is active, it automatically keeps the newest text in view without jarring page shifts.

Streaming is simulated word-by-word. Auto-scroll follows the live text edge.

Props