Animated Chat Bubble

Conversation

The pieces assembled into a messenger thread — set the side once on the ChatBubble root and the children read it from context.

Setvariant="sent"

on the root to align the row right — it also unlocks color on ChatMessage and the ticks on ChatTimestamp.

variant="received"

is the default: aligns left and forces the neutral zinc bubble whatever color says.

color="blue"

on ChatMessage picks the sent-bubble fill — primary, default, blue, indigo, rose or emerald, not an arbitrary hex.

status="read"

on ChatTimestamp adds the blue double tick after the time.

fallback="SJ"

on ChatAvatar is required — the initials show until src loads, and stay if it fails.

Message grouping

layout="default"

is the default — a fully rounded 16px bubble with a visible avatar, for a standalone message.

Uselayout="group-top"

on the first bubble of a run: the bottom inner corner tightens to 4px and the avatar is hidden.

layout="group-middle"

tightens both inner corners and hides the avatar.

layout="group-bottom"

closes the run — tightens the top inner corner and brings the avatar back. The corners mirror automatically for sent bubbles.

Timestamps & read receipts

Passtime="10:25 AM"

as a plain string — required, and formatted by you, so Just now works in the same slot.

status="sent"

renders one grey tick.

status="delivered"

renders two grey ticks.

status="read"

renders two blue ticks.

status

left off shows the time alone — which is also what a received bubble does whatever you pass.

Typing indicator

ChatTypingIndicator takes no props of its own — it draws its own pill and loops until you unmount it.

variant="received"

on the root gives the dots a zinc pill, cornered to the left.

variant="sent"

inverts it — dark pill, light dots, cornered to the right.