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/hooks/use-cache-chat-log.ts

@@ -0,0 +1,61 @@
+import { IEventList, MessageEventType } from '@/hooks/use-send-message';
+import { useCallback, useMemo, useState } from 'react';
+
+export const ExcludeTypes = [
+  MessageEventType.Message,
+  MessageEventType.MessageEnd,
+];
+
+export function useCacheChatLog() {
+  const [eventList, setEventList] = useState<IEventList>([]);
+  const [currentMessageId, setCurrentMessageId] = useState('');
+
+  const filterEventListByMessageId = useCallback(
+    (messageId: string) => {
+      return eventList.filter((x) => x.message_id === messageId);
+    },
+    [eventList],
+  );
+
+  const filterEventListByEventType = useCallback(
+    (eventType: string) => {
+      return eventList.filter((x) => x.event === eventType);
+    },
+    [eventList],
+  );
+
+  const clearEventList = useCallback(() => {
+    setEventList([]);
+  }, []);
+
+  const addEventList = useCallback((events: IEventList) => {
+    setEventList((list) => {
+      const nextList = [...list];
+      events.forEach((x) => {
+        if (nextList.every((y) => y !== x)) {
+          nextList.push(x);
+        }
+      });
+      return nextList;
+    });
+  }, []);
+
+  const currentEventListWithoutMessage = useMemo(() => {
+    return eventList.filter(
+      (x) =>
+        x.message_id === currentMessageId &&
+        ExcludeTypes.every((y) => y !== x.event),
+    );
+  }, [currentMessageId, eventList]);
+
+  return {
+    eventList,
+    currentEventListWithoutMessage,
+    setEventList,
+    clearEventList,
+    addEventList,
+    filterEventListByEventType,
+    filterEventListByMessageId,
+    setCurrentMessageId,
+  };
+}

web/src/pages/agent/hooks/use-show-drawer.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect } from 'react';
 import { Operator } from '../constant';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
+import { useCacheChatLog } from './use-cache-chat-log';
 import { useGetBeginNodeDataQuery } from './use-get-begin-query';
 import { useSaveGraph } from './use-save-graph';
 
@@ -152,12 +153,22 @@ export function useShowDrawer({
   };
 }
 
-export function useShowLogSheet() {
+export function useShowLogSheet({
+  setCurrentMessageId,
+}: Pick<ReturnType<typeof useCacheChatLog>, 'setCurrentMessageId'>) {
   const { visible, showModal, hideModal } = useSetModalState();
 
+  const handleShow = useCallback(
+    (messageId: string) => {
+      setCurrentMessageId(messageId);
+      showModal();
+    },
+    [setCurrentMessageId, showModal],
+  );
+
   return {
     logSheetVisible: visible,
     hideLogSheet: hideModal,
-    showLogSheet: showModal,
+    showLogSheet: handleShow,
   };
 }