Stacks chat messages in a scroller that follows new arrivals.
import { ConversationList } from "@/fragments/ui";Source<ConversationList>
<Message role="user">
<Message.Content>Hello!</Message.Content>
</Message>
<Message role="assistant">
<Message.Content>Hi there! How can I help you today?</Message.Content>npx @usefragments/cli add conversationlistWrites src/fragments/ui/components/ConversationList plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
ConversationList is a compound: import the root and reach its parts through dot notation.
ConversationList.DateSeparatorConversationList.TypingIndicatorA labelled rule marks where one day ends.
<ConversationList>
<ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />
<Message role="user">
<Message.Content>A message from yesterday</Message.Content>
</Message>
<ConversationList.DateSeparator date={new Date()} />Turns sit flush when nothing needs an avatar gutter.
<ConversationList showAvatars={false}>
<Message role="user">
<Message.Content>Hello!</Message.Content>
</Message>
<Message role="assistant">
<Message.Content>How can I help?</Message.Content>Animated dots hold the reply's place before it lands.
<ConversationList>
<Message role="user">
<Message.Content>What is TypeScript?</Message.Content>
</Message>
<ConversationList.TypingIndicator name="Assistant" />
</ConversationList>A spinner pins to the top while older turns load.
<ConversationList loadingHistory>
<Message role="user">
<Message.Content>This is the latest message</Message.Content>
</Message>
</ConversationList>A fresh conversation shows its placeholder instead of blank space.
<ConversationList
emptyState={
<EmptyState>
<EmptyState.Title>No messages yet</EmptyState.Title>
<EmptyState.Description>
Ask a question to get started.Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Message components |
showAvatars | boolean | true | Show avatars for messages and typing indicators in this conversation |
autoScroll | union | smart | Auto-scroll behavior: true (always), false (never), or "smart" (only when near bottom) |
onScrollTop | function | Not set | Callback when user scrolls to top (for loading history). Receives the scroll event. |
loadingHistory | boolean | false | Show loading spinner at top when loading history |
emptyState | node | Not set | Content to show when conversation is empty |
scrollTopThreshold | number | 50 | Pixels from top to trigger onScrollTop |
scrollBottomThreshold | number | 100 | Pixels from bottom for smart auto-scroll |