Feat: Add agent log-sheet in cavas and log-sheet in share's page (#9072)

### What problem does this PR solve?

Feat: Add agent log-sheet in cavas and log-sheet in share's page #3221 

### Type of change

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

web/src/pages/agent/hooks/use-cache-chat-log.ts

@@ -3,7 +3,7 @@ import {
   INodeEvent,
   MessageEventType,
 } from '@/hooks/use-send-message';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export const ExcludeTypes = [
   MessageEventType.Message,
@@ -12,51 +12,76 @@ export const ExcludeTypes = [
 
 export function useCacheChatLog() {
   const [eventList, setEventList] = useState<IEventList>([]);
+  const [messageIdPool, setMessageIdPool] = useState<
+    Record<string, IEventList>
+  >({});
+
   const [currentMessageId, setCurrentMessageId] = useState('');
+  useEffect(() => {
+    setMessageIdPool((prev) => ({ ...prev, [currentMessageId]: eventList }));
+  }, [currentMessageId, eventList]);
 
   const filterEventListByMessageId = useCallback(
     (messageId: string) => {
-      return eventList.filter((x) => x.message_id === messageId);
+      return messageIdPool[messageId]?.filter(
+        (x) => x.message_id === messageId,
+      );
     },
-    [eventList],
+    [messageIdPool],
   );
 
   const filterEventListByEventType = useCallback(
     (eventType: string) => {
-      return eventList.filter((x) => x.event === eventType);
+      return messageIdPool[currentMessageId]?.filter(
+        (x) => x.event === eventType,
+      );
     },
-    [eventList],
+    [messageIdPool, currentMessageId],
   );
 
   const clearEventList = useCallback(() => {
     setEventList([]);
   }, []);
 
-  const addEventList = useCallback((events: IEventList) => {
-    setEventList((list) => {
-      const nextList = [...list];
+  const addEventList = useCallback(
+    (events: IEventList, message_id: string) => {
+      const nextList = [...eventList];
       events.forEach((x) => {
         if (nextList.every((y) => y !== x)) {
           nextList.push(x);
         }
       });
-      return nextList;
-    });
-  }, []);
+      setEventList(nextList);
+      setMessageIdPool((prev) => ({ ...prev, [message_id]: nextList }));
+    },
+    [eventList],
+  );
 
   const currentEventListWithoutMessage = useMemo(() => {
-    const list = eventList.filter(
+    const list = messageIdPool[currentMessageId]?.filter(
       (x) =>
         x.message_id === currentMessageId &&
         ExcludeTypes.every((y) => y !== x.event),
     );
-
     return list as INodeEvent[];
-  }, [currentMessageId, eventList]);
+  }, [currentMessageId, messageIdPool]);
+
+  const currentEventListWithoutMessageById = useCallback(
+    (messageId: string) => {
+      const list = messageIdPool[messageId]?.filter(
+        (x) =>
+          x.message_id === messageId &&
+          ExcludeTypes.every((y) => y !== x.event),
+      );
+      return list as INodeEvent[];
+    },
+    [messageIdPool],
+  );
 
   return {
     eventList,
     currentEventListWithoutMessage,
+    currentEventListWithoutMessageById,
     setEventList,
     clearEventList,
     addEventList,