Message Scroller

Powered by

Shadcn UI@shadcn/react

Installation

Usage

MessageScroller owns conversation scroll behavior without owning messages, AI state, transport, persistence, or model state.

import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/redpanda-ui/components/message-scroller"

<MessageScrollerProvider autoScroll defaultScrollPosition="end">
  <MessageScroller>
    <MessageScrollerViewport>
      <MessageScrollerContent>
        {messages.map((message) => (
          <MessageScrollerItem
            key={message.id}
            messageId={message.id}
            scrollAnchor={message.startsTurn}
          >
            <Message>{/* message content */}</Message>
          </MessageScrollerItem>
        ))}
      </MessageScrollerContent>
    </MessageScrollerViewport>
    <MessageScrollerButton />
  </MessageScroller>
</MessageScrollerProvider>

Anatomy

MessageScrollerProvider
└── MessageScroller
    ├── MessageScrollerViewport
    │   └── MessageScrollerContent
    │       └── MessageScrollerItem…
    └── MessageScrollerButton

Behavior

• Anchors a new turn near the start of the viewport while preserving prior context.
• Follows streamed content only while the reader remains at the live edge.
• Stops following after scroll, touch, keyboard, or selection intent.
• Preserves position when earlier history is prepended.
• Supports start, end, and last-anchor restoration.
• Exposes commands and visibility state through useMessageScroller, useMessageScrollerScrollable, and useMessageScrollerVisibility.

Give every MessageScrollerItem a stable messageId when using jump or visibility APIs. Mark only the first item in a turn with scrollAnchor.

Scroll fade

The registry theme includes the full scroll-fade utility family for block, inline, and individual edges, including configurable fade sizes and reduced browser fallbacks. MessageScrollerViewport uses a bottom-edge fade by default.

Accessibility

The viewport defaults to a focusable region named “Messages”. Content defaults to a live log with aria-relevant="additions". Override labels when multiple conversations appear on one page.

Credits

• Styled wrapper based on Shadcn UI Message Scroller.
• Scroll behavior provided by the MIT-licensed @shadcn/react package.