Terminal chatPro

Chat in a terminal: a prompt glyph, mono type, slash commands with ghost completion, arrow up history and tool calls as blocks with their output.

Markdown

On this page

ProAn ops session: a failed nightly export found in the logs, then rerun with a longer timeout.

Installation

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

Usage

tsx

import { TerminalChat } from "@/components/ui/chatcn/pro/terminal-chat"

<TerminalChat
  title="~/work/ferry-api"
  meta="main"
  messages={chat.chatcnMessages}
  status={chat.status}
  onSend={(text) => chat.sendMessage({ text })}
  onStop={chat.stop}
  onClear={() => chat.setMessages([])}
  commands={[{ name: "model", args: "<name>", description: "Switch the model" }]}
/>

Type a slash and the commands complete: the rest of the best match shows in a fainter ink after the cursor, Tab takes it and the list above the prompt picks another. Commands with run execute locally and print what they return under the command; the rest are sent as messages. /help is built in, /clear comes with onClear and /retry with onRetry. Arrow up walks back through what you sent (plus history), arrow down returns to your draft. Tool calls print as blocks: a status glyph, the tool and its most telling argument, the run time, then the output under a rule, folded past eight lines. Output keeps its columns and scrolls sideways instead of wrapping. ANSI colors in output fold into the kit's grays plus the one accent: cool hues read as the accent, warm hues as emphasis, so any tool's output stays calm.

Examples

States

ProCompleting a command, a tool running, long output folded, stopped, an error and read only.

Props

Prop	Type	Notes
`messages`	`ChatcnMessage[]`	The thread. Pass `useChatcnChat().chatcnMessages`
`status`	`"ready" \| "submitted" \| "streaming" \| "error"`	Same as AI SDK `useChat`
`error`	`ReactNode`	Shown with a retry. Say how to fix it
`onSend`, `onStop`, `onRetry`	`(text) => void`, `() => void`, `() => void`	Wire to your chat
`onClear`	`() => void`	Adds `/clear` and Ctrl L
`commands`	`{ name, description, args?, run? }[]`	`run` returns a node to print, or nothing
`history`	`string[]`	Earlier prompts for arrow up, oldest first
`prompt`	`string`	The glyph. Default `❯`
`title`, `meta`, `banner`	`ReactNode`	Header start and end; the line above the first prompt
`value`, `defaultValue`, `onValueChange`	`string`	The input, controlled or not
`disabled`, `autoFocus`	`boolean`
`labels`	`Partial<TerminalChatLabels>`	Every string, for translation

Keyboard

Key	Action
Enter	Send, or run the command
Shift Enter	New line
Tab	Take the completion
Up and Down	Pick a command while completing; otherwise walk history
Escape	Close the completion, or stop the answer
Ctrl C	Stop the answer, or clear the line
Ctrl L	Clear the screen

Accessibility

The transcript is a real log region of text: it reads, selects and copies like text, never a canvas.
The prompt is a combobox while completing, with the commands as a listbox.
The finished answer is announced once through a polite live region.
Status glyphs have text beside them: the run time, error, stopped, or a hidden running or done.

Motion

Nothing moves but the braille spinner on running tools and the streaming caret. Reduced motion freezes the spinner to an ellipsis.