Undo windowPro

Undo an agent action within a short window, with a visible countdown that pauses on hover.

Markdown

On this page

ProArchived newsletters with 10 s to undo; point at it to pause.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/undo-window

Usage

tsx

import { UndoWindow } from "@/components/ui/chatcn/pro/undo-window"

<UndoWindow
  message="Archived 214 newsletters"
  undoneMessage="214 newsletters are back in your inbox"
  duration={10}
  onUndo={restore}
  onExpire={commit}
/>

One Web Animation drives the hairline along the bottom edge, the seconds and the deadline, so they never drift apart. Pointing at the row or focusing inside it pauses all three and swaps the seconds for a pause glyph; leaving resumes exactly where it stopped. After the window the row settles into a quiet past tense line instead of vanishing, so the person can still read what happened.

Examples

States

ProPaused, toast, small, undone, closed, failed and long content.

Props

Prop	Type	Notes
`message`, `detail`	`ReactNode`	What happened, past tense, and a second line
`duration`	`number`	Seconds. Default 10
`onUndo`	`() => void \| Promise<void>`	Reject with an Error to show why it failed
`onExpire`	`() => void`	The window closed; commit the action
`undoneMessage`, `expiredMessage`	`ReactNode`	Settled lines
`variant`	`"inline" \| "toast"`	Default `inline`
`size`	`"sm" \| "md"`	Default `md`
`paused`	`boolean`	Pause from outside, for example under a dialog
`shortcut`	`ReactNode`	Hint on the Undo button; your app binds it
`defaultState`	`"counting" \| "undone" \| "expired" \| "failed"`	For docs and tests

Keyboard

Key	Action
Tab	Focus Undo; focus pauses the countdown
Enter or Space	Undo

Accessibility

The row is a status region, so the undone and failed lines are announced.
Seconds left are in hidden text with the paused state; the visible number is hidden to avoid a chatty live region.
Hover and focus both pause, so keyboard and screen reader users get the same time.

Motion

The hairline drains linearly, the one place linear is right: it is a clock. Settled lines slide 4 px and fade in 180 ms. Reduced motion keeps the hairline, which is information, and drops the slide.