Feat: Add a form with data operations operators #10427 (#11001)

### What problem does this PR solve?

Feat: Add a form with data operations operators #10427

### Type of change


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

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

@@ -8,7 +8,7 @@ import { get, isEmpty, isPlainObject } from 'lodash';
 import { ChevronRight } from 'lucide-react';
 import { PropsWithChildren, ReactNode, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { JsonSchemaDataType, VariableType } from '../../constant';
+import { JsonSchemaDataType } from '../../constant';
 import { useGetStructuredOutputByValue } from '../../hooks/use-build-structured-output';
 import {
   hasJsonSchemaChild,
@@ -20,13 +20,13 @@ type DataItem = { label: ReactNode; value: string; parentLabel?: ReactNode };
 type StructuredOutputSecondaryMenuProps = {
   data: DataItem;
   click(option: { label: ReactNode; value: string }): void;
-  type?: VariableType | JsonSchemaDataType;
+  types?: JsonSchemaDataType[];
 } & PropsWithChildren;
 
 export function StructuredOutputSecondaryMenu({
   data,
   click,
-  type,
+  types = [],
 }: StructuredOutputSecondaryMenuProps) {
   const { t } = useTranslation();
   const filterStructuredOutput = useGetStructuredOutputByValue();
@@ -35,18 +35,21 @@ export function StructuredOutputSecondaryMenu({
   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) {
+      if (
+        (!isEmpty(types) && types?.some((x) => x === dataType)) ||
+        isEmpty(types)
+      ) {
         click(option);
       }
     },
-    [click, type],
+    [click, types],
   );
 
   const handleMenuClick = useCallback(() => {
-    if (isEmpty(type) || type === JsonSchemaDataType.Object) {
+    if (isEmpty(types) || types?.some((x) => x === JsonSchemaDataType.Object)) {
       click(data);
     }
-  }, [click, data, type]);
+  }, [click, data, types]);
 
   const renderAgentStructuredOutput = useCallback(
     (values: any, option: { label: ReactNode; value: string }) => {
@@ -62,10 +65,10 @@ export function StructuredOutputSecondaryMenu({
               const dataType = get(value, 'type');
 
               if (
-                !type ||
-                (type &&
-                  (dataType === type ||
-                    hasSpecificTypeChild(value ?? {}, type)))
+                isEmpty(types) ||
+                (!isEmpty(types) &&
+                  (types?.some((x) => x === dataType) ||
+                    hasSpecificTypeChild(value ?? {}, types)))
               ) {
                 return (
                   <li key={key} className="pl-1">
@@ -90,10 +93,13 @@ export function StructuredOutputSecondaryMenu({
 
       return <div></div>;
     },
-    [handleSubMenuClick, type],
+    [handleSubMenuClick, types],
   );
 
-  if (!hasJsonSchemaChild(structuredOutput)) {
+  if (
+    !hasJsonSchemaChild(structuredOutput) ||
+    (!isEmpty(types) && !hasSpecificTypeChild(structuredOutput, types))
+  ) {
     return null;
   }