Message Scroller
A stick-to-bottom scroll container for AI chat threads. As streamed tokens and new messages arrive it keeps the newest content pinned to the bottom, and it releases the moment the reader scrolls up — with an optional scroll-to-bottom button, top/bottom anchoring, and an accessible live log region.
Pro features
What the Pro version adds to this component.
Stick-to-Bottom Streaming
Newly appended tokens and messages keep the newest content pinned to the bottom edge, so streamed AI responses stay in view automatically
Auto-Release on Scroll
The moment the reader scrolls up, following pauses and onFollowChange fires — no more fighting the scrollbar to read earlier context
Scroll-to-Bottom Button
An optional floating button appears while following is paused and jumps back to the newest message with a single click
Bottom or Top Anchor
Anchor to the bottom for classic chat, or to the top for feeds that grow downward and load older history above
Observer-Driven Growth
Content growth is detected with a ResizeObserver plus a MutationObserver — no requestAnimationFrame loop and fully SSR-safe
Accessible Log Region
role=log with aria-live announces new messages to screen readers, while token-based surfaces handle dark mode automatically
Installation
Install via CLI
npx @moontra/moonui-cli add message-scrollerUsage
Examples
Chat Container
Give the scroller a fixed height (h-[400px]) and it becomes a scrollable chat window around a column of real Message rows. With showScrollButton, scrolling up reveals a floating button that jumps back to the newest message and re-enables following.
Streaming Response
The core AI-chat behavior: press Stream response to append an assistant message that grows token by token. While you are at the bottom the scroller stays pinned to the newest text; scroll up mid-stream and it releases (the indicator flips to Paused) so you can read earlier context without being yanked down. onFollowChange drives that indicator.
Bordered Variant and Top Anchor
The bordered variant frames the thread with a rounded border and background surface. Set anchor="top" for feeds that grow downward or load older history above — new content sticks to the top edge instead of the bottom, and the scroll-to-bottom button (bottom-only) is hidden.