Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA chat message with user, assistant and system roles, an avatar slot, an actions row with a copy button and a timestamp.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import {
Message,
MessageActions,
MessageAvatar,
MessageContent,
MessageCopyAction,
MessageTimestamp,
} from "@/components/ui/ai-message"<Message role="assistant">
<MessageAvatar>AI</MessageAvatar>
<MessageContent>Invites expire after 7 days.</MessageContent>
<MessageActions>
<MessageCopyAction value="Invites expire after 7 days." />
</MessageActions>
<MessageTimestamp date={sentAt} />
</Message>| Prop | Type | Default | Description |
|---|---|---|---|
role | "user" | "assistant" | "system" | "assistant" | User messages sit at the end in a bubble, assistant messages run full width, system messages are centered notes. |
Also accepts all <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
visibility | "hover" | "always" | "hover" | "hover" shows the row on hover or focus on devices with a mouse, and always on touch. |
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Accessible name and native tooltip of the icon button. |
Also accepts Button props except variant and size.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Text written to the clipboard. |
label | string | "Copy message" | Accessible name before copying. |
onCopied | () => void | - | Called after the text was copied. |
| Prop | Type | Default | Description |
|---|---|---|---|
date | Date | string | number | - | When the message was sent. |
locale | string | "en-US" | BCP 47 locale for formatting. |
timeZone | string | - | IANA time zone. Without it the viewer's zone is used after hydration. |
format | Intl.DateTimeFormatOptions | { hour: "numeric", minute: "2-digit" } | Formatting options. |
children | ReactNode | - | Preformatted text that replaces the built-in formatting. |
MessageAvatar and MessageContent take plain children, so the content can come from any stream or markdown renderer.timeZone, the timestamp renders empty on the server and fills in on the client, so the server and browser output match.