@ant-design/agentic-ui 2.0.17 → 2.0.20

package/dist/MarkdownInputField/FileMapView/FileMapViewItem.js

@@ -1,209 +1,223 @@
 // src/MarkdownInputField/FileMapView/FileMapViewItem.tsx
-import { EllipsisOutlined } from "@ant-design/icons";
-import { Download, Eye } from "@sofa-design/icons";
+import { Download, EllipsisVertical, Eye } from "@sofa-design/icons";
 import { Tooltip } from "antd";
 import classNames from "classnames";
 import dayjs from "dayjs";
 import { motion } from "framer-motion";
-import React, { useContext, useMemo } from "react";
+import React, { useContext } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { I18nContext } from "../../I18n";
 import { AttachmentFileIcon } from "../AttachmentButton/AttachmentFileList/AttachmentFileIcon";
 import { kbToSize } from "../AttachmentButton/utils";
 var FileMapViewItem = (props) => {
+  var _a;
   const file = props.file;
   const { locale } = useContext(I18nContext);
   const [hovered, setHovered] = React.useState(false);
-  return useMemo(() => {
-    return /* @__PURE__ */ React.createElement(
-      Tooltip,
+  const handleMouseEnter = () => setHovered(true);
+  const handleMouseLeave = () => setHovered(false);
+  const fileName = (_a = file == null ? void 0 : file.name) != null ? _a : "";
+  const lastDotIndex = fileName.lastIndexOf(".");
+  const displayName = lastDotIndex > 0 ? fileName.slice(0, lastDotIndex) : fileName;
+  const displayExtension = lastDotIndex > 0 && lastDotIndex < fileName.length - 1 ? fileName.slice(lastDotIndex + 1) : "";
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ React.createElement("div", null, locale == null ? void 0 : locale.clickToPreview),
+      placement: "topLeft",
+      arrow: false
+    },
+    /* @__PURE__ */ React.createElement(
+      motion.div,
       {
-        title: /* @__PURE__ */ React.createElement("div", null, locale == null ? void 0 : locale.clickToPreview),
-        placement: "topLeft",
-        arrow: false
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: () => {
+          var _a2;
+          if (file.status === "error")
+            return;
+          if (props.onPreview) {
+            (_a2 = props.onPreview) == null ? void 0 : _a2.call(props);
+          } else {
+            if (typeof window === "undefined")
+              return;
+            window.open(file.previewUrl || file.url, "_blank");
+          }
+        },
+        variants: {
+          hidden: { x: 20, opacity: 0 },
+          visible: { x: 0, opacity: 1 },
+          exit: { x: -20, opacity: 0 }
+        },
+        exit: { opacity: 0, x: -20 },
+        className: props.className,
+        "data-testid": "file-item"
       },
       /* @__PURE__ */ React.createElement(
-        motion.div,
+        "div",
         {
-          onMouseEnter: () => setHovered(true),
-          onMouseLeave: () => setHovered(false),
-          onClick: () => {
-            var _a;
-            if (file.status === "error")
-              return;
-            (_a = props.onPreview) == null ? void 0 : _a.call(props);
-          },
-          variants: {
-            hidden: { x: 20, opacity: 0 },
-            visible: { x: 0, opacity: 1 },
-            exit: { x: -20, opacity: 0 }
-          },
-          exit: { opacity: 0, x: -20 },
-          className: props.className,
-          "data-testid": "file-item"
+          className: classNames(`${props.prefixCls}-file-icon`, props.hashId)
         },
         /* @__PURE__ */ React.createElement(
-          "div",
+          AttachmentFileIcon,
           {
-            className: classNames(`${props.prefixCls}-file-icon`, props.hashId)
-          },
-          /* @__PURE__ */ React.createElement(
-            AttachmentFileIcon,
-            {
-              file,
-              className: classNames(
-                `${props.prefixCls}-file-icon-img`,
-                props.hashId
-              )
-            }
-          )
-        ),
+            file,
+            className: classNames(
+              `${props.prefixCls}-file-icon-img`,
+              props.hashId
+            )
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${props.prefixCls}-file-info`, props.hashId)
+        },
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(`${props.prefixCls}-file-info`, props.hashId)
+            className: classNames(`${props.prefixCls}-file-name`, props.hashId)
           },
           /* @__PURE__ */ React.createElement(
-            "div",
+            "span",
             {
               className: classNames(
-                `${props.prefixCls}-file-name`,
+                `${props.prefixCls}-file-name-text`,
                 props.hashId
-              )
+              ),
+              title: file == null ? void 0 : file.name
             },
-            /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${props.prefixCls}-file-name-text`,
-                  props.hashId
-                ),
-                title: file == null ? void 0 : file.name
-              },
-              file == null ? void 0 : file.name.split(".").slice(0, -1).join(".")
-            )
-          ),
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: classNames(
-                `${props.prefixCls}-file-name-extension-container`,
-                props.hashId
-              )
-            },
-            /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${props.prefixCls}-file-name-extension`,
-                  props.hashId
-                )
-              },
-              file == null ? void 0 : file.name.split(".").slice(-1)
-            ),
-            /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${props.prefixCls}-separator`,
-                  props.hashId
-                )
-              },
-              "|"
-            ),
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                className: classNames(
-                  `${props.prefixCls}-file-size`,
-                  props.hashId
-                )
-              },
-              kbToSize(file.size / 1024)
-            ),
-            /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${props.prefixCls}-separator`,
-                  props.hashId
-                )
-              },
-              "|"
-            ),
-            /* @__PURE__ */ React.createElement("div", null, (file == null ? void 0 : file.lastModified) ? dayjs(file == null ? void 0 : file.lastModified).format("HH:mm") : "")
+            displayName
           )
         ),
-        hovered ? /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             className: classNames(
-              `${props.prefixCls}-action-bar`,
+              `${props.prefixCls}-file-name-extension-container`,
               props.hashId
             )
           },
-          props.customSlot ? /* @__PURE__ */ React.createElement(
-            ActionIconBox,
+          /* @__PURE__ */ React.createElement(
+            "span",
             {
-              title: "更多",
-              onClick: (e) => {
-                e.stopPropagation();
-              },
               className: classNames(
-                `${props.prefixCls}-action-btn`,
+                `${props.prefixCls}-file-name-extension`,
                 props.hashId
               )
             },
-            typeof props.customSlot === "function" ? props.customSlot(file) : props.customSlot
-          ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-            ActionIconBox,
+            displayExtension
+          ),
+          /* @__PURE__ */ React.createElement(
+            "span",
             {
-              title: (locale == null ? void 0 : locale.preview) || "预览",
-              onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = props.onPreview) == null ? void 0 : _a.call(props);
-              },
               className: classNames(
-                `${props.prefixCls}-action-btn`,
+                `${props.prefixCls}-separator`,
                 props.hashId
               )
             },
-            /* @__PURE__ */ React.createElement(Eye, { color: "var(--color-gray-text-secondary)" })
-          ), /* @__PURE__ */ React.createElement(
-            ActionIconBox,
+            "|"
+          ),
+          /* @__PURE__ */ React.createElement(
+            "div",
             {
-              title: (locale == null ? void 0 : locale.download) || "下载",
-              onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = props.onDownload) == null ? void 0 : _a.call(props);
-              },
               className: classNames(
-                `${props.prefixCls}-action-btn`,
+                `${props.prefixCls}-file-size`,
                 props.hashId
               )
             },
-            /* @__PURE__ */ React.createElement(Download, { color: "var(--color-gray-text-secondary)" })
-          ), props.renderMoreAction ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-            ActionIconBox,
+            kbToSize(file.size / 1024)
+          ),
+          /* @__PURE__ */ React.createElement(
+            "span",
             {
-              title: "更多操作",
-              onClick: (e) => {
-                e.stopPropagation();
-              },
               className: classNames(
-                `${props.prefixCls}-action-btn`,
+                `${props.prefixCls}-separator`,
                 props.hashId
               )
             },
-            /* @__PURE__ */ React.createElement(
-              EllipsisOutlined,
-              {
-                style: { color: "var(--color-gray-text-secondary)" }
+            "|"
+          ),
+          /* @__PURE__ */ React.createElement("div", null, (file == null ? void 0 : file.lastModified) ? dayjs(file == null ? void 0 : file.lastModified).format("HH:mm") : "")
+        )
+      ),
+      hovered ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${props.prefixCls}-action-bar`,
+            props.hashId
+          )
+        },
+        props.customSlot ? /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: "更多",
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            className: classNames(
+              `${props.prefixCls}-action-btn`,
+              props.hashId
+            )
+          },
+          typeof props.customSlot === "function" ? props.customSlot(file) : props.customSlot
+        ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale.preview) || "预览",
+            onClick: (e) => {
+              var _a2;
+              e.stopPropagation();
+              if (props.onPreview) {
+                (_a2 = props.onPreview) == null ? void 0 : _a2.call(props);
+              } else {
+                if (typeof window === "undefined")
+                  return;
+                window.open(file.previewUrl || file.url, "_blank");
               }
+            },
+            className: classNames(
+              `${props.prefixCls}-action-btn`,
+              props.hashId
             )
-          ), props.renderMoreAction ? /* @__PURE__ */ React.createElement(
+          },
+          /* @__PURE__ */ React.createElement(Eye, { color: "var(--color-gray-text-secondary)" })
+        ), props.onDownload && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: (locale == null ? void 0 : locale.download) || "下载",
+            onClick: (e) => {
+              var _a2;
+              e.stopPropagation();
+              (_a2 = props.onDownload) == null ? void 0 : _a2.call(props);
+            },
+            className: classNames(
+              `${props.prefixCls}-action-btn`,
+              props.hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(Download, { color: "var(--color-gray-text-secondary)" })
+        ), props.renderMoreAction && /* @__PURE__ */ React.createElement(
+          ActionIconBox,
+          {
+            title: "更多操作",
+            onClick: (e) => {
+              e.stopPropagation();
+            },
+            className: classNames(
+              `${props.prefixCls}-action-btn`,
+              props.hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(
+            EllipsisVertical,
+            {
+              style: { color: "var(--color-gray-text-secondary)" }
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
             "div",
             {
               className: classNames(
@@ -212,11 +226,11 @@ var FileMapViewItem = (props) => {
               )
             },
             props.renderMoreAction(file)
-          ) : null) : null)
-        ) : null
-      )
-    );
-  }, [file, file.status, hovered, props.onPreview, props.onDownload]);
+          )
+        ))
+      ) : null
+    )
+  );
 };
 export {
   FileMapViewItem

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { AttachmentFile } from '../AttachmentButton/types';
 export type FileMapViewProps = {
+    /** 是否显示"查看更多"按钮 */
+    showMoreButton?: boolean;
     /** 文件映射表 */
     fileMap?: Map<string, AttachmentFile>;
     /** 预览文件回调 */
@@ -17,10 +19,8 @@ export type FileMapViewProps = {
     style?: React.CSSProperties;
     /** 自定义根容器类名 */
     className?: string;
-    /** 最多展示的非图片文件数量，传入则开启溢出控制并在超出时显示"查看所有文件"按钮，不传则使用默认值3 */
+    /** 最多展示的非图片文件数量，传入则开启溢出控制并在超出时显示"查看所有文件"按钮，不传则展示所有文件且不显示按钮 */
     maxDisplayCount?: number;
-    /** 是否显示"查看全部"按钮，当为 false 时忽略 maxDisplayCount 限制，显示所有文件 */
-    showMoreButton?: boolean;
     placement?: 'left' | 'right';
 };
 /**

package/dist/MarkdownInputField/FileMapView/index.js

@@ -8,12 +8,11 @@ import { isImageFile } from "../AttachmentButton/utils";
 import { FileMapViewItem } from "./FileMapViewItem";
 import { useStyle } from "./style";
 var FileMapView = (props) => {
-  var _a, _b;
+  var _a;
   const { placement = "left", showMoreButton = true } = props;
   const context = useContext(ConfigProvider.ConfigContext);
   const prefix = context == null ? void 0 : context.getPrefixCls("agentic-md-editor-file-view-list");
   const { wrapSSR, hashId } = useStyle(prefix);
-  const maxDisplayCount = (_a = props.maxDisplayCount) != null ? _a : 3;
   const fileList = useMemo(() => {
     var _a2;
     if (!props.fileMap) {
@@ -21,25 +20,18 @@ var FileMapView = (props) => {
     }
     return Array.from(((_a2 = props.fileMap) == null ? void 0 : _a2.values()) || []);
   }, [props.fileMap]);
-  const allImgFiles = useMemo(() => {
+  const imgList = useMemo(() => {
     return fileList.filter((file) => isImageFile(file));
   }, [fileList]);
   const allNoImageFiles = useMemo(() => {
     return fileList.filter((file) => !isImageFile(file));
   }, [fileList]);
-  const imgList = useMemo(() => {
-    if (!showMoreButton) {
-      return allImgFiles;
-    }
-    return allImgFiles.slice(0, Math.max(0, maxDisplayCount));
-  }, [allImgFiles, maxDisplayCount, showMoreButton]);
   const noImageFileList = useMemo(() => {
-    if (!showMoreButton) {
+    if (props.maxDisplayCount === void 0) {
       return allNoImageFiles;
     }
-    const remainingCount = Math.max(0, maxDisplayCount - imgList.length);
-    return allNoImageFiles.slice(0, remainingCount);
-  }, [allNoImageFiles, maxDisplayCount, imgList.length, showMoreButton]);
+    return allNoImageFiles.slice(0, Math.max(0, props.maxDisplayCount));
+  }, [allNoImageFiles, props.maxDisplayCount]);
   return wrapSSR(
     /* @__PURE__ */ React.createElement(
       "div",
@@ -138,20 +130,14 @@ var FileMapView = (props) => {
             FileMapViewItem,
             {
               style: { width: (_a2 = props.style) == null ? void 0 : _a2.width },
-              onPreview: () => {
+              onPreview: props.onPreview ? () => {
                 var _a3;
-                if (props.onPreview) {
-                  (_a3 = props.onPreview) == null ? void 0 : _a3.call(props, file);
-                  return;
-                }
-                if (typeof window === "undefined")
-                  return;
-                window.open(file.previewUrl || file.url, "_blank");
-              },
-              onDownload: () => {
+                (_a3 = props.onPreview) == null ? void 0 : _a3.call(props, file);
+              } : void 0,
+              onDownload: props.onDownload ? () => {
                 var _a3;
                 (_a3 = props.onDownload) == null ? void 0 : _a3.call(props, file);
-              },
+              } : void 0,
               renderMoreAction: props.renderMoreAction,
               customSlot: props.customSlot,
               key: (file == null ? void 0 : file.uuid) || (file == null ? void 0 : file.name) || index,
@@ -162,10 +148,10 @@ var FileMapView = (props) => {
             }
           );
         }),
-        showMoreButton && maxDisplayCount !== void 0 && fileList.length > maxDisplayCount ? /* @__PURE__ */ React.createElement(
+        showMoreButton && props.maxDisplayCount !== void 0 && allNoImageFiles.length > props.maxDisplayCount ? /* @__PURE__ */ React.createElement(
           "div",
           {
-            style: { width: (_b = props.style) == null ? void 0 : _b.width },
+            style: { width: (_a = props.style) == null ? void 0 : _a.width },
             className: classNames(hashId, `${prefix}-more-file-container`),
             onClick: () => {
               var _a2;

package/dist/MarkdownInputField/FileMapView/style.js

@@ -199,7 +199,7 @@ var genStyle = (token) => {
             background: "var(--color-gray-bg-card-white)",
             boxSizing: "border-box",
             boxShadow: "var(--shadow-control-base)",
-            borderRadius: "var(--radius-card-base)",
+            borderRadius: "var(--radius-base)",
             border: "none",
             overflow: "hidden",
             img: {
@@ -235,15 +235,20 @@ var genStyle = (token) => {
           lineHeight: "18px",
           fontFamily: token.fontFamily,
           gap: -1,
+          display: "flex",
+          overflow: "hidden",
           "&-text": {
             maxWidth: "160px",
-            whiteSpace: "nowrap",
+            whiteSpace: "nowrap !important",
+            wordWrap: "normal",
+            wordBreak: "keep-all",
             width: "100%",
             overflow: "hidden",
             display: "inline-block",
             textOverflow: "ellipsis",
             height: 18,
-            lineHeight: 1
+            lineHeight: 1,
+            verticalAlign: "top"
           }
         },
         "&-file-name-extension-container": {