Chat Message

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as ChatMessageStories from './ChatMessage.stories';

<Meta of={ChatMessageStories} name='Usage' />

<Title />

## Purpose

One turn in a conversation, from the user or from an agent.

## Usage

Use it for each message in a chat or agent screen.

- `sender="user"` is a filled bubble on the right that hugs its text, up to 80% of the width.
- `sender="agent"` has no container and fills the width. Put anything in it: text, lists, a Thinking State, Chain of Thought.
- `ChatMessage` does not style the content inside an agent message. Render markdown in your own renderer: map fenced code to the PDS `CodeBlock`, and style inline code as a small chip in the code font (PDS has no inline code style yet).
- `label` is required. It is read by screen readers before the message (for example "You" or "Zappy") and is not shown.
- `ChatMessage` does not space itself from its neighbors. Wrap the messages in `ChatMessageList`, which owns the gap between turns (20px, `--pds-spacing-l`).

## Implementation

See the table below for the available props. The other stories show the user bubble and a conversation.

<hr />

<Canvas of={ChatMessageStories.Conversation} />
<Controls of={ChatMessageStories.Default} />