From 31003cd5f61d9a84ec59bc998d0a39c25bbf26de Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:24:43 +0800
Subject: [PATCH] Feat: Display the agent node running timeline #3221 (#8185)

### What problem does this PR solve?

Feat: Display the agent node running timeline #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/originui/timeline.tsx | 209 +++++++++++++++++++
 web/src/pages/agent/canvas/index.tsx     |  15 +-
 web/src/pages/agent/chat/chat-sheet.tsx  |  14 +-
 web/src/pages/agent/log-sheet/data.ts    | 243 +++++++++++++++++++++++
 web/src/pages/agent/log-sheet/index.tsx  | 116 +++++++----
 5 files changed, 546 insertions(+), 51 deletions(-)
 create mode 100644 web/src/components/originui/timeline.tsx
 create mode 100644 web/src/pages/agent/log-sheet/data.ts

diff --git a/web/src/components/originui/timeline.tsx b/web/src/components/originui/timeline.tsx
new file mode 100644
index 000000000..8b4bbea42
--- /dev/null
+++ b/web/src/components/originui/timeline.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+
+// Types
+type TimelineContextValue = {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+};
+
+// Context
+const TimelineContext = React.createContext<TimelineContextValue | undefined>(
+  undefined,
+);
+
+const useTimeline = () => {
+  const context = React.useContext(TimelineContext);
+  if (!context) {
+    throw new Error('useTimeline must be used within a Timeline');
+  }
+  return context;
+};
+
+// Components
+interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = 'vertical',
+  className,
+  ...props
+}: TimelineProps) {
+  const [activeStep, setInternalStep] = React.useState(defaultValue);
+
+  const setActiveStep = React.useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange],
+  );
+
+  const currentStep = value ?? activeStep;
+
+  return (
+    <TimelineContext.Provider
+      value={{ activeStep: currentStep, setActiveStep }}
+    >
+      <div
+        data-slot="timeline"
+        className={cn(
+          'group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    </TimelineContext.Provider>
+  );
+}
+
+// TimelineContent
+function TimelineContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+// TimelineDate
+interface TimelineDateProps extends React.HTMLAttributes<HTMLTimeElement> {
+  asChild?: boolean;
+}
+
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}: TimelineDateProps) {
+  const Comp = asChild ? Slot : 'time';
+
+  return (
+    <Comp
+      data-slot="timeline-date"
+      className={cn(
+        'text-muted-foreground mb-1 block text-xs font-medium group-data-[orientation=vertical]/timeline:max-sm:h-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// TimelineHeader
+function TimelineHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div data-slot="timeline-header" className={cn(className)} {...props} />
+  );
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: TimelineIndicatorProps) {
+  return (
+    <div
+      data-slot="timeline-indicator"
+      className={cn(
+        'border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2',
+        className,
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+  const { activeStep } = useTimeline();
+
+  return (
+    <div
+      data-slot="timeline-item"
+      className={cn(
+        'group/timeline-item has-[+[data-completed]]:[&_[data-slot=timeline-separator]]:bg-primary relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-12',
+        className,
+      )}
+      data-completed={step <= activeStep || undefined}
+      {...props}
+    />
+  );
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="timeline-separator"
+      className={cn(
+        'bg-primary/10 absolute self-start group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5',
+        className,
+      )}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+// TimelineTitle
+function TimelineTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      data-slot="timeline-title"
+      className={cn('text-sm font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+};
diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index f498d8638..27fb0eb6d 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -5,6 +5,7 @@ import {
   ReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import { useEffect } from 'react';
 import { ChatSheet } from '../chat/chat-sheet';
 import {
   AgentChatContext,
@@ -106,8 +107,12 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideDrawer,
   });
 
-  const { addEventList, setCurrentMessageId, currentEventListWithoutMessage } =
-    useCacheChatLog();
+  const {
+    addEventList,
+    setCurrentMessageId,
+    currentEventListWithoutMessage,
+    clearEventList,
+  } = useCacheChatLog();
 
   const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet({
     setCurrentMessageId,
@@ -119,6 +124,12 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
 
   const { addCanvasNode } = useAddNode(reactFlowInstance);
 
+  useEffect(() => {
+    if (!chatVisible) {
+      clearEventList();
+    }
+  }, [chatVisible, clearEventList]);
+
   return (
     <div className={styles.canvasWrapper}>
       <svg
diff --git a/web/src/pages/agent/chat/chat-sheet.tsx b/web/src/pages/agent/chat/chat-sheet.tsx
index ece538f08..1050c460f 100644
--- a/web/src/pages/agent/chat/chat-sheet.tsx
+++ b/web/src/pages/agent/chat/chat-sheet.tsx
@@ -10,16 +10,12 @@ import AgentChatBox from './box';
 
 export function ChatSheet({ hideModal }: IModalProps<any>) {
   return (
-    <Sheet
-      open
-      modal={false}
-      onOpenChange={(open) => {
-        console.log('🚀 ~ ChatSheet ~ open:', open);
-        hideModal();
-      }}
-    >
+    <Sheet open modal={false} onOpenChange={hideModal}>
       <SheetTitle className="hidden"></SheetTitle>
-      <SheetContent className={cn('top-20 p-0')}>
+      <SheetContent
+        className={cn('top-20 p-0')}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <SheetHeader>
           <SheetTitle>Are you absolutely sure?</SheetTitle>
         </SheetHeader>
diff --git a/web/src/pages/agent/log-sheet/data.ts b/web/src/pages/agent/log-sheet/data.ts
new file mode 100644
index 000000000..fc8d32323
--- /dev/null
+++ b/web/src/pages/agent/log-sheet/data.ts
@@ -0,0 +1,243 @@
+export const list = [
+  {
+    event: 'node_finished',
+    message_id: 'dce6c0c8466611f08e04047c16ec874f',
+    created_at: 1749606805,
+    task_id: 'db68eb0645ab11f0bbdc047c16ec874f',
+    data: {
+      inputs: {},
+      outputs: {
+        _elapsed_time: 0.000010083022061735392,
+      },
+      component_id: 'begin',
+      error: null,
+      elapsed_time: 0.000010083022061735392,
+      created_at: 1749606805,
+    },
+  },
+  {
+    event: 'node_finished',
+    message_id: 'dce6c0c8466611f08e04047c16ec874f',
+    created_at: 1749606805,
+    task_id: 'db68eb0645ab11f0bbdc047c16ec874f',
+    data: {
+      inputs: {
+        query: '算法',
+      },
+      outputs: {
+        formalized_content:
+          '\nDocument: Mallat算法频3333率混叠原因及其改进模型.pdf \nRelevant fragments as following:\n---\nID: Retrieval:ClearHornetsClap_0\nFig. 6 The improved decomposition model of Ma llat algorithm\n图6　改进的Mallat分解算法模型\ncaj\nG\n→cdj+1\n↑2\nT\ncdj+1\n---\nID: Retrieval:ClearHornetsClap_1\n2　Mallat算法Mallat算法是StéPhanMallat将计算机视觉领域内的多分辨分析思想引入到小波分析中,推导出的小波分析快速算法但在具体使用时,Mallat算法是利用与尺度函数和小波函数相对应的小波低通滤波器H, h和小波高通滤波器G, g对信号进行低通和高通滤波来具体实现的为了叙述方便,在此把尺度函数称为低频子带,小波函数称为次高频子带Mallat算法如下\n---\nID: Retrieval:ClearHornetsClap_2\n4　改进算法模型经过对Mallat算法的深入研究可知,Mallat算法实现过程会不可避免地产生频率混叠现象可是,为什么现在小波分析的Mallat算法还能得到广泛的应用呢?这就是Mallat算法的精妙之处由小波分解算法和重构算法可知,小波分解过程是隔点采样的过程,重构过程是隔点插零的过程,实际上这两个过程都产生频率混叠,但是它们产生混叠的方向正好相反也就是说分解过程产生的混叠又在重构过程中得到了纠正[13 ]限于篇幅隔点插零产生频率混叠现象本文不做详细的讨论不过,这也给如何解决Mallat分解算法产生频率混叠现象提供了一个思路:在利用Mallat算法对信号分解,得到各尺度上小波系数后,再按照重构的方法重构至所需的小波空间系数cdj ,利用该重构系数cdj代替相应尺度上得到的小波系数cdj 来分析该尺度上的信号,这样就能较好地解决频率混叠所带来的影响,以达到预期的目的本文称这种算法为子带信号重构算法经改进的算法模型如图6所示\n---\nID: Retrieval:ClearHornetsClap_3\n关键词:小波分析;Mallat算法;频率混叠中图分类号: TN911. 6　　　文献标识码: A　　文章编号: 10030972 (2007)04051104Reason andM eliorationModel of Generating Frequency A liasing of Ma llat A lgor ithmGUO Chaofeng, L IM e ilian(College of Computer Science &Technology, XuchangUniversity, Xuchang 461000, China)Abstract:Because of the design ofMallatA lgorithm, the phenomenon of frequency aliasing exists in the signal decomposition process. Based on research and analysis ofMallat algorithm, the reasons thatMallat algorithm generates frequency aliasing were found out, and an improved modle that can elim inate efficiently frequency aliasingwas given.\n---\nID: Retrieval:ClearHornetsClap_4\n·应用技术研究·Mallat算率混叠原因及其改进模型郭超峰,李梅莲(许昌学院计算机科学与技术学院,河南许昌461000)摘　要:Mallat算法由于自身设计的原因,在信号分解过程中,存在频率混叠现象在利用小波分析进行信号提取时,这种现象是一个不容忽视的问题. 通过分析Mallat算法,找出了造成Mallat算法产生频率混叠的原因,给出了一个能有效消除频率混叠的改进算法模型\n---\nID: Retrieval:ClearHornetsClap_5\nF ig. 4 Two 1-D miensiona l pagoda decomposition process ofMa llat a lgor ithm重构算法:2fsHz, J表示分解的深度A j [f (t)]=2{∑k h (t -2k)A j+1 [f (t)]+其中: j、J意义与式(2)相同, j =J -1, J -2, …, 0; h, g为小波重构; A j、D j 意义与式(2)相同Mallat二维塔式小波变换的重构过程如图5所示\n---\nID: Retrieval:ClearHornetsClap_6\n1　Mallat算法的频率混叠现象对最高频率为的带限信号进行离散化抽样,如果抽样周期比较大,或者说抽样频率比较小,那么抽样将会导致频率相邻的2个被延拓的频谱发生叠加而互相产生影响,这种现象称为混叠[78 ]下面是一个利用Mallat算法进行信号分解的例子[912 ]\n---\nID: Retrieval:ClearHornetsClap_7\n∑k g (t -2k)D j+1 [f (t)]}, \n',
+        _references: {
+          total: 30,
+          chunks: [
+            {
+              chunk_id: '64fe175ac75330dd',
+              content_ltks:
+                'fig 6 the improv decomposit model of ma llat algorithm 图 6 改进 的 mallat 分解 算法 模型 caj g cdj 12 t cdj 1',
+              content_with_weight:
+                'Fig. 6 The improved decomposition model of Ma llat algorithm\n图6　改进的Mallat分解算法模型\ncaj\nG\n→cdj+1\n↑2\nT\ncdj+1',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-64fe175ac75330dd',
+              similarity: 0.8437627020510018,
+              vector_similarity: 0.47920900683667284,
+              term_similarity: 1,
+              positions: [[3, 303, 500, 513, 545]],
+              doc_type_kwd: 'image',
+            },
+            {
+              chunk_id: 'dad90c5ea1b0945b',
+              content_ltks:
+                '2 mallat 算法 mallat 算法 是 st é phanmallat 将 计算机 视觉 领域 内 的 多 分辨 分析 思想 引入 到 小波 分析 中 推导 出 的 小波 分析 快速 算法 但 在 具体 使用 时 mallat 算法 是 利用 与 尺度 函数 和 小波 函数 相对 应 的 小波 低通滤波器 h h 和 小波 高通 滤波器 g g 对 信号 进行 低 通和 高 通滤波 来 具体 实现 的 为了 叙述 方便 在 此 把 尺度 函数 称为 低频 子 带 小 波函数 称为 次 高频 子 带 mallat 算法 如下',
+              content_with_weight:
+                '2　Mallat算法Mallat算法是StéPhanMallat将计算机视觉领域内的多分辨分析思想引入到小波分析中,推导出的小波分析快速算法但在具体使用时,Mallat算法是利用与尺度函数和小波函数相对应的小波低通滤波器H, h和小波高通滤波器G, g对信号进行低通和高通滤波来具体实现的为了叙述方便,在此把尺度函数称为低频子带,小波函数称为次高频子带Mallat算法如下',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-dad90c5ea1b0945b',
+              similarity: 0.8354827046851212,
+              vector_similarity: 0.4516090156170707,
+              term_similarity: 1,
+              positions: [[2, 38, 267, 673, 770]],
+              doc_type_kwd: '',
+            },
+            {
+              chunk_id: '28df4d0c894e3201',
+              content_ltks:
+                '4 改进 算法 模型 经过 对 mallat 算法 的 深入研究 可知 mallat 算法 实现 过程 会 不可避免 地 产生 频率 混 叠 现象 可是 为什么 现在 小波 分析 的 mallat 算法 还 能 得到 广泛 的 应用 呢 这 就是 mallat 算法 的 精妙 之处 由 小波 分解 算法 和 重构 算法 可知 小波 分解 过程 是 隔 点 采样 的 过程 重构 过程 是 隔 点 插 零 的 过程 实际上 这 两个 过程 都 产生 频率 混 叠 但是 它们 产生 混 叠 的 方向 正好 相反 也就是说 分解 过程 产生 的 混 叠 又 在 重构 过程 中 得到 了 纠正 13 限于 篇幅 隔 点 插 零 产生 频率 混 叠 现象 本文 不 做 详细 的 讨论 不过 这 也 给 如何 解决 mallat 分解 算法 产生 频率 混 叠 现象 提供 了 一个 思路 在 利用 mallat 算法 对 信号 分解 得到 各 尺度 上 小波 系数 后 再 按照 重构 的 方法 重构 至 所需 的 小波 空间 系数 cdj 利用 该 重构 系数 cdj 代替 相应 尺度 上 得到 的 小波 系数 cdj 来 分析 该 尺度 上 的 信号 这样 就 能 较 好地解决 频率 混 叠 所 带来 的 影响 以 达到 预期 的 目的 本文 称 这种 算法 为 子 带 信号 重构 算法 经 改进 的 算法 模型 如 图 6 所示',
+              content_with_weight:
+                '4　改进算法模型经过对Mallat算法的深入研究可知,Mallat算法实现过程会不可避免地产生频率混叠现象可是,为什么现在小波分析的Mallat算法还能得到广泛的应用呢?这就是Mallat算法的精妙之处由小波分解算法和重构算法可知,小波分解过程是隔点采样的过程,重构过程是隔点插零的过程,实际上这两个过程都产生频率混叠,但是它们产生混叠的方向正好相反也就是说分解过程产生的混叠又在重构过程中得到了纠正[13 ]限于篇幅隔点插零产生频率混叠现象本文不做详细的讨论不过,这也给如何解决Mallat分解算法产生频率混叠现象提供了一个思路:在利用Mallat算法对信号分解,得到各尺度上小波系数后,再按照重构的方法重构至所需的小波空间系数cdj ,利用该重构系数cdj代替相应尺度上得到的小波系数cdj 来分析该尺度上的信号,这样就能较好地解决频率混叠所带来的影响,以达到预期的目的本文称这种算法为子带信号重构算法经改进的算法模型如图6所示',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-28df4d0c894e3201',
+              similarity: 0.8322061155631969,
+              vector_similarity: 0.4406870518773232,
+              term_similarity: 1,
+              positions: [
+                [3, 285, 518, 257, 272],
+                [3, 282, 515, 280, 504],
+              ],
+              doc_type_kwd: '',
+            },
+            {
+              chunk_id: 'e79b07acbec9eb61',
+              content_ltks:
+                '关键词 小波 分析 mallat 算法 频率 混 叠 中图 分类号 tn911 6 文献 标识码 a 文章 编号 10030972 2007 04051104reason andm eliorationmodel of gener frequenc a lias of ma llat a lgor ithmguo chaofeng l im e ilian colleg of comput scienc technolog xuchangunivers xuchang 461000 china abstract becaus of the design ofmallata lgorithm the phenomenon of frequenc alias exist in the signal decomposit process base on research and analysi ofmallat algorithm the reason thatmallat algorithm gener frequenc alias were found out and an improv modl that can elim inat effici frequenc aliasingwa given',
+              content_with_weight:
+                '关键词:小波分析;Mallat算法;频率混叠中图分类号: TN911. 6　　　文献标识码: A　　文章编号: 10030972 (2007)04051104Reason andM eliorationModel of Generating Frequency A liasing of Ma llat A lgor ithmGUO Chaofeng, L IM e ilian(College of Computer Science &Technology, XuchangUniversity, Xuchang 461000, China)Abstract:Because of the design ofMallatA lgorithm, the phenomenon of frequency aliasing exists in the signal decomposition process. Based on research and analysis ofMallat algorithm, the reasons thatMallat algorithm generates frequency aliasing were found out, and an improved modle that can elim inate efficiently frequency aliasingwas given.',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-e79b07acbec9eb61',
+              similarity: 0.8294912664806687,
+              vector_similarity: 0.43163755493556244,
+              term_similarity: 1,
+              positions: [
+                [1, 81, 528, 240, 251],
+                [1, 81, 528, 255, 266],
+                [1, 54, 501, 287, 302],
+                [1, 211, 657, 305, 317],
+                [1, 113, 560, 319, 331],
+                [1, 65, 512, 334, 395],
+              ],
+              doc_type_kwd: '',
+            },
+            {
+              chunk_id: '138908de860b111c',
+              content_ltks:
+                '应用 技术 研究 mallat 算 率 混 叠 原因 及其 改进 模型 郭 超 峰 李 梅 莲 许昌 学院 计算机科学 与 技术 学院 河南 许昌 461000 摘 要 mallat 算法 由于 自身 设计 的 原因 在 信号 分解 过程 中 存在 频率 混 叠 现象 在 利用 小波 分析 进行 信号 提取 时 这种 现象 是 一个 不容忽视 的 问题 通过 分析 mallat 算法 找出 了 造成 mallat 算法 产生 频率 混 叠 的 原因 给出 了 一个 能 有效 消除 频率 混 叠 的 改进 算法 模型',
+              content_with_weight:
+                '·应用技术研究·Mallat算率混叠原因及其改进模型郭超峰,李梅莲(许昌学院计算机科学与技术学院,河南许昌461000)摘　要:Mallat算法由于自身设计的原因,在信号分解过程中,存在频率混叠现象在利用小波分析进行信号提取时,这种现象是一个不容忽视的问题. 通过分析Mallat算法,找出了造成Mallat算法产生频率混叠的原因,给出了一个能有效消除频率混叠的改进算法模型',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-138908de860b111c',
+              similarity: 0.827624678600734,
+              vector_similarity: 0.4254155953357798,
+              term_similarity: 1,
+              positions: [
+                [1, 47, 471, 80, 92],
+                [1, 75, 500, 112, 138],
+                [1, 224, 649, 154, 168],
+                [1, 172, 596, 179, 190],
+                [1, 63, 487, 196, 237],
+              ],
+              doc_type_kwd: '',
+            },
+            {
+              chunk_id: '77951868ce3d1994',
+              content_ltks:
+                'f ig 4 two 1 d miensiona l pagoda decomposit process ofma llat a lgor ithm 重构 算法 2fshz j 表示 分解 的 深度 a j f t2 k h t 2k a j 1 f t 其中 j j 意义 与 式 2 相同 j j 1 j 20 h g 为 小波 重构 a j d j 意义 与 式 2 相同 mallat 二维 塔式 小波 变换 的 重构 过程 如 图 5 所示',
+              content_with_weight:
+                'F ig. 4 Two 1-D miensiona l pagoda decomposition process ofMa llat a lgor ithm重构算法:2fsHz, J表示分解的深度A j [f (t)]=2{∑k h (t -2k)A j+1 [f (t)]+其中: j、J意义与式(2)相同, j =J -1, J -2, …, 0; h, g为小波重构; A j、D j 意义与式(2)相同Mallat二维塔式小波变换的重构过程如图5所示',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-77951868ce3d1994',
+              similarity: 0.8263513588843328,
+              vector_similarity: 0.42117119628110916,
+              term_similarity: 1,
+              positions: [
+                [2, 284, 514, 754, 765],
+                [3, 285, 515, 79, 91],
+                [3, 57, 287, 95, 107],
+                [3, 38, 268, 126, 167],
+              ],
+              doc_type_kwd: '',
+            },
+            {
+              chunk_id: 'b8076c8ba1598567',
+              content_ltks:
+                '1 mallat 算法 的 频率 混 叠 现象 对 最高 频率 为 的 带 限 信号 进行 离散 化 抽样 如果 抽样 周期 比较 大 或者说 抽样 频率 比较 小 那么 抽样 将 会 导致 频率 相邻 的 2 个 被 延拓 的 频谱 发生 叠加 而 互相 产生 影响 这种 现象 称为 混 叠 78 下面 是 一个 利用 mallat 算法 进行 信号 分解 的 例子 912',
+              content_with_weight:
+                '1　Mallat算法的频率混叠现象对最高频率为的带限信号进行离散化抽样,如果抽样周期比较大,或者说抽样频率比较小,那么抽样将会导致频率相邻的2个被延拓的频谱发生叠加而互相产生影响,这种现象称为混叠[78 ]下面是一个利用Mallat算法进行信号分解的例子[912 ]',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-b8076c8ba1598567',
+              similarity: 0.8260278445075276,
+              vector_similarity: 0.4200928150250923,
+              term_similarity: 1,
+              positions: [
+                [1, 287, 516, 430, 441],
+                [1, 284, 513, 448, 520],
+              ],
+              doc_type_kwd: '',
+            },
+            {
+              chunk_id: '537d27bca0af2c0e',
+              content_ltks: 'k g t 2k d j 1 f t',
+              content_with_weight: '∑k g (t -2k)D j+1 [f (t)]}, ',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              docnm_kwd: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              kb_id: 'fd05dba641bf11f0a713047c16ec874f',
+              important_kwd: [],
+              image_id: 'fd05dba641bf11f0a713047c16ec874f-537d27bca0af2c0e',
+              similarity: 0.8255620344768997,
+              vector_similarity: 0.4185401149229989,
+              term_similarity: 1,
+              positions: [[3, 93, 187, 112, 124]],
+              doc_type_kwd: 'image',
+            },
+          ],
+          doc_aggs: [
+            {
+              doc_name: 'Mallat算法频3333率混叠原因及其改进模型.pdf',
+              doc_id: 'bf60855c41d911f09504047c16ec874f',
+              count: 8,
+            },
+          ],
+        },
+      },
+      component_id: 'Retrieval:ClearHornetsClap',
+      error: null,
+      elapsed_time: null,
+      created_at: 1749606806,
+    },
+  },
+  {
+    event: 'node_finished',
+    message_id: 'dce6c0c8466611f08e04047c16ec874f',
+    created_at: 1749606805,
+    task_id: 'db68eb0645ab11f0bbdc047c16ec874f',
+    data: {
+      inputs: {},
+      outputs: {
+        content: null,
+        structured_output: null,
+        _elapsed_time: 0.009871692978776991,
+      },
+      component_id: 'Agent:EvilBobcatsWish',
+      error: null,
+      elapsed_time: 0.009871692978776991,
+      created_at: 1749606806,
+    },
+  },
+  {
+    event: 'node_finished',
+    message_id: 'dce6c0c8466611f08e04047c16ec874f',
+    created_at: 1749606805,
+    task_id: 'db68eb0645ab11f0bbdc047c16ec874f',
+    data: {
+      inputs: {},
+      outputs: {
+        content:
+          '您好，根据您提供的知识库内容，以下是关于Mallat算法的一些信息：\n\n1. **Mallat算法的定义**：\n   Mallat算法是由Stéphane Mallat将计算机视觉领域的多分辨率分析思想引入到小波分析中推导出的小波分析快速算法。该算法利用与尺度函数和小波函数相对应的小波低通滤波器（记为H, h）和小波高通滤波器（记为G, g）对信号进行低通和高通滤波来实现。\n\n2. **频率混叠现象**：\n   在具体使用时，Mallat算法实现过程中不可避免地会产生频率混叠现象。这种现象是由于小波分解过程是隔点采样的过程，而重构过程是隔点插零的过程，这两个过程都可能产生频率混叠。\n\n3. **改进模型**：\n   通过对Mallat算法的深入研究，找到了造成频率混叠的原因，并提出了一个能有效消除频率混叠的改进模型。这种改进的模型被称为子带信号重构算法。具体来说，在利用Mallat算法对信号分解得到各尺度上的小波系数后，再按照重构的方法重构至所需的小波空间系数cdj，并用该重构系数代替相应尺度上得到的小波系数来分析该尺度上的信号，以较好地解决频率混叠所带来的影响。\n\n4. **应用技术研究**：\n   Mallat算法由于自身设计的原因，在信号分解过程中存在频率混叠现象。通过分析Mallat算法找出了造成这种现象的原因，并给出了一个能有效消除这种现象的改进模型。\n\n这些信息提供了对Mallat算法及其相关问题和解决方案的基本理解。如果您有更具体的问题或需要进一步的信息，请随时告知！',
+        _elapsed_time: 0.0001981810200959444,
+      },
+      component_id: 'Message:PurpleWordsBuy',
+      error: null,
+      elapsed_time: 0.0001981810200959444,
+      created_at: 1749606814,
+    },
+  },
+];
diff --git a/web/src/pages/agent/log-sheet/index.tsx b/web/src/pages/agent/log-sheet/index.tsx
index 8a17d7699..9eafa2302 100644
--- a/web/src/pages/agent/log-sheet/index.tsx
+++ b/web/src/pages/agent/log-sheet/index.tsx
@@ -1,3 +1,11 @@
+import {
+  Timeline,
+  TimelineContent,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+} from '@/components/originui/timeline';
 import {
   Accordion,
   AccordionContent,
@@ -13,7 +21,7 @@ import {
 import { INodeEvent, MessageEventType } from '@/hooks/use-send-message';
 import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
-import { NotebookText } from 'lucide-react';
+import { BellElectric, NotebookText } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 import JsonView from 'react18-json-view';
 import 'react18-json-view/src/style.css';
@@ -61,55 +69,83 @@ export function LogSheet({
       (x) => x.event === MessageEventType.NodeFinished,
     ) as INodeEvent[];
   }, [currentEventListWithoutMessage]);
+  console.log('🚀 ~ finishedNodeList ~ finishedNodeList:', finishedNodeList);
 
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
-      <SheetContent className="top-20 right-96">
+      <SheetContent className="top-20 right-[440px]">
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />
             Log
           </SheetTitle>
         </SheetHeader>
-        <section className="max-h-[82vh] overflow-auto">
-          {finishedNodeList.map((x, idx) => (
-            <section key={idx}>
-              <Accordion type="single" collapsible>
-                <AccordionItem value={idx.toString()}>
-                  <AccordionTrigger>
-                    <div className="flex gap-2 items-center">
-                      <span>{getNodeName(x.data?.component_id)}</span>
-                      <span className="text-text-sub-title text-xs">
-                        {x.data.elapsed_time?.toString().slice(0, 6)}
-                      </span>
-                      <span
-                        className={cn(
-                          'border-background  -end-1 -top-1 size-2 rounded-full border-2 bg-dot-green',
-                          { 'text-dot-green': x.data.error === null },
-                          { 'text-dot-red': x.data.error !== null },
-                        )}
-                      >
-                        <span className="sr-only">Online</span>
-                      </span>
-                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <div className="space-y-2">
-                      <JsonViewer
-                        data={x.data.inputs}
-                        title="Input"
-                      ></JsonViewer>
+        <section className="max-h-[82vh] overflow-auto mt-6">
+          <Timeline>
+            {finishedNodeList.map((x, idx) => (
+              <TimelineItem
+                key={idx}
+                step={idx}
+                className="group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8"
+              >
+                <TimelineHeader>
+                  <TimelineSeparator className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-background-checked" />
 
-                      <JsonViewer
-                        data={x.data.outputs}
-                        title="Output"
-                      ></JsonViewer>
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </section>
-          ))}
+                  <TimelineIndicator className="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
+                    <BellElectric className="size-5" />
+                    {/* <img
+                      src={item.image}
+                      alt={item.title}
+                      className="size-6 rounded-full"
+                    /> */}
+                  </TimelineIndicator>
+                </TimelineHeader>
+                <TimelineContent className="text-foreground  rounded-lg border  mb-5">
+                  <section key={idx}>
+                    <Accordion
+                      type="single"
+                      collapsible
+                      className="bg-background-card px-3"
+                    >
+                      <AccordionItem value={idx.toString()}>
+                        <AccordionTrigger>
+                          <div className="flex gap-2 items-center">
+                            <span>{getNodeName(x.data?.component_id)}</span>
+                            <span className="text-text-sub-title text-xs">
+                              {x.data.elapsed_time?.toString().slice(0, 6)}
+                            </span>
+                            <span
+                              className={cn(
+                                'border-background  -end-1 -top-1 size-2 rounded-full border-2 bg-dot-green',
+                                { 'text-dot-green': x.data.error === null },
+                                { 'text-dot-red': x.data.error !== null },
+                              )}
+                            >
+                              <span className="sr-only">Online</span>
+                            </span>
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          <div className="space-y-2">
+                            <JsonViewer
+                              data={x.data.inputs}
+                              title="Input"
+                            ></JsonViewer>
+
+                            <JsonViewer
+                              data={x.data.outputs}
+                              title="Output"
+                            ></JsonViewer>
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
+                    </Accordion>
+                  </section>
+                  {/* <TimelineDate className="mt-1 mb-0">{item.date}</TimelineDate> */}
+                </TimelineContent>
+              </TimelineItem>
+            ))}
+          </Timeline>
         </section>
       </SheetContent>
     </Sheet>