Chat Panel

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

import * as ChatPanelStories from './ChatPanel.stories';

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

<Title />

## Purpose

The frame of an AI chat drawer or docked panel. It owns the layout and the scroll; the team decides what goes in each region.

## Usage

Place it inside a drawer or dock it beside the page. It fills its container, so the screen sets the height. The width comes from `size`.

- `title` sits in the title row beside the built-in close button. `closeButtonLabel` is the screen-reader text and is required while `hasCloseButton` is on.
- `header` is pinned under the title row (summary strip, context rows, tabs). `children` is the content and the only part that scrolls. `footer` is pinned at the bottom and typically holds the composer.
- `size` is `m` (25rem, the default) or `l` (37.5rem), the PDS Drawer widths.
- Pass `onFilesDrop` to let people drop files anywhere on the panel. While files are dragged over it, the content area shows an overlay with `dropLabel`, and the files go to your handler on drop. Give the same handler to Chat Input, whose own field still takes drops on it. Dragged text and links are ignored, and the add menu in Chat Input stays the keyboard route.
- `hasScrollToLatest` shows a floating button at the bottom center of the content area while it is scrolled away from the end, and keeps the view at the end as the content grows, but only while the person is already at the end (scroll up and it stops following). Pass `scrollToLatestLabel` with it: the screen-reader text and tooltip. The button is a bordered icon button with a raised shadow; choosing it scrolls to the end (instantly if the person prefers reduced motion) and moves focus into the stream.
- `hasContentFade` fades the bottom edge of the content area into the footer. The last line stays clear when scrolled to the end.
- Every region is optional.
- `headerInset`, `contentInset` and `footerInset` set `none` to bleed a region to the edges. Block padding stays; the child supplies its own inline padding.
- `hasHeaderDivider` and `hasFooterDivider` draw a rule under the header and above the footer.
- A view switch such as Compose / Chat / Review is the PDS `SegmentedButton` in `header`. Swap `children` when it changes; the panel does not know about it.
- Without `hasScrollToLatest` the panel does not scroll to the newest message; the screen does.

## Implementation

See the table below for the available props. The other stories show bleed, a content-only panel and a long scrolling conversation. For the panel in a working chat (the empty state, a conversation with a chain of thought and a suggestion card, file drops), see the recipe `Recipes/Chat with an agent`. Change `size` in the controls.

<hr />

<Canvas of={ChatPanelStories.Default} />
<Controls of={ChatPanelStories.Default} />