Overview
AIContextEditor provides a markdown-based editor for managing AI context instructions. It includes write/preview tabs, version history, file attachments, and token estimation. Use the full editor when space allows, or AIContextEditorLauncher for space-constrained contexts.
Key Features
- Markdown editing with live preview
- Token count estimation for context budgeting
- Version history with restore functionality
- File attachments with parsing status
- Auto-save drafts to localStorage
Examples
Full Editor Example
Full featured editor with markdown support, file attachments, and version history
~82 tokens
Attached files are parsed by AI and included in the context.
Content length: 328 characters
Launcher Example
Compact launcher button that opens editor in a dialog
Click the button to open the editor in a dialog. Changes are saved to the state when you submit.
Props Reference
AIContextEditor
| Prop | Type | Default | Description |
|---|---|---|---|
value | AIContextValue | required | Current AI context value (content, attachments, parsed content) |
onChange | (value: AIContextValue) => void | required | Callback when content or attachments change |
entityType | ContextEntityType | required | Type of entity this context belongs to (PROGRAM, PROJECT, TRAIT, etc.) |
entityId | string | required | ID of the entity for draft storage key |
entityName | string | - | Entity name for placeholder text |
showHistory | boolean | false | Show the History tab with version restore |
versions | AIContextVersionItem[] | - | Array of version history items |
onRestoreVersion | (versionId: string) => Promise<void> | - | Callback to restore a specific version |
allowAttachments | boolean | false | Enable file attachment section |
disabled | boolean | false | Disable editing |
minHeight | number | 200 | Minimum height of the textarea in pixels |
maxHeight | number | 500 | Maximum height of the textarea in pixels |
AIContextEditorLauncher
| Prop | Type | Default | Description |
|---|---|---|---|
value | AIContextValue | required | Current AI context value for the launcher |
onChange | (value: AIContextValue) => void | required | Callback when content changes in the dialog |
entityType | ContextEntityType | required | Type of entity this context belongs to (PROGRAM, PROJECT, TRAIT, etc.) |
entityId | string | required | ID of the entity for draft storage key |
entityName | string | - | Entity name shown in dialog title |
disabled | boolean | false | Disable editing |
Usage
import { AIContextEditor, AIContextEditorLauncher } from '@/ui/components';
import type { AIContextValue } from '@/ui/components/ai-context-editor';
// Basic editor usage
const [value, setValue] = useState<AIContextValue>({
id: null,
content: '',
parsedContent: null,
attachments: [],
});
<AIContextEditor
value={value}
onChange={setValue}
entityType="PROGRAM"
entityId={programId}
entityName={programName}
/>
// Launcher pattern (button + dialog)
<AIContextEditorLauncher
value={value}
onChange={setValue}
entityType="TRAIT"
entityId={traitId}
entityName="Bug Reports"
/>
// With version history and attachments
<AIContextEditor
value={value}
onChange={setValue}
entityType="PROJECT"
entityId={projectId}
entityName={projectName}
showHistory
versions={versionHistory}
onRestoreVersion={handleRestore}
allowAttachments
onAttachmentsAdd={handleFilesAdd}
onAttachmentRemove={handleFileRemove}
/>