fix(builder): Correctly load node connections (#7592)

- Set `node.data.connections` based on `graph.links` in `loadGraph(..)`
- Use reactflow's built-in `useNodesState`, `useEdgesState` to replace some boilerplate functions that do exactly the same

Resolves #7392

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -167,7 +167,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
               return (isRequired || isAdvancedOpen) && (
                 <div key={key}>
                   <NodeHandle keyName={key} isConnected={isHandleConnected(key)} schema={schema} side="left" />
-                  {isHandleConnected(key) ? <></> :
+                  {!isHandleConnected(key) &&
                   <NodeInputField
                     keyName={key}
                     schema={schema}

rnd/autogpt_builder/src/components/Flow.tsx

@@ -2,12 +2,10 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   addEdge,
-  applyNodeChanges,
+  useNodesState,
-  applyEdgeChanges,
+  useEdgesState,
   Node,
   Edge,
-  OnNodesChange,
-  OnEdgesChange,
   OnConnect,
   NodeTypes,
   Connection,
@@ -76,8 +74,8 @@ const FlowEditor: React.FC<{
   template?: boolean;
   className?: string;
 }> = ({ flowID, template, className }) => {
-  const [nodes, setNodes] = useState<Node<CustomNodeData>[]>([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<CustomNodeData>([]);
-  const [edges, setEdges] = useState<Edge<CustomEdgeData>[]>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<CustomEdgeData>([]);
   const [nodeId, setNodeId] = useState<number>(1);
   const [availableNodes, setAvailableNodes] = useState<Block[]>([]);
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -124,16 +122,6 @@ const FlowEditor: React.FC<{
   const nodeTypes: NodeTypes = useMemo(() => ({ custom: CustomNode }), []);
   const edgeTypes: EdgeTypes = useMemo(() => ({ custom: CustomEdge }), []);
 
-  const onNodesChange: OnNodesChange = useCallback(
-    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
-    []
-  );
-
-  const onEdgesChange: OnEdgesChange = useCallback(
-    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-    []
-  );
-
   const getOutputType = (id: string, handleId: string) => {
     const node = nodes.find((node) => node.id === id);
     if (!node) return 'unknown';
@@ -251,7 +239,7 @@ const FlowEditor: React.FC<{
 
     setNodes(graph.nodes.map(node => {
       const block = availableNodes.find(block => block.id === node.block_id)!;
-      const newNode = {
+      const newNode: Node<CustomNodeData> = {
         id: node.id,
         type: 'custom',
         position: { x: node.metadata.position.x, y: node.metadata.position.y },
@@ -268,7 +256,14 @@ const FlowEditor: React.FC<{
               : node
             ));
           },
-          connections: [],
+          connections: graph.links
+            .filter(l => [l.source_id, l.sink_id].includes(node.id))
+            .map(link => ({
+              source: link.source_id,
+              sourceHandle: link.source_name,
+              target: link.sink_id,
+              targetHandle: link.sink_name,
+            })),
           isOutputOpen: false,
         },
       };