App

ChatDock

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

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

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

Source: components/src/ · Guidelines: components/catalog/ChatDock/README.md