diff --git a/src/App.jsx b/src/App.jsx index 5b6d6d9..105cc75 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,7 +3,7 @@ import AppRouter from './router/router'; import { checkAuthThunk } from './store/auth/auth.thunk'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { initWebSocket, closeWebSocket } from './services/websocket'; +import { initWebSocket, closeWebSocket, initChatWebSocket, closeChatWebSocket } from './services/websocket'; import { setWebSocketConnected } from './store/notificationCenter/notificationCenter.slice'; import NavigationGuard from './components/NavigationGuard'; @@ -22,7 +22,7 @@ function App() { // 管理WebSocket连接 useEffect(() => { console.log(user, isConnected); - + console.log('app 管理WebSocket连接'); // 如果用户已认证但WebSocket未连接，则初始化连接 if (user && !isConnected) { initWebSocket() @@ -33,12 +33,15 @@ function App() { .catch((error) => { console.error('Failed to initialize WebSocket connection:', error); }); + initChatWebSocket(); } // 组件卸载或用户登出时关闭WebSocket连接 return () => { if (isConnected) { + console.log('app 卸载或用户登出时关闭WebSocket连接'); closeWebSocket(); + closeChatWebSocket(); dispatch(setWebSocketConnected(false)); } }; diff --git a/src/components/SafeMarkdown.jsx b/src/components/SafeMarkdown.jsx index 569b405..a017e0f 100644 --- a/src/components/SafeMarkdown.jsx +++ b/src/components/SafeMarkdown.jsx @@ -112,7 +112,7 @@ const SafeMarkdown = ({ content, isStreaming = false }) => { if (!content) return null; // 实际显示的内容 - 当流式传输时使用动画内容，否则使用完整内容 - const displayContent = isStreaming ? animatedContent : content; + const displayContent = content; return ( diff --git a/src/pages/Chat/ChatWindow.jsx b/src/pages/Chat/ChatWindow.jsx index 7168f26..ae48c0a 100644 --- a/src/pages/Chat/ChatWindow.jsx +++ b/src/pages/Chat/ChatWindow.jsx @@ -1,13 +1,12 @@ import React, { useState, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { resetMessages, resetSendMessageStatus, addMessage } from '../../store/chat/chat.slice'; +import { resetSendMessageStatus, addMessage, updateMessage } from '../../store/chat/chat.slice'; import { showNotification } from '../../store/notification.slice'; import { createChatRecord, fetchAvailableDatasets, fetchConversationDetail } from '../../store/chat/chat.thunks'; -import { fetchKnowledgeBases } from '../../store/knowledgeBase/knowledgeBase.thunks'; import SvgIcon from '../../components/SvgIcon'; import SafeMarkdown from '../../components/SafeMarkdown'; import ResourceList from '../../components/ResourceList'; -import { get } from '../../services/api'; +import { sendChatMessageViaWebSocket, processChatWebSocketMessage } from '../../services/websocket'; export default function ChatWindow({ chatId, knowledgeBaseId }) { const dispatch = useDispatch(); @@ -22,7 +21,6 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { const currentChat = chatList.find((chat) => chat.conversation_id === currentChatId); const messages = currentChat?.messages || []; const messageStatus = useSelector((state) => state.chat.list.messageStatus); - const messageError = useSelector((state) => state.chat.list.messageError); const { status: sendStatus, error: sendError } = useSelector((state) => state.chat.sendMessage); // 获取消息资源 @@ -31,7 +29,6 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { // 使用新的Redux状态结构 const knowledgeBases = useSelector((state) => state.knowledgeBase.knowledgeBases || []); const knowledgeBase = knowledgeBases.find((kb) => kb.id === knowledgeBaseId); - const isLoadingKnowledgeBases = useSelector((state) => state.knowledgeBase.loading); // 获取可用数据集列表 const availableDatasets = useSelector((state) => state.chat.availableDatasets.items || []); @@ -65,14 +62,12 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { // 优先使用conversation中的知识库列表 if (conversation && conversation.datasets && conversation.datasets.length > 0) { const datasetIds = conversation.datasets.map((ds) => ds.id); - console.log('从会话中获取知识库列表:', datasetIds); setSelectedKnowledgeBaseIds(datasetIds); } // 其次使用URL中传入的知识库ID else if (knowledgeBaseId) { // 可能是单个ID或以逗号分隔的多个ID const ids = knowledgeBaseId.split(',').map((id) => id.trim()); - console.log('从URL参数中获取知识库列表:', ids); setSelectedKnowledgeBaseIds(ids); } }, [conversation, knowledgeBaseId]); @@ -83,7 +78,6 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { // 如果已经加载过这个chatId的详情，不再重复加载 if (hasLoadedDetailRef.current[chatId]) { - console.log('跳过已加载过的会话详情:', chatId); return; } @@ -92,18 +86,15 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { // 如果是新创建的会话且已经有会话数据，则跳过详情获取 if (isNewlyCreatedChat && conversation && conversation.conversation_id === chatId) { - console.log('跳过新创建会话的详情获取:', chatId); hasLoadedDetailRef.current[chatId] = true; return; } - console.log('获取会话详情:', chatId); setLoading(true); dispatch(fetchConversationDetail(chatId)) .unwrap() .then((response) => { - console.log('获取会话详情成功:', response); // 标记为已加载 hasLoadedDetailRef.current[chatId] = true; }) @@ -200,21 +191,17 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { if (selectedKnowledgeBaseIds.length > 0) { // 使用已保存的知识库列表 dataset_id_list = selectedKnowledgeBaseIds.map((id) => id.replace(/-/g, '')); - console.log('使用组件状态中的知识库列表:', dataset_id_list); } else if (conversation && conversation.datasets && conversation.datasets.length > 0) { // 如果已有会话，使用会话中的知识库 dataset_id_list = conversation.datasets.map((ds) => ds.id.replace(/-/g, '')); - console.log('使用会话中的知识库列表:', dataset_id_list); } else if (knowledgeBaseId) { // 如果是新会话，使用当前选择的知识库 // 可能是单个ID或以逗号分隔的多个ID const ids = knowledgeBaseId.split(',').map((id) => id.trim().replace(/-/g, '')); dataset_id_list = ids; - console.log('使用URL参数中的知识库:', dataset_id_list); } else if (availableDatasets.length > 0) { // 如果都没有，尝试使用可用知识库列表中的第一个 dataset_id_list = [availableDatasets[0].id.replace(/-/g, '')]; - console.log('使用可用知识库列表中的第一个:', dataset_id_list); } if (dataset_id_list.length === 0) { @@ -227,35 +214,124 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) { return; } - console.log('发送消息参数:', { - dataset_id_list, + const requestBody = { + dataset_id_list: dataset_id_list, question: inputMessage, conversation_id: chatId, - }); + }; - // 发送消息到服务器 + console.log('发送消息参数:', requestBody); + + // 同时通过WebSocket发送消息（测试） + // 添加用户消息 + const userMessageId = Date.now().toString(); dispatch( - createChatRecord({ - dataset_id_list: dataset_id_list, - question: inputMessage, - conversation_id: chatId, + addMessage({ + id: userMessageId, + role: 'user', + content: inputMessage, + created_at: new Date().toISOString(), }) - ) - .unwrap() - .then((response) => { - // 成功发送后，可以执行任何需要的操作 - console.log('消息发送成功:', response); + ); + + // 创建WebSocket测试的AI回复消息ID - 必须先初始化 + const wsMessageId = `ws-${Date.now()}`; + let wsMessageContent = ''; + + // 添加一个空白的临时消息用于WebSocket流式回复 + dispatch( + addMessage({ + id: wsMessageId, + role: 'assistant', + content: '', + created_at: new Date().toISOString(), + is_streaming: true, + is_websocket: true, }) - .catch((error) => { - // 发送失败，显示错误信息 - console.error('消息发送失败:', error); + ); + + sendChatMessageViaWebSocket(requestBody, (data) => { + try { + // 根据消息类型处理不同的响应 + + // 处理开始流式传输的消息 + if (data.message === '开始流式传输') { + console.log('WebSocket开始流式传输'); + // 消息已在上面创建，这里无需重复创建 + } + + // 处理部分内容 + if (data.message === 'partial') { + const newText = data.data.content || ''; + wsMessageContent += newText; + + // 更新消息内容 - 使用完全替换而不是追加，确保React检测到变化 + dispatch( + updateMessage({ + id: wsMessageId, + content: wsMessageContent, + is_streaming: true, + updated_at: new Date().toISOString(), // 添加时间戳强制更新 + }) + ); + + // 触发重新渲染 + setTimeout(() => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, 50); + } + + // 处理流结束 + if (data.message === '完成') { + console.log('WebSocket流式传输结束，最终内容:', data.data.content); + + // 使用完整内容替换消息 + dispatch( + updateMessage({ + id: wsMessageId, + content: data.data.content || wsMessageContent, + is_streaming: false, + updated_at: new Date().toISOString(), // 添加时间戳强制更新 + }) + ); + + // 触发重新渲染和滚动 + setTimeout(() => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, 50); + } + + // 处理错误 + if (data.code !== 200 && data.code !== 201) { + console.error('WebSocket错误:', data.message); + dispatch( + showNotification({ + message: `WebSocket错误: ${data.message}`, + type: 'warning', + }) + ); + + // 更新消息显示错误 + dispatch( + updateMessage({ + id: wsMessageId, + content: `Error: ${data.message}`, + is_streaming: false, + }) + ); + } + } catch (error) { + console.error('处理WebSocket响应失败:', error); + // 更新消息显示错误 dispatch( - showNotification({ - message: `发送失败: ${error}`, - type: 'danger', + updateMessage({ + id: wsMessageId, + content: `处理WebSocket响应失败: ${error.message}`, + is_streaming: false, }) ); - }); + } + }); // 清空输入框 setInputMessage(''); diff --git a/src/services/api.js b/src/services/api.js index 6f190de..77f81d3 100644 --- a/src/services/api.js +++ b/src/services/api.js @@ -100,7 +100,7 @@ const get = async (url, params = {}) => { console.log(`[MOCK MODE] GET ${url}`); return await mockGet(url, params); } - + const res = await api.get(url, { ...params }); return res.data; } catch (error) { diff --git a/src/services/websocket.js b/src/services/websocket.js index 169afc0..21c2a0f 100644 --- a/src/services/websocket.js +++ b/src/services/websocket.js @@ -12,8 +12,10 @@ const secretKey = import.meta.env.VITE_SECRETKEY; const API_URL = import.meta.env.VITE_API_URL || 'http://81.69.223.133:8008'; // 将 HTTP URL 转换为 WebSocket URL const WS_BASE_URL = API_URL.replace(/^http/, 'ws').replace(/\/api\/?$/, ''); +const WS_CHAT_URL = 'ws://81.69.223.133:8008/ws/chat/stream/'; let socket = null; +let chatSocket = null; let reconnectTimer = null; let pingInterval = null; let reconnectAttempts = 0; // 添加重连尝试计数器 @@ -23,6 +25,9 @@ const PING_INTERVAL = 30000; // 30秒发送一次ping const MAX_RECONNECT_ATTEMPTS = 3; // 最大重连尝试次数 const MAX_GLOBAL_RECONNECT_ATTEMPTS = 3; // 单个会话中允许的总重连次数 +// 添加的聊天消息回调处理 +let chatMessageCallback = null; + /** * 初始化WebSocket连接 * @returns {Promise} WebSocket连接实例 @@ -366,3 +371,182 @@ const processNotification = (data) => { metadata: notificationData.metadata || {}, }; }; + +/** + * 初始化聊天WebSocket连接 + * @returns {Promise} WebSocket连接实例 + */ +export const initChatWebSocket = () => { + return new Promise((resolve, reject) => { + // 如果已经有一个连接，先关闭它 + if (chatSocket && chatSocket.readyState !== WebSocket.CLOSED) { + console.log('关闭已有Chat WebSocket连接'); + chatSocket.close(1000, 'Normal closure, reconnecting'); + } + + try { + // 从sessionStorage获取token + const encryptedToken = sessionStorage.getItem('token'); + if (!encryptedToken) { + console.error('No token found, cannot connect to chat service'); + reject(new Error('No token found')); + return; + } + + let token = ''; + try { + token = CryptoJS.AES.decrypt(encryptedToken, secretKey).toString(CryptoJS.enc.Utf8); + if (!token) { + throw new Error('Token decryption resulted in empty string'); + } + } catch (e) { + console.error('Failed to decrypt token:', e); + reject(new Error('Invalid token')); + return; + } + + // 构建WebSocket URL + const wsUrl = `${WS_CHAT_URL}?token=${token}`; + console.log('正在连接Chat WebSocket...', wsUrl.substring(0, wsUrl.indexOf('?'))); + + // 创建WebSocket连接 + chatSocket = new WebSocket(wsUrl); + + // 设置超时 + const connectionTimeout = setTimeout(() => { + if (chatSocket.readyState !== WebSocket.OPEN) { + console.error('Chat WebSocket连接超时'); + chatSocket.close(); + reject(new Error('Connection timeout')); + } + }, 10000); // 10秒超时 + + // 连接建立时的处理 + chatSocket.onopen = () => { + console.log('Chat WebSocket 连接成功!'); + clearTimeout(connectionTimeout); + resolve(chatSocket); + }; + + // 接收消息的处理 + chatSocket.onmessage = (event) => { + try { + // 解析消息并传递给回调 + const message = JSON.parse(event.data); + + if (chatMessageCallback) { + chatMessageCallback(message); + } + } catch (error) { + console.error('处理Chat WebSocket消息失败:', error, 'Raw message:', event.data); + } + }; + + // 错误处理 + chatSocket.onerror = (error) => { + console.error('Chat WebSocket连接错误:', error); + clearTimeout(connectionTimeout); + reject(error); + }; + + // 连接关闭时的处理 + chatSocket.onclose = (event) => { + console.log( + `Chat WebSocket连接关闭: 代码=${event.code} 原因="${event.reason || '未知'}" 是否干净=${ + event.wasClean + }` + ); + clearTimeout(connectionTimeout); + }; + } catch (error) { + console.error('Error initializing Chat WebSocket:', error); + reject(error); + } + }); +}; + +/** + * 通过WebSocket发送聊天消息 + * @param {Object} message 聊天消息 + * @param {Function} callback 接收消息的回调函数 + */ +export const sendChatMessageViaWebSocket = (message, callback) => { + // 保存回调函数 + chatMessageCallback = callback; + + // 确保WebSocket连接已建立 + if (!chatSocket || chatSocket.readyState !== WebSocket.OPEN) { + console.log('WebSocket未连接，正在初始化连接...'); + return initChatWebSocket() + .then(() => { + console.log('WebSocket连接已建立，发送消息:', message); + chatSocket.send(JSON.stringify(message)); + }) + .catch((error) => { + console.error('Chat WebSocket连接失败:', error); + // 如果连接失败，调用回调传递错误 + if (callback) { + callback({ + code: 500, + message: `WebSocket连接失败: ${error.message}`, + data: { + content: `连接失败: ${error.message}`, + is_end: true, + }, + }); + } + }); + } else { + // 如果连接已建立，直接发送消息 + console.log('WebSocket已连接，直接发送消息:', message); + chatSocket.send(JSON.stringify(message)); + } +}; + +/** + * 处理聊天WebSocket消息 + * 流式内容结构类似于: + * { + * "code": 200, + * "message": "开始流式传输" | "partial" | "完成", + * "data": { + * "content": "消息内容", + * "is_end": true/false + * } + * } + * @param {string} data 原始消息数据 + * @param {Function} callback 处理消息的回调函数 + */ +export const processChatWebSocketMessage = (data, callback) => { + try { + const message = JSON.parse(data); + + // 调用回调处理消息 + if (callback) { + callback(message); + } + + return message; + } catch (error) { + console.error('解析Chat WebSocket消息失败:', error); + } +}; + +/** + * 关闭聊天WebSocket连接 + */ +export const closeChatWebSocket = () => { + // 清除回调 + chatMessageCallback = null; + + // 关闭连接 + if (chatSocket) { + if (chatSocket.readyState === WebSocket.OPEN || chatSocket.readyState === WebSocket.CONNECTING) { + console.log('手动关闭Chat WebSocket连接'); + chatSocket.close(1000, '用户主动关闭'); + } + chatSocket = null; + } + + console.log('Chat WebSocket连接已关闭'); +}; diff --git a/src/store/chat/chat.slice.js b/src/store/chat/chat.slice.js index 793a02c..6d03350 100644 --- a/src/store/chat/chat.slice.js +++ b/src/store/chat/chat.slice.js @@ -148,7 +148,12 @@ const chatSlice = createSlice({ const messageIndex = state.list.items[chatIndex].messages.findIndex((msg) => msg.id === id); if (messageIndex !== -1) { - // 更新现有消息 + // 更新现有消息 - 确保完全替换内容以触发React更新 + if (updates.content !== undefined) { + state.list.items[chatIndex].messages[messageIndex].content = updates.content; + } + + // 更新其他字段 state.list.items[chatIndex].messages[messageIndex] = { ...state.list.items[chatIndex].messages[messageIndex], ...updates, @@ -158,6 +163,15 @@ const chatSlice = createSlice({ if (updates.is_streaming === false) { state.sendMessage.status = 'succeeded'; } + + // 如果是最后一条消息且是助手消息，更新会话的last_message + if (state.list.items[chatIndex].messages[messageIndex].role === 'assistant') { + state.list.items[chatIndex].last_message = + updates.content || state.list.items[chatIndex].messages[messageIndex].content; + } + } else { + // 如果找不到消息，尝试创建一个新消息 + console.warn(`消息 ID ${id} 不存在，无法更新`); } } }