@ant-design/agentic-ui 2.8.0 → 2.10.0

package/dist/ThoughtChainList/ThoughtChainListItem.js

@@ -1,24 +1,101 @@
-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]);
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
     }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/ThoughtChainList/ThoughtChainListItem.tsx
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 import classNames from "classnames";
 import { motion } from "framer-motion";
 import React, { useMemo } from "react";
@@ -28,214 +105,303 @@ import { TableSql } from "./TableSql";
 import { TitleInfo } from "./TitleInfo";
 import { ToolCall } from "./ToolCall";
 import { WebSearch } from "./WebSearch";
-var ThoughtChainItemDetail = React.memo(
-  ({
-    category,
-    thoughtChainListItem,
-    isFinished,
-    markdownRenderProps,
-    onMetaClick
-  }) => {
-    switch (category) {
-      case "RagRetrieval":
-        return /* @__PURE__ */ React.createElement(
-          RagRetrievalInfo,
-          __spreadProps(__spreadValues({}, thoughtChainListItem), {
-            onMetaClick,
-            key: thoughtChainListItem.runId,
-            isFinished,
-            markdownRenderProps
-          })
-        );
-      case "TableSql":
-        return /* @__PURE__ */ React.createElement(
-          TableSql,
-          __spreadProps(__spreadValues({}, thoughtChainListItem), {
-            isFinished,
-            key: thoughtChainListItem.runId,
-            markdownRenderProps,
-            "data-testid": "table-sql"
-          })
-        );
-      case "ToolCall":
-        return /* @__PURE__ */ React.createElement(
-          ToolCall,
-          __spreadProps(__spreadValues({}, thoughtChainListItem), {
-            key: thoughtChainListItem.runId,
-            markdownRenderProps,
-            isFinished,
-            "data-testid": "tool-call"
-          })
-        );
-      case "DeepThink":
-        return /* @__PURE__ */ React.createElement(
-          DeepThink,
-          __spreadProps(__spreadValues({}, thoughtChainListItem), {
-            isFinished,
-            key: thoughtChainListItem.runId,
-            markdownRenderProps,
-            "data-testid": "deep-think"
-          })
-        );
-      case "WebSearch":
-        return /* @__PURE__ */ React.createElement(
-          WebSearch,
-          __spreadProps(__spreadValues({}, thoughtChainListItem), {
-            key: thoughtChainListItem.runId,
-            isFinished,
-            markdownRenderProps
-          })
-        );
-      default:
-        return null;
+/**
+ * ThoughtChainItemDetail 组件 - 思维链项详情组件
+ *
+ * 该组件根据不同的类别渲染对应的详情内容组件。
+ * 支持 RagRetrieval、TableSql、ToolCall、DeepThink、WebSearch 等类型。
+ *
+ * @component
+ * @description 思维链项详情组件，根据类别渲染对应内容
+ * @param {Object} props - 组件属性
+ * @param {string} [props.category] - 思维链项类别
+ * @param {WhiteBoxProcessInterface} props.thoughtChainListItem - 思维链项数据
+ * @param {boolean} props.isFinished - 是否已完成
+ * @param {MarkdownEditorProps} [props.markdownRenderProps] - Markdown 渲染配置
+ * @param {(meta: DocMeta) => void} props.onMetaClick - 元数据点击回调
+ *
+ * @example
+ * ```tsx
+ * <ThoughtChainItemDetail
+ *   category="RagRetrieval"
+ *   thoughtChainListItem={item}
+ *   isFinished={true}
+ *   onMetaClick={handleMetaClick}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement|null} 渲染的详情组件或 null
+ *
+ * @remarks
+ * - 根据类别动态渲染不同组件
+ * - 支持多种思维链类型
+ * - 传递统一的属性配置
+ * - 提供测试 ID 支持
+ */ // 详情内容组件 - 独立 memo
+var ThoughtChainItemDetail = /*#__PURE__*/ React.memo(function(param) {
+    var category = param.category, thoughtChainListItem = param.thoughtChainListItem, isFinished = param.isFinished, markdownRenderProps = param.markdownRenderProps, onMetaClick = param.onMetaClick;
+    switch(category){
+        case 'RagRetrieval':
+            return /*#__PURE__*/ React.createElement(RagRetrievalInfo, _object_spread_props(_object_spread({}, thoughtChainListItem), {
+                onMetaClick: onMetaClick,
+                key: thoughtChainListItem.runId,
+                isFinished: isFinished,
+                markdownRenderProps: markdownRenderProps
+            }));
+        case 'TableSql':
+            return /*#__PURE__*/ React.createElement(TableSql, _object_spread_props(_object_spread({}, thoughtChainListItem), {
+                isFinished: isFinished,
+                key: thoughtChainListItem.runId,
+                markdownRenderProps: markdownRenderProps,
+                "data-testid": "table-sql"
+            }));
+        case 'ToolCall':
+            return /*#__PURE__*/ React.createElement(ToolCall, _object_spread_props(_object_spread({}, thoughtChainListItem), {
+                key: thoughtChainListItem.runId,
+                markdownRenderProps: markdownRenderProps,
+                isFinished: isFinished,
+                "data-testid": "tool-call"
+            }));
+        case 'DeepThink':
+            return /*#__PURE__*/ React.createElement(DeepThink, _object_spread_props(_object_spread({}, thoughtChainListItem), {
+                isFinished: isFinished,
+                key: thoughtChainListItem.runId,
+                markdownRenderProps: markdownRenderProps,
+                "data-testid": "deep-think"
+            }));
+        case 'WebSearch':
+            return /*#__PURE__*/ React.createElement(WebSearch, _object_spread_props(_object_spread({}, thoughtChainListItem), {
+                key: thoughtChainListItem.runId,
+                isFinished: isFinished,
+                markdownRenderProps: markdownRenderProps
+            }));
+        default:
+            return null;
     }
-  }
-);
-var ThoughtChainItemIcon = React.memo(({ prefixCls, hashId, hasOutput, icon }) => {
-  return /* @__PURE__ */ React.createElement(
-    motion.div,
-    {
-      className: classNames(
-        `${prefixCls}-content-list-item-icon`,
-        {
-          [`${prefixCls}-content-list-item-icon-loading`]: !hasOutput,
-          [`${prefixCls}-content-list-item-icon-success`]: hasOutput
-        },
-        hashId
-      )
-    },
-    icon
-  );
 });
-var ThoughtChainItemMotion = React.memo(({ prefixCls, hashId, index, children }) => {
-  const variants = useMemo(() => {
-    if (false)
-      return void 0;
-    return {
-      hidden: {
-        y: 8,
-        opacity: 0
-      },
-      visible: {
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: 0.1 * index,
-          duration: 0.3
-        }
-      }
-    };
-  }, [index]);
-  return /* @__PURE__ */ React.createElement(
-    motion.div,
-    {
-      role: "listitem",
-      className: classNames(`${prefixCls}-content-list-item`, hashId),
-      variants
-    },
-    children
-  );
+/**
+ * ThoughtChainItemIcon 组件 - 思维链项图标容器组件
+ *
+ * 该组件用于显示思维链项的图标，支持加载和成功两种状态。
+ * 使用 Framer Motion 提供动画效果。
+ *
+ * @component
+ * @description 思维链项图标容器组件，显示状态图标
+ * @param {Object} props - 组件属性
+ * @param {string} props.prefixCls - 样式前缀
+ * @param {string} props.hashId - 样式哈希 ID
+ * @param {boolean} props.hasOutput - 是否有输出结果
+ * @param {React.ReactNode} props.icon - 图标内容
+ *
+ * @example
+ * ```tsx
+ * <ThoughtChainItemIcon
+ *   prefixCls="thought-chain"
+ *   hashId="hash-123"
+ *   hasOutput={true}
+ *   icon={<CustomIcon />}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的图标容器组件
+ *
+ * @remarks
+ * - 支持加载和成功状态样式
+ * - 使用 Framer Motion 动画
+ * - 响应式样式类名
+ * - 性能优化的 memo 组件
+ */ // 图标容器组件 - 独立 memo
+var ThoughtChainItemIcon = /*#__PURE__*/ React.memo(function(param) {
+    var prefixCls = param.prefixCls, hashId = param.hashId, hasOutput = param.hasOutput, icon = param.icon;
+    var _obj;
+    return /*#__PURE__*/ React.createElement(motion.div, {
+        className: classNames("".concat(prefixCls, "-content-list-item-icon"), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-content-list-item-icon-loading"), !hasOutput), _define_property(_obj, "".concat(prefixCls, "-content-list-item-icon-success"), hasOutput), _obj), hashId)
+    }, icon);
 });
-var ThoughtChainListItem = React.memo((props) => {
-  var _a, _b;
-  const [collapse, setCollapse] = React.useState(false);
-  const { thoughtChainListItem, prefixCls, hashId, setDocMeta } = props;
-  const markdownRenderProps = useMemo(() => {
-    return props.markdownRenderProps || {
-      codeProps: {
-        showLineNumbers: false
-      }
-    };
-  }, [props.markdownRenderProps]);
-  const isFinished = useMemo(() => {
-    var _a2;
-    return !!((_a2 = props == null ? void 0 : props.bubble) == null ? void 0 : _a2.isFinished) || !!props.isFinished;
-  }, [(_a = props == null ? void 0 : props.bubble) == null ? void 0 : _a.isFinished, props.isFinished]);
-  const handleMetaClick = React.useCallback(
-    (meta) => {
-      setDocMeta(meta);
-    },
-    [setDocMeta]
-  );
-  const handleCollapseChange = React.useCallback((change) => {
-    setCollapse(change);
-  }, []);
-  const titleDom = /* @__PURE__ */ React.createElement(
-    TitleInfo,
-    {
-      title: thoughtChainListItem.info,
-      costMillis: thoughtChainListItem.costMillis,
-      category: thoughtChainListItem.category,
-      prefixCls,
-      hashId,
-      isFinished,
-      setCollapse: handleCollapseChange,
-      collapse,
-      titleExtraRender: props.titleExtraRender ? (titleDom2) => {
-        var _a2;
-        return (_a2 = props == null ? void 0 : props.titleExtraRender) == null ? void 0 : _a2.call(props, thoughtChainListItem, titleDom2);
-      } : void 0,
-      meta: ((_b = thoughtChainListItem.meta) == null ? void 0 : _b.data) || {},
-      onMetaClick: handleMetaClick
-    }
-  );
-  const content = /* @__PURE__ */ React.createElement(
-    ThoughtChainItemDetail,
-    {
-      category: thoughtChainListItem.category,
-      thoughtChainListItem,
-      isFinished,
-      markdownRenderProps,
-      onMetaClick: handleMetaClick
-    }
-  );
-  return /* @__PURE__ */ React.createElement(
-    ThoughtChainItemMotion,
-    {
-      prefixCls,
-      hashId,
-      index: props.index
-    },
-    /* @__PURE__ */ React.createElement(
-      ThoughtChainItemIcon,
-      {
-        prefixCls,
-        hashId,
+/**
+ * ThoughtChainItemMotion 组件 - 思维链项动画容器组件
+ *
+ * 该组件为思维链项提供动画效果，使用 Framer Motion 实现。
+ * 在测试环境下会禁用动画以提高性能。
+ *
+ * @component
+ * @description 思维链项动画容器组件，提供动画效果
+ * @param {Object} props - 组件属性
+ * @param {string} props.prefixCls - 样式前缀
+ * @param {string} props.hashId - 样式哈希 ID
+ * @param {number} props.index - 项目索引，用于延迟动画
+ * @param {React.ReactNode} props.children - 子组件内容
+ *
+ * @example
+ * ```tsx
+ * <ThoughtChainItemMotion
+ *   prefixCls="thought-chain"
+ *   hashId="hash-123"
+ *   index={0}
+ * >
+ *   <div>内容</div>
+ * </ThoughtChainItemMotion>
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的动画容器组件
+ *
+ * @remarks
+ * - 使用 Framer Motion 提供动画
+ * - 测试环境下禁用动画
+ * - 支持延迟动画效果
+ * - 性能优化的 memo 组件
+ */ // 动画容器组件 - 独立 memo
+var ThoughtChainItemMotion = /*#__PURE__*/ React.memo(function(param) {
+    var prefixCls = param.prefixCls, hashId = param.hashId, index = param.index, children = param.children;
+    var variants = useMemo(function() {
+        if (process.env.NODE_ENV === 'test') return undefined;
+        return {
+            hidden: {
+                y: 8,
+                opacity: 0
+            },
+            visible: {
+                y: 0,
+                opacity: 1,
+                transition: {
+                    delay: 0.1 * index,
+                    duration: 0.3
+                }
+            }
+        };
+    }, [
+        index
+    ]);
+    return /*#__PURE__*/ React.createElement(motion.div, {
+        role: "listitem",
+        className: classNames("".concat(prefixCls, "-content-list-item"), hashId),
+        variants: variants
+    }, children);
+});
+/**
+ * ThoughtChainListItem 组件 - 思维链列表项组件
+ *
+ * 该组件用于显示单个思维链项，包括标题、内容、图标、状态等信息。
+ * 支持折叠/展开、文档元数据显示、自定义渲染等功能。
+ *
+ * @component
+ * @description 思维链列表项组件，显示单个思维链项
+ * @param {Object} props - 组件属性
+ * @param {Object} [props.bubble] - 气泡数据
+ * @param {boolean} [props.bubble.isFinished] - 是否已完成
+ * @param {number} [props.bubble.endTime] - 结束时间
+ * @param {number} [props.bubble.createAt] - 创建时间
+ * @param {string} props.hashId - 哈希ID
+ * @param {string} props.prefixCls - 前缀类名
+ * @param {number} props.index - 索引
+ * @param {WhiteBoxProcessInterface & {icon: React.ReactNode}} props.thoughtChainListItem - 思维链项数据
+ * @param {boolean} [props.isFinished] - 是否已完成
+ * @param {(meta: Partial<DocMeta>) => void} props.setDocMeta - 设置文档元数据
+ * @param {MarkdownEditorProps} [props.markdownRenderProps] - Markdown渲染配置
+ * @param {Function} [props.titleExtraRender] - 标题额外渲染函数
+ * @param {Function} [props.contentRender] - 内容渲染函数
+ *
+ * @example
+ * ```tsx
+ * <ThoughtChainListItem
+ *   thoughtChainListItem={itemData}
+ *   index={0}
+ *   prefixCls="thought-chain"
+ *   hashId="hash123"
+ *   setDocMeta={(meta) => setDocMeta(meta)}
+ *   isFinished={true}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的思维链列表项组件
+ *
+ * @remarks
+ * - 显示思维链项标题和内容
+ * - 支持折叠/展开功能
+ * - 提供状态指示
+ * - 支持文档元数据显示
+ * - 提供自定义渲染
+ * - 支持动画效果
+ * - 显示耗时信息
+ * - 支持图标显示
+ */ export var ThoughtChainListItem = /*#__PURE__*/ React.memo(function(props) {
+    var _props_bubble, _thoughtChainListItem_meta;
+    var _React_useState = _sliced_to_array(React.useState(false), 2), collapse = _React_useState[0], setCollapse = _React_useState[1];
+    var thoughtChainListItem = props.thoughtChainListItem, prefixCls = props.prefixCls, hashId = props.hashId, setDocMeta = props.setDocMeta;
+    var markdownRenderProps = useMemo(function() {
+        return props.markdownRenderProps || {
+            codeProps: {
+                showLineNumbers: false
+            }
+        };
+    }, [
+        props.markdownRenderProps
+    ]);
+    var isFinished = useMemo(function() {
+        var _props_bubble;
+        return !!(props === null || props === void 0 ? void 0 : (_props_bubble = props.bubble) === null || _props_bubble === void 0 ? void 0 : _props_bubble.isFinished) || !!props.isFinished;
+    }, [
+        props === null || props === void 0 ? void 0 : (_props_bubble = props.bubble) === null || _props_bubble === void 0 ? void 0 : _props_bubble.isFinished,
+        props.isFinished
+    ]);
+    var handleMetaClick = React.useCallback(function(meta) {
+        setDocMeta(meta);
+    }, [
+        setDocMeta
+    ]);
+    var handleCollapseChange = React.useCallback(function(change) {
+        setCollapse(change);
+    }, []);
+    var titleDom = /*#__PURE__*/ React.createElement(TitleInfo, {
+        title: thoughtChainListItem.info,
+        costMillis: thoughtChainListItem.costMillis,
+        category: thoughtChainListItem.category,
+        prefixCls: prefixCls,
+        hashId: hashId,
+        isFinished: isFinished,
+        setCollapse: handleCollapseChange,
+        collapse: collapse,
+        titleExtraRender: props.titleExtraRender ? function(titleDom) {
+            var _props_titleExtraRender;
+            return props === null || props === void 0 ? void 0 : (_props_titleExtraRender = props.titleExtraRender) === null || _props_titleExtraRender === void 0 ? void 0 : _props_titleExtraRender.call(props, thoughtChainListItem, titleDom);
+        } : undefined,
+        meta: ((_thoughtChainListItem_meta = thoughtChainListItem.meta) === null || _thoughtChainListItem_meta === void 0 ? void 0 : _thoughtChainListItem_meta.data) || {},
+        onMetaClick: handleMetaClick
+    });
+    var content = /*#__PURE__*/ React.createElement(ThoughtChainItemDetail, {
+        category: thoughtChainListItem.category,
+        thoughtChainListItem: thoughtChainListItem,
+        isFinished: isFinished,
+        markdownRenderProps: markdownRenderProps,
+        onMetaClick: handleMetaClick
+    });
+    return /*#__PURE__*/ React.createElement(ThoughtChainItemMotion, {
+        prefixCls: prefixCls,
+        hashId: hashId,
+        index: props.index
+    }, /*#__PURE__*/ React.createElement(ThoughtChainItemIcon, {
+        prefixCls: prefixCls,
+        hashId: hashId,
         hasOutput: !!thoughtChainListItem.output,
         icon: thoughtChainListItem.icon
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
+    }), /*#__PURE__*/ React.createElement("div", {
         style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "8px",
-          width: "100%",
-          minWidth: 0,
-          maxWidth: "100%"
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            width: '100%',
+            minWidth: 0,
+            maxWidth: '100%'
         }
-      },
-      props.titleRender ? props.titleRender(thoughtChainListItem, titleDom) : titleDom,
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            height: !collapse ? "auto" : "0px",
-            overflow: "hidden",
+    }, props.titleRender ? props.titleRender(thoughtChainListItem, titleDom) : titleDom, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: !collapse ? 'auto' : '0px',
+            overflow: 'hidden',
             gap: 8,
-            transition: "height 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-            transitionBehavior: "allow-discrete"
-          }
-        },
-        props.contentRender ? props.contentRender(thoughtChainListItem, content) : content
-      )
-    )
-  );
+            transition: 'height 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+            transitionBehavior: 'allow-discrete'
+        }
+    }, props.contentRender ? props.contentRender(thoughtChainListItem, content) : content)));
 });
-export {
-  ThoughtChainListItem
-};