Prompt historyPro

Every prompt you ran, grouped by day, with search, a starred filter and a word diff against the prompt you have now, so you see what reusing one would change before you do.

Markdown

On this page

ProThree days of prompts under the one in the composer. Search, move with the arrows and see what reusing a prompt would change before Enter puts it back.

Installation

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

Usage

tsx

import { PromptHistory } from "@/components/ui/chatcn/pro/prompt-history"

<PromptHistory
  entries={history}
  current={prompt}
  onReuse={(entry) => setPrompt(entry.prompt)}
  onStarredChange={star}
/>

Pass entries newest first. Search matches every word you type against the prompt and the model name and marks the matches. The selected prompt is compared word by word with current: inserted words are underlined, removed words are struck, and the counts lead with + and -, so the change never depends on color. Changes separated only by spaces and commas join into one run, so a rewritten phrase reads as one edit.

Two panes when the component is at least 42 rem wide (a container query), stacked below that. diffPrompt and matchesQuery are exported for servers and tests.

Examples

States

ProLoading, no history, a search with no match, and a narrow panel with a search.

Props

Prop	Type	Notes
`entries`	`PromptHistoryEntry[]`	`id`, `prompt`, `createdAt`, `model`, `images`, `starred`
`current`	`string`	The prompt in the composer now
`onReuse`	`(entry) => void`	Button, Enter in the search field and double click
`onStarredChange`	`(id, starred) => void`	Shows the star toggle
`query`, `defaultQuery`, `onQueryChange`	`string`
`selectedId`, `defaultSelectedId`, `onSelectedChange`	`string`	Default the first result
`starredOnly`, `defaultStarredOnly`, `onStarredOnlyChange`	`boolean`
`loading`	`boolean`	Skeleton rows and details
`listHeight`	`number`	Default 420
`label`	`string`	Accessible name of the results. Default "Prompt history"
`now`, `locale`		Day groups and times

Keyboard

Key	Action
`↑` `↓`	Move through results
`Page Up` `Page Down`	Move eight results
`Enter`	Reuse the selected prompt. Never while composing with an IME
`Esc`	Clear the search

Accessibility

The search field is a combobox that keeps focus while aria-activedescendant points at the selected result, so typing and moving never fight.
Results are a listbox grouped by day; each option is named by its prompt, then its time, model and image count.
The result count is a polite live region and the field's description. Inserted and removed words carry hidden added and removed markers for screen readers.

Motion

None that moves. The list changes on every keystroke and is driven by the keyboard, so results, the selection and the diff swap at once. Hover changes background in 150 ms.