ConversationList

Setup

import { ConversationList } from '@usefragments/ui';

Loading preview...

Prop	Type	Default	Description
`children`Required	`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

Use autoScroll="smart" for best UX (only auto-scrolls when near bottom)
Set showAvatars={false} for avatarless transcripts; messages remove their outer inline inset automatically
Conversation chrome uses neutral surfaces and the body foreground; reserve brand accent for actions or semantic state
Implement onScrollTop for loading older messages
ConversationList composes your onScroll handler with internal auto-scroll/history logic
Provide an emptyState for new conversations
Use DateSeparator between messages from different days

Accessibility