AI Memory Control
Privacy-focused interface for users to view, manage, and control what the AI remembers about them. Supports categories, sensitivity levels, search, and bulk actions.
Default
Full memory management interface
AI Memory Control
Manage what the AI remembers about you
Dark mode + compact layout preference
E-commerce architecture discussion
Source: Chat session #142
Software engineer at TechCorp
Prefers TypeScript examples
4 of 4 memories shown
Compact Variant
Minimal memory status indicator
Privacy Mode
Blur sensitive content
AI Memory Control
Manage what the AI remembers about you
Dark mode + compact layout preference
E-commerce architecture discussion
Source: Chat session #142
Software engineer at TechCorp
Prefers TypeScript examples
4 of 4 memories shown
Props
AIMemoryControl component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
memories* | MemoryItem[] | — | Array of memory items to display |
stats | MemoryStats | — | Memory statistics (totalItems, activeItems, storageUsed, lastUpdated) |
memoryEnabled | boolean | true | Whether memory is currently enabled |
onMemoryToggle | (enabled: boolean) => void | — | Callback when memory enabled state changes |
onDeleteMemory | (id: string) => void | — | Callback when a memory item is deleted |
onToggleMemory | (id: string, active: boolean) => void | — | Callback when a memory item is toggled |
onClearAll | () => void | — | Callback when all memories are cleared |
onExport | () => void | — | Callback when memories are exported |
onSearch | (query: string) => void | — | Callback when search query changes |
variant | 'default' | 'compact' | 'panel' | 'default' | Display variant |
privacyMode | boolean | false | Hide sensitive content |
onPrivacyModeChange | (enabled: boolean) => void | — | Callback when privacy mode changes |
clearing | boolean | false | Whether clearing is in progress |
Usage
Import and implementation example
import { AIMemoryControl } from '@/blocks/ai-transparency/ai-memory-control'
const memories = [ { id: '1', category: 'preferences', content: 'User prefers dark mode', timestamp: new Date(), sensitivity: 'low', isActive: true, canDelete: true, canToggle: true, },]
export default function Settings() { const [memoryEnabled, setMemoryEnabled] = useState(true)
const handleDelete = async (id: string) => { await deleteMemory(id) refetch() }
return ( <AIMemoryControl memories={memories} memoryEnabled={memoryEnabled} onMemoryToggle={setMemoryEnabled} onDeleteMemory={handleDelete} onClearAll={() => clearAllMemories()} onExport={() => exportMemories()} /> )}Built With
4 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Category filtering: 6 memory categories: conversations, preferences, context, personal, learned, system
- Sensitivity levels: Low, medium, high, critical with visual indicators
- Privacy mode: Blur sensitive content on demand
- Search: Filter memories by content or summary
- Statistics: Display total items, active items, storage used
- Bulk actions: Clear all with confirmation
- Export: Export memories for backup
- Per-item controls: Toggle active state or delete individual items
- Compact variant: Minimal status indicator for sidebars
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Switch component for memory toggleButton elements for all actionsClear visual state for enabled/disabledKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between controls |
| Enter / Space | Activate buttons and switches |
Notes
- Sensitivity indicated by both icon and text label
- Confirmation required for destructive clear action
- Privacy mode provides additional content protection
- Category colors supplemented with text labels