Version timelinePro

Every version of a generated app on one rail: a live thumbnail, the prompt that made it, what changed and whether it built. Preview any version, restore it, or compare two with a wipe and the prompts in between.

Markdown

On this page

ProSeven prompts on a booking page, one failed and one building. Preview any version, restore it, or compare two.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/version-timeline

Usage

tsx

import { VersionTimeline } from "@/components/ui/chatcn/pro/version-timeline"

<VersionTimeline versions={versions} currentId={current} value={viewing}
  onValueChange={setViewing} onRestore={restore} restoringId={restoring} />

A thumbnail is a screenshot URL or a live render: VersionThumbnail draws the page at thumbnailWidth (1280 by default) and scales it down, so thumbnails stay crisp at any size. Restoring asks first and says the current version stays in history.

Examples

States

ProComparing two versions with a wipe, restoring, loading, empty and error.

Props

Prop	Type	Notes
`versions`	`AppVersion[]`	Newest first: `number`, `prompt`, `createdAt`, `status`, `summary`, `error`, `changes`, `thumbnail`, `restoredFrom`, `published`
`currentId`	`string`	The version the app is on
`value`, `defaultValue`, `onValueChange`	`string \| null`	The version shown in the preview
`onRestore`, `restoringId`	`(id) => void`, `string \| null`
`compare`, `defaultCompare`, `onCompareChange`	`[string, string] \| null`	Older first
`loading`, `error`, `onRetry`, `emptyState`, `now`

Keyboard

Key	Action
`Tab`	Through versions and their Restore buttons
`Enter` `Space`	Preview a version, or pick it while comparing
`ArrowLeft` `ArrowRight` on the wipe	Move the split 2 %, `Shift` 10 %

Accessibility

Each version is a toggle button named with its number and prompt. Building, failed, current and live are words, not only glyphs.
The wipe is a slider whose value says how much of the older version shows.

Motion

Building versions use the text shimmer, the only one in the kit. The wipe follows the pointer. Nothing else animates.