@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/app/[locale]/agents/[id]/chat/page.tsx

@@ -0,0 +1,833 @@
+"use client";
+
+import { useEffect, useState, useRef, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
+import {
+  Plus, History, ChevronLeft, ChevronDown, Info, Zap, Check, Trash2, Square,
+} from "lucide-react";
+import type { DigitalAgent, ChatMessage, AgentChatEvent, ToolCall, SessionStats, AttachedImage } from "@/types/agent";
+import type { SendMode } from "@/components/chat/input-bar";
+import { MessageBubble, TypingBubble } from "@/components/chat/message-bubble";
+import { InputBar } from "@/components/chat/input-bar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { v4 as uuidv4 } from "uuid";
+import { toast } from "@/hooks/use-toast";
+import type { SkillInfo } from "@/lib/skills";
+
+interface SessionInfo {
+  id: string; title: string; session_file: string; created_at: number;
+}
+
+const TIMESTAMP_GAP_MS = 5 * 60 * 1000;
+
+export default function ChatPage({ params }: { params: Promise<{ id: string }> }) {
+  const t = useTranslations("chat");
+  const locale = useLocale();
+
+  const [agentId, setAgentId] = useState("");
+  const [agent, setAgent] = useState<DigitalAgent | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [currentSessionFile, setCurrentSessionFile] = useState<string | undefined>();
+  const [streaming, setStreaming] = useState(false);
+  const [showSidebar, setShowSidebar] = useState(false);
+  const [showInfoPanel, setShowInfoPanel] = useState(false);
+  const [pendingTTS, setPendingTTS] = useState<string | undefined>();
+  const [compacting, setCompacting] = useState(false);
+  const [sessionStats, setSessionStats] = useState<SessionStats | null>(null);
+  const [showScrollBtn, setShowScrollBtn] = useState(false);
+  const [confirmClearAll, setConfirmClearAll] = useState(false);
+  const [pendingFollowup, setPendingFollowup] = useState<string | null>(null);
+  const [sessionSkills, setSessionSkills] = useState<string[] | null>(null);
+  const [installedSkills, setInstalledSkills] = useState<SkillInfo[]>([]);
+  // null = use agent's configured model; set to override for this session
+  const [sessionModel, setSessionModel] = useState<{ provider: string; modelId: string } | null>(null);
+
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const chatScrollRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const pendingSteerRef = useRef<string | null>(null);
+
+  // stable refs — doSend stays the same object across renders
+  const agentRef = useRef(agent);
+  const agentIdRef = useRef(agentId);
+  const sessionFileRef = useRef(currentSessionFile);
+  const sessionSkillsRef = useRef(sessionSkills);
+  const sessionModelRef = useRef(sessionModel);
+  useEffect(() => { agentRef.current = agent; }, [agent]);
+  useEffect(() => { agentIdRef.current = agentId; }, [agentId]);
+  useEffect(() => { sessionFileRef.current = currentSessionFile; }, [currentSessionFile]);
+  useEffect(() => { sessionSkillsRef.current = sessionSkills; }, [sessionSkills]);
+  useEffect(() => { sessionModelRef.current = sessionModel; }, [sessionModel]);
+
+  useEffect(() => {
+    params.then(async ({ id }) => {
+      setAgentId(id);
+      const [agentRes, sessRes, skillsRes] = await Promise.all([
+        fetch(`/api/agents/${id}`).then((r) => r.json()),
+        fetch(`/api/sessions/${id}`).then((r) => r.json()),
+        fetch("/api/skills").then((r) => r.json()),
+      ]);
+      setAgent(agentRes);
+      setSessions(sessRes);
+      setInstalledSkills(skillsRes);
+    });
+  }, [params]);
+
+  // auto-scroll only when already at bottom
+  useEffect(() => {
+    if (!showScrollBtn) {
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, streaming, showScrollBtn]);
+
+  const handleScroll = useCallback(() => {
+    const el = chatScrollRef.current;
+    if (!el) return;
+    setShowScrollBtn(el.scrollHeight - el.scrollTop - el.clientHeight > 120);
+  }, []);
+
+  const effectiveSkills = sessionSkills ?? (agent?.enabledSkills ?? []);
+
+  const stopStreaming = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setStreaming(false);
+  }, []);
+
+  // ── Core send (no mode/streaming guard — callers handle that) ─────────────
+  const doSend = useCallback(async (text: string, images?: AttachedImage[]) => {
+    const ag = agentRef.current;
+    const aid = agentIdRef.current;
+    if (!ag || !aid) return;
+
+    const userMsg: ChatMessage = { id: uuidv4(), role: "user", content: text, images, createdAt: new Date() };
+    setMessages((prev) => [...prev, userMsg]);
+    setStreaming(true);
+
+    const assistantId = uuidv4();
+    setMessages((prev) => [...prev, { id: assistantId, role: "assistant", content: "", toolCalls: [], createdAt: new Date() }]);
+
+    const toolMap = new Map<string, ToolCall>();
+    const abort = new AbortController();
+    abortControllerRef.current = abort;
+
+    try {
+      const res = await fetch(`/api/chat/${aid}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        signal: abort.signal,
+        body: JSON.stringify({
+          message: text,
+          sessionFile: sessionFileRef.current,
+          overrideSkills: sessionSkillsRef.current ?? undefined,
+          overrideProvider: sessionModelRef.current?.provider,
+          overrideModelId: sessionModelRef.current?.modelId,
+          images: images?.map(img => ({ data: img.data, mimeType: img.mimeType })),
+        }),
+      });
+      if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          try {
+            const ev: AgentChatEvent = JSON.parse(line.slice(6));
+            handleSSEEvent(ev, assistantId, toolMap, text, ag);
+          } catch { /* ignore */ }
+        }
+      }
+    } catch (e) {
+      if ((e as Error).name === "AbortError") return;
+      const msg = String(e);
+      setMessages((prev) => prev.map((m) =>
+        m.id === assistantId ? { ...m, content: `⚠️ ${msg}` } : m
+      ));
+      toast({ title: "发送失败", description: msg, variant: "destructive" });
+    } finally {
+      abortControllerRef.current = null;
+      setStreaming(false);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── SSE event handler (local to doSend call, not a hook) ─────────────────
+  function handleSSEEvent(
+    event: AgentChatEvent,
+    assistantId: string,
+    toolMap: Map<string, ToolCall>,
+    userText: string,
+    ag: DigitalAgent,
+  ) {
+    switch (event.type) {
+      case "message_update":
+        setMessages((prev) => prev.map((m) =>
+          m.id === assistantId ? { ...m, content: m.content + event.delta } : m));
+        break;
+      // FIX Bug1: thinking_delta accumulation
+      case "thinking_delta":
+        setMessages((prev) => prev.map((m) =>
+          m.id === assistantId ? { ...m, thinking: (m.thinking ?? "") + event.delta } : m));
+        break;
+      case "tool_start": {
+        const tc: ToolCall = { id: event.toolCallId, name: event.toolName, isLoading: true };
+        toolMap.set(event.toolCallId, tc);
+        setMessages((prev) => prev.map((m) =>
+          m.id === assistantId ? { ...m, toolCalls: [...(m.toolCalls ?? []), tc] } : m));
+        break;
+      }
+      case "tool_update": {
+        const tc = toolMap.get(event.toolCallId);
+        if (tc) {
+          const u = { ...tc, input: event.content };
+          toolMap.set(event.toolCallId, u);
+          setMessages((prev) => prev.map((m) =>
+            m.id === assistantId
+              ? { ...m, toolCalls: m.toolCalls?.map((t) => t.id === event.toolCallId ? u : t) }
+              : m));
+        }
+        break;
+      }
+      case "tool_end": {
+        const tc = toolMap.get(event.toolCallId);
+        if (tc) {
+          const u: ToolCall = {
+            ...tc,
+            isLoading: false,
+            isError: event.isError,
+            output: event.output,
+            fullOutputPath: event.fullOutputPath,
+            truncated: event.truncated,
+          };
+          toolMap.set(event.toolCallId, u);
+          setMessages((prev) => prev.map((m) =>
+            m.id === assistantId
+              ? { ...m, toolCalls: m.toolCalls?.map((t) => t.id === event.toolCallId ? u : t) }
+              : m));
+        }
+        break;
+      }
+      case "compaction_start": setCompacting(true); break;
+      case "compaction_end":   setCompacting(false); break;
+      // FIX Bug4: error event
+      case "error":
+        toast({ title: "对话出错", description: event.message, variant: "destructive" });
+        setMessages((prev) => prev.map((m) =>
+          m.id === assistantId && !m.content ? { ...m, content: `⚠️ ${event.message}` } : m));
+        break;
+      // FIX Bug5: aborted event
+      case "aborted":
+        setStreaming(false);
+        break;
+      // FIX Bug6: session title from actual user message
+      case "session_file": {
+        const sf = event.path;
+        setCurrentSessionFile(sf);
+        const title = userText.slice(0, 60) || "新对话";
+        setSessions((prev) => {
+          if (prev.find((s) => s.session_file === sf)) return prev;
+          return [{ id: uuidv4(), title, session_file: sf, created_at: Date.now() }, ...prev];
+        });
+        break;
+      }
+      // NEW: session_stats display
+      case "session_stats":
+        setSessionStats(event.stats);
+        break;
+      case "done":
+        // 自动朗读功能已禁用
+        // if (ag.voice.enabled) {
+        //   setMessages((prev) => {
+        //     const last = [...prev].reverse().find((m) => m.role === "assistant");
+        //     if (last?.content) setPendingTTS(last.content);
+        //     return prev;
+        //   });
+        // }
+        setStreaming(false);
+        break;
+    }
+  }
+
+  // FIX Bug2+3: steer/followup — fire after streaming ends
+  useEffect(() => {
+    if (streaming) return;
+    if (pendingSteerRef.current) {
+      const msg = pendingSteerRef.current;
+      pendingSteerRef.current = null;
+      void doSend(msg);
+    } else if (pendingFollowup) {
+      const msg = pendingFollowup;
+      setPendingFollowup(null);
+      void doSend(msg);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [streaming]);
+
+  // FIX Bug2+3: sendMessage with full mode support + images
+  const sendMessage = useCallback((text: string, mode: SendMode = "normal", images?: AttachedImage[]) => {
+    if (mode === "steer") {
+      if (streaming) { pendingSteerRef.current = text; stopStreaming(); }
+      else void doSend(text, images);
+      return;
+    }
+    if (mode === "followup") {
+      if (streaming) {
+        setPendingFollowup(text);
+        toast({ title: "消息已排队", description: "当前回复完成后自动发送" });
+      } else void doSend(text, images);
+      return;
+    }
+    if (!streaming) void doSend(text, images);
+  }, [streaming, doSend, stopStreaming]);
+
+  // ── Session management ────────────────────────────────────────────────────
+  const newSession = () => {
+    setCurrentSessionFile(undefined); setMessages([]); setSessionSkills(null); setSessionStats(null); setSessionModel(null);
+  };
+
+  const loadSession = async (sf: string) => {
+    setCurrentSessionFile(sf); setMessages([]); setShowSidebar(false); setSessionStats(null);
+    try {
+      const { messages: history } = await fetch("/api/sessions/history", {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionFile: sf }),
+      }).then((r) => r.json()) as {
+        messages: {
+          id: string; role: "user"|"assistant"; content: string;
+          thinking?: string; toolCalls?: ToolCall[]; createdAt: string;
+        }[];
+      };
+      // FIX Bug7+8: restore toolCalls and thinking from history
+      setMessages(history.map((m) => ({
+        id: m.id, role: m.role, content: m.content,
+        thinking: m.thinking, toolCalls: m.toolCalls ?? [],
+        createdAt: new Date(m.createdAt),
+      })));
+    } catch (e) {
+      toast({ title: "加载历史失败", description: String(e), variant: "destructive" });
+    }
+  };
+
+  // NEW: onRetry — resend the user message before the given assistant message
+  const handleRetry = useCallback((message: ChatMessage) => {
+    if (streaming) return;
+    const idx = messages.findIndex((m) => m.id === message.id);
+    for (let i = idx - 1; i >= 0; i--) {
+      if (messages[i].role === "user") {
+        setMessages((prev) => prev.slice(0, i + 1));
+        void doSend(messages[i].content);
+        return;
+      }
+    }
+  }, [messages, streaming, doSend]);
+
+  // NEW: onFork — branch from just before the selected message
+  const handleFork = useCallback((message: ChatMessage) => {
+    const idx = messages.findIndex((m) => m.id === message.id);
+    setCurrentSessionFile(undefined);
+    setMessages(idx >= 0 ? messages.slice(0, idx) : []);
+    setSessionSkills(null); setSessionStats(null);
+    toast({ title: "会话已分叉", description: "从所选消息之前创建了新分支", variant: "success" });
+  }, [messages]);
+
+  const deleteSession = async (e: React.MouseEvent, sid: string, sf: string) => {
+    e.stopPropagation();
+    await fetch(`/api/sessions/${agentId}/${sid}`, { method: "DELETE" });
+    setSessions((prev) => prev.filter((s) => s.id !== sid));
+    if (currentSessionFile === sf) { setCurrentSessionFile(undefined); setMessages([]); }
+  };
+
+  const clearAllSessions = async () => {
+    if (!confirmClearAll) { setConfirmClearAll(true); setTimeout(() => setConfirmClearAll(false), 3000); return; }
+    await fetch(`/api/sessions/${agentId}`, { method: "DELETE" });
+    setSessions([]); setCurrentSessionFile(undefined); setMessages([]);
+    setConfirmClearAll(false);
+  };
+
+  const toggleSessionSkill = (name: string) => {
+    const base = sessionSkills ?? (agent?.enabledSkills ?? []);
+    setSessionSkills(base.includes(name) ? base.filter((s) => s !== name) : [...base, name]);
+  };
+
+  if (!agent) return <div className="flex h-full items-center justify-center text-muted-foreground">Loading…</div>;
+
+  const shouldShowTimestamp = (i: number) => {
+    if (i === 0) return true;
+    return new Date(messages[i].createdAt).getTime() - new Date(messages[i-1].createdAt).getTime() > TIMESTAMP_GAP_MS;
+  };
+
+  const ctxPct = sessionStats?.contextUsage?.percent ?? 0;
+  const ctxColor = ctxPct > 80 ? "bg-red-500" : ctxPct > 60 ? "bg-yellow-500" : "bg-[#57BE6B]";
+
+  return (
+    <div className="flex h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-900 dark:via-purple-900/10 dark:to-slate-900">
+      {/* ── 历史会话侧边栏 ──────────────────────────────────────────── */}
+      <div className={cn(
+        "shrink-0 transition-all duration-300 overflow-hidden",
+        "bg-[hsl(var(--neo-bg))] backdrop-blur-xl border-r border-gray-200 dark:bg-slate-900/95 dark:backdrop-blur-2xl dark:border-slate-700/50",
+        showSidebar ? "w-[280px]" : "w-0"
+      )}>
+        <div className="p-4 space-y-3">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[14px] font-bold text-gray-800 dark:text-white">
+              会话历史
+            </span>
+            <button
+              onClick={() => setShowSidebar(false)}
+              className="h-8 w-8 rounded-xl neo-button hover:text-blue-600 dark:hover:bg-cyan-500/20 dark:border-transparent dark:hover:border-cyan-500/50 flex items-center justify-center transition-all duration-200 hover:scale-110"
+              title="关闭侧边栏"
+            >
+              <ChevronLeft className="h-4 w-4 text-gray-500 dark:text-gray-400 dark:group-hover:text-cyan-400 transition-colors" />
+            </button>
+          </div>
+
+          <button
+            onClick={newSession}
+            className="group w-full h-10 rounded-xl neo-button bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 dark:from-cyan-600 dark:to-blue-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 text-white text-[13px] font-semibold shadow-lg hover:shadow-blue-500/30 dark:hover:shadow-cyan-500/50 transition-all duration-200 hover:scale-[1.02] hover:-translate-y-0.5 flex items-center justify-center gap-2"
+          >
+            <Plus className="h-4 w-4 transition-transform duration-200 group-hover:rotate-90" />
+            <span>{t("newSession")}</span>
+          </button>
+
+          {sessions.length > 0 && (
+            <button
+              onClick={clearAllSessions}
+              className={cn(
+                "w-full h-8 rounded-xl text-[12px] font-medium transition-all duration-200 flex items-center justify-center gap-2 border hover:scale-[1.02]",
+                confirmClearAll
+                  ? "bg-red-100 text-red-600 border-red-300 hover:bg-red-200 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/50 dark:hover:bg-red-500/30"
+                  : "neo-button text-gray-600 hover:text-red-600 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-red-400 border-transparent dark:hover:border-red-500/30"
+              )}
+            >
+              <Trash2 className="h-3.5 w-3.5 transition-transform duration-200 hover:rotate-12" />
+              <span>{confirmClearAll ? "再次点击确认清空" : "清空全部历史"}</span>
+            </button>
+          )}
+        </div>
+
+        <ScrollArea className="h-[calc(100vh-10rem)]">
+          <div className="px-3 pb-3 space-y-2">
+            {sessions.length === 0 ? (
+              <div className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-2xl neo-card bg-white dark:bg-slate-800 border-gray-200 dark:border-slate-700 flex items-center justify-center">
+                  <History className="h-7 w-7 text-gray-400 dark:text-slate-500" />
+                </div>
+                <p className="text-[13px] text-gray-500">{t("noSessions")}</p>
+              </div>
+            ) : sessions.map((s) => (
+              <div key={s.id} className="relative group">
+                <button
+                  type="button"
+                  onClick={() => loadSession(s.session_file)}
+                  className={cn(
+                    "w-full text-left px-3 py-3 rounded-xl transition-all duration-200 border hover:scale-[1.02] hover:-translate-y-0.5",
+                    s.session_file === currentSessionFile
+                      ? "neo-card-inset bg-blue-50 text-blue-700 border-blue-200 dark:bg-gradient-to-r dark:from-cyan-600/20 dark:to-blue-600/20 dark:border-cyan-500/50 dark:shadow-lg dark:shadow-cyan-500/20"
+                      : "neo-button text-gray-700 dark:border-slate-700/50 dark:hover:border-cyan-500/30 dark:hover:bg-slate-800/50"
+                  )}
+                >
+                  {s.session_file === currentSessionFile && (
+                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-blue-500 to-indigo-500 dark:from-cyan-400 dark:to-blue-500 rounded-r-full shadow-lg dark:shadow-cyan-500/50"></div>
+                  )}
+                  <p className={cn(
+                    "text-[13px] truncate leading-snug transition-colors",
+                    s.session_file === currentSessionFile
+                      ? "font-bold text-cyan-400"
+                      : "font-medium text-gray-300 group-hover:text-white"
+                  )}>
+                    {s.title}
+                  </p>
+                  <p className="text-[11px] text-gray-500 mt-1 flex items-center gap-1.5 group-hover:text-gray-400 transition-colors">
+                    <span className="w-1 h-1 rounded-full bg-cyan-500"></span>
+                    {new Date(s.created_at).toLocaleDateString(locale)}
+                  </p>
+                </button>
+                <button
+                  type="button"
+                  onClick={(e) => deleteSession(e, s.id, s.session_file)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 h-7 w-7 rounded-lg hover:bg-red-500/20 text-gray-500 hover:text-red-400 flex items-center justify-center transition-all duration-200 border border-transparent hover:border-red-500/50 hover:scale-110"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* ── 主聊天区 - 科技感设计 ───────────────────────────────────────────────── */}
+      <div className="flex flex-1 flex-col min-w-0">
+        {/* 顶部栏 - 科技感设计 */}
+        <div className="flex items-center h-[56px] px-4 shrink-0 glass-effect border-b border-purple-500/20">
+          <button
+            onClick={() => { setShowSidebar(true); setShowInfoPanel(false); }}
+            className="h-9 w-9 rounded-lg hover:bg-white/10 flex items-center justify-center transition-all hover:scale-110 border border-transparent hover:border-purple-500/30"
+            title="打开历史记录"
+          >
+            <History className="h-4 w-4 text-cyan-400" />
+          </button>
+
+          <div className="flex-1 flex items-center justify-center gap-3">
+            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-purple-600/30 to-cyan-500/30 flex items-center justify-center text-2xl shadow-lg neon-glow-purple border border-purple-500/30">
+              {agent.avatar}
+            </div>
+            <span className="text-[16px] font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
+              {agent.name}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {compacting && (
+              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full glass-effect border border-cyan-500/30">
+                <div className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse neon-glow"></div>
+                <span className="text-[11px] font-semibold text-cyan-400">压缩中</span>
+              </div>
+            )}
+
+            {sessionStats?.contextUsage && (
+              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full glass-effect border border-purple-500/30" title={`Context: ${ctxPct}%`}>
+                <div className="h-1.5 w-16 rounded-full bg-white/10 overflow-hidden">
+                  <div className={cn("h-full rounded-full transition-all duration-500", ctxColor)} style={{ width: `${ctxPct}%` }} />
+                </div>
+                <span className="text-[11px] font-semibold text-gray-300">{ctxPct}%</span>
+              </div>
+            )}
+
+            {streaming && (
+              <button
+                onClick={stopStreaming}
+                className="h-9 w-9 rounded-lg hover:bg-red-500/20 text-red-400 flex items-center justify-center transition-all hover:scale-110 border border-transparent hover:border-red-500/50"
+                title="停止生成"
+              >
+                <Square className="h-4 w-4 fill-current" />
+              </button>
+            )}
+
+            <button
+              onClick={() => { setShowInfoPanel(!showInfoPanel); setShowSidebar(false); }}
+              className={cn(
+                "h-9 w-9 rounded-lg flex items-center justify-center transition-all hover:scale-110 border",
+                showInfoPanel
+                  ? "bg-purple-500/20 text-purple-400 border-purple-500/50 neon-glow-purple"
+                  : "hover:bg-white/10 text-gray-400 border-transparent hover:border-purple-500/30"
+              )}
+              title="数字人信息 & Skills"
+            >
+              <Info className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* 会话统计栏 - 科技感设计 */}
+        {sessionStats && (
+          <div className="flex items-center justify-center gap-3 px-4 py-2 glass-effect border-b border-purple-500/20 text-[11px] shrink-0">
+            <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
+              <span className="text-cyan-400 font-semibold">↑</span>
+              <span className="font-bold text-cyan-300">{sessionStats.tokens.input.toLocaleString()}</span>
+            </div>
+            <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-purple-500/10 border border-purple-500/30">
+              <span className="text-purple-400 font-semibold">↓</span>
+              <span className="font-bold text-purple-300">{sessionStats.tokens.output.toLocaleString()}</span>
+            </div>
+            {sessionStats.cost > 0 && (
+              <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-green-500/10 border border-green-500/30">
+                <span className="font-bold text-green-300">≈ ${sessionStats.cost.toFixed(4)}</span>
+              </div>
+            )}
+            {sessionStats.contextUsage && (
+              <div className={cn(
+                "flex items-center gap-1.5 px-2.5 py-1 rounded-lg border",
+                ctxPct > 80
+                  ? "bg-red-500/10 border-red-500/30 text-red-400"
+                  : "bg-white/5 border-white/10 text-gray-300"
+              )}>
+                <span className="font-bold">
+                  context {ctxPct}% / {sessionStats.contextUsage.contextWindow.toLocaleString()}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 内容区（聊天 + 信息面板并排）- 科技感设计 */}
+        <div className="flex flex-1 min-h-0">
+          <div className="flex flex-col flex-1 min-w-0 relative">
+            {/* 聊天消息区 */}
+            <div ref={chatScrollRef} onScroll={handleScroll}
+              className="flex-1 overflow-y-auto bg-white dark:bg-slate-900/50">
+              <div className="py-4 space-y-1">
+                {messages.length === 0 && (
+                  <div className="flex justify-center mt-20 mb-4 text-center">
+                    <div className="max-w-sm">
+                      <div className="relative w-24 h-24 mx-auto mb-6">
+                        <div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 to-indigo-400/20 dark:from-purple-600/30 dark:to-cyan-500/30 blur-2xl animate-pulse"></div>
+                        <div className="relative w-24 h-24 rounded-2xl neo-card bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-purple-600/20 dark:to-cyan-500/20 border-2 border-blue-200 dark:border-purple-500/30 flex items-center justify-center text-5xl neon-glow-purple">
+                          {agent.avatar}
+                        </div>
+                      </div>
+                      <p className="text-[18px] font-bold text-gray-800 dark:bg-gradient-to-r dark:from-cyan-400 dark:to-purple-400 dark:bg-clip-text dark:text-transparent mb-3">
+                        {agent.name}
+                      </p>
+                      <p className="text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed px-4">
+                        {agent.description || t("welcomeTitle")}
+                      </p>
+                      {effectiveSkills.length > 0 && (
+                        <div className="flex flex-wrap justify-center gap-2 mt-4">
+                          {effectiveSkills.map((s) => (
+                            <span key={s} className="inline-flex items-center gap-1.5 text-[11px] px-3 py-1.5 rounded-lg glass-effect border border-purple-500/30 text-purple-300 font-medium">
+                              <Zap className="h-3 w-3 text-cyan-400" />
+                              {s}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+                {messages.map((msg, i) => {
+                  const isStreamingEmpty = streaming && i === messages.length - 1 && msg.role === "assistant" && msg.content === "" && !msg.toolCalls?.length;
+                  if (isStreamingEmpty) return <TypingBubble key={msg.id} agentAvatar={agent.avatar} />;
+                  return (
+                    <MessageBubble key={msg.id} message={msg} agentName={agent.name} agentAvatar={agent.avatar}
+                      showTimestamp={shouldShowTimestamp(i)}
+                      onRetry={msg.role === "assistant" ? handleRetry : undefined}
+                      onFork={msg.role === "assistant" ? handleFork : undefined}
+                      onSpeak={msg.role === "assistant" ? (text) => setPendingTTS(text) : undefined} />
+                  );
+                })}
+                <div ref={bottomRef} className="h-2" />
+              </div>
+            </div>
+
+            {/* 滚动到底部按钮 - 科技感设计 */}
+            {showScrollBtn && (
+              <button
+                type="button"
+                onClick={() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); setShowScrollBtn(false); }}
+                className="absolute bottom-24 right-6 z-10 h-11 w-11 rounded-full glass-effect border border-cyan-500/50 flex items-center justify-center hover:scale-110 transition-all neon-glow shadow-xl"
+              >
+                <ChevronDown className="h-5 w-5 text-cyan-400" />
+              </button>
+            )}
+
+            {/* FIX Bug2: pass isStreaming + model override */}
+            <InputBar onSend={sendMessage} disabled={streaming} isStreaming={streaming}
+              voiceEnabled={agent.voice.enabled} voiceSpeed={agent.voice.speed}
+              agentLanguage={agent.persona.language}
+              ttsProvider={agent.voice.ttsProvider}
+              ttsModel={agent.voice.ttsModel}
+              voiceId={agent.voice.voiceId}
+              pendingReply={pendingTTS}
+              onSpeakDone={() => setPendingTTS(undefined)} installedSkills={installedSkills}
+              onNewSession={newSession} onClearMessages={() => setMessages([])}
+              currentModel={sessionModel ?? { provider: agent.model.provider, modelId: agent.model.modelId }}
+              onModelChange={(provider, modelId) => setSessionModel({ provider, modelId })} />
+          </div>
+
+          {/* ── 信息面板 - 科技感设计 ──────────────────────────────────────────── */}
+          {showInfoPanel && (
+            <div className="w-[320px] shrink-0 border-l border-purple-500/20 glass-effect flex flex-col overflow-hidden">
+              <div className="px-4 py-3 border-b border-purple-500/20 flex items-center justify-between">
+                <span className="text-[14px] font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
+                  数字人信息
+                </span>
+                <button
+                  onClick={() => setShowInfoPanel(false)}
+                  className="h-8 w-8 rounded-lg hover:bg-white/10 flex items-center justify-center transition-all hover:scale-110"
+                >
+                  <ChevronLeft className="h-4 w-4 text-cyan-400" />
+                </button>
+              </div>
+
+              <ScrollArea className="flex-1">
+                <div className="p-4 space-y-4">
+                  {/* 数字人基本信息 */}
+                  <div className="flex items-start gap-3 p-3 rounded-xl glass-effect border border-purple-500/30 neon-glow-purple">
+                    <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-600/30 to-cyan-500/30 flex items-center justify-center text-2xl shrink-0 border border-purple-500/30">
+                      {agent.avatar}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-bold text-[13px] bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
+                        {agent.name}
+                      </p>
+                      <p className="text-[11px] text-gray-400 mt-1 leading-relaxed">
+                        {agent.description || "暂无描述"}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* 当前模型 */}
+                  <div className="space-y-2">
+                    <p className="text-[11px] font-bold text-cyan-400 uppercase tracking-wide">
+                      当前模型
+                    </p>
+                    <div className="rounded-xl glass-effect border border-cyan-500/30 p-3">
+                      <p className="text-[12px] font-mono font-bold text-cyan-300">
+                        {agent.model.provider} / {agent.model.modelId}
+                      </p>
+                      <div className="flex gap-2 mt-2 flex-wrap">
+                        {agent.model.thinkingLevel !== "off" && (
+                          <span className="text-[10px] px-2 py-1 rounded-md glass-effect border border-purple-500/30 text-purple-300 font-medium">
+                            🧠 {agent.model.thinkingLevel}
+                          </span>
+                        )}
+                        <span className="text-[10px] px-2 py-1 rounded-md glass-effect border border-cyan-500/30 text-cyan-300 font-medium">
+                          temp {agent.model.temperature}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 会话用量统计 */}
+                  {sessionStats && (
+                    <div className="space-y-2">
+                      <p className="text-[11px] font-bold text-purple-400 uppercase tracking-wide">
+                        本次会话用量
+                      </p>
+                      <div className="rounded-xl glass-effect border border-purple-500/30 p-3 space-y-2">
+                        <div className="flex justify-between text-[11px] items-center">
+                          <span className="text-gray-400">输入 tokens</span>
+                          <span className="font-mono font-bold text-cyan-300">{sessionStats.tokens.input.toLocaleString()}</span>
+                        </div>
+                        <div className="flex justify-between text-[11px] items-center">
+                          <span className="text-gray-400">输出 tokens</span>
+                          <span className="font-mono font-bold text-purple-300">{sessionStats.tokens.output.toLocaleString()}</span>
+                        </div>
+                        {sessionStats.cost > 0 && (
+                          <div className="flex justify-between text-[11px] items-center pt-2 border-t border-white/10">
+                            <span className="text-gray-400">费用</span>
+                            <span className="font-mono font-bold text-green-300">${sessionStats.cost.toFixed(4)}</span>
+                          </div>
+                        )}
+                        {sessionStats.contextUsage && (
+                          <div className="space-y-1.5 pt-2 border-t border-white/10">
+                            <div className="flex justify-between text-[11px] items-center">
+                              <span className="text-gray-400">Context 用量</span>
+                              <span className={cn("font-mono font-bold", ctxPct > 80 ? "text-red-400" : "text-cyan-300")}>
+                                {ctxPct}%
+                              </span>
+                            </div>
+                            <div className="h-1.5 w-full rounded-full bg-white/10 overflow-hidden">
+                              <div className={cn("h-full rounded-full transition-all duration-500", ctxColor)} style={{ width: `${ctxPct}%` }} />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 已开启工具 */}
+                  {Object.entries(agent.tools).some(([, v]) => v) && (
+                    <div className="space-y-2">
+                      <p className="text-[11px] font-bold text-green-400 uppercase tracking-wide">
+                        已开启工具
+                      </p>
+                      <div className="flex flex-wrap gap-2">
+                        {Object.entries(agent.tools).filter(([, v]) => v).map(([k]) => (
+                          <span
+                            key={k}
+                            className="text-[11px] px-3 py-1 rounded-lg glass-effect border border-green-500/30 text-green-300 font-medium"
+                          >
+                            {k}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Skills列表 */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <p className="text-[11px] font-bold text-cyan-400 uppercase tracking-wide">
+                        Skills <span className="normal-case font-normal text-[10px] text-gray-500">（本次会话）</span>
+                      </p>
+                      {sessionSkills !== null && (
+                        <button
+                          type="button"
+                          onClick={() => setSessionSkills(null)}
+                          className="text-[10px] text-purple-400 hover:text-purple-300 font-medium transition-colors"
+                        >
+                          重置
+                        </button>
+                      )}
+                    </div>
+                    {installedSkills.length === 0 ? (
+                      <div className="text-center py-8 px-4 rounded-xl glass-effect border border-dashed border-purple-500/30">
+                        <Zap className="h-8 w-8 mx-auto mb-2 text-purple-400" />
+                        <p className="text-[11px] text-gray-400">还没有安装任何 Skill</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {installedSkills.map((skill) => {
+                          const enabled = effectiveSkills.includes(skill.name);
+                          return (
+                            <button
+                              key={skill.name}
+                              type="button"
+                              onClick={() => toggleSessionSkill(skill.name)}
+                              className={cn(
+                                "w-full flex items-center gap-2.5 rounded-xl px-3 py-2.5 text-left transition-all border",
+                                enabled
+                                  ? "glass-effect border-purple-500/50 neon-glow-purple"
+                                  : "border-white/10 hover:border-purple-500/30 hover:bg-white/5"
+                              )}
+                            >
+                              <div
+                                className={cn(
+                                  "h-5 w-5 rounded-lg shrink-0 flex items-center justify-center transition-all border",
+                                  enabled
+                                    ? "bg-gradient-to-br from-purple-600 to-cyan-500 border-purple-500/50"
+                                    : "bg-white/10 border-white/20"
+                                )}
+                              >
+                                {enabled && <Check className="h-3 w-3 text-white stroke-[3]" />}
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <p className={cn("text-[11px] font-mono font-bold truncate", enabled ? "text-cyan-400" : "text-gray-300")}>
+                                  {skill.name}
+                                </p>
+                                {skill.description && (
+                                  <p className="text-[10px] text-gray-500 truncate mt-0.5">
+                                    {skill.description}
+                                  </p>
+                                )}
+                              </div>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 人设提示词 */}
+                  {agent.systemPrompt && (
+                    <div className="space-y-2">
+                      <p className="text-[11px] font-bold text-purple-400 uppercase tracking-wide">
+                        人设提示词
+                      </p>
+                      <div className="rounded-xl glass-effect border border-purple-500/30 p-3">
+                        <p className="text-[11px] text-gray-400 leading-relaxed line-clamp-6 whitespace-pre-wrap">
+                          {agent.systemPrompt}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}