# Chat message

> A chat turn with streaming cursor, copy, feedback and regenerate.

Component · Pro · https://lodeui.com/components/chat-message

## When to use

- AI assistants and chats.

## When not to use

- Comment threads: use a timeline or list.

## Installation

```bash
npx shadcn@latest add @lode/chat-message
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [Typing indicator](https://lodeui.com/components/typing-indicator) — Bouncing dots in a chat bubble with who is typing.
- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.