# ChatMessage

> One chat turn: avatar, bubble, status, streaming caret and an optional footer slot.

Source: https://ui.jcsoftdev.com/docs/components/chat-message

One chat turn: avatar, bubble, status, streaming caret and an optional footer slot.

## Import

```ts
import { ChatMessage } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/chat-message`.

## Usage

```tsx
<ChatMessage
  author="assistant"
  name="Asistente"
  status="done"
  time="10:42"
  content="Mañana tienes **tres huecos libres** con Diego: `10:00`, `11:30` y `16:00`. ¿Quieres que reserve alguno?"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `author` * | `"user" \| "assistant" \| "system"` |  |  |
| `name` | `string` |  | Display name, also the avatar's accessible name. |
| `avatarSrc` | `string` |  |  |
| `status` | `"done" \| "error" \| "sending" \| "streaming"` | `"done"` | `sending` and `streaming` show activity; `error` shows the failure line. |
| `time` | `string` |  | Time label shown under the bubble (already formatted). |
| `content` | `string` |  | Markdown text. Assistant messages render it as Markdown; user and system as plain text. |
| `children` | `ReactNode` |  | Rich body; replaces `content`. |
| `footer` | `ReactNode` |  | Slot under the bubble (e.g. MessageActions, sources). |
| `errorText` | `string` | `"No se pudo enviar el mensaje."` | Text of the failure line when `status` is `error`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/ai-chatmessage--default)
- [User](/storybook/?path=/story/ai-chatmessage--user)
- [System](/storybook/?path=/story/ai-chatmessage--system)
- [Streaming](/storybook/?path=/story/ai-chatmessage--streaming)
- [Waiting](/storybook/?path=/story/ai-chatmessage--waiting)
- [Failed](/storybook/?path=/story/ai-chatmessage--failed)
- [With Actions](/storybook/?path=/story/ai-chatmessage--with-actions)
- [Narrow](/storybook/?path=/story/ai-chatmessage--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-chatmessage--preset-brutal)

## Source

`packages/ui/src/ai/chat-message/chat-message.tsx`