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/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