@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/utils/native-table/native-table-editor.js

@@ -0,0 +1,267 @@
+// src/MarkdownEditor/utils/native-table/native-table-editor.ts
+import { Editor, Transforms } from "slate";
+var NativeTableEditor = {
+  /**
+   * 插入表格
+   * @param editor - Slate 编辑器实例
+   * @param options - 表格选项
+   */
+  insertTable(editor, options = {}) {
+    const { rows = 2, cols = 2, at } = options;
+    const clamp = (n) => n < 1 ? 1 : n;
+    const actualRows = clamp(rows);
+    const actualCols = clamp(cols);
+    const tableNode = {
+      type: "table",
+      children: Array.from({ length: actualRows }).map(() => ({
+        type: "table-row",
+        children: Array.from({ length: actualCols }).map(() => ({
+          type: "table-cell",
+          children: [
+            {
+              type: "paragraph",
+              children: [{ text: "" }]
+            }
+          ]
+        }))
+      }))
+    };
+    Transforms.insertNodes(editor, tableNode, { at });
+  },
+  /**
+   * 删除表格
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  removeTable(editor, at) {
+    const tableEntry = this.findTable(editor, at);
+    if (tableEntry) {
+      const [, path] = tableEntry;
+      Transforms.removeNodes(editor, { at: path });
+    }
+  },
+  /**
+   * 查找表格节点
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  findTable(editor, at) {
+    return Editor.above(editor, {
+      match: (n) => Editor.isBlock(editor, n) && n.type === "table",
+      at
+    });
+  },
+  /**
+   * 查找表格行节点
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  findTableRow(editor, at) {
+    return Editor.above(editor, {
+      match: (n) => Editor.isBlock(editor, n) && n.type === "table-row",
+      at
+    });
+  },
+  /**
+   * 查找表格单元格节点
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  findTableCell(editor, at) {
+    return Editor.above(editor, {
+      match: (n) => Editor.isBlock(editor, n) && n.type === "table-cell",
+      at
+    });
+  },
+  /**
+   * 检查是否在表格中
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  isInTable(editor, at) {
+    return !!this.findTable(editor, at);
+  },
+  /**
+   * 检查是否在表格行中
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  isInTableRow(editor, at) {
+    return !!this.findTableRow(editor, at);
+  },
+  /**
+   * 检查是否在表格单元格中
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  isInTableCell(editor, at) {
+    return !!this.findTableCell(editor, at);
+  },
+  /**
+   * 插入表格行
+   * @param editor - Slate 编辑器实例
+   * @param options - 选项
+   */
+  insertTableRow(editor, options = {}) {
+    var _a, _b;
+    const { at, position = "below" } = options;
+    const tableRowEntry = this.findTableRow(editor, at);
+    if (!tableRowEntry)
+      return;
+    const [, rowPath] = tableRowEntry;
+    const tableEntry = this.findTable(editor, at);
+    if (!tableEntry)
+      return;
+    const [tableNode] = tableEntry;
+    const colCount = ((_b = (_a = tableNode.children[0]) == null ? void 0 : _a.children) == null ? void 0 : _b.length) || 1;
+    const newRow = {
+      type: "table-row",
+      children: Array.from({ length: colCount }).map(() => ({
+        type: "table-cell",
+        children: [
+          {
+            type: "paragraph",
+            children: [{ text: "" }]
+          }
+        ]
+      }))
+    };
+    const insertPath = position === "above" ? rowPath : [rowPath[0], rowPath[1] + 1];
+    Transforms.insertNodes(editor, newRow, { at: insertPath });
+  },
+  /**
+   * 删除表格行
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  removeTableRow(editor, at) {
+    const tableRowEntry = this.findTableRow(editor, at);
+    if (!tableRowEntry)
+      return;
+    const [, rowPath] = tableRowEntry;
+    const tableEntry = this.findTable(editor, at);
+    if (!tableEntry)
+      return;
+    const [tableNode] = tableEntry;
+    if (tableNode.children.length <= 1) {
+      this.removeTable(editor, at);
+      return;
+    }
+    Transforms.removeNodes(editor, { at: rowPath });
+  },
+  /**
+   * 插入表格列
+   * @param editor - Slate 编辑器实例
+   * @param options - 选项
+   */
+  insertTableColumn(editor, options = {}) {
+    const { at, position = "right" } = options;
+    const tableEntry = this.findTable(editor, at);
+    if (!tableEntry)
+      return;
+    const [tableNode, tablePath] = tableEntry;
+    const rowCount = tableNode.children.length;
+    for (let i = 0; i < rowCount; i++) {
+      const rowPath = [...tablePath, i];
+      const rowNode = tableNode.children[i];
+      const colCount = rowNode.children.length;
+      const newCell = {
+        type: "table-cell",
+        children: [
+          {
+            type: "paragraph",
+            children: [{ text: "" }]
+          }
+        ]
+      };
+      const insertPath = position === "left" ? [...rowPath, 0] : [...rowPath, colCount];
+      Transforms.insertNodes(editor, newCell, { at: insertPath });
+    }
+  },
+  /**
+   * 删除表格列
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  removeTableColumn(editor, at) {
+    const tableCellEntry = this.findTableCell(editor, at);
+    if (!tableCellEntry)
+      return;
+    const [, cellPath] = tableCellEntry;
+    const tableEntry = this.findTable(editor, at);
+    if (!tableEntry)
+      return;
+    const [tableNode, tablePath] = tableEntry;
+    const rowCount = tableNode.children.length;
+    const colIndex = cellPath[cellPath.length - 1];
+    const firstRow = tableNode.children[0];
+    if (firstRow.children.length <= 1) {
+      this.removeTable(editor, at);
+      return;
+    }
+    for (let i = 0; i < rowCount; i++) {
+      const cellPath2 = [...tablePath, i, colIndex];
+      Transforms.removeNodes(editor, { at: cellPath2 });
+    }
+  },
+  /**
+   * 移动光标到下一个单元格
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  moveToNextCell(editor, at) {
+    const tableCellEntry = this.findTableCell(editor, at);
+    if (!tableCellEntry)
+      return;
+    const [, cellPath] = tableCellEntry;
+    const tableEntry = this.findTable(editor, at);
+    if (!tableEntry)
+      return;
+    const [tableNode, tablePath] = tableEntry;
+    const rowIndex = cellPath[cellPath.length - 2];
+    const colIndex = cellPath[cellPath.length - 1];
+    const rowCount = tableNode.children.length;
+    const colCount = tableNode.children[0].children.length;
+    let nextRowIndex = rowIndex;
+    let nextColIndex = colIndex + 1;
+    if (nextColIndex >= colCount) {
+      nextRowIndex++;
+      nextColIndex = 0;
+    }
+    if (nextRowIndex < rowCount) {
+      const nextCellPath = [...tablePath, nextRowIndex, nextColIndex];
+      Transforms.select(editor, { path: nextCellPath, offset: 0 });
+    }
+  },
+  /**
+   * 移动光标到上一个单元格
+   * @param editor - Slate 编辑器实例
+   * @param at - 位置
+   */
+  moveToPreviousCell(editor, at) {
+    const tableCellEntry = this.findTableCell(editor, at);
+    if (!tableCellEntry)
+      return;
+    const [, cellPath] = tableCellEntry;
+    const tableEntry = this.findTable(editor, at);
+    if (!tableEntry)
+      return;
+    const [tableNode, tablePath] = tableEntry;
+    const rowIndex = cellPath[cellPath.length - 2];
+    const colIndex = cellPath[cellPath.length - 1];
+    const colCount = tableNode.children[0].children.length;
+    let prevRowIndex = rowIndex;
+    let prevColIndex = colIndex - 1;
+    if (prevColIndex < 0) {
+      prevRowIndex--;
+      prevColIndex = colCount - 1;
+    }
+    if (prevRowIndex >= 0) {
+      const prevCellPath = [...tablePath, prevRowIndex, prevColIndex];
+      Transforms.select(editor, { path: prevCellPath, offset: 0 });
+    }
+  }
+};
+export {
+  NativeTableEditor
+};

package/dist/MarkdownEditor/utils/native-table/native-table-keyboard.d.ts

@@ -0,0 +1,21 @@
+import { Editor } from 'slate';
+/**
+ * 原生表格键盘事件处理
+ * 提供基础的表格导航和操作功能
+ */
+export declare const NativeTableKeyboard: {
+    /**
+     * 处理表格中的键盘事件
+     * @param editor - Slate 编辑器实例
+     * @param event - 键盘事件
+     * @returns 是否已处理该事件
+     */
+    handleKeyDown(editor: Editor, event: KeyboardEvent): boolean;
+    /**
+     * 检查是否应该处理键盘事件
+     * @param editor - Slate 编辑器实例
+     * @param event - 键盘事件
+     * @returns 是否应该处理
+     */
+    shouldHandle(editor: Editor): boolean;
+};

package/dist/MarkdownEditor/utils/native-table/native-table-keyboard.js

@@ -0,0 +1,127 @@
+// src/MarkdownEditor/utils/native-table/native-table-keyboard.ts
+import { NativeTableEditor } from "./native-table-editor";
+var NativeTableKeyboard = {
+  /**
+   * 处理表格中的键盘事件
+   * @param editor - Slate 编辑器实例
+   * @param event - 键盘事件
+   * @returns 是否已处理该事件
+   */
+  handleKeyDown(editor, event) {
+    if (!NativeTableEditor.isInTableCell(editor)) {
+      return false;
+    }
+    const { key, shiftKey } = event;
+    switch (key) {
+      case "Tab":
+        event.preventDefault();
+        if (shiftKey) {
+          NativeTableEditor.moveToPreviousCell(editor);
+        } else {
+          NativeTableEditor.moveToNextCell(editor);
+        }
+        return true;
+      case "Enter":
+        return false;
+      case "ArrowUp":
+        if (editor.selection && editor.selection.anchor.offset === 0) {
+          const cellEntry = NativeTableEditor.findTableCell(editor);
+          if (cellEntry) {
+            const [, cellPath] = cellEntry;
+            const tableEntry = NativeTableEditor.findTable(editor);
+            if (tableEntry) {
+              const [, tablePath] = tableEntry;
+              const rowIndex = cellPath[cellPath.length - 2];
+              const colIndex = cellPath[cellPath.length - 1];
+              if (rowIndex > 0) {
+                const prevCellPath = [...tablePath, rowIndex - 1, colIndex];
+                event.preventDefault();
+                editor.select({ path: prevCellPath, offset: 0 });
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      case "ArrowDown":
+        if (editor.selection && editor.selection.anchor.offset === 0) {
+          const cellEntry = NativeTableEditor.findTableCell(editor);
+          if (cellEntry) {
+            const [, cellPath] = cellEntry;
+            const tableEntry = NativeTableEditor.findTable(editor);
+            if (tableEntry) {
+              const [tableNode, tablePath] = tableEntry;
+              const rowIndex = cellPath[cellPath.length - 2];
+              const colIndex = cellPath[cellPath.length - 1];
+              const rowCount = tableNode.children.length;
+              if (rowIndex < rowCount - 1) {
+                const nextCellPath = [...tablePath, rowIndex + 1, colIndex];
+                event.preventDefault();
+                editor.select({ path: nextCellPath, offset: 0 });
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      case "ArrowLeft":
+        if (editor.selection && editor.selection.anchor.offset === 0) {
+          const cellEntry = NativeTableEditor.findTableCell(editor);
+          if (cellEntry) {
+            const [, cellPath] = cellEntry;
+            const tableEntry = NativeTableEditor.findTable(editor);
+            if (tableEntry) {
+              const [, tablePath] = tableEntry;
+              const rowIndex = cellPath[cellPath.length - 2];
+              const colIndex = cellPath[cellPath.length - 1];
+              if (colIndex > 0) {
+                const leftCellPath = [...tablePath, rowIndex, colIndex - 1];
+                event.preventDefault();
+                editor.select({ path: leftCellPath, offset: 0 });
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      case "ArrowRight":
+        if (editor.selection && editor.selection.anchor.offset === 0) {
+          const cellEntry = NativeTableEditor.findTableCell(editor);
+          if (cellEntry) {
+            const [tableNode, cellPath] = cellEntry;
+            const tableEntry = NativeTableEditor.findTable(editor);
+            if (tableEntry) {
+              const [, tablePath] = tableEntry;
+              const rowIndex = cellPath[cellPath.length - 2];
+              const colIndex = cellPath[cellPath.length - 1];
+              const colCount = tableNode.children[0].children.length;
+              if (colIndex < colCount - 1) {
+                const rightCellPath = [...tablePath, rowIndex, colIndex + 1];
+                event.preventDefault();
+                editor.select({ path: rightCellPath, offset: 0 });
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      case "Delete":
+      case "Backspace":
+        return false;
+      default:
+        return false;
+    }
+  },
+  /**
+   * 检查是否应该处理键盘事件
+   * @param editor - Slate 编辑器实例
+   * @param event - 键盘事件
+   * @returns 是否应该处理
+   */
+  shouldHandle(editor) {
+    return NativeTableEditor.isInTableCell(editor);
+  }
+};
+export {
+  NativeTableKeyboard
+};

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

@@ -0,0 +1,104 @@
+import React from 'react';
+export type AttachmentButtonPopoverProps = {
+    children?: React.ReactNode;
+    supportedFormat?: {
+        type: string;
+        maxSize: number;
+        extensions: string[];
+        icon: React.ReactNode;
+        content?: React.ReactNode;
+    };
+};
+/**
+ * 支持的文件格式配置
+ *
+ * 定义系统支持的文件类型、大小限制和扩展名等信息。
+ * 包括图片、文档、音频、视频等常见文件类型。
+ */
+export declare const SupportedFileFormats: {
+    image: {
+        icon: React.JSX.Element;
+        type: string;
+        maxSize: number;
+        extensions: string[];
+    };
+    document: {
+        icon: React.JSX.Element;
+        type: string;
+        maxSize: number;
+        extensions: string[];
+    };
+    audio: {
+        icon: React.JSX.Element;
+        type: string;
+        maxSize: number;
+        extensions: string[];
+    };
+    video: {
+        icon: React.JSX.Element;
+        type: string;
+        maxSize: number;
+        extensions: string[];
+    };
+};
+/**
+ * AttachmentSupportedFormatsContent 组件 - 附件支持格式内容组件
+ *
+ * 该组件用于显示支持的文件格式信息，包括文件类型、大小限制、扩展名等。
+ * 提供文件上传格式的说明和指导。
+ *
+ * @component
+ * @description 附件支持格式内容组件，显示支持的文件格式信息
+ * @param {AttachmentButtonPopoverProps} props - 组件属性
+ * @param {React.ReactNode} [props.children] - 子组件
+ * @param {Object} [props.supportedFormat] - 自定义支持的文件格式
+ *
+ * @example
+ * ```tsx
+ * <AttachmentSupportedFormatsContent
+ *   supportedFormat={customFormat}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement|null} 渲染的支持格式内容组件
+ *
+ * @remarks
+ * - 显示支持的文件类型
+ * - 显示文件大小限制
+ * - 显示文件扩展名
+ * - 提供文件类型图标
+ * - 支持自定义格式配置
+ * - 响应式布局
+ */
+export declare const AttachmentSupportedFormatsContent: (props: AttachmentButtonPopoverProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element | null;
+/**
+ * AttachmentButtonPopover 组件 - 附件按钮弹出框组件
+ *
+ * 该组件提供一个弹出框，用于显示支持的文件格式信息。
+ * 当用户悬停在附件按钮上时，显示支持的文件类型、大小限制等详细信息。
+ *
+ * @component
+ * @description 附件按钮弹出框组件，显示支持的文件格式信息
+ * @param {AttachmentButtonPopoverProps} props - 组件属性
+ * @param {React.ReactNode} [props.children] - 子组件，通常是附件按钮
+ * @param {Object} [props.supportedFormat] - 自定义支持的文件格式
+ *
+ * @example
+ * ```tsx
+ * <AttachmentButtonPopover supportedFormat={customFormat}>
+ *   <Button>上传附件</Button>
+ * </AttachmentButtonPopover>
+ * ```
+ *
+ * @returns {React.ReactElement|null} 渲染的弹出框组件，无支持格式时返回null
+ *
+ * @remarks
+ * - 提供悬停触发的弹出框
+ * - 显示支持的文件格式信息
+ * - 支持自定义格式配置
+ * - 集成Ant Design Popover组件
+ * - 响应式布局
+ * - 美观的信息展示
+ */
+export declare const AttachmentButtonPopover: React.FC<AttachmentButtonPopoverProps>;
+export default AttachmentButtonPopover;

package/dist/MarkdownInputField/AttachmentButton/AttachmentButtonPopover.js

@@ -0,0 +1,102 @@
+// src/MarkdownInputField/AttachmentButton/AttachmentButtonPopover.tsx
+import {
+  AudioOutlined,
+  FileImageOutlined,
+  FileTextFilled,
+  VideoCameraOutlined
+} from "@ant-design/icons";
+import { Tooltip } from "antd";
+import React, { useMemo } from "react";
+import { kbToSize } from "./utils";
+var SupportedFileFormats = {
+  image: {
+    icon: /* @__PURE__ */ React.createElement(FileImageOutlined, null),
+    type: "图片",
+    maxSize: 10 * 1024,
+    extensions: ["jpg", "jpeg", "png", "gif"]
+  },
+  document: {
+    icon: /* @__PURE__ */ React.createElement(FileTextFilled, null),
+    type: "文档",
+    maxSize: 10 * 1024,
+    extensions: [
+      "pdf",
+      "markdown",
+      "ppt",
+      "html",
+      "xls",
+      "xlsx",
+      "cs",
+      "docx",
+      "pptx",
+      "xml"
+    ]
+  },
+  audio: {
+    icon: /* @__PURE__ */ React.createElement(AudioOutlined, null),
+    type: "音频",
+    maxSize: 50 * 1024,
+    extensions: ["mp3", "wav"]
+  },
+  video: {
+    icon: /* @__PURE__ */ React.createElement(VideoCameraOutlined, null),
+    type: "视频",
+    maxSize: 100 * 1024,
+    extensions: ["mp4", "avi", "mov"]
+  }
+};
+var AttachmentSupportedFormatsContent = (props) => {
+  var _a;
+  const supportedFormat = useMemo(() => {
+    if (props.supportedFormat) {
+      return props.supportedFormat;
+    }
+    return SupportedFileFormats.image;
+  }, [
+    props.supportedFormat
+  ]);
+  if (!supportedFormat)
+    return null;
+  if (supportedFormat.content) {
+    return supportedFormat.content;
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        fontSize: 16,
+        lineHeight: "1.5em",
+        maxWidth: 275
+      }
+    },
+    `支持上传文件，每个文件不超过 ${kbToSize((supportedFormat == null ? void 0 : supportedFormat.maxSize) || 5e3)}，支持 ${((_a = supportedFormat == null ? void 0 : supportedFormat.extensions) == null ? void 0 : _a.join(", ")) || ""}等格式。`
+  );
+};
+var AttachmentButtonPopover = (props) => {
+  if (!(props == null ? void 0 : props.supportedFormat))
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      arrow: false,
+      title: /* @__PURE__ */ React.createElement(
+        AttachmentSupportedFormatsContent,
+        {
+          supportedFormat: props.supportedFormat
+        }
+      ),
+      mouseEnterDelay: 0.3,
+      mouseLeaveDelay: 0.1,
+      trigger: "hover",
+      placement: "topRight"
+    },
+    props.children
+  );
+};
+var AttachmentButtonPopover_default = AttachmentButtonPopover;
+export {
+  AttachmentButtonPopover,
+  AttachmentSupportedFormatsContent,
+  SupportedFileFormats,
+  AttachmentButtonPopover_default as default
+};

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

@@ -0,0 +1,40 @@
+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;
+    style?: React.CSSProperties;
+}>;

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

@@ -0,0 +1,43 @@
+// src/MarkdownInputField/AttachmentButton/AttachmentFileList/AttachmentFileIcon.tsx
+import { Eye, FileFailed, FileUploadingSpin } from "@sofa-design/icons";
+import { Image } from "antd";
+import React from "react";
+import { getFileTypeIcon } from "../../../Workspace/File/utils";
+import { isImageFile } from "../utils";
+var AttachmentFileIcon = (props) => {
+  var _a;
+  const file = props.file;
+  if (file.status === "uploading") {
+    return /* @__PURE__ */ React.createElement(FileUploadingSpin, null);
+  }
+  if (file.status === "error") {
+    return /* @__PURE__ */ React.createElement(FileFailed, null);
+  }
+  if (isImageFile(file)) {
+    return /* @__PURE__ */ React.createElement(
+      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
+        },
+        alt: file.name
+      }
+    );
+  }
+  return getFileTypeIcon(
+    (_a = file.type) == null ? void 0 : _a.split("/").at(-1),
+    "",
+    file.name
+  );
+};
+export {
+  AttachmentFileIcon
+};