/* eslint-disable */ // ChatInterface — chat with the Pi AI agent. // Props (TS): { initialMessages?: Message[]; onSend?(text:string):void } // Message = { id:string; role:"user"|"agent"; text:string; ts:string; rich?:any } const PI_RESPONSES = [ { trigger: /position|p&l|pnl|exposure/i, text: `Here's your current exposure snapshot: \`\`\`positions BTC/USDT LONG 0.2500 65,432.10 → 67,842.31 +602.55 (+3.68%) ETH/USDT LONG 2.0000 3,120.50 → 3,215.67 +190.34 (+3.05%) SOL/USDT SHORT 10.000 175.80 → 168.34 +74.60 (+4.24%) \`\`\` Net unrealised **+867.49 USDT** (+3.45%). Drawdown is sitting at 2.13%, well under your 5% policy ceiling.` }, { trigger: /alert|notify/i, text: `Got it — I'll watch **BTC/USDT** and ping you the moment it prints above **70,000 USDT**. \`\`\`alert symbol: BTC/USDT condition: price > 70,000.00 USDT type: Price Alert notifications: in-app, telegram \`\`\` Want me to also trigger a partial take-profit if the alert fires while you're sleeping?` }, { trigger: /risk|drawdown|safe/i, text: `Across the book, your aggregate VaR(1d, 95%) is **−1,842 USDT** — about 1.4% of equity. The SOL short is the only position with notional > 1500 USDT; I'd flag that as the tail-risk concentration. Three things I'd surface: 1. **Funding skew on SOL** is at +0.018% — your short is being subsidised right now. 2. ETH long has a stop **2.1% below entry**, which is inside the 1d ATR. 3. No active hedge on BTC despite your "hedge if exposure > 50k" rule.` }, ]; function pickResponse(text) { for (const r of PI_RESPONSES) if (r.trigger.test(text)) return r.text; return `I can help with positions, alerts, risk checks, and order routing. Some things to try: • "What are my open positions?" • "Set an alert for BTC above 70,000 USDT" • "Run a risk audit on the current book" You've got me wired into your Telegram and Slack gateways, so anything I do here syncs there too.`; } /* renders the agent's rich text — handles fenced code blocks + bold + lists */ function AgentBody({ text }) { const blocks = useMemo(() => { const out = []; const parts = text.split(/```([\s\S]*?)```/g); parts.forEach((part, i) => { if (i % 2 === 1) { const [first, ...rest] = part.split("\n"); const lang = first.trim(); const body = rest.join("\n"); out.push({ kind: "code", lang, body }); } else if (part.trim()) { out.push({ kind: "prose", body: part }); } }); return out; }, [text]); const renderInline = (s) => { const parts = s.split(/(\*\*[^*]+\*\*|`[^`]+`)/g); return parts.map((p, i) => { if (p.startsWith("**") && p.endsWith("**")) return {p.slice(2, -2)}; if (p.startsWith("`") && p.endsWith("`")) return {p.slice(1, -1)}; return p; }); }; return (
{blocks.map((b, i) => { if (b.kind === "code") { return ( 
              {b.lang && (
                
{b.lang}

              )}
              {colorize(b.body)}
); } return (
{b.body.split("\n").map((line, j) => { const m = line.match(/^(\d+)\.\s+(.*)/); const li = line.match(/^[•\-]\s+(.*)/); if (m) return (
{m[1]}. {renderInline(m[2])}
); if (li) return (
• {renderInline(li[1])}
); if (!line.trim()) return
; return
{renderInline(line)}
; })}
); })}
); } // crude syntax highlighter for code blocks (numbers green, words ALLCAPS amber-ish) function colorize(s) { const tokens = s.split(/(\s+|[,.:>→])/g); return tokens.map((t, i) => { if (/^[+\-−]?\$?\d[\d,]*\.?\d*%?$/.test(t)) { const positive = !t.startsWith("−") && !t.startsWith("-"); return {t}; } if (/^(LONG|BUY)$/.test(t)) return {t}; if (/^(SHORT|SELL)$/.test(t)) return {t}; if (/^[A-Z]{3,}\/[A-Z]{3,}$/.test(t)) return {t}; if (/^[a-z_]+:$/.test(t)) return {t}; if (/^→$/.test(t)) return {t}; return {t}; }); } /* --- main component ----------------------------------------------- */ function ChatInterface() { const [messages, setMessages] = useState([ { id: "m1", role: "user", text: "What are my current open positions?", ts: "10:30" }, { id: "m2", role: "agent", text: PI_RESPONSES[0].text, ts: "10:30" }, { id: "m3", role: "user", text: "Set an alert for BTC if it breaks above 70,000 USDT", ts: "10:31" }, { id: "m4", role: "agent", text: PI_RESPONSES[1].text, ts: "10:31" }, ]); const [draft, setDraft] = useState(""); const [streaming, setStreaming] = useState(null); // {id, target, shown} const scroller = useRef(null); // auto-scroll on new content (within scroll container only — never scrollIntoView) useEffect(() => { if (!scroller.current) return; scroller.current.scrollTop = scroller.current.scrollHeight; }, [messages, streaming]); // streaming reveal: chunk by ~3 chars at 14ms useEffect(() => { if (!streaming) return; if (streaming.shown >= streaming.target.length) { setMessages((ms) => ms.map((m) => m.id === streaming.id ? { ...m, text: streaming.target } : m)); setStreaming(null); return; } const next = Math.min(streaming.shown + 3 + Math.floor(Math.random() * 4), streaming.target.length); const t = setTimeout(() => { setMessages((ms) => ms.map((m) => m.id === streaming.id ? { ...m, text: streaming.target.slice(0, next) } : m)); setStreaming({ ...streaming, shown: next }); }, 14); return () => clearTimeout(t); }, [streaming]); const send = () => { const v = draft.trim(); if (!v || streaming) return; const ts = new Date().toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }); const userMsg = { id: "u" + Date.now(), role: "user", text: v, ts }; const agentId = "a" + Date.now(); const target = pickResponse(v); setMessages((ms) => [...ms, userMsg, { id: agentId, role: "agent", text: "", ts }]); setDraft(""); setStreaming({ id: agentId, target, shown: 0 }); }; const suggestions = [ "Run a risk audit on my book", "Why did the SOL position close?", "Pause all alerts for 1 hour", "What's my Telegram gateway uptime?", ]; return (
{/* header */}

Pi

Online · haiku-4.5 · ctx 47%

Your trading copilot — synced to Telegram, Slack, and the live position book.

} onClick={() => setMessages([])}>Clear chat
{/* messages */}
{messages.length === 0 && } {messages.map((m) => ( ))}
{/* composer */}
{messages.length > 0 && (
{suggestions.map((s) => ( ))}
)}
); } function PiAvatar({ large }) { const s = large ? 36 : 26; return (
π
); } function MessageRow({ m, streaming }) { if (m.role === "user") { return (
{m.text}
{m.ts} · sent ✓✓
); } return (
{m.text ? : } {streaming && m.text && }
{m.ts}
); } function TypingDots() { return (
{[0, 1, 2].map((i) => ( ))}
); } function Caret() { return ; } function Composer({ value, onChange, onSend, streaming }) { const ta = useRef(null); useLayoutEffect(() => { if (!ta.current) return; ta.current.style.height = "auto"; ta.current.style.height = Math.min(140, ta.current.scrollHeight) + "px"; }, [value]); return (
{ e.currentTarget.style.borderColor = "var(--accent-dim)"; }} onBlur={(e) => { e.currentTarget.style.borderColor = "var(--border-m)"; }} >