Message Bubble
A chat message component with role-based alignment, avatar, timestamp, and optional AI suggestion chips for learning user preferences.
Interactive Chat Example
Try mentioning "cappuccino" or "coffee" in your message to see AI suggestions with confidence indicators:
Hello! How can I help you today?
Roles
Messages are aligned based on their role: user messages on the right, assistant messages on the left.
User Message
I always have cappuccino in the morning
Assistant Message
Got it! I'll remember that you prefer cappuccino in the morning.
Suggestions with Confidence Indicators
Assistant messages can include suggestion chips with confidence scores. Each suggestion displays a ConfidenceIndicator showing how certain the AI is about the detected preference. Users can accept or reject these suggestions to help the AI learn their preferences.
Based on our conversation, I noticed some preferences.
The ConfidenceIndicator inside each suggestion chip uses color-coded badges:
- •0.8 - 1.0 (Green): Very Confident - AI is highly certain about this preference
- •0.5 - 0.8 (Blue): Confident - AI is fairly certain
- •0.3 - 0.5 (Yellow): Learning - AI is still gathering information
- •0.0 - 0.3 (Gray): Uncertain - AI needs more context
Props
| Name | Type | Default | Description |
|---|---|---|---|
id* | string | - | Unique identifier for the message |
role* | 'user' | 'assistant' | - | The role of the message sender (affects alignment and styling) |
content* | string | - | The text content of the message |
timestamp* | Date | - | When the message was sent (displayed as relative time) |
avatar | { src?: string; fallback: string } | - | Avatar configuration with optional image source and fallback text |
suggestions | Suggestion[] | - | Array of AI-suggested preference chips (only shown for assistant messages) |
className | string | - | Additional CSS classes to apply |
Usage Guidelines
When to use
- •In chat interfaces for displaying individual messages
- •When building conversational UI with user and AI messages
- •For AI systems that learn user preferences through conversation
Best practices
- •Always provide meaningful avatar fallback text (2 characters work best)
- •Only show suggestions on assistant messages, never on user messages
- •Keep suggestion text concise (1-3 words)
- •Use confidence scores between 0.0 and 1.0 to indicate certainty
Accessibility
- •Uses semantic HTML with proper ARIA labels
- •Suggestion accept/reject buttons have descriptive aria-labels
- •Timestamps update automatically to show relative time
- •Avatar fallback text is always visible even if image fails to load
Do's and Don'ts
Do
- •Use clear, concise message content
- •Provide avatar fallback text (2 characters recommended)
- •Show suggestions only on assistant messages
- •Use accurate confidence scores for suggestions
Don't
- •Don't show suggestions on user messages
- •Don't use overly long suggestion text (keep it 1-3 words)
- •Don't forget to provide onAccept/onReject handlers for suggestions
- •Don't use confidence scores outside 0.0-1.0 range
Related Components
Chat Interface
Complete chat layout using MessageBubble
Confidence Indicator
ML confidence scores in suggestions
Avatar
User avatar with fallback
Chip
Tag component used for suggestions