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.

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

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}

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

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,
   },
   {

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;
+};