Message

Shows one turn of a conversation, from the user or from the assistant, with its actions.

Which Q3 deals are most at risk, and why?
09:41

Configurations

Supported configurations for this component.

UserAssistantStopped

Default

Interaction states covered by the API and the style contract.

Busy

Configurations

3 examples
User
Which Q3 deals are most at risk, and why?
09:41
Assistant

Acme Corp carries the most risk: the deal is in negotiation at $540K and its champion left in August. Northwind is next, stalled at proposal for 41 days.

09:41 · 4 s
Stopped

Stopped before it answered.

09:41 · Stopped

Default

1 example

Acme Corp carries the most risk: the deal is in negotiation at $540K and its champion left in August. Northwind is next, stalled at proposal for 41 days.

09:41 · 4 s
Rest
Busy

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Message

PropTypeDefaultDescription
fromreq'user'|'assistant'-Who spoke. user: bubble on the right sized to its words, mark on the right. assistant: full-width panel on the left, mark on the left.
busybooleanfalseThe answer is still arriving: sets aria-busy on the turn, and MessageActions renders nothing until it settles.
childrenReact.ReactNode-A MessageAvatar, a MessageContent and an optional MessageActions, in any order.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

MessageAvatar

PropTypeDefaultDescription
childrenreqReact.ReactNode-user: an Avatar at size="md". assistant: an 18px glyph (tokens.iconSize.md), e.g. the product mark.
framedboolean-Draw the 32px box around the child: a border.base hairline, text.secondary ink, the glyph centred. Defaults to true for the assistant and false for the user, whose Avatar brings its own frame.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

MessageContent

PropTypeDefaultDescription
childrenReact.ReactNode-user: the words sent. assistant: the answer, any mix of prose, tables, artifacts, tool steps and suggestions, stacked spacing[3] apart.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

MessageActions

PropTypeDefaultDescription
metaReact.ReactNode-Leading text, in text.muted: the time, or "time · duration", or "time · Stopped".
childrenReact.ReactNode-The actions: IconButtons at size="sm", variant="ghost". Pushed to the far end on an assistant turn, beside the meta on a user turn.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Artifact

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

3 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states