feat: 对话功能开发

src/renderer/views/chat/ChatView.vue

@@ -47,17 +47,19 @@ import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { ChatDotRound, ArrowRight, ArrowDown } from '@element-plus/icons-vue';
-import { createEventSource } from '@/http/api.js';
+import { useAppStore } from '@/stores/app.js';
+import { sseManager } from '@/http/sse.js';
 import axios from 'axios';
 
 const route = useRoute();
+const appStore = useAppStore();
 const isSending = ref(false);
 const inputText = ref('');
 const messages = ref([]);
 const messagesRef = ref(null);
 const currentSessionId = ref(null);
-const assistantMessageIds = new Set();
-let eventSource = null;
+const localAssistantMessageIds = new Set();
+let unsubscribeCallbacks = [];
 
 // 从路由参数中获取 sessionId
 const routeSessionId = computed(() => route.query.sessionId);
@@ -73,7 +75,8 @@ async function loadHistoryMessages(sessionId) {
 
     // 清空当前消息
     messages.value = [];
-    assistantMessageIds.clear();
+    localAssistantMessageIds.clear();
+    appStore.clearAssistantMessageIds();
 
     // 处理历史消息
     messagesData.forEach((item) => {
@@ -116,7 +119,8 @@ async function loadHistoryMessages(sessionId) {
 
         // 记录 assistant 消息 ID
         if (info.role === 'assistant') {
-          assistantMessageIds.add(info.id);
+          localAssistantMessageIds.add(info.id);
+          appStore.addAssistantMessageId(info.id);
         }
       }
     });
@@ -136,9 +140,9 @@ watch(
     if (newSessionId) {
       currentSessionId.value = newSessionId;
       loadHistoryMessages(newSessionId);
-      // 确保 SSE 连接已建立（如果之前断开）
-      if (!eventSource) {
-        connectSSE();
+      // 确保 SSE 连接已建立
+      if (!appStore.sseConnected) {
+        appStore.initSSE();
       }
     }
   },
@@ -163,51 +167,56 @@ function upsertAssistantBubble(msgId, text) {
   scrollToBottom();
 }
 
-function connectSSE() {
-  if (eventSource) {
-    eventSource.close();
-    eventSource = null;
-  }
-  console.log('[connectSSE] 建立 SSE 连接...');
-  eventSource = createEventSource();
+/**
+ * 注册 SSE 事件监听器
+ */
+function registerSSEListeners() {
+  // 监听消息部分更新事件
+  const unsubscribePartUpdated = sseManager.on('message.part.updated', (data) => {
+    const props = data.properties || {};
+    const part = props.part;
+    if (!part || part.type !== 'text') return;
+    if (part.sessionID !== currentSessionId.value) return;
+    // 通过 messageID 前缀区分用户/助手消息：只渲染 assistant 消息的 part
+    // assistant 消息的 messageID 会在 message.updated 事件中记录，用 localAssistantMessageIds 集合过滤
+    if (!localAssistantMessageIds.has(part.messageID) && !appStore.isAssistantMessage(part.messageID)) return;
+    upsertAssistantBubble(part.messageID, part.text || '');
+  });
 
-  eventSource.onmessage = (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      // 打印所有 SSE 事件，便于调试事件结构
-      console.log('[SSE]', data.type, JSON.stringify(data));
-      const props = data.properties || {};
+  // 监听消息更新事件
+  const unsubscribeMessageUpdated = sseManager.on('message.updated', (data) => {
+    const props = data.properties || {};
+    const info = props.info;
+    // 记录 assistant 消息的 ID，供 message.part.updated 过滤使用
+    if (info && info.role === 'assistant' && info.sessionID === currentSessionId.value) {
+      localAssistantMessageIds.add(info.id);
+      appStore.addAssistantMessageId(info.id);
+    }
+  });
 
-      if (data.type === 'message.part.updated') {
-        const part = props.part;
-        if (!part || part.type !== 'text') return;
-        if (part.sessionID !== currentSessionId.value) return;
-        // 通过 messageID 前缀区分用户/助手消息：只渲染 assistant 消息的 part
-        // assistant 消息的 messageID 会在 message.updated 事件中记录，用 assistantMessageIds 集合过滤
-        if (!assistantMessageIds.has(part.messageID)) return;
-        upsertAssistantBubble(part.messageID, part.text || '');
-      }
+  // 监听会话空闲事件
+  const unsubscribeSessionIdle = sseManager.on('session.idle', (data) => {
+    const props = data.properties || {};
+    // session.idle 表示 AI 响应已全部完成，重置发送状态
+    if (props.sessionID === currentSessionId.value) {
+      isSending.value = false;
+    }
+  });
 
-      if (data.type === 'message.updated') {
-        const info = props.info;
-        // 记录 assistant 消息的 ID，供 message.part.updated 过滤使用
-        if (info && info.role === 'assistant' && info.sessionID === currentSessionId.value) {
-          assistantMessageIds.add(info.id);
-        }
-      }
+  // 保存取消订阅函数
+  unsubscribeCallbacks.push(unsubscribePartUpdated, unsubscribeMessageUpdated, unsubscribeSessionIdle);
+}
 
-      if (data.type === 'session.idle') {
-        // session.idle 表示 AI 响应已全部完成，重置发送状态
-        if (props.sessionID === currentSessionId.value) {
-          isSending.value = false;
-        }
-      }
-    } catch (_) {}
-  };
-
-  eventSource.onerror = () => {
-    isSending.value = false;
-  };
+/**
+ * 注销 SSE 事件监听器
+ */
+function unregisterSSEListeners() {
+  unsubscribeCallbacks.forEach((unsubscribe) => {
+    if (typeof unsubscribe === 'function') {
+      unsubscribe();
+    }
+  });
+  unsubscribeCallbacks = [];
 }
 
 async function send() {
@@ -240,12 +249,17 @@ async function send() {
 }
 
 onMounted(() => {
-  // 组件挂载时建立 SSE 连接
-  connectSSE();
+  // 组件挂载时注册 SSE 监听器
+  registerSSEListeners();
+  // 确保全局 SSE 连接已建立
+  if (!appStore.sseConnected) {
+    appStore.initSSE();
+  }
 });
 
 onUnmounted(() => {
-  if (eventSource) eventSource.close();
+  // 组件卸载时注销 SSE 监听器
+  unregisterSSEListeners();
 });
 </script>