Suggest changesPro

Track changes from the assistant, set inside the document: insertions underlined in green, deletions struck in red, accept or reject each one, a review strip with one tick per change, and accept all.

Markdown

On this page

ProA customer notice with seven suggestions set inline: accept, reject or undo each, step with the review bar, or accept all.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/suggest-changes

Usage

tsx

import { SuggestChanges } from "@/components/ui/chatcn/pro/suggest-changes"

<SuggestChanges
  title="Customer notice: photo storage"
  blocks={blocks}
  decisions={decisions}
  onDecisionsChange={setDecisions}
/>

A block is a run of text and changes; each change is insert, delete or replace with an optional reason. Decided changes resolve in place: accepted ones take the new text, rejected ones keep the old. The review bar under the page states the active change in words, with Undo once it is decided. resolveSuggestedText(blocks, decisions) returns the clean text for copying or saving.

Examples

States

ProStill suggesting, all reviewed, loading, a clean draft, an error partway and view only.

Props

Prop	Type	Notes
`blocks`	`{ id, kind?, segments }[]`	`segments` mixes strings and changes
`SuggestedChange`	`{ id, kind: insert \| delete \| replace, text?, from?, reason? }`	One change
`decisions`, `defaultDecisions`, `onDecisionsChange`	`Record<id, pending \| accepted \| rejected>`	Controlled or not
`activeId`, `defaultActiveId`, `onActiveIdChange`	`string`	The change in the review bar
`status`, `progressLabel`	`idle \| loading \| streaming \| error`, `string`	Accept all waits while streaming
`error`, `onRetry`	`ReactNode`, `() => void`	Changes so far stay reviewable
`title`	`string`	Names the region
`disabled`	`boolean`	View only

Keyboard

Key	Action
Tab	Moves to the next pending change
Enter or A	Accepts the focused change and moves to the next
Backspace, Delete or R	Rejects the focused change and moves to the next
Arrow keys, J or K	Next or previous pending change

Accessibility

Each change is a button named by what it does, for example Replace “in order to” with “to”.
Insertions and deletions use real ins and del elements, with the underline and strike as the non-color cue.
Each decision is announced in a polite live region; the review strip names every change and its state.

Motion

Nothing animates on accept or reject, since review is fast and keyboard driven: changes resolve instantly. The active tick in the strip grows over 150 ms when picked with the pointer.