Feat: Get the running log of each message through the trace interface #3221 (#8711)

### What problem does this PR solve?
Feat: Get the running log of each message through the trace interface
#3221

### Type of change


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

web/src/hooks/use-agent-request.ts

@@ -1,4 +1,5 @@
 import { AgentGlobals } from '@/constants/agent';
+import { ITraceData } from '@/interfaces/database/agent';
 import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
 import i18n from '@/locales/config';
 import { BeginId } from '@/pages/agent/constant';
@@ -9,7 +10,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
 import { message } from 'antd';
 import { get, set } from 'lodash';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
@@ -27,6 +28,7 @@ export const enum AgentApiAction {
   SetAgent = 'setAgent',
   FetchAgentTemplates = 'fetchAgentTemplates',
   UploadCanvasFile = 'uploadCanvasFile',
+  Trace = 'trace',
 }
 
 export const EmptyDsl = {
@@ -300,3 +302,32 @@ export const useUploadCanvasFile = () => {
 
   return { data, loading, uploadCanvasFile: mutateAsync };
 };
+
+export const useFetchMessageTrace = () => {
+  const { id } = useParams();
+  const [messageId, setMessageId] = useState('');
+
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery<ITraceData[]>({
+    queryKey: [AgentApiAction.Trace, id, messageId],
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    enabled: !!id && !!messageId,
+    refetchInterval: 2000,
+    queryFn: async () => {
+      const { data } = await flowService.trace({
+        canvas_id: id,
+        message_id: messageId,
+      });
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, refetch, setMessageId };
+};