@ant-design/agentic-ui 2.0.10 → 2.0.13

package/dist/MarkdownInputField/Enlargement/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * Enlargement组件样式
+ * @param prefixCls
+ * @returns
+ */
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/MarkdownInputField/Enlargement/style.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/MarkdownInputField/Enlargement/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../Hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [`${token.componentCls}`]: {
+      width: "20px",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      paddingTop: "0px",
+      gap: "8px",
+      backgroundColor: "transparent",
+      "&-icon": {
+        width: "20px",
+        height: "20px",
+        color: "var(--color-gray-text-tertiary)",
+        cursor: "pointer",
+        transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "var(--radius-control-base)",
+        padding: "4px",
+        "&:hover": {
+          color: "var(--color-gray-text-secondary)",
+          backgroundColor: "var(--color-gray-bg-hover)",
+          transform: "scale(1.1)"
+        },
+        "&:active": {
+          transform: "scale(0.95)"
+        },
+        "&.enlarged": {
+          color: "var(--color-primary)",
+          backgroundColor: "var(--color-primary-bg-hover)"
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("md-enlargement", (token) => {
+    const enlargementToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(enlargementToken), genStyle(enlargementToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/MarkdownInputField/FileMapView/FileMapViewItem.js

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import dayjs from "dayjs";
 import { motion } from "framer-motion";
 import React, { useContext, useMemo } from "react";
-import { I18nContext } from "../../i18n";
+import { I18nContext } from "../../I18n";
 import { AttachmentFileIcon } from "../AttachmentButton/AttachmentFileList/AttachmentFileIcon";
 import { kbToSize } from "../AttachmentButton/utils";
 var FileMapViewItem = (props) => {

package/dist/MarkdownInputField/FileMapView/style.js

@@ -22,7 +22,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
   resetComponent,
   useEditorStyleRegister
-} from "../../hooks/useStyle";
+} from "../../Hooks/useStyle";
 var genStyle = (token) => {
   return {
     [`${token.componentCls}`]: {

package/dist/MarkdownInputField/FileUploadManager/index.js

@@ -41,8 +41,8 @@ var __async = (__this, __arguments, generator) => {
 // src/MarkdownInputField/FileUploadManager/index.tsx
 import { message } from "antd";
 import { useContext } from "react";
-import { useRefFunction } from "../../hooks/useRefFunction";
-import { I18nContext } from "../../i18n";
+import { useRefFunction } from "../../Hooks/useRefFunction";
+import { I18nContext } from "../../I18n";
 import { upLoadFileToServer } from "../AttachmentButton";
 import { SupportedFileFormats } from "../AttachmentButton/AttachmentButtonPopover";
 var useFileUploadManager = ({
@@ -131,7 +131,7 @@ var useFileUploadManager = ({
         errorMsg = uploadResult.errorMessage || null;
         file.uploadResponse = uploadResult;
       } else if (attachment == null ? void 0 : attachment.upload) {
-        url = yield attachment.upload(file);
+        url = yield attachment.upload(file, 0);
         isSuccess = !!url;
       }
       if (isSuccess && url) {

package/dist/MarkdownInputField/MarkdownInputField.d.ts

@@ -208,6 +208,30 @@ export type MarkdownInputFieldProps = {
         enable: boolean;
         onRefine: (input: string) => Promise<string>;
     };
+    /**
+     * 是否支持编辑器放大功能
+     * @description 启用后在编辑器右上角显示放大/全屏按钮，支持展开编辑器或优化文本显示
+     * @default false
+     * @example
+     * ```tsx
+     * <MarkdownInputField
+     *   enlargeable={true}  // 支持放大功能
+     * />
+     * ```
+     */
+    enlargeable?: boolean;
+    /**
+     * 目标容器的 ref，用于放大功能
+     * @description 当点击放大按钮时，输入框将撑满到此容器高度，距离顶部48px
+     * @example
+     * ```tsx
+     * const containerRef = useRef<HTMLDivElement>(null);
+     * <MarkdownInputField
+     *   enlargeTargetRef={containerRef}
+     * />
+     * ```
+     */
+    enlargeTargetRef?: React.RefObject<HTMLElement>;
     /**
      * Markdown 编辑器实例的引用
      * @description 用于获取编辑器实例，可以通过该实例调用编辑器的方法

package/dist/MarkdownInputField/MarkdownInputField.js

@@ -65,7 +65,7 @@ import React, {
 } from "react";
 import { Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { useRefFunction } from "../hooks/useRefFunction";
+import { useRefFunction } from "../Hooks/useRefFunction";
 import {
   BaseMarkdownEditor
 } from "../MarkdownEditor";
@@ -104,6 +104,7 @@ var MarkdownInputField = (_a) => {
   const { wrapSSR, hashId } = useStyle(baseCls);
   const [isHover, setHover] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [isEnlarged, setIsEnlarged] = React.useState(false);
   const markdownEditorRef = React.useRef();
   const quickActionsRef = React.useRef(null);
   const actionsRef = React.useRef(null);
@@ -163,6 +164,21 @@ var MarkdownInputField = (_a) => {
     (_b3 = (_a3 = markdownEditorRef.current) == null ? void 0 : _a3.store) == null ? void 0 : _b3.setMDContent(value);
   }, [props.value]);
   useImperativeHandle(props.inputRef, () => markdownEditorRef.current);
+  useEffect(() => {
+    var _a3;
+    const targetElement = (_a3 = props.enlargeTargetRef) == null ? void 0 : _a3.current;
+    if (targetElement && isEnlarged) {
+      const computedStyle = window.getComputedStyle(targetElement);
+      if (computedStyle.position === "static") {
+        console.warn(
+          "MarkdownInputField: enlargeTargetRef 容器的 position 为 static，这可能导致放大功能无法正常工作。请为目标容器设置 position: relative、absolute 或 fixed。"
+        );
+      }
+    }
+  }, [isEnlarged, props.enlargeTargetRef]);
+  const handleEnlargeClick = useRefFunction(() => {
+    setIsEnlarged(!isEnlarged);
+  });
   const sendMessage = useRefFunction(() => __async(void 0, null, function* () {
     var _a3, _b3, _c2, _d2, _e2, _f2;
     if (props.disabled)
@@ -194,6 +210,26 @@ var MarkdownInputField = (_a) => {
     const width = ((_b3 = props.style) == null ? void 0 : _b3.width) ? addGlowBorderOffset(props.style.width) : addGlowBorderOffset("100%");
     return { height, width };
   }, [(_d = props.style) == null ? void 0 : _d.height, (_e = props.style) == null ? void 0 : _e.width]);
+  const enlargedStyle = useMemo(() => {
+    var _a3;
+    if (!isEnlarged)
+      return {};
+    if ((_a3 = props.enlargeTargetRef) == null ? void 0 : _a3.current) {
+      const topOffset = 48;
+      return {
+        position: "absolute",
+        top: `${topOffset}px`,
+        left: "0",
+        right: "0",
+        bottom: "0",
+        width: "auto",
+        height: `calc(100% - ${topOffset}px)`,
+        maxWidth: "none",
+        zIndex: 1e3
+      };
+    }
+    return {};
+  }, [isEnlarged, props.enlargeTargetRef]);
   const beforeTools = useMemo(() => {
     if (props.beforeToolsRender) {
       return props.beforeToolsRender(__spreadProps(__spreadValues({}, props), {
@@ -276,10 +312,12 @@ var MarkdownInputField = (_a) => {
             [`${baseCls}-disabled`]: props.disabled,
             [`${baseCls}-typing`]: false,
             [`${baseCls}-loading`]: isLoading,
-            [`${baseCls}-is-multi-row`]: isMultiRowLayout
+            [`${baseCls}-is-multi-row`]: isMultiRowLayout,
+            [`${baseCls}-enlarged`]: isEnlarged
           }),
-          style: __spreadProps(__spreadValues({}, props.style), {
-            borderRadius: borderRadius || 16
+          style: __spreadProps(__spreadValues(__spreadValues({}, props.style), enlargedStyle), {
+            borderRadius: borderRadius || 16,
+            transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
           }),
           tabIndex: 1,
           onMouseEnter: () => setHover(true),
@@ -353,6 +391,7 @@ var MarkdownInputField = (_a) => {
               flex: 1,
               backgroundColor: "#fff",
               width: "100%",
+              height: isEnlarged ? "100%" : "auto",
               display: "flex",
               zIndex: 9,
               flexDirection: "column",
@@ -360,7 +399,8 @@ var MarkdownInputField = (_a) => {
               borderRadius: (borderRadius || 16) - 2 || 10,
               cursor: isLoading || props.disabled ? "not-allowed" : "auto",
               opacity: props.disabled ? 0.5 : 1,
-              minHeight: isMultiRowLayout ? 114 : void 0
+              minHeight: isEnlarged ? "auto" : isMultiRowLayout ? 114 : void 0,
+              transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
             }
           },
           /* @__PURE__ */ React.createElement(
@@ -370,8 +410,16 @@ var MarkdownInputField = (_a) => {
                 display: "flex",
                 flexDirection: "column",
                 borderRadius: (borderRadius || 16) - 2 || 10,
-                maxHeight: `min(${(Number((_g = props.style) == null ? void 0 : _g.maxHeight) || 400) + (((_h = props.attachment) == null ? void 0 : _h.enable) ? 90 : 0)}px)`,
-                flex: 1
+                maxHeight: isEnlarged ? "none" : (() => {
+                  var _a3, _b3;
+                  const mh = (_a3 = props.style) == null ? void 0 : _a3.maxHeight;
+                  const base = typeof mh === "number" ? mh : mh ? parseFloat(String(mh)) || 400 : 400;
+                  const extra = ((_b3 = props.attachment) == null ? void 0 : _b3.enable) ? 90 : 0;
+                  return `min(${base + extra}px)`;
+                })(),
+                height: isEnlarged ? "100%" : "auto",
+                flex: 1,
+                transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
               },
               className: classNames(`${baseCls}-editor`, hashId, {
                 [`${baseCls}-editor-hover`]: isHover,
@@ -398,7 +446,7 @@ var MarkdownInputField = (_a) => {
                   }
                 }
               ) : null;
-            }, [fileMap == null ? void 0 : fileMap.values(), (_i = props.attachment) == null ? void 0 : _i.enable]), /* @__PURE__ */ React.createElement(
+            }, [fileMap == null ? void 0 : fileMap.values(), (_g = props.attachment) == null ? void 0 : _g.enable]), /* @__PURE__ */ React.createElement(
               BaseMarkdownEditor,
               __spreadValues({
                 editorRef: markdownEditorRef,
@@ -490,7 +538,8 @@ var MarkdownInputField = (_a) => {
                 attachment: __spreadProps(__spreadValues({}, props.attachment), {
                   supportedFormat,
                   fileMap,
-                  onFileMapChange: setFileMap
+                  onFileMapChange: setFileMap,
+                  upload: ((_h = props.attachment) == null ? void 0 : _h.upload) ? (file) => props.attachment.upload(file, 0) : void 0
                 }),
                 voiceRecognizer: props.voiceRecognizer,
                 value,
@@ -523,7 +572,8 @@ var MarkdownInputField = (_a) => {
               attachment: __spreadProps(__spreadValues({}, props.attachment), {
                 supportedFormat,
                 fileMap,
-                onFileMapChange: setFileMap
+                onFileMapChange: setFileMap,
+                upload: ((_i = props.attachment) == null ? void 0 : _i.upload) ? (file) => props.attachment.upload(file, 0) : void 0
               }),
               voiceRecognizer: props.voiceRecognizer,
               value,
@@ -571,6 +621,9 @@ var MarkdownInputField = (_a) => {
               quickActionRender: props.quickActionRender,
               prefixCls: baseCls,
               hashId,
+              enlargeable: props.enlargeable,
+              isEnlarged,
+              onEnlargeClick: handleEnlargeClick,
               onResize: (width, rightOffset) => {
                 setTopRightPadding(width);
                 setQuickRightOffset(rightOffset);

package/dist/MarkdownInputField/QuickActions/index.d.ts

@@ -33,6 +33,12 @@ export interface QuickActionsProps {
     hashId?: string;
     /** resize 回调 */
     onResize?: (width: number, rightOffset: number) => void;
+    /** 是否支持编辑器放大功能 */
+    enlargeable?: boolean;
+    /** 是否处于放大状态 */
+    isEnlarged?: boolean;
+    /** 放大按钮点击回调 */
+    onEnlargeClick?: () => void;
 }
 /**
  * QuickActions 组件 - 快速操作区域

package/dist/MarkdownInputField/QuickActions/index.js

@@ -23,7 +23,8 @@ var __async = (__this, __arguments, generator) => {
 import classNames from "classnames";
 import RcResizeObserver from "rc-resize-observer";
 import React, { useState } from "react";
-import { useRefFunction } from "../../hooks/useRefFunction";
+import { useRefFunction } from "../../Hooks/useRefFunction";
+import Enlargement from "../Enlargement";
 import { RefinePromptButton } from "../RefinePromptButton";
 var QuickActions = React.forwardRef(
   ({
@@ -40,26 +41,28 @@ var QuickActions = React.forwardRef(
     quickActionRender,
     prefixCls = "ant-md-input-field",
     hashId = "",
-    onResize
+    onResize,
+    isEnlarged = false,
+    onEnlargeClick,
+    enlargeable = false
   }, ref) => {
-    var _a;
     const [refineStatus, setRefineStatus] = useState(
       "idle"
     );
     const applyEditorContent = useRefFunction((text) => {
-      var _a2, _b;
-      (_b = (_a2 = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _a2.store) == null ? void 0 : _b.setMDContent(text);
+      var _a, _b;
+      (_b = (_a = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _a.store) == null ? void 0 : _b.setMDContent(text);
       onValueChange == null ? void 0 : onValueChange(text);
     });
     const handleRefine = useRefFunction(() => __async(void 0, null, function* () {
-      var _a2, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e;
       if (!(refinePrompt == null ? void 0 : refinePrompt.enable))
         return;
       if (!(refinePrompt == null ? void 0 : refinePrompt.onRefine))
         return;
       if (refineStatus === "loading")
         return;
-      const current = (_e = (_d = (_c = (_b = (_a2 = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _a2.store) == null ? void 0 : _b.getMDContent) == null ? void 0 : _c.call(_b)) != null ? _d : value) != null ? _e : "";
+      const current = (_e = (_d = (_c = (_b = (_a = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _a.store) == null ? void 0 : _b.getMDContent) == null ? void 0 : _c.call(_b)) != null ? _d : value) != null ? _e : "";
       setRefineStatus("loading");
       try {
         const refined = yield refinePrompt.onRefine(current);
@@ -96,17 +99,35 @@ var QuickActions = React.forwardRef(
             e.stopPropagation();
             e.preventDefault();
           },
-          className: classNames(`${prefixCls}-quick-actions`, hashId)
+          className: classNames(
+            `${prefixCls}-quick-actions`,
+            hashId,
+            {
+              [`${prefixCls}-quick-actions-vertical`]: enlargeable
+            }
+          )
         },
-        (_a = quickActionRender ? quickActionRender({
-          value,
-          fileMap,
-          onFileMapChange,
-          isHover,
-          isLoading,
-          fileUploadStatus
-        }) : []) == null ? void 0 : _a.concat(
-          (refinePrompt == null ? void 0 : refinePrompt.enable) ? [
+        [
+          // Enlargement组件 - 显示在最上方
+          enlargeable && /* @__PURE__ */ React.createElement(
+            Enlargement,
+            {
+              key: "enlargement",
+              isEnlarged,
+              onEnlargeClick
+            }
+          ),
+          // 自定义快速操作按钮
+          ...quickActionRender ? quickActionRender({
+            value,
+            fileMap,
+            onFileMapChange,
+            isHover,
+            isLoading,
+            fileUploadStatus
+          }) : [],
+          // 提示词优化按钮
+          ...(refinePrompt == null ? void 0 : refinePrompt.enable) ? [
             /* @__PURE__ */ React.createElement(
               RefinePromptButton,
               {
@@ -118,7 +139,7 @@ var QuickActions = React.forwardRef(
               }
             )
           ] : []
-        )
+        ]
       )
     );
   }

package/dist/MarkdownInputField/RefinePromptButton/style.js

@@ -23,7 +23,7 @@ import { Keyframes } from "@ant-design/cssinjs";
 import {
   resetComponent,
   useEditorStyleRegister
-} from "../../hooks/useStyle";
+} from "../../Hooks/useStyle";
 var spinnerRotate = new Keyframes("refineSpinnerRotate", {
   "0%": {
     transform: "rotate(0deg)"

package/dist/MarkdownInputField/SendActions/index.js

@@ -24,8 +24,8 @@ import { Popover } from "antd";
 import classNames from "classnames";
 import RcResizeObserver from "rc-resize-observer";
 import React, { useContext, useMemo } from "react";
-import { ActionIconBox } from "../../components/ActionIconBox";
-import { I18nContext } from "../../i18n";
+import { ActionIconBox } from "../../Components/ActionIconBox";
+import { I18nContext } from "../../I18n";
 import { AttachmentButton } from "../AttachmentButton";
 import { SendButton } from "../SendButton";
 import { VoiceInputButton } from "../VoiceInput";

package/dist/MarkdownInputField/SendButton/style.js

@@ -23,7 +23,7 @@ import { Keyframes } from "@ant-design/cssinjs";
 import {
   resetComponent,
   useEditorStyleRegister
-} from "../../hooks/useStyle";
+} from "../../Hooks/useStyle";
 var pauseIconRotate = new Keyframes("pauseIconRotate", {
   "0%": {
     transform: "rotate(0deg)"

package/dist/MarkdownInputField/SkillModeBar/hooks/useSkillModeState.js

@@ -1,7 +1,7 @@
 // src/MarkdownInputField/SkillModeBar/hooks/useSkillModeState.ts
 import { useRef } from "react";
 import { useUpdateEffect } from "react-use";
-import { useRefFunction } from "../../../hooks/useRefFunction";
+import { useRefFunction } from "../../../Hooks/useRefFunction";
 function useSkillModeState(skillMode, onSkillModeOpenChange) {
   const prevSkillModeOpenRef = useRef(skillMode == null ? void 0 : skillMode.open);
   const skipNextCallbackRef = useRef(false);

package/dist/MarkdownInputField/SkillModeBar/style.js

@@ -22,7 +22,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
   resetComponent,
   useEditorStyleRegister
-} from "../../hooks/useStyle";
+} from "../../Hooks/useStyle";
 var genStyle = (token) => {
   return {
     [`${token.componentCls}-container`]: {

package/dist/MarkdownInputField/Suggestion/index.js

@@ -42,7 +42,7 @@ var __async = (__this, __arguments, generator) => {
 import { Dropdown, Spin } from "antd";
 import { useMergedState } from "rc-util";
 import React, { useEffect, useRef, useState } from "react";
-import { useRefFunction } from "../../hooks/useRefFunction";
+import { useRefFunction } from "../../Hooks/useRefFunction";
 var SuggestionConnext = React.createContext({
   isRender: true
 });

package/dist/MarkdownInputField/TopOperatingArea/style.js

@@ -21,7 +21,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 // src/MarkdownInputField/TopOperatingArea/style.ts
 import {
   useEditorStyleRegister
-} from "../../hooks/useStyle";
+} from "../../Hooks/useStyle";
 var prefixCls = "top-operating-area";
 var genTopOperatingAreaStyle = (token) => {
   return {

package/dist/MarkdownInputField/VoiceInput/index.js

@@ -25,8 +25,8 @@ import { ConfigProvider, Tooltip } from "antd";
 import classNames from "classnames";
 import React, { useContext } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { I18nContext } from "../../i18n";
-import VoicingLottie from "../../icons/animated/VoicingLottie";
+import { I18nContext } from "../../I18n";
+import VoicingLottie from "../../Icons/animated/VoicingLottie";
 import { useStyle } from "./style";
 var VoiceInputButton = (props) => {
   const { recording, disabled, onStart, onStop, style } = props;

package/dist/MarkdownInputField/VoiceInput/style.js

@@ -22,7 +22,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
   resetComponent,
   useEditorStyleRegister
-} from "../../hooks/useStyle";
+} from "../../Hooks/useStyle";
 var genStyle = (token) => {
   return {
     [token.componentCls]: {

package/dist/MarkdownInputField/VoiceInputManager/index.js

@@ -21,7 +21,7 @@ var __async = (__this, __arguments, generator) => {
 
 // src/MarkdownInputField/VoiceInputManager/index.tsx
 import { useEffect, useRef, useState } from "react";
-import { useRefFunction } from "../../hooks/useRefFunction";
+import { useRefFunction } from "../../Hooks/useRefFunction";
 var useVoiceInputManager = ({
   voiceRecognizer,
   editorRef,

package/dist/MarkdownInputField/style.js

@@ -23,7 +23,7 @@ import { Keyframes } from "@ant-design/cssinjs";
 import {
   resetComponent,
   useEditorStyleRegister
-} from "../hooks/useStyle";
+} from "../Hooks/useStyle";
 var GLOW_BORDER_OFFSET = 2;
 var GLOW_BORDER_TOTAL_OFFSET = GLOW_BORDER_OFFSET * 2;
 var getGlowBorderOffset = () => `-${GLOW_BORDER_OFFSET}px`;
@@ -98,6 +98,53 @@ var genStyle = (token) => {
           // backgroundColor: 'rgba(0, 9, 50, 0.1)',
         }
       },
+      "&-enlarged": {
+        // 覆盖基础样式的限制
+        minHeight: "100%",
+        height: "100%",
+        width: "100%",
+        maxWidth: "none",
+        // 覆盖原来的 maxWidth: 980
+        alignItems: "stretch",
+        // 覆盖原来的 center
+        justifyContent: "flex-start",
+        // 覆盖原来的 center
+        display: "flex",
+        flexDirection: "column",
+        // 保持和普通状态相同的阴影效果
+        boxShadow: `0px 0px 1px 0px rgba(0, 19, 41, 0.05),0px 2px 7px 0px rgba(0, 19, 41, 0.05),0px 2px 5px -2px rgba(0, 19, 41, 0.06)`,
+        transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
+        // 内部白色容器
+        "> div:last-child": {
+          flex: 1,
+          height: "100%",
+          minHeight: "100%",
+          width: "100%"
+        },
+        [`${token.componentCls}-editor`]: {
+          flex: 1,
+          height: "100%",
+          minHeight: "100%",
+          maxHeight: "none",
+          overflow: "hidden",
+          width: "100%",
+          transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+        },
+        [`${token.componentCls}-editor-content`]: {
+          flex: 1,
+          height: "100%",
+          minHeight: "100%",
+          maxHeight: "none",
+          overflow: "auto",
+          width: "100%",
+          transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+        },
+        [`${token.componentCls}-background`]: {
+          // 放大时保持和普通状态相同的背景效果
+          opacity: 1,
+          backgroundColor: "rgba(0, 9, 50, 0.1)"
+        }
+      },
       "&-background": {
         boxSizing: "border-box",
         transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)",
@@ -129,6 +176,7 @@ var genStyle = (token) => {
         overflowY: "visible",
         scrollbarColor: "var(--color-gray-text-tertiary) transparent",
         scrollbarWidth: "thin",
+        transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
         "&&-disabled": {
           backgroundColor: "rgba(0,0,0,0.04)",
           cursor: "not-allowed"
@@ -143,7 +191,8 @@ var genStyle = (token) => {
         maxHeight: "inherit",
         scrollbarColor: "var(--color-gray-text-tertiary) transparent",
         scrollbarWidth: "thin",
-        borderRadius: "inherit"
+        borderRadius: "inherit",
+        transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
       },
       "&&-disabled": {
         backgroundColor: "rgba(0,0,0,0.04)",
@@ -182,7 +231,15 @@ var genStyle = (token) => {
         display: "flex",
         gap: "8px",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        "&-vertical": {
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          height: "auto",
+          minHeight: "60px"
+          // 确保有足够的高度显示多个按钮
+        }
       },
       "&-send-has-tools": {
         boxSizing: "border-box",