Messaging
Chat bubble components for conversation UIs — text messages, file attachments, typing indicators, and emoji reactions. Supports both incoming (left) and outgoing (right) sides.
Text messages
Incoming messages show an avatar with optional online status dot. Outgoing messages align to the right with the primary colour bubble.
Reactions
Pass a reactions array to append emoji reaction pills below any bubble. Omit count to show just the emoji.
File attachments
Set type="file" and pass an attachment object with name, size, and optional fileType ("image" or "document").
Typing indicator
Set type="typing" to render an animated three-dot bubble, signalling that the other person is composing a reply.
MessageReaction
The standalone MessageReaction pill — emoji only or with a count. Can be used independently for custom reaction toolbars.
Conversation thread
Composing multiple ChatMessage items with a gap between them forms a complete conversation thread.