Jane Cooper
Morning! Did the Q3 numbers land?
Layout & Display
Chat message-thread primitives: a screen-reader-live MessageList and left/right-aligned Message bubbles with author, avatar, timestamp, delivery status, and continuation grouping.
| Prop | Type | Default | Description |
|---|---|---|---|
author | ReactNode | — | Sender name. Hidden when isContinuation. |
avatar | ReactNode | — | e.g. <Avatar />. Hidden when isContinuation. |
timestamp | ReactNode | — | Shown by the author, or under the bubble on a continuation. |
header / footer | ReactNode | — | Reply-to quote / reactions / attachments. |
header | ReactNode | — | Pinned above the messages (a "load earlier" button, a date divider). |
author
ReactNode
Default: —
Sender name. Hidden when isContinuation.
avatar
ReactNode
Default: —
e.g. <Avatar />. Hidden when isContinuation.
timestamp
ReactNode
Default: —
Shown by the author, or under the bubble on a continuation.
header / footer
ReactNode
Default: —
Reply-to quote / reactions / attachments.
header
ReactNode
Default: —
Pinned above the messages (a "load earlier" button, a date divider).
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "end" | start | "end" right-aligns — use for the current user. |
align
"start" | "end"
Default: start
"end" right-aligns — use for the current user.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "bubble" | "plain" | bubble | Speech bubble or flat row (system notices). |
color | "default" | "primary" | "neutral" | "success" | "warning" | "danger" | default | Bubble tint. An align=end bubble is primary-tinted automatically. |
variant
"bubble" | "plain"
Default: bubble
Speech bubble or flat row (system notices).
color
"default" | "primary" | "neutral" | "success" | "warning" | "danger"
Default: default
Bubble tint. An align=end bubble is primary-tinted automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
isContinuation | boolean | false | Same author as the previous message — drops the avatar/author line, tightens spacing. |
status | "sending" | "sent" | "delivered" | "read" | "failed" | — | Delivery indicator under an align=end message. |
isContinuation
boolean
Default: false
Same author as the previous message — drops the avatar/author line, tightens spacing.
status
"sending" | "sent" | "delivered" | "read" | "failed"
Default: —
Delivery indicator under an align=end message.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | { base?, avatar?, meta?, author?, timestamp?, body?, footer?, status? } | — | Slot classes. |
classNames | { base?, inner? } | — | Slot classes. |
classNames
{ base?, avatar?, meta?, author?, timestamp?, body?, footer?, status? }
Default: —
Slot classes.
classNames
{ base?, inner? }
Default: —
Slot classes.
| Prop | Type | Default | Description |
|---|---|---|---|
isLive | boolean | true | role="log" + aria-live="polite" so appended messages are announced. Set false for a static transcript. |
isLive
boolean
Default: true
role="log" + aria-live="polite" so appended messages are announced. Set false for a static transcript.