修补选中聊天不更换角色bug

frontend-react/src/components/ChatBox/ChatBox.css

@@ -403,3 +403,27 @@
 .send-button:hover {
   background-color: #40a9ff;
 }
+
+/* 加载状态样式 */
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  color: #888;
+  font-size: 14px;
+}
+
+/* 错误信息样式 */
+.error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  color: #f5222d;
+  font-size: 14px;
+  background-color: rgba(245, 34, 45, 0.05);
+  border-radius: 4px;
+  margin: 10px 0;
+}
+

frontend-react/src/components/ChatBox/ChatBox.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef } from 'react';
+import useChatBoxStore from '../../Store/Slices/ChatBoxSlice';
 import './ChatBox.css';
 
-const ChatBox = ({ selectedRole, selectedChat }) => {
+const ChatBox = () => {
   const [isHtmlRender, setIsHtmlRender] = useState(false);
   const [isImageGen, setIsImageGen] = useState(false);
   const [isDynamicTable, setIsDynamicTable] = useState(false);
@@ -10,6 +11,9 @@ const ChatBox = ({ selectedRole, selectedChat }) => {
 
   const textareaRef = useRef(null);
 
+  // 从 store 获取状态
+  const { messages, userName, characterName, isLoading, error } = useChatBoxStore();
+
   // 自动调整 Textarea 高度
   const adjustHeight = () => {
     const textarea = textareaRef.current;
@@ -60,36 +64,21 @@ const ChatBox = ({ selectedRole, selectedChat }) => {
     setEditContent('');
   };
 
-  // 生成示例数据
-  const generateMessages = () => {
-    const messages = [];
-    for (let i = 1; i <= 150; i++) {
-      const isUser = i % 2 !== 0;
-      messages.push({
-        id: i,
-        role: isUser ? 'user' : 'ai',
-        name: isUser ? '我' : 'AI助手',
-        content: isUser
-          ? `这是第 ${i} 条用户消息。这是一段比较长的文本，用来测试气泡的换行效果以及滚动条的表现。`
-          : `这是第 ${i} 条 AI 回复。<b>包含 HTML 标签</b>的内容。如果渲染开关开启，这里应该显示粗体字。如果不开启，应该显示原始标签。`
-      });
-    }
-    return messages;
-  };
-
-  const messages = generateMessages();
-
   return (
     <div className="chat-box">
       {/* 上方：消息列表区域 */}
       <div className="chat-messages">
+        {/* 加载状态和错误信息 */}
+        {isLoading && <div className="loading">加载中...</div>}
+        {error && <div className="error">{error}</div>}
+
         {/* 消息列表 */}
         {messages.map((msg) => (
           <div key={msg.id} className={`message ${msg.role}`}>
             <div className="message-container">
               {/* 消息名称和工具栏在同一行 */}
               <div className="message-header">
-                <div className="message-name">{msg.name}</div>
+                <div className="message-name">{msg.role === 'user' ? userName : characterName}</div>
 
                 {/* 消息工具栏 */}
                 <div className="message-toolbar">

frontend-react/src/components/RoleSelector/RoleSelector.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import useRoleSelectorStore from '../../store/Slices/RoleSelectorSlice';
+import useChatBoxStore from '../../Store/Slices/ChatBoxSlice';
 import './RoleSelector.css';
 
-const RoleSelector = ({ onRoleChange, onChatChange }) => {
+const RoleSelector = () => {
   const panelRef = useRef(null);
 
   // 从 Zustand store 中获取状态和操作
@@ -37,6 +38,9 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
     resetPanel
   } = useRoleSelectorStore();
 
+  // 从 ChatBoxStore 获取状态更新方法
+  const { setCurrentRole, setCurrentChat } = useChatBoxStore();
+
   // 组件挂载时获取数据
   useEffect(() => {
     fetchRoleData();
@@ -59,41 +63,56 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
   // 处理角色选择
   const handleRoleSelect = (role) => {
     setSelectedRole(role);
-    if (onRoleChange) {
-      onRoleChange(role);
-    }
+    // 更新 ChatBoxStore 中的当前角色
+    setCurrentRole(role);
 
     // 如果该角色有聊天记录，默认选择第一个
     if (roleData[role] && roleData[role].length > 0) {
       const firstChat = roleData[role][0];
       setSelectedChat(firstChat);
-      if (onChatChange) {
-        onChatChange(role, firstChat);
-      }
+      // 更新 ChatBoxStore 中的当前聊天
+      setCurrentChat(firstChat);
     } else {
       setSelectedChat(null);
+      // 清除 ChatBoxStore 中的当前聊天
+      setCurrentChat(null);
     }
   };
 
   // 处理聊天选择
   const handleChatSelect = (chat) => {
-    setSelectedChat(chat);
-    setHoveredRole(null);
-    setClickedRole(null);
-    if (onChatChange) {
-      onChatChange(selectedRole, chat);
-    }
+      // 获取当前展开的角色（聊天所属的角色）
+      const currentRole = hoveredRole || clickedRole;
+
+      setSelectedChat(chat);
+      setSelectedRole(currentRole); // 使用当前展开的角色
+      setHoveredRole(null);
+      setClickedRole(null);
+      // 更新 ChatBoxStore 中的当前聊天和角色
+      setCurrentChat(chat);
+      setCurrentRole(currentRole);
   };
 
   // 处理角色卡片点击
-  const handleRoleCardClick = (role) => {
-    if (clickedRole === role) {
-      setClickedRole(null);
-    } else {
-      setClickedRole(role);
-      handleRoleSelect(role);
-    }
-  };
+    const handleRoleCardClick = (role) => {
+      if (clickedRole === role) {
+        setClickedRole(null);
+        // 取消选择角色时，更新 selectedRole 和 selectedChat
+        setSelectedRole(null);
+        setSelectedChat(null);
+        // 同步更新 ChatBoxStore 中的状态
+        setCurrentRole(null);
+        setCurrentChat(null);
+      } else {
+        setClickedRole(role);
+        handleRoleSelect(role);
+        setSelectedRole(role);
+        setSelectedChat(chat);
+        // 同步更新 ChatBoxStore 中的状态
+        setSele
+      }
+    };
+
 
   // 处理搜索
   const handleSearchChange = (e) => {
@@ -112,9 +131,8 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
     const newName = e.target.value;
     handleRenameRole(oldName, newName);
     if (selectedRole === oldName && newName && newName !== oldName) {
-      if (onRoleChange) {
-        onRoleChange(newName);
-      }
+      // 更新 ChatBoxStore 中的当前角色
+      setCurrentRole(newName);
     }
   };
 
@@ -130,9 +148,8 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
     const newName = e.target.value;
     handleRenameChat(oldName, newName);
     if (selectedChat === oldName && newName && newName !== oldName) {
-      if (onChatChange) {
-        onChatChange(selectedRole, newName);
-      }
+      // 更新 ChatBoxStore 中的当前聊天
+      setCurrentChat(selectedRole, newName);
     }
   };
 
@@ -147,13 +164,12 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
   const confirmDeleteWrapper = () => {
     confirmDelete();
     if (deleteType === 'role' && selectedRole === showDeleteConfirm) {
-      if (onRoleChange) {
-        onRoleChange(null);
-      }
+      // 清除 ChatBoxStore 中的当前角色和聊天
+      setCurrentRole(null);
+      setCurrentChat(null);
     } else if (deleteType === 'chat' && selectedChat === showDeleteConfirm) {
-      if (onChatChange) {
-        onChatChange(selectedRole, null);
-      }
+      // 清除 ChatBoxStore 中的当前聊天
+      setCurrentChat(null);
     }
   };