Regenerate Control

Transparency

UI control for regenerating AI responses with version navigation, pinning, and management. Allows users to iterate on AI-generated content and compare different versions.

Interactive Demo

Try regenerating the AI response and navigating between versions.

AI Response

Version 1 of 3

95% confidence

Based on the analysis of your user data, I recommend implementing a mobile-first redesign approach. This will maximize user engagement and retention across all devices.

GPT-4

Code Example

import { RegenerateControl } from '@/components/ui/regenerate-control'

const [currentVersion, setCurrentVersion] = useState(1)
const [versions, setVersions] = useState([
  {
    id: '1',
    model: 'GPT-4',
    timestamp: new Date('2024-01-15T10:30:00'),
    confidence: 0.95,
    pinned: false,
  },
  // ... more versions
])

<RegenerateControl
  currentVersion={currentVersion}
  totalVersions={versions.length}
  versions={versions}
  onRegenerate={() => generateNewVersion()}
  onNavigate={(version) => setCurrentVersion(version)}
  onPin={(version) => togglePin(version)}
  onDelete={(version) => deleteVersion(version)}
  isLoading={isGenerating}
/>

Basic Usage

Simple regenerate button without version history.

import { RegenerateControl } from '@/components/ui/regenerate-control'

// Minimal usage - just a regenerate button
<RegenerateControl
  onRegenerate={() => console.log('Regenerate')}
/>

Loading State

Shows a spinner and disables the button while generating.

import { RegenerateControl } from '@/components/ui/regenerate-control'

<RegenerateControl
  isLoading={true}
  onRegenerate={() => console.log('Regenerate')}
/>

Version Navigation

Navigate between multiple generated versions with previous/next controls.

Claude 3.5 Sonnet

Click the version number to see a dropdown of all versions

import { RegenerateControl } from '@/components/ui/regenerate-control'

<RegenerateControl
  currentVersion={2}
  totalVersions={5}
  versions={versions}
  onNavigate={(version) => setCurrentVersion(version)}
/>

With All Actions

Full feature set including pin and delete functionality.

Claude 3.5 Sonnet

• Click Regenerate to create a new version

• Use arrows or version number to navigate

• Click to pin/unpin the current version

• Click ✕ to delete the current version

import { RegenerateControl } from '@/components/ui/regenerate-control'

<RegenerateControl
  currentVersion={currentVersion}
  totalVersions={versions.length}
  versions={versions}
  onRegenerate={handleRegenerate}
  onNavigate={handleNavigate}
  onPin={handlePin}
  onDelete={handleDelete}
  isLoading={isLoading}
/>

Props

Complete API reference for the RegenerateControl component.

Prop	Type	Default	Description
currentVersion	number	1	Currently displayed version number
totalVersions	number	1	Total number of versions
versions	Version[]	[]	Array of version metadata
onRegenerate	() => void	-	Callback when regenerate is clicked
onNavigate	(version: number) => void	-	Callback when navigating to a version
onPin	(version: number) => void	-	Callback when pinning/unpinning a version
onDelete	(version: number) => void	-	Callback when deleting a version
isLoading	boolean	false	Shows loading state while generating

Version Type

Property	Type	Description
id	string	Unique identifier for the version
model	string	Name of the AI model used
timestamp	Date \| string	When the version was generated
confidence	number	Confidence score (0-1)
pinned	boolean	Whether the version is pinned

Features

Version History

Keep track of all generated versions with metadata including model, timestamp, and confidence scores.

Easy Navigation

Navigate between versions using arrow buttons or click the version number to see a dropdown menu.

Pin Favorites

Mark important versions with a star to easily find them later in the version history.

Loading States

Clear visual feedback with spinner animation while new versions are being generated.