@ant-design/agentic-ui 2.0.0

package/dist/MarkdownInputField/BeforeToolContainer/BeforeToolContainer.js

@@ -0,0 +1,368 @@
+var __defProp = Object.defineProperty;
+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;
+};
+
+// src/MarkdownInputField/BeforeToolContainer/BeforeToolContainer.tsx
+import { GripVertical, Menu } from "@sofa-design/icons";
+import { ConfigProvider, Popover } from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useStyle } from "../../components/ActionItemBox";
+var ActionItemContainer = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const basePrefixCls = getPrefixCls("agent-chat-action-item-box");
+  const { wrapSSR, hashId } = useStyle(basePrefixCls);
+  const containerRef = useRef(null);
+  const scrollRef = useRef(null);
+  const [isIndicatorHover, setIsIndicatorHover] = useState(false);
+  const [showOverflowPopup, setShowOverflowPopup] = useState(false);
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const [overIndex, setOverIndex] = useState(null);
+  const isHandlePressRef = useRef(false);
+  const isPanningRef = useRef(false);
+  const panStartXRef = useRef(0);
+  const panStartScrollLeftRef = useRef(0);
+  const hasPanMovedRef = useRef(false);
+  const panIntentRef = useRef(false);
+  const isInteractiveTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+      return false;
+    if (target.closest(
+      'button, a, input, textarea, select, [role="button"], [contenteditable="true"], [data-no-pan]'
+    )) {
+      return true;
+    }
+    return false;
+  };
+  const toEntries = (nodes) => {
+    const array = React.Children.toArray(nodes);
+    return array.map((node) => {
+      var _a;
+      return { key: (_a = node == null ? void 0 : node.key) != null ? _a : null, node };
+    });
+  };
+  const [ordered, setOrdered] = useState(
+    () => toEntries(props.children)
+  );
+  useEffect(() => {
+    if (false)
+      return;
+    let hasMissingKey = false;
+    React.Children.forEach(props.children, (child) => {
+      if (!React.isValidElement(child))
+        return;
+      if (child.key === null) {
+        hasMissingKey = true;
+      }
+    });
+    if (hasMissingKey) {
+      throw new Error(
+        "ActionItemContainer: all children must include an explicit `key` prop."
+      );
+    }
+  }, [props.children]);
+  useEffect(() => {
+    const incoming = toEntries(props.children);
+    const existingKeys = new Set(ordered.map((e) => e.key));
+    const merged = [];
+    for (const e of ordered) {
+      if (incoming.find((i) => i.key === e.key)) {
+        const updated = incoming.find((i) => i.key === e.key);
+        merged.push({ key: e.key, node: updated.node });
+      }
+    }
+    for (const e of incoming) {
+      if (!existingKeys.has(e.key)) {
+        merged.push(e);
+      }
+    }
+    setOrdered(merged.length === incoming.length ? merged : incoming);
+  }, [props.children]);
+  const handleDragStart = (e, index) => {
+    e.stopPropagation();
+    e.dataTransfer.effectAllowed = "move";
+    try {
+      e.dataTransfer.setData("text/plain", String(index));
+    } catch (e2) {
+      console.error(e);
+    }
+    setDraggingIndex(index);
+  };
+  const handleDragOver = (e, index) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (overIndex !== index)
+      setOverIndex(index);
+  };
+  const reorder = (list, from, to) => {
+    const next = list.slice();
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+  };
+  const handleDrop = (e, index) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const from = draggingIndex;
+    if (from === null)
+      return;
+    const to = index;
+    if (from === to)
+      return;
+    setOrdered((prev) => reorder(prev, from, to));
+    setDraggingIndex(null);
+    setOverIndex(null);
+    isHandlePressRef.current = false;
+  };
+  const handleDragEnd = () => {
+    setDraggingIndex(null);
+    setOverIndex(null);
+    isHandlePressRef.current = false;
+  };
+  const isHandleTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+      return false;
+    const handle = target.closest(`.${basePrefixCls}-drag-handle`);
+    return !!handle;
+  };
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: containerRef,
+        style: __spreadValues({}, props.style),
+        className: classNames(
+          `${basePrefixCls}-container`,
+          {
+            [`${basePrefixCls}-container-${props.size}`]: props.size,
+            [`${basePrefixCls}-container-no-hover`]: isIndicatorHover
+          },
+          hashId
+        ),
+        onPointerDown: (e) => {
+          const el = scrollRef.current;
+          if (!el)
+            return;
+          if (e.button !== 0)
+            return;
+          if (isInteractiveTarget(e.target))
+            return;
+          panIntentRef.current = true;
+          hasPanMovedRef.current = false;
+          panStartXRef.current = e.clientX;
+          panStartScrollLeftRef.current = el.scrollLeft;
+        },
+        onPointerMove: (e) => {
+          const el = scrollRef.current;
+          if (!el)
+            return;
+          if (!isPanningRef.current && panIntentRef.current) {
+            const dx = e.clientX - panStartXRef.current;
+            if (Math.abs(dx) > 6) {
+              isPanningRef.current = true;
+              hasPanMovedRef.current = true;
+              try {
+                el.setPointerCapture(e.pointerId);
+              } catch (e2) {
+              }
+            }
+          }
+          if (isPanningRef.current) {
+            const dx = e.clientX - panStartXRef.current;
+            el.scrollLeft = panStartScrollLeftRef.current - dx;
+            if (e.cancelable)
+              e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        onPointerUp: (e) => {
+          const el = scrollRef.current;
+          if (!el)
+            return;
+          panIntentRef.current = false;
+          if (isPanningRef.current) {
+            isPanningRef.current = false;
+            try {
+              el.releasePointerCapture(e.pointerId);
+            } catch (e2) {
+            }
+          }
+        },
+        onPointerCancel: () => {
+          isPanningRef.current = false;
+          panIntentRef.current = false;
+        },
+        onWheel: (e) => {
+          const el = scrollRef.current;
+          if (!el)
+            return;
+          const horizontalDelta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+          if (horizontalDelta !== 0) {
+            el.scrollLeft += horizontalDelta;
+          }
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          if (hasPanMovedRef.current) {
+            e.preventDefault();
+            e.stopPropagation();
+            hasPanMovedRef.current = false;
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: scrollRef,
+          className: classNames(`${basePrefixCls}-scroll`, hashId),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            gap: 8,
+            overflowX: "auto",
+            overflowY: "hidden",
+            WebkitOverflowScrolling: "touch",
+            overscrollBehavior: "contain",
+            touchAction: "pan-x"
+          }
+        },
+        ordered.map((entry) => /* @__PURE__ */ React.createElement(React.Fragment, { key: entry.key }, entry.node))
+      ),
+      props.showMenu !== false && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${basePrefixCls}-overflow-container`, hashId),
+          "data-no-pan": true
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${basePrefixCls}-overflow-container-indicator`,
+              hashId
+            )
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: classNames(
+                `${basePrefixCls}-overflow-container-placeholder`,
+                hashId
+              )
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            Popover,
+            {
+              open: showOverflowPopup,
+              onOpenChange: (visible) => !props.menuDisabled && setShowOverflowPopup(visible),
+              trigger: "click",
+              placement: "topRight",
+              arrow: false,
+              overlayInnerStyle: { padding: 0 },
+              overlayClassName: classNames(
+                `${basePrefixCls}-overflow-popover`,
+                hashId
+              ),
+              content: /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  className: classNames(
+                    `${basePrefixCls}-overflow-container-popup`,
+                    hashId
+                  ),
+                  onWheel: (e) => {
+                    e.stopPropagation();
+                  }
+                },
+                ordered.length > 0 ? ordered.map((entry, index) => /* @__PURE__ */ React.createElement(
+                  "div",
+                  {
+                    key: entry.key,
+                    className: classNames(
+                      `${basePrefixCls}-overflow-container-popup-item`,
+                      hashId,
+                      {
+                        [`${basePrefixCls}-dragging`]: draggingIndex === index,
+                        [`${basePrefixCls}-drag-over`]: overIndex === index
+                      }
+                    ),
+                    draggable: true,
+                    onMouseDown: (evt) => {
+                      const isHandle = isHandleTarget(evt.target);
+                      isHandlePressRef.current = isHandle;
+                      if (isHandle) {
+                        setDraggingIndex(index);
+                      } else {
+                        setDraggingIndex(null);
+                      }
+                    },
+                    onMouseUp: () => {
+                      if (draggingIndex === null) {
+                        isHandlePressRef.current = false;
+                      }
+                    },
+                    onDragStart: (evt) => {
+                      handleDragStart(evt, index);
+                    },
+                    onDragOver: (evt) => handleDragOver(evt, index),
+                    onDrop: (evt) => handleDrop(evt, index),
+                    onDragEnd: handleDragEnd
+                  },
+                  /* @__PURE__ */ React.createElement(
+                    GripVertical,
+                    {
+                      className: classNames(
+                        `${basePrefixCls}-drag-handle`,
+                        hashId
+                      ),
+                      onMouseDown: (evt) => {
+                        isHandlePressRef.current = true;
+                        setDraggingIndex(index);
+                        evt.stopPropagation();
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ React.createElement("div", { draggable: false }, entry.node)
+                )) : null
+              )
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                className: classNames(
+                  `${basePrefixCls}-overflow-container-menu`,
+                  hashId,
+                  {
+                    [`${basePrefixCls}-overflow-container-menu-disabled`]: props.menuDisabled
+                  }
+                ),
+                onMouseEnter: () => !props.menuDisabled && setIsIndicatorHover(true),
+                onMouseLeave: () => !props.menuDisabled && setIsIndicatorHover(false)
+              },
+              /* @__PURE__ */ React.createElement(Menu, null)
+            )
+          )
+        )
+      )
+    )
+  );
+};
+ActionItemContainer.displayName = "ActionItemContainer";
+export {
+  ActionItemContainer
+};

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { AttachmentFile } from '../AttachmentButton/types';
+/**
+ * FileMapViewItem 组件 - 文件映射视图项组件
+ *
+ * 该组件用于显示单个文件项，包括文件图标、文件名、文件大小等信息。
+ * 支持文件预览和下载操作，提供动画效果和工具提示。
+ *
+ * @component
+ * @description 文件映射视图项组件，显示单个文件信息
+ * @param {Object} props - 组件属性
+ * @param {AttachmentFile} props.file - 文件对象
+ * @param {() => void} props.onPreview - 预览文件回调
+ * @param {() => void} props.onDownload - 下载文件回调
+ * @param {string} [props.className] - 自定义CSS类名
+ * @param {string} [props.prefixCls] - 前缀类名
+ * @param {string} [props.hashId] - 哈希ID
+ *
+ * @example
+ * ```tsx
+ * <FileMapViewItem
+ *   file={fileData}
+ *   onPreview={() => handlePreview(fileData)}
+ *   onDownload={() => handleDownload(fileData)}
+ *   className="custom-file-item"
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的文件映射视图项组件
+ *
+ * @remarks
+ * - 显示文件图标、名称和大小
+ * - 支持文件预览和下载操作
+ * - 提供动画效果
+ * - 显示工具提示
+ * - 自动处理文件状态
+ * - 支持自定义样式
+ */
+export declare const FileMapViewItem: React.FC<{
+    file: AttachmentFile;
+    onPreview: () => void;
+    onDownload: () => void;
+    renderMoreAction?: (file: AttachmentFile) => React.ReactNode;
+    customSlot?: React.ReactNode | ((file: AttachmentFile) => React.ReactNode);
+    className?: string;
+    prefixCls?: string;
+    hashId?: string;
+    style?: React.CSSProperties;
+}>;

package/dist/MarkdownInputField/FileMapView/FileMapViewItem.js

@@ -0,0 +1,220 @@
+// src/MarkdownInputField/FileMapView/FileMapViewItem.tsx
+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 { I18nContext } from "../../i18n";
+import { AttachmentFileIcon } from "../AttachmentButton/AttachmentFileList/AttachmentFileIcon";
+import { kbToSize } from "../AttachmentButton/utils";
+var FileMapViewItem = (props) => {
+  const file = props.file;
+  const { locale } = useContext(I18nContext);
+  const [hovered, setHovered] = React.useState(false);
+  return useMemo(() => {
+    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,
+        {
+          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"
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${props.prefixCls}-file-icon`, props.hashId)
+          },
+          /* @__PURE__ */ React.createElement(
+            AttachmentFileIcon,
+            {
+              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-name`,
+                props.hashId
+              )
+            },
+            /* @__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") : "")
+          )
+        ),
+        hovered ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${props.prefixCls}-action-bar`,
+              props.hashId
+            )
+          },
+          props.customSlot ? /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              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(
+            "div",
+            {
+              onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = props.onPreview) == null ? void 0 : _a.call(props);
+              },
+              className: classNames(
+                `${props.prefixCls}-action-btn`,
+                props.hashId
+              )
+            },
+            /* @__PURE__ */ React.createElement(Eye, { color: "var(--color-gray-text-secondary)" })
+          ), /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = props.onDownload) == null ? void 0 : _a.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(
+            "div",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              },
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "更多操作",
+              className: classNames(
+                `${props.prefixCls}-action-btn`,
+                props.hashId
+              )
+            },
+            /* @__PURE__ */ React.createElement(EllipsisVertical, { color: "var(--color-gray-text-secondary)" }),
+            props.renderMoreAction ? /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                className: classNames(
+                  `${props.prefixCls}-more-custom`,
+                  props.hashId
+                )
+              },
+              props.renderMoreAction(file)
+            ) : null
+          ) : null)
+        ) : null
+      )
+    );
+  }, [file, file.status, hovered, props.onPreview, props.onDownload]);
+};
+export {
+  FileMapViewItem
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AttachmentFile } from '../AttachmentButton/types';
+export type FileMapViewProps = {
+    /** 文件映射表 */
+    fileMap?: Map<string, AttachmentFile>;
+    /** 预览文件回调 */
+    onPreview?: (file: AttachmentFile) => void;
+    /** 下载文件回调 */
+    onDownload?: (file: AttachmentFile) => void;
+    /** 点击“查看所有文件”回调，携带当前所有文件列表 */
+    onViewAll?: (files: AttachmentFile[]) => void;
+    /** 自定义更多操作 DOM（优先于 onMore，传入则展示该 DOM，不传则不展示更多按钮） */
+    renderMoreAction?: (file: AttachmentFile) => React.ReactNode;
+    /** 自定义悬浮动作区 slot（传入则覆盖默认『预览/下载/更多』动作区） */
+    customSlot?: React.ReactNode | ((file: AttachmentFile) => React.ReactNode);
+    /** 自定义根容器样式（可覆盖布局，如 flexDirection、gap、wrap 等） */
+    style?: React.CSSProperties;
+    /** 自定义根容器类名 */
+    className?: string;
+    /** 最多展示的文件数量，默认展示 3 个 */
+    maxDisplayCount?: number;
+    placement?: 'left' | 'right';
+    /** 是否展示“查看此任务中的所有文件”按钮（默认展示） */
+    showMoreButton?: boolean;
+};
+/**
+ * FileMapView 组件 - 文件映射视图组件
+ *
+ * 该组件用于显示文件列表，支持图片预览、文件下载、文件预览等功能。
+ * 根据文件类型提供不同的显示方式，图片文件以网格形式显示，其他文件以列表形式显示。
+ *
+ * @component
+ * @description 文件映射视图组件，显示文件列表和预览功能
+ * @param {FileMapViewProps} props - 组件属性
+ * @param {Map<string, AttachmentFile>} props.fileMap - 文件映射表
+ * @param {string} [props.className] - 自定义CSS类名
+ * @param {React.CSSProperties} [props.style] - 自定义样式
+ * @param {(file: AttachmentFile) => void} [props.onFileClick] - 文件点击回调
+ * @param {(file: AttachmentFile) => void} [props.onPreview] - 文件预览回调
+ * @param {(file: AttachmentFile) => void} [props.onDownload] - 文件下载回调
+ * @param {boolean} [props.collapsible] - 是否可折叠
+ * @param {number} [props.maxDisplayCount] - 最大显示数量
+ *
+ * @example
+ * ```tsx
+ * <FileMapView
+ *   fileMap={fileMap}
+ *   onFileClick={(file) => console.log('点击文件', file)}
+ *   onPreview={(file) => console.log('预览文件', file)}
+ *   onDownload={(file) => console.log('下载文件', file)}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的文件映射视图组件
+ *
+ * @remarks
+ * - 支持图片文件的网格预览
+ * - 支持其他文件类型的列表显示
+ * - 提供文件预览和下载功能
+ * - 支持文件列表折叠
+ * - 提供动画效果
+ * - 自动识别文件类型
+ * - 支持自定义样式和交互
+ */
+export declare const FileMapView: React.FC<FileMapViewProps>;