App

ChatTurn

One turn of conversation, kept deliberately small — the map is the answer.

• role="user": a bubble with the user's words. role="visualli": a one-line receipt (change, e.g. "Added 3 ideas under Sleep") with optional onUndo, or busy for the ThinkingTree. The receipt carries the still tree (TreeMark): the tree twinkles while Visualli works, then settles beside what it did. Tips (tip) carry a check mark instead.
• Show the last 2–3 turns above the Composer; never paragraphs of AI prose.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface ChatTurnProps {
  role: 'user' | 'visualli';
  /** A transient hint (not saved to history): check mark, optional action and ✕. */ tip?: boolean;
  action?: { label: string;
  icon?: IconName;
  onClick: () => void };
  onDismiss?: () => void;
  busy?: boolean;
  /** What Visualli is doing while busy, e.g. "Mapping Brood…" (default "Growing your map…"). */ busyLabel?: string;
  change?: string;
  onUndo?: () => void;
  children?: ReactNode
}

Use

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

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