Conversation

Message scroller

A transcript viewport that follows the live edge until the reader scrolls away, with a control to return.

How far back does the transcript go?
All of it. The viewport keeps the reader at the live edge while they are there, and lets go the moment they scroll away.
What happens when a reply streams in while I am reading history?
Nothing moves. Following resumes only when the reader returns to the bottom, by scrolling or by pressing the button.
And the button?
It fades in once the reader leaves the live edge, and hands focus back to the viewport when it hides.
Does it fight a fast stream?
No. A return animation retargets as content grows, and any upward move cancels it rather than dragging the reader down.
Keyboard?
The viewport is the tab stop, so arrow keys and Page Up work without a mouse.

Installation

npx shadcn@latest add https://nessalabs.ai/r/message-scroller.json

Behaviours

Covered by the component's storybook.

Live TranscriptManual Browse