Chat bubbles
Chat message bubble components for real-time conversations, offers, images, and notifications.
Text messages
Text bubbles show sent messages (green, right-aligned) and received messages (card background, left-aligned). Sent messages include delivery status indicators (single check = sent, double check = delivered/seen).
Delivery status
Sent, delivered, and seen states are shown with check mark icons next to the timestamp.
Image messages
Check out this vintage bag!
Image bubbles support single and multi-image layouts. Single images display full-width; multiple images use a 2-column grid. Click to expand in a dialog. Captions appear below the image when content is not empty.
Image error state
When photos fail to load or the entity has no valid image URLs, a graceful fallback message is displayed.
Notification bubble
Notification bubbles use a blue border and background. They display a "Notification" badge and optionally include a CTA button that opens an external link.
Offer bubble (actionable)
When you receive a new offer, the bubble shows accept, decline, and counter buttons. Uses variant="primary", variant="destructive", and variant="secondary" button variants.
Offer states
Received — pending
Received — accepted
Received — rejected
Received — countered
Received — expired
Received — cancelled
Offer bubbles use semantic design tokens for each state: yellow for pending, green for accepted, red for declined, purple for countered, and muted for expired/cancelled.
Offer sender view
Sent — waiting
Sent — accepted
Sent — declined
Sent — countered
The sender's view uses muted badge colors to differentiate from the recipient's view. A "waiting for response" message shows only while pending.
Full conversation
Hi! I'm interested in your bag
Hi Ana! Yes it's available
Can you send more photos?
Here you go! It's in great condition
New offer
A typical conversation mixing text messages, images, and offer bubbles. Messages flow naturally with sender names shown only on the first message in a group.