Feat: Display agent operator call log #3221 (#8169)

### What problem does this PR solve?

Feat: Display agent operator call log #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/index.tsx

@@ -6,7 +6,11 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { ChatSheet } from '../chat/chat-sheet';
-import { AgentInstanceContext } from '../context';
+import {
+  AgentChatContext,
+  AgentChatLogContext,
+  AgentInstanceContext,
+} from '../context';
 import FormSheet from '../form-sheet/next';
 import {
   useHandleDrop,
@@ -16,6 +20,7 @@ import {
 } from '../hooks';
 import { useAddNode } from '../hooks/use-add-node';
 import { useBeforeDelete } from '../hooks/use-before-delete';
+import { useCacheChatLog } from '../hooks/use-cache-chat-log';
 import { useShowDrawer, useShowLogSheet } from '../hooks/use-show-drawer';
 import { LogSheet } from '../log-sheet';
 import RunSheet from '../run-sheet';
@@ -101,7 +106,12 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
     hideDrawer,
   });
 
-  const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet();
+  const { addEventList, setCurrentMessageId, currentEventListWithoutMessage } =
+    useCacheChatLog();
+
+  const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet({
+    setCurrentMessageId,
+  });
 
   const { handleBeforeDelete } = useBeforeDelete();
 
@@ -176,10 +186,13 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
         </AgentInstanceContext.Provider>
       )}
       {chatVisible && (
-        <ChatSheet
-          visible={chatVisible}
-          hideModal={hideRunOrChatDrawer}
-        ></ChatSheet>
+        <AgentChatContext.Provider value={{ showLogSheet }}>
+          <AgentChatLogContext.Provider
+            value={{ addEventList, setCurrentMessageId }}
+          >
+            <ChatSheet hideModal={hideRunOrChatDrawer}></ChatSheet>
+          </AgentChatLogContext.Provider>
+        </AgentChatContext.Provider>
       )}
       {runVisible && (
         <RunSheet
@@ -188,7 +201,10 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
         ></RunSheet>
       )}
       {logSheetVisible && (
-        <LogSheet hideModal={hideLogSheet} showModal={showLogSheet}></LogSheet>
+        <LogSheet
+          hideModal={hideLogSheet}
+          currentEventListWithoutMessage={currentEventListWithoutMessage}
+        ></LogSheet>
       )}
     </div>
   );