Components / agents

Chat Message

One message in a conversation. A user message is a tinted bubble on the right; an assistant message sits on the left with no bubble so long answers stay readable.

import { ChatMessage } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { ChatMessage } from '@basiiik/ui';

<ChatMessage from="assistant">Use a Modal for a confirm-delete dialog.</ChatMessage>

Example values were filled in for the required prop from: replace them with your own.
Status is the status prop: streaming shows a caret and sets aria-busy until the message is complete; error shows errorText as an alert. No interactive states of its own.
Compose with: avatar.
Storybook: Agents/Chat message.

Props

Prop	Type	Notes
`from` required	`"user" \| "assistant"`
`status`	`"error" \| "complete" \| "streaming"`	Default "complete"
`children` required	`ReactNode`
`name`	`string`
`avatarSrc`	`string`
`errorText`	`ReactNode`
`time`	`ReactNode`
`actions`	`ReactNode`
`hideAvatar`	`boolean`

States. Status is the status prop: streaming shows a caret and sets aria-busy until the message is complete; error shows errorText as an alert. No interactive states of its own.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Each turn in a chat with an agent: what the person said and what the agent answered
A message that is still arriving (streaming) or failed (error)
A typing or streaming indicator: a message with status streaming shows a caret while the answer arrives

Do not use it when

A comment thread between people with replies and reactions (use List Item or Card)
A one-off system message (use Alert or Toast)

Rules for agents

Set from to user or assistant; the layout and the spoken author follow from it
Mark an answer that is still arriving with status="streaming" and switch to complete when it ends
On a failure set status="error" and say what happened in errorText
Render Markdown yourself and pass the result as children
Put Reasoning and ToolCall inside the assistant message, before the answer text
Put copy, retry and rating buttons in actions

Avoid

Building the bubbles with divs and flex
Hard-coding "Assistant" in the content instead of using name
Showing an error as a second message instead of status="error" on the one that failed
Re-announcing every token with aria-live on the streaming text

Writing the content

time: the short local time, such as "10:42", already formatted
errorText: what went wrong and what to do: "The request timed out. Try again."

Accessibility

An <article> whose author name ("You", "Assistant" or name) is read before the content
While status="streaming" it is aria-busy, so a screen reader waits and reads the finished message once
The error text is role="alert"
The avatar and the caret are hidden from assistive technology

Colour tokens it reads

color.bg.brand.subtlecolor.text.dangercolor.text.primarycolor.text.secondary

agents 6 Figma variants Try it in the live demo