ChatBubble
Conversational message bubble with sender alignment, avatar integration, timestamp display, and delivery status indicators
ChatBubble Component
Conversation UI blocks for chat interfaces, support tools, and collaboration surfaces.
Basic Usage
Render a single incoming message with sender and timestamp.
Implementation Notes
Keep setup minimal so teams can adopt the component quickly.
- - Start with clear sender identity and timestamp.
- - Keep incoming message width readable on mobile screens.
- - Avoid mixing status indicators in basic examples.
Normal Usage
Show outgoing messages with delivery state.
Implementation Notes
This pattern maps to everyday support chats and collaboration workflows.
- - Use `isMe` to make ownership obvious at a glance.
- - Pair sent messages with status for delivery confidence.
- - Keep language short to avoid visual clutter.
Advanced Usage
Use variants and status transitions for richer chat feedback.
Implementation Notes
Advanced mode should compose cleanly with app state and callbacks.
- - Reserve color variants for meaningful conversation states.
- - Keep status progression deterministic for reliability.
- - Test long messages and wrapping edge cases.
Real-Life Use Cases
Great for support desks and in-app team messaging experiences.
Implementation Notes
Show how the component fits real workflows, not isolated UI demos.
- - Model both bot and human messages in support timelines.
- - Keep time context visible for operational accountability.
- - Include realistic escalation and follow-up messages.
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support