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/chat/box.tsx

@@ -1,4 +1,3 @@
-import MessageItem from '@/components/message-item';
 import { MessageType } from '@/constants/chat';
 import { useGetFileIcon } from '@/pages/chat/hooks';
 import { buildMessageItemReference } from '@/pages/chat/utils';
@@ -7,6 +6,7 @@ import { Spin } from 'antd';
 import { useSendNextMessage } from './hooks';
 
 import MessageInput from '@/components/message-input';
+import MessageItem from '@/components/next-message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { useFetchAgent } from '@/hooks/use-agent-request';

web/src/pages/agent/chat/chat-sheet.tsx

@@ -8,9 +8,16 @@ import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import AgentChatBox from './box';
 
-export function ChatSheet({ visible, hideModal }: IModalProps<any>) {
+export function ChatSheet({ hideModal }: IModalProps<any>) {
   return (
-    <Sheet open={visible} modal={false} onOpenChange={hideModal}>
+    <Sheet
+      open
+      modal={false}
+      onOpenChange={(open) => {
+        console.log('🚀 ~ ChatSheet ~ open:', open);
+        hideModal();
+      }}
+    >
       <SheetTitle className="hidden"></SheetTitle>
       <SheetContent className={cn('top-20 p-0')}>
         <SheetHeader>

web/src/pages/agent/chat/hooks.ts

@@ -16,10 +16,11 @@ import api from '@/utils/api';
 import { message } from 'antd';
 import { get } from 'lodash';
 import trim from 'lodash/trim';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { BeginId } from '../constant';
+import { AgentChatLogContext } from '../context';
 import useGraphStore from '../store';
 import { receiveMessageError } from '../utils';
 
@@ -86,6 +87,7 @@ export const useSendNextMessage = () => {
   const { id: agentId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   const { refetch } = useFetchAgent();
+  const { addEventList } = useContext(AgentChatLogContext);
 
   const { send, answerList, done, stopOutputMessage } = useSendMessageBySSE(
     api.runCanvas,
@@ -160,6 +162,10 @@ export const useSendNextMessage = () => {
     }
   }, [addNewestAnswer, prologue]);
 
+  useEffect(() => {
+    addEventList(answerList);
+  }, [addEventList, answerList]);
+
   return {
     handlePressEnter,
     handleInputChange,