内部集成VersionSwitcher

dashboard-v4/dashboard/src/components/chat/UserMessage.tsx

@@ -2,12 +2,20 @@ import React, { useState } from "react";
 import { Button, Input } from "antd";
 import { EditOutlined, CopyOutlined } from "@ant-design/icons";
 import { UserMessageProps } from "../../types/chat";
+import { VersionSwitcher } from "./VersionSwitcher";
 
 const { TextArea } = Input;
 
-const UserMessage = ({ message, onEdit, onCopy }: UserMessageProps) => {
+const UserMessage = ({
+  session,
+  onEdit,
+  onCopy,
+  onVersionSwitch,
+}: UserMessageProps) => {
+  const message = session.user_message;
+
   const [isEditing, setIsEditing] = useState(false);
-  const [editContent, setEditContent] = useState(message.content || "");
+  const [editContent, setEditContent] = useState(message?.content || "");
 
   const handleEdit = () => {
     if (onEdit && editContent.trim()) {
@@ -17,35 +25,15 @@ const UserMessage = ({ message, onEdit, onCopy }: UserMessageProps) => {
   };
 
   const handleCancel = () => {
-    setEditContent(message.content || "");
+    setEditContent(session.user_message?.content || "");
     setIsEditing(false);
   };
-
+  if (!message) {
+    return <></>;
+  }
   return (
     <div className="user-message">
-      <div className="message-header">
-        <span className="role-label">You</span>
-        <div className="message-actions">
-          {!isEditing && (
-            <>
-              <Button
-                size="small"
-                type="text"
-                icon={<EditOutlined />}
-                onClick={() => setIsEditing(true)}
-              />
-              <Button
-                size="small"
-                type="text"
-                icon={<CopyOutlined />}
-                onClick={onCopy}
-              />
-            </>
-          )}
-        </div>
-      </div>
-
-      <div className="message-content">
+      <div className="message-content" style={{ maxWidth: "90%" }}>
         {isEditing ? (
           <div className="edit-area">
             <TextArea
@@ -75,6 +63,38 @@ const UserMessage = ({ message, onEdit, onCopy }: UserMessageProps) => {
           </div>
         )}
       </div>
+      <div className="message-header">
+        <span className="role-label"></span>
+        <div className="message-actions" style={{ display: "flex" }}>
+          {!isEditing && (
+            <>
+              <Button
+                size="small"
+                type="text"
+                icon={<EditOutlined />}
+                onClick={() => setIsEditing(true)}
+              />
+              <Button
+                size="small"
+                type="text"
+                icon={<CopyOutlined />}
+                onClick={onCopy}
+              />
+              {/* 版本切换器 */}
+              {session.versions && session.versions.length > 1 && (
+                <VersionSwitcher
+                  versions={session.versions}
+                  currentVersion={session.current_version}
+                  onSwitch={(versionIndex) =>
+                    onVersionSwitch &&
+                    onVersionSwitch(session.versions[versionIndex].message_id)
+                  }
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
     </div>
   );
 };