Feat: Enables the message operator form to reference the data defined by the begin operator #3221 (#8108)

### What problem does this PR solve?

Feat: Enables the message operator form to reference the data defined by
the begin operator #3221

### Type of change


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

web/src/pages/agent/hooks/use-build-dsl.ts

@@ -1,11 +1,11 @@
-import { useFetchFlow } from '@/hooks/flow-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { useCallback } from 'react';
 import useGraphStore from '../store';
 import { buildDslComponentsByGraph } from '../utils';
 
 export const useBuildDslData = () => {
-  const { data } = useFetchFlow();
+  const { data } = useFetchAgent();
   const { nodes, edges } = useGraphStore((state) => state);
 
   const buildDslData = useCallback(

web/src/pages/agent/hooks/use-export-json.ts

@@ -1,7 +1,7 @@
 import { useToast } from '@/components/hooks/use-toast';
 import { FileMimeType, Platform } from '@/constants/common';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { useFetchFlow } from '@/hooks/flow-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
 import { IGraph } from '@/interfaces/database/flow';
 import { downloadJsonFile } from '@/utils/file-util';
 import { message } from 'antd';
@@ -19,7 +19,7 @@ export const useHandleExportOrImportJsonFile = () => {
     showModal: showFileUploadModal,
   } = useSetModalState();
   const setGraphInfo = useSetGraphInfo();
-  const { data } = useFetchFlow();
+  const { data } = useFetchAgent();
   const { t } = useTranslation();
   const { toast } = useToast();
 

web/src/pages/agent/hooks/use-fetch-data.ts

@@ -1,10 +1,10 @@
-import { useFetchFlow } from '@/hooks/flow-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
 import { IGraph } from '@/interfaces/database/flow';
 import { useEffect } from 'react';
 import { useSetGraphInfo } from './use-set-graph';
 
 export const useFetchDataOnMount = () => {
-  const { loading, data, refetch } = useFetchFlow();
+  const { loading, data, refetch } = useFetchAgent();
   const setGraphInfo = useSetGraphInfo();
 
   useEffect(() => {

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -3,6 +3,7 @@ import { DefaultOptionType } from 'antd/es/select';
 import get from 'lodash/get';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { BeginId, Operator } from '../constant';
+import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 
@@ -10,7 +11,9 @@ export const useGetBeginNodeDataQuery = () => {
   const getNode = useGraphStore((state) => state.getNode);
 
   const getBeginNodeDataQuery = useCallback(() => {
-    return get(getNode(BeginId), 'data.form.query', []);
+    return buildBeginInputListFromObject(
+      get(getNode(BeginId), 'data.form.inputs', {}),
+    );
   }, [getNode]);
 
   return getBeginNodeDataQuery;
@@ -45,7 +48,6 @@ export const useBuildComponentIdSelectOptions = (
 ) => {
   const nodes = useGraphStore((state) => state.nodes);
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
-  const query: BeginQuery[] = getBeginNodeDataQuery();
 
   // Limit the nodes inside iteration to only reference peer nodes with the same parentId and other external nodes other than their parent nodes
   const filterChildNodesToSameParentOrExternal = useCallback(
@@ -74,34 +76,37 @@ export const useBuildComponentIdSelectOptions = (
       .map((x) => ({ label: x.data.name, value: x.id }));
   }, [nodes, nodeId, filterChildNodesToSameParentOrExternal]);
 
-  const groupedOptions = [
-    {
-      label: <span>Component Output</span>,
-      title: 'Component Output',
-      options: componentIdOptions,
-    },
-    {
-      label: <span>Begin Input</span>,
-      title: 'Begin Input',
-      options: query.map((x) => ({
-        label: x.name,
-        value: `begin@${x.key}`,
-      })),
-    },
-  ];
+  const buildGroupedOptions = useCallback(() => {
+    const query: BeginQuery[] = getBeginNodeDataQuery();
+    return [
+      {
+        label: <span>Component Output</span>,
+        title: 'Component Output',
+        options: componentIdOptions,
+      },
+      {
+        label: <span>Begin Input</span>,
+        title: 'Begin Input',
+        options: query.map((x) => ({
+          label: x.name,
+          value: `begin@${x.key}`,
+        })),
+      },
+    ];
+  }, [componentIdOptions, getBeginNodeDataQuery]);
 
-  return groupedOptions;
+  return buildGroupedOptions;
 };
 
 export const useGetComponentLabelByValue = (nodeId: string) => {
-  const options = useBuildComponentIdSelectOptions(nodeId);
-  const flattenOptions = useMemo(
-    () =>
-      options.reduce<DefaultOptionType[]>((pre, cur) => {
-        return [...pre, ...cur.options];
-      }, []),
-    [options],
-  );
+  const buildGroupedOptions = useBuildComponentIdSelectOptions(nodeId);
+
+  const flattenOptions = useMemo(() => {
+    const options = buildGroupedOptions();
+    return options.reduce<DefaultOptionType[]>((pre, cur) => {
+      return [...pre, ...cur.options];
+    }, []);
+  }, [buildGroupedOptions]);
 
   const getLabel = useCallback(
     (val?: string) => {

web/src/pages/agent/hooks/use-save-graph.ts

@@ -25,7 +25,7 @@ export const useSaveGraph = () => {
         dsl: buildDslData(currentNodes),
       });
     },
-    [setAgent, id, data.title, buildDslData],
+    [setAgent, data, id, buildDslData],
   );
 
   return { saveGraph, loading };