paul-ai-assistant 0.1.16

package/es/components/LlmTraceV3/hooks/useGroupCollapse.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 管理所有 Group 的折叠状态
+ */
+import type { ITraceSecondItem } from '../types';
+interface UseGroupCollapseReturn {
+    groupCollapseMap: Record<string, boolean>;
+    toggleGroup: (key: string) => void;
+    expandAll: () => void;
+}
+/**
+ * useGroupCollapse Hook
+ * @param traceData Trace 数据
+ * @param traceFinished 整体 trace 是否已完成
+ * @param hasInspectionCard 是否包含巡检卡片
+ * @returns Group 折叠状态和切换函数
+ */
+export declare const useGroupCollapse: (traceData: ITraceSecondItem[], traceFinished: boolean, hasInspectionCard?: boolean) => UseGroupCollapseReturn;
+export {};

package/es/components/LlmTraceV3/hooks/useGroupCollapse.js

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * 管理所有 Group 的折叠状态
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { TRACE_STATUS_ENUM } from "../../../constants/traceDataStatus";
+import { isShallowEqual } from "../utils/traceHelpers";
+/**
+ * useGroupCollapse Hook
+ * @param traceData Trace 数据
+ * @param traceFinished 整体 trace 是否已完成
+ * @param hasInspectionCard 是否包含巡检卡片
+ * @returns Group 折叠状态和切换函数
+ */
+export var useGroupCollapse = function useGroupCollapse(traceData, traceFinished, hasInspectionCard) {
+  // 用户手动切换的 Group
+  var userToggledGroupsRef = useRef(new Set());
+
+  // 获取 Group 的默认折叠状态
+  var getDefaultCollapsed = function getDefaultCollapsed(group) {
+    // 如果有巡检卡片，则不折叠
+    if (hasInspectionCard) {
+      return false;
+    }
+    // 如果状态为 SUCCESS，则折叠；否则展开
+    return group.status === TRACE_STATUS_ENUM.SUCCESS;
+  };
+
+  // 初始化折叠状态
+  var _useState = useState(function () {
+      var map = {};
+      traceData === null || traceData === void 0 || traceData.forEach(function (group, groupIndex) {
+        var key = "group-".concat(groupIndex);
+        map[key] = getDefaultCollapsed(group);
+      });
+      return map;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    groupCollapseMap = _useState2[0],
+    setGroupCollapseMap = _useState2[1];
+
+  // 当 traceData 变化时，更新折叠状态
+  useEffect(function () {
+    setGroupCollapseMap(function (prevMap) {
+      var newMap = {};
+      traceData === null || traceData === void 0 || traceData.forEach(function (group, groupIndex) {
+        var key = "group-".concat(groupIndex);
+        // 如果用户手动切换过，保持用户的选择；否则根据状态设置默认值
+        if (userToggledGroupsRef.current.has(key)) {
+          var _prevMap$key;
+          newMap[key] = (_prevMap$key = prevMap[key]) !== null && _prevMap$key !== void 0 ? _prevMap$key : false;
+        } else {
+          newMap[key] = getDefaultCollapsed(group);
+        }
+      });
+
+      // 浅比较，避免不必要的更新
+      if (isShallowEqual(prevMap, newMap)) {
+        return prevMap;
+      }
+      return newMap;
+    });
+  }, [traceData, hasInspectionCard]);
+  var toggleGroup = function toggleGroup(key) {
+    // 记录用户手动切换的 Group
+    userToggledGroupsRef.current.add(key);
+    setGroupCollapseMap(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, !prev[key]));
+    });
+  };
+  var expandAll = function expandAll() {
+    // 展开所有 Group
+    setGroupCollapseMap(function (prev) {
+      var newMap = {};
+      Object.keys(prev).forEach(function (key) {
+        newMap[key] = false;
+        // 标记为用户手动操作，避免自动折叠
+        userToggledGroupsRef.current.add(key);
+      });
+      return newMap;
+    });
+  };
+  return {
+    groupCollapseMap: groupCollapseMap,
+    toggleGroup: toggleGroup,
+    expandAll: expandAll
+  };
+};

package/es/components/LlmTraceV3/hooks/useItemCollapse.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 管理所有 Item 的折叠状态
+ */
+import type { ITraceSecondItem } from '../types';
+interface UseItemCollapseReturn {
+    itemCollapseMap: Record<string, boolean>;
+    toggleItem: (key: string) => void;
+    userToggledItems: Set<string>;
+}
+/**
+ * useItemCollapse Hook
+ * @param traceData Trace 数据
+ * @param traceFinished 整体 trace 是否已完成
+ * @param hasInspectionCard 是否包含 InspectionCard
+ * @returns Item 折叠状态和切换函数
+ */
+export declare const useItemCollapse: (traceData: ITraceSecondItem[], traceFinished: boolean, hasInspectionCard: boolean) => UseItemCollapseReturn;
+export {};

package/es/components/LlmTraceV3/hooks/useItemCollapse.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * 管理所有 Item 的折叠状态
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { initializeItemCollapseMap } from "../utils/collapseLogic";
+import { isShallowEqual } from "../utils/traceHelpers";
+/**
+ * useItemCollapse Hook
+ * @param traceData Trace 数据
+ * @param traceFinished 整体 trace 是否已完成
+ * @param hasInspectionCard 是否包含 InspectionCard
+ * @returns Item 折叠状态和切换函数
+ */
+export var useItemCollapse = function useItemCollapse(traceData, traceFinished, hasInspectionCard) {
+  // 用户手动切换的项
+  var userToggledItemsRef = useRef(new Set());
+
+  // 初始化折叠状态
+  var _useState = useState(function () {
+      return initializeItemCollapseMap(traceData, traceFinished, hasInspectionCard);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    itemCollapseMap = _useState2[0],
+    setItemCollapseMap = _useState2[1];
+
+  // 当 traceData 或 traceFinished 变化时，更新折叠状态
+  useEffect(function () {
+    setItemCollapseMap(function (prevMap) {
+      var newMap = initializeItemCollapseMap(traceData, traceFinished, hasInspectionCard);
+
+      // 保留用户手动切换的状态
+      userToggledItemsRef.current.forEach(function (key) {
+        if (key in newMap && key in prevMap) {
+          newMap[key] = prevMap[key];
+        }
+      });
+
+      // 浅比较，避免不必要的更新
+      if (isShallowEqual(prevMap, newMap)) {
+        return prevMap;
+      }
+      return newMap;
+    });
+  }, [traceData, traceFinished, hasInspectionCard]);
+  var toggleItem = function toggleItem(key) {
+    // 记录用户手动切换的项
+    userToggledItemsRef.current.add(key);
+    setItemCollapseMap(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, !prev[key]));
+    });
+  };
+  return {
+    itemCollapseMap: itemCollapseMap,
+    toggleItem: toggleItem,
+    userToggledItems: userToggledItemsRef.current
+  };
+};

package/es/components/LlmTraceV3/hooks/useTraceAnimation.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 管理折叠/展开动画
+ */
+interface UseTraceAnimationReturn {
+    animationClass: string;
+    shouldRender: boolean;
+}
+/**
+ * useTraceAnimation Hook
+ * @param collapsed 是否折叠
+ * @param duration 动画时长（ms）
+ * @returns 动画类名和是否应该渲染
+ */
+export declare const useTraceAnimation: (collapsed: boolean, duration?: number) => UseTraceAnimationReturn;
+export {};

package/es/components/LlmTraceV3/hooks/useTraceAnimation.js

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * 管理折叠/展开动画
+ */
+
+import { useEffect, useState } from 'react';
+/**
+ * useTraceAnimation Hook
+ * @param collapsed 是否折叠
+ * @param duration 动画时长（ms）
+ * @returns 动画类名和是否应该渲染
+ */
+export var useTraceAnimation = function useTraceAnimation(collapsed) {
+  var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
+  var _useState = useState(!collapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    animationClass = _useState4[0],
+    setAnimationClass = _useState4[1];
+  useEffect(function () {
+    if (collapsed) {
+      // 开始折叠动画
+      setAnimationClass('collapsing');
+
+      // 动画完成后隐藏内容
+      var timer = setTimeout(function () {
+        setShouldRender(false);
+        setAnimationClass('');
+      }, duration);
+      return function () {
+        return clearTimeout(timer);
+      };
+    } else {
+      // 开始展开：先显示内容
+      setShouldRender(true);
+      setAnimationClass('expanding');
+
+      // 动画完成后清除类名
+      var _timer = setTimeout(function () {
+        setAnimationClass('');
+      }, duration);
+      return function () {
+        return clearTimeout(_timer);
+      };
+    }
+  }, [collapsed, duration]);
+  return {
+    animationClass: animationClass,
+    shouldRender: shouldRender
+  };
+};

package/es/components/LlmTraceV3/hooks/useTraceCollapse.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 管理整体 Trace 的折叠状态
+ */
+import type { ITrace } from '../types';
+interface UseTraceCollapseReturn {
+    collapsed: boolean;
+    toggle: () => void;
+    setCollapsed: (collapsed: boolean) => void;
+}
+/**
+ * useTraceCollapse Hook
+ * @param trace Trace 数据
+ * @param hasInspectionCard 是否包含 InspectionCard
+ * @returns 折叠状态和切换函数
+ */
+export declare const useTraceCollapse: (trace?: ITrace, hasInspectionCard?: boolean) => UseTraceCollapseReturn;
+export {};

package/es/components/LlmTraceV3/hooks/useTraceCollapse.js

@@ -0,0 +1,80 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * 管理整体 Trace 的折叠状态
+ */
+
+import { useEffect, useState } from 'react';
+import { TRACE_STATUS_ENUM } from "../../../constants/traceDataStatus";
+/**
+ * useTraceCollapse Hook
+ * @param trace Trace 数据
+ * @param hasInspectionCard 是否包含 InspectionCard
+ * @returns 折叠状态和切换函数
+ */
+export var useTraceCollapse = function useTraceCollapse(trace) {
+  var hasInspectionCard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var _useState = useState(function () {
+      // 如果包含 InspectionCard，默认展开（最高优先级）
+      if (hasInspectionCard) {
+        return false;
+      }
+
+      // 运行中默认展开（高优先级）
+      if ((trace === null || trace === void 0 ? void 0 : trace.status) === TRACE_STATUS_ENUM.RUNNING) {
+        return false;
+      }
+
+      // 已完成默认收起（中优先级）
+      if (trace !== null && trace !== void 0 && trace.status && [TRACE_STATUS_ENUM.SUCCESS, TRACE_STATUS_ENUM.FAILED, TRACE_STATUS_ENUM.STOP].includes(trace.status)) {
+        return true;
+      }
+
+      // 如果明确设置了 collapse 属性，使用该值（低优先级）
+      if ((trace === null || trace === void 0 ? void 0 : trace.collapse) !== undefined) {
+        return trace.collapse;
+      }
+
+      // 默认收起
+      return true;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+
+  // 当状态变化时，自动调整折叠状态
+  useEffect(function () {
+    // 包含 InspectionCard 时，始终展开（最高优先级）
+    if (hasInspectionCard) {
+      setCollapsed(false);
+      return;
+    }
+
+    // 运行中时自动展开（高优先级，忽略 collapse 设置）
+    if ((trace === null || trace === void 0 ? void 0 : trace.status) === TRACE_STATUS_ENUM.RUNNING) {
+      setCollapsed(false);
+      return;
+    }
+
+    // 完成后自动折叠（中优先级，状态的默认行为）
+    if (trace !== null && trace !== void 0 && trace.status && [TRACE_STATUS_ENUM.SUCCESS, TRACE_STATUS_ENUM.FAILED, TRACE_STATUS_ENUM.STOP].includes(trace.status)) {
+      setCollapsed(true);
+      return;
+    }
+
+    // 如果明确设置了 collapse 属性，使用该值（低优先级）
+    if ((trace === null || trace === void 0 ? void 0 : trace.collapse) !== undefined) {
+      setCollapsed(trace.collapse);
+      return;
+    }
+  }, [trace === null || trace === void 0 ? void 0 : trace.status, trace === null || trace === void 0 ? void 0 : trace.collapse, hasInspectionCard]);
+  var toggle = function toggle() {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+  return {
+    collapsed: collapsed,
+    toggle: toggle,
+    setCollapsed: setCollapsed
+  };
+};

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

@@ -0,0 +1,11 @@
+/**
+ * LlmTraceV3 主组件
+ * 思考链路展示组件 V3 版本
+ */
+import React from 'react';
+import type { ILlmTraceV3Props } from './types';
+import './index.scss';
+export type { ITrace, ITraceSecondItem, ITraceThirdItem, ILlmTraceV3Props, ITraceHeaderProps, ITraceGroupProps, ITraceItemProps, ITraceStatusIconProps, TraceRenderMode, } from './types';
+export { TRACE_V3_TYPE_COMPONENT_ENUM } from './types';
+declare const _default: React.NamedExoticComponent<ILlmTraceV3Props>;
+export default _default;

package/es/components/LlmTraceV3/index.js

@@ -0,0 +1,173 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+/**
+ * LlmTraceV3 主组件
+ * 思考链路展示组件 V3 版本
+ */
+import React, { useMemo } from 'react';
+import { TRACE_STATUS_ENUM } from "../../constants/traceDataStatus";
+import TraceGroup from "./components/TraceGroup";
+import TraceHeader from "./components/TraceHeader";
+import TraceSlide from "./components/TraceSlide";
+import { useGroupCollapse } from "./hooks/useGroupCollapse";
+import { useItemCollapse } from "./hooks/useItemCollapse";
+import { useTraceCollapse } from "./hooks/useTraceCollapse";
+import { hasSpecialNode } from "./utils/traceHelpers";
+import "./index.scss";
+
+/**
+ * LLM Trace V3 组件
+ * @param props
+ * @returns
+ */
+var LlmTraceV3 = function LlmTraceV3(props) {
+  var trace = props.trace,
+    dialogId = props.dialogId,
+    originData = props.originData,
+    traceExternalRenderType = props.traceExternalRenderType,
+    thinkLoading = props.thinkLoading;
+
+  // 规范化 thinkLoading 值，兼容后端返回字符串 'false'
+  var normalizedThinkLoading = useMemo(function () {
+    if (thinkLoading === 'false' || thinkLoading === false || !thinkLoading) {
+      return false;
+    }
+    return true;
+  }, [thinkLoading]);
+
+  // 使用 useMemo 缓存 traceData
+  var traceData = useMemo(function () {
+    return (trace === null || trace === void 0 ? void 0 : trace.data) || [];
+  }, [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 traceFinished = (trace === null || trace === void 0 ? void 0 : trace.status) && (trace === null || trace === void 0 ? void 0 : trace.status) !== TRACE_STATUS_ENUM.RUNNING;
+
+  // 检查 trace 数据中是否包含特殊节点（如 InspectionCard）
+  // slide 模式下需要检查 content 字段，默认模式检查 data 字段
+  var hasInspectionCard = useMemo(function () {
+    if ((trace === null || trace === void 0 ? void 0 : trace.renderMode) === 'slide' && Array.isArray(trace === null || trace === void 0 ? void 0 : trace.content)) {
+      // slide 模式：检查 content 数组中是否有 InspectionCard
+      return trace.content.some(function (item) {
+        return _typeof(item) === 'object' && (item === null || item === void 0 ? void 0 : item.type) === 'InspectionCard';
+      });
+    }
+    // 默认模式：检查 data 字段
+    return hasSpecialNode(traceData);
+  }, [trace === null || trace === void 0 ? void 0 : trace.renderMode, trace === null || trace === void 0 ? void 0 : trace.content, traceData]);
+
+  // 所有 Group 的折叠状态
+  var _useGroupCollapse = useGroupCollapse(traceData, traceFinished, hasInspectionCard),
+    groupCollapseMap = _useGroupCollapse.groupCollapseMap,
+    toggleGroup = _useGroupCollapse.toggleGroup,
+    expandAll = _useGroupCollapse.expandAll;
+
+  // 整体 Trace 的折叠状态
+  var _useTraceCollapse = useTraceCollapse(trace, hasInspectionCard),
+    collapsed = _useTraceCollapse.collapsed,
+    originalToggle = _useTraceCollapse.toggle;
+
+  // 自定义 toggle 函数：当状态为 SUCCESS 且从折叠变为展开时，展开所有 Group
+  var toggle = function toggle() {
+    // 如果当前是折叠状态，即将展开
+    if (collapsed && (trace === null || trace === void 0 ? void 0 : trace.status) === TRACE_STATUS_ENUM.SUCCESS) {
+      // 展开所有二级节点
+      expandAll();
+    }
+    // 执行原始的 toggle
+    originalToggle();
+  };
+
+  // 所有 Item 的折叠状态
+  var _useItemCollapse = useItemCollapse(traceData, traceFinished, hasInspectionCard),
+    itemCollapseMap = _useItemCollapse.itemCollapseMap,
+    toggleItem = _useItemCollapse.toggleItem;
+
+  // 抽取 Loading 渲染组件
+  var renderThinkLoading = function renderThinkLoading() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "llm-card-trace-v3-loading"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "https://img.alicdn.com/imgextra/i3/O1CN013RmVnC1Zbbfa3vYLH_!!6000000003213-1-tps-64-64.gif",
+      alt: "\u601D\u8003\u4E2D...",
+      className: "think-loading-gif"
+    }));
+  };
+
+  // 如果没有状态，检查是否有 thinkLoading
+  if (!(trace !== null && trace !== void 0 && trace.status)) {
+    // 如果有 thinkLoading，只渲染 loading 状态
+    if (normalizedThinkLoading) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "llm-card-trace-v3-wrapper"
+      }, renderThinkLoading());
+    }
+    // 既没有状态也没有 thinkLoading，不渲染
+    return null;
+  }
+
+  // 如果是 slide 模式，使用 TraceSlide 组件（不需要检查 hasTrace）
+  if ((trace === null || trace === void 0 ? void 0 : trace.renderMode) === 'slide') {
+    // slide 模式下，如果状态是 SUCCESS 且没有 InspectionCard，不渲染组件
+    if (trace.status === TRACE_STATUS_ENUM.SUCCESS && !hasInspectionCard) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "llm-card-trace-v3-wrapper"
+    }, /*#__PURE__*/React.createElement(TraceSlide, {
+      status: trace.status,
+      traceName: trace.traceName,
+      statusText: trace.statusText,
+      content: trace.content,
+      dialogId: dialogId,
+      originData: originData,
+      traceExternalRenderType: traceExternalRenderType,
+      hasInspectionCard: hasInspectionCard
+    }));
+  }
+
+  // 默认模式：需要检查是否有 trace 数据
+  if (!hasTrace) {
+    return null;
+  }
+
+  // 默认模式：完整展示
+  return /*#__PURE__*/React.createElement("div", {
+    className: "llm-card-trace-v3-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "llm-card-trace-v3-container ".concat(trace.status === TRACE_STATUS_ENUM.SUCCESS && collapsed ? 'trace-success-width' : '')
+  }, /*#__PURE__*/React.createElement(TraceHeader, {
+    status: trace.status,
+    cost: trace.cost,
+    collapsed: collapsed,
+    onToggle: toggle
+  }), !collapsed && /*#__PURE__*/React.createElement("div", {
+    className: "trace-v3-content"
+  }, traceData.map(function (group, groupIndex) {
+    var _groupCollapseMap$gro;
+    var groupKey = "group-".concat(groupIndex);
+    var isGroupCollapsed = (_groupCollapseMap$gro = groupCollapseMap[groupKey]) !== null && _groupCollapseMap$gro !== void 0 ? _groupCollapseMap$gro : false;
+    return /*#__PURE__*/React.createElement(TraceGroup, {
+      key: groupKey,
+      showTitle: group.showTitle,
+      status: group.status,
+      result: group.result,
+      isLast: groupIndex === traceData.length - 1,
+      groupIndex: groupIndex,
+      groupKey: groupKey,
+      collapsed: isGroupCollapsed,
+      onToggle: toggleGroup,
+      dialogId: dialogId,
+      originData: originData,
+      traceExternalRenderType: traceExternalRenderType,
+      traceFinished: traceFinished,
+      itemCollapseMap: itemCollapseMap,
+      onToggleItem: toggleItem
+    });
+  }))), normalizedThinkLoading && renderThinkLoading());
+};
+
+// 导出类型
+
+export { TRACE_V3_TYPE_COMPONENT_ENUM } from "./types";
+export default /*#__PURE__*/React.memo(LlmTraceV3);