Feat: The query variable of a loop operator can be a nested array variable. #10866 (#10921)

### What problem does this PR solve?

Feat: The query variable of a loop operator can be a nested array
variable. #10866

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/components/select-with-secondary-menu.tsx

@@ -23,6 +23,7 @@ import { ChevronDownIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { VariableType } from '../../constant';
 import {
   useFilterStructuredOutputByValue,
   useFindAgentStructuredOutputLabel,
@@ -52,6 +53,7 @@ interface GroupedSelectWithSecondaryMenuProps {
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;
+  type?: VariableType;
 }
 
 export function GroupedSelectWithSecondaryMenu({
@@ -59,6 +61,7 @@ export function GroupedSelectWithSecondaryMenu({
   value,
   onChange,
   placeholder,
+  type,
 }: GroupedSelectWithSecondaryMenuProps) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
@@ -69,6 +72,7 @@ export function GroupedSelectWithSecondaryMenu({
 
   // Find the label of the selected item
   const flattenedOptions = options.flatMap((g) => g.options);
+
   let selectedItem = flattenedOptions
     .flatMap((o) => [o, ...(o.children || [])])
     .find((o) => o.value === value);
@@ -140,7 +144,7 @@ export function GroupedSelectWithSecondaryMenu({
       <PopoverContent className="p-0" align="start">
         <Command value={value}>
           <CommandInput placeholder="Search..." />
-          <CommandList className="overflow-visible">
+          <CommandList className="overflow-auto">
             {options.map((group, idx) => (
               <CommandGroup key={idx} heading={group.label}>
                 {group.options.map((option) => {
@@ -159,6 +163,7 @@ export function GroupedSelectWithSecondaryMenu({
                         data={option}
                         click={handleSecondaryMenuClick}
                         filteredStructuredOutput={filteredStructuredOutput}
+                        type={type}
                       ></StructuredOutputSecondaryMenu>
                     );
                   }