Chat bubble

In context

Purpose

ChatBubble makes a conversation legible at a glance — who said what, in order, without labels. It carries one short thought. When the content grows past a line or two, or needs a chart or an action, it wants to be a CoachMessage card, not a chat line.

Anatomy

• Bubble — a rounded container; the corner nearest the sender is tightened for a subtle "tail".
• Side + colour — user right on teal (white text); coach left on a quiet surface (or violet for AI).
• Timestamp (optional) — a small line under the bubble, aligned to the side.

Variants

• from="user" — right-aligned, teal, white text.
• from="coach" — left-aligned, quiet surface, dark text.
• from="coach" + tone="ai" — left, soft violet, for the Bizzy assistant.

Code

import { ChatBubble } from '@daytwo/components'

<ChatBubble from="coach" tone="ai" timestamp="9:41 AM">
Morning! Want to log today's first sale?
</ChatBubble>
<ChatBubble from="user" timestamp="9:42 AM">
Yes, rice 2 bags
</ChatBubble>

When to use

• A conversational thread (coaching, Bizzy Q&A).
• Short, back-and-forth messages where sender-at-a-glance matters.

When NOT to use

• Advice with proof or an action — use a CoachMessage.
• A one-off system notice — use an Alert.
• A long paragraph — break it up, or it's not really a chat message.

Good vs bad

• Good: a two-line coach question in violet, the user's short reply in teal on the right — the thread reads like a conversation without any "You:"/"Bizzy:" labels.
• Bad: a five-sentence explanation stuffed into one bubble — it stops looking like chat and buries the point; that content is a CoachMessage.

Edge cases

Tokens used