Revert To AI Toggle

Transparency

Toggle between AI-generated and human-edited content versions with visual diff indicators. Helps users compare original AI output with manual edits.

Preview

Click the toggle to switch between AI and human-edited versions

Content Version

Currently showing: AI-generated

Based on our analysis, we recommend implementing a mobile-first redesign approach for your platform. This will maximize user engagement and retention based on current usage patterns.

This version differs from the human-edited version

Props

RevertToAIToggle component API reference

Prop	Type	Default	Description
`isAIVersion*`	`boolean`	—	Whether AI version is currently displayed
`onToggle*`	`(useAI: boolean) => void`	—	Callback when toggle is clicked
`aiVersion*`	`string`	—	The AI-generated content
`humanVersion*`	`string`	—	The human-edited content
`showDiff`	`boolean`	`false`	Show diff indicator when versions differ
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { RevertToAIToggle } from '@/components/ui/revert-to-ai-toggle'

export default function Example() {
  const [isAIVersion, setIsAIVersion] = useState(true)

  return (
    <RevertToAIToggle
      isAIVersion={isAIVersion}
      onToggle={(useAI) => setIsAIVersion(useAI)}
      aiVersion="AI-generated content here..."
      humanVersion="Human-edited content here..."
      showDiff={true}
    />
  )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Version comparison: Easily switch between AI and human-edited content
Diff indicator: Visual alert when versions differ
Animated toggle: Smooth sliding animation between versions
Color-coded states: Indigo for AI, emerald for human edits
Current version label: Clear indication of which version is displayed
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Toggle is a native button elementCurrent state indicated visually and in textDiff warning uses alert icon

Keyboard Navigation

Key	Action
`Tab`	Focus the toggle button
`Enter / Space`	Toggle between versions

Notes

Version type shown in text label
Color provides additional visual distinction
Diff message explains version difference
Consider aria-pressed for toggle state

Related Components

Regenerate Control Branch Comparison Draft Mode Indicator AI Chat Message