<!-- Generated by scripts/gen-docs.mts from the JSDoc in registry/. Do not edit; run `pnpm run docs`. -->

# Message

One message in a chat: who wrote it, their avatar and what they wrote, with any attachments under it. `role` places and colors it: the user's own messages at the end in the primary color, the assistant's at the start, the app's `system` notes centered. `streaming` marks a reply still being written.

```tsx
import { Message } from "@/components/ouro/message/message";
```

## Example

```tsx
<Message role="user" name={user.name} avatar={user.photoUrl}>How long do I rest the dough?</Message>
<Message role="assistant" name="Ouro" streaming={!reply.done}>{reply.text}</Message>
```

## Usage

Use it inside `MessageList`, which keeps the newest message in view and announces new ones.

## Use instead when

- Use `Alert` instead for a notice that is not part of a conversation, and `toast()` for a passing confirmation.

## Props

Type: `MessageProps`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `attachments` | `ReactNode` |  | Files sent with the message, shown under it: `<Attachment>` elements. |
| `avatar` | `string \| false` |  | The author's picture URL. Without it the avatar shows initials; `false` shows no avatar. |
| `children` | `ReactNode` |  | The message: text, or rich content such as a list or a code block. |
| `className` | `string` |  | Layout only: margins (`mt-4`). Appearance classes warn in development; the colors follow `role`. |
| `name` (required) | `string` |  | The author's name. Screen readers hear it before the message, and the avatar's initials come from it. Required, so every message says who wrote it. The user's own name is read but not shown. |
| `ref` | `Ref<HTMLElement>` |  | Reaches the rendered element. |
| `role` (required) | `"user" \| "assistant" \| "system"` |  | Who wrote it. `user` is the person using the app: their messages sit at the end, in the primary color. `assistant` is anyone else, such as an agent, at the start. `system` is the app's own note ("Ada joined"), centered and quiet. |
| `streaming` | `boolean` |  | The reply is still being written. The message is `aria-busy`, an empty one shows a typing indicator, and `MessageList` announces it once, when streaming ends. |
| `streamingLabel` | `string` | `"Writing"` | What screen readers hear for the typing indicator, for other languages. |

## Native attributes

Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page.

## Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

- `author`: Not a prop. The author is `name`: `<Message role="user" name="Ada">`.
- `content`: Not a prop. The message is the children: `<Message role="user" name="Ada">Hi</Message>`.
- `from`: Not a prop. Who wrote it is `role`: `<Message role="user" name="Ada">`.
- `sender`: Not a prop. The author is `name`: `<Message role="user" name="Ada">`.

## `className` is for layout only

Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: Message merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes]

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn.

Alignment classes (`text-center`) warn too: set alignment on a parent element.

[^layout-classes]: test:registry/ouro/components/ouro/message/message.test.tsx::Message > forwards a ref and lets app layout classes win verify:testExists(registry/ouro/components/ouro/message/message.test.tsx::Message > forwards a ref and lets app layout classes win)