feat: Implement frontend UI components for issue #10
Created the following components: - ChatInterface: Message input, AI responses, chat history with bot selector dropdown - BotCard: Bot preview card for dashboard - BotSelector: Dropdown to select bot (max 3 bots) - StrategyPreview: Shows parsed strategy config in readable format - SignalChart: Visual representation of signals over time (SVG-based) - BacktestChart: Portfolio value chart with metrics display - ProUpgradeBanner: Upsell banner for Pro features - TokenPicker: Search/select tokens for conditions - ConditionBuilder: UI for building trading conditions Updated pages to use new components: - Dashboard now uses BotCard - Bot detail page now uses ChatInterface and StrategyPreview - Backtest page now uses BacktestChart - Simulate page now uses SignalChart and ProUpgradeBanner
This commit is contained in:
shokollm
313
src/frontend/src/lib/components/BacktestChart.svelte
Normal file
313
src/frontend/src/lib/components/BacktestChart.svelte
Normal file
@@ -0,0 +1,313 @@
|
||||
<script lang="ts">
|
||||
import type { BacktestResult } from '$lib/api';
|
||||
|
||||
interface ChartDataPoint {
|
||||
timestamp: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
results: BacktestResult | null;
|
||||
signals?: Array<{ created_at: string; signal_type: string; price: number }>;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
let { results, signals = [], height = 300 }: Props = $props();
|
||||
|
||||
let width = $state(800);
|
||||
let containerEl: HTMLDivElement;
|
||||
|
||||
$effect(() => {
|
||||
if (containerEl) {
|
||||
width = containerEl.clientWidth;
|
||||
}
|
||||
});
|
||||
|
||||
function generatePortfolioCurve(): ChartDataPoint[] {
|
||||
if (!results || signals.length === 0) return [];
|
||||
|
||||
const points: ChartDataPoint[] = [];
|
||||
const startValue = 10000;
|
||||
let currentValue = startValue;
|
||||
|
||||
const sortedSignals = [...signals].sort(
|
||||
(a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
|
||||
);
|
||||
|
||||
points.push({
|
||||
timestamp: sortedSignals[0]?.created_at || new Date().toISOString(),
|
||||
value: currentValue
|
||||
});
|
||||
|
||||
for (const signal of sortedSignals) {
|
||||
if (signal.signal_type === 'buy') {
|
||||
currentValue *= 1.05;
|
||||
} else if (signal.signal_type === 'sell') {
|
||||
currentValue *= 0.95;
|
||||
}
|
||||
points.push({
|
||||
timestamp: signal.created_at,
|
||||
value: currentValue
|
||||
});
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
function getChartArea(w: number, h: number): { x: number; y: number; width: number; height: number } {
|
||||
const padding = { top: 20, right: 20, bottom: 40, left: 60 };
|
||||
return {
|
||||
x: padding.left,
|
||||
y: padding.top,
|
||||
width: w - padding.left - padding.right,
|
||||
height: h - padding.top - padding.bottom
|
||||
};
|
||||
}
|
||||
|
||||
function getValueRange(pts: ChartDataPoint[]): { min: number; max: number } {
|
||||
if (pts.length === 0) return { min: 0, max: 10000 };
|
||||
const values = pts.map(p => p.value);
|
||||
const min = Math.min(...values);
|
||||
const max = Math.max(...values);
|
||||
const padding = (max - min) * 0.1 || 1000;
|
||||
return { min: min - padding, max: max + padding };
|
||||
}
|
||||
|
||||
function getPointPosition(point: ChartDataPoint, index: number, total: number, area: { x: number; y: number; width: number; height: number }, range: { min: number; max: number }): { x: number; y: number } {
|
||||
const x = area.x + (index / Math.max(total - 1, 1)) * area.width;
|
||||
const normalizedValue = (point.value - range.min) / (range.max - range.min);
|
||||
const y = area.y + area.height - normalizedValue * area.height;
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
function getYAxisLabels(area: { x: number; y: number; width: number; height: number }, range: { min: number; max: number }): Array<{ value: number; y: number }> {
|
||||
const step = (range.max - range.min) / 4;
|
||||
return [0, 1, 2, 3, 4].map(i => ({
|
||||
value: range.max - i * step,
|
||||
y: area.y + (i / 4) * area.height
|
||||
}));
|
||||
}
|
||||
|
||||
function getXAxisLabels(pts: ChartDataPoint[], area: { x: number; y: number; width: number; height: number }, range: { min: number; max: number }): Array<{ label: string; x: number }> {
|
||||
if (pts.length === 0) return [];
|
||||
const step = Math.max(1, Math.floor(pts.length / 5));
|
||||
return pts
|
||||
.filter((_, i) => i % step === 0 || i === pts.length - 1)
|
||||
.map((p, i, arr) => ({
|
||||
label: new Date(p.timestamp).toLocaleDateString(),
|
||||
x: getPointPosition(p, pts.indexOf(p), pts.length, area, range).x
|
||||
}));
|
||||
}
|
||||
|
||||
function getReturnColor(): string {
|
||||
if (!results) return '#888';
|
||||
return results.total_return >= 0 ? '#22c55e' : '#ef4444';
|
||||
}
|
||||
|
||||
let points = $derived(generatePortfolioCurve());
|
||||
let area = $derived(getChartArea(width, height));
|
||||
let range = $derived(getValueRange(points));
|
||||
let yAxisLabels = $derived(getYAxisLabels(area, range));
|
||||
let xAxisLabels = $derived(getXAxisLabels(points, area, range));
|
||||
</script>
|
||||
|
||||
<div class="backtest-chart" bind:this={containerEl}>
|
||||
{#if !results}
|
||||
<div class="empty-state">
|
||||
<p>No backtest results to display</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="chart-header">
|
||||
<div class="metric">
|
||||
<span class="metric-label">Total Return</span>
|
||||
<span class="metric-value" style="color: {getReturnColor()}">
|
||||
{results.total_return >= 0 ? '+' : ''}{results.total_return.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">Win Rate</span>
|
||||
<span class="metric-value">{results.win_rate.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">Total Trades</span>
|
||||
<span class="metric-value">{results.total_trades}</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">Sharpe Ratio</span>
|
||||
<span class="metric-value">{results.sharpe_ratio.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg {width} {height} viewBox="0 0 {width} {height}">
|
||||
<defs>
|
||||
<linearGradient id="portfolioGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="rgba(102, 126, 234, 0.4)" />
|
||||
<stop offset="100%" stop-color="rgba(102, 126, 234, 0)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g class="grid-lines">
|
||||
{#each [0, 1, 2, 3, 4] as i}
|
||||
{@const y = area.y + (i / 4) * area.height}
|
||||
<line
|
||||
x1={area.x}
|
||||
y1={y}
|
||||
x2={area.x + area.width}
|
||||
y2={y}
|
||||
stroke="rgba(255,255,255,0.08)"
|
||||
stroke-dasharray="4,4"
|
||||
/>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<g class="y-axis">
|
||||
{#each yAxisLabels as label}
|
||||
<text x={area.x - 8} y={label.y + 4} class="axis-label" text-anchor="end">
|
||||
${label.value.toLocaleString()}
|
||||
</text>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<g class="x-axis">
|
||||
{#each xAxisLabels as label}
|
||||
<text x={label.x} y={height - 8} class="axis-label" text-anchor="middle">
|
||||
{label.label}
|
||||
</text>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
{#if points.length > 1}
|
||||
<path
|
||||
d={points.map((p, i) => {
|
||||
const pos = getPointPosition(p, i, points.length, area, range);
|
||||
if (i === 0) {
|
||||
return `M ${pos.x} ${area.y + area.height} L ${pos.x} ${pos.y}`;
|
||||
}
|
||||
return `L ${pos.x} ${pos.y}`;
|
||||
}).join(' ') + ` L ${getPointPosition(points[points.length - 1], points.length - 1, points.length, area, range).x} ${area.y + area.height} Z`}
|
||||
fill="url(#portfolioGradient)"
|
||||
/>
|
||||
|
||||
<path
|
||||
d={points.map((p, i) => {
|
||||
const pos = getPointPosition(p, i, points.length, area, range);
|
||||
return `${i === 0 ? 'M' : 'L'} ${pos.x} ${pos.y}`;
|
||||
}).join(' ')}
|
||||
fill="none"
|
||||
stroke="#667eea"
|
||||
stroke-width="2.5"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
<div class="chart-footer">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Buy Signals</span>
|
||||
<span class="stat-value buy">{results.buy_signals}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Sell Signals</span>
|
||||
<span class="stat-value sell">{results.sell_signals}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Max Drawdown</span>
|
||||
<span class="stat-value negative">-{results.max_drawdown.toFixed(2)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.backtest-chart {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.axis-label {
|
||||
font-size: 10px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.chart-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.buy {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.sell {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
127
src/frontend/src/lib/components/BotCard.svelte
Normal file
127
src/frontend/src/lib/components/BotCard.svelte
Normal file
@@ -0,0 +1,127 @@
|
||||
<script lang="ts">
|
||||
import type { Bot } from '$lib/api';
|
||||
|
||||
interface Props {
|
||||
bot: Bot;
|
||||
onOpen?: (botId: string) => void;
|
||||
onDelete?: (botId: string) => void;
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
let { bot, onOpen, onDelete, showActions = true }: Props = $props();
|
||||
|
||||
function handleOpen() {
|
||||
onOpen?.(bot.id);
|
||||
}
|
||||
|
||||
function handleDelete(e: Event) {
|
||||
e.stopPropagation();
|
||||
onDelete?.(bot.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="bot-card" onclick={handleOpen} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && handleOpen()}>
|
||||
<div class="bot-info">
|
||||
<h3>{bot.name}</h3>
|
||||
{#if bot.description}
|
||||
<p class="bot-description">{bot.description}</p>
|
||||
{/if}
|
||||
<span class="bot-status status-{bot.status}">{bot.status}</span>
|
||||
</div>
|
||||
{#if showActions}
|
||||
<div class="bot-actions" onclick={(e) => e.stopPropagation()} role="group">
|
||||
<button class="btn btn-primary" onclick={handleOpen}>Open</button>
|
||||
<button class="btn btn-danger" onclick={handleDelete}>Delete</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bot-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.bot-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.bot-card:focus {
|
||||
outline: 2px solid #667eea;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.bot-info {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bot-info h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.bot-description {
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.bot-status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.status-paused {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.bot-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
94
src/frontend/src/lib/components/BotSelector.svelte
Normal file
94
src/frontend/src/lib/components/BotSelector.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import type { Bot } from '$lib/api';
|
||||
|
||||
interface Props {
|
||||
bots: Bot[];
|
||||
selectedBotId?: string | null;
|
||||
onSelect: (botId: string) => void;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
let { bots, selectedBotId = null, onSelect, disabled = false, label = 'Select Bot' }: Props = $props();
|
||||
|
||||
function handleChange(e: Event) {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
onSelect(target.value);
|
||||
}
|
||||
|
||||
const MAX_BOTS = 3;
|
||||
</script>
|
||||
|
||||
<div class="bot-selector">
|
||||
{#if label}
|
||||
<label for="bot-select">{label}</label>
|
||||
{/if}
|
||||
<div class="select-wrapper">
|
||||
<select
|
||||
id="bot-select"
|
||||
onchange={handleChange}
|
||||
disabled={disabled || bots.length === 0}
|
||||
value={selectedBotId || ''}
|
||||
>
|
||||
{#if bots.length === 0}
|
||||
<option value="" disabled>No bots available</option>
|
||||
{:else}
|
||||
{#each bots as bot}
|
||||
<option value={bot.id}>{bot.name}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
<span class="bot-count">{bots.length}/{MAX_BOTS}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bot-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
select {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
select:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bot-count {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
300
src/frontend/src/lib/components/ChatInterface.svelte
Normal file
300
src/frontend/src/lib/components/ChatInterface.svelte
Normal file
@@ -0,0 +1,300 @@
|
||||
<script lang="ts">
|
||||
import type { Bot } from '$lib/api';
|
||||
import type { ChatMessage } from '$lib/stores/chatStore';
|
||||
|
||||
interface Props {
|
||||
bot: Bot | null;
|
||||
messages: ChatMessage[];
|
||||
isSending?: boolean;
|
||||
onSendMessage: (message: string) => void;
|
||||
onSelectBot?: (botId: string) => void;
|
||||
availableBots?: Bot[];
|
||||
showBotSelector?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
bot,
|
||||
messages,
|
||||
isSending = false,
|
||||
onSendMessage,
|
||||
onSelectBot,
|
||||
availableBots = [],
|
||||
showBotSelector = false
|
||||
}: Props = $props();
|
||||
|
||||
let messageInput = $state('');
|
||||
let chatContainer: HTMLDivElement;
|
||||
|
||||
function handleSend() {
|
||||
if (!messageInput.trim()) return;
|
||||
onSendMessage(messageInput);
|
||||
messageInput = '';
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
|
||||
function handleBotChange(e: Event) {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
if (onSelectBot && target.value) {
|
||||
onSelectBot(target.value);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (messages.length && chatContainer) {
|
||||
setTimeout(() => {
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="chat-interface">
|
||||
{#if showBotSelector && availableBots.length > 0}
|
||||
<div class="bot-selector">
|
||||
<label for="bot-select">Active Bot:</label>
|
||||
<select id="bot-select" onchange={handleBotChange}>
|
||||
{#each availableBots as availableBot}
|
||||
<option value={availableBot.id} selected={availableBot.id === bot?.id}>
|
||||
{availableBot.name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="chat-messages" bind:this={chatContainer}>
|
||||
{#if messages.length === 0}
|
||||
<div class="welcome-message">
|
||||
<p>Welcome to {bot?.name || 'your bot'}! Describe your trading strategy in plain English.</p>
|
||||
<p class="hint">Example: "Buy PEPE when the price drops by 5% within 1 hour"</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each messages as message}
|
||||
<div class="message {message.role}">
|
||||
<div class="message-content">
|
||||
{message.content}
|
||||
</div>
|
||||
<div class="message-time">
|
||||
{message.timestamp.toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if isSending}
|
||||
<div class="message assistant">
|
||||
<div class="message-content typing">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if bot}
|
||||
<div class="input-container">
|
||||
<textarea
|
||||
bind:value={messageInput}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="Describe your trading strategy..."
|
||||
rows="1"
|
||||
disabled={isSending}
|
||||
></textarea>
|
||||
<button onclick={handleSend} disabled={isSending || !messageInput.trim()}>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.chat-interface {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bot-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bot-selector label {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.bot-selector select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bot-selector select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.welcome-message .hint {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message.assistant {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message.system {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message.assistant .message-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.message.system .message-content {
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
color: #fbbf24;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.typing {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #888;
|
||||
border-radius: 50%;
|
||||
animation: typing 1.4s infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
348
src/frontend/src/lib/components/ConditionBuilder.svelte
Normal file
348
src/frontend/src/lib/components/ConditionBuilder.svelte
Normal file
@@ -0,0 +1,348 @@
|
||||
<script lang="ts">
|
||||
import type { Condition } from '$lib/api';
|
||||
import TokenPicker from './TokenPicker.svelte';
|
||||
|
||||
interface Props {
|
||||
conditions: Condition[];
|
||||
onUpdate: (conditions: Condition[]) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
let { conditions, onUpdate, disabled = false }: Props = $props();
|
||||
|
||||
type ConditionType = Condition['type'];
|
||||
|
||||
const conditionTypes: { value: ConditionType; label: string; description: string }[] = [
|
||||
{ value: 'price_drop', label: 'Price Drop', description: 'Trigger when price falls by X%' },
|
||||
{ value: 'price_rise', label: 'Price Rise', description: 'Trigger when price rises by X%' },
|
||||
{ value: 'volume_spike', label: 'Volume Spike', description: 'Trigger when volume increases by X%' },
|
||||
{ value: 'price_level', label: 'Price Level', description: 'Trigger when price crosses a level' },
|
||||
];
|
||||
|
||||
const timeframes = ['1m', '5m', '15m', '1h', '4h', '1d'];
|
||||
|
||||
function addCondition() {
|
||||
const newCondition: Condition = {
|
||||
type: 'price_drop',
|
||||
token: '',
|
||||
threshold: 5,
|
||||
timeframe: '1h'
|
||||
};
|
||||
onUpdate([...conditions, newCondition]);
|
||||
}
|
||||
|
||||
function removeCondition(index: number) {
|
||||
onUpdate(conditions.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
function updateCondition(index: number, updates: Partial<Condition>) {
|
||||
const updated = conditions.map((c, i) =>
|
||||
i === index ? { ...c, ...updates } : c
|
||||
);
|
||||
onUpdate(updated);
|
||||
}
|
||||
|
||||
function getConditionDescription(condition: Condition): string {
|
||||
switch (condition.type) {
|
||||
case 'price_drop':
|
||||
return `Price drops ${condition.threshold || 0}% within ${condition.timeframe || '1h'}`;
|
||||
case 'price_rise':
|
||||
return `Price rises ${condition.threshold || 0}% within ${condition.timeframe || '1h'}`;
|
||||
case 'volume_spike':
|
||||
return `Volume spikes ${condition.threshold || 0}% within ${condition.timeframe || '1h'}`;
|
||||
case 'price_level':
|
||||
return `Price crosses ${condition.direction || 'above'} $${condition.price || 0}`;
|
||||
default:
|
||||
return 'Unknown condition';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="condition-builder">
|
||||
<div class="conditions-header">
|
||||
<h4>Conditions</h4>
|
||||
<button type="button" class="add-btn" onclick={addCondition} {disabled}>
|
||||
+ Add Condition
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if conditions.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No conditions set</p>
|
||||
<p class="hint">Add a condition to define when your strategy triggers</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="conditions-list">
|
||||
{#each conditions as condition, index}
|
||||
<div class="condition-card">
|
||||
<div class="condition-header">
|
||||
<span class="condition-number">#{index + 1}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="remove-btn"
|
||||
onclick={() => removeCondition(index)}
|
||||
disabled={disabled}
|
||||
aria-label="Remove condition"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="condition-fields">
|
||||
<div class="field">
|
||||
<label for="type-{index}">Type</label>
|
||||
<select
|
||||
id="type-{index}"
|
||||
value={condition.type}
|
||||
onchange={(e) => updateCondition(index, { type: (e.target as HTMLSelectElement).value as ConditionType })}
|
||||
disabled={disabled}
|
||||
>
|
||||
{#each conditionTypes as ct}
|
||||
<option value={ct.value}>{ct.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<TokenPicker
|
||||
label="Token"
|
||||
selectedToken={condition.token}
|
||||
selectedChain={condition.chain || ''}
|
||||
onSelect={(token, chain) => updateCondition(index, { token, chain })}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{#if condition.type === 'price_level'}
|
||||
<div class="field">
|
||||
<label for="direction-{index}">Direction</label>
|
||||
<select
|
||||
id="direction-{index}"
|
||||
value={condition.direction || 'above'}
|
||||
onchange={(e) => updateCondition(index, { direction: (e.target as HTMLSelectElement).value as 'above' | 'below' })}
|
||||
disabled={disabled}
|
||||
>
|
||||
<option value="above">Above</option>
|
||||
<option value="below">Below</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="price-{index}">Price ($)</label>
|
||||
<input
|
||||
id="price-{index}"
|
||||
type="number"
|
||||
value={condition.price || ''}
|
||||
oninput={(e) => updateCondition(index, { price: parseFloat((e.target as HTMLInputElement).value) || undefined })}
|
||||
placeholder="0.000001"
|
||||
step="any"
|
||||
min="0"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="field">
|
||||
<label for="threshold-{index}">Threshold (%)</label>
|
||||
<input
|
||||
id="threshold-{index}"
|
||||
type="number"
|
||||
value={condition.threshold || ''}
|
||||
oninput={(e) => updateCondition(index, { threshold: parseFloat((e.target as HTMLInputElement).value) || undefined })}
|
||||
placeholder="5"
|
||||
step="any"
|
||||
min="0"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="timeframe-{index}">Timeframe</label>
|
||||
<select
|
||||
id="timeframe-{index}"
|
||||
value={condition.timeframe || '1h'}
|
||||
onchange={(e) => updateCondition(index, { timeframe: (e.target as HTMLSelectElement).value })}
|
||||
disabled={disabled}
|
||||
>
|
||||
{#each timeframes as tf}
|
||||
<option value={tf}>{tf}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="condition-preview">
|
||||
<span class="preview-label">Summary:</span>
|
||||
{getConditionDescription(condition)}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.condition-builder {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.conditions-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
color: #667eea;
|
||||
border: 1px solid rgba(102, 126, 234, 0.4);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.add-btn:hover:not(:disabled) {
|
||||
background: rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.add-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state .hint {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.conditions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.condition-card {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.condition-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.condition-number {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.remove-btn:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.remove-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.condition-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.condition-preview {
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
font-size: 0.85rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
color: #666;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
121
src/frontend/src/lib/components/ProUpgradeBanner.svelte
Normal file
121
src/frontend/src/lib/components/ProUpgradeBanner.svelte
Normal file
@@ -0,0 +1,121 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
feature?: string;
|
||||
dismissible?: boolean;
|
||||
onDismiss?: () => void;
|
||||
}
|
||||
|
||||
let { feature, dismissible = true, onDismiss }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="pro-upgrade-banner">
|
||||
<div class="banner-content">
|
||||
<div class="banner-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="banner-text">
|
||||
<strong>Upgrade to Pro</strong>
|
||||
{#if feature}
|
||||
<p>{feature}</p>
|
||||
{:else}
|
||||
<p>Unlock advanced features and unlimited bots</p>
|
||||
{/if}
|
||||
</div>
|
||||
<a href="/settings" class="upgrade-btn">Upgrade Now</a>
|
||||
</div>
|
||||
{#if dismissible && onDismiss}
|
||||
<button class="dismiss-btn" onclick={onDismiss} aria-label="Dismiss">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pro-upgrade-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
|
||||
border: 1px solid rgba(102, 126, 234, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.banner-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
border-radius: 8px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.banner-text strong {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.banner-text p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.upgrade-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.upgrade-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.dismiss-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.dismiss-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
228
src/frontend/src/lib/components/SignalChart.svelte
Normal file
228
src/frontend/src/lib/components/SignalChart.svelte
Normal file
@@ -0,0 +1,228 @@
|
||||
<script lang="ts">
|
||||
import type { Signal } from '$lib/api';
|
||||
|
||||
interface Props {
|
||||
signals: Signal[];
|
||||
height?: number;
|
||||
}
|
||||
|
||||
let { signals, height = 200 }: Props = $props();
|
||||
|
||||
let width = $state(800);
|
||||
let containerEl: HTMLDivElement;
|
||||
|
||||
$effect(() => {
|
||||
if (containerEl) {
|
||||
width = containerEl.clientWidth;
|
||||
}
|
||||
});
|
||||
|
||||
function getSignalPosition(signal: Signal, index: number, total: number): { x: number; y: number } {
|
||||
const padding = 30;
|
||||
const chartWidth = width - padding * 2;
|
||||
const chartHeight = height - padding * 2;
|
||||
const x = padding + (index / Math.max(total - 1, 1)) * chartWidth;
|
||||
const priceRange = getPriceRange();
|
||||
const normalizedPrice = priceRange.min === priceRange.max ? 0.5 :
|
||||
(signal.price - priceRange.min) / (priceRange.max - priceRange.min);
|
||||
const y = padding + (1 - normalizedPrice) * chartHeight;
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
function getPriceRange(): { min: number; max: number } {
|
||||
if (signals.length === 0) return { min: 0, max: 1 };
|
||||
const prices = signals.map(s => s.price);
|
||||
const min = Math.min(...prices);
|
||||
const max = Math.max(...prices);
|
||||
const padding = (max - min) * 0.1 || 1;
|
||||
return { min: min - padding, max: max + padding };
|
||||
}
|
||||
|
||||
function getSignalColor(signal: Signal): string {
|
||||
switch (signal.signal_type) {
|
||||
case 'buy': return '#22c55e';
|
||||
case 'sell': return '#ef4444';
|
||||
case 'hold': return '#fbbf24';
|
||||
default: return '#888';
|
||||
}
|
||||
}
|
||||
|
||||
function getYAxisLabels(): string[] {
|
||||
const range = getPriceRange();
|
||||
const step = (range.max - range.min) / 4;
|
||||
return [
|
||||
range.max.toFixed(6),
|
||||
(range.max - step).toFixed(6),
|
||||
(range.min + step).toFixed(6),
|
||||
range.min.toFixed(6)
|
||||
];
|
||||
}
|
||||
|
||||
function getXAxisLabels(): string[] {
|
||||
if (signals.length === 0) return [];
|
||||
const step = Math.max(1, Math.floor(signals.length / 5));
|
||||
const labels: string[] = [];
|
||||
for (let i = 0; i < signals.length; i += step) {
|
||||
labels.push(new Date(signals[i].created_at).toLocaleTimeString());
|
||||
}
|
||||
return labels;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="signal-chart" bind:this={containerEl}>
|
||||
{#if signals.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No signals to display</p>
|
||||
</div>
|
||||
{:else}
|
||||
<svg {width} {height} viewBox="0 0 {width} {height}">
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="rgba(102, 126, 234, 0.3)" />
|
||||
<stop offset="100%" stop-color="rgba(102, 126, 234, 0)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g class="grid-lines">
|
||||
{#each [0, 1, 2, 3] as i}
|
||||
{@const y = 30 + (i / 3) * (height - 60)}
|
||||
<line
|
||||
x1="30" y1={y}
|
||||
x2={width - 30} y2={y}
|
||||
stroke="rgba(255,255,255,0.1)"
|
||||
stroke-dasharray="4,4"
|
||||
/>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<g class="y-axis">
|
||||
{#each getYAxisLabels() as label, i}
|
||||
{@const y = 30 + (i / 3) * (height - 60)}
|
||||
<text x="25" y={y + 4} class="axis-label" text-anchor="end">${label}</text>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<g class="x-axis">
|
||||
{#each getXAxisLabels() as label, i}
|
||||
{@const x = 30 + (i / (getXAxisLabels().length - 1 || 1)) * (width - 60)}
|
||||
<text x={x} y={height - 8} class="axis-label" text-anchor="middle">{label}</text>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<path
|
||||
d={signals.map((s, i) => {
|
||||
const pos = getSignalPosition(s, i, signals.length);
|
||||
return `${i === 0 ? 'M' : 'L'} ${pos.x} ${pos.y}`;
|
||||
}).join(' ')}
|
||||
fill="none"
|
||||
stroke="#667eea"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
{#each signals as signal, i}
|
||||
{@const pos = getSignalPosition(signal, i, signals.length)}
|
||||
{@const color = getSignalColor(signal)}
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="6"
|
||||
fill={color}
|
||||
stroke={color}
|
||||
stroke-width="2"
|
||||
class="signal-dot"
|
||||
>
|
||||
<title>{signal.signal_type.toUpperCase()} - ${signal.price.toFixed(6)} - {new Date(signal.created_at).toLocaleString()}</title>
|
||||
</circle>
|
||||
{/each}
|
||||
</svg>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot buy"></span>
|
||||
<span>Buy</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot sell"></span>
|
||||
<span>Sell</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot hold"></span>
|
||||
<span>Hold</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.signal-chart {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.axis-label {
|
||||
font-size: 10px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.signal-dot {
|
||||
cursor: pointer;
|
||||
transition: r 0.2s;
|
||||
}
|
||||
|
||||
.signal-dot:hover {
|
||||
r: 8;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-dot.buy {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.legend-dot.sell {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.legend-dot.hold {
|
||||
background: #fbbf24;
|
||||
}
|
||||
</style>
|
||||
227
src/frontend/src/lib/components/StrategyPreview.svelte
Normal file
227
src/frontend/src/lib/components/StrategyPreview.svelte
Normal file
@@ -0,0 +1,227 @@
|
||||
<script lang="ts">
|
||||
import type { StrategyConfig } from '$lib/api';
|
||||
|
||||
interface Props {
|
||||
config: StrategyConfig | null;
|
||||
editable?: boolean;
|
||||
onUpdate?: (config: StrategyConfig) => void;
|
||||
}
|
||||
|
||||
let { config, editable = false, onUpdate }: Props = $props();
|
||||
|
||||
function getConditionDescription(condition: StrategyConfig['conditions'][0]): string {
|
||||
switch (condition.type) {
|
||||
case 'price_drop':
|
||||
return `${condition.token} drops by ${condition.threshold}% within ${condition.timeframe}`;
|
||||
case 'price_rise':
|
||||
return `${condition.token} rises by ${condition.threshold}% within ${condition.timeframe}`;
|
||||
case 'volume_spike':
|
||||
return `${condition.token} volume spikes by ${condition.threshold}% within ${condition.timeframe}`;
|
||||
case 'price_level':
|
||||
return `${condition.token} crosses ${condition.direction} $${condition.price}`;
|
||||
default:
|
||||
return 'Unknown condition';
|
||||
}
|
||||
}
|
||||
|
||||
function getActionDescription(action: StrategyConfig['actions'][0]): string {
|
||||
switch (action.type) {
|
||||
case 'buy':
|
||||
return `Buy ${action.amount_percent}% of ${action.token || 'portfolio'}`;
|
||||
case 'sell':
|
||||
return `Sell ${action.amount_percent}% of ${action.token || 'portfolio'}`;
|
||||
case 'hold':
|
||||
return 'Hold';
|
||||
default:
|
||||
return 'Unknown action';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="strategy-preview">
|
||||
{#if !config || (config.conditions.length === 0 && config.actions.length === 0)}
|
||||
<div class="empty-state">
|
||||
<p>No strategy configured yet.</p>
|
||||
<p class="hint">Describe your trading strategy in the chat to create one.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="strategy-section">
|
||||
<h4>Conditions</h4>
|
||||
{#if config.conditions.length === 0}
|
||||
<p class="empty">No conditions set</p>
|
||||
{:else}
|
||||
<ul class="items-list">
|
||||
{#each config.conditions as condition, i}
|
||||
<li>
|
||||
<span class="condition-badge">{condition.type.replace('_', ' ')}</span>
|
||||
{getConditionDescription(condition)}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="strategy-section">
|
||||
<h4>Actions</h4>
|
||||
{#if config.actions.length === 0}
|
||||
<p class="empty">No actions set</p>
|
||||
{:else}
|
||||
<ul class="items-list">
|
||||
{#each config.actions as action}
|
||||
<li>
|
||||
<span class="action-badge action-{action.type}">{action.type}</span>
|
||||
{getActionDescription(action)}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if config.risk_management}
|
||||
<div class="strategy-section">
|
||||
<h4>Risk Management</h4>
|
||||
<div class="risk-items">
|
||||
{#if config.risk_management.stop_loss_percent}
|
||||
<div class="risk-item">
|
||||
<span class="risk-label">Stop Loss</span>
|
||||
<span class="risk-value negative">{config.risk_management.stop_loss_percent}%</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if config.risk_management.take_profit_percent}
|
||||
<div class="risk-item">
|
||||
<span class="risk-label">Take Profit</span>
|
||||
<span class="risk-value positive">{config.risk_management.take_profit_percent}%</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.strategy-preview {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.empty-state .hint {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.strategy-section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.strategy-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.items-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: #ccc;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.items-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.condition-badge,
|
||||
.action-badge {
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.condition-badge {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.action-badge {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-buy {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.action-sell {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.action-hold {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.risk-items {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.risk-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.risk-label {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.risk-value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
256
src/frontend/src/lib/components/TokenPicker.svelte
Normal file
256
src/frontend/src/lib/components/TokenPicker.svelte
Normal file
@@ -0,0 +1,256 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
|
||||
interface Token {
|
||||
symbol: string;
|
||||
chain: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
selectedToken?: string;
|
||||
selectedChain?: string;
|
||||
onSelect: (token: string, chain: string) => void;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
let { selectedToken = '', selectedChain = '', onSelect, disabled = false, label = 'Select Token' }: Props = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
let isOpen = $state(false);
|
||||
let tokens = $state<Token[]>([]);
|
||||
let isLoading = $state(false);
|
||||
let inputEl: HTMLInputElement;
|
||||
let containerEl: HTMLDivElement;
|
||||
|
||||
const commonTokens: Token[] = [
|
||||
{ symbol: 'BTC', chain: 'btc', name: 'Bitcoin' },
|
||||
{ symbol: 'ETH', chain: 'eth', name: 'Ethereum' },
|
||||
{ symbol: 'BNB', chain: 'bsc', name: 'BNB' },
|
||||
{ symbol: 'PEPE', chain: 'bsc', name: 'Pepe' },
|
||||
{ symbol: 'SHIB', chain: 'eth', name: 'Shiba Inu' },
|
||||
{ symbol: 'DOGE', chain: 'doge', name: 'Dogecoin' },
|
||||
{ symbol: 'SOL', chain: 'sol', name: 'Solana' },
|
||||
{ symbol: 'XRP', chain: 'xrp', name: 'Ripple' },
|
||||
];
|
||||
|
||||
$effect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerEl && !containerEl.contains(event.target as Node)) {
|
||||
isOpen = false;
|
||||
}
|
||||
}
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
async function loadTokens() {
|
||||
isLoading = true;
|
||||
try {
|
||||
tokens = await api.config.getTokens();
|
||||
} catch (e) {
|
||||
tokens = commonTokens;
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getFilteredTokens(): Token[] {
|
||||
const allTokens = tokens.length > 0 ? tokens : commonTokens;
|
||||
if (!searchQuery) return allTokens.slice(0, 10);
|
||||
const query = searchQuery.toLowerCase();
|
||||
return allTokens.filter(
|
||||
t => t.symbol.toLowerCase().includes(query) ||
|
||||
t.name.toLowerCase().includes(query) ||
|
||||
t.chain.toLowerCase().includes(query)
|
||||
).slice(0, 10);
|
||||
}
|
||||
|
||||
function handleSelect(token: Token) {
|
||||
onSelect(token.symbol, token.chain);
|
||||
searchQuery = '';
|
||||
isOpen = false;
|
||||
}
|
||||
|
||||
function handleInputFocus() {
|
||||
isOpen = true;
|
||||
if (tokens.length === 0 && !isLoading) {
|
||||
loadTokens();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="token-picker" bind:this={containerEl}>
|
||||
{#if label}
|
||||
<label>{label}</label>
|
||||
{/if}
|
||||
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
bind:this={inputEl}
|
||||
bind:value={searchQuery}
|
||||
onfocus={handleInputFocus}
|
||||
placeholder={selectedToken ? `${selectedToken}${selectedChain ? ` (${selectedChain})` : ''}` : 'Search tokens...'}
|
||||
{disabled}
|
||||
class:has-value={selectedToken}
|
||||
/>
|
||||
{#if selectedToken}
|
||||
<button class="clear-btn" onclick={() => onSelect('', '')} disabled={disabled}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if isOpen}
|
||||
<div class="dropdown">
|
||||
{#if isLoading}
|
||||
<div class="loading">Loading tokens...</div>
|
||||
{:else if getFilteredTokens().length === 0}
|
||||
<div class="no-results">No tokens found</div>
|
||||
{:else}
|
||||
{#each getFilteredTokens() as token}
|
||||
<button
|
||||
class="token-option"
|
||||
class:selected={token.symbol === selectedToken && token.chain === selectedChain}
|
||||
onclick={() => handleSelect(token)}
|
||||
>
|
||||
<span class="token-symbol">{token.symbol}</span>
|
||||
<span class="token-chain">{token.chain.toUpperCase()}</span>
|
||||
<span class="token-name">{token.name}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.token-picker {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 2.5rem 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
input.has-value {
|
||||
border-color: rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clear-btn:hover:not(:disabled) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 0.5rem;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.loading,
|
||||
.no-results {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.token-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.token-option:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.token-option.selected {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.token-symbol {
|
||||
font-weight: 600;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.token-chain {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.token-name {
|
||||
flex: 1;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
9
src/frontend/src/lib/components/index.ts
Normal file
9
src/frontend/src/lib/components/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export { default as ChatInterface } from './ChatInterface.svelte';
|
||||
export { default as BotCard } from './BotCard.svelte';
|
||||
export { default as BotSelector } from './BotSelector.svelte';
|
||||
export { default as StrategyPreview } from './StrategyPreview.svelte';
|
||||
export { default as SignalChart } from './SignalChart.svelte';
|
||||
export { default as BacktestChart } from './BacktestChart.svelte';
|
||||
export { default as ProUpgradeBanner } from './ProUpgradeBanner.svelte';
|
||||
export { default as TokenPicker } from './TokenPicker.svelte';
|
||||
export { default as ConditionBuilder } from './ConditionBuilder.svelte';
|
||||
@@ -4,11 +4,11 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { isAuthenticated, isLoading, chatStore, addMessage, setMessages, clearChat, currentBotStore, setCurrentBot } from '$lib/stores';
|
||||
import { api } from '$lib/api';
|
||||
import { ChatInterface, StrategyPreview, ProUpgradeBanner } from '$lib/components';
|
||||
|
||||
let botId = $derived($page.params.id);
|
||||
let messageInput = $state('');
|
||||
let isSending = $state(false);
|
||||
let chatContainer: HTMLDivElement;
|
||||
let showStrategy = $state(false);
|
||||
|
||||
onMount(async () => {
|
||||
if (!$isAuthenticated && !$isLoading) {
|
||||
@@ -34,24 +34,18 @@
|
||||
try {
|
||||
const history = await api.bots.getHistory(botId);
|
||||
setMessages(history);
|
||||
scrollToBottom();
|
||||
} catch (e) {
|
||||
console.error('Failed to load chat history:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
if (!messageInput.trim() || isSending) return;
|
||||
async function handleSendMessage(message: string) {
|
||||
if (isSending) return;
|
||||
|
||||
const userMessage = messageInput;
|
||||
messageInput = '';
|
||||
isSending = true;
|
||||
|
||||
addMessage({ role: 'user', content: userMessage });
|
||||
scrollToBottom();
|
||||
|
||||
try {
|
||||
const response = await api.bots.chat(botId, userMessage);
|
||||
const response = await api.bots.chat(botId, message);
|
||||
addMessage({ role: 'assistant', content: response.response });
|
||||
|
||||
if (response.strategy_config) {
|
||||
@@ -62,23 +56,11 @@
|
||||
addMessage({ role: 'assistant', content: 'Sorry, I encountered an error. Please try again.' });
|
||||
} finally {
|
||||
isSending = false;
|
||||
scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
setTimeout(() => {
|
||||
if (chatContainer) {
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
function toggleStrategy() {
|
||||
showStrategy = !showStrategy;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -93,55 +75,32 @@
|
||||
<h1>{$currentBotStore?.name || 'Loading...'}</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
{#if $currentBotStore?.strategy_config}
|
||||
<button class="btn btn-secondary" onclick={toggleStrategy}>
|
||||
{showStrategy ? 'Hide' : 'Show'} Strategy
|
||||
</button>
|
||||
{/if}
|
||||
<a href="/bot/{botId}/backtest" class="btn btn-secondary">Backtest</a>
|
||||
<a href="/bot/{botId}/simulate" class="btn btn-secondary">Simulate</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="chat-container" bind:this={chatContainer}>
|
||||
{#if $chatStore.length === 0}
|
||||
<div class="welcome-message">
|
||||
<p>Welcome to {$currentBotStore?.name}! Describe your trading strategy in plain English.</p>
|
||||
<p class="hint">Example: "Buy PEPE when the price drops by 5% within 1 hour"</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each $chatStore as message}
|
||||
<div class="message {message.role}">
|
||||
<div class="message-content">
|
||||
{message.content}
|
||||
</div>
|
||||
<div class="message-time">
|
||||
{message.timestamp.toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if isSending}
|
||||
<div class="message assistant">
|
||||
<div class="message-content typing">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $currentBotStore}
|
||||
<div class="input-container">
|
||||
<textarea
|
||||
bind:value={messageInput}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="Describe your trading strategy..."
|
||||
rows="1"
|
||||
disabled={isSending}
|
||||
></textarea>
|
||||
<button onclick={sendMessage} disabled={isSending || !messageInput.trim()}>
|
||||
Send
|
||||
</button>
|
||||
{#if showStrategy && $currentBotStore?.strategy_config}
|
||||
<div class="strategy-panel">
|
||||
<StrategyPreview config={$currentBotStore.strategy_config} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="chat-wrapper">
|
||||
<ChatInterface
|
||||
bot={$currentBotStore}
|
||||
messages={$chatStore}
|
||||
{isSending}
|
||||
onSendMessage={handleSendMessage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProUpgradeBanner feature="Auto-execute trades with your bot" />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@@ -217,138 +176,14 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.welcome-message .hint {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.strategy-panel {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message.assistant {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message.assistant .message-content {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.typing {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #888;
|
||||
border-radius: 50%;
|
||||
animation: typing 1.4s infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
textarea {
|
||||
.chat-wrapper {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -4,6 +4,8 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { isAuthenticated, isLoading, currentBotStore, setCurrentBot, backtestStore, setCurrentBacktest, addBacktestToHistory, setBacktestLoading, setBacktestError } from '$lib/stores';
|
||||
import { api } from '$lib/api';
|
||||
import { BacktestChart } from '$lib/components';
|
||||
import type { Backtest } from '$lib/api';
|
||||
|
||||
let botId = $derived($page.params.id);
|
||||
let token = $state('PEPE');
|
||||
@@ -11,6 +13,7 @@
|
||||
let startDate = $state('');
|
||||
let endDate = $state('');
|
||||
let isRunning = $state(false);
|
||||
let selectedBacktest = $state<Backtest | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
if (!$isAuthenticated && !$isLoading) {
|
||||
@@ -76,6 +79,12 @@
|
||||
function setBacktestHistory(backtests: any[]) {
|
||||
backtestStore.update(state => ({ ...state, backtestHistory: backtests }));
|
||||
}
|
||||
|
||||
function selectBacktest(backtest: Backtest) {
|
||||
if (backtest.status === 'completed' && backtest.result) {
|
||||
selectedBacktest = backtest;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -177,6 +186,16 @@
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if selectedBacktest}
|
||||
<section class="chart-section">
|
||||
<div class="chart-header">
|
||||
<h2>Portfolio Performance</h2>
|
||||
<button class="close-btn" onclick={() => selectedBacktest = null}>×</button>
|
||||
</div>
|
||||
<BacktestChart results={selectedBacktest.result} />
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -388,4 +407,36 @@
|
||||
color: #fca5a5;
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: auto;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { isAuthenticated, isLoading, currentBotStore, setCurrentBot, simulationStore, setCurrentSimulation, addSignals, clearSignals, setSimulationLoading, setSimulationError } from '$lib/stores';
|
||||
import { api } from '$lib/api';
|
||||
import { SignalChart, ProUpgradeBanner } from '$lib/components';
|
||||
|
||||
let botId = $derived($page.params.id);
|
||||
let token = $state('PEPE');
|
||||
@@ -142,12 +143,16 @@
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<ProUpgradeBanner feature="Real-time WebSocket signals for instant trading decisions" />
|
||||
|
||||
<section class="signals-section">
|
||||
<h2>Signals ({$simulationStore.signals.length})</h2>
|
||||
|
||||
{#if $simulationStore.signals.length === 0}
|
||||
<p class="empty-state">No signals yet. Start a simulation to see trading signals.</p>
|
||||
{:else}
|
||||
<SignalChart signals={$simulationStore.signals} height={200} />
|
||||
|
||||
<div class="signals-list">
|
||||
{#each $simulationStore.signals as signal}
|
||||
<div class="signal-card">
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { isAuthenticated, isLoading, botsStore, setBots, addBot, removeBot, userStore, logout } from '$lib/stores';
|
||||
import { api } from '$lib/api';
|
||||
import { BotCard } from '$lib/components';
|
||||
|
||||
let showCreateModal = $state(false);
|
||||
let newBotName = $state('');
|
||||
@@ -30,7 +31,7 @@
|
||||
}
|
||||
|
||||
async function createBot() {
|
||||
if (!$newBotName.trim()) return;
|
||||
if (!newBotName.trim()) return;
|
||||
createError = '';
|
||||
isCreating = true;
|
||||
try {
|
||||
@@ -95,19 +96,7 @@
|
||||
{:else}
|
||||
<div class="bots-grid">
|
||||
{#each $botsStore as bot}
|
||||
<div class="bot-card">
|
||||
<div class="bot-info">
|
||||
<h3>{bot.name}</h3>
|
||||
{#if bot.description}
|
||||
<p class="bot-description">{bot.description}</p>
|
||||
{/if}
|
||||
<span class="bot-status status-{bot.status}">{bot.status}</span>
|
||||
</div>
|
||||
<div class="bot-actions">
|
||||
<a href="/bot/{bot.id}" class="btn btn-primary">Open</a>
|
||||
<button onclick={() => deleteBot(bot.id)} class="btn btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<BotCard {bot} onOpen={(id) => goto(`/bot/${id}`)} onDelete={deleteBot} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -201,57 +190,6 @@
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bot-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bot-info {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bot-info h3 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.bot-description {
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.bot-status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.status-paused {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.bot-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
@@ -274,12 +212,6 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user