Tree chatPro

The conversation as a branching map beside the thread: click a node to open that path, hover to preview it.

Markdown

On this page

ProA rollout plan branches into an email, a shorter retry and a second question; the map inks each path as it opens.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/tree-chat

Usage

tsx

import { TreeChat } from "@/components/ui/chatcn/pro/tree-chat"

<TreeChat
  nodes={nodes}
  value={openId}
  onValueChange={setOpenId}
  onSend={({ text, parentId }) => ask(text, parentId)}
  status={status}
/>

The map draws every prompt as a ring and every answer as a dot, with the open path in ink and its end ringed. Click a node and the thread opens the path through it, following the newest replies to a leaf, and scrolls to that message. Messages with alternatives carry a version switcher, a second way to move between paths. Branch from here on any answer points the composer at it; the new prompt opens its own lane. Beside the thread from 720 px, the map moves above it on narrow screens with depth running across. value names any node on the open path.

Examples

States

ProEmpty with the map on top, a failed answer on one branch, a read only transcript with three paths, and loading.

Props

Prop	Type	Notes
`nodes`	`{ id, parentId, role, text, status?, error?, label? }[]`	A flat list; each node points at its parent. `parentId: null` starts a tree
`value`, `defaultValue`, `onValueChange`	`string \| null`	The open path; defaults to the newest
`onSend`	`({ text, parentId }) => void`	Continues the open path, or the branch target
`status`, `onStop`	`"idle" \| "submitting" \| "streaming"`	Send becomes Stop
`mapPosition`	`"auto" \| "side" \| "top"`	Default `auto`
`composer`	`boolean`	Off for a read only transcript
`renderMessage`	`(node) => ReactNode`	Defaults to text and `Markdown`
`loading`, `disabled`	`boolean`	States
`labels`	`Partial<…Labels>`	Every string, for translation

Keyboard

Key	Action
Arrow keys	Walk the map: along the tree to parent and child, across it between branches
Enter or Space	Open the focused node's path
Home and End	First prompt, end of the open path
Escape	Hide the preview

Accessibility

The map is a tree with one tab stop; each item states its level, its place among its siblings, whether it is on the open path and its status.
Focus shows the same preview as hover, so the keyboard sees what the pointer sees.
The thread is a log region; failed answers say what happened in text.
Status colors always come with a word: Writing or Failed.

Motion

Switching paths is the signature: the ink runs down the new path from the fork, edge after edge, while the thread below the fork slides in 12 px from the side of the branch you picked. Everything above the fork stays still. A path opened from the keyboard switches at once. Reduced motion keeps the fades and drops the travel and the drawing.