feat(agpt_builder) Fix data persistance on agent execution (#7363)

* fixing issue with data vanishing when executing agent

* fix rebasing

* add unique key

* reset to neutral & failed colours

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -392,7 +392,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   };
 
   return (
-    <div className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : ''}`}>
+    <div className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : data.status === 'FAILED' ? 'failed' :''}`}>
       <div className="node-header">
         <div className="node-title">{data.blockType || data.title}</div>
         <Button onClick={toggleProperties} className="toggle-button">

rnd/autogpt_builder/src/components/Flow.tsx

@@ -32,6 +32,7 @@ type CustomNodeData = {
   status?: string;
   output_data?: any;
   block_id: string;
+  backend_id?: string;
 };
 
 const Sidebar: React.FC<{ isOpen: boolean, availableNodes: Block[], addNode: (id: string, name: string) => void }> =
@@ -73,8 +74,8 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
   const [availableNodes, setAvailableNodes] = useState<Block[]>([]);
   const [agentId, setAgentId] = useState<string | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const [agentName, setAgentName] = useState<string>('');
   const [agentDescription, setAgentDescription] = useState<string>('');
+  const [agentName, setAgentName] = useState<string>('');
 
   const apiUrl = process.env.AGPT_SERVER_URL!;
   const api = new AutoGPTServerAPI(apiUrl);
@@ -263,11 +264,25 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
 
   const saveAgent = async () => {
     try {
+
+      setNodes((nds) =>
+        nds.map((node) => ({
+          ...node,
+          data: {
+            ...node.data,
+            status: null,
+          },
+        }))
+      );
+      await new Promise((resolve) => setTimeout(resolve, 100));
       console.log("All nodes before formatting:", nodes);
       const blockIdToNodeIdMap = {};
 
       const formattedNodes = nodes.map(node => {
-        blockIdToNodeIdMap[node.data.block_id] = node.id;
+        nodes.forEach(node => {
+          const key = `${node.data.block_id}_${node.position.x}_${node.position.y}`;
+          blockIdToNodeIdMap[key] = node.id;
+        });
         const inputDefault = prepareNodeInputData(node, nodes, edges);
         const inputNodes = edges
           .filter(edge => edge.target === node.id)
@@ -315,13 +330,21 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
 
       // Update the node IDs in the frontend
       const updatedNodes = createData.nodes.map(backendNode => {
-        const frontendNodeId = blockIdToNodeIdMap[backendNode.block_id];
-        return {
-          ...nodes.find(node => node.id === frontendNodeId),
-          id: backendNode.id,
-          position: backendNode.metadata.position,
-        };
-      });
+        const key = `${backendNode.block_id}_${backendNode.metadata.position.x}_${backendNode.metadata.position.y}`;
+        const frontendNodeId = blockIdToNodeIdMap[key];
+        const frontendNode = nodes.find(node => node.id === frontendNodeId);
+
+        return frontendNode
+          ? {
+              ...frontendNode,
+              position: backendNode.metadata.position,
+              data: {
+                ...frontendNode.data,
+                backend_id: backendNode.id,
+              },
+            }
+          : null;
+      }).filter(node => node !== null);
 
       setNodes(updatedNodes);
 
@@ -361,10 +384,11 @@ const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({
   };
 
 
+
   const updateNodesWithExecutionData = (executionData: any[]) => {
     setNodes((nds) =>
       nds.map((node) => {
-        const nodeExecution = executionData.find((exec) => exec.node_id === node.id);
+        const nodeExecution = executionData.find((exec) => exec.node_id === node.data.backend_id);
         if (nodeExecution) {
           return {
             ...node,

rnd/autogpt_builder/src/components/customnode.css

@@ -6,6 +6,7 @@
   color: #e0e0e0;
   width: 500px;
   box-sizing: border-box;
+  transition: background-color 0.3s ease-in-out;
 }
 
 .node-header {
@@ -206,6 +207,16 @@
   animation: completedAnimation 1s infinite;
 }
 
+/* Animation for failed status */
+@keyframes failedAnimation {
+  0% { background-color: #c0392b; }
+  100% { background-color: #e74c3c; }
+}
+
+.failed {
+  animation: failedAnimation 1s infinite;
+}
+
 /* Add more styles for better look */
 .custom-node {
   transition: all 0.3s ease-in-out;