Temporary chat

A header toggle for chats that stay out of history and memory, and the banner that says plainly what that means.

Markdown

On this page

A header toggle; the empty thread explains what temporary means and the composer takes a dashed edge.

Installation

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

Usage

tsx

import { TemporaryChatBanner, TemporaryChatToggle } from "@/components/ui/chatcn/temporary-chat"

<TemporaryChatToggle pressed={temporary} onPressedChange={setTemporary} shortcut="⌘⇧I" />
{temporary ? <TemporaryChatBanner onTurnOff={() => setTemporary(false)} /> : null}

The mode is marked by a dashed hairline on the toggle, the banner and, if you like, the composer. No tint and no icon tile: the edge reads at a glance in light, dark and forced colors.

Examples

Variants

Icon and label toggles, disabled, and the bar banner for a running thread.

Props

Prop	Type	Notes
Toggle `pressed`, `defaultPressed`, `onPressedChange`		Base UI Toggle
Toggle `variant`	`"icon" \| "label"`	Icon has a tooltip
Toggle `shortcut`	`ReactNode`	Shown in the tooltip. Bind it yourself
Banner `variant`	`"card" \| "bar"`	Card for the empty state, bar above a thread
Banner `title`, `description`	`ReactNode`	Say how long it is kept and why
Banner `onTurnOff`	`() => void`	Shows Turn off

Keyboard

Key	Action
`Enter`, `Space`	Toggle temporary mode

Accessibility

The toggle is a button with aria-pressed and the name Temporary chat.
The banner is a status region, so turning the mode on is announced once.

Motion

The banner settles 4 px and fades in over 200 ms. Reduced motion keeps the fade.
The toggle presses to 0.97; its pressed state changes color only.