@ant-design/agentic-ui 2.0.6 → 2.0.10

package/dist/Bubble/style.js

@@ -144,10 +144,12 @@ var genStyle = (token, classNames) => {
         display: "flex",
         maxWidth: "min(860px,100%)",
         "&-left": {
-          justifyContent: "flex-start"
+          justifyContent: "flex-start",
+          maxWidth: "min(860px,100%)"
         },
         "&-right": {
-          justifyContent: "flex-end"
+          justifyContent: "flex-end",
+          maxWidth: "min(860px,100%)"
         }
       },
       "&-bubble-before": {

package/dist/MarkdownEditor/editor/Editor.js

@@ -598,7 +598,7 @@ var SlateMarkdownEditor = (props) => {
   };
   const elementRenderElement = useCallback(
     (eleProps) => {
-      var _a2, _b2, _c2, _d2;
+      var _a2, _b2, _c2, _d2, _e;
       const defaultDom = /* @__PURE__ */ React.createElement(
         ErrorBoundary,
         {
@@ -638,7 +638,8 @@ var SlateMarkdownEditor = (props) => {
           LazyElement,
           {
             placeholderHeight: (_c2 = props.lazy) == null ? void 0 : _c2.placeholderHeight,
-            rootMargin: (_d2 = props.lazy) == null ? void 0 : _d2.rootMargin
+            rootMargin: (_d2 = props.lazy) == null ? void 0 : _d2.rootMargin,
+            renderPlaceholder: (_e = props.lazy) == null ? void 0 : _e.renderPlaceholder
           },
           renderedDom
         );

package/dist/MarkdownEditor/editor/components/LazyElement/index.d.ts

@@ -11,6 +11,24 @@ export interface LazyElementProps {
     rootMargin?: string;
     /** 占位符样式 */
     placeholderStyle?: React.CSSProperties;
+    /** 自定义占位符渲染函数 */
+    renderPlaceholder?: (props: {
+        /** 占位符高度 */
+        height: number;
+        /** 占位符样式 */
+        style: React.CSSProperties;
+        /** 元素是否即将进入视口 */
+        isIntersecting: boolean;
+        /** 元素在文档中的位置信息 */
+        elementInfo?: {
+            /** 元素类型 */
+            type: string;
+            /** 元素在文档中的索引 */
+            index: number;
+            /** 元素总数量 */
+            total: number;
+        };
+    }) => React.ReactNode;
 }
 /**
  * LazyElement 组件 - 懒加载元素包裹器
@@ -26,12 +44,26 @@ export interface LazyElementProps {
  * @param {number} [props.placeholderHeight=100] - 占位符高度
  * @param {string} [props.rootMargin='200px'] - 提前加载的距离
  * @param {React.CSSProperties} [props.placeholderStyle] - 自定义占位符样式
+ * @param {Function} [props.renderPlaceholder] - 自定义占位符渲染函数
  *
  * @example
  * ```tsx
+ * // 基本使用
  * <LazyElement placeholderHeight={150} rootMargin="300px">
  *   <div>这是需要懒加载的内容</div>
  * </LazyElement>
+ *
+ * // 自定义占位符渲染
+ * <LazyElement
+ *   placeholderHeight={150}
+ *   renderPlaceholder={({ height, style, isIntersecting }) => (
+ *     <div style={style}>
+ *       <div>加载中... {isIntersecting ? '(即将显示)' : ''}</div>
+ *     </div>
+ *   )}
+ * >
+ *   <div>这是需要懒加载的内容</div>
+ * </LazyElement>
  * ```
  *
  * @returns {React.ReactElement} 渲染的懒加载元素

package/dist/MarkdownEditor/editor/components/LazyElement/index.js

@@ -21,11 +21,13 @@ var LazyElement = ({
   children,
   placeholderHeight = 25,
   rootMargin = "200px",
-  placeholderStyle
+  placeholderStyle,
+  renderPlaceholder
 }) => {
   const containerRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   const [hasRendered, setHasRendered] = useState(false);
+  const [isIntersecting, setIsIntersecting] = useState(false);
   useEffect(() => {
     const container = containerRef.current;
     if (!container)
@@ -33,6 +35,7 @@ var LazyElement = ({
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
+          setIsIntersecting(entry.isIntersecting);
           if (entry.isIntersecting) {
             setIsVisible(true);
             setHasRendered(true);
@@ -53,13 +56,21 @@ var LazyElement = ({
   if (hasRendered || isVisible) {
     return /* @__PURE__ */ React.createElement("div", { ref: containerRef }, children);
   }
+  const computedPlaceholderStyle = __spreadValues({
+    minHeight: placeholderHeight
+  }, placeholderStyle);
+  if (renderPlaceholder) {
+    return /* @__PURE__ */ React.createElement("div", { ref: containerRef, "aria-hidden": "true" }, renderPlaceholder({
+      height: placeholderHeight,
+      style: computedPlaceholderStyle,
+      isIntersecting
+    }));
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: containerRef,
-      style: __spreadValues({
-        minHeight: placeholderHeight
-      }, placeholderStyle),
+      style: computedPlaceholderStyle,
       "aria-hidden": "true"
     }
   );

package/dist/MarkdownEditor/types.d.ts

@@ -147,11 +147,24 @@ export type MarkdownEditorProps = {
      *
      * @example
      * ```tsx
+     * // 基本懒加载配置
      * lazy={{
      *   enable: true,
      *   placeholderHeight: 100,
      *   rootMargin: '200px'
      * }}
+     *
+     * // 自定义占位符渲染
+     * lazy={{
+     *   enable: true,
+     *   placeholderHeight: 120,
+     *   rootMargin: '300px',
+     *   renderPlaceholder: ({ height, style, isIntersecting }) => (
+     *     <div style={style}>
+     *       <div>加载中... {isIntersecting ? '(即将显示)' : ''}</div>
+     *     </div>
+     *   )
+     * }}
      * ```
      */
     lazy?: {
@@ -168,6 +181,27 @@ export type MarkdownEditorProps = {
          * 支持所有 IntersectionObserver rootMargin 的值
          */
         rootMargin?: string;
+        /**
+         * 自定义占位符渲染函数
+         * 允许开发者自定义懒加载时的占位符显示内容
+         */
+        renderPlaceholder?: (props: {
+            /** 占位符高度 */
+            height: number;
+            /** 占位符样式 */
+            style: React.CSSProperties;
+            /** 元素是否即将进入视口 */
+            isIntersecting: boolean;
+            /** 元素在文档中的位置信息 */
+            elementInfo?: {
+                /** 元素类型 */
+                type: string;
+                /** 元素在文档中的索引 */
+                index: number;
+                /** 元素总数量 */
+                total: number;
+            };
+        }) => React.ReactNode;
     };
     /**
      * 样式

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

@@ -1,38 +1,5 @@
 import React from 'react';
 import { AttachmentFile } from '../types';
-/**
- * AttachmentFileIcon 组件 - 附件文件图标组件
- *
- * 该组件根据文件类型显示不同的图标或预览。如果是图片文件，则显示图片预览；
- * 如果是其他类型文件，则显示对应的文件图标。
- *
- * @component
- * @description 附件文件图标组件，根据文件类型显示图标或预览
- * @param {Object} props - 组件属性
- * @param {AttachmentFile} props.file - 附件文件对象
- * @param {string} [props.className] - 自定义CSS类名
- * @param {React.CSSProperties} [props.style] - 自定义样式
- *
- * @example
- * ```tsx
- * <AttachmentFileIcon
- *   file={fileData}
- *   className="custom-icon"
- *   style={{ fontSize: '24px' }}
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的文件图标或预览组件
- *
- * @remarks
- * - 支持图片文件预览显示
- * - 支持多种文件类型图标
- * - 自动识别文件类型
- * - 提供自定义样式支持
- * - 响应式布局
- * - 图片自适应显示
- * - 图标居中显示
- */
 export declare const AttachmentFileIcon: React.FC<{
     file: AttachmentFile;
     className: string;

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

@@ -4,9 +4,18 @@ import { Image } from "antd";
 import React from "react";
 import { getFileTypeIcon } from "../../../Workspace/File/utils";
 import { isImageFile } from "../utils";
+var IMAGE_STYLE = {
+  width: "40px",
+  height: "40px",
+  overflow: "hidden"
+};
+var IMAGE_PREVIEW_CONFIG = {
+  mask: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Eye, null)),
+  visible: false
+};
 var AttachmentFileIcon = (props) => {
   var _a;
-  const file = props.file;
+  const { file, className } = props;
   if (file.status === "uploading") {
     return /* @__PURE__ */ React.createElement(FileUploadingSpin, null);
   }
@@ -18,25 +27,15 @@ var AttachmentFileIcon = (props) => {
       Image,
       {
         src: file.url,
-        style: {
-          width: "40px",
-          height: "40px",
-          overflow: "hidden"
-        },
-        rootClassName: props.className,
-        preview: {
-          mask: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Eye, null)),
-          visible: false
-        },
+        style: IMAGE_STYLE,
+        rootClassName: className,
+        preview: IMAGE_PREVIEW_CONFIG,
         alt: file.name
       }
     );
   }
-  return getFileTypeIcon(
-    (_a = file.type) == null ? void 0 : _a.split("/").at(-1),
-    "",
-    file.name
-  );
+  const fileType = (_a = file.type) == null ? void 0 : _a.split("/").at(-1);
+  return getFileTypeIcon(fileType, "", file.name);
 };
 export {
   AttachmentFileIcon

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

@@ -1,49 +1,6 @@
 import React from 'react';
 import { AttachmentFile } from '../types';
-/**
- * AttachmentFileListItem 组件 - 附件文件列表项组件
- *
- * 该组件用于显示单个附件文件项，包括文件图标、文件名、文件大小等信息。
- * 支持文件预览、下载、删除操作，提供动画效果和状态显示。
- *
- * @component
- * @description 附件文件列表项组件，显示单个文件信息
- * @param {Object} props - 组件属性
- * @param {AttachmentFile} props.file - 文件对象
- * @param {() => void} props.onDelete - 删除文件回调
- * @param {() => void} props.onPreview - 预览文件回调
- * @param {() => void} props.onDownload - 下载文件回调
- * @param {() => void} [props.onRetry] - 重试上传文件回调（文件上传失败时调用）
- * @param {string} [props.className] - 自定义CSS类名
- * @param {string} [props.prefixCls] - 前缀类名
- * @param {string} [props.hashId] - 哈希ID
- *
- * @example
- * ```tsx
- * <AttachmentFileListItem
- *   file={fileData}
- *   onDelete={() => handleDelete(fileData)}
- *   onPreview={() => handlePreview(fileData)}
- *   onDownload={() => handleDownload(fileData)}
- *   onRetry={() => handleRetry(fileData)}
- *   className="custom-file-item"
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的附件文件列表项组件
- *
- * @remarks
- * - 显示文件图标、名称和大小
- * - 支持文件预览、下载、删除、重试操作
- * - 提供动画效果
- * - 显示文件状态（上传中、完成、错误）
- * - 支持自定义样式
- * - 文件名自动分割显示
- * - 文件大小格式化显示
- * - 响应式布局
- * - 文件上传失败时，点击文件名可重试上传
- */
-export declare const AttachmentFileListItem: React.FC<{
+interface FileListItemProps {
     file: AttachmentFile;
     onDelete: () => void;
     onPreview: () => void;
@@ -52,4 +9,6 @@ export declare const AttachmentFileListItem: React.FC<{
     className?: string;
     prefixCls?: string;
     hashId?: string;
-}>;
+}
+export declare const AttachmentFileListItem: React.FC<FileListItemProps>;
+export {};

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

@@ -6,158 +6,119 @@ import { motion } from "framer-motion";
 import React from "react";
 import { kbToSize } from "../utils";
 import { AttachmentFileIcon } from "./AttachmentFileIcon";
-var AttachmentFileListItem = (props) => {
-  const file = props.file;
+var getFileNameWithoutExtension = (fileName) => {
+  return fileName.split(".").slice(0, -1).join(".");
+};
+var getFileExtension = (fileName) => {
+  return fileName.split(".").slice(-1)[0];
+};
+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)),
+    done: /* @__PURE__ */ React.createElement(
+      AttachmentFileIcon,
+      {
+        file,
+        className: classNames(`${prefixCls}-file-icon-img`, hashId)
+      }
+    )
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: iconClassName }, 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(
+      "div",
+      {
+        className: classNames(statusClassName, `${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
+  )));
+};
+var DeleteButton = ({ file, onClick, prefixCls, hashId }) => {
+  if (file.status === "uploading")
+    return null;
   return /* @__PURE__ */ React.createElement(
-    Tooltip,
+    "div",
     {
-      title: "点击重试",
-      open: file.status !== "error" ? false : void 0
+      onClick,
+      className: classNames(`${prefixCls}-close-icon`, hashId)
     },
-    /* @__PURE__ */ React.createElement(
-      motion.div,
+    /* @__PURE__ */ React.createElement(X, { role: "img", "aria-label": "X" })
+  );
+};
+var AttachmentFileListItem = ({
+  file,
+  prefixCls,
+  hashId,
+  onPreview,
+  onRetry,
+  onDelete,
+  className
+}) => {
+  const handleFileClick = () => {
+    if (file.status !== "done")
+      return;
+    onPreview == null ? void 0 : onPreview();
+  };
+  const handleRetryClick = () => {
+    if (file.status !== "error")
+      return;
+    onRetry == null ? void 0 : onRetry();
+  };
+  const handleDeleteClick = (e) => {
+    e.stopPropagation();
+    onDelete == null ? void 0 : onDelete();
+  };
+  return /* @__PURE__ */ React.createElement(Tooltip, { title: "点击重试", open: file.status === "error" || void 0 }, /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      variants: {
+        hidden: { y: 20, opacity: 0 },
+        visible: { y: 0, opacity: 1 }
+      },
+      onClick: handleFileClick,
+      className,
+      exit: { opacity: 0, y: -20 }
+    },
+    /* @__PURE__ */ React.createElement(FileIcon, { file, prefixCls, hashId }),
+    /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-file-info`, hashId) }, /* @__PURE__ */ React.createElement(
+      "div",
       {
-        variants: {
-          hidden: { y: 20, opacity: 0 },
-          visible: {
-            y: 0,
-            opacity: 1
-          }
-        },
-        onClick: () => {
-          var _a;
-          if (file.status === "done") {
-            (_a = props.onPreview) == null ? void 0 : _a.call(props);
-          }
-        },
-        className: props.className,
-        exit: { opacity: 0, y: -20 }
+        onClick: handleRetryClick,
+        className: classNames(`${prefixCls}-file-name`, hashId)
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${props.prefixCls}-file-icon`, props.hashId)
-        },
-        file.status === "uploading" ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              `${props.prefixCls}-uploading-icon`,
-              props.hashId
-            )
-          },
-          /* @__PURE__ */ React.createElement(FileUploadingSpin, null)
-        ) : null,
-        file.status === "error" ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              `${props.prefixCls}-error-icon`,
-              props.hashId
-            )
-          },
-          /* @__PURE__ */ React.createElement(FileFailed, null)
-        ) : null,
-        file.status === "done" ? /* @__PURE__ */ React.createElement(
-          AttachmentFileIcon,
-          {
-            file,
-            className: classNames(
-              `${props.prefixCls}-file-icon-img`,
-              props.hashId
-            )
-          }
-        ) : null
-      ),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${props.prefixCls}-file-info`, props.hashId)
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            onClick: () => {
-              var _a;
-              if (file.status === "error") {
-                (_a = props.onRetry) == null ? void 0 : _a.call(props);
-              }
-            },
-            className: classNames(`${props.prefixCls}-file-name`, props.hashId)
-          },
-          /* @__PURE__ */ React.createElement(
-            "span",
-            {
-              className: classNames(
-                `${props.prefixCls}-file-name-text`,
-                props.hashId
-              )
-            },
-            file.name.split(".").slice(0, -1).join(".")
-          )
-        ),
-        file.status === "uploading" ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              `${props.prefixCls}-file-size`,
-              props.hashId
-            )
-          },
-          "上传中..."
-        ) : null,
-        file.status === "done" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              `${props.prefixCls}-file-size`,
-              props.hashId
-            )
-          },
-          [file.name.split(".").slice(-1), kbToSize(file.size / 1024)].filter(Boolean).map((item) => {
-            return /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                key: (item == null ? void 0 : item.toString()) + "",
-                className: classNames(
-                  `${props.prefixCls}-file-size-item`,
-                  props.hashId
-                )
-              },
-              item
-            );
-          })
-        )) : null,
-        file.status === "error" ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              `${props.prefixCls}-file-size`,
-              `${props.prefixCls}-file-size-error`,
-              props.hashId
-            )
-          },
-          "上传失败"
-        ) : null
-      ),
-      file.status !== "uploading" ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            e.stopPropagation();
-            (_a = props.onDelete) == null ? void 0 : _a.call(props);
-          },
-          className: classNames(
-            `${props.prefixCls}-close-icon`,
-            props.hashId
-          )
-        },
-        /* @__PURE__ */ React.createElement(X, { role: "img", "aria-label": "X" })
-      ) : null
+      /* @__PURE__ */ React.createElement("span", { className: classNames(`${prefixCls}-file-name-text`, hashId) }, getFileNameWithoutExtension(file.name))
+    ), /* @__PURE__ */ React.createElement(FileStatus, { file, prefixCls, hashId })),
+    /* @__PURE__ */ React.createElement(
+      DeleteButton,
+      {
+        file,
+        onClick: handleDeleteClick,
+        prefixCls,
+        hashId
+      }
     )
-  );
+  ));
 };
 export {
   AttachmentFileListItem