Chat Message

A message row with streamed markdown, reasoning, tool calls, attachments, inline edit and hover actions.

Built on Code Block, Copy Button, Icons, Reasoning and Tool Call.

Sam Okafor16:08

The sticky header on /settings stopped sticking after I wrapped the page in the new AppShell. No errors in the console. Where should I look?

Argon16:08

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/chat-message.json

Usage

import { ChatMessage, ChatReasoning, ChatToolCall } from "@/components/ui/chat-message"

<ChatMessage from="assistant" name="Argon" time="14:02" content={text} streaming={streaming}>
  <ChatReasoning streaming={thinking}>{reasoning}</ChatReasoning>
  <ChatToolCall name="read_file" args={{ path: "app/page.tsx" }} status="done" />
</ChatMessage>

Examples

Bubble layout

Your own messages sit on the right in a bubble with their images above; replies stay open on the left.

Tool calls

Done, failed, running and queued. Rows open to their arguments and output. These are Tool Call rows; use ToolCallGroup to join them into one log.

Reasoning

The filament is hot while it thinks and the trace stays open. Open or close it by hand and it stops folding itself away.

System notes and errors

System messages center as a quiet note. An error keeps whatever arrived and offers Try again.

API reference

ChatMessage

Renders an article. Children (reasoning, tool calls, your own parts) come before content.

Prop	Type	Default
`from`	`"user" \| "assistant" \| "system"` Who sent it. System messages render as a centered note.	None
`name`	`ReactNode` Shown above flat messages and used as the accessible name.	None
`avatar`	`ReactNode` Replaces the default mark. null hides it.	None
`time`	`ReactNode` Shown next to the name.	None
`dateTime`	`string` Machine-readable value for the time element.	None
`layout`	`"flat" \| "bubble"` Rows with marks and names, or user bubbles on the right.	`"flat"`
`content`	`string` Markdown-ish text: paragraphs, lists, quotes, headings, fenced code, inline code, bold, italic, links.	None
`streaming`	`boolean` Caret, fresh-word fade, lit mark. Actions hide until it's done.	`false`
`attachments`	`ChatAttachmentItem[]` { name, size?, type?, url? }. Images with a url show a thumbnail.	None
`error`	`ReactNode` Shown under the content with Try again when onRetry is set.	None
`actions`	`"hover" \| "always" \| "none"` When the action row shows. Touch screens always show it.	`"hover"`
`copyText`	`string` What the copy action copies.	content
`onRetry`	`() => void` Adds Retry to replies.	None
`onEdit`	`() => void` Adds Edit to your own messages.	None
`feedback`	`"up" \| "down" \| null` Controlled thumbs. Shown on replies when any feedback prop is set.	None
`defaultFeedback`	`"up" \| "down" \| null` Initial thumbs when uncontrolled.	None
`onFeedbackChange`	`(feedback) => void` Pressing the active thumb again clears it to null.	None
`extraActions`	`ReactNode` More buttons at the end of the action row.	None
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

ChatReasoning

Reasoning with followStreaming on: it opens while thinking and folds away when done. Takes every Reasoning prop.

Prop	Type	Default
`streaming`	`boolean` Hot filament, running timer, open.	`false`
`duration`	`number` Seconds spent. Measured while streaming when omitted.	None
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open) => void` Disclosure state. defaultOpen follows streaming.	None
`followStreaming`	`boolean` Set false for a trace that stays folded to its one live line.	`true`
`label`	`ReactNode` Header while streaming.	`"Thinking"`

ChatToolCall

ToolCall with its arguments always summarised as key: value pairs. Takes every ToolCall prop, including approval.

Prop	Type	Default
`name`	`string` The tool's name.	None
`args`	`Record<string, unknown> \| string` Summarised in the row, listed when open.	None
`status`	`"pending" \| "approval" \| "running" \| "done" \| "success" \| "error" \| "denied"` Drives the lamp, the readout and the border.	`"done"`
`result`	`ReactNode` Shown when open. Strings render as code.	None
`error`	`ReactNode` Shown under the row.	None
`duration`	`number` Seconds. A live timer counts while running.	None
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open) => void` Disclosure state.	None

ChatMarkdown

The renderer on its own, for building your own message parts.

Prop	Type	Default
`children`	`string` The text so far.	None
`streaming`	`boolean` Caret at the end and fresh-word fade.	`false`
`codeMaxHeight`	`number` Code blocks scroll past this height.	`420`

Accessibility

Each message is an article named by its sender. A streaming message sets aria-busy so screen readers wait for the finished text.
Hover-only actions also appear on keyboard focus within the message and are always visible on touch screens.
Thumbs are toggle buttons with aria-pressed. Copy announces through a polite status region.
Reasoning and tool rows are disclosure buttons with aria-expanded; closed panels are hidden from assistive tech, not just collapsed.
Unclosed code fences, backticks and bold render formatted while text streams, so the reply doesn't flash raw markdown.
Links only render for http(s), mailto and relative URLs. External ones open in a new tab with noopener.
Under prefers-reduced-motion the caret holds still, words appear without the fade and the reply mark stops breathing.