ConversationListparent
Messages are typically used within ConversationListMessage
Individual chat message display with role-based styling
Setup
import { Message } from '@fragments-sdk/ui';Examples
User Message
Message from the user (right-aligned)
Loading preview...
Assistant Message
Response from the AI assistant
Loading preview...
System Message
System notification or context
Loading preview...
Streaming
Message being streamed (with cursor)
Loading preview...
With Timestamp
Message with timestamp display
Loading preview...
Error State
Message that failed to send
Loading preview...
Custom Avatars
Messages with image-based avatars
Loading preview...
With Actions
Message with hover actions
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
roleRequired | enumuserassistantsystem | Not set | Message role determines styling and alignment |
childrenRequired | node | Not set | Message content |
status | enumsendingstreamingcompleteerror | complete | Message state |
timestamp | object | Not set | When the message was sent |
avatar | node | Not set | Custom avatar override (null to hide) |
actions | node | Not set | Hover actions (copy, regenerate) |
Usage Guidelines
When to use
- Displaying individual messages in a chat interface
- Building AI assistant or chatbot UIs
- Need role-based message styling (user vs assistant)
- Messages need actions like copy, regenerate, or feedback
When not to use
- Simple text display without chat context (use Text)
- Notification-style messages (use Alert or Toast)
- Comment threads with nested replies (use Card with custom layout)
Best practices
- Always provide a role prop to determine styling
- Use status prop to show message state (sending, streaming, error)
- Consider showing timestamps for longer conversations
- Provide hover actions for assistant messages (copy, regenerate)
Accessibility
- Uses semantic HTML for message structure
- Role-based styling has sufficient color contrast
- Actions are keyboard accessible
- Streaming indicator respects reduced motion preferences