@ant-design/agentic-ui 2.0.8 → 2.0.12

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

@@ -4,81 +4,123 @@ 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";
-var AttachmentFileList = (props) => {
-  var _a, _b, _c, _d, _e;
+var ANIMATION_VARIANTS = {
+  visible: {
+    opacity: 1,
+    transition: {
+      when: "beforeChildren",
+      staggerChildren: 0.1
+    }
+  },
+  hidden: {
+    opacity: 0,
+    transition: {
+      when: "afterChildren"
+    }
+  }
+};
+var HIDDEN_STYLE = {
+  height: 0,
+  overflow: "hidden",
+  padding: 0
+};
+var IMAGE_PREVIEW_STYLE = {
+  display: "none"
+};
+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);
+      return;
+    }
+    if (isImageFile(file)) {
+      setImgSrc(file.previewUrl || file.url);
+      return;
+    }
+    openFileInNewWindow(file.previewUrl || file.url);
+  };
+  const handlePreviewClose = (visible) => {
+    if (!visible)
+      setImgSrc(void 0);
+  };
+  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",
       {
         className: classNames(`${prefix}-container`, hashId, {
-          [`${prefix}-container-empty`]: Array.from(((_a = props.fileMap) == null ? void 0 : _a.values()) || []).length === 0
+          [`${prefix}-container-empty`]: !hasFiles
         })
       },
       /* @__PURE__ */ React.createElement(
         motion.div,
         {
-          variants: {
-            visible: {
-              opacity: 1,
-              transition: {
-                when: "beforeChildren",
-                staggerChildren: 0.1
-              }
-            },
-            hidden: {
-              opacity: 0,
-              transition: {
-                when: "afterChildren"
-              }
-            }
-          },
+          variants: ANIMATION_VARIANTS,
           whileInView: "visible",
           initial: "hidden",
           animate: "visible",
-          style: ((_b = props.fileMap) == null ? void 0 : _b.size) ? {} : { height: 0, overflow: "hidden", padding: 0 },
+          style: containerStyle,
           className: classNames(prefix, hashId)
         },
-        /* @__PURE__ */ React.createElement(AnimatePresence, { initial: false }, Array.from(((_c = props.fileMap) == null ? void 0 : _c.values()) || []).map((file, index) => /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(AnimatePresence, { initial: false }, fileList.map((file, index) => /* @__PURE__ */ React.createElement(
           AttachmentFileListItem,
           {
             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: () => {
-              props.onDelete(file);
-            },
-            onPreview: () => {
-              var _a2;
-              if (props.onPreview) {
-                (_a2 = props.onPreview) == null ? void 0 : _a2.call(props, file);
-                return;
-              }
-              if (isImageFile(file)) {
-                setImgSrc(file.previewUrl || file.url);
-                return;
-              }
-              if (typeof window === "undefined")
-                return;
-              window.open(file.previewUrl || file.url, "_blank");
-            },
-            onDownload: () => {
-              var _a2;
-              return (_a2 = props.onDownload) == null ? void 0 : _a2.call(props, file);
-            },
-            onRetry: () => {
-              var _a2;
-              return (_a2 = props.onRetry) == null ? void 0 : _a2.call(props, file);
-            }
+            onDelete: handleDelete(file),
+            onPreview: handlePreviewFile(file),
+            onDownload: handleDownload(file),
+            onRetry: handleRetry(file)
           }
         ))),
         /* @__PURE__ */ React.createElement(
@@ -87,37 +129,25 @@ var AttachmentFileList = (props) => {
             key: "preview",
             src: imgSrc,
             alt: "Preview",
-            style: { display: "none" },
+            style: IMAGE_PREVIEW_STYLE,
             preview: {
               visible: !!imgSrc,
               scaleStep: 1,
               src: imgSrc,
-              onVisibleChange: (value) => {
-                if (!value) {
-                  setImgSrc(void 0);
-                }
-              }
+              onVisibleChange: handlePreviewClose
             }
           }
         )
       ),
-      Array.from(((_d = props.fileMap) == null ? void 0 : _d.values()) || []).every(
-        (file) => file.status !== "uploading"
-      ) ? /* @__PURE__ */ React.createElement(
-        ActionIconBox,
+      /* @__PURE__ */ React.createElement(
+        ClearButton,
         {
-          style: {
-            opacity: ((_e = props.fileMap) == null ? void 0 : _e.size) ? 1 : 0,
-            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-          },
-          onClick: () => {
-            var _a2;
-            (_a2 = props.onClearFileMap) == null ? void 0 : _a2.call(props);
-          },
-          className: classNames(`${`${prefix}`}-close-icon`, hashId)
-        },
-        /* @__PURE__ */ React.createElement(X, null)
-      ) : null
+          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}`]: {

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

@@ -1,142 +1,97 @@
 import { default as React } from 'react';
 import { AttachmentButtonPopoverProps } from './AttachmentButtonPopover';
-import { AttachmentFile } from './types';
+import { AttachmentFile, UploadResponse } from './types';
 export * from './AttachmentButtonPopover';
+export type { AttachmentFile, UploadResponse } from './types';
 /**
- * AttachmentButton 组件的属性
+ * AttachmentButton 组件属性
  */
 export type AttachmentButtonProps = {
-    /**
-     * 处理文件上传的函数。返回一个 Promise，解析为字符串（通常是 URL 或文件 ID）。
-     * @param file - 要上传的附件文件
-     * @returns 解析为已上传文件标识符的 Promise
-     * @example
-     * const uploadFile = async (file: AttachmentFile) => {
-     *   const response = await api.uploadFile(file);
-     *   return response.fileId;
-     * }
-     */
-    upload?: (file: AttachmentFile) => Promise<string>;
-    /**
-     * 存储当前附件文件的 Map，以文件 ID 为键，文件对象为值
-     * @example
-     * const fileMap = new Map<string, AttachmentFile>([
-     *   ['file-1', { name: 'document.pdf', size: 1024, type: 'application/pdf' }]
-     * ]);
-     */
+    /** 文件上传处理函数，返回文件 URL */
+    upload?: (file: AttachmentFile, index: number) => Promise<string>;
+    /** 文件上传处理函数（返回完整响应），优先级高于 upload */
+    uploadWithResponse?: (file: AttachmentFile, index: number) => Promise<UploadResponse>;
+    /** 文件映射表，用于存储已上传的文件 */
     fileMap?: Map<string, AttachmentFile>;
-    /**
-     * 当附件文件集合发生变化时触发的回调
-     * @param files - 更新后的文件 Map
-     * @example
-     * const handleFilesChange = (files: Map<string, AttachmentFile>) => {
-     *   console.log('Files changed:', Array.from(files.values()));
-     *   setAttachedFiles(files);
-     * }
-     */
+    /** 文件映射表变更时的回调 */
     onFileMapChange?: (files?: Map<string, AttachmentFile>) => void;
-    /**
-     * 定义附件按钮支持的文件格式
-     * @see AttachmentButtonPopoverProps.supportedFormat
-     * @example
-     * const format = {
-     *   icon: <FileImageOutlined />,
-     *   type: '图片',
-     *   maxSize: 10 * 1024,
-     *   extensions: ['jpg', 'jpeg', 'png', 'gif'],
-     * };
-     */
-    supportedFormat?: AttachmentButtonPopoverProps['supportedFormat'] /**
-     * 是否禁用附件上传按钮
-     */;
+    /** 支持的文件格式配置 */
+    supportedFormat?: AttachmentButtonPopoverProps['supportedFormat'];
+    /** 是否禁用按钮 */
     disabled?: boolean;
-    /**
-     * 自定义渲染函数，用于完全替换默认的 AttachmentButtonPopover
-     * @param children - 需要包装的子元素（通常是 Paperclip 图标）
-     * @param supportedFormat - 支持的文件格式配置
-     * @returns 自定义的渲染组件
-     * @example
-     * const customRender = ({ children, supportedFormat }) => (
-     *   <Tooltip title="自定义上传提示">
-     *     {children}
-     *   </Tooltip>
-     * );
-     */
+    /** 自定义渲染函数，用于替换默认的 Popover */
     render?: (props: {
         children: React.ReactNode;
         supportedFormat?: AttachmentButtonPopoverProps['supportedFormat'];
     }) => React.ReactElement;
-    /**
-     * 删除文件的回调函数
-     * @param file - 被删除的文件对象
-     * @example
-     * const handleDelete = async (file: AttachmentFile) => {
-     *   await api.deleteFile(file.id);
-     *  console.log('File deleted:', file.name);
-     * }
-     */
+    /** 删除文件回调 */
     onDelete?: (file: AttachmentFile) => Promise<void>;
+    /** 预览文件回调 */
     onPreview?: (file: AttachmentFile) => Promise<void>;
+    /** 下载文件回调 */
     onDownload?: (file: AttachmentFile) => Promise<void>;
+    /** 单个文件最大大小（字节） */
     maxFileSize?: number;
+    /** 最大文件数量 */
     maxFileCount?: number;
+    /** 最小文件数量 */
     minFileCount?: number;
 };
-export declare const upLoadFileToServer: (files: ArrayLike<File>, props: {
-    fileMap?: Map<string, AttachmentFile> | undefined;
-    onFileMapChange?: ((files?: Map<string, AttachmentFile>) => void) | undefined;
-    upload?: ((file: AttachmentFile, index: number) => Promise<string>) | undefined;
-    maxFileSize?: number | undefined;
-    maxFileCount?: number | undefined;
-    minFileCount?: number | undefined;
+/**
+ * 文件上传配置
+ */
+type UploadProps = {
+    /** 文件映射表 */
+    fileMap?: Map<string, AttachmentFile>;
+    /** 文件映射变更回调 */
+    onFileMapChange?: (files?: Map<string, AttachmentFile>) => void;
+    /** 上传函数，返回文件 URL */
+    upload?: (file: AttachmentFile, index: number) => Promise<string>;
+    /** 上传函数（返回完整响应） */
+    uploadWithResponse?: (file: AttachmentFile, index: number) => Promise<UploadResponse>;
+    /** 单文件最大大小（字节） */
+    maxFileSize?: number;
+    /** 最大文件数量 */
+    maxFileCount?: number;
+    /** 最小文件数量 */
+    minFileCount?: number;
+    /** 国际化文案 */
     locale?: any;
-}) => Promise<void>;
+};
 /**
- * 附件上传按钮组件
+ * 上传文件到服务器
  *
- * 该组件提供一个可点击的按钮，用于上传文件附件。支持多种文件格式，包括图片、文档、音频和视频。
- *
- * @component
- * @param {object} props - 组件属性
- * @param {Map<string, AttachmentFile>} [props.fileMap] - 文件映射表，用于存储上传的文件
- * @param {(map: Map<string, AttachmentFile>) => void} [props.onFileMapChange] - 文件映射表变更时的回调函数
- * @param {(file: AttachmentFile) => Promise<string>} [props.upload] - 文件上传处理函数，返回文件URL的Promise
- * @param {Array<{icon: React.ReactNode, type: string, maxSize: number, extensions: string[]}>} [props.supportedFormats] - 支持的文件格式配置，
- *   如不提供则使用默认配置（包括图片、文档、音频、视频格式）
- * @param {function} [props.render] - 自定义渲染函数，用于完全替换默认的 AttachmentButtonPopover
+ * @param files - 要上传的文件列表
+ * @param props - 上传配置项
+ * @param props.upload - 上传函数，返回文件 URL
+ * @param props.uploadWithResponse - 上传函数（返回完整响应）
+ * @param props.fileMap - 文件映射表
+ * @param props.onFileMapChange - 文件映射变更回调
+ * @param props.maxFileSize - 单文件最大大小（字节）
+ * @param props.maxFileCount - 最大文件数量
+ * @param props.minFileCount - 最小文件数量
+ * @param props.locale - 国际化文案
+ */
+export declare const upLoadFileToServer: (files: ArrayLike<File>, props: UploadProps) => Promise<void>;
+/**
+ * 附件上传按钮组件
  *
- * @example
- * // 使用默认 Popover
- * ```tsx
- * <AttachmentButton
- *   fileMap={fileMap}
- *   onFileMapChange={handleFileMapChange}
- *   upload={uploadFileToServer}
- * />
- * ```
+ * 提供文件附件上传功能，支持图片、文档、音频、视频等多种格式
  *
  * @example
- * // 使用自定义渲染函数
  * ```tsx
- * const customRender = ({ children, supportedFormat }) => (
- *   <Tooltip title={`支持 ${supportedFormat?.type} 格式`}>
- *     <div className="custom-attachment-wrapper">
- *       {children}
- *     </div>
- *   </Tooltip>
- * );
- *
  * <AttachmentButton
+ *   supportedFormat={SupportedFileFormats.image}
+ *   upload={uploadFile}
  *   fileMap={fileMap}
- *   onFileMapChange={handleFileMapChange}
- *   upload={uploadFileToServer}
- *   render={customRender}
+ *   onFileMapChange={setFileMap}
+ *   uploadImage={handleUpload}
  * />
  * ```
- *
- * @returns {React.ReactElement} 渲染的附件按钮组件
  */
 export declare const AttachmentButton: React.FC<AttachmentButtonProps & {
+    /** 上传图片的处理函数 */
     uploadImage(): Promise<void>;
+    /** 按钮标题文本 */
     title?: React.ReactNode;
 }>;