added warning message for running with missing text input

this is because if a node is missing a hardcoded input the backend has an error, this is to prevent that

rnd/autogpt_builder/src/components/Flow.tsx

@@ -38,6 +38,19 @@ interface ExecData {
   output_data: any;
 }
 
+const FlashMessage: React.FC<{ message: string; onClose: () => void }> = ({ message, onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 3000); // Flash message disappears after 3 seconds
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="flash-message">
+      {message}
+    </div>
+  );
+};
+
 const Flow: React.FC = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
@@ -54,6 +67,7 @@ const Flow: React.FC = () => {
   const [availableNodes, setAvailableNodes] = useState<AvailableNode[]>([]);
   const [loadingStatus, setLoadingStatus] = useState<'loading' | 'failed' | 'loaded'>('loading');
   const [agentId, setAgentId] = useState<string | null>(null);
+  const [flashMessage, setFlashMessage] = useState<string | null>(null);
 
   const apiUrl = 'http://localhost:8000'
 
@@ -252,7 +266,35 @@ const Flow: React.FC = () => {
     );
   };
 
+  const validateNodeInputs = (nodes: Node[], edges: Edge[]): boolean => {
+    for (const node of nodes) {
+      const nodeSchema = availableNodes.find(n => n.id === node.data.block_id);
+      if (nodeSchema && nodeSchema.inputSchema) {
+        const inputProperties = nodeSchema.inputSchema.properties;
+        for (const prop of Object.keys(inputProperties)) {
+          const inputEdges = edges.filter(edge => edge.target === node.id && edge.targetHandle === prop);
+          if (inputEdges.length === 0 && !node.data.hardcodedValues[prop]) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  };
+
   const runAgent = async () => {
+    if (nodes.length === 0) {
+      setFlashMessage("Please add nodes before pressing run");
+      setTimeout(() => setFlashMessage(null), 3000); // Ensure the flash message disappears after 3 seconds
+      return;
+    }
+
+    if (!validateNodeInputs(nodes, edges)) {
+      setFlashMessage("Please make sure you have added values to all inputs");
+      setTimeout(() => setFlashMessage(null), 3000); // Ensure the flash message disappears after 3 seconds
+      return;
+    }
+
     try {
       const formattedNodes = nodes.map(node => {
         const inputDefault = prepareNodeInputData(node, nodes, edges);
@@ -421,6 +463,7 @@ const Flow: React.FC = () => {
 
   return (
     <div className="flow-container">
+      {flashMessage && <FlashMessage message={flashMessage} onClose={() => setFlashMessage(null)} />}
       <div className={`flow-controls ${isSidebarOpen ? 'open' : ''}`}>
         <button className="nodes-button" onClick={toggleSidebar}>
           Nodes
@@ -584,4 +627,4 @@ const sidebarButtonStyle = {
   cursor: 'pointer',
 };
 
-export default Flow;
+export default Flow;

rnd/autogpt_builder/src/components/flow.css

@@ -148,3 +148,16 @@ input::placeholder, textarea::placeholder {
 .flow-controls.open {
   transform: translateX(350px);
 }
+
+.flash-message {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #ff4444;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-size: 16px;
+  z-index: 1000;
+}