@ant-design/agentic-ui 2.8.0 → 2.10.0

package/dist/ThoughtChainList/TitleInfo.js

@@ -1,11 +1,4 @@
-// src/ThoughtChainList/TitleInfo.tsx
-import {
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Newspaper,
-  TableProperties,
-  Wrench
-} from "@sofa-design/icons";
+import { ChevronsDownUp, ChevronsUpDown, Newspaper, TableProperties, Wrench } from "@sofa-design/icons";
 import { Popover } from "antd";
 import classNames from "classnames";
 import { motion } from "framer-motion";
@@ -14,185 +7,196 @@ import { I18nContext } from "../I18n";
 import { ActionIconBox } from "../index";
 import { CostMillis } from "./CostMillis";
 import { FlipText } from "./FlipText";
-var TitleInfo = (props) => {
-  const { collapse, isFinished, setCollapse } = props;
-  const { locale } = useContext(I18nContext);
-  const titleDom = useMemo(() => {
-    var _a;
-    const titleSegments = (_a = props == null ? void 0 : props.title) == null ? void 0 : _a.split(/(\$\{.*})/);
-    return titleSegments == null ? void 0 : titleSegments.map((tag, index) => {
-      var _a2, _b, _c, _d, _e, _f;
-      const meta = props.meta || {};
-      if (tag.startsWith("${") && tag.endsWith("}")) {
-        let infoTitle = tag;
-        const metaList = [meta[(_a2 = tag.replaceAll("${", "")) == null ? void 0 : _a2.replaceAll("}", "")]].flat(1) || [];
-        if (Array.isArray(metaList)) {
-          if (metaList.length > 1) {
-            if (props.category === "RagRetrieval") {
-              infoTitle = locale == null ? void 0 : locale.multipleKnowledgeBases;
-            } else if (props.category === "TableSql") {
-              infoTitle = ((_b = metaList.at(0)) == null ? void 0 : _b.name) + (locale == null ? void 0 : locale.multipleTables);
-            } else if (props.category === "ToolCall") {
-              infoTitle = ((_c = metaList.at(0)) == null ? void 0 : _c.name) + (locale == null ? void 0 : locale.multipleTools);
-            } else {
-              infoTitle = ((_d = metaList.at(0)) == null ? void 0 : _d.name) + (locale == null ? void 0 : locale.multipleData);
-            }
-          }
-          if (metaList.length === 1) {
-            infoTitle = ((_e = metaList.at(0)) == null ? void 0 : _e.name) || tag;
-          }
-        }
-        return /* @__PURE__ */ React.createElement(
-          Popover,
-          {
-            key: index,
-            open: metaList.length > 1 ? void 0 : false,
-            trigger: "hover",
-            content: /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexWrap: "wrap",
-                  flexDirection: "column",
-                  gap: "4px",
-                  maxHeight: 400,
-                  overflow: "auto",
-                  textAlign: "left",
-                  width: "100%"
+/**
+ * TitleInfo 组件 - 标题信息组件
+ *
+ * 该组件用于显示思维链项的标题信息，包括标题文本、耗时、类别、元数据等。
+ * 支持折叠/展开功能、元数据点击、自定义渲染等。
+ *
+ * @component
+ * @description 标题信息组件，显示思维链项的标题和相关信息
+ * @param {Object} props - 组件属性
+ * @param {number} [props.costMillis] - 耗时（毫秒）
+ * @param {string} props.category - 标题类别
+ * @param {string} props.title - 标题文本
+ * @param {string} props.prefixCls - 样式前缀
+ * @param {string} props.hashId - 样式哈希ID
+ * @param {boolean} props.collapse - 是否折叠
+ * @param {boolean} [props.isFinished] - 是否已完成
+ * @param {(collapse: boolean) => void} props.setCollapse - 设置折叠状态
+ * @param {(meta: Partial<DocMeta>) => void} [props.onMetaClick] - 元数据点击回调
+ * @param {string} [props.instanceId] - 实例ID
+ * @param {Function} [props.titleExtraRender] - 标题额外渲染函数
+ * @param {Record<string, Array>} props.meta - 元数据对象
+ *
+ * @example
+ * ```tsx
+ * <TitleInfo
+ *   title="分析用户需求"
+ *   category="thinking"
+ *   costMillis={1500}
+ *   collapse={false}
+ *   setCollapse={(collapse) => setCollapse(collapse)}
+ *   meta={{ knowledge: [{ name: "知识库1", icon: "db", uuid: "1" }] }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的标题信息组件
+ *
+ * @remarks
+ * - 支持标题中的元数据标签解析
+ * - 提供折叠/展开功能
+ * - 显示操作耗时
+ * - 支持元数据点击交互
+ * - 提供自定义渲染扩展
+ * - 支持国际化
+ * - 美观的动画效果
+ * - 响应式布局
+ */ export var TitleInfo = function(props) {
+    var collapse = props.collapse, isFinished = props.isFinished, setCollapse = props.setCollapse;
+    var locale = useContext(I18nContext).locale;
+    var titleDom = useMemo(function() {
+        var _props_title;
+        var titleSegments = props === null || props === void 0 ? void 0 : (_props_title = props.title) === null || _props_title === void 0 ? void 0 : _props_title.split(/(\$\{.*})/);
+        return titleSegments === null || titleSegments === void 0 ? void 0 : titleSegments.map(function(tag, index) {
+            var meta = props.meta || {};
+            if (tag.startsWith('${') && tag.endsWith('}')) {
+                var _tag_replaceAll, _this;
+                var infoTitle = tag;
+                var metaList = [
+                    meta[(_tag_replaceAll = tag.replaceAll('${', '')) === null || _tag_replaceAll === void 0 ? void 0 : _tag_replaceAll.replaceAll('}', '')]
+                ].flat(1) || [];
+                if (Array.isArray(metaList)) {
+                    if (metaList.length > 1) {
+                        if (props.category === 'RagRetrieval') {
+                            infoTitle = locale === null || locale === void 0 ? void 0 : locale.multipleKnowledgeBases;
+                        } else if (props.category === 'TableSql') {
+                            var _metaList_at;
+                            infoTitle = ((_metaList_at = metaList.at(0)) === null || _metaList_at === void 0 ? void 0 : _metaList_at.name) + (locale === null || locale === void 0 ? void 0 : locale.multipleTables);
+                        } else if (props.category === 'ToolCall') {
+                            var _metaList_at1;
+                            infoTitle = ((_metaList_at1 = metaList.at(0)) === null || _metaList_at1 === void 0 ? void 0 : _metaList_at1.name) + (locale === null || locale === void 0 ? void 0 : locale.multipleTools);
+                        } else {
+                            var _metaList_at2;
+                            infoTitle = ((_metaList_at2 = metaList.at(0)) === null || _metaList_at2 === void 0 ? void 0 : _metaList_at2.name) + (locale === null || locale === void 0 ? void 0 : locale.multipleData);
+                        }
+                    }
+                    if (metaList.length === 1) {
+                        var _metaList_at3;
+                        infoTitle = ((_metaList_at3 = metaList.at(0)) === null || _metaList_at3 === void 0 ? void 0 : _metaList_at3.name) || tag;
+                    }
                 }
-              },
-              (_f = [metaList]) == null ? void 0 : _f.flat(1).filter((item) => item).map((item, subIndex) => {
-                return /* @__PURE__ */ React.createElement(
-                  motion.span,
-                  {
-                    key: `${index}-${subIndex}`,
-                    className: classNames(
-                      `${props.prefixCls}-content-list-item-info`,
-                      props.hashId
-                    ),
-                    onClick: () => {
-                      var _a3;
-                      (_a3 = props == null ? void 0 : props.onMetaClick) == null ? void 0 : _a3.call(props, {
-                        doc_name: item.name,
-                        doc_id: item.uuid,
-                        type: item.type,
-                        origin_text: item.description
-                      });
+                return /*#__PURE__*/ React.createElement(Popover, {
+                    key: index,
+                    open: metaList.length > 1 ? undefined : false,
+                    trigger: "hover",
+                    content: /*#__PURE__*/ React.createElement("div", {
+                        style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            flexDirection: 'column',
+                            gap: '4px',
+                            maxHeight: 400,
+                            overflow: 'auto',
+                            textAlign: 'left',
+                            width: '100%'
+                        }
+                    }, (_this = [
+                        metaList
+                    ]) === null || _this === void 0 ? void 0 : _this.flat(1).filter(function(item) {
+                        return item;
+                    }).map(function(item, subIndex) {
+                        return /*#__PURE__*/ React.createElement(motion.span, {
+                            key: "".concat(index, "-").concat(subIndex),
+                            className: classNames("".concat(props.prefixCls, "-content-list-item-info"), props.hashId),
+                            onClick: function() {
+                                var _props_onMetaClick;
+                                props === null || props === void 0 ? void 0 : (_props_onMetaClick = props.onMetaClick) === null || _props_onMetaClick === void 0 ? void 0 : _props_onMetaClick.call(props, {
+                                    doc_name: item.name,
+                                    doc_id: item.uuid,
+                                    type: item.type,
+                                    origin_text: item.description
+                                });
+                            }
+                        }, /*#__PURE__*/ React.createElement("span", {
+                            style: {
+                                overflow: 'hidden',
+                                textWrap: 'nowrap',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                textAlign: 'left'
+                            }
+                        }, item.name));
+                    }))
+                }, /*#__PURE__*/ React.createElement(motion.span, {
+                    key: index,
+                    className: classNames("".concat(props.prefixCls, "-content-list-item-info"), "".concat(props.prefixCls, "-content-list-item-info-tag"), props.hashId)
+                }, props.category === 'ToolCall' && /*#__PURE__*/ React.createElement(Wrench, {
+                    width: 18,
+                    height: 18,
+                    style: {
+                        fontSize: 18
+                    }
+                }), props.category === 'RagRetrieval' && /*#__PURE__*/ React.createElement(Newspaper, {
+                    width: 18,
+                    height: 18,
+                    style: {
+                        fontSize: 18
                     }
-                  },
-                  /* @__PURE__ */ React.createElement(
-                    "span",
-                    {
-                      style: {
-                        overflow: "hidden",
-                        textWrap: "nowrap",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        textAlign: "left"
-                      }
+                }), props.category === 'TableSql' ? /*#__PURE__*/ React.createElement(TableProperties, {
+                    style: {
+                        fontSize: 18
                     },
-                    item.name
-                  )
-                );
-              })
-            )
-          },
-          /* @__PURE__ */ React.createElement(
-            motion.span,
-            {
-              key: index,
-              className: classNames(
-                `${props.prefixCls}-content-list-item-info`,
-                `${props.prefixCls}-content-list-item-info-tag`,
-                props.hashId
-              )
-            },
-            props.category === "ToolCall" && /* @__PURE__ */ React.createElement(Wrench, { width: 18, height: 18, style: { fontSize: 18 } }),
-            props.category === "RagRetrieval" && /* @__PURE__ */ React.createElement(Newspaper, { width: 18, height: 18, style: { fontSize: 18 } }),
-            props.category === "TableSql" ? /* @__PURE__ */ React.createElement(
-              TableProperties,
-              {
-                style: { fontSize: 18 },
-                width: 18,
-                height: 18
-              }
-            ) : null,
-            /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${props.prefixCls}-content-list-item-info-tag-text`,
-                  props.hashId
-                )
-              },
-              isFinished ? infoTitle || tag : /* @__PURE__ */ React.createElement(FlipText, { word: infoTitle || tag })
-            )
-          )
-        );
-      }
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: index,
-          style: {
-            overflow: "hidden",
-            textWrap: "nowrap",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          }
-        },
-        isFinished ? tag : /* @__PURE__ */ React.createElement(FlipText, { word: tag })
-      );
-    });
-  }, [props.title]);
-  const extraTitleDom = /* @__PURE__ */ React.createElement(
-    ActionIconBox,
-    {
-      "data-testid": "action-icon-box",
-      title: collapse ? locale == null ? void 0 : locale.expand : locale == null ? void 0 : locale.collapse,
-      onClick: () => {
-        setCollapse == null ? void 0 : setCollapse(!collapse);
-      }
-    },
-    !collapse ? /* @__PURE__ */ React.createElement(ChevronsDownUp, { "data-testid": "expand-icon" }) : /* @__PURE__ */ React.createElement(ChevronsUpDown, { "data-testid": "collapse-icon" })
-  );
-  return useMemo(
-    () => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        "data-testid": "title-info",
-        className: classNames(
-          `${props.prefixCls}-content-list-item-info`,
-          props.hashId
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          "data-testid": "title-text",
-          className: classNames(
-            `${props.prefixCls}-content-list-item-info-title`,
-            props.hashId
-          )
-        },
+                    width: 18,
+                    height: 18
+                }) : null, /*#__PURE__*/ React.createElement("span", {
+                    className: classNames("".concat(props.prefixCls, "-content-list-item-info-tag-text"), props.hashId)
+                }, isFinished ? infoTitle || tag : /*#__PURE__*/ React.createElement(FlipText, {
+                    word: infoTitle || tag
+                }))));
+            }
+            return /*#__PURE__*/ React.createElement("span", {
+                key: index,
+                style: {
+                    overflow: 'hidden',
+                    textWrap: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap'
+                }
+            }, isFinished ? tag : /*#__PURE__*/ React.createElement(FlipText, {
+                word: tag
+            }));
+        });
+    }, [
+        props.title
+    ]);
+    var extraTitleDom = /*#__PURE__*/ React.createElement(ActionIconBox, {
+        "data-testid": "action-icon-box",
+        title: collapse ? locale === null || locale === void 0 ? void 0 : locale.expand : locale === null || locale === void 0 ? void 0 : locale.collapse,
+        onClick: function() {
+            setCollapse === null || setCollapse === void 0 ? void 0 : setCollapse(!collapse);
+        }
+    }, !collapse ? /*#__PURE__*/ React.createElement(ChevronsDownUp, {
+        "data-testid": "expand-icon"
+    }) : /*#__PURE__*/ React.createElement(ChevronsUpDown, {
+        "data-testid": "collapse-icon"
+    }));
+    return useMemo(function() {
+        return /*#__PURE__*/ React.createElement("div", {
+            "data-testid": "title-info",
+            className: classNames("".concat(props.prefixCls, "-content-list-item-info"), props.hashId)
+        }, /*#__PURE__*/ React.createElement("div", {
+            "data-testid": "title-text",
+            className: classNames("".concat(props.prefixCls, "-content-list-item-info-title"), props.hashId)
+        }, titleDom, /*#__PURE__*/ React.createElement(CostMillis, {
+            costMillis: props.costMillis
+        })), /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(props.prefixCls, "-content-list-item-info-action"), props.hashId)
+        }, props.titleExtraRender ? props.titleExtraRender(extraTitleDom) : extraTitleDom));
+    }, [
         titleDom,
-        /* @__PURE__ */ React.createElement(CostMillis, { costMillis: props.costMillis })
-      ),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(
-            `${props.prefixCls}-content-list-item-info-action`,
-            props.hashId
-          )
-        },
-        props.titleExtraRender ? props.titleExtraRender(extraTitleDom) : extraTitleDom
-      )
-    ),
-    [titleDom, isFinished, collapse, props.costMillis]
-  );
-};
-export {
-  TitleInfo
+        isFinished,
+        collapse,
+        props.costMillis
+    ]);
 };