feat(frontend): add MultiSelectField component and improve node title cursor styling (#11744)

## Changes 🏗️

- Added a new `MultiSelectField` component for handling multiple boolean
selections in a dropdown format
- Implemented `useMultiSelectField` hook to manage the state and logic
of the multi-select component
- Added support for custom fields in `AnyOfField` by checking if the
option schema matches a custom field
- Added `isMultiSelectSchema` utility function to detect schemas
suitable for the multi-select component
- Added hover cursor styling to node headers to indicate text
editability

![Screenshot 2026-01-10 at
11.15.12 AM.png](https://app.graphite.com/user-attachments/assets/8254497b-604f-4ccc-a40b-eb8994c073b4.png)

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Verified that multi-select fields render correctly in the UI
  - [x] Confirmed that selecting multiple options works as expected
  - [x] Tested that the node header shows the text cursor on hover
- [x] Verified that AnyOf fields correctly use custom field renderers
when applicable

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a multi-select field allowing selection of multiple options with
improved selection UI.
* AnyOf options can now resolve and render custom field types, improving
form composition when schemas map to custom controls.

* **Style**
  * Tooltip header cursor updated for clearer hover feedback.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx

@@ -68,7 +68,10 @@ export const NodeHeader = ({ data, nodeId }: Props) => {
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <div>
-                      <Text variant="large-semibold" className="line-clamp-1">
+                      <Text
+                        variant="large-semibold"
+                        className="line-clamp-1 hover:cursor-text"
+                      >
                         {beautifyString(title).replace("Block", "").trim()}
                       </Text>
                     </div>

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/AnyOfField.tsx

@@ -5,6 +5,7 @@ import { useAnyOfField } from "./useAnyOfField";
 import { getHandleId, updateUiOption } from "../../helpers";
 import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
 import { ANY_OF_FLAG } from "../../constants";
+import { findCustomFieldId } from "../../registry";
 
 export const AnyOfField = (props: FieldProps) => {
   const { registry, schema } = props;
@@ -40,12 +41,21 @@ export const AnyOfField = (props: FieldProps) => {
 
   const isHandleConnected = isInputConnected(nodeId, handleId);
 
+  // Now anyOf can render - custom fields if the option schema matches a custom field
+  const optionCustomFieldId = optionSchema
+    ? findCustomFieldId(optionSchema)
+    : null;
+
+  const optionUiSchema = optionCustomFieldId
+    ? { ...updatedUiSchema, "ui:field": optionCustomFieldId }
+    : updatedUiSchema;
+
   const optionsSchemaField =
     (optionSchema && optionSchema.type !== "null" && (
       <_SchemaField
         {...props}
         schema={optionSchema}
-        uiSchema={updatedUiSchema}
+        uiSchema={optionUiSchema}
       />
     )) ||
     null;

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/MultiSelectField/MultiSelectField.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { FieldProps, getUiOptions } from "@rjsf/utils";
+import { BlockIOObjectSubSchema } from "@/lib/autogpt-server-api/types";
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from "@/components/__legacy__/ui/multiselect";
+import { cn } from "@/lib/utils";
+import { useMultiSelectField } from "./useMultiSelectField";
+
+export const MultiSelectField = (props: FieldProps) => {
+  const { schema, formData, onChange, fieldPathId } = props;
+  const uiOptions = getUiOptions(props.uiSchema);
+
+  const { optionSchema, options, selection, createChangeHandler } =
+    useMultiSelectField({
+      schema: schema as BlockIOObjectSubSchema,
+      formData,
+    });
+
+  const handleValuesChange = createChangeHandler(onChange, fieldPathId);
+
+  const displayName = schema.title || "options";
+
+  return (
+    <div className={cn("flex flex-col", uiOptions.className)}>
+      <MultiSelector
+        className="nodrag"
+        values={selection}
+        onValuesChange={handleValuesChange}
+      >
+        <MultiSelectorTrigger className="rounded-3xl border border-zinc-200 bg-white px-2 shadow-none">
+          <MultiSelectorInput
+            placeholder={
+              (schema as any).placeholder ?? `Select ${displayName}...`
+            }
+          />
+        </MultiSelectorTrigger>
+        <MultiSelectorContent className="nowheel">
+          <MultiSelectorList>
+            {options
+              .map((key) => ({ ...optionSchema[key], key }))
+              .map(({ key, title, description }) => (
+                <MultiSelectorItem key={key} value={key} title={description}>
+                  {title ?? key}
+                </MultiSelectorItem>
+              ))}
+          </MultiSelectorList>
+        </MultiSelectorContent>
+      </MultiSelector>
+    </div>
+  );
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/MultiSelectField/index.ts

@@ -0,0 +1 @@
+export { MultiSelectField } from "./MultiSelectField";

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/MultiSelectField/useMultiSelectField.ts

@@ -0,0 +1,65 @@
+import { FieldProps } from "@rjsf/utils";
+import { BlockIOObjectSubSchema } from "@/lib/autogpt-server-api/types";
+
+type FormData = Record<string, boolean> | null | undefined;
+
+interface UseMultiSelectFieldOptions {
+  schema: BlockIOObjectSubSchema;
+  formData: FormData;
+}
+
+export function useMultiSelectField({
+  schema,
+  formData,
+}: UseMultiSelectFieldOptions) {
+  const getOptionSchema = (): Record<string, BlockIOObjectSubSchema> => {
+    if (schema.properties) {
+      return schema.properties as Record<string, BlockIOObjectSubSchema>;
+    }
+    if (
+      "anyOf" in schema &&
+      Array.isArray(schema.anyOf) &&
+      schema.anyOf.length > 0 &&
+      "properties" in schema.anyOf[0]
+    ) {
+      return (schema.anyOf[0] as BlockIOObjectSubSchema).properties as Record<
+        string,
+        BlockIOObjectSubSchema
+      >;
+    }
+    return {};
+  };
+
+  const optionSchema = getOptionSchema();
+  const options = Object.keys(optionSchema);
+
+  const getSelection = (): string[] => {
+    if (!formData || typeof formData !== "object") {
+      return [];
+    }
+    return Object.entries(formData)
+      .filter(([_, value]) => value === true)
+      .map(([key]) => key);
+  };
+
+  const selection = getSelection();
+
+  const createChangeHandler =
+    (
+      onChange: FieldProps["onChange"],
+      fieldPathId: FieldProps["fieldPathId"],
+    ) =>
+    (values: string[]) => {
+      const newValue = Object.fromEntries(
+        options.map((opt) => [opt, values.includes(opt)]),
+      );
+      onChange(newValue, fieldPathId?.path);
+    };
+
+  return {
+    optionSchema,
+    options,
+    selection,
+    createChangeHandler,
+  };
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts

@@ -1,6 +1,8 @@
 import { FieldProps, RJSFSchema, RegistryFieldsType } from "@rjsf/utils";
 import { CredentialsField } from "./CredentialField/CredentialField";
 import { GoogleDrivePickerField } from "./GoogleDrivePickerField/GoogleDrivePickerField";
+import { MultiSelectField } from "./MultiSelectField/MultiSelectField";
+import { isMultiSelectSchema } from "../utils/schema-utils";
 
 export interface CustomFieldDefinition {
   id: string;
@@ -30,6 +32,11 @@ export const CUSTOM_FIELDS: CustomFieldDefinition[] = [
     },
     component: GoogleDrivePickerField,
   },
+  {
+    id: "custom/multi_select_field",
+    matcher: isMultiSelectSchema,
+    component: MultiSelectField,
+  },
 ];
 
 export function findCustomFieldId(schema: any): string | null {

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

@@ -37,3 +37,21 @@ export function isOptionalType(schema: RJSFSchema | undefined): {
 export function isAnyOfSelector(name: string) {
   return name.includes("anyof_select");
 }
+
+export function isMultiSelectSchema(schema: RJSFSchema | undefined): boolean {
+  if (typeof schema !== "object" || schema === null) {
+    return false;
+  }
+
+  if ("anyOf" in schema || "oneOf" in schema) {
+    return false;
+  }
+
+  return !!(
+    schema.type === "object" &&
+    schema.properties &&
+    Object.values(schema.properties).every(
+      (prop: any) => prop.type === "boolean",
+    )
+  );
+}