# Message
Source: https://ui.spencerwueste.com/docs/components/message
Markdown: https://ui.spencerwueste.com/llm/components/message.md

> Chat message with streaming markdown, avatar, and an action bar.

> Live preview: https://ui.spencerwueste.com/docs/components/message (demo source: `src/demos/message-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/message.json
```

Manual install dependencies: `radix-ui streamdown @streamdown/code @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/message.json

`MessageMarkdown` renders with [Streamdown](https://streamdown.ai), which handles incomplete markdown while tokens stream in. Only the Shiki `code` plugin is included by default; add `@streamdown/math` or `@streamdown/mermaid` to `streamdownPlugins` in `message.tsx` if you need them.

## Usage

```tsx
import {
  Message,
  MessageAction,
  MessageActionGroup,
  MessageActions,
  MessageAvatar,
  MessageContent,
  MessageMarkdown,
  MessageStack,
} from "@/components/pandacoderz-ui/message";
```

```tsx
<Message from="assistant">
  <MessageAvatar fallback="AI" />
  <MessageStack>
    <MessageContent>
      <MessageMarkdown>{markdown}</MessageMarkdown>
    </MessageContent>
    <MessageActions>
      <MessageActionGroup>
        <MessageAction asChild tooltip="Copy">
          <Button variant="ghost" size="icon-sm">…</Button>
        </MessageAction>
      </MessageActionGroup>
    </MessageActions>
  </MessageStack>
</Message>
```

## API Reference

### Message

| Prop | Type | Description |
| --- | --- | --- |
| `from` | `"user" \| "assistant"` | Required. Aligns the message and sets the bubble style for descendants. |

### MessageMarkdown

Accepts all Streamdown props. Pass `isAnimating` while streaming to enable Streamdown's incomplete-block handling. Override `components` to customize any element; the defaults style code fences, inline code, and tables.

### MessageAvatar

| Prop | Type | Description |
| --- | --- | --- |
| `src` | `string` | Image URL. Optional. |
| `fallback` | `ReactNode` | Rendered when no image or while loading. |
| `size` | `"sm" \| "default" \| "lg"` | Avatar size. |

### MessageAction

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` | Merge into the child element. |
| `tooltip` | `string \| { content, side, shortcut }` | Tooltip content and optional keyboard hint. |