feat(builder) Add save Agent functionality (#7361)

Add save functionality

rnd/autogpt_builder/src/components/Flow.tsx

@@ -261,8 +261,7 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
     return inputData;
   };
 
-
+  const saveAgent = async () => {
-  const runAgent = async () => {
     try {
       console.log("All nodes before formatting:", nodes);
       const blockIdToNodeIdMap = {};
@@ -326,6 +325,20 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
 
       setNodes(updatedNodes);
 
+      return newAgentId;
+    } catch (error) {
+      console.error('Error running agent:', error);
+    }
+  };
+
+  const runAgent = async () => {
+    try {
+      const newAgentId = await saveAgent();
+      if (!newAgentId) {
+        console.error('Error saving agent');
+        return;
+      }
+
       const executeData = await api.executeFlow(newAgentId);
       const runId = executeData.id;
 
@@ -406,7 +419,10 @@ const updateNodesWithExecutionData = (executionData: any[]) => {
             value={agentDescription}
             onChange={(e) => setAgentDescription(e.target.value)}
           />
-          <Button onClick={runAgent}>Run Agent</Button>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>  {/* Added gap for spacing */}
+            <Button onClick={saveAgent}>Save Agent</Button>
+            <Button onClick={runAgent}>Save & Run Agent</Button>
+          </div>
         </div>
       </ReactFlow>
     </div>