This page documents the Vue 3 composable functions that encapsulate reusable business logic across workspace components in the @prompt-optimizer/ui package. Composables provide stateful logic, side effects management, and cross-component coordination using Vue's Composition API.
For workspace component implementation details, see Workspace Components. For session persistence patterns, see Session Management with Pinia. For evaluation system architecture, see Evaluation System.
The composable system is organized into functional categories that separate concerns and enable selective code reuse. Each composable follows Vue 3 Composition API patterns and returns reactive state, computed properties, and methods.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue482-527 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue425-501
These composables encapsulate the core optimization workflows, managing streaming LLM calls, version history, and iteration logic.
Manages single-prompt optimization for Pro mode's variable context workflow. Handles streaming optimization, version management, and history persistence.
Key Responsibilities:
PromptServicePromptRecordChainHistoryManager for persistenceUsage Pattern:
State Management:
isOptimizing: Ref<boolean> - Streaming statusisIterating: Ref<boolean> - Iteration statusprompt: Ref<string> - Original promptoptimizedPrompt: Ref<string> - Current optimized resultoptimizedReasoning: Ref<string> - LLM reasoningcurrentVersions: Ref<PromptRecord[]> - Version historycurrentVersionId: Ref<string> - Active version IDSources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue512 packages/ui/src/components/context-mode/ContextUserWorkspace.vue866-971
Handles message-level optimization in Pro mode's multi-turn conversation system. Manages per-message optimization chains and conversation state synchronization.
Key Responsibilities:
ConversationManager componentUsage Pattern:
State Management:
selectedMessageId: Ref<string | null> - Currently selected messageisOptimizing: Ref<boolean> - Optimization in progressoptimizedContent: Ref<string> - Optimized message contentmessageVersionChains: Record<string, PromptRecordChain> - Per-message historySources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue467
Adapts between message-level optimization state and the PromptPanel component's expected props. Provides computed properties that transform conversation optimization results into displayable format.
Key Responsibilities:
PromptPanel interfaceComputed Properties:
isInMessageOptimizationMode: ComputedRef<boolean> - Whether a message is selecteddisplayedOriginalPrompt: ComputedRef<string> - Original message contentdisplayedOptimizedPrompt: ComputedRef<string> - Optimized message contentdisplayedVersions: ComputedRef<PromptRecord[]> - Version history for displaydisplayedCurrentVersionId: ComputedRef<string | null> - Active versiondisplayedIsOptimizing: ComputedRef<boolean> - Optimization statusSources: packages/ui/src/components/context-mode/ContextSystemWorkspace.vue468
Orchestrates evaluation workflows across optimization types (prompt-only, prompt-iterate, original vs. optimized comparison). Manages evaluation state, streaming results, and UI panel visibility.
Key Responsibilities:
EvaluationServiceState Structure:
Methods:
evaluatePromptOnly(context) - Analyze single promptevaluatePromptIterate(context) - Evaluate iteration qualityevaluateOriginal(context) - Score original promptevaluateOptimized(context) - Score optimized promptevaluateCompare(context) - Compare original vs optimizedhandleReEvaluate() - Retry failed evaluationshowDetail(type) - Open evaluation detail panelclearEvaluation(type) - Reset evaluation stateSources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue514-515 packages/ui/src/components/PromptPanel.vue302
These composables handle the four-tier variable system (predefined, global, temporary, context) and provide AI-assisted variable extraction and value generation.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue683-718 packages/ui/src/components/context-mode/ContextUserTestPanel.vue276-307
Global singleton managing temporary (session-scoped) variables extracted from text selection or AI analysis. Survives navigation within the same mode but resets on page reload.
API:
Singleton Pattern: Uses module-level state to share temporary variables across all components in the same session, ensuring variable consistency when switching between input and test panels.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue683-684
Aggregates variables from all tiers (predefined, global, temporary) and provides unified access with correct priority resolution. Handles variable value changes, saving temporary to global, and removal.
Usage Pattern:
Priority Resolution: When the same variable name exists in multiple tiers, uses: predefined > temporary > global > context.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue278-298
Leverages AI (via VariableValueGenerationService) to automatically generate realistic test values for variables based on prompt context. Provides batch preview and selective application.
Workflow:
VariableValueGenerationService.generateValues()Usage Pattern:
Generation Context:
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue310-327
Parses prompt input for {{variableName}} syntax, extracts detected variables, validates completeness, and provides text selection extraction to variables.
Features:
Extracted Interface:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue511
The evaluation system uses Vue's provide/inject pattern to share evaluation state across deeply nested components without prop drilling. This enables PromptPanel and OutputDisplay components to access evaluation functionality regardless of their position in the component tree.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue514-515 packages/ui/src/components/PromptPanel.vue382-386
Creates and provides evaluation context at workspace level. Initializes useEvaluationHandler and exposes it to child components via Vue's provide API.
Setup Pattern:
Provided Interface:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue514
Consumes evaluation context provided by ancestor workspace. Returns null if not provided, allowing components to gracefully handle absence of evaluation functionality.
Usage Pattern:
Graceful Degradation: Components using this composable work in both evaluation-enabled (Pro mode) and evaluation-disabled (Basic mode) contexts.
Sources: packages/ui/src/components/PromptPanel.vue382
Provides Pro mode-specific context (conversation messages, variables, tools) to evaluation system for contextual analysis.
Context Structure:
Usage: Evaluation functions receive this context to provide more accurate scoring based on conversation history, variable values, and available tools.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue515 packages/ui/src/components/PromptPanel.vue385
These composables encapsulate workspace-level concerns like model/template selection and prompt preview.
Manages text and image model selection state synchronized with session store. Provides computed NSelect options formatted for Naive UI components.
Interface:
Session Integration:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue820-826
Manages template selection state synchronized with session store. Loads templates from TemplateManager and filters by type (optimize, iterate, contextIterate, etc.).
Interface:
Type Filtering: Constructor accepts optimizeType and iterateType parameters to load only relevant templates for the workspace mode (e.g., 'contextUserOptimize' and 'contextIterate' for ContextUserWorkspace).
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue821-826
Manages local preview panel state for rendering prompts with variable substitution. Detects missing variables and provides rendering statistics.
Features:
{{varName}} → actual valueAPI:
Rendering Logic:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue720-728
Cross-cutting UI concerns like toast notifications, responsive layout, and theme management.
Wrapper around Naive UI's useMessage that provides consistent toast API across the application.
API:
Usage: Every workspace and component imports this for user feedback instead of directly using useMessage.
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue627
Provides reactive breakpoint detection and responsive configuration values based on viewport size.
Breakpoint-Dependent Values:
Breakpoints:
< 640px: Compact mode, small buttons, vertical layouts640px - 768px: Medium buttons, adaptive layouts768px - 1024px: Normal mode, horizontal layouts> 1024px: Large buttons, multi-column layoutsSources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue122-125 packages/ui/src/components/TestAreaPanel.vue173-180
Manages application theme state and provides theme switching functionality. Integrates with Naive UI's theme system and persists theme preference.
API:
Theme Configuration: Defined in packages/ui/src/config/naive-theme.ts with customized color palettes, spacing, and component overrides.
Sources: packages/ui/src/index.ts47
Composables for managing application mode state (function mode and sub-mode selection).
Singleton managing Pro mode's sub-mode state (multi-turn vs. variable context). Persists selection in PreferenceService.
Architecture:
Singleton Pattern: Module-level state ensures consistent mode across all components. First call initializes from storage asynchronously.
Legacy Migration: Automatically migrates old values ('system' → 'multi', 'user' → 'variable') and persists normalized values.
Usage:
Storage Key: UI_SETTINGS_KEYS.PRO_SUB_MODE in PreferenceService.
Sources: packages/ui/src/composables/mode/useProSubMode.ts1-99
Utilities for debugging performance issues and optimizing render cycles.
Tracks component update frequency and provides performance grading.
Metrics:
Usage Pattern:
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue116 packages/ui/src/components/TestAreaPanel.vue163-167
Provides debounce and throttle utilities optimized for Vue 3 reactivity with automatic cleanup.
API:
Automatic Cleanup: Integrates with Vue's lifecycle to cancel pending calls on component unmount.
Named Keys: Optional key parameter allows multiple debounced/throttled functions to be managed independently.
Sources: packages/ui/src/components/context-mode/ContextUserTestPanel.vue119 packages/ui/src/components/TestAreaPanel.vue170
Composables interact with Pinia session stores for state persistence. The pattern separates transient reactive logic (composables) from persistent state (stores).
Composable Responsibilities:
Store Responsibilities:
Binding Pattern:
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue739-971
| Composable | Category | Primary Purpose | Key Return Values |
|---|---|---|---|
useContextUserOptimization | Prompt | Single-prompt optimization workflow | isOptimizing, optimizedPrompt, currentVersions, handleOptimize() |
useConversationOptimization | Prompt | Message-level optimization in conversations | selectedMessageId, isOptimizing, selectMessage(), handleOptimize() |
usePromptDisplayAdapter | Prompt | Abstract conversation state for PromptPanel | displayedOptimizedPrompt, displayedVersions, isInMessageOptimizationMode |
useEvaluationHandler | Evaluation | Orchestrate all evaluation workflows | state, evaluatePromptOnly(), evaluateCompare(), showDetail() |
useTemporaryVariables | Variable | Session-scoped variable storage | temporaryVariables, addVariable(), removeVariable() |
useTestVariableManager | Variable | Aggregate multi-tier variables | sortedVariables, getVariableValues(), handleVariableValueChange() |
useSmartVariableValueGeneration | Variable | AI-assisted value generation | isGenerating, handleGenerateValues(), confirmBatchApply() |
useVariableAwareInputBridge | Variable | Parse and extract variables from text | extractedVariables, missingVariables, handleExtractFromSelection() |
useWorkspaceModelSelection | Workspace | Model selection state management | selectedOptimizeModelKey, textModelOptions, hasValidOptimizeModel |
useWorkspaceTemplateSelection | Workspace | Template selection state management | selectedOptimizeTemplate, templateOptions, refreshTemplates() |
useLocalPromptPreviewPanel | Workspace | Variable-aware prompt preview | show, previewContent, missingVariables, open() |
useProSubMode | Mode | Pro sub-mode (multi/variable) singleton | proSubMode, setProSubMode(), switchToMulti() |
useToast | UI | Toast notification wrapper | success(), error(), warning(), info() |
useResponsive | UI | Breakpoint-aware layout config | shouldUseVerticalLayout, buttonSize, gridConfig |
useNaiveTheme | UI | Theme management | currentThemeId, switchTheme(), currentThemeOverrides |
usePerformanceMonitor | Performance | Component update tracking | recordUpdate(), getPerformanceReport() |
useDebounceThrottle | Performance | Rate limiting utilities | debounce(), throttle() |
Sources: packages/ui/src/components/context-mode/ContextUserWorkspace.vue482-527 packages/ui/src/components/context-mode/ContextSystemWorkspace.vue425-501 packages/ui/src/components/PromptPanel.vue297-310 packages/ui/src/components/context-mode/ContextUserTestPanel.vue93-362 packages/ui/src/composables/mode/useProSubMode.ts1-99
Refresh this wiki