添加测试、添加总结、全量、rag（todo）3种历史记录保存方式，流式实现

frontend/src/components/Mid/ChatBox/ChatBox.jsx

@@ -234,21 +234,21 @@ const ChatBox = () => {
   };
 
   // 渲染单条消息
-  const renderMessage = (message) => {
+  const renderMessage = (message, index) => {
     const isUser = message.is_user;
     const isEditing = editingId === message.floor;
-
+  
     // 判断是否为最新消息
     const isLatestMessage = messages.length > 0 && message.floor === messages[messages.length - 1].floor;
-
+  
     // 根据消息类型设置显示名称
     const displayName = isUser ? userName : characterName;
-
+  
     // 确定当前显示的消息内容
     let currentMes = message.mes;
     let hasSwipes = message.swipes && message.swipes.length > 0;
     let currentSwipeIndex = message.swipe_id;
-
+  
     if (hasSwipes) {
       // 如果有swipes数组
       if (currentSwipeId[message.floor] !== undefined) {
@@ -258,14 +258,17 @@ const ChatBox = () => {
         // 否则使用默认的swipe_id
         currentSwipeIndex = message.swipe_id;
       }
-
+  
       if (currentSwipeIndex >= 0 && currentSwipeIndex < message.swipes.length) {
         currentMes = message.swipes[currentSwipeIndex];
       }
     }
-
+  
+    // ✅ 使用 id 或组合 key 确保唯一性
+    const uniqueKey = message.id || `${message.floor}-${index}`;
+  
     return (
-      <div key={message.floor} className={`message ${isUser ? 'user' : 'ai'}`}>
+      <div key={uniqueKey} className={`message ${isUser ? 'user' : 'ai'}`}>
         <div className="message-container">
           <div className="message-header">
             <span className="message-name">{displayName}</span>
@@ -517,9 +520,9 @@ const ChatBox = () => {
               
               {characterChats.length > 0 ? (
                 <div className="chat-list">
-                  {characterChats.map((chat, index) => (
+                  {characterChats.map((chat) => (
                     <div 
-                      key={index} 
+                      key={chat.chat_name} 
                       className="chat-option"
                     >
                       <div