susieshi/knowledgebase_law
1
0
Fork 0
mirror of https://github.com/Funkoala14/knowledgebase_law.git synced 2025-06-08 02:58:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[dev]resources & chat

Browse Source
This commit is contained in:
susie-laptop 2025-04-27 19:52:26 -04:00
parent f2a6029076
commit 89d42b9e10
7 changed files with 498 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -11,7 +11,7 @@
"@popperjs/core": "^2.11.8",
"@reduxjs/toolkit": "^2.6.0",
"axios": "^1.8.1",
"bootstrap": "^5.3.3",
"bootstrap": "^5.3.5",
"crypto-js": "^4.2.0",
"lodash": "^4.17.21",
"react": "^19.0.0",
@ -1656,9 +1656,9 @@
}
},
"node_modules/bootstrap": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.5.tgz",
"integrity": "sha512-ct1CHKtiobRimyGzmsSldEtM03E8fcEX4Tb3dGXz1V8faRwM50+vfHwTzOxB3IlKO7m+9vTH3s/3C6T2EAPeTA==",
"funding": [
{
"type": "github",

2
package.json
View File

@ -13,7 +13,7 @@
"@popperjs/core": "^2.11.8",
"@reduxjs/toolkit": "^2.6.0",
"axios": "^1.8.1",
"bootstrap": "^5.3.3",
"bootstrap": "^5.3.5",
"crypto-js": "^4.2.0",
"lodash": "^4.17.21",
"react": "^19.0.0",

4
src/App.jsx
View File

@ -3,8 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import AppRouter from './router/router';
import { checkAuthThunk } from './store/auth/auth.thunk';
import { login } from './store/auth/auth.slice';
import { initWebSocket, closeWebSocket } from './services/websocket';
import { initWebSocket, closeWebSocket, initChatWebSocket } from './services/websocket';
import { setWebSocketConnected } from './store/notificationCenter/notificationCenter.slice';
function App() {
@ -24,6 +23,7 @@ function App() {
if (!isConnected) {
// 初始化WebSocket连接
initWebSocket(dispatch);
initChatWebSocket()
}
} else {
if (isConnected) {

154
src/pages/Chat/ChatWindow.jsx
View File

@ -1,11 +1,12 @@
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { 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 { createChatRecord, fetchAvailableDatasets, fetchConversationDetail, getChatResources } from '../../store/chat/chat.thunks';
import SvgIcon from '../../components/SvgIcon';
import SafeMarkdown from '../../components/SafeMarkdown';
import ResourceList from '../../components/ResourceList';
import { sendChatMessageViaWebSocket } from '../../services/websocket';
export default function ChatWindow({ chatId, knowledgeBaseId }) {
const dispatch = useDispatch();
@ -20,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);
// 获取消息资源
@ -29,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 || []);
@ -63,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]);
@ -81,7 +78,6 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) {
// 如果已经加载过这个chatId的详情，不再重复加载
if (hasLoadedDetailRef.current[chatId]) {
console.log('跳过已加载过的会话详情:', chatId);
return;
}
@ -90,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;
})
@ -198,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) {
@ -225,34 +214,124 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) {
return;
}
console.log('发送消息参数:', {
dataset_id_list,
question: inputMessage,
conversation_id: chatId,
});
// 发送消息到服务器
dispatch(
createChatRecord({
const requestBody = {
dataset_id_list: dataset_id_list,
question: inputMessage,
conversation_id: chatId,
})
)
.unwrap()
.then((response) => {
// 成功发送后，可以执行任何需要的操作
console.log('消息发送成功:', response);
})
.catch((error) => {
// 发送失败，显示错误信息
console.error('消息发送失败:', error);
};
console.log('发送消息参数:', requestBody);
// 创建WebSocket测试的AI回复消息ID - 必须先初始化
const wsMessageId = `ws-${Date.now()}`;
let wsMessageContent = '';
// 添加用户消息
const userMessageId = `user-${Date.now()}`;
dispatch(
showNotification({
message: `发送失败: ${error}`,
type: 'danger',
addMessage({
id: userMessageId,
role: 'user',
content: inputMessage,
created_at: new Date().toISOString(),
})
);
// 添加一个空白的临时消息用于WebSocket流式回复
dispatch(
addMessage({
id: wsMessageId,
role: 'assistant',
content: '',
created_at: new Date().toISOString(),
is_streaming: true,
is_websocket: true,
})
);
// 获取聊天资源 - 在用户消息发送后立即请求资源
dispatch(
getChatResources({
dataset_id_list,
question: inputMessage,
messageId: wsMessageId, // 将资源关联到助手消息
})
);
sendChatMessageViaWebSocket(requestBody, (data) => {
try {
// 根据消息类型处理不同的响应
// 处理部分内容
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(
updateMessage({
id: wsMessageId,
content: `处理WebSocket响应失败: ${error.message}`,
is_streaming: false,
})
);
}
});
// 清空输入框
@ -336,10 +415,11 @@ export default function ChatWindow({ chatId, knowledgeBaseId }) {
</span>
)}
{/* 只在AI回复消息下方显示资源列表 */}
{/* 只在AI回复消息下方显示资源列表，仅当有内容时显示 */}
{message.role === 'assistant' &&
!message.is_streaming &&
resources.messageId === message.id &&
resources.status === 'succeeded' &&
resources.items.length > 0 && (
<ResourceList resources={resources.items} />
)}

355
src/services/websocket.js
View File

@ -12,14 +12,21 @@ 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; // 添加重连尝试计数器
let globalReconnectAttempts = 0; // 添加全局重连计数器
const RECONNECT_DELAY = 5000; // 5秒后尝试重连
const PING_INTERVAL = 30000; // 30秒发送一次ping
const MAX_RECONNECT_ATTEMPTS = 3; // 最大重连尝试次数
const MAX_GLOBAL_RECONNECT_ATTEMPTS = 3; // 单个会话中允许的总重连次数
// 添加的聊天消息回调处理
let chatMessageCallback = null;
/**
* 初始化WebSocket连接
@ -27,36 +34,63 @@ const MAX_RECONNECT_ATTEMPTS = 3; // 最大重连尝试次数
*/
export const initWebSocket = () => {
return new Promise((resolve, reject) => {
// 检查全局重连次数
if (globalReconnectAttempts >= MAX_GLOBAL_RECONNECT_ATTEMPTS) {
console.warn(`已达到全局最大重连次数(${MAX_GLOBAL_RECONNECT_ATTEMPTS})，不再尝试重连`);
reject(new Error('Maximum global reconnection attempts reached'));
return;
}
// 如果已经有一个连接，先关闭它
if (socket && socket.readyState !== WebSocket.CLOSED) {
socket.close();
console.log('关闭已有WebSocket连接');
socket.close(1000, 'Normal closure, reconnecting');
}
// 清除之前的定时器
if (reconnectTimer) clearTimeout(reconnectTimer);
if (pingInterval) clearInterval(pingInterval);
if (reconnectTimer) {
clearTimeout(reconnectTimer);
reconnectTimer = null;
}
if (pingInterval) {
clearInterval(pingInterval);
pingInterval = null;
}
try {
// 从sessionStorage获取token
const encryptedToken = sessionStorage.getItem('token');
let token = '';
if (!encryptedToken) {
console.error('No token found, cannot connect to notification service');
store.dispatch(setWebSocketConnected(false));
reject(new Error('No token found'));
return;
}
if (encryptedToken) {
let token = '';
try {
token = CryptoJS.AES.decrypt(encryptedToken, secretKey).toString(CryptoJS.enc.Utf8);
if (!token) {
throw new Error('Token decryption resulted in empty string');
}
const wsUrl = `${WS_BASE_URL}/ws/notifications/?token=${token}`;
console.log('WebSocket URL:', wsUrl);
} catch (e) {
console.error('Failed to decrypt token:', e);
store.dispatch(setWebSocketConnected(false));
reject(new Error('Invalid token'));
return;
}
const wsUrl = `${WS_BASE_URL}/ws/notifications?token=${token}`;
console.log('正在连接WebSocket...', wsUrl.substring(0, wsUrl.indexOf('?')));
socket = new WebSocket(wsUrl);
// 连接建立时的处理
socket.onopen = () => {
console.log('WebSocket connection established');
reconnectAttempts = 0; // 连接成功后重置重连计数器
console.log('WebSocket 连接成功!');
reconnectAttempts = 0; // 连接成功后重置当前重连计数器
// 不重置全局重连计数器，确保总重连次数限制
// 更新Redux中的连接状态
store.dispatch(setWebSocketConnected(true));
@ -65,8 +99,9 @@ export const initWebSocket = () => {
subscribeToNotifications();
// 设置定时发送ping消息
if (pingInterval) clearInterval(pingInterval);
pingInterval = setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
if (socket && socket.readyState === WebSocket.OPEN) {
sendPing();
}
}, PING_INTERVAL);
@ -80,47 +115,68 @@ export const initWebSocket = () => {
const data = JSON.parse(event.data);
handleWebSocketMessage(data);
} catch (error) {
console.error('Error parsing WebSocket message:', error);
console.error('解析WebSocket消息失败:', error, 'Raw message:', event.data);
}
};
// 错误处理
socket.onerror = (error) => {
console.error('WebSocket error:', error);
// 更新Redux中的连接状态
store.dispatch(setWebSocketConnected(false));
reject(error);
console.error('WebSocket连接错误:', error);
// 不立即更新Redux状态，让onclose处理
};
// 连接关闭时的处理
socket.onclose = (event) => {
console.log(`WebSocket connection closed: ${event.code} ${event.reason}`);
console.log(
`WebSocket连接关闭: 代码=${event.code} 原因="${event.reason || '未知'}" 是否干净=${event.wasClean}`
);
// 清除ping定时器
if (pingInterval) {
clearInterval(pingInterval);
pingInterval = null;
}
// 更新Redux中的连接状态
store.dispatch(setWebSocketConnected(false));
// 清除ping定时器
if (pingInterval) clearInterval(pingInterval);
// 如果不是正常关闭，尝试重连
if (event.code !== 1000) {
if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
if (!event.wasClean && event.code !== 1000 && event.code !== 1001) {
// 检查是否已达到最大重连次数
if (
reconnectAttempts < MAX_RECONNECT_ATTEMPTS &&
globalReconnectAttempts < MAX_GLOBAL_RECONNECT_ATTEMPTS
) {
reconnectAttempts++;
console.log(`WebSocket reconnection attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS}`);
globalReconnectAttempts++;
const delay = Math.min(RECONNECT_DELAY * reconnectAttempts, 15000); // 指数退避，但最大15秒
console.log(
`WebSocket将在${
delay / 1000
}秒后尝试重连 (第${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS}次, 总计${globalReconnectAttempts}/${MAX_GLOBAL_RECONNECT_ATTEMPTS}次)`
);
reconnectTimer = setTimeout(() => {
console.log('Attempting to reconnect WebSocket...');
initWebSocket().catch((err) => {
console.error('Failed to reconnect WebSocket:', err);
console.log('正在尝试重新连接WebSocket...');
initWebSocket()
.then(() => {
console.log('WebSocket重连成功');
})
.catch((err) => {
console.error('WebSocket重连失败:', err);
// 重连失败时更新Redux中的连接状态
store.dispatch(setWebSocketConnected(false));
});
}, RECONNECT_DELAY);
}, delay);
} else {
console.log('Maximum reconnection attempts reached. Giving up.');
const msg = `已达到最大重连次数 (当前${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS}, 总计${globalReconnectAttempts}/${MAX_GLOBAL_RECONNECT_ATTEMPTS})`;
console.warn(msg);
// 达到最大重连次数时更新Redux中的连接状态
store.dispatch(setWebSocketConnected(false));
}
} else {
console.log('正常关闭，不会尝试重连');
}
};
} catch (error) {
@ -150,10 +206,16 @@ export const subscribeToNotifications = () => {
*/
export const sendPing = () => {
if (socket && socket.readyState === WebSocket.OPEN) {
try {
const pingMessage = {
type: 'ping',
timestamp: new Date().toISOString(),
};
socket.send(JSON.stringify(pingMessage));
console.debug('已发送 ping 消息');
} catch (error) {
console.error('发送 ping 消息失败:', error);
}
}
};
@ -176,53 +238,91 @@ export const acknowledgeNotification = (notificationId) => {
/**
* 关闭WebSocket连接
* @param {boolean} [permanent=false] 是否永久关闭不再重连
*/
export const closeWebSocket = () => {
if (socket) {
socket.close(1000, 'Normal closure');
socket = null;
}
export const closeWebSocket = (permanent = false) => {
// 停止重连尝试
if (reconnectTimer) {
clearTimeout(reconnectTimer);
reconnectTimer = null;
}
// 停止ping
if (pingInterval) {
clearInterval(pingInterval);
pingInterval = null;
}
// 如果是永久关闭，重置重连计数器
if (permanent) {
globalReconnectAttempts = MAX_GLOBAL_RECONNECT_ATTEMPTS; // 设置为最大值阻止重连
}
// 关闭连接
if (socket) {
if (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING) {
console.log(`手动关闭WebSocket连接${permanent ? '(永久)' : ''}`);
socket.close(1000, '用户主动关闭');
}
socket = null;
}
// 更新Redux中的连接状态
store.dispatch(setWebSocketConnected(false));
};
/**
* 重置WebSocket连接状态，允许重新尝试连接
*/
export const resetWebSocketState = () => {
closeWebSocket(true); // 先关闭当前连接
// 重置所有计数器和状态
reconnectAttempts = 0;
globalReconnectAttempts = 0;
console.log('WebSocket连接状态已重置，可以重新尝试连接');
};
/**
* 处理接收到的WebSocket消息
* @param {Object} data 解析后的消息数据
*/
const handleWebSocketMessage = (data) => {
if (!data || typeof data !== 'object') {
console.warn('收到无效的WebSocket消息:', data);
return;
}
try {
switch (data.type) {
case 'connection_established':
console.log(`Connection established for user: ${data.user_id}`);
console.log(`WebSocket连接已建立，用户ID: ${data.user_id}`);
break;
case 'notification':
console.log('Received notification:', data);
if (!data.data) {
console.warn('收到无效的通知数据:', data);
return;
}
console.log('收到新通知:', data.data.title);
// 将通知添加到Redux store
store.dispatch(addNotification(processNotification(data)));
break;
case 'pong':
console.log(`Received pong at ${data.timestamp}`);
console.debug(`收到pong响应，时间戳: ${data.timestamp}`);
break;
case 'error':
console.error(`WebSocket error: ${data.code} - ${data.message}`);
console.error(`WebSocket错误: ${data.code} - ${data.message}`);
break;
default:
console.log('Received unknown message type:', data);
console.log('收到未知类型的消息:', data.type, data);
}
} catch (error) {
console.error('处理WebSocket消息时发生错误:', error, 'Message:', data);
}
};
@ -271,3 +371,182 @@ const processNotification = (data) => {
metadata: notificationData.metadata || {},
};
};
/**
* 初始化聊天WebSocket连接
* @returns {Promise<WebSocket>} 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连接已关闭');
};

16
src/store/chat/chat.slice.js
View File

@ -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} 不存在，无法更新`);
}
}
}

22
src/styles/style.scss
View File

@ -590,3 +590,25 @@
}
}
}
// ResourceList 组件样式
.resource-list {
font-size: 0.9rem;
.resource-item {
transition: background-color 0.2s ease;
&:hover {
background-color: #f0f0f0 !important;
}
}
.resource-title {
font-size: 0.9rem;
line-height: 1.2;
}
.resource-source {
font-size: 0.8rem;
}
}