Regenerate Control
AI
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.
Preview
Try regenerating and navigating between versions
AI Response
Version 1 of 3
95%
Based on the analysis, we recommend implementing a mobile-first redesign approach.
GPT-4
Variants
Different configurations for various use cases
Basic (no version history)
Loading State
With Version Navigation
Claude
Props
RegenerateControl component API reference
| 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 |
onDelete | (version: number) => void | — | Callback when deleting a version |
isLoading | boolean | false | Shows loading state while generating |
Version Type
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique identifier |
model | string | — | AI model name |
timestamp | Date | string | — | Generation timestamp |
confidence | number | — | Confidence score (0-1) |
pinned | boolean | — | Whether version is pinned |
Usage
Import and implementation example
import { RegenerateControl } from '@/components/ui/regenerate-control'
export default function Example() {
const [currentVersion, setCurrentVersion] = useState(1)
const [versions, setVersions] = useState([
{ id: '1', model: 'GPT-4', timestamp: new Date(), confidence: 0.95, pinned: false },
])
const handleRegenerate = async () => {
setIsLoading(true)
const newResponse = await generateResponse()
setVersions([...versions, newResponse])
setCurrentVersion(versions.length + 1)
setIsLoading(false)
}
return (
<RegenerateControl
currentVersion={currentVersion}
totalVersions={versions.length}
versions={versions}
onRegenerate={handleRegenerate}
onNavigate={setCurrentVersion}
onPin={(v) => togglePin(v)}
onDelete={(v) => deleteVersion(v)}
isLoading={isLoading}
/>
)
}Features
Built-in functionality
- Version history: Track all generated versions with metadata
- Easy navigation: Arrow buttons and dropdown menu for version selection
- Pin favorites: Mark important versions with a star
- Delete versions: Remove unwanted versions
- Loading states: Spinner animation while generating
- Confidence display: Show confidence score per version
- Model tracking: Display which AI model generated each version
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Regenerate button has aria-labelNavigation buttons have aria-labelsVersion dropdown is keyboard navigableKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between controls |
| Enter / Space | Activate buttons |
| Escape | Close version dropdown |
Notes
- Version count shown as "X of Y" text
- Loading state disables regenerate button
- Pinned status indicated by star icon and text
- Confidence shown as percentage