Message Scroller

A chat transcript scroller with auto-scroll, new-turn anchoring, and history preservation for streaming conversations.

MessageScrollerProviderautoScroll · defaultScrollPosition · scrollPreviousItemPeek

MessageScrollerItemmessageId · scrollAnchor

MessageScrollerButtondirection: end (default) · start

Streaming chat — auto-scroll & turn anchoring

Can you explain how message scrolling works?

Sure! A message scroller keeps the transcript pinned to the newest content while you are at the bottom, and releases when you scroll up to read history.

What happens when a new message arrives?

New turns are anchored near the top of the viewport so the message you just sent stays visible, with a little peek of the previous turn for context.

Scroll up to read history — the scroll-to-end button appears while you're away from the live edge. New user turns anchor near the top of the viewport.

Tokens used

5 semantic tokens consumed by this component.

--backgroundBackground

bg-background

--foregroundForeground

text-foreground

--mutedMuted

bg-mutedtext-mutedborder-muted

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--borderBorder

border-borderborder