Fix: Fixed the issue that the content of the Dropdown section cannot be seen when selecting the next operator #3221 (#8918)

…be seen when selecting the next operator #3221

### What problem does this PR solve?
Fix: Fixed the issue that the content of the Dropdown section cannot be
seen when selecting the next operator #3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -2,6 +2,7 @@ import message from '@/components/ui/message';
 import { AgentGlobals } from '@/constants/agent';
 import { ITraceData } from '@/interfaces/database/agent';
 import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
+import { IDebugSingleRequestBody } from '@/interfaces/request/agent';
 import i18n from '@/locales/config';
 import { BeginId } from '@/pages/agent/constant';
 import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
@@ -30,6 +31,8 @@ export const enum AgentApiAction {
   UploadCanvasFile = 'uploadCanvasFile',
   Trace = 'trace',
   TestDbConnect = 'testDbConnect',
+  DebugSingle = 'debugSingle',
+  FetchInputForm = 'fetchInputForm',
 }
 
 export const EmptyDsl = {
@@ -353,3 +356,43 @@ export const useTestDbConnect = () => {
 
   return { data, loading, testDbConnect: mutateAsync };
 };
+
+export const useDebugSingle = () => {
+  const { id } = useParams();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.FetchInputForm],
+    mutationFn: async (params: IDebugSingleRequestBody) => {
+      const ret = await flowService.debugSingle({ id, ...params });
+      if (ret?.data?.code !== 0) {
+        message.error(ret?.data?.message);
+      }
+      return ret?.data?.data;
+    },
+  });
+
+  return { data, loading, debugSingle: mutateAsync };
+};
+
+export const useFetchInputForm = (componentId?: string) => {
+  const { id } = useParams();
+
+  const { data } = useQuery<Record<string, any>>({
+    queryKey: [AgentApiAction.FetchInputForm],
+    initialData: {},
+    enabled: !!id && !!componentId,
+    queryFn: async () => {
+      const { data } = await flowService.inputForm({
+        id,
+        component_id: componentId,
+      });
+
+      return data.data;
+    },
+  });
+
+  return data;
+};