Loading…

AI Message

One turn in a conversation, with role, avatar, actions and footer slots.

AI
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add ai-message

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Message } from "@/components/ui/ai-message";

Examples

Every example the tests run, live and operable, side by side.

Default
Roles
With Actions
With Footer
Actions Reveal

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Message>

Prop	Type	Default
`from` Who is speaking. Named `from` rather than `role` on purpose. `role` is a global HTML attribute, and a component prop that shadows it cannot be told apart from the real thing by static analysis — every consumer's accessibility linter would flag ordinary usage of this component. The values are still the familiar conversation roles.	`MessageRole`	`"assistant"`
`fromLabel` Overrides the visually hidden speaker label.	`string`	—

Plus every attribute of <li> except role.

<MessageBody>

Prop	Type	Default
`from` Who is speaking. See the note on MessageProps for why not `role`.	`MessageRole`	`"assistant"`

Plus every attribute of <div> except role.

<MessageAvatar>

Prop	Type	Default
`asChild`	`boolean`	—

Plus every attribute of <div>.

<MessageActions>

Plus every attribute of <div>.

<MessageTimestamp>

Prop	Type	Default
`dateTime` Machine-readable value for `dateTime`. Children are the display text.	`string`	—

Plus every attribute of <time>.

<MessageFooter>

Plus every attribute of <div>.

Accessibility

Every message carries a visually hidden label naming the speaker. Alignment and colour tell a sighted reader who is talking and tell a screen reader user nothing, so the role is always in text. Message actions fade in on hover but stay in the DOM and in the tab order — a control that only exists on hover is unreachable by keyboard and invisible on touch — and on devices that cannot hover they are always shown. MessageTimestamp is a real <time>.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

from

Who is speaking. Named from rather than role on purpose. role is a global HTML attribute, and a component prop that shadows it cannot be told apart from the real thing by static analysis — every consumer's accessibility linter would flag ordinary usage of this component. The values are still the familiar conversation roles.

MessageRole

"assistant"

fromLabel

Overrides the visually hidden speaker label.

string

—

Prop

Type

Default

from

Who is speaking. See the note on MessageProps for why not role.

MessageRole

"assistant"

Prop

Type

Default

asChild

boolean

—

Prop

Type

Default

dateTime

Machine-readable value for dateTime. Children are the display text.

string

—