Chat Message
View on StorybookStorybookDisplay chat messages from users, AI assistants, or system notifications. Perfect for building chat interfaces with full RTL support and customizable actions.
Preview
What's the capital of France?
The capital of France is Paris. It's known as the City of Light and is famous for its art, culture, cuisine, and iconic landmarks like the Eiffel Tower.
Installation
Usage
Examples
Message Roles
What's the weather like today?
I don't have access to real-time weather data, but I can help you find weather information!
Chat session started. Messages are end-to-end encrypted.
With Actions
Here's the code you requested. Feel free to copy it or ask me to regenerate a different version.
Compact Variant
Quick question
Quick response
Props
| Name | Type | Default | Description |
|---|---|---|---|
roleRequired | 'user' | 'assistant' | 'system' | — | The role/sender of the message |
contentRequired | string | — | The message content (supports markdown) |
variant | 'default' | 'compact' | 'default' | Visual style variant |
state | 'complete' | 'streaming' | 'error' | 'complete' | Message state for animations and styling |
timestamp | string | — | Optional timestamp to display |
avatar | string | — | Optional avatar URL |
name | string | — | Optional name/label for the sender |
showCopy | boolean | true | Show copy button |
showRegenerate | boolean | false | Show regenerate button (assistant only) |
onCopy | () => void | — | Callback when copy is clicked |
onRegenerate | () => void | — | Callback when regenerate is clicked |
isRTL | boolean | false | Whether text direction is RTL |
Accessibility
Screen Reader
The component uses semantic HTML with proper ARIA attributes. The role, timestamp, and content are all announced correctly.
Keyboard Navigation
- Tab: Navigate through action buttons
- Enter: Activate buttons (Copy, Regenerate)
RTL Support
Chat messages automatically adapt to RTL layout. User messages align to the end (right in RTL), and assistant messages to the start (left in RTL). Set isRTL prop for RTL-specific text.
LTR (English)
Hello! How can I help you today?
RTL (العربية)
مرحباً! كيف يمكنني مساعدتك اليوم؟
Use Cases
LLM conversation interfaces
Customer support chat UIs
Multi-turn dialogue displays
Team collaboration threads
Best Practices
Do
- ✓ Visually distinguish user and assistant messages
- ✓ Support markdown rendering in assistant responses
- ✓ Show timestamps for long conversations
Don't
- ✗ Don't make messages too wide — limit max-width for readability
- ✗ Don't lose scroll position during streaming
- ✗ Don't block interaction while a response is generating