Skip to content

Message Scroller

The scrolling list of a conversation. It opens at the newest message, follows new ones while you're at the end, and stops following when you scroll up to read. A button takes you back.

Sourcecomponents/message-scroller.tsx
Assistant
Message 1: here's the next step of the build, with the tokens applied.
Assistant
Message 2: here's the next step of the build, with the tokens applied.
You
Message 3: looks good, keep going.
Assistant
Message 4: here's the next step of the build, with the tokens applied.
Assistant
Message 5: here's the next step of the build, with the tokens applied.
You
Message 6: looks good, keep going.
Assistant
Message 7: here's the next step of the build, with the tokens applied.
Assistant
Message 8: here's the next step of the build, with the tokens applied.
You
Message 9: looks good, keep going.
Assistant
Message 10: here's the next step of the build, with the tokens applied.
Today
Assistant
Message 11: here's the next step of the build, with the tokens applied.
You
Message 12: looks good, keep going.
Assistant
Message 13: here's the next step of the build, with the tokens applied.
Assistant
Message 14: here's the next step of the build, with the tokens applied.
You
Message 15: looks good, keep going.
Assistant
Message 16: here's the next step of the build, with the tokens applied.
Assistant
Message 17: here's the next step of the build, with the tokens applied.
You
Message 18: looks good, keep going.
Assistant
Message 19: here's the next step of the build, with the tokens applied.
Assistant
Message 20: here's the next step of the build, with the tokens applied.

Usage

Message Scroller usage
import { Bubble, BubbleContent } from "@/components/bubble";import { Message, MessageContent } from "@/components/message";import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "@/components/message-scroller";
export function MessageScrollerUsage({ messages }: { messages: { id: string; text: string }[] }) {  return (    <MessageScrollerProvider>      <MessageScroller className="h-96">        <MessageScrollerViewport>          <MessageScrollerContent>            {messages.map((message) => (              <MessageScrollerItem key={message.id} messageId={message.id}>                <Message>                  <MessageContent>                    <Bubble variant="secondary">                      <BubbleContent>{message.text}</BubbleContent>                    </Bubble>                  </MessageContent>                </Message>              </MessageScrollerItem>            ))}          </MessageScrollerContent>        </MessageScrollerViewport>        <MessageScrollerButton />      </MessageScroller>    </MessageScrollerProvider>  );}

When to use

Use when

The scrolling list of a conversation: it opens at the newest message, follows new ones while the user is at the end, and offers Scroll to end. Requires @shadcn/react

Don’t use when

A feed that isn't a conversation, or a short static list (let the page scroll)