@ant-design/agentic-ui 2.0.0

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

@@ -0,0 +1,55 @@
+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<{
+    file: AttachmentFile;
+    onDelete: () => void;
+    onPreview: () => void;
+    onDownload: () => void;
+    onRetry?: () => void;
+    className?: string;
+    prefixCls?: string;
+    hashId?: string;
+}>;

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

@@ -0,0 +1,152 @@
+// src/MarkdownInputField/AttachmentButton/AttachmentFileList/AttachmentFileListItem.tsx
+import { FileFailed, FileUploadingSpin, X } from "@sofa-design/icons";
+import { Tooltip } from "antd";
+import classNames from "classnames";
+import { motion } from "framer-motion";
+import React from "react";
+import { kbToSize } from "../utils";
+import { AttachmentFileIcon } from "./AttachmentFileIcon";
+var AttachmentFileListItem = (props) => {
+  const file = props.file;
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: "点击重试",
+      open: file.status !== "error" ? false : void 0
+    },
+    /* @__PURE__ */ React.createElement(
+      motion.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 }
+      },
+      /* @__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
+            )
+          },
+          "上传中..."
+        ) : /* @__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
+            );
+          })
+        ))
+      ),
+      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
+    )
+  );
+};
+export {
+  AttachmentFileListItem
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { AttachmentFile } from '../types';
+export type AttachmentFileListProps = {
+    fileMap?: Map<string, AttachmentFile>;
+    onDelete: (file: AttachmentFile) => void;
+    onPreview?: (file: AttachmentFile) => void;
+    onDownload?: (file: AttachmentFile) => void;
+    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

@@ -0,0 +1,126 @@
+// 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 { isImageFile } from "../utils";
+import { AttachmentFileListItem } from "./AttachmentFileListItem";
+import { useStyle } from "./style";
+var AttachmentFileList = (props) => {
+  var _a, _b, _c, _d, _e;
+  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);
+  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
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        motion.div,
+        {
+          variants: {
+            visible: {
+              opacity: 1,
+              transition: {
+                when: "beforeChildren",
+                staggerChildren: 0.1
+              }
+            },
+            hidden: {
+              opacity: 0,
+              transition: {
+                when: "afterChildren"
+              }
+            }
+          },
+          whileInView: "visible",
+          initial: "hidden",
+          animate: "visible",
+          style: ((_b = props.fileMap) == null ? void 0 : _b.size) ? {} : { height: 0, overflow: "hidden", padding: 0 },
+          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(
+          AttachmentFileListItem,
+          {
+            prefixCls: `${prefix}-item`,
+            hashId,
+            className: classNames(hashId, `${prefix}-item`),
+            key: (file == null ? void 0 : file.uuid) || (file == null ? void 0 : file.name) || 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);
+            }
+          }
+        ))),
+        /* @__PURE__ */ React.createElement(
+          Image,
+          {
+            key: "preview",
+            src: imgSrc,
+            alt: "Preview",
+            style: { display: "none" },
+            preview: {
+              visible: !!imgSrc,
+              scaleStep: 1,
+              src: imgSrc,
+              onVisibleChange: (value) => {
+                if (!value) {
+                  setImgSrc(void 0);
+                }
+              }
+            }
+          }
+        )
+      ),
+      Array.from(((_d = props.fileMap) == null ? void 0 : _d.values()) || []).every(
+        (file) => file.status !== "uploading"
+      ) ? /* @__PURE__ */ React.createElement(
+        ActionIconBox,
+        {
+          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
+    )
+  );
+};
+export {
+  AttachmentFileList
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * @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/AttachmentButton/AttachmentFileList/style.js

@@ -0,0 +1,216 @@
+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/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [`${token.componentCls}`]: {
+      maxWidth: "100%",
+      display: "flex",
+      flexDirection: "row",
+      overflow: "auto",
+      gap: "var(--margin-2x)",
+      maxHeight: "127px",
+      height: "max-content",
+      marginRight: "40px",
+      borderRadius: "inherit",
+      padding: "var(--padding-3x)",
+      flexWrap: "wrap",
+      position: "relative",
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      "&::-webkit-scrollbar": {
+        width: "var(--padding-1-5x)"
+      },
+      "&-close-icon": {
+        width: "var(--height-control-xs)",
+        height: "var(--height-control-xs)",
+        fontSize: "var(--font-size-lg)",
+        position: "absolute",
+        top: "var(--margin-3x)",
+        right: "var(--margin-3x)",
+        color: "var(--color-gray-text-light)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+        "&:hover": {
+          transform: "scale(1.05)"
+        }
+      },
+      "&-item": {
+        width: "168px",
+        height: "48px",
+        opacity: 1,
+        borderRadius: "var(--radius-card-base)",
+        background: "var(--color-gray-bg-card-white)",
+        boxShadow: "var(--shadow-control-base)",
+        boxSizing: "border-box",
+        padding: "var(--padding-2x)",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        cursor: "pointer",
+        gap: "var(--margin-2x)",
+        position: "relative",
+        "&:hover": {
+          [`${token.componentCls}-item-close-icon`]: {
+            display: "flex"
+          }
+        },
+        "&-file-icon": {
+          width: "40px",
+          height: "40px",
+          minWidth: "40px",
+          opacity: 1,
+          "&-img": {
+            width: "40px",
+            height: "40px",
+            opacity: 1,
+            background: "var(--color-gray-bg-card-white)",
+            boxSizing: "border-box",
+            boxShadow: "var(--shadow-control-base)",
+            borderRadius: "var(--radius-card-base)",
+            border: "none",
+            overflow: "hidden",
+            img: {
+              maxWidth: "100%",
+              maxHeight: "100%",
+              borderRadius: "inherit",
+              transition: "transform 0.3s"
+            },
+            "&:hover": {
+              overflow: "hidden",
+              img: {
+                transform: "scale(1.1)",
+                transition: "transform 0.3s"
+              }
+            }
+          },
+          ">svg": {
+            width: "40px",
+            height: "40px"
+          }
+        },
+        "&-file-info": {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          gap: "var(--margin-0-5x)"
+        },
+        "&-file-name": {
+          display: "flex",
+          width: "112px",
+          alignItems: "center",
+          lineHeight: "var(--line-height-xs)",
+          fontFamily: token.fontFamily,
+          gap: -1,
+          "&-text": {
+            font: "var(--font-text-body-emphasized-sm)",
+            letterSpacing: "var(--letter-spacing-body-emphasized-sm, normal)",
+            color: "var(--color-gray-text-default)",
+            maxWidth: "102px",
+            whiteSpace: "nowrap",
+            width: "max-content",
+            overflow: "hidden",
+            display: "-webkit-box",
+            "-webkit-line-clamp": "1",
+            lineClamp: 1,
+            "-webkit-box-orient": "vertical",
+            textOverflow: "ellipsis"
+          }
+        },
+        "&-file-size": {
+          font: "var(--font-text-body-sm)",
+          letterSpacing: "var(--letter-spacing-body-sm, normal)",
+          color: "var(--color-gray-text-light)",
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          "&-item:not(:last-child)": {
+            lineHeight: "9px",
+            display: "flex",
+            gap: 4,
+            alignItems: "center",
+            height: 12,
+            "&:after": {
+              content: '""',
+              display: "block",
+              width: "1px",
+              height: "12px",
+              background: "var(--color-gray-border-light)"
+            }
+          }
+        },
+        "&-close-icon": {
+          width: "var(--padding-4x)",
+          height: "var(--padding-4x)",
+          backgroundColor: "var(--color-gray-text-default)",
+          fontSize: "var(--font-size-sm)",
+          position: "absolute",
+          top: -6,
+          borderRadius: "50%",
+          right: -6,
+          color: "var(--color-gray-contrast)",
+          display: "none",
+          justifyContent: "center",
+          alignItems: "center",
+          transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          "&:hover": {
+            transform: "scale(1.05)"
+          }
+        },
+        "&-uploading-icon": {
+          width: "40px",
+          height: "40px",
+          fontSize: "40px",
+          display: "flex"
+        },
+        "&-error-icon": {
+          width: "40px",
+          height: "40px",
+          fontSize: "40px",
+          display: "flex"
+        }
+      }
+    },
+    [`${token.componentCls}-container`]: {
+      background: "var(--color-gray-bg-page)",
+      borderBottom: "1px solid rgba(0, 16, 64, 0.0627)",
+      "&-empty": {
+        border: "none"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("md-editor-attachment-file-list", (token) => {
+    const proChatToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(proChatToken), genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};