updated animations - not ready for merge, conflicts

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, FC, memo } from 'react';
+import React, { useState, useEffect, FC, memo, useCallback } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 import 'reactflow/dist/style.css';
 import './customnode.css';
@@ -8,6 +8,12 @@ type Schema = {
   type: string;
   properties: { [key: string]: any };
   required?: string[];
+  enum?: string[];
+  items?: Schema;
+  additionalProperties?: { type: string };
+  allOf?: any[];
+  anyOf?: any[];
+  oneOf?: any[];
 };
 
 type CustomNodeData = {
@@ -25,6 +31,9 @@ type CustomNodeData = {
 
 const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   const [isPropertiesOpen, setIsPropertiesOpen] = useState(data.isPropertiesOpen || false);
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string, value: string }[]>([]);
+  const [newKey, setNewKey] = useState<string>('');
+  const [newValue, setNewValue] = useState<string>('');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeKey, setActiveKey] = useState<string | null>(null);
   const [modalValue, setModalValue] = useState<string>('');
@@ -76,41 +85,24 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   };
 
   const handleInputChange = (key: string, value: any) => {
-    const newValues = { ...data.hardcodedValues, [key]: value };
+    const keys = key.split('.');
+    const newValues = JSON.parse(JSON.stringify(data.hardcodedValues));
+    let current = newValues;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (!current[keys[i]]) current[keys[i]] = {};
+      current = current[keys[i]];
+    }
+    current[keys[keys.length - 1]] = value;
+
     console.log(`Updating hardcoded values for node ${id}:`, newValues);
     data.setHardcodedValues(newValues);
     setErrors((prevErrors) => ({ ...prevErrors, [key]: null }));
   };
 
-  const validateInput = (key: string, value: any, schema: any) => {
+  const getValue = (key: string) => {
-    switch (schema.type) {
+    const keys = key.split('.');
-      case 'string':
+    return keys.reduce((acc, k) => (acc && acc[k] !== undefined) ? acc[k] : '', data.hardcodedValues);
-        if (schema.enum && !schema.enum.includes(value)) {
-          return `Invalid value for ${key}`;
-        }
-        break;
-      case 'boolean':
-        if (typeof value !== 'boolean') {
-          return `Invalid value for ${key}`;
-        }
-        break;
-      case 'number':
-        if (typeof value !== 'number') {
-          return `Invalid value for ${key}`;
-        }
-        break;
-      case 'array':
-        if (!Array.isArray(value) || value.some((item: any) => typeof item !== 'string')) {
-          return `Invalid value for ${key}`;
-        }
-        if (schema.minItems && value.length < schema.minItems) {
-          return `${key} requires at least ${schema.minItems} items`;
-        }
-        break;
-      default:
-        return null;
-    }
-    return null;
   };
 
   const isHandleConnected = (key: string) => {
@@ -123,66 +115,185 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
     });
   };
 
+  const handleAddProperty = () => {
+    if (newKey && newValue) {
+      const newPairs = [...keyValuePairs, { key: newKey, value: newValue }];
+      setKeyValuePairs(newPairs);
+      setNewKey('');
+      setNewValue('');
+      const expectedFormat = newPairs.reduce((acc, pair) => ({ ...acc, [pair.key]: pair.value }), {});
+      handleInputChange('expected_format', expectedFormat);
+    }
+  };
+
   const handleInputClick = (key: string) => {
     setActiveKey(key);
-    setModalValue(data.hardcodedValues[key] || '');
+    const value = getValue(key);
+    setModalValue(typeof value === 'object' ? JSON.stringify(value, null, 2) : value);
     setIsModalOpen(true);
   };
 
   const handleModalSave = (value: string) => {
     if (activeKey) {
-      handleInputChange(activeKey, value);
+      try {
+        const parsedValue = JSON.parse(value);
+        handleInputChange(activeKey, parsedValue);
+      } catch (error) {
+        handleInputChange(activeKey, value);
+      }
     }
     setIsModalOpen(false);
     setActiveKey(null);
   };
 
-  const addArrayItem = (key: string) => {
+  const autoResize = useCallback((element) => {
-    const currentValues = data.hardcodedValues[key] || [];
+    element.style.height = 'auto';
-    handleInputChange(key, [...currentValues, '']);
+    element.style.height = element.scrollHeight + 'px';
-  };
+  }, []);
 
-  const removeArrayItem = (key: string, index: number) => {
+  const renderInputField = (key: string, schema: any, parentKey: string = ''): JSX.Element => {
-    const currentValues = data.hardcodedValues[key] || [];
+    const fullKey = parentKey ? `${parentKey}.${key}` : key;
-    currentValues.splice(index, 1);
+    const error = errors[fullKey];
-    handleInputChange(key, [...currentValues]);
+    const value = getValue(fullKey);
-  };
 
-  const handleArrayItemChange = (key: string, index: number, value: string) => {
+    if (isHandleConnected(fullKey)) {
-    const currentValues = data.hardcodedValues[key] || [];
+      return <div className="connected-input">Connected</div>;
-    currentValues[index] = value;
+    }
-    handleInputChange(key, [...currentValues]);
-  };
 
-  const addDynamicTextInput = () => {
+    const renderClickableInput = (displayValue: string) => (
-    const dynamicKeyPrefix = 'texts_$_';
+      <div className="clickable-input" onClick={() => handleInputClick(fullKey)}>
-    const currentKeys = Object.keys(data.hardcodedValues).filter(key => key.startsWith(dynamicKeyPrefix));
+        {displayValue}
-    const nextIndex = currentKeys.length + 1;
+      </div>
-    const newKey = `${dynamicKeyPrefix}${nextIndex}`;
+    );
-    handleInputChange(newKey, '');
-  };
 
-  const removeDynamicTextInput = (key: string) => {
+    if (schema.type === 'object' && schema.properties) {
-    const newValues = { ...data.hardcodedValues };
+      return (
-    delete newValues[key];
+        <div key={fullKey} className="object-input">
-    data.setHardcodedValues(newValues);
+          <strong>{key}:</strong>
-  };
+          {Object.entries(schema.properties).map(([propKey, propSchema]: [string, any]) => (
+            <div key={`${fullKey}.${propKey}`} className="nested-input">
+              {renderInputField(propKey, propSchema, fullKey)}
+            </div>
+          ))}
+        </div>
+      );
+    }
 
-  const handleDynamicTextInputChange = (key: string, value: string) => {
+    if (schema.type === 'object' && schema.additionalProperties) {
-    handleInputChange(key, value);
+      const objectValue = value || {};
-  };
+      return (
+        <div key={fullKey} className="object-input">
+          <strong>{key}:</strong>
+          {Object.entries(objectValue).map(([propKey, propValue]: [string, any]) => (
+            <div key={`${fullKey}.${propKey}`} className="nested-input">
+              <div className="clickable-input" onClick={() => handleInputClick(`${fullKey}.${propKey}`)}>
+                {propKey}: {typeof propValue === 'object' ? JSON.stringify(propValue, null, 2) : propValue}
+              </div>
+              <button onClick={() => handleInputChange(`${fullKey}.${propKey}`, undefined)} className="array-item-remove">
+                &times;
+              </button>
+            </div>
+          ))}
+          {key === 'expected_format' && (
+            <div className="nested-input">
+              {keyValuePairs.map((pair, index) => (
+                <div key={index} className="key-value-input">
+                  <input
+                    type="text"
+                    placeholder="Key"
+                    value={pair.key}
+                    onChange={(e) => {
+                      const newPairs = [...keyValuePairs];
+                      newPairs[index].key = e.target.value;
+                      setKeyValuePairs(newPairs);
+                      const expectedFormat = newPairs.reduce((acc, pair) => ({ ...acc, [pair.key]: pair.value }), {});
+                      handleInputChange('expected_format', expectedFormat);
+                    }}
+                  />
+                  <input
+                    type="text"
+                    placeholder="Value"
+                    value={pair.value}
+                    onChange={(e) => {
+                      const newPairs = [...keyValuePairs];
+                      newPairs[index].value = e.target.value;
+                      setKeyValuePairs(newPairs);
+                      const expectedFormat = newPairs.reduce((acc, pair) => ({ ...acc, [pair.key]: pair.value }), {});
+                      handleInputChange('expected_format', expectedFormat);
+                    }}
+                  />
+                </div>
+              ))}
+              <div className="key-value-input">
+                <input
+                  type="text"
+                  placeholder="Key"
+                  value={newKey}
+                  onChange={(e) => setNewKey(e.target.value)}
+                />
+                <input
+                  type="text"
+                  placeholder="Value"
+                  value={newValue}
+                  onChange={(e) => setNewValue(e.target.value)}
+                />
+              </div>
+              <button onClick={handleAddProperty}>Add Property</button>
+            </div>
+          )}
+          {error && <span className="error-message">{error}</span>}
+        </div>
+      );
+    }
+
+    if (schema.anyOf) {
+      const types = schema.anyOf.map((s: any) => s.type);
+      if (types.includes('string') && types.includes('null')) {
+        return (
+          <div key={fullKey} className="input-container">
+            {renderClickableInput(value || `Enter ${key} (optional)`)}
+            {error && <span className="error-message">{error}</span>}
+          </div>
+        );
+      }
+    }
+
+    if (schema.allOf) {
+      return (
+        <div key={fullKey} className="object-input">
+          <strong>{key}:</strong>
+          {schema.allOf[0].properties && Object.entries(schema.allOf[0].properties).map(([propKey, propSchema]: [string, any]) => (
+            <div key={`${fullKey}.${propKey}`} className="nested-input">
+              {renderInputField(propKey, propSchema, fullKey)}
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (schema.oneOf) {
+      return (
+        <div key={fullKey} className="object-input">
+          <strong>{key}:</strong>
+          {schema.oneOf[0].properties && Object.entries(schema.oneOf[0].properties).map(([propKey, propSchema]: [string, any]) => (
+            <div key={`${fullKey}.${propKey}`} className="nested-input">
+              {renderInputField(propKey, propSchema, fullKey)}
+            </div>
+          ))}
+        </div>
+      );
+    }
 
-  const renderInputField = (key: string, schema: any) => {
-    const error = errors[key];
     switch (schema.type) {
       case 'string':
         return schema.enum ? (
-          <div key={key} className="input-container">
+          <div key={fullKey} className="input-container">
             <select
-              value={data.hardcodedValues[key] || ''}
+              value={value || ''}
-              onChange={(e) => handleInputChange(key, e.target.value)}
+              onChange={(e) => handleInputChange(fullKey, e.target.value)}
               className="select-input"
             >
+              <option value="">Select {key}</option>
               {schema.enum.map((option: string) => (
                 <option key={option} value={option}>
                   {option}
@@ -192,44 +303,44 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
             {error && <span className="error-message">{error}</span>}
           </div>
         ) : (
-          <div key={key} className="input-container">
+          <div key={fullKey} className="input-container">
-            <div className="clickable-input" onClick={() => handleInputClick(key)}>
+            <textarea
-              {data.hardcodedValues[key] || `Enter ${key}`}
+              value={value}
-            </div>
+              onChange={(e) => {
+                handleInputChange(fullKey, e.target.value);
+                autoResize(e.target);
+              }}
+              className="text-input"
+              onFocus={(e) => autoResize(e.target)}
+              onInput={(e) => autoResize(e.target)}
+              placeholder={`Enter ${key}`}
+            />
             {error && <span className="error-message">{error}</span>}
           </div>
         );
       case 'boolean':
         return (
-          <div key={key} className="input-container">
+          <div key={fullKey} className="input-container">
-            <label className="radio-label">
+            <select
-              <input
+              value={value === undefined ? '' : value.toString()}
-                type="radio"
+              onChange={(e) => handleInputChange(fullKey, e.target.value === 'true')}
-                value="true"
+              className="select-input"
-                checked={data.hardcodedValues[key] === true}
+            >
-                onChange={() => handleInputChange(key, true)}
+              <option value="">Select {key}</option>
-              />
+              <option value="true">True</option>
-              True
+              <option value="false">False</option>
-            </label>
+            </select>
-            <label className="radio-label">
-              <input
-                type="radio"
-                value="false"
-                checked={data.hardcodedValues[key] === false}
-                onChange={() => handleInputChange(key, false)}
-              />
-              False
-            </label>
             {error && <span className="error-message">{error}</span>}
           </div>
         );
       case 'number':
+      case 'integer':
         return (
-          <div key={key} className="input-container">
+          <div key={fullKey} className="input-container">
             <input
               type="number"
-              value={data.hardcodedValues[key] || ''}
+              value={value || ''}
-              onChange={(e) => handleInputChange(key, parseFloat(e.target.value))}
+              onChange={(e) => handleInputChange(fullKey, parseFloat(e.target.value))}
               className="number-input"
             />
             {error && <span className="error-message">{error}</span>}
@@ -237,23 +348,23 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
         );
       case 'array':
         if (schema.items && schema.items.type === 'string') {
-          const arrayValues = data.hardcodedValues[key] || [];
+          const arrayValues = value || [];
           return (
-            <div key={key} className="input-container">
+            <div key={fullKey} className="input-container">
               {arrayValues.map((item: string, index: number) => (
-                <div key={`${key}-${index}`} className="array-item-container">
+                <div key={`${fullKey}.${index}`} className="array-item-container">
                   <input
                     type="text"
                     value={item}
-                    onChange={(e) => handleArrayItemChange(key, index, e.target.value)}
+                    onChange={(e) => handleInputChange(`${fullKey}.${index}`, e.target.value)}
                     className="array-item-input"
                   />
-                  <button onClick={() => removeArrayItem(key, index)} className="array-item-remove">
+                  <button onClick={() => handleInputChange(`${fullKey}.${index}`, '')} className="array-item-remove">
                     &times;
                   </button>
                 </div>
               ))}
-              <button onClick={() => addArrayItem(key)} className="array-item-add">
+              <button onClick={() => handleInputChange(fullKey, [...arrayValues, ''])} className="array-item-add">
                 Add Item
               </button>
               {error && <span className="error-message">{error}</span>}
@@ -262,52 +373,33 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
         }
         return null;
       default:
-        return null;
+        return (
+          <div key={fullKey} className="input-container">
+            {renderClickableInput(value ? `${key} (Complex)` : `Enter ${key} (Complex)`)}
+            {error && <span className="error-message">{error}</span>}
+          </div>
+        );
     }
   };
 
-  const renderDynamicTextFields = () => {
-    const dynamicKeyPrefix = 'texts_$_';
-    const dynamicKeys = Object.keys(data.hardcodedValues).filter(key => key.startsWith(dynamicKeyPrefix));
-
-    return dynamicKeys.map((key, index) => (
-      <div key={key} className="input-container">
-        <div className="handle-container">
-          <Handle
-            type="target"
-            position={Position.Left}
-            id={key}
-            style={{ background: '#555', borderRadius: '50%' }}
-          />
-          <span className="handle-label">{key}</span>
-          {!isHandleConnected(key) && (
-            <>
-              <input
-                type="text"
-                value={data.hardcodedValues[key]}
-                onChange={(e) => handleDynamicTextInputChange(key, e.target.value)}
-                className="dynamic-text-input"
-              />
-              <button onClick={() => removeDynamicTextInput(key)} className="array-item-remove">
-                &times;
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-    ));
-  };
-
   const validateInputs = () => {
     const newErrors: { [key: string]: string | null } = {};
-    Object.keys(data.inputSchema.properties).forEach((key) => {
+    const validateRecursive = (schema: any, parentKey: string = '') => {
-      const value = data.hardcodedValues[key];
+      Object.entries(schema.properties).forEach(([key, propSchema]: [string, any]) => {
-      const schema = data.inputSchema.properties[key];
+        const fullKey = parentKey ? `${parentKey}.${key}` : key;
-      const error = validateInput(key, value, schema);
+        const value = getValue(fullKey);
-      if (error) {
+
-        newErrors[key] = error;
+        if (propSchema.type === 'object' && propSchema.properties) {
-      }
+          validateRecursive(propSchema, fullKey);
-    });
+        } else {
+          if (propSchema.required && !value) {
+            newErrors[fullKey] = `${fullKey} is required`;
+          }
+        }
+      });
+    };
+
+    validateRecursive(data.inputSchema);
     setErrors(newErrors);
     return Object.values(newErrors).every((error) => error === null);
   };
@@ -320,9 +412,23 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
     }
   };
 
+  const nodeClass = () => {
+    switch (data.status) {
+      case 'RUNNING':
+        return 'node-running';
+      case 'COMPLETED':
+        return 'node-completed';
+      case 'QUEUED':
+        return 'node-queued';
+      case 'FAILED':
+        return 'node-failed';
+      default:
+        return '';
+    }
+  };
 
   return (
-    <div className="custom-node">
+    <div className={`custom-node ${nodeClass()}`}>
       <div className="node-header">
         <div className="node-title">{data.blockType || data.title}</div>
         <button onClick={toggleProperties} className="toggle-button">
@@ -332,38 +438,18 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
       <div className="node-content">
         <div className="input-section">
           {data.inputSchema &&
-            Object.keys(data.inputSchema.properties).map((key) => (
+            Object.entries(data.inputSchema.properties).map(([key, schema]) => (
               <div key={key}>
-                {key !== 'texts' ? (
+                <div className="handle-container">
-                  <div>
+                  <Handle
-                    <div className="handle-container">
+                    type="target"
-                      <Handle
+                    position={Position.Left}
-                        type="target"
+                    id={key}
-                        position={Position.Left}
+                    style={{ background: '#555', borderRadius: '50%' }}
-                        id={key}
+                  />
-                        style={{ background: '#555', borderRadius: '50%' }}
+                  <span className="handle-label">{key}</span>
-                      />
+                </div>
-                      <span className="handle-label">{key}</span>
+                {renderInputField(key, schema)}
-                    </div>
-                    {!isHandleConnected(key) && renderInputField(key, data.inputSchema.properties[key])}
-                  </div>
-                ) : (
-                  <div key={key} className="input-container">
-                    <div className="handle-container">
-                      <Handle
-                        type="target"
-                        position={Position.Left}
-                        id={key}
-                        style={{ background: '#555', borderRadius: '50%' }}
-                      />
-                      <span className="handle-label">{key}</span>
-                    </div>
-                    {renderDynamicTextFields()}
-                    <button onClick={addDynamicTextInput} className="array-item-add">
-                      Add Text Input
-                    </button>
-                  </div>
-                )}
               </div>
             ))}
         </div>

rnd/autogpt_builder/src/components/Flow.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, {useState, useCallback, useEffect, useMemo, useRef} from 'react';
 import ReactFlow, {
   addEdge,
   applyNodeChanges,
@@ -19,6 +19,7 @@ import './flow.css';
 type Schema = {
   type: string;
   properties: { [key: string]: any };
+  additionalProperties?: { type: string };
   required?: string[];
 };
 
@@ -44,12 +45,6 @@ type AvailableNode = {
   outputSchema: Schema;
 };
 
-interface ExecData {
-  node_id: string;
-  status: string;
-  output_data: any;
-}
-
 const Sidebar: React.FC<{isOpen: boolean, availableNodes: AvailableNode[], addNode: (id: string, name: string) => void}> =
   ({isOpen, availableNodes, addNode}) => {
   const [searchQuery, setSearchQuery] = useState('');
@@ -61,28 +56,17 @@ const Sidebar: React.FC<{isOpen: boolean, availableNodes: AvailableNode[], addNo
   );
 
   return (
-    <div style={{
+    <div className={`sidebar ${isOpen ? 'open' : ''}`}>
-      position: 'absolute',
+      <h3>Nodes</h3>
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: '250px',
-      backgroundColor: '#333',
-      padding: '20px',
-      zIndex: 4,
-      overflowY: 'auto'
-    }}>
-      <h3 style={{color: '#fff'}}>Nodes</h3>
       <input
         type="text"
         placeholder="Search nodes..."
-        style={{width: '100%', marginBottom: '10px', padding: '5px'}}
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
       {filteredNodes.map((node) => (
-        <div key={node.id} style={{marginBottom: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+        <div key={node.id} className="sidebarNodeRowStyle">
-          <span style={{color: '#fff'}}>{node.name}</span>
+          <span>{node.name}</span>
           <button onClick={() => addNode(node.id, node.name)}>Add</button>
         </div>
       ))}
@@ -99,6 +83,7 @@ const Flow: React.FC = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const apiUrl = 'http://localhost:8000';
+  const nodeIdMapping = useRef<{ [uuid: string]: string }>({});
 
   useEffect(() => {
     fetch(`${apiUrl}/blocks`)
@@ -183,38 +168,99 @@ const Flow: React.FC = () => {
   };
 
   const prepareNodeInputData = (node: Node<CustomNodeData>, allNodes: Node<CustomNodeData>[], allEdges: Edge[]) => {
-    console.log("Preparing input data for node:", node.id, node.data.blockType);
+  console.log("Preparing input data for node:", node.id, node.data.blockType);
 
-    const blockSchema = availableNodes.find(n => n.id === node.data.block_id)?.inputSchema;
+  const blockSchema = availableNodes.find(n => n.id === node.data.block_id)?.inputSchema;
 
-    if (!blockSchema) {
+  if (!blockSchema) {
-      console.error(`Schema not found for block ID: ${node.data.block_id}`);
+    console.error(`Schema not found for block ID: ${node.data.block_id}`);
-      return {};
+    return {};
+  }
+
+  const getNestedData = (schema: Schema, values: { [key: string]: any }): { [key: string]: any } => {
+    let inputData: { [key: string]: any } = {};
+
+    if (schema.properties) {
+      Object.keys(schema.properties).forEach((key) => {
+        if (values[key] !== undefined) {
+          if (schema.properties[key].type === 'object') {
+            inputData[key] = getNestedData(schema.properties[key], values[key]);
+          } else {
+            inputData[key] = values[key];
+          }
+        }
+      });
     }
 
-    let inputData: { [key: string]: any } = { ...node.data.hardcodedValues };
+    if (schema.additionalProperties) {
+      inputData = { ...inputData, ...values };
+    }
 
-    // Get data from connected nodes
-    const incomingEdges = allEdges.filter(edge => edge.target === node.id);
-    incomingEdges.forEach(edge => {
-      const sourceNode = allNodes.find(n => n.id === edge.source);
-      if (sourceNode && sourceNode.data.output_data) {
-        const outputKey = Object.keys(sourceNode.data.output_data)[0]; // Assuming single output
-        inputData[edge.targetHandle as string] = sourceNode.data.output_data[outputKey];
-      }
-    });
-
-    // Filter out any inputs that are not in the block's schema
-    Object.keys(inputData).forEach(key => {
-      if (!blockSchema.properties[key]) {
-        delete inputData[key];
-      }
-    });
-
-    console.log(`Final prepared input for ${node.data.blockType} (${node.id}):`, inputData);
     return inputData;
   };
 
+  let inputData = getNestedData(blockSchema, node.data.hardcodedValues);
+
+  // Get data from connected nodes
+  const incomingEdges = allEdges.filter(edge => edge.target === node.id);
+  incomingEdges.forEach(edge => {
+    const sourceNode = allNodes.find(n => n.id === edge.source);
+    if (sourceNode && sourceNode.data.output_data) {
+      const outputKey = Object.keys(sourceNode.data.output_data)[0]; // Assuming single output
+      inputData[edge.targetHandle as string] = sourceNode.data.output_data[outputKey];
+    }
+  });
+
+  // Filter out any inputs that are not in the block's schema
+  Object.keys(inputData).forEach(key => {
+    if (!blockSchema.properties[key]) {
+      delete inputData[key];
+    }
+  });
+
+  console.log(`Final prepared input for ${node.data.blockType} (${node.id}):`, inputData);
+  return inputData;
+};
+
+const simulateNodeExecution = (nodes: Node<CustomNodeData>[]) => {
+  let currentStep = 0;
+  const totalSteps = 3; // Number of steps for the simulation
+
+  const interval = setInterval(() => {
+    if (currentStep >= totalSteps) {
+      clearInterval(interval);
+      setNodes((nds) =>
+        nds.map((node) => ({
+          ...node,
+          data: {
+            ...node.data,
+            status: 'COMPLETED',
+          },
+        }))
+      );
+      console.log('All nodes completed execution');
+      alert('Agent ran successfully!');
+      return;
+    }
+
+    setNodes((nds) =>
+      nds.map((node) => {
+        let status = 'QUEUED';
+        if (currentStep === 1) status = 'RUNNING';
+        if (currentStep === 2) status = 'COMPLETED';
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            status: status,
+          },
+        };
+      })
+    );
+    currentStep += 1;
+  }, 1000); // Interval between steps (1 second)
+};
+
   const runAgent = async () => {
     try {
       console.log("All nodes before formatting:", nodes);
@@ -246,11 +292,19 @@ const Flow: React.FC = () => {
         };
       });
 
+      const links = edges.map(edge => ({
+        source_id: edge.source,
+        sink_id: edge.target,
+        source_name: edge.sourceHandle || '',
+        sink_name: edge.targetHandle || ''
+      }));
+
       const payload = {
         id: agentId || '',
         name: 'Agent Name',
         description: 'Agent Description',
         nodes: formattedNodes,
+        links: links  // Ensure this field is included
       };
 
       console.log("Payload being sent to the API:", JSON.stringify(payload, null, 2));
@@ -268,14 +322,12 @@ const Flow: React.FC = () => {
       }
 
       const createData = await createResponse.json();
-
       const newAgentId = createData.id;
       setAgentId(newAgentId);
 
       console.log('Response from the API:', JSON.stringify(createData, null, 2));
 
       const executeResponse = await fetch(`${apiUrl}/graphs/${newAgentId}/execute`, {
-
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -290,15 +342,17 @@ const Flow: React.FC = () => {
       const executeData = await executeResponse.json();
       const runId = executeData.id;
 
-
       const pollExecution = async () => {
         const response = await fetch(`${apiUrl}/graphs/${newAgentId}/executions/${runId}`);
         if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
         }
+
         const data = await response.json();
-        data.forEach(updateNodeData);
+        // updateNodesWithExecutionData(data);
+
         if (data.every((node: any) => node.status === 'COMPLETED')) {
+          simulateNodeExecution(nodes);
           console.log('All nodes completed execution');
         } else {
           setTimeout(pollExecution, 1000);
@@ -312,47 +366,38 @@ const Flow: React.FC = () => {
     }
   };
 
-  const updateNodesWithExecutionData = (executionData: any[]) => {
+
-    setNodes((nds) =>
+const updateNodesWithExecutionData = useCallback((executionData: any[]) => {
-      nds.map((node) => {
+  console.log("Updating nodes with execution data:", executionData);
-        const nodeExecution = executionData.find((exec) => exec.node_id === node.id);
+
-        if (nodeExecution) {
+  setNodes((nds) =>
-          return {
+    nds.map((node) => {
-            ...node,
+      // Find the corresponding execution data for the current node
-            data: {
+      const nodeExecution = executionData.find((exec) => {
-              ...node.data,
+        console.log("Checking exec.node_id:", exec.block_id, "against node.id:", node.data.block_id);
-              status: nodeExecution.status,
+        return nodeIdMapping.current[exec.block_id] === node.data.block_id;
-              output_data: nodeExecution.output_data,
+      });
-              isPropertiesOpen: true,
+
-            },
+      console.log("Node:", node, "Node Execution:", nodeExecution);
-          };
+
-        }
+      if (nodeExecution) {
-        return node;
+        return {
-      })
+          ...node,
-    );
+          data: {
-  };
+            ...node.data,
+            status: nodeExecution.status,
+            output_data: nodeExecution.output_data,
+            isPropertiesOpen: true,
+          },
+        };
+      }
+      return node;
+    })
+  );
+}, [setNodes]);
 
   const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
 
-    const updateNodeData = (execData: ExecData) => {
-    setNodes((nds) =>
-      nds.map((node) => {
-        if (node.id === execData.node_id) {
-          return {
-            ...node,
-            data: {
-              ...node.data,
-              status: execData.status,
-              output_data: execData.output_data,
-              isPropertiesOpen: true, // Open the properties
-            },
-          };
-        }
-        return node;
-      })
-    );
-  };
-
   return (
     <div style={{ height: '100vh', width: '100%' }}>
       <button

rnd/autogpt_builder/src/components/customnode.css

@@ -1,10 +1,13 @@
 .custom-node {
-  padding: 20px;
+  padding: 15px;
   border: 2px solid #fff;
-  border-radius: 20px;
+  border-radius: 12px;
-  background: #333;
+  background: #2c2c2c;
   color: #e0e0e0;
-  width: 250px;
+  width: 300px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 }
 
 .node-header {
@@ -27,10 +30,10 @@
 }
 
 .node-content {
+  flex: 1;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  justify-content: space-between;
+  gap: 10px;
-  gap: 20px;
 }
 
 .input-section {
@@ -39,6 +42,9 @@
 
 .output-section {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .handle-container {
@@ -137,3 +143,79 @@
   font-size: 12px;
   margin-top: 5px;
 }
+
+.object-input {
+  margin-left: 10px;
+  border-left: 1px solid #555;
+  padding-left: 10px;
+}
+
+.nested-input {
+  margin-top: 5px;
+}
+
+.key-value-input {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.key-value-input input {
+  flex-grow: 1;
+}
+
+.node-running {
+  animation: runningAnimation 1s infinite alternate;
+}
+
+@keyframes runningAnimation {
+  0% {
+    background-color: #444;
+  }
+  100% {
+    background-color: #666;
+  }
+}
+
+.node-completed {
+  animation: completedAnimation 2s;
+  background-color: #4caf50;
+}
+
+@keyframes completedAnimation {
+  0% {
+    background-color: #333;
+  }
+  100% {
+    background-color: #4caf50;
+  }
+}
+
+.node-queued {
+  animation: queuedAnimation 2s infinite;
+  background-color: #ffc107;
+}
+
+@keyframes queuedAnimation {
+  0% {
+    background-color: #444;
+  }
+  100% {
+    background-color: #ffc107;
+  }
+}
+
+.node-failed {
+  animation: failedAnimation 2s;
+  background-color: #f44336;
+}
+
+@keyframes failedAnimation {
+  0% {
+    background-color: #333;
+  }
+  100% {
+    background-color: #f44336;
+  }
+}

rnd/autogpt_builder/src/components/flow.css

@@ -148,3 +148,177 @@ input::placeholder, textarea::placeholder {
 .flow-controls.open {
   transform: translateX(350px);
 }
+
+.custom-node {
+  padding: 20px;
+  border: 2px solid #fff;
+  border-radius: 20px;
+  background: #333;
+  color: #e0e0e0;
+  width: 250px;
+  transition: all 0.3s ease;
+}
+
+.custom-node.node-running {
+  border-color: yellow;
+  animation: running-animation 1s infinite;
+}
+
+.custom-node.node-completed {
+  border-color: green;
+}
+
+.custom-node.node-queued {
+  border-color: orange;
+}
+
+.custom-node.node-failed {
+  border-color: red;
+}
+
+@keyframes running-animation {
+  0% { border-color: yellow; }
+  50% { border-color: #333; }
+  100% { border-color: yellow; }
+}
+
+.node-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.node-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.toggle-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: #e0e0e0;
+}
+
+.node-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.input-section {
+  flex: 1;
+}
+
+.output-section {
+  flex: 1;
+}
+
+.handle-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 5px;
+}
+
+.handle-label {
+  color: #e0e0e0;
+  margin-left: 10px;
+}
+
+.input-container {
+  margin-bottom: 5px;
+}
+
+.clickable-input {
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #555;
+  background: #444;
+  color: #e0e0e0;
+  cursor: pointer;
+}
+
+.select-input {
+  width: 100%;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #555;
+  background: #444;
+  color: #e0e0e0;
+}
+
+.radio-label {
+  display: block;
+  margin: 5px 0;
+  color: #e0e0e0;
+}
+
+.number-input {
+  width: 100%;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #555;
+  background: #444;
+  color: #e0e0e0;
+}
+
+.array-item-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.array-item-input {
+  flex-grow: 1;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #555;
+  background: #444;
+  color: #e0e0e0;
+}
+
+.array-item-remove {
+  background: #d9534f;
+  border: none;
+  color: white;
+  cursor: pointer;
+  margin-left: 5px;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+
+.array-item-add {
+  background: #5bc0de;
+  border: none;
+  color: white;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin-top: 5px;
+}
+
+.node-properties {
+  margin-top: 20px;
+  background: #444;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.error-message {
+  color: #d9534f;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.object-input {
+  margin-left: 10px;
+  border-left: 1px solid #555;
+  padding-left: 10px;
+}
+
+.nested-input {
+  margin-top: 5px;
+}

rnd/autogpt_builder/webpack.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  devServer: {
+    proxy: {
+      '/graphs': 'http://localhost:8000'
+    }
+  }
+};

rnd/autogpt_server/autogpt_server/blocks/reddit.py

@@ -3,6 +3,7 @@
 from datetime import datetime, timedelta
 
 import praw
+from typing import Any
 from pydantic import BaseModel, Field
 
 from autogpt_server.data.block import Block, BlockOutput, BlockSchema
@@ -87,8 +88,9 @@ class RedditGetPostsBlock(Block):
 class RedditPostCommentBlock(Block):
     class Input(BlockSchema):
         creds: RedditCredentials = Field(description="Reddit credentials")
-        post_id: str = Field(description="Reddit post ID")
+        data: Any = Field(description="Reddit post")
-        comment: str = Field(description="Comment text")
+        # post_id: str = Field(description="Reddit post ID")
+        # comment: str = Field(description="Comment text")
 
     class Output(BlockSchema):
         comment_id: str
@@ -102,6 +104,6 @@ class RedditPostCommentBlock(Block):
 
     def run(self, input_data: Input) -> BlockOutput:
         client = get_praw(input_data.creds)
-        submission = client.submission(id=input_data.post_id)
+        submission = client.submission(id=input_data.data["post_id"])
-        comment = submission.reply(input_data.comment)
+        comment = submission.reply(input_data.data["comment"])
         yield "comment_id", comment.id

rnd/autogpt_server/autogpt_server/blocks/text.py

@@ -1,4 +1,5 @@
 import re
+import json
 
 from typing import Any
 from pydantic import Field
@@ -7,7 +8,7 @@ from autogpt_server.data.block import Block, BlockOutput, BlockSchema
 
 class TextMatcherBlock(Block):
     class Input(BlockSchema):
-        text: str = Field(description="Text to match")
+        text: Any = Field(description="Text to match")
         match: str = Field(description="Pattern (Regex) to match")
         data: Any = Field(description="Data to be forwarded to output")
         case_sensitive: bool = Field(description="Case sensitive match", default=True)
@@ -26,7 +27,7 @@ class TextMatcherBlock(Block):
     def run(self, input_data: Input) -> BlockOutput:
         output = input_data.data or input_data.text
         case = 0 if input_data.case_sensitive else re.IGNORECASE
-        if re.search(input_data.match, input_data.text, case):
+        if re.search(input_data.match, json.dumps(input_data.text), case):
             yield "positive", output
         else:
             yield "negative", output

rnd/autogpt_server/autogpt_server/server/server.py

@@ -6,6 +6,7 @@ import uvicorn
 
 from contextlib import asynccontextmanager
 from fastapi import APIRouter, Body, FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
 
 from autogpt_server.data import db, execution, block
 from autogpt_server.data.graph import (
@@ -43,6 +44,14 @@ class AgentServer(AppProcess):
             lifespan=self.lifespan,
         )
 
+        app.add_middleware(
+            CORSMiddleware,
+            allow_origins=["*"],  # Allows all origins
+            allow_credentials=True,
+            allow_methods=["*"],  # Allows all methods
+            allow_headers=["*"],  # Allows all headers
+        )
+
         # Define the API routes
         router = APIRouter()
         router.add_api_route(

rnd/autogpt_server/setup.py

@@ -3,7 +3,7 @@ from pathlib import Path
 from pkgutil import iter_modules
 from typing import Union
 
-from cx_Freeze import Executable, setup # type: ignore
+from cx_Freeze import Executable, setup  # type: ignore
 
 packages = [
     m.name
@@ -57,7 +57,6 @@ def txt_to_rtf(input_file: Union[str, Path], output_file: Union[str, Path]) -> N
 license_file = "LICENSE.rtf"
 txt_to_rtf("../../LICENSE", license_file)
 
-
 setup(
     name="AutoGPT Server",
     url="https://agpt.co",

rnd/autogpt_server/test/usecases/reddit_marketing.py

@@ -57,7 +57,7 @@ Make sure to only comment on a relevant post.
         "expected_format": {
             "post_id": "str, the reddit post id",
             "is_relevant": "bool, whether the post is relevant for marketing",
-            "marketing_text": "str, marketing text, this is empty on irrelevant posts",
+            "comment": "str, marketing text, this is empty on irrelevant posts",
         },
     }
     text_matcher_input = {"match": "true", "case_sensitive": False}