Feat: Render agent details #3221 (#5307)

### What problem does this PR solve?

Feat: Render agent details #3221
### Type of change


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

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

@@ -0,0 +1,29 @@
+import { useFetchFlow } from '@/hooks/flow-hooks';
+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 { nodes, edges } = useGraphStore((state) => state);
+
+  const buildDslData = useCallback(
+    (currentNodes?: RAGFlowNodeType[]) => {
+      const dslComponents = buildDslComponentsByGraph(
+        currentNodes ?? nodes,
+        edges,
+        data.dsl.components,
+      );
+
+      return {
+        ...data.dsl,
+        graph: { nodes: currentNodes ?? nodes, edges },
+        components: dslComponents,
+      };
+    },
+    [data.dsl, edges, nodes],
+  );
+
+  return { buildDslData };
+};