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/query-variable.tsx

@@ -56,6 +56,7 @@ export function QueryVariable({
               options={finalOptions}
               {...field}
               // allowClear
+              type={type}
             ></GroupedSelectWithSecondaryMenu>
           </FormControl>
           <FormMessage />

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

web/src/pages/agent/form/components/structured-output-secondary-menu.tsx

@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils';
 import { get, isPlainObject } from 'lodash';
 import { ChevronRight } from 'lucide-react';
 import { PropsWithChildren, ReactNode, useCallback } from 'react';
+import { VariableType } from '../../constant';
 
 type DataItem = { label: ReactNode; value: string; parentLabel?: ReactNode };
 
@@ -15,12 +16,24 @@ type StructuredOutputSecondaryMenuProps = {
   data: DataItem;
   click(option: { label: ReactNode; value: string }): void;
   filteredStructuredOutput: JSONSchema;
+  type?: VariableType;
 } & PropsWithChildren;
 export function StructuredOutputSecondaryMenu({
   data,
   click,
   filteredStructuredOutput,
+  type,
 }: StructuredOutputSecondaryMenuProps) {
+  const handleSubMenuClick = useCallback(
+    (option: { label: ReactNode; value: string }, dataType?: string) => () => {
+      // The query variable of the iteration operator can only select array type data.
+      if ((type && type === dataType) || !type) {
+        click(option);
+      }
+    },
+    [click, type],
+  );
+
   const renderAgentStructuredOutput = useCallback(
     (values: any, option: { label: ReactNode; value: string }) => {
       if (isPlainObject(values) && 'properties' in values) {
@@ -37,7 +50,7 @@ export function StructuredOutputSecondaryMenu({
               return (
                 <li key={key} className="pl-1">
                   <div
-                    onClick={() => click(nextOption)}
+                    onClick={handleSubMenuClick(nextOption, dataType)}
                     className="hover:bg-bg-card p-1 text-text-primary rounded-sm flex justify-between"
                   >
                     {key}
@@ -54,13 +67,16 @@ export function StructuredOutputSecondaryMenu({
 
       return <div></div>;
     },
-    [click],
+    [handleSubMenuClick],
   );
 
   return (
     <HoverCard key={data.value} openDelay={100} closeDelay={100}>
       <HoverCardTrigger asChild>
-        <li className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center">
+        <li
+          onClick={() => click(data)}
+          className="hover:bg-bg-card py-1 px-2 text-text-primary rounded-sm text-sm flex justify-between items-center"
+        >
           {data.label} <ChevronRight className="size-3.5 text-text-secondary" />
         </li>
       </HoverCardTrigger>