@ant-design/agentic-ui 2.0.10 → 2.0.13

package/dist/MarkdownEditor/types.d.ts

@@ -193,7 +193,7 @@ export type MarkdownEditorProps = {
             /** 元素是否即将进入视口 */
             isIntersecting: boolean;
             /** 元素在文档中的位置信息 */
-            elementInfo?: {
+            elementInfo: {
                 /** 元素类型 */
                 type: string;
                 /** 元素在文档中的索引 */

package/dist/MarkdownInputField/AttachmentButton/AttachmentButtonPopover.d.ts

@@ -1,20 +1,15 @@
 import React from 'react';
+export type SupportedFormat = {
+    type: string;
+    maxSize: number;
+    extensions: string[];
+    icon: React.ReactNode;
+    content?: React.ReactNode;
+};
 export type AttachmentButtonPopoverProps = {
     children?: React.ReactNode;
-    supportedFormat?: {
-        type: string;
-        maxSize: number;
-        extensions: string[];
-        icon: React.ReactNode;
-        content?: React.ReactNode;
-    };
+    supportedFormat?: SupportedFormat;
 };
-/**
- * 支持的文件格式配置
- *
- * 定义系统支持的文件类型、大小限制和扩展名等信息。
- * 包括图片、文档、音频、视频等常见文件类型。
- */
 export declare const SupportedFileFormats: {
     image: {
         icon: React.JSX.Element;
@@ -41,64 +36,6 @@ export declare const SupportedFileFormats: {
         extensions: string[];
     };
 };
-/**
- * AttachmentSupportedFormatsContent 组件 - 附件支持格式内容组件
- *
- * 该组件用于显示支持的文件格式信息，包括文件类型、大小限制、扩展名等。
- * 提供文件上传格式的说明和指导。
- *
- * @component
- * @description 附件支持格式内容组件，显示支持的文件格式信息
- * @param {AttachmentButtonPopoverProps} props - 组件属性
- * @param {React.ReactNode} [props.children] - 子组件
- * @param {Object} [props.supportedFormat] - 自定义支持的文件格式
- *
- * @example
- * ```tsx
- * <AttachmentSupportedFormatsContent
- *   supportedFormat={customFormat}
- * />
- * ```
- *
- * @returns {React.ReactElement|null} 渲染的支持格式内容组件
- *
- * @remarks
- * - 显示支持的文件类型
- * - 显示文件大小限制
- * - 显示文件扩展名
- * - 提供文件类型图标
- * - 支持自定义格式配置
- * - 响应式布局
- */
-export declare const AttachmentSupportedFormatsContent: (props: AttachmentButtonPopoverProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element | null;
-/**
- * AttachmentButtonPopover 组件 - 附件按钮弹出框组件
- *
- * 该组件提供一个弹出框，用于显示支持的文件格式信息。
- * 当用户悬停在附件按钮上时，显示支持的文件类型、大小限制等详细信息。
- *
- * @component
- * @description 附件按钮弹出框组件，显示支持的文件格式信息
- * @param {AttachmentButtonPopoverProps} props - 组件属性
- * @param {React.ReactNode} [props.children] - 子组件，通常是附件按钮
- * @param {Object} [props.supportedFormat] - 自定义支持的文件格式
- *
- * @example
- * ```tsx
- * <AttachmentButtonPopover supportedFormat={customFormat}>
- *   <Button>上传附件</Button>
- * </AttachmentButtonPopover>
- * ```
- *
- * @returns {React.ReactElement|null} 渲染的弹出框组件，无支持格式时返回null
- *
- * @remarks
- * - 提供悬停触发的弹出框
- * - 显示支持的文件格式信息
- * - 支持自定义格式配置
- * - 集成Ant Design Popover组件
- * - 响应式布局
- * - 美观的信息展示
- */
+export declare const AttachmentSupportedFormatsContent: React.FC<AttachmentButtonPopoverProps>;
 export declare const AttachmentButtonPopover: React.FC<AttachmentButtonPopoverProps>;
 export default AttachmentButtonPopover;

package/dist/MarkdownInputField/AttachmentButton/AttachmentButtonPopover.js

@@ -1,3 +1,23 @@
+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/AttachmentButton/AttachmentButtonPopover.tsx
 import {
   AudioOutlined,
@@ -6,19 +26,36 @@ import {
   VideoCameraOutlined
 } from "@ant-design/icons";
 import { Tooltip } from "antd";
-import React, { useMemo } from "react";
+import React from "react";
 import { kbToSize } from "./utils";
+var FILE_SIZE_UNITS = {
+  KB: 1024,
+  MB: 1024 * 1024
+};
+var DEFAULT_MAX_SIZE = 5e3;
+var CONTENT_STYLE = {
+  fontSize: 16,
+  lineHeight: "1.5em",
+  maxWidth: 275
+};
+var TOOLTIP_CONFIG = {
+  arrow: false,
+  mouseEnterDelay: 0.3,
+  mouseLeaveDelay: 0.1,
+  trigger: "hover",
+  placement: "topRight"
+};
 var SupportedFileFormats = {
   image: {
     icon: /* @__PURE__ */ React.createElement(FileImageOutlined, null),
     type: "图片",
-    maxSize: 10 * 1024,
+    maxSize: 10 * FILE_SIZE_UNITS.KB,
     extensions: ["jpg", "jpeg", "png", "gif"]
   },
   document: {
     icon: /* @__PURE__ */ React.createElement(FileTextFilled, null),
     type: "文档",
-    maxSize: 10 * 1024,
+    maxSize: 10 * FILE_SIZE_UNITS.KB,
     extensions: [
       "pdf",
       "markdown",
@@ -35,62 +72,40 @@ var SupportedFileFormats = {
   audio: {
     icon: /* @__PURE__ */ React.createElement(AudioOutlined, null),
     type: "音频",
-    maxSize: 50 * 1024,
+    maxSize: 50 * FILE_SIZE_UNITS.KB,
     extensions: ["mp3", "wav"]
   },
   video: {
     icon: /* @__PURE__ */ React.createElement(VideoCameraOutlined, null),
     type: "视频",
-    maxSize: 100 * 1024,
+    maxSize: 100 * FILE_SIZE_UNITS.KB,
     extensions: ["mp4", "avi", "mov"]
   }
 };
-var AttachmentSupportedFormatsContent = (props) => {
+var buildFormatMessage = (format) => {
   var _a;
-  const supportedFormat = useMemo(() => {
-    if (props.supportedFormat) {
-      return props.supportedFormat;
-    }
-    return SupportedFileFormats.image;
-  }, [
-    props.supportedFormat
-  ]);
-  if (!supportedFormat)
-    return null;
-  if (supportedFormat.content) {
-    return supportedFormat.content;
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        fontSize: 16,
-        lineHeight: "1.5em",
-        maxWidth: 275
-      }
-    },
-    `支持上传文件，每个文件不超过 ${kbToSize((supportedFormat == null ? void 0 : supportedFormat.maxSize) || 5e3)}，支持 ${((_a = supportedFormat == null ? void 0 : supportedFormat.extensions) == null ? void 0 : _a.join(", ")) || ""}等格式。`
-  );
+  const maxSize = kbToSize(format.maxSize || DEFAULT_MAX_SIZE);
+  const extensions = ((_a = format.extensions) == null ? void 0 : _a.join(", ")) || "";
+  return `支持上传文件，每个文件不超过 ${maxSize}，支持 ${extensions}等格式。`;
 };
-var AttachmentButtonPopover = (props) => {
-  if (!(props == null ? void 0 : props.supportedFormat))
+var FormatContent = ({ format }) => {
+  if (format.content)
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, format.content);
+  return /* @__PURE__ */ React.createElement("div", { style: CONTENT_STYLE }, buildFormatMessage(format));
+};
+var AttachmentSupportedFormatsContent = ({ supportedFormat }) => {
+  const format = supportedFormat || SupportedFileFormats.image;
+  return /* @__PURE__ */ React.createElement(FormatContent, { format });
+};
+var AttachmentButtonPopover = ({ children, supportedFormat }) => {
+  if (!supportedFormat)
     return null;
   return /* @__PURE__ */ React.createElement(
     Tooltip,
-    {
-      arrow: false,
-      title: /* @__PURE__ */ React.createElement(
-        AttachmentSupportedFormatsContent,
-        {
-          supportedFormat: props.supportedFormat
-        }
-      ),
-      mouseEnterDelay: 0.3,
-      mouseLeaveDelay: 0.1,
-      trigger: "hover",
-      placement: "topRight"
-    },
-    props.children
+    __spreadProps(__spreadValues({}, TOOLTIP_CONFIG), {
+      title: /* @__PURE__ */ React.createElement(AttachmentSupportedFormatsContent, { supportedFormat })
+    }),
+    children
   );
 };
 var AttachmentButtonPopover_default = AttachmentButtonPopover;

package/dist/MarkdownInputField/AttachmentButton/AttachmentFileList/AttachmentFileListItem.js

@@ -12,60 +12,73 @@ var getFileNameWithoutExtension = (fileName) => {
 var getFileExtension = (fileName) => {
   return fileName.split(".").slice(-1)[0];
 };
+var buildClassName = (...classes) => {
+  return classNames(...classes);
+};
 var FileIcon = ({ file, prefixCls, hashId }) => {
-  const iconClassName = classNames(`${prefixCls}-file-icon`, hashId);
   const status = file.status || "done";
   const iconMap = {
-    uploading: /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-uploading-icon`, hashId) }, /* @__PURE__ */ React.createElement(FileUploadingSpin, null)),
-    error: /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-error-icon`, hashId) }, /* @__PURE__ */ React.createElement(FileFailed, null)),
+    uploading: /* @__PURE__ */ React.createElement("div", { className: buildClassName(`${prefixCls}-uploading-icon`, hashId) }, /* @__PURE__ */ React.createElement(FileUploadingSpin, null)),
+    error: /* @__PURE__ */ React.createElement("div", { className: buildClassName(`${prefixCls}-error-icon`, hashId) }, /* @__PURE__ */ React.createElement(FileFailed, null)),
     done: /* @__PURE__ */ React.createElement(
       AttachmentFileIcon,
       {
         file,
-        className: classNames(`${prefixCls}-file-icon-img`, hashId)
+        className: buildClassName(`${prefixCls}-file-icon-img`, hashId)
       }
     )
   };
-  return /* @__PURE__ */ React.createElement("div", { className: iconClassName }, iconMap[status]);
+  return /* @__PURE__ */ React.createElement("div", { className: buildClassName(`${prefixCls}-file-icon`, hashId) }, iconMap[status]);
 };
-var FileStatus = ({ file, prefixCls, hashId }) => {
-  const statusClassName = classNames(`${prefixCls}-file-size`, hashId);
-  if (file.status === "uploading") {
-    return /* @__PURE__ */ React.createElement("div", { className: statusClassName }, "上传中...");
-  }
-  if (file.status === "error") {
-    return /* @__PURE__ */ React.createElement(
+var FileSizeInfo = ({ file, prefixCls, hashId }) => {
+  const status = file.status || "done";
+  const baseClassName = buildClassName(`${prefixCls}-file-size`, hashId);
+  const statusContentMap = {
+    uploading: "上传中...",
+    error: /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(statusClassName, `${prefixCls}-file-size-error`)
+        className: buildClassName(
+          baseClassName,
+          `${prefixCls}-file-size-error`
+        )
       },
       "上传失败"
-    );
-  }
-  const fileExtension = getFileExtension(file.name);
-  const fileSize = file.size ? kbToSize(file.size / 1024) : "";
-  const sizeItems = [fileExtension, fileSize].filter(Boolean);
-  return /* @__PURE__ */ React.createElement("div", { className: statusClassName }, sizeItems.map((item) => /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      key: item,
-      className: classNames(`${prefixCls}-file-size-item`, hashId)
-    },
-    item
-  )));
+    ),
+    done: (() => {
+      const fileExtension = getFileExtension(file.name);
+      const fileSize = file.size ? kbToSize(file.size / 1024) : "";
+      const sizeItems = [fileExtension, fileSize].filter(Boolean);
+      return sizeItems.map((item) => /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: item,
+          className: buildClassName(`${prefixCls}-file-size-item`, hashId)
+        },
+        item
+      ));
+    })()
+  };
+  const content = statusContentMap[status];
+  return typeof content === "string" ? /* @__PURE__ */ React.createElement("div", { className: baseClassName }, content) : /* @__PURE__ */ React.createElement("div", { className: baseClassName }, content);
 };
-var DeleteButton = ({ file, onClick, prefixCls, hashId }) => {
-  if (file.status === "uploading")
+var DeleteButton = ({ isVisible, onClick, prefixCls, hashId }) => {
+  if (!isVisible)
     return null;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       onClick,
-      className: classNames(`${prefixCls}-close-icon`, hashId)
+      className: buildClassName(`${prefixCls}-close-icon`, hashId)
     },
     /* @__PURE__ */ React.createElement(X, { role: "img", "aria-label": "X" })
   );
 };
+var ANIMATION_VARIANTS = {
+  hidden: { y: 20, opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+  exit: { opacity: 0, y: -20 }
+};
 var AttachmentFileListItem = ({
   file,
   prefixCls,
@@ -75,13 +88,16 @@ var AttachmentFileListItem = ({
   onDelete,
   className
 }) => {
+  const isErrorStatus = file.status === "error";
+  const isDoneStatus = file.status === "done";
+  const canDelete = file.status !== "uploading";
   const handleFileClick = () => {
-    if (file.status !== "done")
+    if (!isDoneStatus)
       return;
     onPreview == null ? void 0 : onPreview();
   };
   const handleRetryClick = () => {
-    if (file.status !== "error")
+    if (!isErrorStatus)
       return;
     onRetry == null ? void 0 : onRetry();
   };
@@ -89,30 +105,33 @@ var AttachmentFileListItem = ({
     e.stopPropagation();
     onDelete == null ? void 0 : onDelete();
   };
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: "点击重试", open: file.status === "error" || void 0 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Tooltip, { title: "点击重试", open: isErrorStatus || void 0 }, /* @__PURE__ */ React.createElement(
     motion.div,
     {
-      variants: {
-        hidden: { y: 20, opacity: 0 },
-        visible: { y: 0, opacity: 1 }
-      },
+      variants: ANIMATION_VARIANTS,
       onClick: handleFileClick,
       className,
-      exit: { opacity: 0, y: -20 }
+      exit: ANIMATION_VARIANTS.exit
     },
     /* @__PURE__ */ React.createElement(FileIcon, { file, prefixCls, hashId }),
-    /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-file-info`, hashId) }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: buildClassName(`${prefixCls}-file-info`, hashId) }, /* @__PURE__ */ React.createElement(
       "div",
       {
         onClick: handleRetryClick,
-        className: classNames(`${prefixCls}-file-name`, hashId)
+        className: buildClassName(`${prefixCls}-file-name`, hashId)
       },
-      /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefixCls}-file-name-text`, hashId) }, getFileNameWithoutExtension(file.name))
-    ), /* @__PURE__ */ React.createElement(FileStatus, { file, prefixCls, hashId })),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: buildClassName(`${prefixCls}-file-name-text`, hashId)
+        },
+        getFileNameWithoutExtension(file.name)
+      )
+    ), /* @__PURE__ */ React.createElement(FileSizeInfo, { file, prefixCls, hashId })),
     /* @__PURE__ */ React.createElement(
       DeleteButton,
       {
-        file,
+        isVisible: canDelete,
         onClick: handleDeleteClick,
         prefixCls,
         hashId

package/dist/MarkdownInputField/AttachmentButton/AttachmentFileList/index.d.ts

@@ -8,45 +8,4 @@ export type AttachmentFileListProps = {
     onRetry?: (file: AttachmentFile) => void;
     onClearFileMap?: () => void;
 };
-/**
- * AttachmentFileList 组件 - 附件文件列表组件
- *
- * 该组件用于展示已上传的附件文件列表，支持文件预览、下载、删除、重试等功能。
- * 提供动画效果、图片预览、文件状态显示等特性。
- *
- * @component
- * @description 附件文件列表组件，用于展示已上传的附件
- * @param {AttachmentFileListProps} props - 组件属性
- * @param {Map<string, AttachmentFile>} [props.fileMap] - 文件映射表
- * @param {(file: AttachmentFile) => void} props.onDelete - 删除文件回调
- * @param {(file: AttachmentFile) => void} [props.onPreview] - 预览文件回调
- * @param {(file: AttachmentFile) => void} [props.onDownload] - 下载文件回调
- * @param {(file: AttachmentFile) => void} [props.onRetry] - 重试上传文件回调（文件上传失败时调用）
- * @param {() => void} [props.onClearFileMap] - 清空文件映射回调
- *
- * @example
- * ```tsx
- * <AttachmentFileList
- *   fileMap={fileMap}
- *   onDelete={handleDelete}
- *   onPreview={handlePreview}
- *   onDownload={handleDownload}
- *   onRetry={handleRetry}
- *   onClearFileMap={handleClearAll}
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的附件文件列表组件
- *
- * @remarks
- * - 支持文件预览和下载
- * - 提供文件删除和重试功能
- * - 集成动画效果
- * - 支持图片预览
- * - 显示文件状态（上传中、完成、错误）
- * - 响应式布局
- * - 支持文件大小格式化
- * - 集成Ant Design组件
- * - 文件上传失败时可重试上传
- */
 export declare const AttachmentFileList: React.FC<AttachmentFileListProps>;

package/dist/MarkdownInputField/AttachmentButton/AttachmentFileList/index.js

@@ -1,30 +1,10 @@
-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/AttachmentButton/AttachmentFileList/index.tsx
 import { X } from "@sofa-design/icons";
 import { ConfigProvider, Image } from "antd";
 import classNames from "classnames";
 import { AnimatePresence, motion } from "framer-motion";
 import React, { useContext } from "react";
-import { ActionIconBox } from "../../../components/ActionIconBox";
+import { ActionIconBox } from "../../../Components/ActionIconBox";
 import { isImageFile } from "../utils";
 import { AttachmentFileListItem } from "./AttachmentFileListItem";
 import { useStyle } from "./style";
@@ -48,21 +28,50 @@ var HIDDEN_STYLE = {
   overflow: "hidden",
   padding: 0
 };
-var CLEAR_BUTTON_STYLE = {
-  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-};
 var IMAGE_PREVIEW_STYLE = {
   display: "none"
 };
-var AttachmentFileList = (props) => {
-  const { fileMap, onDelete, onPreview, onDownload, onRetry, onClearFileMap } = props;
+var CLEAR_BUTTON_TRANSITION = "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+var getFileKey = (file, index) => {
+  return (file == null ? void 0 : file.uuid) || (file == null ? void 0 : file.name) || index;
+};
+var openFileInNewWindow = (url) => {
+  if (typeof window === "undefined" || !url)
+    return;
+  window.open(url, "_blank");
+};
+var ClearButton = ({ visible, opacity, onClick, className }) => {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    ActionIconBox,
+    {
+      style: { transition: CLEAR_BUTTON_TRANSITION, opacity },
+      onClick,
+      className
+    },
+    /* @__PURE__ */ React.createElement(X, null)
+  );
+};
+var AttachmentFileList = ({
+  fileMap,
+  onDelete,
+  onPreview,
+  onDownload,
+  onRetry,
+  onClearFileMap
+}) => {
   const context = useContext(ConfigProvider.ConfigContext);
   const prefix = context == null ? void 0 : context.getPrefixCls("md-editor-attachment-list");
   const { wrapSSR, hashId } = useStyle(prefix);
   const [imgSrc, setImgSrc] = React.useState(void 0);
   const fileList = Array.from((fileMap == null ? void 0 : fileMap.values()) || []);
+  const fileCount = (fileMap == null ? void 0 : fileMap.size) || 0;
   const hasFiles = fileList.length > 0;
   const isAnyUploading = fileList.some((file) => file.status === "uploading");
+  const canShowClearButton = !isAnyUploading;
+  const containerStyle = fileCount ? {} : HIDDEN_STYLE;
+  const clearButtonOpacity = fileCount ? 1 : 0;
   const handlePreview = (file) => {
     if (onPreview) {
       onPreview(file);
@@ -72,36 +81,16 @@ var AttachmentFileList = (props) => {
       setImgSrc(file.previewUrl || file.url);
       return;
     }
-    if (typeof window === "undefined")
-      return;
-    window.open(file.previewUrl || file.url, "_blank");
+    openFileInNewWindow(file.previewUrl || file.url);
   };
   const handlePreviewClose = (visible) => {
-    if (!visible) {
+    if (!visible)
       setImgSrc(void 0);
-    }
-  };
-  const getContainerStyle = () => {
-    return (fileMap == null ? void 0 : fileMap.size) ? {} : HIDDEN_STYLE;
-  };
-  const getClearButtonStyle = () => {
-    return __spreadProps(__spreadValues({}, CLEAR_BUTTON_STYLE), {
-      opacity: (fileMap == null ? void 0 : fileMap.size) ? 1 : 0
-    });
-  };
-  const renderClearButton = () => {
-    if (isAnyUploading)
-      return null;
-    return /* @__PURE__ */ React.createElement(
-      ActionIconBox,
-      {
-        style: getClearButtonStyle(),
-        onClick: onClearFileMap,
-        className: classNames(`${prefix}-close-icon`, hashId)
-      },
-      /* @__PURE__ */ React.createElement(X, null)
-    );
   };
+  const handleDelete = (file) => () => onDelete(file);
+  const handlePreviewFile = (file) => () => handlePreview(file);
+  const handleDownload = (file) => () => onDownload == null ? void 0 : onDownload(file);
+  const handleRetry = (file) => () => onRetry == null ? void 0 : onRetry(file);
   return wrapSSR(
     /* @__PURE__ */ React.createElement(
       "div",
@@ -117,7 +106,7 @@ var AttachmentFileList = (props) => {
           whileInView: "visible",
           initial: "hidden",
           animate: "visible",
-          style: getContainerStyle(),
+          style: containerStyle,
           className: classNames(prefix, hashId)
         },
         /* @__PURE__ */ React.createElement(AnimatePresence, { initial: false }, fileList.map((file, index) => /* @__PURE__ */ React.createElement(
@@ -126,12 +115,12 @@ var AttachmentFileList = (props) => {
             prefixCls: `${prefix}-item`,
             hashId,
             className: classNames(hashId, `${prefix}-item`),
-            key: (file == null ? void 0 : file.uuid) || (file == null ? void 0 : file.name) || index,
+            key: getFileKey(file, index),
             file,
-            onDelete: () => onDelete(file),
-            onPreview: () => handlePreview(file),
-            onDownload: () => onDownload == null ? void 0 : onDownload(file),
-            onRetry: () => onRetry == null ? void 0 : onRetry(file)
+            onDelete: handleDelete(file),
+            onPreview: handlePreviewFile(file),
+            onDownload: handleDownload(file),
+            onRetry: handleRetry(file)
           }
         ))),
         /* @__PURE__ */ React.createElement(
@@ -150,7 +139,15 @@ var AttachmentFileList = (props) => {
           }
         )
       ),
-      renderClearButton()
+      /* @__PURE__ */ React.createElement(
+        ClearButton,
+        {
+          visible: canShowClearButton,
+          opacity: clearButtonOpacity,
+          onClick: onClearFileMap,
+          className: classNames(`${prefix}-close-icon`, hashId)
+        }
+      )
     )
   );
 };

package/dist/MarkdownInputField/AttachmentButton/AttachmentFileList/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}`]: {