Here is a grouped chat message.
Grouped messages for a single participant. Place multiple Chat Bubbles together to form a conversation; use a different alignment, avatar, and theme-aware background for each participant.
| Prop | Type | Default | Description |
|---|---|---|---|
alignment | `"left" | "right"` | "left" |
avatar | { name: string; src?: string } | — | Optional participant identity. Omit it for an avatar-free group. |
messages | ChatBubbleMessage[] | required | Ordered messages. Only the final message time is displayed. |
background | string | — | Backwards-compatible custom colour used in both themes. |
lightBackground | string | — | Custom bubble colour used in light mode. |
darkBackground | string | — | Custom bubble colour used in dark mode. |
showMore | boolean | false | Enables a fixed-layout expandable message clamp. |
showMoreMaxLines | number | 5 | Lines visible before Show More expands the message. |
showMoreLabel | string | "Show more" | Expand action label. |
showLessLabel | string | "Show less" | Collapse action label. |
className | string | — | Optional class on the participant group. |
| Field | Type | Description |
|---|---|---|
id | `string | number` |
content | string | Message text. Triple-backtick fenced blocks render through Syntax Highlighter; **bold text** is rendered as strong text. |
time | ReactNode | Optional timestamp displayed below the group only for its final message. |
aria-expanded and aria-controls.pre > code content.Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…