// Interactive Live Demo — employee chat (left) + audit panel (right). // Pure React. No backend; all logic runs in-page. const { useState, useEffect, useRef, useMemo } = React; function nowHHMMSS() { const d = new Date(); const pad = (n) => String(n).padStart(2, "0"); return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; } function LiveDemo({ t, lang }) { // chat: [{from: "user"|"ai"|"system", text: string | jsx, id}] const [chat, setChat] = useState([]); const [logs, setLogs] = useState([]); // {time, type, raw, token} const [input, setInput] = useState(""); const [thinking, setThinking] = useState(false); const [tab, setTab] = useState("log"); // 'log' | 'stats' | 'learn' const [tokenSaved, setTokenSaved] = useState(42.5); const [vramPct, setVramPct] = useState(90); // 7.2/8.0 GB const [reload, setReload] = useState("idle"); // idle | running | done const chatBodyRef = useRef(null); // Reset state when language changes so canned strings re-render useEffect(() => { setChat([]); setLogs([]); }, [lang]); // Allow other parts of the page (hero CTA) to trigger the canned scenario // via a window-level custom event. useEffect(() => { const onPlay = () => playScenario(); window.addEventListener("secuagent:play", onPlay); return () => window.removeEventListener("secuagent:play", onPlay); }); // Auto-scroll chat to bottom on new message useEffect(() => { if (chatBodyRef.current) { chatBodyRef.current.scrollTop = chatBodyRef.current.scrollHeight; } }, [chat, thinking]); const playScenario = () => { setChat([]); setLogs([]); // 1) User message setTimeout(() => { setChat((c) => [ ...c, { id: "u1", from: "user", text: t.msg_user_demo }, ]); }, 200); // 2) Drop in logs one-by-one t.mock_logs.forEach((l, i) => { setTimeout(() => { setLogs((cur) => [ { time: nowHHMMSS(), ...l, status: t.log_status_ok }, ...cur, ]); }, 700 + i * 350); }); // 3) Thinking indicator setTimeout(() => setThinking(true), 700 + t.mock_logs.length * 350 + 200); // 4) AI reply with restored highlights setTimeout(() => { setThinking(false); setChat((c) => [ ...c, { id: "a1", from: "ai", text: ( <> {t.ai_reply_lead} {lang === "zh" ? "南科三廠 A1 區" : "Tainan Fab 3 Building A1"} {t.msg_ai_demo[0].replace( lang === "zh" ? "南科三廠 A1 區艾司摩爾 DUV 光阻塗佈機（ASML-2026-X1）" : "ASML DUV photoresist coater at Tainan Fab 3 Building A1 (ASML-2026-X1)", "" )} {t.msg_ai_demo[1]} {t.msg_ai_demo[2]} ), }, ]); setTokenSaved((v) => +(v + 0.8).toFixed(1)); }, 700 + t.mock_logs.length * 350 + 1600); }; const resetDemo = () => { setChat([]); setLogs([]); setTokenSaved(42.5); }; const sendInput = () => { const text = input.trim(); if (!text) return; const id = "u" + Date.now(); setChat((c) => [...c, { id, from: "user", text }]); setInput(""); // Generate one dynamic log const raw = text.slice(0, Math.min(text.length, 14)); setLogs((cur) => [ { time: nowHHMMSS(), type: lang === "zh" ? "動態偵測" : "Dynamic", raw, token: lang === "zh" ? `[使用者輸入_${cur.length + 1}]` : `[User input_${cur.length + 1}]`, status: t.log_status_ok, }, ...cur, ]); setThinking(true); setTimeout(() => { setThinking(false); setChat((c) => [ ...c, { id: "a" + Date.now(), from: "ai", text: t.ai_canned }, ]); setTokenSaved((v) => +(v + 0.3).toFixed(1)); }, 1100); }; const onKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendInput(); } }; // Risk-distribution percentages (mocked + slight drift from log count) const statsData = useMemo(() => { const base = [38, 28, 16, 12, 6]; return t.stats_cats.map((c, i) => ({ label: c, pct: base[i] + (logs.length % 3 === i ? 2 : 0), })); }, [t.stats_cats, logs.length]); return ( <>
GATEWAY · ONLINE
{/* === Employee panel (LEFT) === */}

USER 👤 {t.employee_title}

{t.employee_sub}

{chat.length === 0 && !thinking && (
{lang === "zh" ? "尚未開始對話。點上方按鈕，或直接在下方輸入訊息。" : "No conversation yet. Press play, or type below to start."}
)} {chat.map((m) => (
{m.text}
))} {thinking && (
)}