Chat with an agent

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

import * as ChatWithAgentStories from './ChatWithAgent.stories';

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

<Title />

## Purpose

Shows a chat with an agent working end to end, from the empty state to a conversation, using the existing proposals.

## Usage

This is a recipe, not a component. It composes Chat Panel, Chat Input (with a primary Icon Button as Send and the bare Select as the model picker), Chat Message, Chain of Thought (Thinking State, Timeline and Timeline Item), Suggestion Card, Code Diff and Feedback Bar, plus the PDS Segmented Button, Status Indicator, Tag and Empty State.

- Start on the empty state with the default-size Chat Input in the same group as the heading. There is no footer yet.
- When the first message is sent, move the input to the footer as the compact bar and keep focus in it.
- Show the agent's work as a Chain of Thought: open while working, collapsed with "Thought for N seconds" when done, then the reply.
- End a reply that proposes changes with a Suggestion Card; show the changes as a Code Diff. After Accept, show the Feedback Bar in the card.
- Put the Feedback Bar under plain replies. Its thanks text replaces the thumbs for a few seconds, then the thumbs come back with the choice pressed; that timing belongs to the screen.
- Use the Chat Input's `aboveField` slot for context the next message applies to. In the sample, Refine on the Suggestion Card shows "Refining: 2 changes (composer.json, pantheon.yml)" above the input, with a dismiss button, and moves focus to the input. Send a note and the bar goes away; the agent replies with a narrowed Suggestion Card. Announce the bar to screen readers when it appears.
- Pass `onFilesDrop` to the Chat Panel to accept files dropped anywhere on it, and give the same handler to the Chat Input.
- Turn on `hasScrollToLatest` (with `scrollToLatestLabel`) and `hasContentFade` on the Chat Panel. The view stays at the end while the agent works, including while the chain of thought grows; scroll up to read earlier messages and it stops following, and a button at the bottom center jumps back to the latest.

## Implementation

The story is interactive. Type a message and press Enter, then accept the suggestion and rate a reply.

<hr />

<Canvas of={ChatWithAgentStories.Interactive} />