feat: run flow (#1076)

### What problem does this PR solve?

feat: run flow #918 

### Type of change


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

web/src/pages/flow/hooks.ts

@@ -2,6 +2,7 @@ import { useSetModalState } from '@/hooks/commonHooks';
 import {
   useFetchFlow,
   useFetchFlowTemplates,
+  useRunFlow,
   useSetFlow,
 } from '@/hooks/flow-hooks';
 import { useFetchLlmList } from '@/hooks/llmHooks';
@@ -83,7 +84,9 @@ export const useHandleDrop = () => {
           x: 0,
           y: 0,
         },
-        data: { label: `${type}` },
+        data: {
+          label: `${type}`,
+        },
         sourcePosition: Position.Right,
         targetPosition: Position.Left,
       };
@@ -141,7 +144,6 @@ export const useSaveGraph = () => {
   const { nodes, edges } = useStore((state) => state);
   const saveGraph = useCallback(() => {
     const dslComponents = buildDslComponentsByGraph(nodes, edges);
-    console.info('components:', dslComponents);
     setFlow({
       id,
       title: data.title,
@@ -198,3 +200,19 @@ export const useFetchDataOnMount = () => {
 export const useFlowIsFetching = () => {
   return useIsFetching({ queryKey: ['flowDetail'] }) > 0;
 };
+
+export const useRunGraph = () => {
+  const { data } = useFetchFlow();
+  const { runFlow } = useRunFlow();
+  const { id } = useParams();
+  const { nodes, edges } = useStore((state) => state);
+  const runGraph = useCallback(() => {
+    const dslComponents = buildDslComponentsByGraph(nodes, edges);
+    runFlow({
+      id: id!!,
+      dsl: { ...data.dsl, components: dslComponents },
+    });
+  }, [nodes, edges, runFlow, id, data]);
+
+  return { runGraph };
+};