Message Parts

InstallCopy Anchor Link

pnpm exec vegastack-design verify message-parts

pnpm dlx shadcn@4.21.0 add @vegastack/message-parts

UsageCopy Anchor Link

import { Citation } from "@/components/ui/cited-list";
import { Message, MessageContent } from "@/components/ui/message";
import {
  MessageActions,
  MessageDisclaimer,
  MessageSources,
  MessageStep,
  MessageSteps,
} from "@/components/ui/message-parts";

<Message>
  <MessageContent>
    <MessageSteps summary="2 steps · Searched meetings">
      <MessageStep label="Searched meetings" meta="2 results" />
      <MessageStep label="Read Range review 28 Oct" />
    </MessageSteps>
    <p>You agreed to keep 4000 K for the IP65 range.</p>
    <MessageSources>
      <Citation href="/meetings/28">Range review 28 Oct</Citation>
    </MessageSources>
    <MessageDisclaimer>Generated by AI · can make mistakes</MessageDisclaimer>
    <MessageActions>{/* Copy, Retry */}</MessageActions>
  </MessageContent>
</Message>;

Compose these inside MessageContent, next to the text. A person's message needs none of them: it is Bubble with align="end".

MessageSources takes Citation chips, which it does not bring with it: install cited-list too. An item the reader can't open is a Citation with render={<span />}.

The whole conversationCopy Anchor Link

MessageScroller            role="log" aria-label="Messages"
├── Message                role="article", named "{author}, {time}"
│   └── MessageContent
│       ├── MessageStatus
│       ├── the text       aria-busy while it streams
│       └── the other parts
└── one useAnnouncer region, mounted for the conversation's life

Keep aria-busy on the text's own wrapper, never on Message: anything inside a busy subtree can go unannounced, and the status and any failure sit next to the text. Announce the status and "replied" through the one useAnnouncer region.

AnatomyCopy Anchor Link

ExamplesCopy Anchor Link

Status while it worksCopy Anchor Link

MessageStatus is the one line saying what the agent is doing now. Replace its text as the agent moves on and remove it when the answer's text starts. The text below it is aria-busy until the turn ends, so a screen reader doesn't read it word by word.

StepsCopy Anchor Link

Closed by default, so the answer stays the first thing to read. A failed step keeps its reason in muted text under the chip, and a step that was running when the turn was stopped says so.

PlanCopy Anchor Link

A checklist the agent edits in place. Pass the whole list on every update.

Changes and hand-offsCopy Anchor Link

One MessageChange per thing the agent changed, with Undo at the end of the row. Past a few, fold them into one row that opens the full list. MessageHandoff marks where another agent takes over.

Notices and failuresCopy Anchor Link

MessageNotice is a quiet line with one action. A failed turn is MessageStatus with status="error" and a Retry. Neither is a live region, so reopening a chat stays silent; pass live to the one that just appeared because of what the person did.

VersionsCopy Anchor Link

Shows once an answer has been retried, so the earlier one stays within reach. It renders nothing for a single version. formatPosition can say more: Previous answer (1 of 2).

Long messagesCopy Anchor Link

MessageFold holds a long message to 20rem with a fade and Show more. It measures, so content that fits is left alone. Open a turn streamed in this session with defaultOpen: only history folds, and an answer never shuts while someone is reading it.

API ReferenceCopy Anchor Link

MessageStatus and MessageNotice take StatusLine's props.

AccessibilityCopy Anchor Link

• No part is a live region unless you pass live. A conversation is role="log", so a part that also announced itself would be read twice.
• A step's status and a plan item's state are read out from statusLabels and stateLabels, since the icon alone shows them.
• MessageActions keeps its buttons in the Tab order while hidden: focus reveals them.
• Tabbing to a link inside a folded message opens the fold.

Do / Don'tCopy Anchor Link