Mode switcher

The tools menu: web search, deep research, canvas and image. Active modes become chips in the composer and can change its placeholder.

Markdown

On this page

Modes from the menu show as removable chips and change the placeholder.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/mode-switcher.json

Usage

tsx

import {
  composerModes,
  ModeChips,
  ModeSwitcher,
  modePlaceholder,
} from "@/components/ui/chatcn/mode-switcher"

<PromptInputTextarea placeholder={modePlaceholder(composerModes, modes, "Ask anything…")} />
<PromptInputTools>
  <ModeSwitcher value={modes} onValueChange={setModes} />
  <ModeChips value={modes} onValueChange={setModes} />
</PromptInputTools>

Pass your own modes to change the list; each has an id, label, icon, description and an optional placeholder. exclusive allows one mode at a time.

Props

Prop	Type	Notes
`modes`	`ComposerMode[]`	Default `composerModes`
`value`, `defaultValue`, `onValueChange`	`string[]`	Active mode ids
`exclusive`	`boolean`	Turning one on turns the others off
`label`	`string`	Trigger label, visually hidden in narrow composers. Default Tools
`side`	`"top" \| "bottom"`

Accessibility

Modes are checkbox items in a Base UI Menu, so their state is announced.
Each chip is one button named Turn off web search. Focus returns to the textarea when it goes.

Motion

On hover or focus, a chip's icon crossfades into a cross with a 2 px blur: the whole chip is the remove button. On touch the cross shows at rest.
Chips enter with opacity and scale from 0.97 and leave with opacity and scale 0.96 over 140 ms.