paul-ai-assistant 0.1.16

package/es/components/LlmTraceV2/index.js

@@ -0,0 +1,384 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { isEmpty } from 'lodash';
+import AssistentError from "../../AssistantChat/AssistentError";
+import { TRACE_STATUS_ENUM, TRACE_STATUS_MAP } from "../../constants/traceDataStatus";
+import ErrorBoundary from "../../ErrorBoundary";
+import { CSECustomIcon } from "../../utils/CSEIconTool";
+import { TRACE_TYPE_COMPONENT_MAP } from "../LlmTraceComponents/const";
+import "./index.scss";
+
+/** 思考过程 第二层，单节点 有透出状态 */
+
+/** 思考过程 最外层，折叠层 */
+
+/**
+ * LLM 链路组件
+ * @param props
+ * @returns
+ */
+var LlmTraceV2 = function LlmTraceV2(props) {
+  var _window;
+  var trace = props.trace,
+    dialogId = props.dialogId,
+    originData = props.originData;
+  var traceData = (trace === null || trace === void 0 ? void 0 : trace.data) || [];
+  var hasTrace = Array.isArray(traceData) && (traceData === null || traceData === void 0 ? void 0 : traceData.length) > 0;
+  var isCurrentMessage = dialogId === ((_window = window) === null || _window === void 0 ? void 0 : _window.currentUpdateMessageId);
+  // 判断是否为运行中状态
+  var isRunning = (trace === null || trace === void 0 ? void 0 : trace.status) === TRACE_STATUS_ENUM.RUNNING;
+  // 判断是否已完成
+  var traceFinished = (trace === null || trace === void 0 ? void 0 : trace.status) && (trace === null || trace === void 0 ? void 0 : trace.status) !== TRACE_STATUS_ENUM.RUNNING;
+  var traceCost = trace === null || trace === void 0 ? void 0 : trace.cost;
+
+  // 检查 trace 数据中是否包含 InspectionCard 类型的节点
+  var hasInspectionCard = React.useMemo(function () {
+    var checkNode = function checkNode(node) {
+      if ((node === null || node === void 0 ? void 0 : node.type) === 'InspectionCard') {
+        return true;
+      }
+      if (Array.isArray(node === null || node === void 0 ? void 0 : node.result)) {
+        return node.result.some(function (item) {
+          return checkNode(item);
+        });
+      }
+      if (node !== null && node !== void 0 && node.result && _typeof(node.result) === 'object') {
+        return checkNode(node.result);
+      }
+      return false;
+    };
+    return traceData === null || traceData === void 0 ? void 0 : traceData.some(function (item) {
+      return checkNode(item);
+    });
+  }, [traceData]);
+
+  // 控制trace是否折叠
+  // 运行中默认展开，已完成默认收起（但如果包含 InspectionCard，完成后也不收起）
+  var _useState = useState(function () {
+      // 如果明确设置了 collapse 属性，优先使用
+      if ((trace === null || trace === void 0 ? void 0 : trace.collapse) !== undefined) {
+        return trace.collapse;
+      }
+      // 如果包含 InspectionCard，默认展开
+      if (hasInspectionCard) {
+        return false;
+      }
+      // 否则根据运行状态决定：运行中展开，已完成收起
+      return traceFinished;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    traceCollapse = _useState2[0],
+    setTraceCollapse = _useState2[1];
+
+  // TraceItem 折叠状态管理（只针对第二层及以下的节点）
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    itemCollapseMap = _useState4[0],
+    setItemCollapseMap = _useState4[1];
+  // 用于跟踪哪些 item 是用户手动切换过的
+  var userToggledItemsRef = useRef(new Set());
+
+  // 检查节点或其子节点是否包含 InspectionCard
+  var checkHasInspectionCard = function checkHasInspectionCard(node) {
+    if ((node === null || node === void 0 ? void 0 : node.type) === 'InspectionCard') {
+      return true;
+    }
+    if (Array.isArray(node === null || node === void 0 ? void 0 : node.result)) {
+      return node.result.some(function (item) {
+        return checkHasInspectionCard(item);
+      });
+    }
+    if (node !== null && node !== void 0 && node.result && _typeof(node.result) === 'object') {
+      return checkHasInspectionCard(node.result);
+    }
+    return false;
+  };
+
+  // 动态更新 TraceItem 折叠状态
+  // - 当整个 trace 已完成时：所有子项默认折叠
+  // - 当整个 trace 还在运行时：根据子项自身状态决定（SUCCESS折叠，RUNNING展开）
+  useEffect(function () {
+    setItemCollapseMap(function (prevMap) {
+      var newMap = {};
+      traceData === null || traceData === void 0 || traceData.forEach(function (groupItem, groupIndex) {
+        var groupItemResult = groupItem === null || groupItem === void 0 ? void 0 : groupItem.result;
+        if (Array.isArray(groupItemResult) && (groupItemResult === null || groupItemResult === void 0 ? void 0 : groupItemResult.length) > 0) {
+          groupItemResult === null || groupItemResult === void 0 || groupItemResult.forEach(function (traceItem, itemIndex) {
+            var itemKey = "".concat(groupIndex, "-").concat(itemIndex, "-").concat(traceItem === null || traceItem === void 0 ? void 0 : traceItem.type);
+            // 如果用户手动切换过，保持原状态
+            if (userToggledItemsRef.current.has(itemKey)) {
+              var _prevMap$itemKey;
+              newMap[itemKey] = (_prevMap$itemKey = prevMap[itemKey]) !== null && _prevMap$itemKey !== void 0 ? _prevMap$itemKey : false;
+            } else {
+              // 检查当前节点或其子节点是否包含 InspectionCard
+              var hasInspectionCardInItem = checkHasInspectionCard(traceItem);
+              // 如果包含 InspectionCard，默认展开
+              if (hasInspectionCardInItem) {
+                newMap[itemKey] = false;
+              } else if (traceFinished) {
+                // 整个 trace 已完成，所有子项默认折叠
+                newMap[itemKey] = true;
+              } else {
+                // 整个 trace 还在运行，根据子项自身状态决定
+                var itemStatus = traceItem === null || traceItem === void 0 ? void 0 : traceItem.status;
+                var isItemFinished = itemStatus === TRACE_STATUS_ENUM.SUCCESS || itemStatus === TRACE_STATUS_ENUM.FAILED || itemStatus === TRACE_STATUS_ENUM.STOP;
+                newMap[itemKey] = isItemFinished;
+              }
+            }
+          });
+        } else if (groupItemResult && _typeof(groupItemResult) === 'object') {
+          var itemKey = "".concat(groupIndex, "-0-").concat(groupItemResult === null || groupItemResult === void 0 ? void 0 : groupItemResult.type);
+          // 如果用户手动切换过，保持原状态
+          if (userToggledItemsRef.current.has(itemKey)) {
+            var _prevMap$itemKey2;
+            newMap[itemKey] = (_prevMap$itemKey2 = prevMap[itemKey]) !== null && _prevMap$itemKey2 !== void 0 ? _prevMap$itemKey2 : false;
+          } else {
+            // 检查当前节点或其子节点是否包含 InspectionCard
+            var hasInspectionCardInItem = checkHasInspectionCard(groupItemResult);
+            // 如果包含 InspectionCard，默认展开
+            if (hasInspectionCardInItem) {
+              newMap[itemKey] = false;
+            } else if (traceFinished) {
+              // 整个 trace 已完成，所有子项默认折叠
+              newMap[itemKey] = true;
+            } else {
+              // 整个 trace 还在运行，根据子项自身状态决定
+              var itemStatus = groupItemResult === null || groupItemResult === void 0 ? void 0 : groupItemResult.status;
+              var isItemFinished = itemStatus === TRACE_STATUS_ENUM.SUCCESS || itemStatus === TRACE_STATUS_ENUM.FAILED || itemStatus === TRACE_STATUS_ENUM.STOP;
+              newMap[itemKey] = isItemFinished;
+            }
+          }
+        }
+      });
+
+      // shallow compare prevMap and newMap to avoid unnecessary state updates
+      var prevKeys = Object.keys(prevMap);
+      var newKeys = Object.keys(newMap);
+      if (prevKeys.length === newKeys.length && newKeys.every(function (k) {
+        return prevMap[k] === newMap[k];
+      })) {
+        return prevMap;
+      }
+      return newMap;
+    });
+  }, [traceData, traceFinished]);
+
+  // 切换单个 Item 的折叠状态
+  var toggleItemCollapse = function toggleItemCollapse(itemKey) {
+    // 标记这个 item 为用户手动切换过的
+    userToggledItemsRef.current.add(itemKey);
+    setItemCollapseMap(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, itemKey, !prev[itemKey]));
+    });
+  };
+  useEffect(function () {
+    // 如果明确设置了 collapse 为 true 的话，默认折叠，不自动调整
+    if ((trace === null || trace === void 0 ? void 0 : trace.collapse) === true) {
+      return;
+    }
+
+    // 如果包含 InspectionCard，不自动收起
+    if (hasInspectionCard) {
+      return;
+    }
+
+    // 完成后自动收起
+    if (traceFinished) {
+      setTraceCollapse(function (prev) {
+        return prev === true ? prev : true;
+      });
+      return;
+    }
+    // 运行中自动展开
+    if (isRunning) {
+      setTraceCollapse(function (prev) {
+        return prev === false ? prev : false;
+      });
+      return;
+    }
+  }, [traceFinished, isRunning, trace === null || trace === void 0 ? void 0 : trace.collapse, hasInspectionCard]);
+  var showTraceTitle = function showTraceTitle() {
+    var showCost = traceCost ? /*#__PURE__*/React.createElement("span", null, " (", traceCost, "ms)") : null;
+    var currentStatus = (trace === null || trace === void 0 ? void 0 : trace.status) || TRACE_STATUS_ENUM.RUNNING;
+    var statusConfig = TRACE_STATUS_MAP[currentStatus];
+    return /*#__PURE__*/React.createElement("span", {
+      className: "llm-card-trace-head-title-content",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(CSECustomIcon, {
+      className: statusConfig === null || statusConfig === void 0 ? void 0 : statusConfig.iconClassName,
+      style: {
+        position: 'relative',
+        marginRight: 4
+      },
+      type: statusConfig === null || statusConfig === void 0 ? void 0 : statusConfig.icon,
+      size: "small"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "llm-card-trace-head-title-text"
+    }, (statusConfig === null || statusConfig === void 0 ? void 0 : statusConfig.collapseTraceText) || '思考中', showCost));
+  };
+  var renderExternalComponent = function renderExternalComponent(type, result) {
+    var _props$traceExternalR;
+    var extraMeta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var Component = (_props$traceExternalR = props.traceExternalRenderType) === null || _props$traceExternalR === void 0 ? void 0 : _props$traceExternalR[type];
+    if (Component) {
+      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+        errorMessage: "\u5361\u7247\u6E32\u67D3\u5F02\u5E38\uFF0C\u7D27\u6025\u95EE\u9898\u8BF7\u8054\u7CFB\u5E73\u53F0\u8D1F\u8D23\u4EBA",
+        Fallback: AssistentError,
+        onLog: function onLog(error) {
+          console.error(error);
+        }
+      }, /*#__PURE__*/React.createElement(Component, _extends({}, result, {
+        dialogId: dialogId,
+        ctx: {
+          meta: _objectSpread(_objectSpread({}, props === null || props === void 0 ? void 0 : props.originData), extraMeta)
+        }
+      })));
+    }
+    return null;
+  };
+  var matchTraceComponent = function matchTraceComponent(item) {
+    if (!isEmpty(item === null || item === void 0 ? void 0 : item.result)) {
+      // 优先检查是否有外部自定义渲染器
+      var externalComponent = renderExternalComponent(item === null || item === void 0 ? void 0 : item.type, item === null || item === void 0 ? void 0 : item.result, {
+        isCurrentMessage: isCurrentMessage
+      });
+      if (externalComponent) {
+        return externalComponent;
+      }
+      var Component = TRACE_TYPE_COMPONENT_MAP === null || TRACE_TYPE_COMPONENT_MAP === void 0 ? void 0 : TRACE_TYPE_COMPONENT_MAP[item === null || item === void 0 ? void 0 : item.type];
+      if (Component) {
+        return /*#__PURE__*/React.createElement(Component, {
+          data: item,
+          originData: originData,
+          isCurrentMessage: isCurrentMessage,
+          dialogId: dialogId
+        });
+      }
+      return item === null || item === void 0 ? void 0 : item.defaultContent;
+    }
+    return item === null || item === void 0 ? void 0 : item.defaultContent;
+  };
+  var showTraceItemContent = function showTraceItemContent(item, groupIndex, itemIndex) {
+    var _item$showTitle;
+    var showComponent = matchTraceComponent(item);
+    // 生成唯一的 itemKey，用于标识每个 Item
+    var itemKey = "".concat(groupIndex, "-").concat(itemIndex, "-").concat(item === null || item === void 0 ? void 0 : item.type);
+    var isItemCollapsed = itemCollapseMap[itemKey] || false;
+
+    // 获取 TraceItem 的状态配置
+    var itemStatus = traceFinished ? TRACE_STATUS_ENUM.SUCCESS : (item === null || item === void 0 ? void 0 : item.status) || TRACE_STATUS_ENUM.RUNNING;
+    var itemStatusConfig = TRACE_STATUS_MAP[itemStatus];
+
+    // 移除 showTitle 中的箭头符号（如 ➔、→、▶、► 等）
+    var cleanTitle = item === null || item === void 0 || (_item$showTitle = item.showTitle) === null || _item$showTitle === void 0 ? void 0 : _item$showTitle.replace(/^[➔→▶►]\s*/, '').trim();
+
+    // 如果没有 showTitle，内容应该直接显示，不受折叠状态控制
+    var hasShowTitle = !!(item !== null && item !== void 0 && item.showTitle);
+    var shouldShowContent = hasShowTitle ? !isItemCollapsed && showComponent : showComponent;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "llm-card-trace-item-container",
+      key: itemKey
+    }, (item === null || item === void 0 ? void 0 : item.showTitle) && /*#__PURE__*/React.createElement("div", {
+      className: classNames('llm-card-trace-item-title', {
+        'has-collapse-icon': showComponent
+      }),
+      onClick: function onClick() {
+        return toggleItemCollapse(itemKey);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "trace-item-title-left"
+    }, /*#__PURE__*/React.createElement(CSECustomIcon, {
+      className: itemStatusConfig === null || itemStatusConfig === void 0 ? void 0 : itemStatusConfig.iconClassName,
+      type: itemStatusConfig === null || itemStatusConfig === void 0 ? void 0 : itemStatusConfig.icon,
+      size: "small"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "trace-item-title-text"
+    }, cleanTitle)), showComponent && /*#__PURE__*/React.createElement(CSECustomIcon, {
+      className: classNames('trace-item-collapse-icon', isItemCollapsed ? '' : 'trace-item-collapse-icon-transform'),
+      type: "iconchakangengduo",
+      size: "small"
+    })), shouldShowContent && /*#__PURE__*/React.createElement("div", {
+      className: "llm-card-trace-item-content"
+    }, showComponent));
+  };
+  var showGroupItemResult = function showGroupItemResult(groupItem, groupIndex) {
+    var groupItemResult = groupItem === null || groupItem === void 0 ? void 0 : groupItem.result;
+    if (Array.isArray(groupItemResult) && (groupItemResult === null || groupItemResult === void 0 ? void 0 : groupItemResult.length) > 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('trace-group-content', {
+          'trace-group-content-left-border': groupIndex < (traceData === null || traceData === void 0 ? void 0 : traceData.length) - 1
+        })
+      }, groupItemResult === null || groupItemResult === void 0 ? void 0 : groupItemResult.map(function (traceItem, itemIndex) {
+        return showTraceItemContent(traceItem, groupIndex, itemIndex);
+      }));
+    } else if (groupItemResult && _typeof(groupItemResult) === 'object') {
+      // 当 result 是对象时，直接将 result 对象作为内容渲染，不显示 showTitle
+      var showComponent = matchTraceComponent(groupItemResult);
+      return showComponent ? /*#__PURE__*/React.createElement("div", {
+        className: classNames('trace-group-content', {
+          'trace-group-content-left-border': groupIndex < (traceData === null || traceData === void 0 ? void 0 : traceData.length) - 1
+        })
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "llm-card-trace-item-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "llm-card-trace-item-content"
+      }, showComponent))) : null;
+    }
+    return null;
+  };
+  return hasTrace ? /*#__PURE__*/React.createElement("div", {
+    className: "llm-card-trace-v2-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "llm-card-trace-head",
+    onClick: function onClick() {
+      setTraceCollapse(!traceCollapse);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "llm-card-trace-head-title"
+  }, showTraceTitle()), /*#__PURE__*/React.createElement(CSECustomIcon, {
+    className: classNames('trace-collapse-icon', traceCollapse ? '' : 'trace-collapse-icon-transform'),
+    type: "iconchakangengduo",
+    size: "small"
+  })), !traceCollapse && /*#__PURE__*/React.createElement("div", {
+    className: "llm-card-trace"
+  }, traceData === null || traceData === void 0 ? void 0 : traceData.map(function (groupItem, groupIndex) {
+    if (!(groupItem !== null && groupItem !== void 0 && groupItem.title || groupItem !== null && groupItem !== void 0 && groupItem.showTitle || groupItem !== null && groupItem !== void 0 && groupItem.result || groupItem !== null && groupItem !== void 0 && groupItem.status)) {
+      return null;
+    }
+    var groupShowTitle = groupItem === null || groupItem === void 0 ? void 0 : groupItem.showTitle;
+    if (!groupShowTitle) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "llm-card-trace-single-group",
+        key: groupItem === null || groupItem === void 0 ? void 0 : groupItem.title
+      }, showGroupItemResult(groupItem, groupIndex));
+    }
+    var traceItemStatusType = TRACE_STATUS_MAP[groupItem === null || groupItem === void 0 ? void 0 : groupItem.status];
+    return /*#__PURE__*/React.createElement("div", {
+      className: "llm-card-trace-group",
+      key: groupItem === null || groupItem === void 0 ? void 0 : groupItem.title
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "trace-group-title"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "trace-group-title-left"
+    }, /*#__PURE__*/React.createElement(CSECustomIcon, {
+      className: traceItemStatusType === null || traceItemStatusType === void 0 ? void 0 : traceItemStatusType.iconClassName,
+      style: {
+        marginTop: -2
+      },
+      type: traceItemStatusType === null || traceItemStatusType === void 0 ? void 0 : traceItemStatusType.icon,
+      size: "small"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "trace-group-title-text"
+    }, groupShowTitle))), showGroupItemResult(groupItem, groupIndex));
+  }))) : null;
+};
+export default LlmTraceV2;

package/es/components/LlmTraceV2/index.scss

@@ -0,0 +1,115 @@
+.llm-card-trace-v2-container {
+  background-color: #f7f7f7;
+  border-radius: 3px;
+  padding: 8px;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+  font-size: 12px;
+
+  .trace-collapse-icon {
+    cursor: pointer;
+    margin-top: -2px;
+    transition: transform 0.1s linear, -webkit-transform 0.1s linear;
+  }
+
+  .trace-collapse-icon-transform {
+    transform: rotate(180deg);
+  }
+
+  .llm-card-trace-head {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 4px;
+
+    .llm-card-trace-head-title {
+      font-weight: 500;
+      font-size: 12px;
+      color: #171a1d;
+    }
+  }
+
+  .llm-card-trace {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .llm-card-trace-single-group,
+  .llm-card-trace-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .trace-group-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .trace-group-title-left {
+        display: flex;
+        align-items: center;
+
+        .trace-group-title-text {
+          margin-left: 4px;
+          font-weight: 500;
+          color: #171a1d;
+        }
+      }
+    }
+
+    .trace-group-content {
+      font-weight: 400;
+      color: #393b3d;
+      margin-left: 8px;
+      padding-left: 12px;
+    }
+
+    .trace-group-content-left-border {
+      margin-left: 7px;
+      border-left: 1px solid #dcdee0;
+    }
+
+    .llm-card-trace-item-container {
+      .llm-card-trace-item-title {
+        font-weight: 400;
+        color: #717579;
+        margin-bottom: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: start;
+
+        .trace-item-title-left {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .trace-item-collapse-icon {
+          position: relative;
+          transition: transform 0.1s linear, -webkit-transform 0.1s linear;
+        }
+
+        .trace-item-collapse-icon-transform {
+          transform: rotate(180deg);
+        }
+      }
+
+      .llm-card-trace-item-title.has-collapse-icon {
+        cursor: pointer;
+      }
+
+      .llm-card-trace-item-content {
+        margin-bottom: 4px;
+      }
+    }
+  }
+
+  .llm-card-trace-single-group {
+    .trace-group-content {
+      margin-left: 0;
+    }
+  }
+}

package/es/components/LlmTraceV3/components/TraceContentComponents/BusinessFlow/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * BusinessFlow 业务流组件
+ * 展示业务流程，支持点击查看详情
+ */
+import React from 'react';
+import type { IBusinessFlowResult } from '../../../types';
+import './index.scss';
+export interface IBusinessFlowProps extends IBusinessFlowResult {
+    dialogId?: string;
+    ctx?: any;
+}
+declare const _default: React.NamedExoticComponent<IBusinessFlowProps>;
+export default _default;

package/es/components/LlmTraceV3/components/TraceContentComponents/BusinessFlow/index.js

@@ -0,0 +1,38 @@
+/**
+ * BusinessFlow 业务流组件
+ * 展示业务流程，支持点击查看详情
+ */
+import React from 'react';
+import { CSECustomIcon } from "../../../../../utils/CSEIconTool";
+import "./index.scss";
+var BusinessFlow = function BusinessFlow(props) {
+  var flowId = props.flowId,
+    flowName = props.flowName,
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? 'iconmagic-f' : _props$icon,
+    url = props.url,
+    description = props.description;
+  var handleClick = function handleClick() {
+    if (url) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "business-flow",
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flow-name-container"
+  }, /*#__PURE__*/React.createElement(CSECustomIcon, {
+    type: icon,
+    className: "flow-icon",
+    style: {
+      fontSize: '12px',
+      color: '#1B58F4'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "flow-name"
+  }, flowName)), description && /*#__PURE__*/React.createElement("div", {
+    className: "flow-description"
+  }, description));
+};
+export default /*#__PURE__*/React.memo(BusinessFlow);

package/es/components/LlmTraceV3/components/TraceContentComponents/BusinessFlow/index.scss

@@ -0,0 +1,56 @@
+/**
+ * BusinessFlow 业务流标识组件样式
+ */
+
+// ==================== 样式变量 ====================
+$trace-subtitle-color: #717579;
+
+// ==================== BusinessFlow 业务流标识 ====================
+.business-flow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 8px 12px;
+  background-color: #fff;
+  border-radius: 3px;
+
+  .flow-name-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 20px;
+    padding: 0 6px;
+    border-radius: 3px;
+    background-color: #ebf0ff;
+    color: #1b58f4;
+    flex-shrink: 0;
+
+    .flow-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .flow-name {
+      font-size: 12px;
+      color: inherit;
+      line-height: 20px;
+      white-space: nowrap;
+    }
+  }
+
+  .flow-description {
+    font-size: 12px;
+    color: $trace-subtitle-color;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    opacity: 0.85;
+  }
+}

package/es/components/LlmTraceV3/components/TraceContentComponents/CodeBlock/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * CodeBlock 通用代码块组件
+ * 支持语法高亮（可选）和折叠功能
+ */
+import React from 'react';
+import './index.scss';
+export interface ICodeBlockProps {
+    code: string;
+    language?: string;
+    collapsed?: boolean;
+    collapsible?: boolean;
+    showLineNumbers?: boolean;
+    maxHeight?: number;
+    dialogId?: string;
+    ctx?: any;
+}
+declare const _default: React.NamedExoticComponent<ICodeBlockProps>;
+export default _default;