Permission mode

A compact selector for the composer: Ask before edits, Edit automatically or Plan only, shown as an icon and a short label.

Markdown

On this page

Ask before edits, Edit automatically or Plan only, next to the attach button. Shift+Tab cycles.

Installation

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

Usage

tsx

import { PermissionMode } from "@/components/ui/chatcn/permission-mode"

<PermissionMode value={mode} onValueChange={setMode} />

Bind nextPermissionMode(modes, value) to Shift+Tab in your composer to cycle modes from the keyboard. Add fullAccessMode for a fourth, risky mode.

Examples

Risky mode and variants

Full access inverts the trigger and asks once. Icon only and disabled.

Props

Prop	Type	Notes
`modes`	`PermissionModeOption[]`	`{ id, label, icon, description?, risky?, disabled? }`
`value`, `defaultValue`, `onValueChange`	`string`	Controlled or uncontrolled
`confirmRisky`	`(mode) => boolean \| Promise<boolean>`	Replace the inline confirmation with your own dialog
`iconOnly`	`boolean`	For narrow composers
`side`	`top \| bottom`	Default top, above the composer

Keyboard

Key	Action
`Enter`, `Space`	Open the menu
`ArrowUp`, `ArrowDown`	Move between modes, instantly
`Esc`	Close, or leave the confirmation

Accessibility

Built on Base UI Menu with radio items, so the current mode is announced as checked.
Icon only adds aria-label Permissions: Plan only.
Risky modes are marked with the words No approvals, not with color alone.

Motion

The menu grows from the trigger in 180 ms; opened with the keyboard, it appears at once.
The trigger icon swaps with a 150 ms blur crossfade when the mode changes.