From 0116e0686ef7662c70ebaab82d48cba623387786 Mon Sep 17 00:00:00 2001
From: abhi1992002 <abhimanyu1992002@gmail.com>
Date: Fri, 16 Jan 2026 12:47:26 +0530
Subject: [PATCH] feat(frontend): enhance Google Drive Picker integration and
 improve UI components

- Added a new utility function to identify Google Drive file objects for better schema handling.
- Updated the GoogleDrivePickerField component to conditionally render based on the UI type.
- Refactored the matcher for Google Drive Picker schema to utilize the new utility function.
- Enhanced the ArrayFieldTemplate component by adding a gap between items for improved layout.
- Introduced a console log for debugging preprocessed schema in FormRenderer for development purposes.
---
 .../renderers/InputRenderer/FormRenderer.tsx  |  2 ++
 .../base/array/ArrayFieldTemplate.tsx         |  2 +-
 .../GoogleDrivePickerField.tsx                | 13 ++++++-
 .../InputRenderer/custom/custom-registry.ts   | 12 +++----
 .../InputRenderer/utils/schema-utils.ts       | 35 +++++++++++++++++++
 5 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx b/autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx
index c3a20d8cd2..fc388cc343 100644
--- a/autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx
+++ b/autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx
@@ -30,6 +30,8 @@ export const FormRenderer = ({
     return generateUiSchemaForCustomFields(preprocessedSchema, uiSchema);
   }, [preprocessedSchema, uiSchema]);
 
+  console.log("preprocessedSchema", preprocessedSchema);
+
   return (
     <div className={"mb-6 mt-4"} data-tutorial-id="input-handles">
       <Form
diff --git a/autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArrayFieldTemplate.tsx b/autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArrayFieldTemplate.tsx
index c729e574e0..2ece545339 100644
--- a/autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArrayFieldTemplate.tsx
+++ b/autogpt_platform/frontend/src/components/renderers/InputRenderer/base/array/ArrayFieldTemplate.tsx
@@ -63,7 +63,7 @@ export default function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
       <div className="m-0 flex p-0">
         <div className="m-0 w-full space-y-4 p-0">
           {!fromAnyOf && (
-            <div className="flex items-center">
+            <div className="flex items-center gap-2">
               <ArrayFieldTitleTemplate
                 fieldPathId={fieldPathId}
                 title={uiOptions.title || title}
diff --git a/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/GoogleDrivePickerField/GoogleDrivePickerField.tsx b/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/GoogleDrivePickerField/GoogleDrivePickerField.tsx
index 51c5806ae5..dff6274189 100644
--- a/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/GoogleDrivePickerField/GoogleDrivePickerField.tsx
+++ b/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/GoogleDrivePickerField/GoogleDrivePickerField.tsx
@@ -1,12 +1,23 @@
+import { BlockUIType } from "@/app/(platform)/build/components/types";
 import { GoogleDrivePickerInput } from "@/components/contextual/GoogleDrivePicker/GoogleDrivePickerInput";
 import { GoogleDrivePickerConfig } from "@/lib/autogpt-server-api";
 import { FieldProps, getUiOptions } from "@rjsf/utils";
 
 export const GoogleDrivePickerField = (props: FieldProps) => {
-  const { schema, uiSchema, onChange, fieldPathId, formData } = props;
+  const { schema, uiSchema, onChange, fieldPathId, formData, registry } = props;
   const uiOptions = getUiOptions(uiSchema);
   const config: GoogleDrivePickerConfig = schema.google_drive_picker_config;
 
+  const uiType = registry.formContext?.uiType;
+
+  if (uiType === BlockUIType.INPUT) {
+    return (
+      <div className="rounded-3xl border border-gray-200 p-2 pl-4 text-xs text-gray-500 hover:cursor-not-allowed">
+        Select files when you run the graph
+      </div>
+    );
+  }
+
   return (
     <div>
       <GoogleDrivePickerInput
diff --git a/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts b/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts
index 30d2c27a5a..257a98ad93 100644
--- a/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts
+++ b/autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts
@@ -3,7 +3,10 @@ import { CredentialsField } from "./CredentialField/CredentialField";
 import { GoogleDrivePickerField } from "./GoogleDrivePickerField/GoogleDrivePickerField";
 import { JsonTextField } from "./JsonTextField/JsonTextField";
 import { MultiSelectField } from "./MultiSelectField/MultiSelectField";
-import { isMultiSelectSchema } from "../utils/schema-utils";
+import {
+  isGoogleDrivePickerSchema,
+  isMultiSelectSchema,
+} from "../utils/schema-utils";
 import { TableField } from "./TableField/TableField";
 
 export interface CustomFieldDefinition {
@@ -29,12 +32,7 @@ export const CUSTOM_FIELDS: CustomFieldDefinition[] = [
   },
   {
     id: "custom/google_drive_picker_field",
-    matcher: (schema: any) => {
-      return (
-        "google_drive_picker_config" in schema ||
-        ("format" in schema && schema.format === "google-drive-picker")
-      );
-    },
+    matcher: isGoogleDrivePickerSchema,
     component: GoogleDrivePickerField,
   },
   {
diff --git a/autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/schema-utils.ts b/autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/schema-utils.ts
index fecf2d77d1..c7dd9680d7 100644
--- a/autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/schema-utils.ts
+++ b/autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/schema-utils.ts
@@ -55,3 +55,38 @@ export function isMultiSelectSchema(schema: RJSFSchema | undefined): boolean {
     )
   );
 }
+
+const isGoogleDriveFileObject = (obj: RJSFSchema): boolean => {
+  if (obj.type !== "object" || !obj.properties) {
+    return false;
+  }
+  const props = obj.properties;
+  const hasId = "id" in props;
+  const hasMimeType = "mimeType" in props || "mime_type" in props;
+  const hasIconUrl = "iconUrl" in props || "icon_url" in props;
+  const hasIsFolder = "isFolder" in props || "is_folder" in props;
+  return hasId && hasMimeType && (hasIconUrl || hasIsFolder);
+};
+
+export const isGoogleDrivePickerSchema = (
+  schema: RJSFSchema | undefined,
+): boolean => {
+  if (!schema) {
+    return false;
+  }
+
+  // highest priority
+  if (
+    "google_drive_picker_config" in schema ||
+    ("format" in schema && schema.format === "google-drive-picker")
+  ) {
+    return true;
+  }
+
+  // In the Input type block, we do not add the format for the GoogleFile field, so we need to include this extra check.
+  if (isGoogleDriveFileObject(schema)) {
+    return true;
+  }
+
+  return false;
+};