Merge branch 'master' into swiftyos/open-1601-paginated-listing-of-st…

…ore-agents
Significant-Gravitas · Aug 2, 2024 · 03c3ade · 03c3ade
2 parents d4beba2 + 3c2c3e5
commit 03c3ade
Show file tree

Hide file tree

Showing 13 changed files with 836 additions and 395 deletions.
diff --git a/rnd/autogpt_builder/package.json b/rnd/autogpt_builder/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",

diff --git a/rnd/autogpt_builder/src/components/CustomNode.tsx b/rnd/autogpt_builder/src/components/CustomNode.tsx
@@ -5,13 +5,12 @@ import './customnode.css';
 import InputModalComponent from './InputModalComponent';
 import OutputModalComponent from './OutputModalComponent';
 import { BlockIORootSchema, NodeExecutionResult } from '@/lib/autogpt-server-api/types';
-import { BlockSchema } from '@/lib/types';
 import { beautifyString, setNestedProperty } from '@/lib/utils';
 import { Switch } from "@/components/ui/switch"
 import NodeHandle from './NodeHandle';
-import NodeInputField from './NodeInputField';
 import { Copy, Trash2 } from 'lucide-react';
 import { history } from './history';
+import { NodeGenericInputField } from './node-input';
 
 export type CustomNodeData = {
   blockType: string;
@@ -22,8 +21,8 @@ export type CustomNodeData = {
   setHardcodedValues: (values: { [key: string]: any }) => void;
   connections: Array<{ source: string; sourceHandle: string; target: string; targetHandle: string }>;
   isOutputOpen: boolean;
-  status?: string;
-  output_data?: any;
+  status?: NodeExecutionResult["status"];
+  output_data?: NodeExecutionResult["output_data"];
   block_id: string;
   backend_id?: string;
   errors?: { [key: string]: string | null };
@@ -119,7 +118,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
 
   const getValue = (key: string) => {
     const keys = key.split('.');
-    return keys.reduce((acc, k) => (acc && acc[k] !== undefined) ? acc[k] : '', data.hardcodedValues);
+    return keys.reduce((acc, k) => acc && acc[k] ? acc[k] : undefined, data.hardcodedValues);
   };
 
   const isHandleConnected = (key: string) => {
@@ -248,28 +247,36 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
           )}
         </div>
       </div>
-      <div className="node-content">
+      <div className="flex justify-between items-start gap-2">
         <div>
           {data.inputSchema &&
-            Object.entries(data.inputSchema.properties).map(([key, schema]) => {
-              const isRequired = data.inputSchema.required?.includes(key);
+            Object.entries(data.inputSchema.properties).map(([propKey, propSchema]) => {
+              const isRequired = data.inputSchema.required?.includes(propKey);
               return (isRequired || isAdvancedOpen) && (
-                <div key={key} onMouseOver={() => { }}>
-                  <NodeHandle keyName={key} isConnected={isHandleConnected(key)} isRequired={isRequired} schema={schema} side="left" />
-                  {!isHandleConnected(key) &&
-                    <NodeInputField
-                      keyName={key}
-                      schema={schema}
-                      value={getValue(key)}
-                      handleInputClick={handleInputClick}
+                <div key={propKey} onMouseOver={() => { }}>
+                  <NodeHandle
+                    keyName={propKey}
+                    isConnected={isHandleConnected(propKey)}
+                    schema={propSchema}
+                    side="left"
+                  />
+                  {!isHandleConnected(propKey) &&
+                    <NodeGenericInputField
+                      className="mt-1 mb-2"
+                      propKey={propKey}
+                      propSchema={propSchema}
+                      currentValue={getValue(propKey)}
                       handleInputChange={handleInputChange}
-                      errors={data.errors?.[key]}
-                    />}
+                      handleInputClick={handleInputClick}
+                      errors={data.errors ?? {}}
+                      displayName={propSchema.title || beautifyString(propKey)}
+                    />
+                  }
                 </div>
               );
             })}
         </div>
-        <div>
+        <div className="flex-none">
           {data.outputSchema && generateOutputHandles(data.outputSchema)}
         </div>
       </div>
@@ -296,11 +303,11 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
         </div>
       )}
       <div className="flex items-center mt-2.5">
-        <Switch onCheckedChange={toggleOutput} className='custom-switch' />
+        <Switch className='pl-[2px]' onCheckedChange={toggleOutput} />
         <span className='m-1 mr-4'>Output</span>
         {hasOptionalFields() && (
           <>
-            <Switch onCheckedChange={toggleAdvancedSettings} className='custom-switch' />
+            <Switch className='pl-[2px]' onCheckedChange={toggleAdvancedSettings} />
             <span className='m-1'>Advanced</span>
           </>
         )}

diff --git a/rnd/autogpt_builder/src/components/Flow.tsx b/rnd/autogpt_builder/src/components/Flow.tsx
@@ -15,7 +15,7 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import CustomNode, { CustomNodeData } from './CustomNode';
 import './flow.css';
-import AutoGPTServerAPI, { Block, BlockIOSchema, Graph, NodeExecutionResult, ObjectSchema } from '@/lib/autogpt-server-api';
+import AutoGPTServerAPI, { Block, BlockIOSubSchema, Graph, NodeExecutionResult } from '@/lib/autogpt-server-api';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { ChevronRight, ChevronLeft } from "lucide-react";
@@ -392,7 +392,6 @@ const FlowEditor: React.FC<{
         type: 'custom',
         position: { x: node.metadata.position.x, y: node.metadata.position.y },
         data: {
-          setIsAnyModalOpen: setIsAnyModalOpen,
           block_id: block.id,
           blockType: block.name,
           title: `${block.name} ${node.id}`,
@@ -453,7 +452,7 @@ const FlowEditor: React.FC<{
     }
 
     const getNestedData = (
-      schema: BlockIOSchema, values: { [key: string]: any }
+      schema: BlockIOSubSchema, values: { [key: string]: any }
     ): { [key: string]: any } => {
       let inputData: { [key: string]: any } = {};
 
@@ -602,7 +601,7 @@ const FlowEditor: React.FC<{
         // Populate errors if validation fails
         validate.errors?.forEach((error) => {
           // Skip error if there's an edge connected
-          const path = error.instancePath || error.schemaPath;
+          const path = 'dataPath' in error ? error.dataPath as string : error.instancePath;
           const handle = path.split(/[\/.]/)[0];
           if (node.data.connections.some(conn => conn.target === node.id || conn.targetHandle === handle)) {
             return;

diff --git a/rnd/autogpt_builder/src/components/NodeHandle.tsx b/rnd/autogpt_builder/src/components/NodeHandle.tsx
@@ -1,12 +1,12 @@
-import { BlockIOSchema } from "@/lib/autogpt-server-api/types";
+import { BlockIOSubSchema } from "@/lib/autogpt-server-api/types";
 import { beautifyString, getTypeBgColor, getTypeTextColor } from "@/lib/utils";
 import { FC } from "react";
 import { Handle, Position } from "reactflow";
 import SchemaTooltip from "./SchemaTooltip";
 
 type HandleProps = {
   keyName: string,
-  schema: BlockIOSchema,
+  schema: BlockIOSubSchema,
   isConnected: boolean,
   isRequired?: boolean,
   side: 'left' | 'right'
@@ -23,19 +23,19 @@ const NodeHandle: FC<HandleProps> = ({ keyName, schema, isConnected, isRequired,
     null: 'null',
   };
 
-  const typeClass = `text-sm ${getTypeTextColor(schema.type)} ${side === 'left' ? 'text-left' : 'text-right'}`;
+  const typeClass = `text-sm ${getTypeTextColor(schema.type || 'any')} ${side === 'left' ? 'text-left' : 'text-right'}`;
 
   const label = (
     <div className="flex flex-col flex-grow">
       <span className="text-m text-gray-900 -mb-1 green">
         {schema.title || beautifyString(keyName)}{isRequired ? '*' : ''}
       </span>
-      <span className={typeClass}>{typeName[schema.type]}</span>
+      <span className={typeClass}>{typeName[schema.type] || 'any'}</span>
     </div>
   );
 
   const dot = (
-    <div className={`w-4 h-4 m-1 ${isConnected ? getTypeBgColor(schema.type) : 'bg-gray-600'} rounded-full transition-colors duration-100 group-hover:bg-gray-300`} />
+    <div className={`w-4 h-4 m-1 ${isConnected ? getTypeBgColor(schema.type || 'any') : 'bg-gray-600'} rounded-full transition-colors duration-100 group-hover:bg-gray-300`} />
   );
 
   if (side === 'left') {
@@ -45,7 +45,7 @@ const NodeHandle: FC<HandleProps> = ({ keyName, schema, isConnected, isRequired,
           type="target"
           position={Position.Left}
           id={keyName}
-          className='group -ml-[29px]'
+          className='group -ml-[26px]'
         >
           <div className="pointer-events-none flex items-center">
             {dot}
@@ -62,7 +62,7 @@ const NodeHandle: FC<HandleProps> = ({ keyName, schema, isConnected, isRequired,
           type="source"
           position={Position.Right}
           id={keyName}
-          className='group -mr-[29px]'
+          className='group -mr-[26px]'
         >
           <div className="pointer-events-none flex items-center">
             {label}