feat(frontend): Add field extraction handle for block with object output

Significant-Gravitas · Dec 6, 2024 · c74b9d3 · c74b9d3
1 parent ea6c9a1
commit c74b9d3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -13,6 +13,7 @@ import InputModalComponent from "./InputModalComponent";
 import OutputModalComponent from "./OutputModalComponent";
 import {
   BlockIORootSchema,
+  BlockIOSubSchema,
   BlockIOStringSubSchema,
   Category,
   NodeExecutionResult,
@@ -167,17 +168,38 @@ export function CustomNode({
       nodeType === BlockUIType.NOTE
     )
       return null;
-    const keys = Object.keys(schema.properties);
-    return keys.map((key) => (
-      <div key={key}>
-        <NodeHandle
-          keyName={key}
-          isConnected={isOutputHandleConnected(key)}
-          schema={schema.properties[key]}
-          side="right"
-        />
-      </div>
-    ));
+
+    const renderHandles = (
+      propSchema: { [key: string]: BlockIOSubSchema },
+      keyPrefix = "",
+      titlePrefix = "",
+    ) => {
+      return Object.keys(propSchema).map((propKey) => {
+        const fieldSchema = propSchema[propKey];
+        const fieldTitle =
+          titlePrefix + (fieldSchema.title || beautifyString(propKey));
+
+        return (
+          <div key={propKey}>
+            <NodeHandle
+              title={fieldTitle}
+              keyName={`${keyPrefix}${propKey}`}
+              isConnected={isOutputHandleConnected(propKey)}
+              schema={fieldSchema}
+              side="right"
+            />
+            {"properties" in fieldSchema &&
+              renderHandles(
+                fieldSchema.properties,
+                `${keyPrefix}${propKey}_#_`,
+                `${fieldTitle}.`,
+              )}
+          </div>
+        );
+      });
+    };
+
+    return renderHandles(schema.properties);
   };
 
   const generateInputHandles = (

diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -10,6 +10,7 @@ type HandleProps = {
   isConnected: boolean;
   isRequired?: boolean;
   side: "left" | "right";
+  title?: string;
 };
 
 const NodeHandle: FC<HandleProps> = ({
@@ -18,6 +19,7 @@ const NodeHandle: FC<HandleProps> = ({
   isConnected,
   isRequired,
   side,
+  title,
 }) => {
   const typeName: Record<string, string> = {
     string: "text",
@@ -34,7 +36,7 @@ const NodeHandle: FC<HandleProps> = ({
   const label = (
     <div className="flex flex-grow flex-row">
       <span className="text-m green flex items-end pr-2 text-gray-900">
-        {schema.title || beautifyString(keyName.toLowerCase())}
+        {title || schema.title || beautifyString(keyName.toLowerCase())}
         {isRequired ? "*" : ""}
       </span>
       <span className={`${typeClass} flex items-end`}>