Message group
A run of consecutive same-direction messages, stacked tightly with a single timestamp and delivery line on the last bubble — the iMessage-style clustering that keeps a busy thread readable.
On my way — ETA about 15 minutes.
Traffic's light so maybe sooner.
See you soon 🔧
Mar 4Installation
npx shadcn@latest add @handset/message-groupInstalls message-bubble (and, transitively, delivery-status).
Usage
import { MessageGroup, groupMessages } from "@/components/handset/message-group";
{groupMessages(messages).map((run) => (
<MessageGroup key={run[0].id} messages={run} />
))}The groupMessages helper splits a flat, chronological list into same-direction runs. Pass each run to a MessageGroup.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | OutgoingMessage[] | — | Consecutive same-direction messages, in order. |
| className | string | — | Merged onto the group wrapper. |