Message Bubble

Chat bubbles for agent threads — an incoming and an outgoing side, delivery ticks, and a group wrapper for consecutive runs.

tsx

1import { MessageBubble, MessageGroup } from "@pestoui/core"

Incoming & outgoing

The corner nearest the speaker tightens to 6px, which is what reads as the tail.

Can you summarise last week's runs for me?

09:41

412 runs, 98.6% success rate. Want the failures broken down by connector?

09:41

One tick for sent, two for delivered, and two in blue once the message is read.

Queuing the run…

Sent

09:44

Delivered

09:44

Read

09:45

Wrap a run from one speaker in MessageGroup: only the last bubble keeps the tail and the avatar, and only the first shows the author.

Composer

I found three topics trending in your niche this morning.

Drafts are ready for each one — say the word and I'll schedule them.

09:38

Post the first two at 10.

Hold the third until I've read it.

09:39

Prop	Type	Default	Description
side	"incoming" \| "outgoing"	"incoming"	Which edge the bubble hugs, and whether it uses the secondary or the primary fill.
children	React.ReactNode	—	Message body inside the bubble.
timestamp	string	—	Tabular-nums stamp in the meta row below the bubble.
author	React.ReactNode	—	Speaker name above the bubble. Inside a MessageGroup only the first bubble shows it.
avatar	React.ReactNode	—	Avatar riding the bottom edge on the speaker's side.
status	"sending" \| "sent" \| "delivered" \| "read"	—	Delivery mark in the meta row — a spinner, then one, two, then two blue ticks.
className	string	—	MessageGroup — the wrapper takes standard div props; it tightens spacing and squares off the tails of every bubble but the last.

Pesto UI · 117 documented components