The MessageList component handles the display and scroll behavior of chat messages. It provides intelligent auto-scroll management, loading states, and UX features like a “scroll to bottom” button when users scroll up.

​
Installation

Install the MessageList component using the shadcn CLI: 
pnpm dlx shadcn@latest add https://registry.intface.io/message-list.json

​
Usage

import { MessageList } from "@/components/chat/message-list";
import { useRef, useState } from "react";

export default function Chat() {
  const [messages, setMessages] = useState([]);
  const [status, setStatus] = useState("idle");
  const messageListRef = useRef(null);
  const lastUserMessageRef = useRef(null);
  const lastAssistantMessageRef = useRef(null);
  const bottomSentinelRef = useRef(null);
  const [isAtBottom, setIsAtBottom] = useState(true);

  const scrollToBottom = () => {
    bottomSentinelRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <MessageList
      messages={messages}
      status={status}
      ref={messageListRef}
      lastUserMessageRef={lastUserMessageRef}
      lastAssistantMessageRef={lastAssistantMessageRef}
      bottomSentinelRef={bottomSentinelRef}
      scrollToBottom={scrollToBottom}
      isAtBottom={isAtBottom}
      chatContainerHeight={800}
    />
  );
}

​
Props

​
messages
UIMessage[]
required
Array of chat messages to display. Uses the standard UI message format from AI SDK.
​
status
ChatStatus
required
The current chat status. Controls loading indicators and UI states.
​
ref
React.RefObject<HTMLDivElement>
required
Reference to the main scrollable container element.
​
lastUserMessageRef
React.RefObject<HTMLDivElement>
required
Reference to the last user message element for scroll positioning.
​
lastAssistantMessageRef
React.RefObject<HTMLDivElement>
required
Reference to the last assistant message element for scroll positioning.
​
bottomSentinelRef
React.RefObject<HTMLDivElement>
required
Reference to the bottom sentinel element used for scroll detection.
​
scrollToBottom
() => void
required
Function to scroll the list to the bottom.
​
isAtBottom
boolean
required
Whether the user is currently scrolled to the bottom of the list.
​
chatContainerHeight
number
Height of the chat container in pixels. Used for dynamic spacing calculations.
​
lastMessageRole
'user' | 'assistant'
The role of the last message in the list. Affects spacing calculations.