AI Elements

Message

Server Component

User and assistant bubbles with optional avatars.

Import

tsx

import { Message } from "@cronus-ui/ui";

bash

npx cronus-ui add message

Examples

User and assistant

User bubbles sit on the end edge; assistant content spans the full width.

How do I theme a surface?

Use semantic tokens. Never a palette scale.

tsx

<>
  <Message from="user">
    <MessageContent>How do I theme a surface?</MessageContent>
  </Message>
  <Message from="assistant">
    <MessageAvatar src="https://github.com/pedrogbraz.png" name="Cronus" />
    <MessageContent>Use semantic tokens. Never a palette scale.</MessageContent>
  </Message>
</>

API Reference

Generated from the component's exported types.

MessageProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`from`*	`"user" \| "assistant" \| "system"`	—	—

MessageContentProps

Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageContentVariants>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`variant`	`"contained" \| "flat"`	`"contained"`	One of "contained" \| "flat".

MessageAvatarLabels

Prop	Type	Default	Description
`me`*	`string`	—	—

MessageAvatarProps

Extends ComponentProps<typeof Avatar>

Prop	Type	Default	Description
`src`*	`string`	—	—
`name`	`string`	—	Submitted name when used in a form.
`labels`	`Partial<MessageAvatarLabels>`	—	Override default English strings.