AI Diff Suggestion Card

AI suggestions presented as an inline diff — deletions struck through in red, additions in green, accepted or rejected one by one.

AI edit suggestions presented as diff markers inside a paragraph of text — deleted original text gets a red background with a strikethrough, added text gets a green background — and hovering a marker floats out small accept and reject buttons: accepting plays a green confirmation animation, rejecting restores the original. A header offers "Accept all" and a remaining count, which suits AI writing assistants, copy polishing, and review workflows.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/ai-diff-suggestion.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Card titletitle

<AiDiffSuggestion />

Installation

npx shadcn@latest add "https://webberui.com/r/ai-diff-suggestion.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/ai-diff-suggestion.

Usage

import {
  AiDiffSuggestion,
  type DiffSegment,
} from "@/components/ui/ai-diff-suggestion";

const segments: DiffSegment[] = [
  { type: "text", content: "Thank you for " },
  { type: "suggestion", id: "s1", removed: "trying", added: "taking the time to experience" },
  { type: "text", content: " our service." },
];

<AiDiffSuggestion
  segments={segments}
  onResolve={(id, action) => console.log(id, action)}
/>

Props

Prop	Type	Default	Description
`segments`	`DiffSegment[]`	—	The sequence of diff segments, interleaving plain text with AI suggestions
`title`	`string`	`"AI 修改建議"` ("AI edit suggestions")	Card title
`onResolve`	`(id: string, action: "accept" \| "reject") => void`	—	Fires when a single suggestion is accepted or rejected
`onComplete`	`() => void`	—	Fires once when every suggestion has been resolved
`className`	`string`	—	Forwarded to the card's outer container

DiffSegment is a union of two types:

Field	Type	Description
`type`	`"text" \| "suggestion"`	`text` is a plain text segment, `suggestion` is an AI suggestion segment
`content`	`string`	Plain text content (`text` only)
`id`	`string`	Unique identifier of the suggestion, returned through `onResolve` (`suggestion` only)
`removed`	`string`	The original text the suggestion deletes; an empty string means a pure addition (`suggestion` only)
`added`	`string`	The text the suggestion adds; an empty string means a pure deletion (`suggestion` only)

Accessibility

Deletions and additions use the semantic del and ins elements, so assistive technology can tell what kind of revision each one is
Accept and reject are real button elements with an aria-label, focusable with Tab, and the buttons surface automatically on focus
Touch devices have no hover: tapping the marker itself pins the accept / reject buttons in place
When the user has "reduce motion" enabled at the system level, the green confirmation flash and the cascade animation of "Accept all" are skipped and the result is shown directly