Prompt versionsPro
Every saved version of a prompt with author, note and environment labels, a word diff against the version before or against production, and promotion with undo.
On this page
Installation
Usage
import { PromptVersions } from "@/components/ui/chatcn/pro/prompt-versions"
<PromptVersions
versions={versions}
deployments={deployments}
onDeploymentsChange={setDeployments}
onPromote={(versionId, env) => api.promote(versionId, env)}
/>deployments maps each environment to the version it serves. onPromote does the work; when it resolves the label moves and a notice says what it replaced, with Undo. When it rejects, its message is shown with Retry, so write it as a fix: "Production is frozen until 18:00. Ask a release owner to lift the freeze."
Changes uses prompt-diff, so variables added or removed are listed by name. Compare with the version before, with what an environment serves, or with any version.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
versions | PromptVersionEntry[] | Newest first: { id, label, message?, author, createdAt, content, model? } |
deployments, defaultDeployments | Record<string, string> | Environment to version id |
environments | string[] | Default ["production", "staging"] |
onPromote | (versionId, env) => Promise<void> | Without it the list is read only |
selectedId, defaultSelectedId | string | Default: the newest |
now | number | Fixes relative times for screenshots and tests |
Keyboard
| Key | Action |
|---|---|
Arrow up, Arrow down | Select the previous or next version |
Home, End | Newest or oldest version |
Accessibility
- The list is a listbox; selection follows focus and the selected version is announced with its labels.
- Production and staging carry their names as text, not only their color.
- Promotion progress, success and failure are a status region.
Motion
Selecting a version swaps the detail instantly: it is a frequent, keyboard driven action. The Promote menu uses the kit's popover motion.