Prompt enhancerPro

A composer that rewrites your prompt in place and shows the rewrite as an inline word diff: keep or drop each change, then use the result.

Markdown

On this page

ProA support lead drafts a customer email. Improve rewrites it in place as a word diff to take or leave change by change.

Installation

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

Usage

tsx

import { PromptEnhancer } from "@/components/ui/chatcn/pro/prompt-enhancer"

<PromptEnhancer
  onEnhance={(text, { signal }) => improvePrompt(text, { signal })}
  onSubmit={({ text }) => send(text)}
  status={status}
  onStop={stop}
/>

Improve (or Cmd I) sends the draft to onEnhance and replaces the text, in the same footprint, with a word diff of the rewrite. A reworded phrase is one change, not five, and spaces stay plain so only words light up. Each change is a token: kept, it shows the old words struck and the new ones marked; dropped, your words come back and the suggestion is struck. The toolbar counts what you kept, Enter uses the result, Escape keeps your draft, and Undo stays for six seconds after. Nothing shows for the first 300 ms of a rewrite; after that the button says Improving and Escape cancels through the signal. A rewrite with no changes says so instead of opening an empty review. diffPrompt and composePrompt are exported for your own review surfaces.

Examples

States

ProToo short to improve, improving, reviewing a rewrite, two changes dropped, could not improve, and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The draft, controlled or not
`onSubmit`	`({ text }) => void`	Enter or Send. Never while empty, disabled or busy
`status`, `onStop`	`"idle" \| "submitting" \| "streaming"`, `() => void`	Send becomes Stop in the same footprint
`disabled`	`boolean`
`onEnhance`	`(text, { signal }) => Promise<string>`	Returns the rewrite. Reject to show the error
`onReviewed`	`({ text, kept, total }) => void`	After Use rewrite, for analytics
`defaultRewrite`	`string`	Open in review with a suggestion made before mount
`minLength`	`number`	Shorter drafts cannot be improved. Default 12
`tools`, `actions`, `attachments`	`ReactNode`	Toolbar start, before Send, above the text
`labels`	`Partial<PromptEnhancerLabels>`	Every string, for translation

Keyboard

Key	Action
Cmd I or Ctrl I	Improve the draft
Left and Right	Move between changes in the review
Space	Keep or drop the focused change
Enter	Use the result
Escape	Cancel a rewrite in progress, or keep your draft

Accessibility

Each change is a checkbox named for what it does: add, remove or change, with the words.
The review is one tab stop; arrows move between changes, so long rewrites never flood the tab order.
The kept count is a polite live region; the error is an alert that says how to fix it.
Removed words are struck through and added words are tinted, so the diff never relies on color alone.

Motion

Toggling a change crossfades its colors in 150 ms; nothing moves. The draft dims after 300 ms of waiting. The review swaps in without animation because Improve is often pressed from the keyboard.