actions | ReactNode | — | Actions slot beside the content: real Buttons, a ButtonGroup, or a Toolbar. On hover-capable pointers it fades in
on hover and whenever focus is inside it; touch and keyboard users always reach it. Message adds no role. |
animated | boolean | — | Fades and slides the message in when it mounts. Defaults to false; a virtualized list should leave it off. |
aria-description | LocalizedMessage | — | Extended description for assistive tech. |
aria-label | LocalizedMessage | — | Accessible name when the visible label is insufficient. |
aria-placeholder | LocalizedMessage | — | Hint for an empty control. |
as | "div" | "article" | "li" | — | Host tag. Defaults to div. Use li inside a list and article inside a feed. |
attachments | ReactNode | — | Attachments slot, below the content. Message lays it out and gives it no semantics. |
author | MessageAuthor | — | Who wrote the message. Sets the side of the row, the side of the rule, and the rule paint.
Not set: the side follows from. |
authorName | MessageLabel | — | Visible author name. |
authorRole | MessageLabel | — | Visible author role, such as a call-taker or responder label. |
avatar | ReactNode | — | Avatar slot, usually a decorative Avatar beside the visible name. It sits at the author's side of the
content. The default plain look shows no avatar, so omit it there; omit it from the messages of a run that
should not repeat it. |
children | ReactNode | — | Message content. Use {@link MessageHighlight } and {@link MessageRedaction } inside it. It renders in a block
container with dir="auto", so rich children such as links and tokenized text are allowed. |
className | string | — | Classes appended after the generated classes. |
contentLang | string | — | Language of children as a BCP 47 tag, so assistive technology pronounces it.
Language of children as a BCP 47 tag. |
data-align | undefined | — | — |
data-checked | undefined | — | — |
data-copy-status | undefined | — | — |
data-dirty | undefined | — | — |
data-disabled | undefined | — | — |
data-dragging | undefined | — | — |
data-ending-style | undefined | — | — |
data-expanded | undefined | — | — |
data-filled | undefined | — | — |
data-focus-visible | undefined | — | — |
data-focused | undefined | — | — |
data-highlighted | undefined | — | — |
data-hovered | undefined | — | — |
data-indeterminate | undefined | — | — |
data-instant | undefined | — | — |
data-invalid | undefined | — | — |
data-is-new | undefined | — | — |
data-loading | undefined | — | — |
data-nested | undefined | — | — |
data-open | undefined | — | — |
data-orientation | undefined | — | — |
data-overflow | undefined | — | — |
data-placeholder | undefined | — | — |
data-popup-open | undefined | — | — |
data-pressed | undefined | — | — |
data-readonly | undefined | — | — |
data-required | undefined | — | — |
data-scrolling | undefined | — | — |
data-selected | undefined | — | — |
data-side | undefined | — | — |
data-starting-style | undefined | — | — |
data-touched | undefined | — | — |
data-valid | undefined | — | — |
from | MessageRole | — | Role of the sender, as in the AI SDK. Does not change the side when author is set.
Role of the sender, as in the AI SDK. A user message is outgoing; the other roles are incoming. |
group | MessageGroup | — | Position in a run of consecutive messages from one author. Defaults to {@link MessageGroup.Single}. |
highlighted | boolean | — | The whole message is the current focus of a surrounding view, such as the match a search stepped to. |
identity | MessageIdentity | — | Who is speaking, as a name with an optional picture, glyph, and color. It draws the avatar (unless avatar is
passed) and names the author (unless authorName is passed). Use it for a person or an agent that has a picture
or a glyph; use avatar for any other avatar. |
meta | ReactNode | — | Free-form metadata after the timestamp, such as "Worked for 5m 26s". Placed like timestamp: in the author line,
or in the caption when the author is hidden. |
metaPlacement | MessageMetaPlacement | — | Where timestamp and meta sit in the author line: after the name (default) or beneath it. Ignored when
showAuthor is false. |
onRetry | MouseEventHandler<HTMLButtonElement> | — | Not allowed without {@link MessageStatus.Failed}.
Called when the retry Button is activated. |
originalLabel | LocalizedMessage | — | Not allowed without translatedContent.
Announced before the second text (children), such as "Original message". Name whatever children holds. |
parts | ReactNode | — | Parts slot, under the content and above the attachments: structured parts of the turn such as a confirmation, a
task, a source list, or an artifact. The caller orders them. Message lays them out and gives them no semantics. |
reasoning | ReactNode | — | Reasoning slot, above the content: a collapsible account of how the message was produced. Message lays it out and
gives it no semantics. |
ref | Ref<HTMLElement> | — | Ref to the root element. |
reserveAvatar | boolean | — | Keeps the avatar column's width when there is no avatar, so a run of messages stays aligned. |
retryLabel | LocalizedMessage | — | Not allowed without {@link MessageStatus.Failed}.
Label of the retry Button. |
selected | boolean | — | The message is selected, such as the line a recording is playing. |
showAuthor | boolean | — | Whether the avatar and the author line are drawn. Defaults to true. A layout that tells speakers apart by side
can hide them: the name stays in the accessibility tree, and timestamp and meta become a caption under the
content. |
status | MessageStatus | — | No delivery state shows.
Delivery state. |
statusLabel | LocalizedMessage | — | Not allowed without a status.
Names the state, such as "Sending" or "Sent". Visible for sending, available to assistive technology for sent.
Visible failure text, such as "Not sent". |
tabIndex | -1 | — | Only -1: a list may focus a message programmatically; a message is not a tab stop. |
timestamp | ReactNode | — | Time slot. Pass a Time element holding the localized text so the machine-readable instant stays in
dateTime. Message formats nothing. |
title | LocalizedMessage | — | Native tooltip; accessibility hint, not visible UI title text. |
translatedContent | ReactNode | — | Not set.
The text that shows first. By default the translation. |
translatedLang | string | — | Not allowed without translatedContent.
Language of translatedContent as a BCP 47 tag. |
variant | MessageVariant | — | Plain transcript line or bubble. Defaults to {@link MessageVariant.Plain}. |