feat(ui): migrate trade plan and chat controls
This commit is contained in:
parent
3892093dc4
commit
324e34d537
@ -4,22 +4,22 @@ import { tradingRuntime } from '../lib/runtime';
|
||||
import { getPlatformAccessToken } from '../lib/authSession';
|
||||
import { createRequestId } from '../../../shared/request-id.js';
|
||||
import {
|
||||
Send, X, Bot, User,
|
||||
Send, X, Bot, User,
|
||||
Check, Loader2,
|
||||
Zap, Copy
|
||||
} from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { Button, Input, Select, Textarea } from './ui/Primitives';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
interface ChatMessage {
|
||||
id: number;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
profileData?: any;
|
||||
action?: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
|
||||
interface ChatMessage {
|
||||
id: number;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
profileData?: any;
|
||||
action?: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
interface ChatControlProps {
|
||||
profiles: any[];
|
||||
onApplyProfile: (action: string, profile: any) => Promise<{ success: boolean; error?: string }>;
|
||||
@ -84,58 +84,58 @@ export const normalizeProfileForApply = (profileData: any) => ({
|
||||
symbols: String(profileData?.symbols || '').trim(),
|
||||
is_active: profileData?.is_active !== false,
|
||||
});
|
||||
|
||||
// 3D Robot SVG Icon
|
||||
const RobotIcon = ({ size = 32 }: { size?: number }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Antenna */}
|
||||
<line x1="32" y1="6" x2="32" y2="14" stroke="#00ff88" strokeWidth="2.5" strokeLinecap="round" />
|
||||
<circle cx="32" cy="5" r="3" fill="#00ff88" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Head */}
|
||||
<rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1.5" opacity="0.95" />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="28" r="4.5" fill="#0a0b10" />
|
||||
<circle cx="24" cy="28" r="3" fill="#00ff88" opacity="0.9">
|
||||
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="40" cy="28" r="4.5" fill="#0a0b10" />
|
||||
<circle cx="40" cy="28" r="3" fill="#00ff88" opacity="0.9">
|
||||
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Mouth */}
|
||||
<rect x="24" y="35" width="16" height="3" rx="1.5" fill="#00ff88" opacity="0.4" />
|
||||
{/* Body */}
|
||||
<rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.8" />
|
||||
{/* Body detail */}
|
||||
<circle cx="32" cy="51" r="3" fill="#00ff88" opacity="0.3" />
|
||||
{/* Arms */}
|
||||
<rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
|
||||
<rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
|
||||
<defs>
|
||||
<linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#1a1b2e" />
|
||||
<stop offset="1" stopColor="#12131a" />
|
||||
</linearGradient>
|
||||
<linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#1a1b2e" />
|
||||
<stop offset="1" stopColor="#0f1017" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
// 3D Robot SVG Icon
|
||||
const RobotIcon = ({ size = 32 }: { size?: number }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Antenna */}
|
||||
<line x1="32" y1="6" x2="32" y2="14" stroke="#00ff88" strokeWidth="2.5" strokeLinecap="round" />
|
||||
<circle cx="32" cy="5" r="3" fill="#00ff88" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Head */}
|
||||
<rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1.5" opacity="0.95" />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="28" r="4.5" fill="#0a0b10" />
|
||||
<circle cx="24" cy="28" r="3" fill="#00ff88" opacity="0.9">
|
||||
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="40" cy="28" r="4.5" fill="#0a0b10" />
|
||||
<circle cx="40" cy="28" r="3" fill="#00ff88" opacity="0.9">
|
||||
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Mouth */}
|
||||
<rect x="24" y="35" width="16" height="3" rx="1.5" fill="#00ff88" opacity="0.4" />
|
||||
{/* Body */}
|
||||
<rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.8" />
|
||||
{/* Body detail */}
|
||||
<circle cx="32" cy="51" r="3" fill="#00ff88" opacity="0.3" />
|
||||
{/* Arms */}
|
||||
<rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
|
||||
<rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
|
||||
<defs>
|
||||
<linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#1a1b2e" />
|
||||
<stop offset="1" stopColor="#12131a" />
|
||||
</linearGradient>
|
||||
<linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#1a1b2e" />
|
||||
<stop offset="1" stopColor="#0f1017" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([
|
||||
{
|
||||
id: 0,
|
||||
role: 'assistant',
|
||||
content: "Hi! I'm your trading assistant. Tell me what kind of strategy profile you'd like to create or modify, and I'll generate the configuration for you.\n\nTry: \"Create a conservative BTC scalper with $1000 capital\"",
|
||||
timestamp: new Date(),
|
||||
}
|
||||
]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([
|
||||
{
|
||||
id: 0,
|
||||
role: 'assistant',
|
||||
content: "Hi! I'm your trading assistant. Tell me what kind of strategy profile you'd like to create or modify, and I'll generate the configuration for you.\n\nTry: \"Create a conservative BTC scalper with $1000 capital\"",
|
||||
timestamp: new Date(),
|
||||
}
|
||||
]);
|
||||
const [input, setInput] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [appliedIds, setAppliedIds] = useState<Set<number>>(new Set());
|
||||
@ -175,31 +175,31 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setTimeout(() => inputRef.current?.focus(), 300);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const sendMessage = async (text?: string) => {
|
||||
const msg = text || input.trim();
|
||||
if (!msg || isLoading) return;
|
||||
|
||||
const userMsg: ChatMessage = {
|
||||
id: Date.now(),
|
||||
role: 'user',
|
||||
content: msg,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages(prev => [...prev, userMsg]);
|
||||
setInput('');
|
||||
setIsLoading(true);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setTimeout(() => inputRef.current?.focus(), 300);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const sendMessage = async (text?: string) => {
|
||||
const msg = text || input.trim();
|
||||
if (!msg || isLoading) return;
|
||||
|
||||
const userMsg: ChatMessage = {
|
||||
id: Date.now(),
|
||||
role: 'user',
|
||||
content: msg,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages(prev => [...prev, userMsg]);
|
||||
setInput('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const apiUrl = tradingRuntime.tradingApiUrl;
|
||||
const accessToken = await getPlatformAccessToken();
|
||||
@ -213,50 +213,50 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
body: JSON.stringify({
|
||||
message: msg,
|
||||
context: profiles.map(p => ({
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
allocated_capital: p.allocated_capital,
|
||||
risk_per_trade_percent: p.risk_per_trade_percent,
|
||||
symbols: p.symbols,
|
||||
is_active: p.is_active,
|
||||
strategy_config: p.strategy_config,
|
||||
})),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || 'Chat request failed');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const assistantMsg: ChatMessage = {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
content: data.summary || data.reasoning || 'Profile configuration generated.',
|
||||
profileData: data.profile || null,
|
||||
action: data.action,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
if (data.reasoning && data.summary) {
|
||||
assistantMsg.content = `${data.summary}\n\n${data.reasoning}`;
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, assistantMsg]);
|
||||
} catch (err: any) {
|
||||
setMessages(prev => [...prev, {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
content: `Error: ${err.message}`,
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
allocated_capital: p.allocated_capital,
|
||||
risk_per_trade_percent: p.risk_per_trade_percent,
|
||||
symbols: p.symbols,
|
||||
is_active: p.is_active,
|
||||
strategy_config: p.strategy_config,
|
||||
})),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.error || 'Chat request failed');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const assistantMsg: ChatMessage = {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
content: data.summary || data.reasoning || 'Profile configuration generated.',
|
||||
profileData: data.profile || null,
|
||||
action: data.action,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
if (data.reasoning && data.summary) {
|
||||
assistantMsg.content = `${data.summary}\n\n${data.reasoning}`;
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, assistantMsg]);
|
||||
} catch (err: any) {
|
||||
setMessages(prev => [...prev, {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
content: `Error: ${err.message}`,
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleApply = async (msg: ChatMessage) => {
|
||||
if (msg.profileData && msg.action) {
|
||||
const activeDraft = draftProfiles[msg.id] || msg.profileData;
|
||||
@ -275,15 +275,15 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
}]);
|
||||
} else {
|
||||
setMessages(prev => [...prev, {
|
||||
id: Date.now(),
|
||||
role: 'assistant',
|
||||
content: `Failed to ${msg.action === 'create_profile' ? 'create' : 'update'} profile: ${result.error || 'Unknown error'}. Please try again or check your permissions.`,
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
id: Date.now(),
|
||||
role: 'assistant',
|
||||
content: `Failed to ${msg.action === 'create_profile' ? 'create' : 'update'} profile: ${result.error || 'Unknown error'}. Please try again or check your permissions.`,
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = (msgId: number) => {
|
||||
setCancelledIds(prev => new Set(prev).add(msgId));
|
||||
closeDraftEditor(msgId);
|
||||
@ -291,14 +291,14 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
id: Date.now(),
|
||||
role: 'assistant',
|
||||
content: 'Profile creation cancelled. You can ask me to create a different one or modify the parameters.',
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
};
|
||||
|
||||
const copyJson = (data: any) => {
|
||||
navigator.clipboard.writeText(JSON.stringify(data, null, 2));
|
||||
};
|
||||
|
||||
timestamp: new Date(),
|
||||
}]);
|
||||
};
|
||||
|
||||
const copyJson = (data: any) => {
|
||||
navigator.clipboard.writeText(JSON.stringify(data, null, 2));
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
@ -323,21 +323,23 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
// Floating robot button - bottom right corner (portaled to body to avoid parent CSS issues)
|
||||
if (!isOpen) {
|
||||
return createPortal(
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
right: '24px',
|
||||
zIndex: 99999,
|
||||
cursor: 'pointer',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
animation: 'robotFloat 3s ease-in-out infinite',
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(true)}
|
||||
variant="ghost"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
right: '24px',
|
||||
zIndex: 99999,
|
||||
cursor: 'pointer',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
animation: 'robotFloat 3s ease-in-out infinite',
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
{/* Glow ring */}
|
||||
<div style={{
|
||||
@ -351,8 +353,8 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
{/* Robot container */}
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
borderRadius: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -365,8 +367,8 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
<RobotIcon size={34} />
|
||||
</div>
|
||||
{/* Pulse dot */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '-2px',
|
||||
right: '-2px',
|
||||
width: '14px',
|
||||
@ -378,24 +380,24 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
animation: 'pulseDot 2s ease-in-out infinite',
|
||||
}} />
|
||||
</div>
|
||||
<style>{`
|
||||
@keyframes robotFloat {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-4px); }
|
||||
}
|
||||
@keyframes pulseDot {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(0.8); opacity: 0.6; }
|
||||
}
|
||||
`}</style>
|
||||
</button>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<style>{`
|
||||
@keyframes robotFloat {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-4px); }
|
||||
}
|
||||
@keyframes pulseDot {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(0.8); opacity: 0.6; }
|
||||
}
|
||||
`}</style>
|
||||
</Button>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
onClick={() => setIsOpen(false)}
|
||||
style={{
|
||||
@ -407,14 +409,14 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
animation: 'fadeIn 0.15s ease-out',
|
||||
}}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
right: '24px',
|
||||
zIndex: 999999,
|
||||
width: '460px',
|
||||
maxWidth: 'calc(100vw - 48px)',
|
||||
height: '640px',
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
right: '24px',
|
||||
zIndex: 999999,
|
||||
width: '460px',
|
||||
maxWidth: 'calc(100vw - 48px)',
|
||||
height: '640px',
|
||||
maxHeight: 'calc(100vh - 48px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -448,7 +450,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
<Button
|
||||
onClick={() => setIsOpen(false)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
size="sm"
|
||||
className="h-8 w-8 rounded-lg"
|
||||
>
|
||||
<X size={14} />
|
||||
@ -471,9 +473,9 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
: <Bot size={12} className="text-[var(--primary)]" />
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Bubble */}
|
||||
<div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}>
|
||||
|
||||
{/* Bubble */}
|
||||
<div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}>
|
||||
<div className="rounded-xl px-3.5 py-2.5 text-[12px] leading-relaxed" style={{
|
||||
background: msg.role === 'user'
|
||||
? 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08))'
|
||||
@ -484,8 +486,8 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
}}>
|
||||
{msg.content}
|
||||
</div>
|
||||
|
||||
{/* Profile preview card */}
|
||||
|
||||
{/* Profile preview card */}
|
||||
{msg.profileData && msg.action !== 'explain' && (() => {
|
||||
const activeProfileData = draftProfiles[msg.id] || msg.profileData;
|
||||
const isEditing = editingIds.has(msg.id);
|
||||
@ -509,13 +511,16 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
{msg.action === 'create_profile' ? 'New Profile' : 'Update Profile'}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => copyJson(activeProfileData)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
|
||||
title="Copy JSON"
|
||||
>
|
||||
<Copy size={11} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="px-3.5 py-2.5 space-y-1.5">
|
||||
@ -554,7 +559,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
{isEditing ? (
|
||||
<div className="px-3.5 pb-3 space-y-2">
|
||||
<div className="text-[10px] text-[var(--muted-foreground)] uppercase tracking-wider font-bold">Edit Parameters Before Apply</div>
|
||||
<input
|
||||
<Input
|
||||
value={activeProfileData?.name || ''}
|
||||
onChange={(e) => updateDraftField(msg.id, 'name', e.target.value)}
|
||||
placeholder="Profile Name"
|
||||
@ -562,7 +567,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
style={inputStyle}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@ -572,7 +577,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
className="w-full rounded-lg px-2.5 py-1.5 text-[11px] outline-none"
|
||||
style={inputStyle}
|
||||
/>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.1"
|
||||
@ -583,7 +588,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
<Input
|
||||
value={activeProfileData?.symbols || ''}
|
||||
onChange={(e) => updateDraftField(msg.id, 'symbols', e.target.value)}
|
||||
placeholder="Symbols (e.g. BTC/USDT,ETH/USDT)"
|
||||
@ -592,15 +597,16 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
/>
|
||||
<div className="flex items-center justify-between rounded-lg px-2.5 py-1.5" style={inputStyle}>
|
||||
<span className="text-[10px] text-[var(--muted-foreground)] uppercase tracking-wider">Auto Trading</span>
|
||||
<select
|
||||
<Select
|
||||
value={activeProfileData?.is_active === false ? 'false' : 'true'}
|
||||
onChange={(e) => updateDraftField(msg.id, 'is_active', e.target.value === 'true')}
|
||||
className="rounded px-2 py-1 text-[10px] outline-none"
|
||||
style={inputStyle}
|
||||
>
|
||||
<option value="true">Active</option>
|
||||
<option value="false">Paused</option>
|
||||
</select>
|
||||
options={[
|
||||
{ value: 'true', label: 'Active' },
|
||||
{ value: 'false', label: 'Paused' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
@ -617,8 +623,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
|
||||
{!appliedIds.has(msg.id) && !cancelledIds.has(msg.id) ? (
|
||||
<div className="flex" style={{ borderTop: '1px solid var(--border)' }}>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handleCancel(msg.id)}
|
||||
variant="ghost"
|
||||
className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
|
||||
style={{
|
||||
color: 'var(--destructive)',
|
||||
@ -627,9 +635,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
>
|
||||
<X size={11} />
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => isEditing ? closeDraftEditor(msg.id) : openDraftEditor(msg)}
|
||||
variant="ghost"
|
||||
className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
|
||||
style={{
|
||||
color: '#fbbf24',
|
||||
@ -638,9 +648,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
>
|
||||
<Copy size={11} />
|
||||
{isEditing ? 'Done Editing' : 'Edit Params'}
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handleApply(msg)}
|
||||
variant="ghost"
|
||||
className="flex-[2] py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:brightness-110"
|
||||
style={{
|
||||
background: 'var(--accent-soft)',
|
||||
@ -649,7 +661,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
>
|
||||
<Zap size={11} />
|
||||
Apply to Dashboard
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
) : cancelledIds.has(msg.id) ? (
|
||||
<div className="w-full py-2 flex items-center justify-center gap-1.5 text-[10px] font-semibold" style={{
|
||||
@ -677,18 +689,20 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
{msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Suggested quick actions - shown when only welcome message exists */}
|
||||
{messages.length <= 1 && !isLoading && (
|
||||
<div className="mt-2">
|
||||
<p style={{ fontSize: '9px', color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: '10px', paddingLeft: '4px' }}>Quick Actions</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{quickActions.map((action, i) => (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
key={i}
|
||||
onClick={() => sendMessage(action.prompt)}
|
||||
variant="ghost"
|
||||
className="text-left px-3.5 py-3 rounded-xl transition-all"
|
||||
style={{
|
||||
background: 'var(--card)',
|
||||
@ -706,11 +720,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
>
|
||||
<span style={{ fontSize: '13px', display: 'block', marginBottom: '3px', color: 'var(--foreground)' }}>{action.label}</span>
|
||||
<span style={{ fontSize: '10px', color: 'var(--muted-foreground)', lineHeight: '1.4', display: 'block' }}>{action.prompt.slice(0, 55)}...</span>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex gap-2.5">
|
||||
@ -726,10 +740,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Input area */}
|
||||
<div style={{
|
||||
background: 'var(--card)',
|
||||
@ -738,20 +752,22 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
}}>
|
||||
<div className="flex items-end gap-2.5">
|
||||
<div className="flex-1 relative">
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Describe a strategy profile..."
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Describe a strategy profile..."
|
||||
disabled={isLoading}
|
||||
rows={2}
|
||||
className="w-full rounded-xl py-3 pl-4 pr-12 outline-none disabled:opacity-50 transition-all resize-none"
|
||||
style={{ ...inputStyle, lineHeight: '1.5', fontFamily: 'inherit', fontSize: '13px' }}
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => sendMessage()}
|
||||
disabled={!input.trim() || isLoading}
|
||||
variant="ghost"
|
||||
className="absolute right-2.5 bottom-2.5 w-8 h-8 rounded-lg flex items-center justify-center transition-all disabled:opacity-20 hover:scale-105"
|
||||
style={{
|
||||
background: input.trim() ? 'var(--primary)' : 'var(--accent-soft)',
|
||||
@ -760,24 +776,24 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
}}
|
||||
>
|
||||
<Send size={14} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-1.5 ml-1 text-[9px] text-[var(--muted-foreground)]">Enter to send · Shift+Enter new line</p>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes chatSlideUp {
|
||||
from { transform: translateY(20px) scale(0.97); opacity: 0; }
|
||||
to { transform: translateY(0) scale(1); opacity: 1; }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
</>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
|
||||
<style>{`
|
||||
@keyframes chatSlideUp {
|
||||
from { transform: translateY(20px) scale(0.97); opacity: 0; }
|
||||
to { transform: translateY(0) scale(1); opacity: 1; }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
</>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,9 +7,7 @@ import { tradingRuntime } from '../lib/runtime';
|
||||
import { createRequestId } from '../../../shared/request-id.js';
|
||||
import { SkeletonBlock } from '../components/Skeleton';
|
||||
import { PageHeader } from '../components/ui/page-header';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { Input } from '../components/ui/input';
|
||||
import { Select } from '../components/ui/select';
|
||||
import { Button, Input, Select } from '../components/ui/Primitives';
|
||||
import { Card, CardContent } from '../components/ui/card';
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
@ -198,22 +196,20 @@ export function ScreenerView() {
|
||||
value={String(capIdx)}
|
||||
onChange={e => setCapIdx(Number(e.target.value))}
|
||||
style={{ width: 180 }}
|
||||
>
|
||||
{CAP_OPTIONS.map((c, i) => (
|
||||
<option key={c.label} value={i}>{c.label}</option>
|
||||
))}
|
||||
</Select>
|
||||
options={CAP_OPTIONS.map((c, i) => ({ value: String(i), label: c.label }))}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<SlidersHorizontal size={13} color="var(--muted-foreground)" />
|
||||
{SECTORS.slice(0, 6).map(s => (
|
||||
<button
|
||||
<Button
|
||||
key={s}
|
||||
onClick={() => setSector(s)}
|
||||
variant={sector === s ? 'secondary' : 'outline'}
|
||||
size="sm"
|
||||
style={{
|
||||
padding: '5px 10px', borderRadius: 20,
|
||||
border: '1px solid', fontSize: 11, fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
borderColor: sector === s ? 'var(--primary)' : 'var(--border)',
|
||||
background: sector === s ? 'var(--accent-soft)' : 'var(--card)',
|
||||
color: sector === s ? 'var(--primary)' : 'var(--muted-foreground)',
|
||||
@ -221,12 +217,16 @@ export function ScreenerView() {
|
||||
}}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
<Select
|
||||
aria-label="More sectors"
|
||||
value={SECTORS.indexOf(sector) >= 6 ? sector : ''}
|
||||
onChange={e => e.target.value && setSector(e.target.value)}
|
||||
options={[
|
||||
{ value: '', label: 'More sectors…' },
|
||||
...SECTORS.slice(6).map(s => ({ value: s, label: s })),
|
||||
]}
|
||||
style={{
|
||||
width: 140,
|
||||
borderRadius: 999,
|
||||
@ -235,12 +235,7 @@ export function ScreenerView() {
|
||||
color: moreSectorSelected ? 'var(--primary)' : 'var(--muted-foreground)',
|
||||
fontWeight: moreSectorSelected ? 700 : 500,
|
||||
}}
|
||||
>
|
||||
<option value="">More sectors…</option>
|
||||
{SECTORS.slice(6).map(s => (
|
||||
<option key={s} value={s}>{s}</option>
|
||||
))}
|
||||
</Select>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@ -12,11 +12,9 @@ import {
|
||||
type ManualEntryPayload,
|
||||
} from '../lib/manualEntriesApi';
|
||||
import { fetchTradeProfiles, type TradeProfilePayload } from '../lib/profileApi';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
|
||||
import { Input } from '../components/ui/input';
|
||||
import { PageHeader } from '../components/ui/page-header';
|
||||
import { Select } from '../components/ui/select';
|
||||
import { Button, Input, Select } from '../components/ui/Primitives';
|
||||
import {
|
||||
DEFAULT_TRADE_PLANS_UI_STATE,
|
||||
reduceTradePlansUiState,
|
||||
@ -1000,13 +998,14 @@ export function SimpleView() {
|
||||
<CardContent>
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
dispatch({ type: 'clear-feedback' });
|
||||
dispatch({ type: 'set-selected-holding-trade-id', value: null });
|
||||
updateDraft('side', 'buy');
|
||||
}}
|
||||
variant="ghost"
|
||||
className={`rounded-[1.25rem] border px-4 py-4 text-left transition ${
|
||||
draft.side === 'buy'
|
||||
? 'border-[var(--primary)] bg-[var(--accent-soft)]'
|
||||
@ -1016,8 +1015,8 @@ export function SimpleView() {
|
||||
<div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--muted-foreground)]">Create plan</div>
|
||||
<div className="mt-1 text-sm font-semibold text-[var(--foreground)]">New short-term buy plan</div>
|
||||
<div className="mt-1 text-sm text-[var(--muted-foreground)]">Arm a dip-buy trigger and let the app manage the profit exit after fill.</div>
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
dispatch({ type: 'clear-feedback' });
|
||||
@ -1027,6 +1026,7 @@ export function SimpleView() {
|
||||
updateDraft('side', 'sell');
|
||||
}
|
||||
}}
|
||||
variant="ghost"
|
||||
className={`rounded-[1.25rem] border px-4 py-4 text-left transition ${
|
||||
draft.side === 'sell'
|
||||
? 'border-[var(--primary)] bg-[var(--accent-soft)]'
|
||||
@ -1036,7 +1036,7 @@ export function SimpleView() {
|
||||
<div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--muted-foreground)]">Manage holding</div>
|
||||
<div className="mt-1 text-sm font-semibold text-[var(--foreground)]">Attach an exit plan</div>
|
||||
<div className="mt-1 text-sm text-[var(--muted-foreground)]">Choose an existing holding and place it back under managed profit-taking.</div>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{draft.side === 'sell' && (
|
||||
@ -1049,17 +1049,13 @@ export function SimpleView() {
|
||||
if (selected) applyHoldingToDraft(selected);
|
||||
}}
|
||||
disabled={availableSellHoldings.length === 0}
|
||||
>
|
||||
{availableSellHoldings.length === 0 ? (
|
||||
<option value="">No eligible holdings available</option>
|
||||
) : (
|
||||
availableSellHoldings.map((holding) => (
|
||||
<option key={`${holding.symbol}:${holding.tradeId || 'holding'}`} value={holding.tradeId || ''}>
|
||||
{holding.symbol} · {holding.size} @ {holding.entryPrice.toFixed(4)}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</Select>
|
||||
options={availableSellHoldings.length === 0
|
||||
? [{ value: '', label: 'No eligible holdings available' }]
|
||||
: availableSellHoldings.map((holding) => ({
|
||||
value: holding.tradeId || '',
|
||||
label: `${holding.symbol} · ${holding.size} @ ${holding.entryPrice.toFixed(4)}`,
|
||||
}))}
|
||||
/>
|
||||
<span className="block text-[11px] text-[var(--muted-foreground)]">
|
||||
Trade Plans can manage an existing filled holding by attaching a profit exit target to it.
|
||||
</span>
|
||||
@ -1104,7 +1100,7 @@ export function SimpleView() {
|
||||
{filteredSymbolSuggestions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2 pt-1">
|
||||
{filteredSymbolSuggestions.map((symbol) => (
|
||||
<button
|
||||
<Button
|
||||
key={symbol}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@ -1121,6 +1117,8 @@ export function SimpleView() {
|
||||
},
|
||||
});
|
||||
}}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={`rounded-full border px-3 py-1 text-[11px] font-semibold transition ${
|
||||
symbol === normalizedSymbol
|
||||
? 'border-[var(--primary)] bg-[var(--accent-soft)] text-[var(--primary)]'
|
||||
@ -1128,7 +1126,7 @@ export function SimpleView() {
|
||||
}`}
|
||||
>
|
||||
{symbol}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
@ -1139,10 +1137,11 @@ export function SimpleView() {
|
||||
<Select
|
||||
value={draft.side}
|
||||
onChange={(e) => updateDraft('side', e.target.value as SimpleSide)}
|
||||
>
|
||||
<option value="buy">Buy the dip + profit exit</option>
|
||||
<option value="sell">Manage existing holding at profit</option>
|
||||
</Select>
|
||||
options={[
|
||||
{ value: 'buy', label: 'Buy the dip + profit exit' },
|
||||
{ value: 'sell', label: 'Manage existing holding at profit' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -1194,10 +1193,11 @@ export function SimpleView() {
|
||||
<Select
|
||||
value={draft.sizingMode}
|
||||
onChange={(e) => updateDraft('sizingMode', e.target.value as 'quantity' | 'amount')}
|
||||
>
|
||||
<option value="quantity">Quantity / fractional shares</option>
|
||||
<option value="amount">USD amount</option>
|
||||
</Select>
|
||||
options={[
|
||||
{ value: 'quantity', label: 'Quantity / fractional shares' },
|
||||
{ value: 'amount', label: 'USD amount' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
@ -1255,10 +1255,11 @@ export function SimpleView() {
|
||||
<Select
|
||||
value={draft.dropMode}
|
||||
onChange={(e) => updateDraft('dropMode', e.target.value as TriggerMode)}
|
||||
>
|
||||
<option value="dollar">Dollar drop from current market</option>
|
||||
<option value="percent">Percent drop from current market</option>
|
||||
</Select>
|
||||
options={[
|
||||
{ value: 'dollar', label: 'Dollar drop from current market' },
|
||||
{ value: 'percent', label: 'Percent drop from current market' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<label className="space-y-3">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">
|
||||
@ -1279,10 +1280,11 @@ export function SimpleView() {
|
||||
<Select
|
||||
value={draft.profitMode}
|
||||
onChange={(e) => updateDraft('profitMode', e.target.value as TriggerMode)}
|
||||
>
|
||||
<option value="dollar">Dollar gain from purchase</option>
|
||||
<option value="percent">Percent gain from purchase</option>
|
||||
</Select>
|
||||
options={[
|
||||
{ value: 'dollar', label: 'Dollar gain from purchase' },
|
||||
{ value: 'percent', label: 'Percent gain from purchase' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<label className="space-y-3">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user