Chat Message
Display 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 Considerations
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 (العربية)
مرحباً! كيف يمكنني مساعدتك اليوم؟
Related Components
Input component for sending chat messages
Action buttons for chat messages
Loading state for AI responses