Artifact versions

Step through artifact versions or pick one from a list, with edit times and line diff counts to the previous version.

Markdown

On this page

Step through versions or pick one, with the diff to the previous.

Installation

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

Usage

tsx

import { ArtifactVersions } from "@/components/ui/chatcn/artifact-versions"

<ArtifactVersions
  versions={[
    { id: "v1", content: first, createdAt: firstAt, summary: "First draft" },
    { id: "v2", content: second, createdAt: secondAt, summary: "Added filters" },
  ]}
  value={versionId}
  onValueChange={setVersionId}
  showMeta
/>

Give each version its content and the +12 −3 counts are computed with a line diff. Pass additions and deletions instead when your backend already knows them. An uncontrolled switcher moves to a new version when it arrives, if the reader was on the latest.

Props

Prop	Type	Notes
`versions`	`ArtifactVersion[]`	Oldest first: `id`, `label?`, `createdAt?`, `summary?`, `content?`, `additions?`, `deletions?`
`value`, `defaultValue`, `onValueChange`	`string`	Version id. Defaults to the latest
`showMeta`	`boolean`	Edited 2 min ago and the diff next to the switcher
`disabled`	`boolean`	The panel disables it while streaming

Also exported: diffLines(previous, next) for the counts and formatRelative(time, now) for the edit time.

Keyboard

Key	Action
`Enter`, `Space` on the trigger	Open the version list
`↑` `↓`, `Home`, `End`	Move through versions
`Enter`	Choose a version
`Esc`	Close the list

Accessibility

The list is a Base UI menu with radio items, so the current version is announced as checked.
Diff counts read as 12 lines added and 3 lines removed, not plus and minus signs.
Relative times refresh every 30 seconds without visible ticking.

Motion

The list opens from its trigger with scale 0.96 and opacity, 180 ms, and closes in 140 ms. Opened by keyboard it appears at once.