Skip to content
Chat & AI

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

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component MessageDefault layout:inline style:message {
  from:"user"
  label "Can you summarize the release notes?"
}

page "/audit/message/default" type:custom {
  use MessageDefault
}

API Reference

Generated from the component's exported types.

MessageProps

Extends HTMLAttributes<HTMLDivElement>

Skip MessageProps props table
PropTypeDefaultDescription
ref
Ref<HTMLDivElement>—Ref forwarded to the underlying DOM node.
from*
"user" | "assistant" | "system"——
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.

MessageContentProps

Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageContentVariants>

Skip MessageContentProps props table
PropTypeDefaultDescription
ref
Ref<HTMLDivElement>—Ref forwarded to the underlying DOM node.
variant
"contained" | "flat""contained"One of "contained" | "flat".
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.
id
string—DOM id of the root element.

MessageAvatarLabels

Skip MessageAvatarLabels props table
PropTypeDefaultDescription
me*
string——

MessageAvatarProps

Extends ComponentProps<typeof Avatar>

Skip MessageAvatarProps props table
PropTypeDefaultDescription
src*
string——
name
string—Submitted name when used in a form.
labels
Partial<MessageAvatarLabels>—Override default English strings.
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.