AIContextEditor

Markdown editor with preview and version history for AI context

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

The complete editor with tabs for Write, Preview, and History. Toggle options to see different configurations.

Entity Name

Show History

Allow Attachments

Disabled

~82 tokens

Attachments

Attached files are parsed by AI and included in the context.

Content length: 328 characters

Launcher Pattern

Button + dialog pattern for space-constrained contexts like sheets and sidebars.

Click the button to open the editor in a dialog. Changes are applied when the dialog closes.

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}
/>

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

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

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} />