Message
Markdown for agentsA chat message component that displays messages from users, assistants, or system prompts with optional avatars.
npx slipstream-ui@latest add messagePlayground
U
You
Hello, how are you today?
Roles & streaming
U
You
Hello, how are you?
A
Assistant
I'm doing well, thank you!
system
System initialized
A
Assistant
Generating a response token by tok
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | Message | required | The message object with role, content, and metadata |
| showAvatar | boolean | true | Whether to show the avatar |
| avatarSrc | string | undefined | Custom avatar image URL |
| avatarFallback | string | undefined | Fallback text for avatar |
| userLabel | string | 'You' | Display name for user messages (localization) |
| assistantLabel | string | 'Assistant' | Display name for assistant messages (localization) |
| renderContent | (content: string) => ReactNode | undefined | Custom content renderer (e.g. markdown); replaces plain-text rendering |
| isStreaming | boolean | false | Shows a typing cursor and sets aria-busy while generating |
Accessibility
- Message role and content are announced by screen readers
- Avatar has proper alt text from fallback or role
- System messages have distinct visual styling
- Timestamps are properly formatted for accessibility