Chat Message
A single message row — avatar, header (name + badges + timestamp), body, footer slot and hover-revealed actions.
A single chat message row: an avatar, a header (name + badges + timestamp), the body passed as children, an optional footer slot for reasoning / tool details, and hover-revealed actions. It's fully presentational — the role (user / assistant / system) drives the default avatar and name, and every other part is a slot. Feed the body as plain text, or as a rendered MarkdownRenderer from @yuhuanowo/yunui/content.
Import
1import { ChatMessage } from "@yuhuanowo/yunui/chat";Example
The assistant row carries a model badge and hover-revealed actions; hover it to reveal the Copy / Regenerate controls.
ChatMessage
How do I render markdown inside a message?
Feed the body as children — plain text, or a rendered markdown component from the content subpath.
Markdown bodies
Pair it with @yuhuanowo/yunui/content to render a full markdown message body:
1import { ChatMessage } from "@yuhuanowo/yunui/chat";2import { MarkdownRenderer } from "@yuhuanowo/yunui/content";3 4<ChatMessage role="assistant" name="Assistant" badges={<Badge>gpt-4o</Badge>}>5 <MarkdownRenderer content={message.content} />6</ChatMessage>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | ReactNode | — | Actions revealed on hover below the content (copy, regenerate, …). |
| avatar | ReactNode | — | Avatar node. Defaults to a role icon in a themed circle. |
| badges | ReactNode | — | Inline chips next to the name (model, latency, mode, …). |
| children | ReactNode | — | The message body (plain text, or a rendered <MarkdownRenderer/>). |
| className | string | — | |
| density | "compact" | "comfortable" | comfortable | Vertical rhythm for dense transcripts and more spacious assistants. |
| footer | ReactNode | — | Extra content below the body — reasoning steps, tool details, JSON, … |
| name | ReactNode | — | Display name in the header. Defaults to a role label. |
| role* | "user" | "assistant" | "system" | — | Who sent the message. Drives the default avatar and name. |
| timestamp | ReactNode | — | Right-aligned timestamp (or any node) in the header. |