Checkpoint
A restore point in the thread. Rewind to here asks first and lists exactly what will be lost: the messages after it and every file change.
On this page
Confirm lists the messages and files that change.
Installation
Usage
import { Checkpoint } from "@/components/ui/chatcn/checkpoint"
<Checkpoint
time="15:42"
messages={4}
files={[{ path: "src/app/settings/page.tsx", additions: 18, deletions: 64 }]}
onRestore={() => rewind(checkpoint.id)}
/>Return a promise from onRestore and the button shows progress until it settles. Follow a rewind with a SystemNotice so the thread records it.
Props
| Prop | Type | Notes |
|---|---|---|
label | ReactNode | Defaults to Checkpoint |
time | ReactNode | When it was taken |
messages | number | Messages after this point |
files | { path, additions?, deletions? }[] | File changes after this point |
onRestore | () => void | Promise<void> | Called after confirming |
disabled | boolean | For example while a reply streams |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Open the confirmation |
Tab | Move between Cancel and Rewind |
Esc | Close without rewinding |
Accessibility
- The confirmation is a Base UI popover with a title and description, and returns focus to its trigger.
- Line counts are read as words: 18 lines added, 64 lines removed.
Motion
- The confirmation scales from 0.96 at its trigger over 180 ms and leaves in 140 ms. Opened from the keyboard, it appears at once.