Eidetic

AI Suggestion Diff

AI
Results
Governor

Cursor-style red/green diff view for AI suggestions with line-by-line comparison, accept/reject actions, and optional line selection. Shows changes clearly with additions in green and deletions in red.

Preview - Code Diff

Unified diff view with line numbers

Simplify array reduction

utils.js

+2-6

Replace manual loop with Array.reduce for cleaner code

11
function calculateTotal(items) {
2
- let sum = 0
2
+ return items.reduce((sum, item) => sum + item.price, 0)
3
- for (let i = 0; i < items.length; i++) {
3
+}
4
- sum += items[i].price
5
- }
6
- return sum
7
-}
8 changes

Text Diff

Diff view for regular text content

Improve meeting description

+1-1

Standardize time format and use abbreviated quarter reference

-The meeting is scheduled for next Tuesday at 2pm. Please bring all relevant documents and be prepared to discuss the quarterly results.
+The meeting is scheduled for next Tuesday at 2:00 PM. Please bring all relevant documents and be prepared to discuss Q4 results.
2 changes

Line-by-Line Selection

Enable selective acceptance of changes

Select specific changes

+2-6
11
function calculateTotal(items) {
2
- let sum = 0
2
+ return items.reduce((sum, item) => sum + item.price, 0)
3
- for (let i = 0; i < items.length; i++) {
3
+}
4
- sum += items[i].price
5
- }
6
- return sum
7
-}
8 changes

Initially Collapsed

Start with diff collapsed

View suggestion details

+2-6

Props

AISuggestionDiff component API reference

PropTypeDefaultDescription
original*string—Original text/code
suggested*string—Suggested text/code
hunksDiffHunk[]—Pre-computed diff hunks (optional - will be computed if not provided)
titlestring'AI Suggested Changes'Title for the diff
descriptionstring—Description of the change
fileNamestring—File name or context label
languagestring—Language for syntax highlighting hint
onAccept() => void—Callback when user accepts the suggestion
onReject() => void—Callback when user rejects the suggestion
onPartialAccept(acceptedLines: number[]) => void—Callback when user accepts partially (line by line)
showLineNumbersbooleantrueShow line numbers
enableLineSelectionbooleanfalseEnable line-by-line selection
viewMode'unified' | 'split''unified'View mode (currently only unified is implemented)
defaultCollapsedbooleanfalseInitial collapsed state
wordLevelDiffbooleanfalseShow word-level diff highlighting (planned feature)
classNamestring—Additional CSS classes

DiffLine Type

PropTypeDefaultDescription
type*'add' | 'remove' | 'unchanged'—Type of change
content*string—Line content
oldLineNumbernumber—Original line number (for removals)
newLineNumbernumber—New line number (for additions)

Usage

Import and implementation example

import { AISuggestionDiff } from '@/blocks/ai-transparency/ai-suggestion-diff'


export default function Example() {
 const original = "const x = 1\nconst y = 2"
 const suggested = "const x = 1\nconst z = 3"


 return (
 <AISuggestionDiff
 original={original}
 suggested={suggested}
 title="Variable rename"
 description="Renamed y to z for clarity"
 fileName="script.js"
 language="javascript"
 onAccept={() => {
 // Apply the suggestion
 console.log('Accepted')
 }}
 onReject={() => {
 // Reject the suggestion
 console.log('Rejected')
 }}
 />
 )
}

Built With

1 component

This block uses the following UI components from the design system:

Button

Features

Built-in functionality

  • Unified diff view: Cursor-style diff with additions and deletions inline
  • Line numbers: Show old and new line numbers side by side
  • Color coding: Green for additions, red for deletions, neutral for unchanged
  • Accept/Reject actions: Built-in buttons for accepting or rejecting changes
  • Line selection: Optional line-by-line selection for partial acceptance
  • Collapsible view: Expand/collapse diff content with stats in header
  • Change statistics: Shows count of additions and deletions
  • File context: Display filename and language hints
  • Dark mode support: Full dark mode with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Action buttons are properly labeledLine selection checkboxes are keyboard accessibleCollapsed state is indicated visually with chevron rotation

Keyboard Navigation

KeyAction
TabNavigate between buttons and selectable lines
Enter / SpaceToggle line selection or activate buttons
EscapeCollapse the diff (when focused)

Notes

  • Color-blind friendly: Uses both color and symbols (+/-) for changes
  • Line strikethrough on deletions provides additional visual cue
  • Consider adding aria-label to describe the diff purpose
  • Stats shown in header provide context before expanding

Related Components

AI Uncertainty HighlighterCode BlockButtonCollapsible