"use client"; import { useEffect, useRef, useState } from "react"; import MessageList from "./MessageList"; import Composer from "./Composer"; function ExpertActivity({ stage }) { if (stage === "idle") return null; const isParsing = stage === "parsing"; return (
{isParsing ? (
{Array.from({ length: 9 }).map((_, i) => ())}
) : (
{[0, 1, 2].map((i) => ())}
)}
{isParsing ? "Parsing question ยท sending to backend" : "Thinking"}
{isParsing ? "Analyzing query structure and preparing tool context." : "Processing reasoning step-by-step."}
); } export default function ChatWindow() { const [messages, setMessages] = useState([]); const [stage, setStage] = useState("idle"); const parseTimer = useRef(null); useEffect(() => { return () => { if (parseTimer.current) clearTimeout(parseTimer.current); }; }, []); async function sendMessage(text) { setStage("parsing"); parseTimer.current = setTimeout(() => setStage("thinking"), 1200); try { const resp = await fetch("http://localhost:8000/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ session_id: "default", message: text }), }); const data = await resp.json(); if (parseTimer.current) clearTimeout(parseTimer.current); setStage("thinking"); setMessages((prev) => [...prev, `User: ${text}`, `Expert: ${data.answer}`]); } catch (err) { if (parseTimer.current) clearTimeout(parseTimer.current); setMessages((prev) => [...prev, `User: ${text}`, `Expert: Failed to get response: ${String(err)}`]); } finally { setStage("idle"); } } return (
); }