MoonUI

Message Scroller

PRO

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

Unlock advanced capabilities with the Pro version

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-scroller

Usage

Pro Required
NV
Nova
Welcome back! I pulled the latest deploy logs for you.
09:30
MK
Maya
Thanks — did the migration step succeed this time?
09:31
NV
Nova
Yes, all 14 migrations ran cleanly and the health check is green.
09:31
MK
Maya
Great. Can you show me the slowest three endpoints from the last hour?
09:32
NV
Nova
Sure — /reports/export at 820ms, /search at 540ms, and /billing at 410ms.
09:32
MK
Maya
Let's add caching to the export route first.
09:33
NV
Nova
Good call. I drafted a 60-second edge cache with stale-while-revalidate.
09:33
MK
Maya
Ship it to staging and keep this thread updated as it streams.
09:34

Examples

Chat Container

PRO

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.

Pro Required
NV
Nova
Welcome back! I pulled the latest deploy logs for you.
09:30
MK
Maya
Thanks — did the migration step succeed this time?
09:31
NV
Nova
Yes, all 14 migrations ran cleanly and the health check is green.
09:31
MK
Maya
Great. Can you show me the slowest three endpoints from the last hour?
09:32
NV
Nova
Sure — /reports/export at 820ms, /search at 540ms, and /billing at 410ms.
09:32
MK
Maya
Let's add caching to the export route first.
09:33
NV
Nova
Good call. I drafted a 60-second edge cache with stale-while-revalidate.
09:33
MK
Maya
Ship it to staging and keep this thread updated as it streams.
09:34

Streaming Response

PRO

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.

Pro Required
Following bottom
NV
Nova
Welcome back! I pulled the latest deploy logs for you.
09:30
MK
Maya
Thanks — did the migration step succeed this time?
09:31
NV
Nova
Yes, all 14 migrations ran cleanly and the health check is green.
09:31

Bordered Variant and Top Anchor

PRO

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.

Pro Required
NV
Nova
Welcome back! I pulled the latest deploy logs for you.
09:30
MK
Maya
Thanks — did the migration step succeed this time?
09:31
NV
Nova
Yes, all 14 migrations ran cleanly and the health check is green.
09:31
MK
Maya
Great. Can you show me the slowest three endpoints from the last hour?
09:32
NV
Nova
Sure — /reports/export at 820ms, /search at 540ms, and /billing at 410ms.
09:32
MK
Maya
Let's add caching to the export route first.
09:33
NV
Nova
Good call. I drafted a 60-second edge cache with stale-while-revalidate.
09:33
MK
Maya
Ship it to staging and keep this thread updated as it streams.
09:34