Mutual_Fund/frontend/components/agent-chat.tsx

"use client";

import { Bot, MessageCircle, Send, X } from "lucide-react";
import { useState } from "react";
import { apiFetch, apiStream } from "@/lib/api";

interface AgentChatProps {
  employeeMode?: boolean;
}

interface ChatMessage {
  id: number;
  role: "user" | "agent";
  content: string;
}

export function AgentChat({ employeeMode = false }: AgentChatProps) {
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [messages, setMessages] = useState<ChatMessage[]>([
    { id: 1, role: "agent", content: "您好，我是华夏基金智能助手。您可以咨询基金产品、风险等级和净值信息。" },
  ]);

  async function ensureSession() {
    if (employeeMode) return "";
    if (sessionId) return sessionId;
    const result = await apiFetch<{ session_id: string }>("/agent/customer/session/create", { method: "POST" });
    setSessionId(result.session_id);
    return result.session_id;
  }

  async function sendMessage() {
    const content = input.trim();
    if (!content || loading) return;
    setInput("");
    setMessages((current) => [...current, { id: Date.now(), role: "user", content }]);
    setLoading(true);

    try {
      const activeSessionId = await ensureSession();
      const response = employeeMode
        ? await apiStream("/advisor-agent/chat/stream", { query: content })
        : await apiStream("/agent/customer/chat", { session_id: activeSessionId, query: content });
      setMessages((current) => [...current, { id: Date.now() + 1, role: "agent", content: response || "暂时没有找到合适的回答，请稍后再试。" }]);
    } catch {
      setMessages((current) => [...current, { id: Date.now() + 1, role: "agent", content: "当前服务暂时不可用，请稍后再试。" }]);
    } finally {
      setLoading(false);
    }
  }

  async function closeChat() {
    setOpen(false);
    if (!sessionId || employeeMode) return;
    try { await apiFetch("/agent/customer/session/end", { method: "POST", body: JSON.stringify({ session_id: sessionId }) }); } catch { /* session cleanup is best effort */ }
    setSessionId(null);
  }

  return (
    <div className="fixed bottom-3 right-7 z-50">
      {open && (
        <div role="dialog" aria-label="华夏基金智能助手" className="mb-4 flex h-[520px] w-[380px] flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl">
          <div className="flex items-center justify-between bg-[var(--brand-navy)] px-5 py-4 text-white">
            <div className="flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[var(--brand-primary)]"><Bot className="h-5 w-5" /></div>
              <div><p className="text-sm font-semibold">华夏基金智能助手</p><p className="mt-0.5 text-xs text-blue-100">在线为您提供基金信息服务</p></div>
            </div>
            <button aria-label="关闭聊天框" onClick={() => void closeChat()} className="rounded-lg p-2 text-blue-100 transition hover:bg-white/10 hover:text-white"><X className="h-4 w-4" /></button>
          </div>
          <div className="flex-1 space-y-4 overflow-y-auto bg-slate-50 p-4">
            {messages.map((message) => <div key={message.id} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}><div className={`max-w-[82%] rounded-2xl px-4 py-3 text-sm leading-6 ${message.role === "user" ? "rounded-br-md bg-[var(--brand-primary)] text-white" : "rounded-bl-md border border-slate-200 bg-white text-slate-700"}`}>{message.content}</div></div>)}
            {loading && <div className="text-xs text-slate-400">正在整理信息...</div>}
          </div>
          <form onSubmit={(event) => { event.preventDefault(); void sendMessage(); }} className="flex gap-2 border-t border-slate-200 bg-white p-3">
            <input value={input} onChange={(event) => setInput(event.target.value)} placeholder="输入您的问题" className="min-w-0 flex-1 rounded-xl border border-slate-200 px-3 py-2.5 text-sm outline-none transition focus:border-[var(--brand-primary)]" />
            <button type="submit" aria-label="发送消息" className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--brand-primary)] text-white transition hover:bg-[var(--brand-primary-dark)] disabled:cursor-not-allowed disabled:opacity-50" disabled={loading || !input.trim()}><Send className="h-4 w-4" /></button>
          </form>
        </div>
      )}
      <button aria-label={open ? "收起智能助手" : "打开智能助手"} onClick={() => setOpen((value) => !value)} className="flex h-14 w-14 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white shadow-lg shadow-indigo-900/25 transition hover:-translate-y-0.5 hover:bg-[var(--brand-primary-dark)]">{open ? <X className="h-5 w-5" /> : <MessageCircle className="h-5 w-5" />}</button>
    </div>
  );
}