使用MsgContainer

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

@@ -11,17 +11,26 @@ import { IAiModel } from "../api/ai";
 import { useState } from "react";
 import { MenuProps } from "antd/es/menu";
 import Marked from "../general/Marked";
+import MsgContainer from "./MsgContainer";
 
 const { Text } = Typography;
 
 interface IWidget {
   msg?: Message;
   models?: IAiModel[];
+  onSwitchMsgVersion?: (version: number) => void;
   onRefresh?: (modelIndex: number) => void;
 }
 
-const MsgAssistant = ({ msg, models, onRefresh }: IWidget) => {
-  const [currentVersion, setCurrentVersion] = useState(0);
+const MsgAssistant = ({
+  msg,
+  models,
+  onRefresh,
+  onSwitchMsgVersion,
+}: IWidget) => {
+  const [currentVersion, setCurrentVersion] = useState(
+    msg?.currentVersionIndex ?? 0
+  );
 
   const switchMessageVersion = (direction: "prev" | "next"): void => {
     if (msg && msg.versions) {
@@ -33,7 +42,11 @@ const MsgAssistant = ({ msg, models, onRefresh }: IWidget) => {
       } else if (direction === "next" && currentVersion < maxIndex) {
         newIndex = currentVersion + 1;
       }
-      setCurrentVersion(newIndex);
+      if (onSwitchMsgVersion) {
+        onSwitchMsgVersion(newIndex);
+      } else {
+        setCurrentVersion(newIndex);
+      }
     }
   };
 
@@ -65,99 +78,77 @@ const MsgAssistant = ({ msg, models, onRefresh }: IWidget) => {
     ],
   };
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "flex-start",
-      }}
-    >
+    <MsgContainer>
       <div
         style={{
-          maxWidth: "90%",
-          backgroundColor: "#ffffff",
-          color: "black",
-          borderRadius: "8px",
-          padding: "16px",
-          border: "none",
-          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
-          textAlign: "left",
+          fontSize: "14px",
+          fontWeight: 500,
+          marginBottom: "4px",
         }}
       >
-        <div
-          style={{
-            fontSize: "14px",
-            fontWeight: 500,
-            marginBottom: "4px",
-          }}
-        >
-          {msg?.model
-            ? models?.find((m) => m.uid === msg.model)?.name
-            : "AI助手"}
-        </div>
-        <div>
-          <Marked text={msg?.content} />
-        </div>
-        <div>
-          <Space>
-            {msg?.versions && msg.versions.length > 1 && (
-              <div style={{ marginBottom: "8px" }}>
-                <Space size="small">
-                  <Button
-                    size="small"
-                    type="text"
-                    icon={<LeftOutlined />}
-                    disabled={msg.currentVersionIndex === 0}
-                    onClick={() => switchMessageVersion("prev")}
-                  />
-                  <Text
-                    style={{
-                      fontSize: "12px",
-                      color:
-                        msg.type === "user" ? "rgba(255,255,255,0.7)" : "#666",
-                    }}
-                  >
-                    {(msg.currentVersionIndex || 0) + 1}/{msg.versions.length}
-                  </Text>
-                  <Button
-                    size="small"
-                    type="text"
-                    icon={<RightOutlined />}
-                    disabled={
-                      msg.currentVersionIndex === msg.versions.length - 1
-                    }
-                    onClick={() => switchMessageVersion("next")}
-                  />
-                </Space>
-              </div>
-            )}
-            <div>
+        {msg?.model ? models?.find((m) => m.uid === msg.model)?.name : "AI助手"}
+      </div>
+      <div>
+        <Marked text={msg?.content} />
+      </div>
+      <div>
+        <Space>
+          {msg?.versions && msg.versions.length > 1 && (
+            <div style={{ marginBottom: "8px" }}>
               <Space size="small">
-                <Tooltip title="复制">
-                  <Button
-                    size="small"
-                    type="text"
-                    icon={<CopyOutlined />}
-                    onClick={() => {
-                      msg &&
-                        navigator.clipboard
-                          .writeText(msg.content)
-                          .then((value) => message.success("已复制到剪贴板"))
-                          .catch((reason: any) => {
-                            console.error("复制失败:", reason);
-                            message.error("复制失败");
-                          });
-                    }}
-                  />
-                </Tooltip>
-                <Dropdown menu={refreshMenu} trigger={["hover"]}>
-                  <Button size="small" type="text" icon={<ReloadOutlined />} />
-                </Dropdown>
+                <Button
+                  size="small"
+                  type="text"
+                  icon={<LeftOutlined />}
+                  disabled={msg.currentVersionIndex === 0}
+                  onClick={() => switchMessageVersion("prev")}
+                />
+                <Text
+                  style={{
+                    fontSize: "12px",
+                    color:
+                      msg.type === "user" ? "rgba(255,255,255,0.7)" : "#666",
+                  }}
+                >
+                  {(msg.currentVersionIndex || 0) + 1}/{msg.versions.length}
+                </Text>
+                <Button
+                  size="small"
+                  type="text"
+                  icon={<RightOutlined />}
+                  disabled={msg.currentVersionIndex === msg.versions.length - 1}
+                  onClick={() => switchMessageVersion("next")}
+                />
               </Space>
             </div>
-          </Space>
-        </div>
+          )}
+          <div>
+            <Space size="small">
+              <Tooltip title="复制">
+                <Button
+                  size="small"
+                  type="text"
+                  icon={<CopyOutlined />}
+                  onClick={() => {
+                    msg &&
+                      navigator.clipboard
+                        .writeText(msg.content)
+                        .then((value) => message.success("已复制到剪贴板"))
+                        .catch((reason: any) => {
+                          console.error("复制失败:", reason);
+                          message.error("复制失败");
+                        });
+                  }}
+                />
+              </Tooltip>
+              <Dropdown menu={refreshMenu} trigger={["hover"]}>
+                <Button size="small" type="text" icon={<ReloadOutlined />} />
+              </Dropdown>
+            </Space>
+          </div>
+        </Space>
       </div>
-    </div>
+    </MsgContainer>
   );
 };