Messagechild
ConversationList contains Message componentsConversationList
Scrollable message container with auto-scroll and history loading
Setup
import { ConversationList } from '@fragments-sdk/ui';Examples
Basic
Simple conversation with messages
Loading preview...
With Date Separators
Messages grouped by date
Loading preview...
With Typing Indicator
Shows assistant is typing
Loading preview...
Loading History
Loading older messages
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Message components |
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 |
Usage Guidelines
When to use
- Building a chat interface with multiple messages
- Need auto-scroll behavior when new messages arrive
- Require infinite scroll for loading message history
- Want date separators between message groups
When not to use
- Simple list of items without chat context (use List)
- Single message display (use Message directly)
- Non-scrolling message layout
Best practices
- Use autoScroll="smart" for best UX (only auto-scrolls when near bottom)
- 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
- Uses proper ARIA roles for separators
- Typing indicator has aria-label
- Smooth scroll respects reduced motion preferences
- Keyboard navigation works within scrollable container