Chat

MessageBubble

MessageBubble — a single chat message, tokenised and a11y-clean. Two complementary forms share one styled container: - **Bare bubble** (the common case for a message list that renders its own author/time/reactions around each row): opt into the styling axes by passing `variant` and/or `own` (plus `content` or a `children` snippet). No header or labelled group is rendered — unless you also pass an `author` — so it nests cleanly inside an already-labelled message row without a redundant landmark. - **Self-contained card** (legacy form): pass `role` / `author` / `timestamp` (and optionally the `reactions` / `actions` snippets) without the styling axes. A header and a labelled `role="group"` (`<author|role> (<role>)`) are rendered so assistive tech can announce who sent each message; `author` falls back to a role label ("You" / "Assistant" / "System"). `variant` + `own` are the canonical styling axes. The legacy `role` prop sets the header's role label and derives `variant`/`own` when those are not given.

Public export

typescript

import { MessageBubble } from '@happyvertical/smrt-ui/chat';

Import path: @happyvertical/smrt-ui/chat
Props: 10
Props described: 10 of 10
Bindable state: 0
Callback events: 0
Verified release: 0.44.0

Props

NameTypeRequiredDescription

variantMessageBubbleVariantNoVisual tone. Canonical styling axis.

ownbooleanNoWhether the current viewer authored this message — drives alignment + own-color.

roleChatMessageRoleNoLegacy role. Prefer `variant` + `own`. Sets the header's role label and, when `variant`/`own` are unset, derives them (user → own default, agent → agent, system → system).

contentstringNoPlain-text body. Ignored when a `children` snippet is provided.

childrenSnippetNoBody snippet (takes precedence over `content`).

authorstringNoDisplay name of the sender. When set, a header + labelled group render.

timestampDateNoMessage time; rendered in a `<time datetime>` element in the header.

timestampLabelstringNoOverride the visible timestamp text (defaults to a locale time).

reactionsSnippetNoOptional reactions row (e.g. a `ReactionPicker` or reaction chips).

actionsSnippetNoOptional per-message actions (reply, copy, …).

Bindable state

This component has no bindable public state.

Callback events

This component declares no callback event props.

Public export

Props

Bindable state

Callback events

Examples and explanation