Merge branch 'dev' into hackathon-copilot-backend

autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { customValidator } from "./utils/custom-validator";
 import Form from "./registry";
 import { ExtendedFormContextType } from "./types";
+import { generateUiSchemaForCustomFields } from "./utils/generate-ui-schema";
 
 type FormRendererProps = {
   jsonSchema: RJSFSchema;
@@ -24,6 +25,11 @@ export const FormRenderer = ({
     return preprocessInputSchema(jsonSchema);
   }, [jsonSchema]);
 
+  // Merge custom field ui:field settings with existing uiSchema
+  const mergedUiSchema = useMemo(() => {
+    return generateUiSchemaForCustomFields(preprocessedSchema, uiSchema);
+  }, [preprocessedSchema, uiSchema]);
+
   return (
     <div className={"mb-6 mt-4"}>
       <Form
@@ -33,7 +39,7 @@ export const FormRenderer = ({
         schema={preprocessedSchema}
         validator={customValidator}
         onChange={handleChange}
-        uiSchema={uiSchema}
+        uiSchema={mergedUiSchema}
         formData={initialValues}
         liveValidate={false}
       />

autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/generate-ui-schema.ts

@@ -0,0 +1,71 @@
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import { findCustomFieldId } from "../custom/custom-registry";
+
+/**
+ * Generates uiSchema with ui:field settings for custom fields based on schema matchers.
+ * This is the standard RJSF way to route fields to custom components.
+ */
+export function generateUiSchemaForCustomFields(
+  schema: RJSFSchema,
+  existingUiSchema: UiSchema = {},
+): UiSchema {
+  const uiSchema: UiSchema = { ...existingUiSchema };
+
+  if (schema.properties) {
+    for (const [key, propSchema] of Object.entries(schema.properties)) {
+      if (propSchema && typeof propSchema === "object") {
+        const customFieldId = findCustomFieldId(propSchema);
+
+        if (customFieldId) {
+          uiSchema[key] = {
+            ...(uiSchema[key] as object),
+            "ui:field": customFieldId,
+          };
+        }
+
+        if (
+          propSchema.type === "object" &&
+          propSchema.properties &&
+          typeof propSchema.properties === "object"
+        ) {
+          const nestedUiSchema = generateUiSchemaForCustomFields(
+            propSchema as RJSFSchema,
+            (uiSchema[key] as UiSchema) || {},
+          );
+          uiSchema[key] = {
+            ...(uiSchema[key] as object),
+            ...nestedUiSchema,
+          };
+        }
+
+        if (propSchema.type === "array" && propSchema.items) {
+          const itemsSchema = propSchema.items as RJSFSchema;
+          if (itemsSchema && typeof itemsSchema === "object") {
+            const itemsCustomFieldId = findCustomFieldId(itemsSchema);
+            if (itemsCustomFieldId) {
+              uiSchema[key] = {
+                ...(uiSchema[key] as object),
+                items: {
+                  "ui:field": itemsCustomFieldId,
+                },
+              };
+            } else if (itemsSchema.properties) {
+              const itemsUiSchema = generateUiSchemaForCustomFields(
+                itemsSchema,
+                ((uiSchema[key] as UiSchema)?.items as UiSchema) || {},
+              );
+              if (Object.keys(itemsUiSchema).length > 0) {
+                uiSchema[key] = {
+                  ...(uiSchema[key] as object),
+                  items: itemsUiSchema,
+                };
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return uiSchema;
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/input-schema-pre-processor.ts

@@ -1,5 +1,4 @@
 import { RJSFSchema } from "@rjsf/utils";
-import { findCustomFieldId } from "../custom/custom-registry";
 
 /**
  * Pre-processes the input schema to ensure all properties have a type defined.
@@ -21,12 +20,6 @@ export function preprocessInputSchema(schema: RJSFSchema): RJSFSchema {
       if (property && typeof property === "object") {
         const processedProperty = { ...property };
 
-        // adding $id for custom field
-        const customFieldId = findCustomFieldId(processedProperty);
-        if (customFieldId) {
-          processedProperty.$id = customFieldId;
-        }
-
         // Only add type if no type is defined AND no anyOf/oneOf/allOf is present
         if (
           !processedProperty.type &&