[OQI-007] feat: Add LLM strategy agent advanced components
- AnalysisRequestForm: Structured request builder for complex analysis tasks - StrategyTemplateSelector: Pre-built strategy templates with AI recommendations - LLMConfigPanel: Model selection and inference parameters (Claude models) - ContextMemoryDisplay: Conversation context and memory visualization Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
7d9e8d2da9
commit
5ee7f14f25
495
src/modules/assistant/components/AnalysisRequestForm.tsx
Normal file
495
src/modules/assistant/components/AnalysisRequestForm.tsx
Normal file
@ -0,0 +1,495 @@
|
|||||||
|
/**
|
||||||
|
* AnalysisRequestForm Component
|
||||||
|
* Structured request builder for complex LLM analysis tasks
|
||||||
|
* OQI-007: LLM Strategy Agent
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
ChartBarIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
AdjustmentsHorizontalIcon,
|
||||||
|
BeakerIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
PaperAirplaneIcon,
|
||||||
|
BookmarkIcon,
|
||||||
|
XMarkIcon,
|
||||||
|
} from '@heroicons/react/24/outline';
|
||||||
|
import { SparklesIcon } from '@heroicons/react/24/solid';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface AnalysisRequest {
|
||||||
|
symbol: string;
|
||||||
|
timeframes: string[];
|
||||||
|
dateRange: { start: string; end: string };
|
||||||
|
indicators: string[];
|
||||||
|
strategyType: string;
|
||||||
|
riskParams: {
|
||||||
|
maxDrawdown: number;
|
||||||
|
riskPerTrade: number;
|
||||||
|
targetRR: number;
|
||||||
|
};
|
||||||
|
includeContext: {
|
||||||
|
recentSignals: boolean;
|
||||||
|
portfolioContext: boolean;
|
||||||
|
marketRegime: boolean;
|
||||||
|
};
|
||||||
|
notes?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AnalysisTemplate {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
config: Partial<AnalysisRequest>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AnalysisRequestFormProps {
|
||||||
|
onSubmit: (request: AnalysisRequest) => void;
|
||||||
|
onSaveTemplate?: (template: Omit<AnalysisTemplate, 'id'>) => void;
|
||||||
|
savedTemplates?: AnalysisTemplate[];
|
||||||
|
onLoadTemplate?: (templateId: string) => void;
|
||||||
|
initialSymbol?: string;
|
||||||
|
isLoading?: boolean;
|
||||||
|
estimatedTokens?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Constants
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
const TIMEFRAMES = ['1m', '5m', '15m', '30m', '1h', '4h', '1d', '1w'];
|
||||||
|
const INDICATORS = [
|
||||||
|
'SMA', 'EMA', 'RSI', 'MACD', 'Bollinger Bands', 'ATR', 'Stochastic',
|
||||||
|
'VWAP', 'Fibonacci', 'Ichimoku', 'Volume Profile', 'OBV',
|
||||||
|
];
|
||||||
|
const STRATEGY_TYPES = [
|
||||||
|
'Trend Following', 'Mean Reversion', 'Breakout', 'Scalping',
|
||||||
|
'Swing Trading', 'Position Trading', 'Custom',
|
||||||
|
];
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Component
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const AnalysisRequestForm: React.FC<AnalysisRequestFormProps> = ({
|
||||||
|
onSubmit,
|
||||||
|
onSaveTemplate,
|
||||||
|
savedTemplates = [],
|
||||||
|
onLoadTemplate,
|
||||||
|
initialSymbol = '',
|
||||||
|
isLoading = false,
|
||||||
|
estimatedTokens,
|
||||||
|
}) => {
|
||||||
|
const [expandedSection, setExpandedSection] = useState<string>('symbol');
|
||||||
|
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||||
|
const [templateName, setTemplateName] = useState('');
|
||||||
|
|
||||||
|
const [request, setRequest] = useState<AnalysisRequest>({
|
||||||
|
symbol: initialSymbol,
|
||||||
|
timeframes: ['1h', '4h'],
|
||||||
|
dateRange: {
|
||||||
|
start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||||
|
end: new Date().toISOString().split('T')[0],
|
||||||
|
},
|
||||||
|
indicators: ['EMA', 'RSI', 'MACD'],
|
||||||
|
strategyType: 'Trend Following',
|
||||||
|
riskParams: {
|
||||||
|
maxDrawdown: 10,
|
||||||
|
riskPerTrade: 2,
|
||||||
|
targetRR: 2,
|
||||||
|
},
|
||||||
|
includeContext: {
|
||||||
|
recentSignals: true,
|
||||||
|
portfolioContext: false,
|
||||||
|
marketRegime: true,
|
||||||
|
},
|
||||||
|
notes: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggleSection = (section: string) => {
|
||||||
|
setExpandedSection(expandedSection === section ? '' : section);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateRequest = <K extends keyof AnalysisRequest>(
|
||||||
|
key: K,
|
||||||
|
value: AnalysisRequest[K]
|
||||||
|
) => {
|
||||||
|
setRequest((prev) => ({ ...prev, [key]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleTimeframe = (tf: string) => {
|
||||||
|
setRequest((prev) => ({
|
||||||
|
...prev,
|
||||||
|
timeframes: prev.timeframes.includes(tf)
|
||||||
|
? prev.timeframes.filter((t) => t !== tf)
|
||||||
|
: [...prev.timeframes, tf],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleIndicator = (indicator: string) => {
|
||||||
|
setRequest((prev) => ({
|
||||||
|
...prev,
|
||||||
|
indicators: prev.indicators.includes(indicator)
|
||||||
|
? prev.indicators.filter((i) => i !== indicator)
|
||||||
|
: [...prev.indicators, indicator],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValid = useMemo(() => {
|
||||||
|
return (
|
||||||
|
request.symbol.trim() !== '' &&
|
||||||
|
request.timeframes.length > 0 &&
|
||||||
|
request.indicators.length > 0
|
||||||
|
);
|
||||||
|
}, [request]);
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (isValid && !isLoading) {
|
||||||
|
onSubmit(request);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveTemplate = () => {
|
||||||
|
if (templateName.trim() && onSaveTemplate) {
|
||||||
|
onSaveTemplate({
|
||||||
|
name: templateName,
|
||||||
|
description: `${request.strategyType} analysis for ${request.symbol}`,
|
||||||
|
config: request,
|
||||||
|
});
|
||||||
|
setShowSaveDialog(false);
|
||||||
|
setTemplateName('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const SectionHeader: React.FC<{
|
||||||
|
id: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
badge?: string;
|
||||||
|
}> = ({ id, icon, title, badge }) => (
|
||||||
|
<button
|
||||||
|
onClick={() => toggleSection(id)}
|
||||||
|
className="w-full flex items-center justify-between p-3 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">{icon}</span>
|
||||||
|
<span className="font-medium text-gray-900 dark:text-white">{title}</span>
|
||||||
|
{badge && (
|
||||||
|
<span className="px-2 py-0.5 bg-primary-500/20 text-primary-400 text-xs rounded-full">
|
||||||
|
{badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{expandedSection === id ? (
|
||||||
|
<ChevronUpIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
) : (
|
||||||
|
<ChevronDownIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<SparklesIcon className="w-5 h-5 text-primary-500" />
|
||||||
|
<h3 className="font-semibold text-gray-900 dark:text-white">Analysis Request</h3>
|
||||||
|
</div>
|
||||||
|
{savedTemplates.length > 0 && (
|
||||||
|
<select
|
||||||
|
onChange={(e) => onLoadTemplate?.(e.target.value)}
|
||||||
|
className="text-sm bg-gray-100 dark:bg-gray-800 border-0 rounded-lg px-3 py-1.5 text-gray-700 dark:text-gray-300"
|
||||||
|
>
|
||||||
|
<option value="">Load Template...</option>
|
||||||
|
{savedTemplates.map((t) => (
|
||||||
|
<option key={t.id} value={t.id}>{t.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Sections */}
|
||||||
|
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
{/* Symbol & Timeframes */}
|
||||||
|
<div>
|
||||||
|
<SectionHeader
|
||||||
|
id="symbol"
|
||||||
|
icon={<ChartBarIcon className="w-5 h-5" />}
|
||||||
|
title="Symbol & Timeframes"
|
||||||
|
badge={request.symbol || undefined}
|
||||||
|
/>
|
||||||
|
{expandedSection === 'symbol' && (
|
||||||
|
<div className="p-4 pt-0 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">Symbol</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={request.symbol}
|
||||||
|
onChange={(e) => updateRequest('symbol', e.target.value.toUpperCase())}
|
||||||
|
placeholder="e.g., EURUSD, BTCUSD"
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-primary-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-2">Timeframes</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{TIMEFRAMES.map((tf) => (
|
||||||
|
<button
|
||||||
|
key={tf}
|
||||||
|
onClick={() => toggleTimeframe(tf)}
|
||||||
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
request.timeframes.includes(tf)
|
||||||
|
? 'bg-primary-500 text-white'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tf}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date Range */}
|
||||||
|
<div>
|
||||||
|
<SectionHeader
|
||||||
|
id="dateRange"
|
||||||
|
icon={<CalendarIcon className="w-5 h-5" />}
|
||||||
|
title="Date Range"
|
||||||
|
/>
|
||||||
|
{expandedSection === 'dateRange' && (
|
||||||
|
<div className="p-4 pt-0 grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">Start Date</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={request.dateRange.start}
|
||||||
|
onChange={(e) => updateRequest('dateRange', { ...request.dateRange, start: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">End Date</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={request.dateRange.end}
|
||||||
|
onChange={(e) => updateRequest('dateRange', { ...request.dateRange, end: e.target.value })}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Indicators */}
|
||||||
|
<div>
|
||||||
|
<SectionHeader
|
||||||
|
id="indicators"
|
||||||
|
icon={<AdjustmentsHorizontalIcon className="w-5 h-5" />}
|
||||||
|
title="Indicators"
|
||||||
|
badge={`${request.indicators.length} selected`}
|
||||||
|
/>
|
||||||
|
{expandedSection === 'indicators' && (
|
||||||
|
<div className="p-4 pt-0">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{INDICATORS.map((indicator) => (
|
||||||
|
<button
|
||||||
|
key={indicator}
|
||||||
|
onClick={() => toggleIndicator(indicator)}
|
||||||
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
request.indicators.includes(indicator)
|
||||||
|
? 'bg-emerald-500 text-white'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{indicator}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Strategy & Risk */}
|
||||||
|
<div>
|
||||||
|
<SectionHeader
|
||||||
|
id="strategy"
|
||||||
|
icon={<BeakerIcon className="w-5 h-5" />}
|
||||||
|
title="Strategy & Risk"
|
||||||
|
/>
|
||||||
|
{expandedSection === 'strategy' && (
|
||||||
|
<div className="p-4 pt-0 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">Strategy Type</label>
|
||||||
|
<select
|
||||||
|
value={request.strategyType}
|
||||||
|
onChange={(e) => updateRequest('strategyType', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
{STRATEGY_TYPES.map((type) => (
|
||||||
|
<option key={type} value={type}>{type}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-500 mb-1">Max DD %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={request.riskParams.maxDrawdown}
|
||||||
|
onChange={(e) => updateRequest('riskParams', { ...request.riskParams, maxDrawdown: Number(e.target.value) })}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-500 mb-1">Risk/Trade %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={request.riskParams.riskPerTrade}
|
||||||
|
onChange={(e) => updateRequest('riskParams', { ...request.riskParams, riskPerTrade: Number(e.target.value) })}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-500 mb-1">Target R:R</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.5"
|
||||||
|
value={request.riskParams.targetRR}
|
||||||
|
onChange={(e) => updateRequest('riskParams', { ...request.riskParams, targetRR: Number(e.target.value) })}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Context Options */}
|
||||||
|
<div>
|
||||||
|
<SectionHeader
|
||||||
|
id="context"
|
||||||
|
icon={<DocumentTextIcon className="w-5 h-5" />}
|
||||||
|
title="Include Context"
|
||||||
|
/>
|
||||||
|
{expandedSection === 'context' && (
|
||||||
|
<div className="p-4 pt-0 space-y-3">
|
||||||
|
{[
|
||||||
|
{ key: 'recentSignals' as const, label: 'Recent Signals', desc: 'Include last 5 generated signals' },
|
||||||
|
{ key: 'portfolioContext' as const, label: 'Portfolio Context', desc: 'Include current positions' },
|
||||||
|
{ key: 'marketRegime' as const, label: 'Market Regime', desc: 'Include volatility analysis' },
|
||||||
|
].map((item) => (
|
||||||
|
<label key={item.key} className="flex items-start gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={request.includeContext[item.key]}
|
||||||
|
onChange={(e) => updateRequest('includeContext', {
|
||||||
|
...request.includeContext,
|
||||||
|
[item.key]: e.target.checked,
|
||||||
|
})}
|
||||||
|
className="mt-1 w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-gray-900 dark:text-white">{item.label}</div>
|
||||||
|
<div className="text-xs text-gray-500">{item.desc}</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
<div className="pt-2">
|
||||||
|
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">Additional Notes</label>
|
||||||
|
<textarea
|
||||||
|
value={request.notes}
|
||||||
|
onChange={(e) => updateRequest('notes', e.target.value)}
|
||||||
|
placeholder="Any specific questions or focus areas..."
|
||||||
|
rows={2}
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white placeholder-gray-500 resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||||
|
{estimatedTokens && (
|
||||||
|
<div className="text-xs text-gray-500 mb-3">
|
||||||
|
Estimated context: ~{estimatedTokens.toLocaleString()} tokens
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{onSaveTemplate && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowSaveDialog(true)}
|
||||||
|
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<BookmarkIcon className="w-4 h-4" />
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!isValid || isLoading}
|
||||||
|
className="flex-1 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
|
</svg>
|
||||||
|
Analyzing...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<PaperAirplaneIcon className="w-4 h-4" />
|
||||||
|
Run Analysis
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Save Template Dialog */}
|
||||||
|
{showSaveDialog && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl p-6 w-96 shadow-xl">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white">Save Template</h4>
|
||||||
|
<button onClick={() => setShowSaveDialog(false)}>
|
||||||
|
<XMarkIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={templateName}
|
||||||
|
onChange={(e) => setTemplateName(e.target.value)}
|
||||||
|
placeholder="Template name..."
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white mb-4"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleSaveTemplate}
|
||||||
|
disabled={!templateName.trim()}
|
||||||
|
className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Save Template
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AnalysisRequestForm;
|
||||||
390
src/modules/assistant/components/ContextMemoryDisplay.tsx
Normal file
390
src/modules/assistant/components/ContextMemoryDisplay.tsx
Normal file
@ -0,0 +1,390 @@
|
|||||||
|
/**
|
||||||
|
* ContextMemoryDisplay Component
|
||||||
|
* Visualize conversation context and summarization
|
||||||
|
* OQI-007: LLM Strategy Agent
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
CircleStackIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
ClockIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
TrashIcon,
|
||||||
|
BookmarkIcon,
|
||||||
|
ArrowDownTrayIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
ExclamationTriangleIcon,
|
||||||
|
} from '@heroicons/react/24/outline';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface ContextMessage {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'assistant';
|
||||||
|
preview: string;
|
||||||
|
timestamp: string;
|
||||||
|
tokenCount: number;
|
||||||
|
isSummarized?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ContextSummary {
|
||||||
|
id: string;
|
||||||
|
createdAt: string;
|
||||||
|
messageCount: number;
|
||||||
|
content: string;
|
||||||
|
tokenCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ContextMemoryState {
|
||||||
|
messages: ContextMessage[];
|
||||||
|
summaries: ContextSummary[];
|
||||||
|
maxContextTokens: number;
|
||||||
|
currentTokens: number;
|
||||||
|
lastCheckpoint?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ContextMemoryDisplayProps {
|
||||||
|
state: ContextMemoryState;
|
||||||
|
onClearOldContext?: () => void;
|
||||||
|
onSaveCheckpoint?: () => void;
|
||||||
|
onExportConversation?: () => void;
|
||||||
|
onRestoreCheckpoint?: (checkpointId: string) => void;
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Helper Functions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
const formatTimestamp = (timestamp: string) => {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const now = new Date();
|
||||||
|
const diff = now.getTime() - date.getTime();
|
||||||
|
|
||||||
|
if (diff < 60000) return 'Just now';
|
||||||
|
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||||
|
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||||
|
return date.toLocaleDateString();
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTokens = (tokens: number) => {
|
||||||
|
if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`;
|
||||||
|
if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`;
|
||||||
|
return tokens.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Component
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const ContextMemoryDisplay: React.FC<ContextMemoryDisplayProps> = ({
|
||||||
|
state,
|
||||||
|
onClearOldContext,
|
||||||
|
onSaveCheckpoint,
|
||||||
|
onExportConversation,
|
||||||
|
onRestoreCheckpoint,
|
||||||
|
compact = false,
|
||||||
|
}) => {
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const [showSummaryContent, setShowSummaryContent] = useState<string | null>(null);
|
||||||
|
const [activeTab, setActiveTab] = useState<'messages' | 'summaries'>('messages');
|
||||||
|
|
||||||
|
const usagePercent = useMemo(() => {
|
||||||
|
return Math.min((state.currentTokens / state.maxContextTokens) * 100, 100);
|
||||||
|
}, [state.currentTokens, state.maxContextTokens]);
|
||||||
|
|
||||||
|
const usageColor = useMemo(() => {
|
||||||
|
if (usagePercent >= 90) return 'bg-red-500';
|
||||||
|
if (usagePercent >= 70) return 'bg-yellow-500';
|
||||||
|
return 'bg-emerald-500';
|
||||||
|
}, [usagePercent]);
|
||||||
|
|
||||||
|
const recentMessages = state.messages.filter((m) => !m.isSummarized);
|
||||||
|
const summarizedMessages = state.messages.filter((m) => m.isSummarized);
|
||||||
|
|
||||||
|
if (compact) {
|
||||||
|
return (
|
||||||
|
<div className="p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CircleStackIcon className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400">Context</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||||
|
>
|
||||||
|
{isExpanded ? (
|
||||||
|
<ChevronUpIcon className="w-4 h-4" />
|
||||||
|
) : (
|
||||||
|
<ChevronDownIcon className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full ${usageColor} transition-all`}
|
||||||
|
style={{ width: `${usagePercent}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>{formatTokens(state.currentTokens)} tokens</span>
|
||||||
|
<span>{usagePercent.toFixed(0)}%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2">
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
{recentMessages.length} messages in context
|
||||||
|
{state.summaries.length > 0 && ` + ${state.summaries.length} summaries`}
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{onClearOldContext && (
|
||||||
|
<button
|
||||||
|
onClick={onClearOldContext}
|
||||||
|
className="flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
Clear Old
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{onSaveCheckpoint && (
|
||||||
|
<button
|
||||||
|
onClick={onSaveCheckpoint}
|
||||||
|
className="flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
Checkpoint
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CircleStackIcon className="w-5 h-5 text-primary-500" />
|
||||||
|
<h3 className="font-semibold text-gray-900 dark:text-white">Context Memory</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{onExportConversation && (
|
||||||
|
<button
|
||||||
|
onClick={onExportConversation}
|
||||||
|
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
|
||||||
|
title="Export conversation"
|
||||||
|
>
|
||||||
|
<ArrowDownTrayIcon className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{onSaveCheckpoint && (
|
||||||
|
<button
|
||||||
|
onClick={onSaveCheckpoint}
|
||||||
|
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
|
||||||
|
title="Save checkpoint"
|
||||||
|
>
|
||||||
|
<BookmarkIcon className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Usage Gauge */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-400">Context Usage</span>
|
||||||
|
<span className="font-medium text-gray-900 dark:text-white">
|
||||||
|
{formatTokens(state.currentTokens)} / {formatTokens(state.maxContextTokens)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full ${usageColor} transition-all duration-300`}
|
||||||
|
style={{ width: `${usagePercent}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{usagePercent >= 80 && (
|
||||||
|
<div className="flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400">
|
||||||
|
<ExclamationTriangleIcon className="w-3.5 h-3.5" />
|
||||||
|
<span>Context filling up. Old messages may be summarized.</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-3 gap-3 mt-3">
|
||||||
|
<div className="text-center p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">{recentMessages.length}</div>
|
||||||
|
<div className="text-xs text-gray-500">Active Messages</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">{state.summaries.length}</div>
|
||||||
|
<div className="text-xs text-gray-500">Summaries</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">{summarizedMessages.length}</div>
|
||||||
|
<div className="text-xs text-gray-500">Summarized</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('messages')}
|
||||||
|
className={`flex-1 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
activeTab === 'messages'
|
||||||
|
? 'border-primary-500 text-primary-500'
|
||||||
|
: 'border-transparent text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Messages ({recentMessages.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('summaries')}
|
||||||
|
className={`flex-1 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
activeTab === 'summaries'
|
||||||
|
? 'border-primary-500 text-primary-500'
|
||||||
|
: 'border-transparent text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Summaries ({state.summaries.length})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="max-h-64 overflow-y-auto">
|
||||||
|
{activeTab === 'messages' && (
|
||||||
|
<div className="p-2 space-y-1">
|
||||||
|
{recentMessages.length === 0 ? (
|
||||||
|
<div className="text-center py-6 text-gray-500 text-sm">
|
||||||
|
No messages in context yet
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
recentMessages.map((message) => (
|
||||||
|
<div
|
||||||
|
key={message.id}
|
||||||
|
className="flex items-start gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
|
||||||
|
message.role === 'user'
|
||||||
|
? 'bg-blue-500/20 text-blue-400'
|
||||||
|
: 'bg-purple-500/20 text-purple-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{message.role === 'user' ? 'U' : 'A'}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm text-gray-700 dark:text-gray-300 truncate">
|
||||||
|
{message.preview}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 text-xs text-gray-500 mt-0.5">
|
||||||
|
<span>{formatTimestamp(message.timestamp)}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{message.tokenCount} tokens</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'summaries' && (
|
||||||
|
<div className="p-2 space-y-2">
|
||||||
|
{state.summaries.length === 0 ? (
|
||||||
|
<div className="text-center py-6 text-gray-500 text-sm">
|
||||||
|
No summaries created yet
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
state.summaries.map((summary) => (
|
||||||
|
<div
|
||||||
|
key={summary.id}
|
||||||
|
className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DocumentTextIcon className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{summary.messageCount} messages summarized
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setShowSummaryContent(
|
||||||
|
showSummaryContent === summary.id ? null : summary.id
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="text-xs text-primary-500 hover:text-primary-600"
|
||||||
|
>
|
||||||
|
{showSummaryContent === summary.id ? 'Hide' : 'Show'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||||
|
<ClockIcon className="w-3.5 h-3.5" />
|
||||||
|
<span>{formatTimestamp(summary.createdAt)}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{summary.tokenCount} tokens</span>
|
||||||
|
</div>
|
||||||
|
{showSummaryContent === summary.id && (
|
||||||
|
<div className="mt-2 p-2 bg-white dark:bg-gray-900 rounded text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{summary.content}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer Actions */}
|
||||||
|
<div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{onClearOldContext && (
|
||||||
|
<button
|
||||||
|
onClick={onClearOldContext}
|
||||||
|
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<TrashIcon className="w-4 h-4" />
|
||||||
|
Clear Old Context
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{onSaveCheckpoint && (
|
||||||
|
<button
|
||||||
|
onClick={onSaveCheckpoint}
|
||||||
|
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<BookmarkIcon className="w-4 h-4" />
|
||||||
|
Save Checkpoint
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<div className="mt-3 p-2 bg-blue-50 dark:bg-blue-500/10 rounded-lg">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<InformationCircleIcon className="w-4 h-4 text-blue-500 mt-0.5" />
|
||||||
|
<p className="text-xs text-blue-700 dark:text-blue-300">
|
||||||
|
Recent messages are sent in full. Older messages are summarized to save tokens.
|
||||||
|
The AI uses summaries to maintain conversation context.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContextMemoryDisplay;
|
||||||
505
src/modules/assistant/components/LLMConfigPanel.tsx
Normal file
505
src/modules/assistant/components/LLMConfigPanel.tsx
Normal file
@ -0,0 +1,505 @@
|
|||||||
|
/**
|
||||||
|
* LLMConfigPanel Component
|
||||||
|
* Model selection and inference parameters
|
||||||
|
* OQI-007: LLM Strategy Agent
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
CpuChipIcon,
|
||||||
|
AdjustmentsHorizontalIcon,
|
||||||
|
SparklesIcon,
|
||||||
|
CurrencyDollarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
LightBulbIcon,
|
||||||
|
BookmarkIcon,
|
||||||
|
XMarkIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
CheckIcon,
|
||||||
|
} from '@heroicons/react/24/outline';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type ModelId = 'claude-3-5-sonnet' | 'claude-3-opus' | 'claude-3-haiku';
|
||||||
|
export type ReasoningStyle = 'concise' | 'detailed' | 'technical' | 'exploratory';
|
||||||
|
export type AnalysisDepth = 'quick' | 'standard' | 'deep';
|
||||||
|
|
||||||
|
export interface LLMConfig {
|
||||||
|
modelId: ModelId;
|
||||||
|
temperature: number;
|
||||||
|
reasoningStyle: ReasoningStyle;
|
||||||
|
analysisDepth: AnalysisDepth;
|
||||||
|
showThinking: boolean;
|
||||||
|
maxTokens: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ModelInfo {
|
||||||
|
id: ModelId;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
contextWindow: string;
|
||||||
|
speed: 'fast' | 'medium' | 'slow';
|
||||||
|
intelligence: 'good' | 'great' | 'best';
|
||||||
|
costPerMToken: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ConfigPreset {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
config: LLMConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LLMConfigPanelProps {
|
||||||
|
config: LLMConfig;
|
||||||
|
onConfigChange: (config: LLMConfig) => void;
|
||||||
|
onSavePreset?: (name: string, config: LLMConfig) => void;
|
||||||
|
savedPresets?: ConfigPreset[];
|
||||||
|
onLoadPreset?: (presetId: string) => void;
|
||||||
|
estimatedCost?: number;
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Constants
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
const MODELS: ModelInfo[] = [
|
||||||
|
{
|
||||||
|
id: 'claude-3-5-sonnet',
|
||||||
|
name: 'Claude 3.5 Sonnet',
|
||||||
|
description: 'Fast and capable, great for most analysis tasks',
|
||||||
|
contextWindow: '200K',
|
||||||
|
speed: 'fast',
|
||||||
|
intelligence: 'great',
|
||||||
|
costPerMToken: 3.0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'claude-3-opus',
|
||||||
|
name: 'Claude 3 Opus',
|
||||||
|
description: 'Most intelligent, best for complex reasoning',
|
||||||
|
contextWindow: '200K',
|
||||||
|
speed: 'slow',
|
||||||
|
intelligence: 'best',
|
||||||
|
costPerMToken: 15.0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'claude-3-haiku',
|
||||||
|
name: 'Claude 3 Haiku',
|
||||||
|
description: 'Budget-friendly, good for simple queries',
|
||||||
|
contextWindow: '200K',
|
||||||
|
speed: 'fast',
|
||||||
|
intelligence: 'good',
|
||||||
|
costPerMToken: 0.25,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const REASONING_STYLES: Array<{ value: ReasoningStyle; label: string; desc: string }> = [
|
||||||
|
{ value: 'concise', label: 'Concise', desc: 'Brief, actionable insights' },
|
||||||
|
{ value: 'detailed', label: 'Detailed', desc: 'Comprehensive explanations' },
|
||||||
|
{ value: 'technical', label: 'Technical', desc: 'In-depth technical analysis' },
|
||||||
|
{ value: 'exploratory', label: 'Exploratory', desc: 'Consider multiple scenarios' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const ANALYSIS_DEPTHS: Array<{ value: AnalysisDepth; label: string; desc: string; tools: string }> = [
|
||||||
|
{ value: 'quick', label: 'Quick', desc: 'Fast signal check', tools: '1 tool call' },
|
||||||
|
{ value: 'standard', label: 'Standard', desc: 'Balanced analysis', tools: '2-3 tool calls' },
|
||||||
|
{ value: 'deep', label: 'Deep', desc: 'Thorough investigation', tools: '5+ tool calls' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const DEFAULT_PRESETS: ConfigPreset[] = [
|
||||||
|
{
|
||||||
|
id: 'quick-signal',
|
||||||
|
name: 'Quick Signal Check',
|
||||||
|
description: 'Fast, low-cost signal verification',
|
||||||
|
config: {
|
||||||
|
modelId: 'claude-3-haiku',
|
||||||
|
temperature: 0.3,
|
||||||
|
reasoningStyle: 'concise',
|
||||||
|
analysisDepth: 'quick',
|
||||||
|
showThinking: false,
|
||||||
|
maxTokens: 1024,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'deep-analysis',
|
||||||
|
name: 'Deep Analysis',
|
||||||
|
description: 'Comprehensive market analysis',
|
||||||
|
config: {
|
||||||
|
modelId: 'claude-3-opus',
|
||||||
|
temperature: 0.7,
|
||||||
|
reasoningStyle: 'detailed',
|
||||||
|
analysisDepth: 'deep',
|
||||||
|
showThinking: true,
|
||||||
|
maxTokens: 4096,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'balanced',
|
||||||
|
name: 'Balanced',
|
||||||
|
description: 'Good balance of speed and quality',
|
||||||
|
config: {
|
||||||
|
modelId: 'claude-3-5-sonnet',
|
||||||
|
temperature: 0.5,
|
||||||
|
reasoningStyle: 'detailed',
|
||||||
|
analysisDepth: 'standard',
|
||||||
|
showThinking: false,
|
||||||
|
maxTokens: 2048,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Component
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const LLMConfigPanel: React.FC<LLMConfigPanelProps> = ({
|
||||||
|
config,
|
||||||
|
onConfigChange,
|
||||||
|
onSavePreset,
|
||||||
|
savedPresets = [],
|
||||||
|
onLoadPreset,
|
||||||
|
estimatedCost,
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
}) => {
|
||||||
|
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||||
|
const [presetName, setPresetName] = useState('');
|
||||||
|
const [activeTab, setActiveTab] = useState<'model' | 'style' | 'presets'>('model');
|
||||||
|
|
||||||
|
const allPresets = [...DEFAULT_PRESETS, ...savedPresets];
|
||||||
|
|
||||||
|
const updateConfig = <K extends keyof LLMConfig>(key: K, value: LLMConfig[K]) => {
|
||||||
|
onConfigChange({ ...config, [key]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedModel = MODELS.find((m) => m.id === config.modelId) || MODELS[0];
|
||||||
|
|
||||||
|
const getSpeedBadge = (speed: ModelInfo['speed']) => {
|
||||||
|
switch (speed) {
|
||||||
|
case 'fast':
|
||||||
|
return 'bg-emerald-500/20 text-emerald-400';
|
||||||
|
case 'medium':
|
||||||
|
return 'bg-yellow-500/20 text-yellow-400';
|
||||||
|
case 'slow':
|
||||||
|
return 'bg-red-500/20 text-red-400';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getIntelligenceBadge = (intel: ModelInfo['intelligence']) => {
|
||||||
|
switch (intel) {
|
||||||
|
case 'good':
|
||||||
|
return 'bg-gray-500/20 text-gray-400';
|
||||||
|
case 'great':
|
||||||
|
return 'bg-blue-500/20 text-blue-400';
|
||||||
|
case 'best':
|
||||||
|
return 'bg-purple-500/20 text-purple-400';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CpuChipIcon className="w-5 h-5 text-primary-500" />
|
||||||
|
<h3 className="font-semibold text-gray-900 dark:text-white">LLM Configuration</h3>
|
||||||
|
</div>
|
||||||
|
<button onClick={onClose} className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">
|
||||||
|
<XMarkIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||||
|
{[
|
||||||
|
{ id: 'model', label: 'Model', icon: CpuChipIcon },
|
||||||
|
{ id: 'style', label: 'Style', icon: AdjustmentsHorizontalIcon },
|
||||||
|
{ id: 'presets', label: 'Presets', icon: BookmarkIcon },
|
||||||
|
].map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
||||||
|
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'border-primary-500 text-primary-500'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<tab.icon className="w-4 h-4" />
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
{/* Model Tab */}
|
||||||
|
{activeTab === 'model' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
{MODELS.map((model) => (
|
||||||
|
<button
|
||||||
|
key={model.id}
|
||||||
|
onClick={() => updateConfig('modelId', model.id)}
|
||||||
|
className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
|
||||||
|
config.modelId === model.id
|
||||||
|
? 'border-primary-500 bg-primary-500/5'
|
||||||
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-white">{model.name}</span>
|
||||||
|
{config.modelId === model.id && (
|
||||||
|
<CheckIcon className="w-4 h-4 text-primary-500" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">{model.description}</p>
|
||||||
|
<div className="flex gap-2 mt-2">
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded ${getSpeedBadge(model.speed)}`}>
|
||||||
|
{model.speed}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded ${getIntelligenceBadge(model.intelligence)}`}>
|
||||||
|
{model.intelligence}
|
||||||
|
</span>
|
||||||
|
<span className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 rounded">
|
||||||
|
{model.contextWindow} context
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
${model.costPerMToken.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">/1M tokens</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Style Tab */}
|
||||||
|
{activeTab === 'style' && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Temperature */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<label className="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Temperature
|
||||||
|
</label>
|
||||||
|
<span className="text-sm text-gray-500">{config.temperature.toFixed(1)}</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
step="0.1"
|
||||||
|
value={config.temperature}
|
||||||
|
onChange={(e) => updateConfig('temperature', parseFloat(e.target.value))}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>Deterministic (0)</span>
|
||||||
|
<span>Creative (1)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reasoning Style */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
|
||||||
|
Reasoning Style
|
||||||
|
</label>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{REASONING_STYLES.map((style) => (
|
||||||
|
<button
|
||||||
|
key={style.value}
|
||||||
|
onClick={() => updateConfig('reasoningStyle', style.value)}
|
||||||
|
className={`p-3 rounded-lg border-2 text-left transition-all ${
|
||||||
|
config.reasoningStyle === style.value
|
||||||
|
? 'border-primary-500 bg-primary-500/5'
|
||||||
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="font-medium text-gray-900 dark:text-white text-sm">{style.label}</div>
|
||||||
|
<div className="text-xs text-gray-500">{style.desc}</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Analysis Depth */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
|
||||||
|
Analysis Depth
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{ANALYSIS_DEPTHS.map((depth) => (
|
||||||
|
<button
|
||||||
|
key={depth.value}
|
||||||
|
onClick={() => updateConfig('analysisDepth', depth.value)}
|
||||||
|
className={`flex-1 p-3 rounded-lg border-2 text-center transition-all ${
|
||||||
|
config.analysisDepth === depth.value
|
||||||
|
? 'border-primary-500 bg-primary-500/5'
|
||||||
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="font-medium text-gray-900 dark:text-white text-sm">{depth.label}</div>
|
||||||
|
<div className="text-xs text-gray-500">{depth.tools}</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Show Thinking */}
|
||||||
|
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<LightBulbIcon className="w-5 h-5 text-yellow-500" />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-gray-900 dark:text-white text-sm">Show Thinking</div>
|
||||||
|
<div className="text-xs text-gray-500">Display Claude's reasoning process</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => updateConfig('showThinking', !config.showThinking)}
|
||||||
|
className={`relative w-11 h-6 rounded-full transition-colors ${
|
||||||
|
config.showThinking ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||||
|
config.showThinking ? 'translate-x-6' : 'translate-x-1'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Max Tokens */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<label className="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Max Response Tokens
|
||||||
|
</label>
|
||||||
|
<span className="text-sm text-gray-500">{config.maxTokens.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="512"
|
||||||
|
max="8192"
|
||||||
|
step="256"
|
||||||
|
value={config.maxTokens}
|
||||||
|
onChange={(e) => updateConfig('maxTokens', parseInt(e.target.value))}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Presets Tab */}
|
||||||
|
{activeTab === 'presets' && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{allPresets.map((preset) => (
|
||||||
|
<button
|
||||||
|
key={preset.id}
|
||||||
|
onClick={() => onConfigChange(preset.config)}
|
||||||
|
className="w-full p-4 bg-gray-50 dark:bg-gray-800 rounded-lg text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-gray-900 dark:text-white">{preset.name}</div>
|
||||||
|
<div className="text-sm text-gray-500">{preset.description}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400">
|
||||||
|
{MODELS.find((m) => m.id === preset.config.modelId)?.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{onSavePreset && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowSaveDialog(true)}
|
||||||
|
className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-gray-500 hover:border-primary-500 hover:text-primary-500 transition-colors"
|
||||||
|
>
|
||||||
|
+ Save Current as Preset
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<CpuChipIcon className="w-4 h-4" />
|
||||||
|
<span>{selectedModel.name}</span>
|
||||||
|
</div>
|
||||||
|
{estimatedCost !== undefined && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<CurrencyDollarIcon className="w-4 h-4" />
|
||||||
|
<span>~${estimatedCost.toFixed(4)}/request</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Save Preset Dialog */}
|
||||||
|
{showSaveDialog && (
|
||||||
|
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl p-6 w-80">
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-4">Save Preset</h4>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={presetName}
|
||||||
|
onChange={(e) => setPresetName(e.target.value)}
|
||||||
|
placeholder="Preset name..."
|
||||||
|
className="w-full px-3 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-lg text-gray-900 dark:text-white mb-4"
|
||||||
|
/>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowSaveDialog(false)}
|
||||||
|
className="flex-1 px-4 py-2 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (presetName.trim()) {
|
||||||
|
onSavePreset?.(presetName, config);
|
||||||
|
setShowSaveDialog(false);
|
||||||
|
setPresetName('');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={!presetName.trim()}
|
||||||
|
className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-lg font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LLMConfigPanel;
|
||||||
441
src/modules/assistant/components/StrategyTemplateSelector.tsx
Normal file
441
src/modules/assistant/components/StrategyTemplateSelector.tsx
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
/**
|
||||||
|
* StrategyTemplateSelector Component
|
||||||
|
* Pre-built strategy templates with AI quick-suggestions
|
||||||
|
* OQI-007: LLM Strategy Agent
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
SparklesIcon,
|
||||||
|
ChartBarIcon,
|
||||||
|
ArrowTrendingUpIcon,
|
||||||
|
ArrowsRightLeftIcon,
|
||||||
|
BoltIcon,
|
||||||
|
ClockIcon,
|
||||||
|
ScaleIcon,
|
||||||
|
CheckCircleIcon,
|
||||||
|
XMarkIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
} from '@heroicons/react/24/outline';
|
||||||
|
import { StarIcon } from '@heroicons/react/24/solid';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface StrategyTemplate {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
category: 'trend' | 'reversal' | 'breakout' | 'scalping' | 'swing' | 'position';
|
||||||
|
riskLevel: 'low' | 'medium' | 'high';
|
||||||
|
metrics: {
|
||||||
|
winRate: number;
|
||||||
|
avgRR: number;
|
||||||
|
maxDrawdown: number;
|
||||||
|
sharpeRatio: number;
|
||||||
|
};
|
||||||
|
bestTimeframes: string[];
|
||||||
|
indicators: string[];
|
||||||
|
marketConditions: string[];
|
||||||
|
isAIRecommended?: boolean;
|
||||||
|
popularity?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StrategyTemplateSelectorProps {
|
||||||
|
templates: StrategyTemplate[];
|
||||||
|
aiRecommendations?: string[];
|
||||||
|
onSelectTemplate: (template: StrategyTemplate) => void;
|
||||||
|
onCompare?: (templates: StrategyTemplate[]) => void;
|
||||||
|
selectedTemplateId?: string;
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Helper Functions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
const getCategoryIcon = (category: StrategyTemplate['category']) => {
|
||||||
|
switch (category) {
|
||||||
|
case 'trend':
|
||||||
|
return ArrowTrendingUpIcon;
|
||||||
|
case 'reversal':
|
||||||
|
return ArrowsRightLeftIcon;
|
||||||
|
case 'breakout':
|
||||||
|
return BoltIcon;
|
||||||
|
case 'scalping':
|
||||||
|
return BoltIcon;
|
||||||
|
case 'swing':
|
||||||
|
return ClockIcon;
|
||||||
|
case 'position':
|
||||||
|
return ScaleIcon;
|
||||||
|
default:
|
||||||
|
return ChartBarIcon;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCategoryColor = (category: StrategyTemplate['category']) => {
|
||||||
|
switch (category) {
|
||||||
|
case 'trend':
|
||||||
|
return 'bg-blue-500/20 text-blue-400';
|
||||||
|
case 'reversal':
|
||||||
|
return 'bg-purple-500/20 text-purple-400';
|
||||||
|
case 'breakout':
|
||||||
|
return 'bg-amber-500/20 text-amber-400';
|
||||||
|
case 'scalping':
|
||||||
|
return 'bg-red-500/20 text-red-400';
|
||||||
|
case 'swing':
|
||||||
|
return 'bg-emerald-500/20 text-emerald-400';
|
||||||
|
case 'position':
|
||||||
|
return 'bg-cyan-500/20 text-cyan-400';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-500/20 text-gray-400';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRiskColor = (riskLevel: StrategyTemplate['riskLevel']) => {
|
||||||
|
switch (riskLevel) {
|
||||||
|
case 'low':
|
||||||
|
return 'text-emerald-400';
|
||||||
|
case 'medium':
|
||||||
|
return 'text-yellow-400';
|
||||||
|
case 'high':
|
||||||
|
return 'text-red-400';
|
||||||
|
default:
|
||||||
|
return 'text-gray-400';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Component
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const StrategyTemplateSelector: React.FC<StrategyTemplateSelectorProps> = ({
|
||||||
|
templates,
|
||||||
|
aiRecommendations = [],
|
||||||
|
onSelectTemplate,
|
||||||
|
onCompare,
|
||||||
|
selectedTemplateId,
|
||||||
|
compact = false,
|
||||||
|
}) => {
|
||||||
|
const [filterCategory, setFilterCategory] = useState<StrategyTemplate['category'] | 'all'>('all');
|
||||||
|
const [compareMode, setCompareMode] = useState(false);
|
||||||
|
const [compareList, setCompareList] = useState<string[]>([]);
|
||||||
|
const [showDetails, setShowDetails] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const categories: Array<{ value: StrategyTemplate['category'] | 'all'; label: string }> = [
|
||||||
|
{ value: 'all', label: 'All' },
|
||||||
|
{ value: 'trend', label: 'Trend' },
|
||||||
|
{ value: 'reversal', label: 'Reversal' },
|
||||||
|
{ value: 'breakout', label: 'Breakout' },
|
||||||
|
{ value: 'scalping', label: 'Scalping' },
|
||||||
|
{ value: 'swing', label: 'Swing' },
|
||||||
|
{ value: 'position', label: 'Position' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const filteredTemplates = templates.filter(
|
||||||
|
(t) => filterCategory === 'all' || t.category === filterCategory
|
||||||
|
);
|
||||||
|
|
||||||
|
const recommendedTemplates = templates.filter((t) => aiRecommendations.includes(t.id));
|
||||||
|
|
||||||
|
const toggleCompare = (templateId: string) => {
|
||||||
|
setCompareList((prev) =>
|
||||||
|
prev.includes(templateId)
|
||||||
|
? prev.filter((id) => id !== templateId)
|
||||||
|
: prev.length < 3
|
||||||
|
? [...prev, templateId]
|
||||||
|
: prev
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCompare = () => {
|
||||||
|
const templatesToCompare = templates.filter((t) => compareList.includes(t.id));
|
||||||
|
onCompare?.(templatesToCompare);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TemplateCard: React.FC<{ template: StrategyTemplate }> = ({ template }) => {
|
||||||
|
const Icon = getCategoryIcon(template.category);
|
||||||
|
const isSelected = selectedTemplateId === template.id;
|
||||||
|
const isInCompare = compareList.includes(template.id);
|
||||||
|
const isRecommended = aiRecommendations.includes(template.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`relative p-4 bg-white dark:bg-gray-800 rounded-xl border-2 transition-all cursor-pointer ${
|
||||||
|
isSelected
|
||||||
|
? 'border-primary-500 ring-2 ring-primary-500/20'
|
||||||
|
: isInCompare
|
||||||
|
? 'border-emerald-500'
|
||||||
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||||
|
}`}
|
||||||
|
onClick={() => !compareMode && onSelectTemplate(template)}
|
||||||
|
>
|
||||||
|
{/* AI Recommended Badge */}
|
||||||
|
{isRecommended && (
|
||||||
|
<div className="absolute -top-2 -right-2 flex items-center gap-1 px-2 py-0.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-medium rounded-full">
|
||||||
|
<SparklesIcon className="w-3 h-3" />
|
||||||
|
AI Pick
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Compare Checkbox */}
|
||||||
|
{compareMode && (
|
||||||
|
<div
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
toggleCompare(template.id);
|
||||||
|
}}
|
||||||
|
className="absolute top-3 right-3"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
|
||||||
|
isInCompare
|
||||||
|
? 'bg-emerald-500 border-emerald-500'
|
||||||
|
: 'border-gray-300 dark:border-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isInCompare && <CheckCircleIcon className="w-4 h-4 text-white" />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-3 mb-3">
|
||||||
|
<div className={`p-2 rounded-lg ${getCategoryColor(template.category)}`}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white truncate">
|
||||||
|
{template.name}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
|
||||||
|
{template.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metrics */}
|
||||||
|
<div className="grid grid-cols-2 gap-2 mb-3">
|
||||||
|
<div className="text-center p-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
|
||||||
|
<div className="text-lg font-bold text-emerald-400">{template.metrics.winRate}%</div>
|
||||||
|
<div className="text-xs text-gray-500">Win Rate</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
|
||||||
|
<div className="text-lg font-bold text-blue-400">{template.metrics.avgRR}:1</div>
|
||||||
|
<div className="text-xs text-gray-500">Avg R:R</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded capitalize ${getRiskColor(template.riskLevel)}`}>
|
||||||
|
{template.riskLevel} risk
|
||||||
|
</span>
|
||||||
|
{template.bestTimeframes.slice(0, 2).map((tf) => (
|
||||||
|
<span key={tf} className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded">
|
||||||
|
{tf}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info Button */}
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowDetails(showDetails === template.id ? null : template.id);
|
||||||
|
}}
|
||||||
|
className="absolute bottom-3 right-3 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||||
|
>
|
||||||
|
<InformationCircleIcon className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ChartBarIcon className="w-5 h-5 text-primary-500" />
|
||||||
|
<h3 className="font-semibold text-gray-900 dark:text-white">Strategy Templates</h3>
|
||||||
|
</div>
|
||||||
|
{onCompare && (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (compareMode && compareList.length >= 2) {
|
||||||
|
handleCompare();
|
||||||
|
}
|
||||||
|
setCompareMode(!compareMode);
|
||||||
|
if (!compareMode) setCompareList([]);
|
||||||
|
}}
|
||||||
|
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
|
||||||
|
compareMode
|
||||||
|
? compareList.length >= 2
|
||||||
|
? 'bg-emerald-500 text-white'
|
||||||
|
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{compareMode
|
||||||
|
? compareList.length >= 2
|
||||||
|
? `Compare (${compareList.length})`
|
||||||
|
: `Select ${2 - compareList.length} more`
|
||||||
|
: 'Compare'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category Filter */}
|
||||||
|
<div className="flex gap-1 overflow-x-auto pb-1">
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<button
|
||||||
|
key={cat.value}
|
||||||
|
onClick={() => setFilterCategory(cat.value)}
|
||||||
|
className={`px-3 py-1 text-sm rounded-lg whitespace-nowrap transition-colors ${
|
||||||
|
filterCategory === cat.value
|
||||||
|
? 'bg-primary-500 text-white'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{cat.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* AI Recommendations */}
|
||||||
|
{recommendedTemplates.length > 0 && filterCategory === 'all' && (
|
||||||
|
<div className="p-4 bg-gradient-to-r from-purple-500/10 to-pink-500/10 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<SparklesIcon className="w-4 h-4 text-purple-400" />
|
||||||
|
<span className="text-sm font-medium text-purple-400">AI Recommended for Current Market</span>
|
||||||
|
</div>
|
||||||
|
<div className={`grid ${compact ? 'grid-cols-1' : 'grid-cols-2 lg:grid-cols-3'} gap-3`}>
|
||||||
|
{recommendedTemplates.slice(0, 3).map((template) => (
|
||||||
|
<TemplateCard key={template.id} template={template} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* All Templates */}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className={`grid ${compact ? 'grid-cols-1' : 'grid-cols-2 lg:grid-cols-3'} gap-3`}>
|
||||||
|
{filteredTemplates
|
||||||
|
.filter((t) => !aiRecommendations.includes(t.id) || filterCategory !== 'all')
|
||||||
|
.map((template) => (
|
||||||
|
<TemplateCard key={template.id} template={template} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredTemplates.length === 0 && (
|
||||||
|
<div className="text-center py-8 text-gray-500">
|
||||||
|
No templates found for this category
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details Modal */}
|
||||||
|
{showDetails && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-xl max-w-lg w-full max-h-[80vh] overflow-y-auto">
|
||||||
|
{(() => {
|
||||||
|
const template = templates.find((t) => t.id === showDetails);
|
||||||
|
if (!template) return null;
|
||||||
|
const Icon = getCategoryIcon(template.category);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-2 rounded-lg ${getCategoryColor(template.category)}`}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white">{template.name}</h4>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => setShowDetails(null)}>
|
||||||
|
<XMarkIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 space-y-4">
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">{template.description}</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 className="text-sm font-medium text-gray-900 dark:text-white mb-2">Performance Metrics</h5>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-xl font-bold text-emerald-400">{template.metrics.winRate}%</div>
|
||||||
|
<div className="text-xs text-gray-500">Win Rate</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-xl font-bold text-blue-400">{template.metrics.avgRR}:1</div>
|
||||||
|
<div className="text-xs text-gray-500">Avg R:R</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-xl font-bold text-red-400">{template.metrics.maxDrawdown}%</div>
|
||||||
|
<div className="text-xs text-gray-500">Max Drawdown</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="text-xl font-bold text-purple-400">{template.metrics.sharpeRatio}</div>
|
||||||
|
<div className="text-xs text-gray-500">Sharpe Ratio</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 className="text-sm font-medium text-gray-900 dark:text-white mb-2">Best Timeframes</h5>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{template.bestTimeframes.map((tf) => (
|
||||||
|
<span key={tf} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg text-sm">
|
||||||
|
{tf}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 className="text-sm font-medium text-gray-900 dark:text-white mb-2">Indicators Used</h5>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{template.indicators.map((ind) => (
|
||||||
|
<span key={ind} className="px-3 py-1 bg-primary-500/20 text-primary-400 rounded-lg text-sm">
|
||||||
|
{ind}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 className="text-sm font-medium text-gray-900 dark:text-white mb-2">Best Market Conditions</h5>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{template.marketConditions.map((cond) => (
|
||||||
|
<span key={cond} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg text-sm">
|
||||||
|
{cond}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
onSelectTemplate(template);
|
||||||
|
setShowDetails(null);
|
||||||
|
}}
|
||||||
|
className="w-full py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Use This Template
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StrategyTemplateSelector;
|
||||||
@ -47,3 +47,18 @@ export { default as MessageSearch } from './MessageSearch';
|
|||||||
// Rendering
|
// Rendering
|
||||||
export { default as MarkdownRenderer } from './MarkdownRenderer';
|
export { default as MarkdownRenderer } from './MarkdownRenderer';
|
||||||
export { CodeBlock, AlertBox, SignalCard as MarkdownSignalCard, parseMarkdown } from './MarkdownRenderer';
|
export { CodeBlock, AlertBox, SignalCard as MarkdownSignalCard, parseMarkdown } from './MarkdownRenderer';
|
||||||
|
|
||||||
|
// Analysis & Strategy (OQI-007)
|
||||||
|
export { default as AnalysisRequestForm } from './AnalysisRequestForm';
|
||||||
|
export type { AnalysisRequest, AnalysisTemplate } from './AnalysisRequestForm';
|
||||||
|
|
||||||
|
export { default as StrategyTemplateSelector } from './StrategyTemplateSelector';
|
||||||
|
export type { StrategyTemplate } from './StrategyTemplateSelector';
|
||||||
|
|
||||||
|
// LLM Configuration (OQI-007)
|
||||||
|
export { default as LLMConfigPanel } from './LLMConfigPanel';
|
||||||
|
export type { LLMConfig, ModelInfo, ConfigPreset, ModelId, ReasoningStyle, AnalysisDepth } from './LLMConfigPanel';
|
||||||
|
|
||||||
|
// Context Memory (OQI-007)
|
||||||
|
export { default as ContextMemoryDisplay } from './ContextMemoryDisplay';
|
||||||
|
export type { ContextMessage, ContextSummary, ContextMemoryState } from './ContextMemoryDisplay';
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user