@ant-design/agentic-ui 2.0.0

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

@@ -0,0 +1,142 @@
+import { default as React } from 'react';
+import { AttachmentButtonPopoverProps } from './AttachmentButtonPopover';
+import { AttachmentFile } from './types';
+export * from './AttachmentButtonPopover';
+/**
+ * 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' }]
+     * ]);
+     */
+    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'] /**
+     * 是否禁用附件上传按钮
+     */;
+    disabled?: boolean;
+    /**
+     * 自定义渲染函数，用于完全替换默认的 AttachmentButtonPopover
+     * @param children - 需要包装的子元素（通常是 Paperclip 图标）
+     * @param supportedFormat - 支持的文件格式配置
+     * @returns 自定义的渲染组件
+     * @example
+     * const customRender = ({ children, supportedFormat }) => (
+     *   <Tooltip title="自定义上传提示">
+     *     {children}
+     *   </Tooltip>
+     * );
+     */
+    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;
+    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
+ *
+ * @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
+ *   fileMap={fileMap}
+ *   onFileMapChange={handleFileMapChange}
+ *   upload={uploadFileToServer}
+ *   render={customRender}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的附件按钮组件
+ */
+export declare const AttachmentButton: React.FC<AttachmentButtonProps & {
+    uploadImage(): Promise<void>;
+    title?: React.ReactNode;
+}>;

package/dist/MarkdownInputField/AttachmentButton/index.js

@@ -0,0 +1,202 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var __forAwait = (obj, it, method) => {
+  it = obj[Symbol.asyncIterator];
+  method = (key, fn) => (fn = obj[key]) && (it[key] = (arg) => new Promise((resolve, reject, done) => {
+    arg = fn.call(obj, arg);
+    done = arg.done;
+    return Promise.resolve(arg.value).then((value) => resolve({ value, done }), reject);
+  }));
+  return it ? it.call(obj) : (obj = obj[Symbol.iterator](), it = {}, method("next"), method("return"), it);
+};
+
+// src/MarkdownInputField/AttachmentButton/index.tsx
+import { Paperclip } from "@sofa-design/icons";
+import { ConfigProvider, message } from "antd";
+import classNames from "classnames";
+import { default as React, useContext, useMemo } from "react";
+import { compileTemplate } from "../../i18n";
+import AttachmentButtonPopover, {
+  SupportedFileFormats
+} from "./AttachmentButtonPopover";
+import { useStyle } from "./style";
+import { isImageFile } from "./utils";
+export * from "./AttachmentButtonPopover";
+var waitTime = (time) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
+};
+var upLoadFileToServer = (files, props) => __async(void 0, null, function* () {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const map = props.fileMap || /* @__PURE__ */ new Map();
+  const hideLoading = message.loading(
+    ((_a = props.locale) == null ? void 0 : _a.uploading) || "Uploading..."
+  );
+  const fileList = Array.from(files) || [];
+  fileList == null ? void 0 : fileList.forEach((file) => {
+    file.status = "uploading";
+    file.uuid = Date.now() + Math.random() * 1e3 + file.name;
+    if (isImageFile(file)) {
+      file.previewUrl = URL.createObjectURL(file);
+    }
+    if (file.uuid) {
+      map.set(file.uuid || "", file);
+    }
+  });
+  if (props.maxFileCount && fileList.length > props.maxFileCount) {
+    message.error(
+      ((_b = props.locale) == null ? void 0 : _b["markdownInput.maxFileCountExceeded"]) ? compileTemplate(props.locale["markdownInput.maxFileCountExceeded"], {
+        maxFileCount: String(props.maxFileCount)
+      }) : `最多只能上传 ${props.maxFileCount} 个文件`
+    );
+    return;
+  }
+  if (props.minFileCount && fileList.length < props.minFileCount) {
+    message.error(
+      ((_c = props.locale) == null ? void 0 : _c["markdownInput.minFileCountRequired"]) ? compileTemplate(props.locale["markdownInput.minFileCountRequired"], {
+        minFileCount: String(props.minFileCount)
+      }) : `至少需要上传 ${props.minFileCount} 个文件`
+    );
+    return;
+  }
+  (_d = props.onFileMapChange) == null ? void 0 : _d.call(props, map);
+  try {
+    let index = 0;
+    try {
+      for (var iter = __forAwait(fileList), more, temp, error; more = !(temp = yield iter.next()).done; more = false) {
+        const file = temp.value;
+        yield waitTime(16);
+        if (props.maxFileSize && file.size > props.maxFileSize) {
+          file.status = "error";
+          map.set(file.uuid || "", file);
+          (_e = props.onFileMapChange) == null ? void 0 : _e.call(props, map);
+          message.error(
+            ((_g = (_f = props.locale) == null ? void 0 : _f["markdownInput.fileSizeExceeded"]) == null ? void 0 : _g.replace(
+              "${maxSize}",
+              `${props.maxFileSize / 1024}`
+            )) || `文件大小超过 ${props.maxFileSize / 1024} KB`
+          );
+          continue;
+        }
+        try {
+          const url = (yield (_h = props == null ? void 0 : props.upload) == null ? void 0 : _h.call(props, file, index)) || file.previewUrl;
+          if (url) {
+            file.status = "done";
+            file.url = url;
+            map.set(file.uuid || "", file);
+            (_i = props.onFileMapChange) == null ? void 0 : _i.call(props, map);
+            message.success(((_j = props.locale) == null ? void 0 : _j.uploadSuccess) || "Upload success");
+          } else {
+            file.status = "error";
+            map.set(file.uuid || "", file);
+            (_k = props.onFileMapChange) == null ? void 0 : _k.call(props, map);
+            message.error(((_l = props.locale) == null ? void 0 : _l.uploadFailed) || "Upload failed");
+          }
+        } catch (error2) {
+          file.status = "error";
+          map.set(file.uuid || "", file);
+          (_m = props.onFileMapChange) == null ? void 0 : _m.call(props, map);
+          message.error(((_n = props.locale) == null ? void 0 : _n.uploadFailed) || "Upload failed");
+        }
+        index++;
+      }
+    } catch (temp) {
+      error = [temp];
+    } finally {
+      try {
+        more && (temp = iter.return) && (yield temp.call(iter));
+      } finally {
+        if (error)
+          throw error[0];
+      }
+    }
+  } catch (error2) {
+    fileList.forEach((file) => {
+      file.status = "error";
+      if (file.uuid) {
+        map.set(file.uuid || "", file);
+      }
+    });
+    message.error(((_o = props.locale) == null ? void 0 : _o.uploadFailed) || "Upload failed");
+    (_p = props.onFileMapChange) == null ? void 0 : _p.call(props, map);
+  } finally {
+    hideLoading();
+  }
+});
+var AttachmentButton = (props) => {
+  const context = useContext(ConfigProvider.ConfigContext);
+  const prefix = context == null ? void 0 : context.getPrefixCls("md-editor-attachment-button");
+  const { wrapSSR, hashId } = useStyle(prefix);
+  const supportedFormat = useMemo(() => {
+    if (props.supportedFormat) {
+      return props.supportedFormat;
+    }
+    return SupportedFileFormats.image;
+  }, [props.supportedFormat]);
+  const dom = props.title ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4
+      }
+    },
+    /* @__PURE__ */ React.createElement(Paperclip, null),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          font: "var(--font-text-body-base)",
+          letterSpacing: "var(--letter-spacing-body-base, normal)",
+          color: "var(--color-gray-text-default)"
+        }
+      },
+      props.title
+    )
+  ) : /* @__PURE__ */ React.createElement(Paperclip, null);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(`${prefix}`, hashId, {
+          [`${prefix}-disabled`]: props.disabled
+        }),
+        onClick: () => {
+          var _a;
+          if (props.disabled)
+            return;
+          (_a = props.uploadImage) == null ? void 0 : _a.call(props);
+        },
+        "data-testid": "attachment-button"
+      },
+      props.render ? props.render({
+        children: dom,
+        supportedFormat
+      }) : /* @__PURE__ */ React.createElement(AttachmentButtonPopover, { supportedFormat }, dom)
+    )
+  );
+};
+export {
+  AttachmentButton,
+  upLoadFileToServer
+};

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

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

@@ -0,0 +1,121 @@
+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/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: "2em",
+      height: "2em",
+      fontSize: "16px",
+      padding: "0.5em",
+      borderRadius: "8px",
+      transition: "background-color 0.3s ease",
+      cursor: "pointer",
+      color: "var(--color-gray-text-secondary)",
+      gap: 4,
+      "&:hover": {
+        backgroundColor: "rgba(0, 28, 57, 0.0353)"
+      },
+      [`${token.componentCls}-file-list`]: {
+        "&-item": {
+          width: "178px",
+          height: "56px",
+          borderRadius: "12px",
+          opacity: 1,
+          background: "#FFFFFF",
+          boxSizing: "border-box",
+          border: "1px solid #E6ECF4",
+          padding: "8px",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          cursor: "pointer",
+          gap: "8px",
+          position: "relative",
+          "&-file-icon": {
+            width: "40px",
+            height: "40px"
+          },
+          "&-file-info": {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            "&-file-name": {
+              display: "flex",
+              width: "112px",
+              "&-text": {
+                maxWidth: "92px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                WebkitLineClamp: 1,
+                height: 22,
+                WebkitBoxOrient: "vertical"
+              },
+              "&-extension": {
+                color: "rgba(0, 0, 0, 0.45)"
+              }
+            },
+            "&-file-size": {
+              color: "#B0B7C3",
+              fontSize: "12px"
+            }
+          },
+          "&-close-icon": {
+            width: "16px",
+            height: "16px",
+            opacity: 1,
+            background: "#353E5C",
+            fontSize: 12,
+            position: "absolute",
+            top: -6,
+            borderRadius: "50%",
+            right: -6,
+            color: "#FFFFFF",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            "&:hover": {
+              color: token.colorPrimary
+            }
+          }
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("md-editor-attachment-button", (token) => {
+    const proChatToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(proChatToken), genStyle(proChatToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,6 @@
+export type AttachmentFile = File & {
+    url?: string;
+    status?: 'error' | 'uploading' | 'done';
+    uuid?: string;
+    previewUrl?: string;
+};

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

@@ -0,0 +1,18 @@
+/**
+ * 将KB转换为可读的文件大小格式
+ *
+ * @param {number} kb - 文件大小（KB）
+ * @returns {string} 格式化后的文件大小字符串
+ *
+ * @example
+ * kbToSize(1024) // "1 MB"
+ * kbToSize(512) // "512 KB"
+ */
+export declare const kbToSize: (kb: number) => string;
+/**
+ * 检查文件是否为图片类型
+ *
+ * @param {File} file - 要检查的文件
+ * @returns {boolean} 是否为图片文件
+ */
+export declare const isImageFile: (file: File) => boolean;

package/dist/MarkdownInputField/AttachmentButton/utils.js

@@ -0,0 +1,13 @@
+// src/MarkdownInputField/AttachmentButton/utils.ts
+var kbToSize = (kb) => {
+  const sizes = ["KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(kb) / Math.log(1024));
+  return parseFloat((kb / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i];
+};
+var isImageFile = (file) => {
+  return file.type.startsWith("image/");
+};
+export {
+  isImageFile,
+  kbToSize
+};

package/dist/MarkdownInputField/BeforeToolContainer/BeforeToolContainer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type KeyedElement = React.ReactElement & {
+    key: React.Key;
+};
+export type ActionItemContainerProps = {
+    children: KeyedElement | KeyedElement[];
+    size?: 'small' | 'large' | 'default';
+    style?: React.CSSProperties;
+    showMenu?: boolean;
+    menuDisabled?: boolean;
+};
+export declare const ActionItemContainer: {
+    (props: ActionItemContainerProps): React.JSX.Element;
+    displayName: string;
+};
+export {};