feat: 优化对话历史功能

frontend/src/App.tsx

@@ -4,6 +4,7 @@
 // ============================================================
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 import { useVisionSession } from "./hooks/useVisionSession";
 import { useSessionList } from "./hooks/useSessionList";
 import { VideoPreview } from "./components/VideoPreview";
@@ -53,12 +54,13 @@ function AppContent() {
   const {
     sessions,
     activeSessionId,
+    isLoading: sessionsLoading,
     createSession,
     deleteSession,
     renameSession,
-    persistSession,
     selectSession,
-  } = useSessionList();
+    loadSessions,
+  } = useSessionList(accessToken);
 
   // ---- 视觉会话 ----
   const {
@@ -87,7 +89,7 @@ function AppContent() {
     toggleCamera,
     toggleMic,
     sendTextMessage,
-  } = useVisionSession(accessToken);
+  } = useVisionSession(accessToken, activeSessionId);
 
   const isConnected = connectionStatus === "connected";
 
@@ -118,58 +120,57 @@ function AppContent() {
 
   const { t: tr } = useMemo(() => ({ t: (key: string) => t(key, parseLocale(config.language)) }), [config.language]);
 
-  // ---- 初始化：如果没有会话，创建一个 ----
+  // ---- 初始化：加载完成后如果没有会话，创建一个 ----
   const initializedRef = useRef(false);
   useEffect(() => {
-    if (!initializedRef.current) {
+    if (!sessionsLoading && !initializedRef.current) {
       initializedRef.current = true;
       if (sessions.length === 0) {
         createSession();
       }
     }
-  }, [sessions.length, createSession]);
-
-  // ---- 自动保存：messages 变化时持久化到当前会话 ----
-  const messagesRef = useRef(messages);
-  useEffect(() => { messagesRef.current = messages; }, [messages]);
+  }, [sessionsLoading, sessions.length, createSession]);
 
+  // ---- 侧边栏打开时刷新会话列表 ----
   useEffect(() => {
-    if (activeSessionId && messages.length > 0) {
-      persistSession(activeSessionId, messages);
+    if (sidebarOpen) {
+      loadSessions();
     }
-  }, [messages, activeSessionId, persistSession]);
+  }, [sidebarOpen, loadSessions]);
 
   // ---- 侧边栏操作 ----
-  const handleNewSession = useCallback(() => {
-    createSession();
-    setMessages([]);
-    // 如果已连接，断开
+  const handleNewSession = useCallback(async () => {
+    // 如果已连接，先断开
     if (connectionStatus === "connected") {
-      stopSession();
+      await stopSession();
     }
+    // 通过后端 API 创建会话
+    await createSession();
+    setMessages([]);
     setSidebarOpen(false);
   }, [createSession, setMessages, connectionStatus, stopSession]);
 
-  const handleSelectSession = useCallback((id: string) => {
-    // 保存当前会话
-    if (activeSessionId && messagesRef.current.length > 0) {
-      persistSession(activeSessionId, messagesRef.current);
-    }
-    // 如果已连接，断开
+  const handleSelectSession = useCallback(async (id: string) => {
+    // 如果已连接，先断开
     if (connectionStatus === "connected") {
-      stopSession();
+      await stopSession();
     }
-    // 加载目标会话
-    const loaded = selectSession(id);
+    // 从后端 API 加载目标会话的消息
+    const loaded = await selectSession(id);
     setMessages(loaded);
-  }, [activeSessionId, persistSession, connectionStatus, stopSession, selectSession, setMessages]);
+    setSidebarOpen(false);
+  }, [connectionStatus, stopSession, selectSession, setMessages]);
 
-  const handleDeleteSession = useCallback((id: string) => {
-    deleteSession(id);
+  const handleDeleteSession = useCallback(async (id: string) => {
+    await deleteSession(id);
     if (id === activeSessionId) {
+      // 断开连接并清空消息
+      if (connectionStatus === "connected") {
+        await stopSession();
+      }
       setMessages([]);
     }
-  }, [deleteSession, activeSessionId, setMessages]);
+  }, [deleteSession, activeSessionId, setMessages, connectionStatus, stopSession]);
 
   // ---- 识别画面 ----
   const handleRecognize = useCallback(() => {
@@ -194,6 +195,7 @@ function AppContent() {
     // 插入系统提示消息
     const scenarioName = sc ? `${sc.icon} ${tr(sc.nameKey)}` : scenarioId;
     setMessages(prev => [...prev, {
+      id: uuidv4(),
       role: "system",
       content: tr("chat.scenarioSwitched").replace("{name}", scenarioName),
       timestamp: Date.now(),