paul-ai-assistant 0.1.16

package/es/components/LlmTraceV3/index.scss

@@ -0,0 +1,333 @@
+/**
+ * LlmTraceV3 基础样式
+ * 基于设计稿精确实现
+ */
+
+// ==================== 样式变量 ====================
+
+// 背景色
+$trace-bg-color: #fff;
+$trace-step-bg-color: #fff;
+
+// 文字颜色
+$trace-title-color: #171a1d;
+$trace-subtitle-color: #717579;
+$trace-content-color: #474a52;
+
+// 状态颜色
+$trace-running-color: #0070d2;
+$trace-success-color: #18ad43;
+$trace-failed-color: #d44333;
+$trace-stop-color: #7f8286;
+
+// 边框颜色
+$trace-border-color: #dcdee0;
+$trace-code-border-color: #e0e0e0;
+
+// 圆角
+$trace-border-radius: 4px;
+$trace-small-radius: 2px;
+
+// 间距
+$trace-padding: 12px;
+$trace-margin-bottom: 8px;
+$trace-gap: 4px;
+$trace-group-margin-left: 8px;
+$trace-group-padding-left: 12px;
+
+// 字体大小
+// 默认设置为 14px，如果后续需要改为 12px，请直接修改此处的值即可
+$trace-font-size: 12px;
+
+// 动画时长
+$trace-collapse-duration: 0.2s;
+$trace-collapse-timing: ease-in-out;
+$trace-spin-duration: 1s;
+
+// ==================== Wrapper 容器 ====================
+
+.llm-card-trace-v3-wrapper {
+  position: relative;
+
+  // 思考中 Loading
+  .llm-card-trace-v3-loading {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    padding: 0;
+    margin: 8px 0;
+
+    .think-loading-gif {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+// ==================== 主容器 ====================
+
+.llm-card-trace-v3-container {
+  flex: 1;
+  min-width: 0; // 防止 flex 子元素溢出
+  background-color: #fff;
+  border: 1px solid #d4d6db;
+  border-radius: 8px;
+  padding: $trace-padding;
+  margin-bottom: $trace-margin-bottom;
+  font-size: $trace-font-size;
+  line-height: 20px;
+  transition: max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  // SUCCESS 状态下的宽度限制
+  &.trace-success-width {
+    flex: 0 0 200px;
+    max-width: 200px;
+  }
+
+  // ==================== Trace Header ====================
+
+  .trace-v3-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    .trace-v3-header-left {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 1;
+
+      .trace-v3-status-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+
+        &.iconfont-spin {
+          animation: spin $trace-spin-duration linear infinite;
+        }
+      }
+
+      .trace-v3-title-text {
+        font-size: 14px;
+        font-weight: 500;
+        color: $trace-title-color;
+      }
+
+      .trace-v3-cost {
+        font-size: $trace-font-size;
+        color: $trace-subtitle-color;
+        margin-left: 4px;
+      }
+    }
+
+    .trace-v3-header-right {
+      display: flex;
+      align-items: center;
+
+      .trace-v3-collapse-icon {
+        transition: transform $trace-collapse-duration $trace-collapse-timing;
+        width: 14px;
+        height: 14px;
+        color: $trace-subtitle-color;
+      }
+
+      .trace-collapse-icon-transform {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // ==================== Trace Content ====================
+
+  .trace-v3-content {
+    margin-top: $trace-margin-bottom;
+    transition: all $trace-collapse-duration $trace-collapse-timing;
+    font-size: 12px;
+
+    &.collapsing {
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+    }
+
+    &.expanding {
+      opacity: 1;
+    }
+  }
+
+  // ==================== Trace Group ====================
+
+  .trace-v3-group {
+    margin-bottom: $trace-gap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .trace-v3-group-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 6px;
+      padding: 6px 8px;
+      background-color: $trace-step-bg-color;
+      border-radius: $trace-small-radius;
+      font-size: $trace-font-size;
+      font-weight: 400;
+      color: $trace-title-color;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        opacity: 0.85;
+      }
+
+      .trace-v3-group-title-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex: 1;
+        color: #474a52;
+
+        .trace-v3-group-status-icon {
+          width: 14px;
+          height: 14px;
+          color: #474a52;
+
+          &.iconfont-spin {
+            animation: spin $trace-spin-duration linear infinite;
+          }
+        }
+      }
+
+      .trace-v3-group-collapse-icon {
+        transition: transform $trace-collapse-duration $trace-collapse-timing;
+        width: 14px;
+        height: 14px;
+        color: $trace-subtitle-color;
+      }
+
+      .trace-group-collapse-icon-transform {
+        transform: rotate(180deg);
+      }
+    }
+
+    .trace-v3-group-content {
+      margin-left: 4px;
+    }
+  }
+
+  // ==================== Trace Item ====================
+
+  .trace-v3-item {
+    margin-bottom: $trace-gap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .trace-v3-item-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $trace-gap;
+      font-size: $trace-font-size;
+      color: $trace-subtitle-color;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 2%);
+        border-radius: $trace-small-radius;
+      }
+
+      .trace-v3-item-title-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex: 1;
+
+        .trace-v3-item-status-icon {
+          width: 12px;
+          height: 12px;
+
+          &.iconfont-spin {
+            animation: spin $trace-spin-duration linear infinite;
+          }
+        }
+      }
+
+      .trace-v3-item-collapse-icon {
+        transition: transform $trace-collapse-duration $trace-collapse-timing;
+        width: 12px;
+        height: 12px;
+        color: $trace-subtitle-color;
+      }
+
+      .trace-item-collapse-icon-transform {
+        transform: rotate(180deg);
+      }
+    }
+
+    .trace-v3-item-content {
+      padding: 0 4px;
+      font-size: $trace-font-size;
+      color: $trace-content-color;
+      line-height: 20px;
+
+      // 有序列表样式
+      ol {
+        padding-left: 0;
+        margin: $trace-gap 0;
+
+        li {
+          margin-bottom: $trace-gap;
+          line-height: 20px;
+        }
+      }
+
+      // 无序列表样式
+      ul {
+        padding-left: 20px;
+        margin: $trace-gap 0;
+
+        li {
+          margin-bottom: $trace-gap;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+
+// ==================== 动画定义 ====================
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// ==================== 响应式处理 ====================
+
+@media (width <= 768px) {
+  .llm-card-trace-v3-container {
+    padding: 8px;
+
+    .trace-v3-group-content {
+      margin-left: 4px;
+    }
+  }
+}

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

@@ -0,0 +1,263 @@
+/**
+ * LlmTraceV3 类型定义
+ * 基于 TraceV2 扩展，增加更多组件类型支持
+ */
+/// <reference types="react" />
+import type { TRACE_STATUS_ENUM } from '../../constants/traceDataStatus';
+/**
+ * TraceV3 新增的组件类型枚举
+ * 扩展自 TraceV2 的组件类型
+ */
+export declare enum TRACE_V3_TYPE_COMPONENT_ENUM {
+    rewrite = "rewrite",// 问题改写
+    questionDisassemble = "questionDisassemble",// 问题拆解
+    markdown = "markdown",// Markdown 内容
+    readResource = "readResource",// 资源读取
+    traceMarkdownWithCard = "TraceMarkdownWithCard",// 带卡片的 Markdown
+    traceWithAgent = "TraceWithAgent",// 带 Agent 的 Trace
+    inspectionCard = "InspectionCard",// 巡检报告卡片
+    deepThinking = "deepThinking",// 深度思考内容
+    taskPlanning = "taskPlanning",// 任务规划列表
+    taskExecution = "taskExecution",// 任务执行步骤
+    mcpCall = "mcpCall",// MCP 调用
+    toolCall = "toolCall",// 工具调用（带代码块）
+    toolResult = "toolResult",// 工具调用结果
+    searchResults = "searchResults",// 搜索结果列表
+    businessFlow = "businessFlow",// 业务流展示
+    infoMissing = "infoMissing",// 信息缺失提示
+    codeBlock = "codeBlock",// 代码块展示
+    orderedList = "orderedList",// 有序列表
+    linkList = "linkList"
+}
+/**
+ * 深度思考组件数据结构
+ */
+export interface IDeepThinkingResult {
+    content: string;
+    conclusion?: string;
+    references?: string[];
+}
+/**
+ * 任务规划组件数据结构
+ */
+export interface ITaskPlanningResult {
+    tasks: Array<{
+        id: string;
+        description: string;
+        order: number;
+        status?: 'pending' | 'in_progress' | 'completed';
+    }>;
+}
+/**
+ * 搜索结果组件数据结构
+ */
+export interface ISearchResultsResult {
+    title?: string;
+    query: string;
+    results: Array<{
+        id: string;
+        title: string;
+        url?: string;
+        snippet?: string;
+        source?: 'web' | 'kb';
+        logo?: string;
+    }>;
+    collapsed?: boolean;
+}
+/**
+ * 工具调用组件数据结构
+ */
+export interface IToolCallResult {
+    toolName: string;
+    code?: string;
+    params?: Record<string, any>;
+    collapsed?: boolean;
+}
+/**
+ * 工具结果组件数据结构
+ */
+export interface IToolResultResult {
+    toolName: string;
+    result: any;
+    resultType?: 'json' | 'text' | 'html';
+    collapsed?: boolean;
+}
+/**
+ * 业务流组件数据结构
+ */
+export interface IBusinessFlowResult {
+    flowId: string;
+    flowName: string;
+    icon?: string;
+    url?: string;
+    description?: string;
+}
+/**
+ * 信息缺失组件数据结构
+ */
+export interface IInfoMissingResult {
+    message: string;
+    fields?: Array<{
+        name: string;
+        description: string;
+    }>;
+}
+/**
+ * 代码块组件数据结构
+ */
+export interface ICodeBlockResult {
+    code: string;
+    language?: string;
+    collapsed?: boolean;
+    collapsible?: boolean;
+    showLineNumbers?: boolean;
+    maxHeight?: number;
+}
+/**
+ * 链接列表组件数据结构
+ */
+export interface ILinkListResult {
+    links: Array<{
+        id: string;
+        title: string;
+        url: string;
+        description?: string;
+    }>;
+    ordered?: boolean;
+    openInNewTab?: boolean;
+}
+/**
+ * 思考过程 第三层，具体组件
+ */
+export interface ITraceThirdItem {
+    /** 展示标题 存在则展示 */
+    showTitle?: string;
+    /** 组件类型 */
+    type?: TRACE_V3_TYPE_COMPONENT_ENUM | string;
+    /** 组件入参 */
+    result?: any;
+    /** 没有对应组件时，展示默认内容 */
+    defaultContent?: string;
+    /** 内层执行状态 */
+    status?: TRACE_STATUS_ENUM;
+    [key: string]: any;
+}
+/**
+ * 思考过程 第二层，单节点 有透出状态
+ */
+export interface ITraceSecondItem {
+    /** 展示标题 存在则展示 */
+    showTitle?: string;
+    /** 节点执行状态 */
+    status?: TRACE_STATUS_ENUM;
+    /** 节点执行内容，组件展示 */
+    result?: ITraceThirdItem[] | ITraceThirdItem;
+    [key: string]: any;
+}
+/**
+ * Trace 渲染模式
+ */
+export type TraceRenderMode = 'default' | 'slide';
+/**
+ * Slide 模式下的内容项类型
+ * 支持纯文本字符串（markdown）或复杂的组件对象
+ */
+export type TraceSlideContentItem = string | ITraceThirdItem;
+/**
+ * 思考过程 最外层，折叠层
+ */
+export interface ITrace {
+    /** 思考数据 */
+    data?: ITraceSecondItem[];
+    /** 思考状态 */
+    status?: TRACE_STATUS_ENUM;
+    /** 思考名称 */
+    traceName?: string;
+    /** 思考耗时 ms */
+    cost?: string | number;
+    /** 思考是否默认折叠 */
+    collapse?: boolean;
+    /** 渲染模式：default-默认模式（完整展示），slide-简化模式（横向展示） */
+    renderMode?: TraceRenderMode;
+    /** slide 模式下的状态文本 */
+    statusText?: string;
+    /** slide 模式下的内容数组（支持 markdown 字符串或复杂组件对象） */
+    content?: TraceSlideContentItem[];
+}
+/**
+ * LlmTraceV3 主组件 Props
+ */
+export interface ILlmTraceV3Props {
+    /** Trace 数据 */
+    trace?: ITrace;
+    /** 工单ID */
+    ticketId?: string;
+    /** 对话ID */
+    dialogId?: string;
+    /** 原始数据 */
+    originData?: any;
+    /** 外部组件注入 */
+    traceExternalRenderType?: {
+        [key: string]: React.ComponentType<any>;
+    };
+    /** 思考中加载状态（兼容后端返回字符串 'false'） */
+    thinkLoading?: boolean | 'false';
+}
+/**
+ * TraceHeader 组件 Props
+ */
+export interface ITraceHeaderProps {
+    status: TRACE_STATUS_ENUM;
+    cost?: string | number;
+    traceName?: string;
+    collapsed: boolean;
+    onToggle: () => void;
+}
+/**
+ * TraceGroup 组件 Props
+ */
+export interface ITraceGroupProps {
+    showTitle?: string;
+    status?: TRACE_STATUS_ENUM;
+    result?: ITraceThirdItem[] | ITraceThirdItem;
+    isLast: boolean;
+    groupIndex: number;
+    groupKey: string;
+    collapsed: boolean;
+    onToggle: (key: string) => void;
+    dialogId?: string;
+    originData?: any;
+    traceExternalRenderType?: {
+        [key: string]: React.ComponentType<any>;
+    };
+    traceFinished: boolean;
+    itemCollapseMap: Record<string, boolean>;
+    onToggleItem: (key: string) => void;
+}
+/**
+ * TraceItem 组件 Props
+ */
+export interface ITraceItemProps {
+    showTitle?: string;
+    type?: string;
+    result?: any;
+    status?: TRACE_STATUS_ENUM;
+    itemKey: string;
+    collapsed: boolean;
+    onToggle: (key: string) => void;
+    dialogId?: string;
+    originData?: any;
+    traceExternalRenderType?: {
+        [key: string]: React.ComponentType<any>;
+    };
+    traceFinished?: boolean;
+}
+/**
+ * TraceStatusIcon 组件 Props
+ */
+export interface ITraceStatusIconProps {
+    status: TRACE_STATUS_ENUM;
+    size?: 'small' | 'medium' | 'large';
+    showAnimation?: boolean;
+    traceFinished?: boolean;
+}

package/es/components/LlmTraceV3/types.js

@@ -0,0 +1,108 @@
+/**
+ * LlmTraceV3 类型定义
+ * 基于 TraceV2 扩展，增加更多组件类型支持
+ */
+
+/**
+ * TraceV3 新增的组件类型枚举
+ * 扩展自 TraceV2 的组件类型
+ */
+export var TRACE_V3_TYPE_COMPONENT_ENUM = /*#__PURE__*/function (TRACE_V3_TYPE_COMPONENT_ENUM) {
+  TRACE_V3_TYPE_COMPONENT_ENUM["rewrite"] = "rewrite";
+  TRACE_V3_TYPE_COMPONENT_ENUM["questionDisassemble"] = "questionDisassemble";
+  TRACE_V3_TYPE_COMPONENT_ENUM["markdown"] = "markdown";
+  TRACE_V3_TYPE_COMPONENT_ENUM["readResource"] = "readResource";
+  TRACE_V3_TYPE_COMPONENT_ENUM["traceMarkdownWithCard"] = "TraceMarkdownWithCard";
+  TRACE_V3_TYPE_COMPONENT_ENUM["traceWithAgent"] = "TraceWithAgent";
+  TRACE_V3_TYPE_COMPONENT_ENUM["inspectionCard"] = "InspectionCard";
+  TRACE_V3_TYPE_COMPONENT_ENUM["deepThinking"] = "deepThinking";
+  TRACE_V3_TYPE_COMPONENT_ENUM["taskPlanning"] = "taskPlanning";
+  TRACE_V3_TYPE_COMPONENT_ENUM["taskExecution"] = "taskExecution";
+  TRACE_V3_TYPE_COMPONENT_ENUM["mcpCall"] = "mcpCall";
+  TRACE_V3_TYPE_COMPONENT_ENUM["toolCall"] = "toolCall";
+  TRACE_V3_TYPE_COMPONENT_ENUM["toolResult"] = "toolResult";
+  TRACE_V3_TYPE_COMPONENT_ENUM["searchResults"] = "searchResults";
+  TRACE_V3_TYPE_COMPONENT_ENUM["businessFlow"] = "businessFlow";
+  TRACE_V3_TYPE_COMPONENT_ENUM["infoMissing"] = "infoMissing";
+  TRACE_V3_TYPE_COMPONENT_ENUM["codeBlock"] = "codeBlock";
+  TRACE_V3_TYPE_COMPONENT_ENUM["orderedList"] = "orderedList";
+  TRACE_V3_TYPE_COMPONENT_ENUM["linkList"] = "linkList";
+  return TRACE_V3_TYPE_COMPONENT_ENUM;
+}({}); // 链接列表（可点击）
+
+/**
+ * 深度思考组件数据结构
+ */
+
+/**
+ * 任务规划组件数据结构
+ */
+
+/**
+ * 搜索结果组件数据结构
+ */
+
+/**
+ * 工具调用组件数据结构
+ */
+
+/**
+ * 工具结果组件数据结构
+ */
+
+/**
+ * 业务流组件数据结构
+ */
+
+/**
+ * 信息缺失组件数据结构
+ */
+
+/**
+ * 代码块组件数据结构
+ */
+
+/**
+ * 链接列表组件数据结构
+ */
+
+/**
+ * 思考过程 第三层，具体组件
+ */
+
+/**
+ * 思考过程 第二层，单节点 有透出状态
+ */
+
+/**
+ * Trace 渲染模式
+ */
+
+/**
+ * Slide 模式下的内容项类型
+ * 支持纯文本字符串（markdown）或复杂的组件对象
+ */
+
+/**
+ * 思考过程 最外层，折叠层
+ */
+
+/**
+ * LlmTraceV3 主组件 Props
+ */
+
+/**
+ * TraceHeader 组件 Props
+ */
+
+/**
+ * TraceGroup 组件 Props
+ */
+
+/**
+ * TraceItem 组件 Props
+ */
+
+/**
+ * TraceStatusIcon 组件 Props
+ */