Prompt diffPro

A word level diff of two prompts that keeps `{{variables}}` whole, lists variables added and removed, and folds long unchanged stretches.

Markdown

On this page

Prov13 to v14: a variable added, one removed and the policy reworded.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/prompt-diff

Usage

tsx

import { PromptDiff } from "@/components/ui/chatcn/pro/prompt-diff"

<PromptDiff before={v13.content} after={v14.content} beforeLabel="v13" afterLabel="v14" />

The diff runs on words, punctuation and whole variables, then groups each run of changes into one deletion and one addition, absorbing single short words between them, so a reworded sentence reads as one swap instead of a confetti of fragments.

A new variable is a contract change for whoever fills the prompt, so added and removed variables are listed by name above the text. Ignore spacing treats whitespace and line breaks as equal. diffPrompts and diffStats are exported from chatcn-pro-eval-a for your own views.

Examples

States

ProA long prompt side by side with unchanged text folded, a spacing only change and nothing to compare.

Props

Prop	Type	Notes
`before`, `after`	`string`	The two prompts
`beforeLabel`, `afterLabel`	`ReactNode`	Default "Before" and "After"
`view`, `defaultView`	`"inline" \| "split"`	Default `inline`
`ignoreWhitespace`, `defaultIgnoreWhitespace`	`boolean`	Default false
`collapseUnchanged`	`boolean`	Fold long unchanged stretches. Default true
`maxHeight`	`number \| string`	Default 420
`hideHeader`	`boolean`	Hide stats and controls

Accessibility

Changes use ins and del with "Added" and "Removed" for screen readers, and red and green tints with strike through as the visual backup.
Folded text is a button that says how many words it hides.

Motion

None. Switching layout and unfolding text are instant.