React AI Suggestion Diff
An assistant that rewrites your prompt, config, or code shouldn't apply the change silently — it should propose, and let you take the good parts and drop the rest. Per-hunk accept and reject is the whole point, because “accept all” and “reject all” are the failure mode this replaces.
Suggested edits
Installation
Props
| Prop | Type | Description |
|---|---|---|
| hunks | DiffHunk[] | { id, label?, removed?, added? } |
| title | string | Panel heading |
| statuses | Record<string, HunkStatus> | Controlled per-hunk state |
| onResolve | (id, status) => void | Fires on accept/reject/undo |
| onApply | (acceptedIds) => void | Fires when the resolved set is applied |
80% right is the normal case
The reason a diff beats a rewrite is that a good suggestion is rarely all-good. The model tightens your system prompt in three places and overreaches in a fourth; accepting the whole thing imports the overreach, rejecting it loses the wins. So each hunk gets its own Accept and Reject, an accepted hunk shows its removed lines struck through while the additions stand, a rejected one does the reverse, and either decision is one Undo away. The header tallies the count as you go.
The apply button stays disabled until every hunk has a decision, because a half-reviewed suggestion applied by accident is worse than one not applied at all — it leaves your prompt in a state no one chose. removed and added are plain string arrays, so this reviews prose, a config file, or code with equal ease; it renders the change, it doesn't parse a language.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.