AI 修改建議卡
AI 建議以行內 diff 呈現：刪除線紅/新增綠、逐項接受或拒絕。
在文字段落中以 diff 標記呈現 AI 修改建議——刪除的原文為紅底刪除線、新增的文字為綠底，滑鼠移到標記上會浮出接受與拒絕小鈕：接受播放綠色定案動畫、拒絕則恢復原文，頂部提供「全部接受」與剩餘計數，適合 AI 寫作助手、文案潤飾與審閱流程。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/ai-diff-suggestion.json或在 components.json 設定 registries 後，改用 @webberui/ai-diff-suggestion 安裝。
安裝依賴後，從 registry JSON（/r/ai-diff-suggestion.json 的 files[0].content）複製 ai-diff-suggestion.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import {
AiDiffSuggestion,
type DiffSegment,
} from "@/components/ui/ai-diff-suggestion";
const segments: DiffSegment[] = [
{ type: "text", content: "感謝您" },
{ type: "suggestion", id: "s1", removed: "試用了", added: "撥冗體驗" },
{ type: "text", content: "我們的服務。" },
];
<AiDiffSuggestion
segments={segments}
onResolve={(id, action) => console.log(id, action)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
segments | DiffSegment[] | — | diff 段落序列，一般文字與 AI 建議交錯排列 |
title | string | "AI 修改建議" | 卡片標題 |
onResolve | (id: string, action: "accept" | "reject") => void | — | 單項建議被接受或拒絕時觸發 |
onComplete | () => void | — | 所有建議都處理完畢時觸發一次 |
className | string | — | 透傳到卡片外層容器 |
DiffSegment 為兩種型別的聯集：
| 欄位 | 型別 | 說明 |
|---|---|---|
type | "text" | "suggestion" | text 為一般文字段，suggestion 為 AI 建議段 |
content | string | 一般文字內容（僅 text） |
id | string | 建議唯一識別碼，透過 onResolve 回傳（僅 suggestion） |
removed | string | 建議刪除的原文，空字串代表純新增（僅 suggestion） |
added | string | 建議新增的文字，空字串代表純刪除（僅 suggestion） |
可及性
- 刪除與新增分別使用語意化的
del與ins元素，輔助科技可辨識修訂性質 - 接受與拒絕為真正的
button元素並附aria-label，可用 Tab 聚焦，聚焦時按鈕會自動浮現 - 觸控裝置沒有 hover：點擊標記本身即可固定顯示接受/拒絕按鈕
- 使用者系統開啟「減少動態效果」時，略過綠色定案閃爍與「全部接受」的級聯動畫，直接呈現結果