Chat messagePro
A chat turn with streaming cursor, copy, feedback and regenerate.
How do I add a macOS-style dock?
9:41Lode AI · 9:41
When to use
- AI assistants and chats.
When not to use
- Comment threads: use a timeline or list.
Installation
Usage
Import it from @/components/ui/chat-message after installing.
example.tsx
import { ChatMessage } from "@/components/ui/chat-message";
<ChatMessage role="user" content="How do I add a dock?" />
<ChatMessage role="assistant" content={partial} streaming={!done} onRegenerate={retry} onFeedback={rate} />API reference
ChatMessage
One turn of a conversation.
| Prop | Type | Default | Description |
|---|---|---|---|
| role | "user" | "assistant" | – | Bubble on the right, or plain text with avatar on the left. |
| content / streaming | string / boolean | – | Text so far and whether more is coming. |
| name / avatar / time | string / ReactNode / string | "Assistant" | Header details. |
| onRegenerate / onFeedback | () => void / ("up" | "down") => void | – | Show those actions. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach copy, feedback and regenerate |
Accessibility
- Each turn is an article labelled by who spoke; aria-busy while streaming.
- Actions are labelled; feedback buttons use aria-pressed.
Motion
- Messages rise in; a block cursor blinks while streaming; actions fade in when done.
Responsive behavior
- Messages are at most 85% of the width.
Performance
- Pass the growing string; React only updates the text node.
Notes for AI
- Render markdown yourself inside content if your model returns it.
This page as Markdown, for assistants and coding agents:
/components/chat-message/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt