修补输入框

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

backend/core/models/chat_history.py

@@ -15,6 +15,14 @@ class Message(BaseModel):
         description="消息发送时间戳"
     )
     floor: int = Field(0, description="对话楼层数")
+    swipes: List[str] = Field(
+        default_factory=list,
+        description="历史版本列表。用户消息：存编辑过的不同版本。AI消息：存重roll生成的不同版本"
+    )
+    swipe_id: int = Field(
+        0,
+        description="当前指针。指示当前显示的是 swipes 数组中的第几个（从 0 开始）"
+    )
     mes: str = Field(..., description="消息内容文本")
     extra: Dict[str, Any] = Field(
         default_factory=dict,
@@ -211,17 +219,26 @@ class ChatHistory(BaseModel):
                 "name": str,
                 "is_user": bool,
                 "floor": int,
-                "mes": str
+                "mes": str,
+                "swipes": List[str],
+                "swipe_id": int
             }
         """
         # 创建消息字典列表
         messages_list = []
         for msg in self.messages:
+            # 获取当前消息内容：优先从swipes数组中获取，如果不存在则使用mes
+            current_mes = msg.mes
+            if msg.swipes and 0 <= msg.swipe_id < len(msg.swipes):
+                current_mes = msg.swipes[msg.swipe_id]
+
             msg_dict = {
                 "name": msg.name,
                 "is_user": msg.is_user,
                 "floor": msg.floor,
-                "mes": msg.mes
+                "mes": current_mes,
+                "swipes": msg.swipes,
+                "swipe_id": msg.swipe_id
             }
             messages_list.append(msg_dict)
 

frontend-react/Dockerfile

@@ -1,6 +1,6 @@
 # 使用 Node.js 18 Alpine 镜像作为基础
 # 必须明确指定 node 版本，否则可能默认为空或 python 镜像
-FROM node:18-alpine
+FROM node:20-alpine
 
 # 设置工作目录
 WORKDIR /app

frontend-react/src/Store/Slices/ChatBoxSlice.jsx

@@ -21,6 +21,9 @@ const useChatBoxStore = create(
 	// 是否正在加载
 	isLoading: false,
 
+	// 是否正在生成
+	isGenerating: false,
+
 	// 错误信息
 	error: null,
 
@@ -40,12 +43,68 @@ const useChatBoxStore = create(
 	setCurrentChat: (chat) => set({ currentChat: chat }),
 
 	// 同时设置角色和聊天
-    setChatBoxRoleAndChat: (role, chat) => set({
+    setChatBoxRoleAndChat: (role, chat) => {
+      console.log('[ChatBoxStore] setChatBoxRoleAndChat called with:', { role, chat });
+      set({
         currentRole: role,
         currentChat: chat
-    }),
+      });
+    },
 
 
+	// 设置生成状态
+	setIsGenerating: (status) => set({ isGenerating: status }),
+
+	sendMessage: async (content) => {
+	  const { messages, userName, characterName, currentRole, currentChat } = get();
+
+		  set({
+			isGenerating: true,
+			messages: [...messages, {
+			  id: Date.now(),
+			  floor: messages.length + 1,
+			  mes: content,
+			  is_user: true
+			}]
+		  });
+
+		  try {
+			const response = await fetch('/api/chat_box/send_message', {
+			  method: 'POST',
+			  headers: {
+				'Content-Type': 'application/json',
+			  },
+			  body: JSON.stringify({
+				role_name: currentRole,
+				chat_name: currentChat,
+				message: content
+			  })
+			});
+
+			if (!response.ok) {
+			  throw new Error('Failed to send message');
+			}
+
+			const data = await response.json();
+			set((state) => ({
+			  messages: [...state.messages, {
+				id: Date.now(),
+				floor: state.messages.length + 1,
+				mes: data.response,
+				is_user: false
+			  }],
+			  isGenerating: false
+			}));
+		  } catch (error) {
+			set({
+			  error: error.message,
+			  isGenerating: false
+			});
+		  }
+		},
+
+	// 终止生成
+	stopGeneration: () => set({ isGenerating: false }),
 	// 加载聊天历史
 	fetchChatHistory: async (roleName, chatName) => {
 	  set({ isLoading: true, error: null });

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

@@ -6,6 +6,7 @@ const ChatBox = () => {
   const [editingId, setEditingId] = useState(null);
   const [editContent, setEditContent] = useState('');
   const messagesEndRef = useRef(null);
+  const [inputValue, setInputValue] = useState('');
 
     // 从 ChatBoxStore 获取状态和方法
     const {
@@ -14,9 +15,40 @@ const ChatBox = () => {
       error,
       userName,
       characterName,
-    updateMessage
+      updateMessage,
+      isGenerating,
+      sendMessage,
+      stopGeneration
     } = useChatBoxStore();
 
+    const [inputHeight, setInputHeight] = useState(42);
+
+    //     添加输入框高度自适应处理
+    const handleInputHeight = (e) => {
+      const textarea = e.target;
+      const newHeight = Math.min(Math.max(textarea.scrollHeight, 42), 300);
+      setInputHeight(newHeight);
+    };
+
+    // 处理发送或终止
+    const handleSendOrStop = () => {
+      if (isGenerating) {
+        stopGeneration();
+      } else {
+        sendMessage(inputValue);
+        setInputValue('');
+        setInputHeight(42);
+      }
+    };
+
+    // 处理键盘事件
+    const handleKeyDown = (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSendOrStop();
+      }
+    };
+
   // 自动滚动到底部
   const scrollToBottom = () => {
 	messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -112,7 +144,7 @@ const ChatBox = () => {
 	);
   };
 
-  return (
+return (
       <div className="chat-box">
         <div className="chat-messages">
           {isLoading ? (
@@ -126,6 +158,27 @@ const ChatBox = () => {
           )}
           <div ref={messagesEndRef} />
         </div>
+        <div className="chat-input-wrapper">
+          <div className="chat-input-area">
+            <textarea
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+                handleInputHeight(e);
+              }}
+              onKeyDown={handleKeyDown}
+              style={{ height: `${inputHeight}px` }}
+              placeholder="输入消息..."
+            />
+          </div>
+          <button
+            className={`send-button ${isGenerating ? 'stopping' : ''}`}
+            onClick={handleSendOrStop}
+            disabled={!inputValue.trim() && !isGenerating}
+          >
+            {isGenerating ? '终止' : '发送'}
+          </button>
+        </div>
       </div>
     );
 };

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

@@ -1,146 +1,146 @@
-// npm install react react-dom react-markdown react-syntax-highlighter remark-math rehype-katex react-copy-to-clipboard mermaid katex
-import React, { useState, useCallback, useEffect } from "react";
-import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import remarkMath from "remark-math";
-import rehypeKatex from "rehype-katex";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import mermaid from "mermaid";
-import "katex/dist/katex.min.css";
-
-// Mermaid 初始化配置
-// Mermaid是一个画图的语言
-mermaid.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "loose",
-});
-
-const DownSvg = () => (
-  <svg width="12" height="12" viewBox="0 0 24 24">
-    <path d="M7 10l5 5 5-5z" fill="currentColor" />
-  </svg>
-);
-
-const CopySvg = () => (
-  <svg width="14" height="14" viewBox="0 0 24 24">
-    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor" />
-  </svg>
-);
-
-
-const MermaidChart= ({ code }) => {
-  const [svg, setSvg] = useState("");
-  const [id] = useState(() => `mermaid-${Math.random().toString(36).substr(2, 9)}`);
-
-  useEffect(() => {
-    try {
-      mermaid.parse(code);
-      mermaid.render(id, code).then(({ svg }) => setSvg(svg));
-    } catch (err) {
-      setSvg(`<pre>Error rendering mermaid: ${err}</pre>`);
-    }
-  }, [code, id]);
-
-  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
-};
-
-const MarkdownToHTML= ({ markdownRAW, className }) => {
-  const [isMermaidLoaded] = useState(true);
-  // 渲染代码块的方法
-  const CodeBlock = useCallback(
-    ({ node, inline, className, children, ...props } ) => {
-      const [isShowCode, setIsShowCode] = useState(true); // 添加展开与收起代码块状态
-      const [isShowCopy, setIsShowCopy] = useState(false);// 添加点击复制的状态
-      const match = /language-(\w+)/.exec(className || ""); // 这是用来匹配代码块对应语言的方法
-      const codeContent = String(children).replace(/\n$/, "");
-      // 处理复制成功提示
-      const handleCopy = () => {
-        setIsShowCopy(true);
-        setTimeout(() => setIsShowCopy(false), 1500);
-      };
-      //处理单行代码
-      if (inline) {
-        return <code className={className} {...props}>{children}</code>;
-      }
-
-      // 处理 Mermaid 图表代码
-      if (match?.[1] === "mermaid" && isMermaidLoaded) {
-        return (
-          <div style={{ position: "relative", margin: "20px 0" }}>
-            <div className="code-header">
-              <div
-                style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
-                className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
-                onClick={() => setIsShowCode(!isShowCode)}
-              >
-                <DownSvg />
-              </div>
-              <div>{match[1]}</div>
-              <CopyToClipboard text={codeContent} onCopy={handleCopy}>
-                <div className="preview-code-copy" style={{ cursor: "pointer" }}>
-                  {isShowCopy && <span className="copy-success">✓ 复制成功</span>}
-                  <CopySvg />
-                </div>
-              </CopyToClipboard>
-            </div>
-            {isShowCode && <MermaidChart code={codeContent} />}
-          </div>
-        );
-      }
-
-      return (
-        <div style={{ position: "relative", padding:"0"}}>
-          <div className="code-header">
-            <div
-              style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
-              className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
-              onClick={() => setIsShowCode(!isShowCode)}
-            >
-              <DownSvg style={{ 
-                transform: isShowCode ? "rotate(0deg)" : "rotate(-90deg)",
-                transition: "transform 0.2s"
-              }} />
-            </div>
-            <div>{match?.[1] || "code"}</div>
-            <CopyToClipboard text={codeContent} onCopy={handleCopy}>
-              <div className="preview-code-copy" style={{ cursor: "pointer" }}>
-                {isShowCopy && <span className="copy-success">✓ 复制成功</span>}
-                <CopySvg />
-              </div>
-            </CopyToClipboard>
-          </div>
-          {isShowCode && (
-            <SyntaxHighlighter
-              style={materialLight}
-              language={match?.[1] || "text"}
-              PreTag="div"
-              showLineNumbers
-              {...props}
-            >
-              {codeContent}
-            </SyntaxHighlighter>
-          )}
-        </div>
-      );
-    },
-    [isMermaidLoaded]
-  );
-
-  return (
-    <div
-      className={className} >
-    <ReactMarkdown
-      remarkPlugins={[remarkMath]}
-      rehypePlugins={[rehypeKatex]}
-      components={{ code: CodeBlock }}
-    >
-      {markdownRAW}
-    </ReactMarkdown>
-
-    </div>
-  );
-};
-
-export default MarkdownToHTML;
+// // npm install react react-dom react-markdown react-syntax-highlighter remark-math rehype-katex react-copy-to-clipboard mermaid katex
+// import React, { useState, useCallback, useEffect } from "react";
+// import ReactMarkdown from "react-markdown";
+// import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+// import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
+// import remarkMath from "remark-math";
+// import rehypeKatex from "rehype-katex";
+// import { CopyToClipboard } from "react-copy-to-clipboard";
+// import mermaid from "mermaid";
+// import "katex/dist/katex.min.css";
+//
+// // Mermaid 初始化配置
+// // Mermaid是一个画图的语言
+// mermaid.initialize({
+//   startOnLoad: false,
+//   theme: "default",
+//   securityLevel: "loose",
+// });
+//
+// const DownSvg = () => (
+//   <svg width="12" height="12" viewBox="0 0 24 24">
+//     <path d="M7 10l5 5 5-5z" fill="currentColor" />
+//   </svg>
+// );
+//
+// const CopySvg = () => (
+//   <svg width="14" height="14" viewBox="0 0 24 24">
+//     <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor" />
+//   </svg>
+// );
+//
+//
+// const MermaidChart= ({ code }) => {
+//   const [svg, setSvg] = useState("");
+//   const [id] = useState(() => `mermaid-${Math.random().toString(36).substr(2, 9)}`);
+//
+//   useEffect(() => {
+//     try {
+//       mermaid.parse(code);
+//       mermaid.render(id, code).then(({ svg }) => setSvg(svg));
+//     } catch (err) {
+//       setSvg(`<pre>Error rendering mermaid: ${err}</pre>`);
+//     }
+//   }, [code, id]);
+//
+//   return <div dangerouslySetInnerHTML={{ __html: svg }} />;
+// };
+//
+// const MarkdownToHTML= ({ markdownRAW, className }) => {
+//   const [isMermaidLoaded] = useState(true);
+//   // 渲染代码块的方法
+//   const CodeBlock = useCallback(
+//     ({ node, inline, className, children, ...props } ) => {
+//       const [isShowCode, setIsShowCode] = useState(true); // 添加展开与收起代码块状态
+//       const [isShowCopy, setIsShowCopy] = useState(false);// 添加点击复制的状态
+//       const match = /language-(\w+)/.exec(className || ""); // 这是用来匹配代码块对应语言的方法
+//       const codeContent = String(children).replace(/\n$/, "");
+//       // 处理复制成功提示
+//       const handleCopy = () => {
+//         setIsShowCopy(true);
+//         setTimeout(() => setIsShowCopy(false), 1500);
+//       };
+//       //处理单行代码
+//       if (inline) {
+//         return <code className={className} {...props}>{children}</code>;
+//       }
+//
+//       // 处理 Mermaid 图表代码
+//       if (match?.[1] === "mermaid" && isMermaidLoaded) {
+//         return (
+//           <div style={{ position: "relative", margin: "20px 0" }}>
+//             <div className="code-header">
+//               <div
+//                 style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
+//                 className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
+//                 onClick={() => setIsShowCode(!isShowCode)}
+//               >
+//                 <DownSvg />
+//               </div>
+//               <div>{match[1]}</div>
+//               <CopyToClipboard text={codeContent} onCopy={handleCopy}>
+//                 <div className="preview-code-copy" style={{ cursor: "pointer" }}>
+//                   {isShowCopy && <span className="copy-success">✓ 复制成功</span>}
+//                   <CopySvg />
+//                 </div>
+//               </CopyToClipboard>
+//             </div>
+//             {isShowCode && <MermaidChart code={codeContent} />}
+//           </div>
+//         );
+//       }
+//
+//       return (
+//         <div style={{ position: "relative", padding:"0"}}>
+//           <div className="code-header">
+//             <div
+//               style={{ cursor: "pointer", marginRight: "10px", transformOrigin: "8px" }}
+//               className={isShowCode ? "code-rotate-down" : "code-rotate-right"}
+//               onClick={() => setIsShowCode(!isShowCode)}
+//             >
+//               <DownSvg style={{
+//                 transform: isShowCode ? "rotate(0deg)" : "rotate(-90deg)",
+//                 transition: "transform 0.2s"
+//               }} />
+//             </div>
+//             <div>{match?.[1] || "code"}</div>
+//             <CopyToClipboard text={codeContent} onCopy={handleCopy}>
+//               <div className="preview-code-copy" style={{ cursor: "pointer" }}>
+//                 {isShowCopy && <span className="copy-success">✓ 复制成功</span>}
+//                 <CopySvg />
+//               </div>
+//             </CopyToClipboard>
+//           </div>
+//           {isShowCode && (
+//             <SyntaxHighlighter
+//               style={materialLight}
+//               language={match?.[1] || "text"}
+//               PreTag="div"
+//               showLineNumbers
+//               {...props}
+//             >
+//               {codeContent}
+//             </SyntaxHighlighter>
+//           )}
+//         </div>
+//       );
+//     },
+//     [isMermaidLoaded]
+//   );
+//
+//   return (
+//     <div
+//       className={className} >
+//     <ReactMarkdown
+//       remarkPlugins={[remarkMath]}
+//       rehypePlugins={[rehypeKatex]}
+//       components={{ code: CodeBlock }}
+//     >
+//       {markdownRAW}
+//     </ReactMarkdown>
+//
+//     </div>
+//   );
+// };
+//
+// export default MarkdownToHTML;