Feat: Add a switch to control the display of structured output to the agent form. #10427 (#11344)

### What problem does this PR solve?

Feat: Add a switch to control the display of structured output to the
agent form. #10427

### Type of change


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

web/src/pages/agent/form/switch-form/index.tsx

@@ -1,5 +1,4 @@
 import { FormContainer } from '@/components/form-container';
-import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { BlockButton, Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -16,16 +15,15 @@ import { useBuildSwitchOperatorOptions } from '@/hooks/logic-hooks/use-build-ope
 import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from 'i18next';
-import { toLower } from 'lodash';
 import { X } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { SwitchLogicOperatorOptions, VariableType } from '../../constant';
-import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
+import { SwitchLogicOperatorOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
+import { QueryVariable } from '../components/query-variable';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
@@ -47,19 +45,6 @@ function ConditionCards({
 }: ConditionCardsProps) {
   const form = useFormContext();
 
-  const nextOptions = useBuildQueryVariableOptions();
-
-  const finalOptions = useMemo(() => {
-    return nextOptions.map((x) => {
-      return {
-        ...x,
-        options: x.options.filter(
-          (y) => !toLower(y.type).includes(VariableType.Array),
-        ),
-      };
-    });
-  }, [nextOptions]);
-
   const switchOperatorOptions = useBuildSwitchOperatorOptions();
 
   const name = `${parentName}.${ItemKey}`;
@@ -101,11 +86,11 @@ function ConditionCards({
                   render={({ field }) => (
                     <FormItem className="flex-1 min-w-0">
                       <FormControl>
-                        <SelectWithSearch
+                        <QueryVariable
+                          pureQuery
                           {...field}
-                          options={finalOptions}
-                          triggerClassName="text-accent-primary bg-transparent border-none truncate"
-                        ></SelectWithSearch>
+                          hideLabel
+                        ></QueryVariable>
                       </FormControl>
                       <FormMessage />
                     </FormItem>