ChatMessage
A message row. Provides sender and density to descendants via context so ChatMessageBubble doesn’t need every prop repeated.
Examples
Default
There is no @var-ui/astro ChatMessage — Astro and HTML previews approximate the row with core recipes.
N
Navi
Hello! How can I help?
Demo.tsxtsx
import { Avatar, ChatMessage, ChatMessageBubble, ChatMessageMetadata } from '@var-ui/react';
<ChatMessage
sender="assistant"
name="Navi"
avatar={<Avatar name="Navi" size="sm" />}
metadata={<ChatMessageMetadata date={new Date()} format="time" />}
>
<ChatMessageBubble>Hello! How can I help?</ChatMessageBubble>
</ChatMessage>Metadata
ChatMessageMetadata composes the existing Timestamp with optional status text — no dedicated recipe.
| Prop | Type | Default |
|---|---|---|
date | Date | string | number | (required) |
format | 'relative' | 'date' | 'time' | 'datetime' | 'relative' |
status | ReactNode | — |
className | string | — |
Props
Accessibility
User messages align to the end of the row; assistant messages align to the start.