# ChatDock

Group: App

The chat at the bottom of the app: the latest three turns floating over the canvas, and the Composer. A small cap centered on the Composer's top edge folds the turns down into it, and back — the canvas gets the room, the conversation stays one tap away.
- `composer` (a `Composer`) and the whole conversation as `ChatTurn` children, oldest first. The latest `visible` (3) show — one exchange plus one turn of context — the same bubbles and receipts as always, with no box or backdrop around them.
- **Older turns are a scroll away:** scroll (wheel, trackpad, finger) over the bubbles; the strip stays three turns tall and the oldest visible turn fades out at its top edge when there's more above. The canvas keeps taking clicks between the bubbles. A new turn scrolls back to the newest.
- The cap: chevron down = *Hide chat*, chevron up = *Show chat* (`aria-expanded`). While folded, **sending unfolds** so you see the answer arrive; any other new turn puts a **coral dot** on the cap instead, and a busy Visualli turn makes the chevron bob.
- **It follows attention:** working on the canvas — pressing an idea, a connector, a peek card or the empty map, scrolling to zoom, or tabbing onto an idea — folds the chat; typing in the Composer unfolds it (focusing alone doesn't). The toolbar, Vault and the chat itself don't fold it. `autoFold={false}` turns this off.
- Uncontrolled by default (`defaultFolded`); pass `folded` + `onFoldChange` to remember it per person.
- In `AppShell` only the Composer takes room from the map, so folding never moves the map.


## Props

```ts
export interface ChatDockProps { /** <ChatTurn/>s, oldest first — the whole conversation. */ children?: ReactNode; /** The <Composer/>. */ composer: ReactNode; /** Latest turns shown before the strip scrolls (3). */ visible?: number; /** Controlled (e.g. remembered per person). */ folded?: boolean; defaultFolded?: boolean; onFoldChange?: (folded: boolean) => void; /** Fold when the person works on the map (press, scroll or tab into it); unfold when they type in the Composer. Default true. */ autoFold?: boolean; className?: string }
```

## Use

```ts
import { ChatDock } from '@visualli/design-system/components';
```