[OQI-007] feat: Add LLM assistant UX components
- ToolCallCard: Display tool execution results with expandable details - MessageFeedback: Thumbs up/down with detailed feedback form - StreamingIndicator: Multiple variants for thinking/analyzing/generating states - AssistantSettingsPanel: Settings modal with risk profile, preferences Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
423be4062c
commit
bfaf76ccf8
453
src/modules/assistant/components/AssistantSettingsPanel.tsx
Normal file
453
src/modules/assistant/components/AssistantSettingsPanel.tsx
Normal file
@ -0,0 +1,453 @@
|
||||
/**
|
||||
* AssistantSettingsPanel Component
|
||||
* Settings for customizing assistant behavior and preferences
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Settings,
|
||||
X,
|
||||
Save,
|
||||
RotateCcw,
|
||||
Bot,
|
||||
Zap,
|
||||
Shield,
|
||||
Bell,
|
||||
Sliders,
|
||||
MessageSquare,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface AssistantSettings {
|
||||
// Response preferences
|
||||
responseStyle: 'concise' | 'detailed' | 'technical';
|
||||
includeCharts: boolean;
|
||||
includeSignals: boolean;
|
||||
autoAnalyze: boolean;
|
||||
|
||||
// Risk profile
|
||||
riskProfile: 'conservative' | 'moderate' | 'aggressive';
|
||||
maxPositionSize: number;
|
||||
preferredTimeframes: string[];
|
||||
|
||||
// Notification preferences
|
||||
signalNotifications: boolean;
|
||||
analysisNotifications: boolean;
|
||||
priceAlerts: boolean;
|
||||
|
||||
// Advanced
|
||||
streamResponses: boolean;
|
||||
rememberContext: boolean;
|
||||
maxHistoryMessages: number;
|
||||
}
|
||||
|
||||
interface AssistantSettingsPanelProps {
|
||||
settings: AssistantSettings;
|
||||
onSave: (settings: AssistantSettings) => Promise<void>;
|
||||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: AssistantSettings = {
|
||||
responseStyle: 'detailed',
|
||||
includeCharts: true,
|
||||
includeSignals: true,
|
||||
autoAnalyze: false,
|
||||
riskProfile: 'moderate',
|
||||
maxPositionSize: 2,
|
||||
preferredTimeframes: ['H1', 'H4', 'D1'],
|
||||
signalNotifications: true,
|
||||
analysisNotifications: false,
|
||||
priceAlerts: true,
|
||||
streamResponses: true,
|
||||
rememberContext: true,
|
||||
maxHistoryMessages: 50,
|
||||
};
|
||||
|
||||
const TIMEFRAMES = ['M1', 'M5', 'M15', 'M30', 'H1', 'H4', 'D1', 'W1', 'MN'];
|
||||
|
||||
const AssistantSettingsPanel: React.FC<AssistantSettingsPanelProps> = ({
|
||||
settings: initialSettings,
|
||||
onSave,
|
||||
onClose,
|
||||
isOpen,
|
||||
}) => {
|
||||
const [settings, setSettings] = useState<AssistantSettings>(initialSettings);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'risk' | 'notifications' | 'advanced'>('general');
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await onSave(settings);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setSettings(DEFAULT_SETTINGS);
|
||||
};
|
||||
|
||||
const toggleTimeframe = (tf: string) => {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
preferredTimeframes: prev.preferredTimeframes.includes(tf)
|
||||
? prev.preferredTimeframes.filter((t) => t !== tf)
|
||||
: [...prev.preferredTimeframes, tf],
|
||||
}));
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="w-full max-w-lg bg-gray-900 rounded-xl border border-gray-700 shadow-xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||
<Settings className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-semibold text-white">Assistant Settings</h2>
|
||||
<p className="text-sm text-gray-400">Customize your trading assistant</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-700">
|
||||
{[
|
||||
{ id: 'general', label: 'General', icon: Bot },
|
||||
{ id: 'risk', label: 'Risk', icon: Shield },
|
||||
{ id: 'notifications', label: 'Alerts', icon: Bell },
|
||||
{ id: 'advanced', label: 'Advanced', icon: Sliders },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'text-blue-400 border-b-2 border-blue-400 bg-blue-500/5'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-800/50'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="w-4 h-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 space-y-4 max-h-[400px] overflow-y-auto">
|
||||
{/* General Tab */}
|
||||
{activeTab === 'general' && (
|
||||
<div className="space-y-4">
|
||||
{/* Response Style */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Response Style
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{[
|
||||
{ id: 'concise', label: 'Concise', desc: 'Brief answers' },
|
||||
{ id: 'detailed', label: 'Detailed', desc: 'Full explanations' },
|
||||
{ id: 'technical', label: 'Technical', desc: 'Expert level' },
|
||||
].map((style) => (
|
||||
<button
|
||||
key={style.id}
|
||||
onClick={() =>
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
responseStyle: style.id as AssistantSettings['responseStyle'],
|
||||
}))
|
||||
}
|
||||
className={`p-3 rounded-lg border text-left transition-colors ${
|
||||
settings.responseStyle === style.id
|
||||
? 'border-blue-500 bg-blue-500/10'
|
||||
: 'border-gray-700 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium text-white">{style.label}</p>
|
||||
<p className="text-xs text-gray-500">{style.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggles */}
|
||||
<div className="space-y-3">
|
||||
<Toggle
|
||||
label="Include Charts"
|
||||
description="Show visual charts in responses"
|
||||
icon={TrendingUp}
|
||||
checked={settings.includeCharts}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, includeCharts: v }))}
|
||||
/>
|
||||
<Toggle
|
||||
label="Include Trading Signals"
|
||||
description="Generate buy/sell signals when relevant"
|
||||
icon={Zap}
|
||||
checked={settings.includeSignals}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, includeSignals: v }))}
|
||||
/>
|
||||
<Toggle
|
||||
label="Auto-Analyze Symbols"
|
||||
description="Automatically analyze mentioned symbols"
|
||||
icon={Bot}
|
||||
checked={settings.autoAnalyze}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, autoAnalyze: v }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risk Tab */}
|
||||
{activeTab === 'risk' && (
|
||||
<div className="space-y-4">
|
||||
{/* Risk Profile */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Risk Profile
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{[
|
||||
{ id: 'conservative', label: 'Conservative', color: 'green' },
|
||||
{ id: 'moderate', label: 'Moderate', color: 'yellow' },
|
||||
{ id: 'aggressive', label: 'Aggressive', color: 'red' },
|
||||
].map((profile) => (
|
||||
<button
|
||||
key={profile.id}
|
||||
onClick={() =>
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
riskProfile: profile.id as AssistantSettings['riskProfile'],
|
||||
}))
|
||||
}
|
||||
className={`p-3 rounded-lg border transition-colors ${
|
||||
settings.riskProfile === profile.id
|
||||
? `border-${profile.color}-500 bg-${profile.color}-500/10`
|
||||
: 'border-gray-700 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium text-white">{profile.label}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Max Position Size */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Max Position Size (% of account)
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="10"
|
||||
step="0.5"
|
||||
value={settings.maxPositionSize}
|
||||
onChange={(e) =>
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
maxPositionSize: parseFloat(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>0.5%</span>
|
||||
<span className="text-white font-medium">{settings.maxPositionSize}%</span>
|
||||
<span>10%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preferred Timeframes */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Preferred 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 ${
|
||||
settings.preferredTimeframes.includes(tf)
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
{tf}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notifications Tab */}
|
||||
{activeTab === 'notifications' && (
|
||||
<div className="space-y-3">
|
||||
<Toggle
|
||||
label="Signal Notifications"
|
||||
description="Get notified when new signals are generated"
|
||||
icon={Zap}
|
||||
checked={settings.signalNotifications}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, signalNotifications: v }))}
|
||||
/>
|
||||
<Toggle
|
||||
label="Analysis Updates"
|
||||
description="Get notified when analysis is complete"
|
||||
icon={TrendingUp}
|
||||
checked={settings.analysisNotifications}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, analysisNotifications: v }))}
|
||||
/>
|
||||
<Toggle
|
||||
label="Price Alerts"
|
||||
description="Get notified when prices hit targets"
|
||||
icon={Bell}
|
||||
checked={settings.priceAlerts}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, priceAlerts: v }))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Advanced Tab */}
|
||||
{activeTab === 'advanced' && (
|
||||
<div className="space-y-4">
|
||||
<Toggle
|
||||
label="Stream Responses"
|
||||
description="Show responses as they're generated"
|
||||
icon={MessageSquare}
|
||||
checked={settings.streamResponses}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, streamResponses: v }))}
|
||||
/>
|
||||
<Toggle
|
||||
label="Remember Context"
|
||||
description="Keep conversation context between sessions"
|
||||
icon={Clock}
|
||||
checked={settings.rememberContext}
|
||||
onChange={(v) => setSettings((prev) => ({ ...prev, rememberContext: v }))}
|
||||
/>
|
||||
|
||||
{/* Max History Messages */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Max History Messages
|
||||
</label>
|
||||
<select
|
||||
value={settings.maxHistoryMessages}
|
||||
onChange={(e) =>
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
maxHistoryMessages: parseInt(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value={20}>20 messages</option>
|
||||
<option value={50}>50 messages</option>
|
||||
<option value={100}>100 messages</option>
|
||||
<option value={200}>200 messages</option>
|
||||
</select>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Older messages will be summarized to save context
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between p-4 border-t border-gray-700 bg-gray-800/50">
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
Reset to Defaults
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4" />
|
||||
Save Settings
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Toggle Component
|
||||
interface ToggleProps {
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.FC<{ className?: string }>;
|
||||
checked: boolean;
|
||||
onChange: (value: boolean) => void;
|
||||
}
|
||||
|
||||
const Toggle: React.FC<ToggleProps> = ({
|
||||
label,
|
||||
description,
|
||||
icon: Icon,
|
||||
checked,
|
||||
onChange,
|
||||
}) => (
|
||||
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className="w-5 h-5 text-gray-400" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">{label}</p>
|
||||
<p className="text-xs text-gray-500">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`relative w-11 h-6 rounded-full transition-colors ${
|
||||
checked ? 'bg-blue-600' : 'bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||
checked ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AssistantSettingsPanel;
|
||||
261
src/modules/assistant/components/MessageFeedback.tsx
Normal file
261
src/modules/assistant/components/MessageFeedback.tsx
Normal file
@ -0,0 +1,261 @@
|
||||
/**
|
||||
* MessageFeedback Component
|
||||
* Allows users to rate and provide feedback on assistant messages
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
ThumbsUp,
|
||||
ThumbsDown,
|
||||
MessageSquare,
|
||||
X,
|
||||
Send,
|
||||
Loader2,
|
||||
Check,
|
||||
Flag,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface MessageFeedbackProps {
|
||||
messageId: string;
|
||||
onFeedback?: (messageId: string, feedback: FeedbackData) => Promise<void>;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export interface FeedbackData {
|
||||
rating: 'positive' | 'negative';
|
||||
category?: string;
|
||||
comment?: string;
|
||||
}
|
||||
|
||||
const FEEDBACK_CATEGORIES = [
|
||||
{ id: 'accurate', label: 'Accurate analysis' },
|
||||
{ id: 'helpful', label: 'Helpful response' },
|
||||
{ id: 'inaccurate', label: 'Inaccurate information' },
|
||||
{ id: 'unclear', label: 'Unclear explanation' },
|
||||
{ id: 'incomplete', label: 'Incomplete answer' },
|
||||
{ id: 'wrong_signal', label: 'Wrong trading signal' },
|
||||
{ id: 'other', label: 'Other' },
|
||||
];
|
||||
|
||||
const MessageFeedback: React.FC<MessageFeedbackProps> = ({
|
||||
messageId,
|
||||
onFeedback,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [rating, setRating] = useState<'positive' | 'negative' | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [category, setCategory] = useState<string>('');
|
||||
const [comment, setComment] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleRating = async (value: 'positive' | 'negative') => {
|
||||
setRating(value);
|
||||
|
||||
// For positive feedback, submit immediately without form
|
||||
if (value === 'positive') {
|
||||
await submitFeedback(value);
|
||||
} else {
|
||||
// For negative feedback, show the form for more details
|
||||
setShowForm(true);
|
||||
}
|
||||
};
|
||||
|
||||
const submitFeedback = async (feedbackRating: 'positive' | 'negative') => {
|
||||
if (!onFeedback) {
|
||||
setSubmitted(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await onFeedback(messageId, {
|
||||
rating: feedbackRating,
|
||||
category: category || undefined,
|
||||
comment: comment || undefined,
|
||||
});
|
||||
setSubmitted(true);
|
||||
setShowForm(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to submit feedback:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (rating) {
|
||||
await submitFeedback(rating);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowForm(false);
|
||||
setRating(null);
|
||||
setCategory('');
|
||||
setComment('');
|
||||
};
|
||||
|
||||
// Already submitted state
|
||||
if (submitted) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
<span>Thanks for your feedback</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Compact mode - just icons
|
||||
if (compact && !showForm) {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleRating('positive')}
|
||||
disabled={rating === 'positive'}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
rating === 'positive'
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'text-gray-500 hover:text-gray-300 hover:bg-gray-700'
|
||||
}`}
|
||||
title="Good response"
|
||||
>
|
||||
<ThumbsUp className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRating('negative')}
|
||||
disabled={rating === 'negative'}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
rating === 'negative'
|
||||
? 'bg-red-500/20 text-red-400'
|
||||
: 'text-gray-500 hover:text-gray-300 hover:bg-gray-700'
|
||||
}`}
|
||||
title="Bad response"
|
||||
>
|
||||
<ThumbsDown className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Rating Buttons */}
|
||||
{!showForm && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500">Was this helpful?</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleRating('positive')}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
rating === 'positive'
|
||||
? 'bg-green-500/20 text-green-400 border border-green-500/30'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<ThumbsUp className="w-4 h-4" />
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRating('negative')}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
rating === 'negative'
|
||||
? 'bg-red-500/20 text-red-400 border border-red-500/30'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<ThumbsDown className="w-4 h-4" />
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Detailed Feedback Form (for negative feedback) */}
|
||||
{showForm && (
|
||||
<div className="p-4 bg-gray-800 rounded-lg border border-gray-700 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Flag className="w-4 h-4 text-red-400" />
|
||||
<span className="font-medium text-white">Tell us what went wrong</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="p-1 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-gray-400">Category (optional)</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{FEEDBACK_CATEGORIES.filter(c =>
|
||||
rating === 'negative'
|
||||
? !['accurate', 'helpful'].includes(c.id)
|
||||
: !['inaccurate', 'unclear', 'incomplete', 'wrong_signal'].includes(c.id)
|
||||
).map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setCategory(category === cat.id ? '' : cat.id)}
|
||||
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
|
||||
category === cat.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-gray-400">Additional comments (optional)</label>
|
||||
<div className="relative">
|
||||
<MessageSquare className="absolute left-3 top-3 w-4 h-4 text-gray-500" />
|
||||
<textarea
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
placeholder="Help us improve by sharing more details..."
|
||||
className="w-full pl-10 pr-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 text-sm focus:outline-none focus:border-blue-500 resize-none"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Submitting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="w-4 h-4" />
|
||||
Submit Feedback
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageFeedback;
|
||||
222
src/modules/assistant/components/StreamingIndicator.tsx
Normal file
222
src/modules/assistant/components/StreamingIndicator.tsx
Normal file
@ -0,0 +1,222 @@
|
||||
/**
|
||||
* StreamingIndicator Component
|
||||
* Shows various loading and streaming states for the assistant
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Loader2,
|
||||
Bot,
|
||||
Brain,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Search,
|
||||
BarChart3,
|
||||
} from 'lucide-react';
|
||||
|
||||
type IndicatorVariant =
|
||||
| 'thinking'
|
||||
| 'analyzing'
|
||||
| 'generating'
|
||||
| 'searching'
|
||||
| 'loading'
|
||||
| 'typing';
|
||||
|
||||
interface StreamingIndicatorProps {
|
||||
variant?: IndicatorVariant;
|
||||
text?: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const VARIANT_CONFIG: Record<IndicatorVariant, {
|
||||
icon: React.ReactNode;
|
||||
text: string;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
}> = {
|
||||
thinking: {
|
||||
icon: <Brain className="w-4 h-4" />,
|
||||
text: 'Thinking...',
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'bg-purple-500/20',
|
||||
},
|
||||
analyzing: {
|
||||
icon: <BarChart3 className="w-4 h-4" />,
|
||||
text: 'Analyzing market data...',
|
||||
color: 'text-blue-400',
|
||||
bgColor: 'bg-blue-500/20',
|
||||
},
|
||||
generating: {
|
||||
icon: <Sparkles className="w-4 h-4" />,
|
||||
text: 'Generating response...',
|
||||
color: 'text-yellow-400',
|
||||
bgColor: 'bg-yellow-500/20',
|
||||
},
|
||||
searching: {
|
||||
icon: <Search className="w-4 h-4" />,
|
||||
text: 'Searching...',
|
||||
color: 'text-cyan-400',
|
||||
bgColor: 'bg-cyan-500/20',
|
||||
},
|
||||
loading: {
|
||||
icon: <Loader2 className="w-4 h-4 animate-spin" />,
|
||||
text: 'Loading...',
|
||||
color: 'text-gray-400',
|
||||
bgColor: 'bg-gray-500/20',
|
||||
},
|
||||
typing: {
|
||||
icon: <Bot className="w-4 h-4" />,
|
||||
text: 'Assistant is typing...',
|
||||
color: 'text-green-400',
|
||||
bgColor: 'bg-green-500/20',
|
||||
},
|
||||
};
|
||||
|
||||
const StreamingIndicator: React.FC<StreamingIndicatorProps> = ({
|
||||
variant = 'thinking',
|
||||
text,
|
||||
compact = false,
|
||||
}) => {
|
||||
const config = VARIANT_CONFIG[variant];
|
||||
const displayText = text || config.text;
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-1.5 px-2 py-1 rounded ${config.bgColor}`}>
|
||||
<div className={`${config.color} animate-pulse`}>
|
||||
{config.icon}
|
||||
</div>
|
||||
<span className={`text-xs ${config.color}`}>{displayText}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-3 p-4">
|
||||
{/* Avatar */}
|
||||
<div className={`flex-shrink-0 w-8 h-8 rounded-full ${config.bgColor} flex items-center justify-center`}>
|
||||
<Bot className={`w-4 h-4 ${config.color}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-white">Assistant</span>
|
||||
<div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${config.bgColor}`}>
|
||||
<div className={`${config.color} animate-pulse`}>
|
||||
{config.icon}
|
||||
</div>
|
||||
<span className={`text-xs ${config.color}`}>{displayText}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Animated Dots */}
|
||||
<div className="mt-2 flex items-center gap-1">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${config.bgColor} animate-bounce`}
|
||||
style={{ animationDelay: '0ms' }}
|
||||
/>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${config.bgColor} animate-bounce`}
|
||||
style={{ animationDelay: '150ms' }}
|
||||
/>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${config.bgColor} animate-bounce`}
|
||||
style={{ animationDelay: '300ms' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Typing Dots Animation Component
|
||||
export const TypingDots: React.FC<{ className?: string }> = ({ className = '' }) => (
|
||||
<div className={`flex items-center gap-1 ${className}`}>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce"
|
||||
style={{ animationDelay: `${i * 150}ms` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Pulse Animation Component
|
||||
export const PulseIndicator: React.FC<{
|
||||
color?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}> = ({ color = 'bg-green-500', size = 'md' }) => {
|
||||
const sizes = {
|
||||
sm: 'w-2 h-2',
|
||||
md: 'w-3 h-3',
|
||||
lg: 'w-4 h-4',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className="relative flex">
|
||||
<span
|
||||
className={`animate-ping absolute inline-flex h-full w-full rounded-full ${color} opacity-75`}
|
||||
/>
|
||||
<span className={`relative inline-flex rounded-full ${sizes[size]} ${color}`} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// Processing Steps Component
|
||||
interface ProcessingStep {
|
||||
id: string;
|
||||
label: string;
|
||||
status: 'pending' | 'active' | 'complete';
|
||||
}
|
||||
|
||||
export const ProcessingSteps: React.FC<{
|
||||
steps: ProcessingStep[];
|
||||
}> = ({ steps }) => (
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-800/50 rounded-lg">
|
||||
{steps.map((step, index) => (
|
||||
<React.Fragment key={step.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-medium ${
|
||||
step.status === 'complete'
|
||||
? 'bg-green-500 text-white'
|
||||
: step.status === 'active'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-700 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{step.status === 'complete' ? (
|
||||
<Zap className="w-3 h-3" />
|
||||
) : step.status === 'active' ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : (
|
||||
index + 1
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm ${
|
||||
step.status === 'complete'
|
||||
? 'text-green-400'
|
||||
: step.status === 'active'
|
||||
? 'text-white'
|
||||
: 'text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{step.label}
|
||||
</span>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className={`flex-1 h-px ${
|
||||
step.status === 'complete' ? 'bg-green-500' : 'bg-gray-700'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default StreamingIndicator;
|
||||
304
src/modules/assistant/components/ToolCallCard.tsx
Normal file
304
src/modules/assistant/components/ToolCallCard.tsx
Normal file
@ -0,0 +1,304 @@
|
||||
/**
|
||||
* ToolCallCard Component
|
||||
* Displays tool execution results from LLM agent
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Wrench,
|
||||
Check,
|
||||
X,
|
||||
Loader2,
|
||||
Copy,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
DollarSign,
|
||||
BarChart3,
|
||||
Search,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface ToolCall {
|
||||
id: string;
|
||||
name: string;
|
||||
arguments: Record<string, unknown>;
|
||||
result?: unknown;
|
||||
status: 'pending' | 'running' | 'success' | 'error';
|
||||
error?: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
interface ToolCallCardProps {
|
||||
toolCall: ToolCall;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const TOOL_ICONS: Record<string, React.ReactNode> = {
|
||||
get_price: <DollarSign className="w-4 h-4" />,
|
||||
get_quote: <DollarSign className="w-4 h-4" />,
|
||||
analyze_symbol: <BarChart3 className="w-4 h-4" />,
|
||||
get_signal: <TrendingUp className="w-4 h-4" />,
|
||||
create_order: <TrendingUp className="w-4 h-4" />,
|
||||
close_position: <TrendingDown className="w-4 h-4" />,
|
||||
get_portfolio: <BarChart3 className="w-4 h-4" />,
|
||||
search_symbols: <Search className="w-4 h-4" />,
|
||||
backtest: <Clock className="w-4 h-4" />,
|
||||
};
|
||||
|
||||
const TOOL_LABELS: Record<string, string> = {
|
||||
get_price: 'Get Price',
|
||||
get_quote: 'Get Quote',
|
||||
analyze_symbol: 'Analyze Symbol',
|
||||
get_signal: 'Get Signal',
|
||||
create_order: 'Create Order',
|
||||
close_position: 'Close Position',
|
||||
get_portfolio: 'Get Portfolio',
|
||||
search_symbols: 'Search Symbols',
|
||||
backtest: 'Backtest Strategy',
|
||||
};
|
||||
|
||||
const ToolCallCard: React.FC<ToolCallCardProps> = ({
|
||||
toolCall,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const icon = TOOL_ICONS[toolCall.name] || <Wrench className="w-4 h-4" />;
|
||||
const label = TOOL_LABELS[toolCall.name] || toolCall.name;
|
||||
|
||||
const statusColors = {
|
||||
pending: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
running: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
success: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
error: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||
};
|
||||
|
||||
const statusIcons = {
|
||||
pending: <Clock className="w-3 h-3" />,
|
||||
running: <Loader2 className="w-3 h-3 animate-spin" />,
|
||||
success: <Check className="w-3 h-3" />,
|
||||
error: <X className="w-3 h-3" />,
|
||||
};
|
||||
|
||||
const handleCopy = async () => {
|
||||
const content = JSON.stringify(toolCall.result, null, 2);
|
||||
await navigator.clipboard.writeText(content);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const formatResult = (result: unknown): string => {
|
||||
if (result === null || result === undefined) return 'No result';
|
||||
if (typeof result === 'string') return result;
|
||||
if (typeof result === 'number') return result.toLocaleString();
|
||||
return JSON.stringify(result, null, 2);
|
||||
};
|
||||
|
||||
const renderResultPreview = () => {
|
||||
const result = toolCall.result;
|
||||
if (!result) return null;
|
||||
|
||||
// Handle price result
|
||||
if (typeof result === 'object' && result !== null) {
|
||||
const r = result as Record<string, unknown>;
|
||||
|
||||
if ('price' in r || 'bid' in r || 'ask' in r) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
{r.symbol && (
|
||||
<span className="font-medium text-white">{String(r.symbol)}</span>
|
||||
)}
|
||||
{r.price && (
|
||||
<span className="font-mono text-green-400">{Number(r.price).toFixed(5)}</span>
|
||||
)}
|
||||
{r.bid && r.ask && (
|
||||
<span className="text-gray-400">
|
||||
<span className="text-red-400">{Number(r.bid).toFixed(5)}</span>
|
||||
{' / '}
|
||||
<span className="text-green-400">{Number(r.ask).toFixed(5)}</span>
|
||||
</span>
|
||||
)}
|
||||
{r.change !== undefined && (
|
||||
<span className={Number(r.change) >= 0 ? 'text-green-400' : 'text-red-400'}>
|
||||
{Number(r.change) >= 0 ? '+' : ''}{Number(r.change).toFixed(2)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle signal result
|
||||
if ('signal' in r || 'direction' in r) {
|
||||
const direction = r.direction || r.signal;
|
||||
return (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className={`px-2 py-0.5 rounded font-medium ${
|
||||
direction === 'BUY' || direction === 'LONG'
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: direction === 'SELL' || direction === 'SHORT'
|
||||
? 'bg-red-500/20 text-red-400'
|
||||
: 'bg-gray-500/20 text-gray-400'
|
||||
}`}>
|
||||
{String(direction)}
|
||||
</span>
|
||||
{r.confidence && (
|
||||
<span className="text-gray-400">
|
||||
Confidence: <span className="text-white">{Number(r.confidence).toFixed(0)}%</span>
|
||||
</span>
|
||||
)}
|
||||
{r.entry && (
|
||||
<span className="text-gray-400">
|
||||
Entry: <span className="font-mono text-white">{Number(r.entry).toFixed(5)}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle portfolio result
|
||||
if ('balance' in r || 'equity' in r) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
{r.balance && (
|
||||
<span className="text-gray-400">
|
||||
Balance: <span className="text-white font-medium">${Number(r.balance).toLocaleString()}</span>
|
||||
</span>
|
||||
)}
|
||||
{r.equity && (
|
||||
<span className="text-gray-400">
|
||||
Equity: <span className={Number(r.equity) >= Number(r.balance || 0) ? 'text-green-400' : 'text-red-400'}>
|
||||
${Number(r.equity).toLocaleString()}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
{r.positions !== undefined && (
|
||||
<span className="text-gray-400">
|
||||
Positions: <span className="text-white">{String(r.positions)}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle array results (e.g., search results)
|
||||
if (Array.isArray(result)) {
|
||||
return (
|
||||
<span className="text-sm text-gray-400">
|
||||
{result.length} result{result.length !== 1 ? 's' : ''} found
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for simple results
|
||||
return (
|
||||
<span className="text-sm text-gray-300 truncate max-w-[300px]">
|
||||
{formatResult(result).substring(0, 100)}
|
||||
{formatResult(result).length > 100 ? '...' : ''}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs ${statusColors[toolCall.status]}`}>
|
||||
{icon}
|
||||
<span>{label}</span>
|
||||
{statusIcons[toolCall.status]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`rounded-lg border ${statusColors[toolCall.status]} overflow-hidden`}>
|
||||
{/* Header */}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="w-full flex items-center justify-between p-3 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-1.5 rounded ${statusColors[toolCall.status]}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-white">{label}</span>
|
||||
<span className={`flex items-center gap-1 text-xs px-1.5 py-0.5 rounded ${statusColors[toolCall.status]}`}>
|
||||
{statusIcons[toolCall.status]}
|
||||
{toolCall.status}
|
||||
</span>
|
||||
</div>
|
||||
{toolCall.status === 'success' && toolCall.result && (
|
||||
<div className="mt-1">{renderResultPreview()}</div>
|
||||
)}
|
||||
{toolCall.status === 'error' && toolCall.error && (
|
||||
<div className="flex items-center gap-1.5 mt-1 text-sm text-red-400">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
<span>{toolCall.error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{toolCall.duration && (
|
||||
<span className="text-xs text-gray-500">{toolCall.duration}ms</span>
|
||||
)}
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Expanded Content */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-gray-700 p-3 space-y-3">
|
||||
{/* Arguments */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-wide">Arguments</span>
|
||||
</div>
|
||||
<pre className="p-2 bg-gray-900/50 rounded text-xs text-gray-300 overflow-x-auto">
|
||||
{JSON.stringify(toolCall.arguments, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Result */}
|
||||
{toolCall.result && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-wide">Result</span>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-3 h-3" />
|
||||
Copied
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3 h-3" />
|
||||
Copy
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="p-2 bg-gray-900/50 rounded text-xs text-gray-300 overflow-x-auto max-h-40">
|
||||
{formatResult(toolCall.result)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToolCallCard;
|
||||
@ -3,14 +3,32 @@
|
||||
* Export all LLM copilot components
|
||||
*/
|
||||
|
||||
// Core Chat Components
|
||||
export { default as ChatMessage } from './ChatMessage';
|
||||
export type { Message } from './ChatMessage';
|
||||
|
||||
export { default as ChatInput } from './ChatInput';
|
||||
|
||||
// Signal Components
|
||||
export { default as SignalCard } from './SignalCard';
|
||||
export type { TradingSignal } from './SignalCard';
|
||||
|
||||
// Conversation Management
|
||||
export { default as ConversationHistory } from './ConversationHistory';
|
||||
|
||||
export { default as ContextPanel } from './ContextPanel';
|
||||
|
||||
// Tool Call Display
|
||||
export { default as ToolCallCard } from './ToolCallCard';
|
||||
export type { ToolCall } from './ToolCallCard';
|
||||
|
||||
// Feedback System
|
||||
export { default as MessageFeedback } from './MessageFeedback';
|
||||
export type { FeedbackData } from './MessageFeedback';
|
||||
|
||||
// Loading & Streaming Indicators
|
||||
export { default as StreamingIndicator } from './StreamingIndicator';
|
||||
export { TypingDots, PulseIndicator, ProcessingSteps } from './StreamingIndicator';
|
||||
|
||||
// Settings
|
||||
export { default as AssistantSettingsPanel } from './AssistantSettingsPanel';
|
||||
export type { AssistantSettings } from './AssistantSettingsPanel';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user