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
Array of chat messages to display. Uses the standard UI message format from AI SDK.
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.
Function to scroll the list to the bottom.
Whether the user is currently scrolled to the bottom of the list.
Height of the chat container in pixels. Used for dynamic spacing calculations.
The role of the last message in the list. Affects spacing calculations.
