Feat: Filter the query variable drop-down box options by type #3221 (#8485)

### What problem does this PR solve?

Feat: Filter the query variable drop-down box options by type #3221

### Type of change


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

web/src/pages/agent/form/begin-form/use-edit-query.ts

@@ -1,9 +1,12 @@
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useSetSelectedRecord } from '@/hooks/logic-hooks';
 import { useCallback, useMemo, useState } from 'react';
+import { UseFormReturn } from 'react-hook-form';
 import { BeginQuery, INextOperatorForm } from '../../interface';
 
-export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
+export const useEditQueryRecord = ({
+  form,
+}: INextOperatorForm & { form: UseFormReturn }) => {
   const { setRecord, currentRecord } = useSetSelectedRecord<BeginQuery>();
   const { visible, hideModal, showModal } = useSetModalState();
   const [index, setIndex] = useState(-1);
@@ -16,7 +19,6 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
   const handleEditRecord = useCallback(
     (record: BeginQuery) => {
       const inputs: BeginQuery[] = form?.getValues('inputs') || [];
-      console.log('🚀 ~ useEditQueryRecord ~ inputs:', inputs);
 
       const nextQuery: BeginQuery[] =
         index > -1 ? inputs.toSpliced(index, 1, record) : [...inputs, record];

web/src/pages/agent/form/components/query-variable.tsx

@@ -6,18 +6,29 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { VariableType } from '../../constant';
 import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
 
-type QueryVariableProps = { name?: string };
+type QueryVariableProps = { name?: string; type?: VariableType };
 
-export function QueryVariable({ name = 'query' }: QueryVariableProps) {
+export function QueryVariable({
+  name = 'query',
+  type = VariableType.String,
+}: QueryVariableProps) {
   const { t } = useTranslation();
   const form = useFormContext();
 
   const nextOptions = useBuildQueryVariableOptions();
 
+  const finalOptions = useMemo(() => {
+    return nextOptions.map((x) => {
+      return { ...x, options: x.options.filter((y) => y.type === type) };
+    });
+  }, [nextOptions, type]);
+
   return (
     <FormField
       control={form.control}
@@ -27,7 +38,7 @@ export function QueryVariable({ name = 'query' }: QueryVariableProps) {
           <FormLabel tooltip={t('chat.modelTip')}>{t('flow.query')}</FormLabel>
           <FormControl>
             <SelectWithSearch
-              options={nextOptions}
+              options={finalOptions}
               {...field}
             ></SelectWithSearch>
           </FormControl>

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

@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { initialRetrievalValues } from '../../constant';
+import { initialRetrievalValues, VariableType } from '../../constant';
 import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
 import { Output } from '../components/output';
@@ -50,7 +50,10 @@ const IterationForm = ({ node }: INextOperatorForm) => {
         }}
       >
         <FormContainer>
-          <QueryVariable name="items_ref"></QueryVariable>
+          <QueryVariable
+            name="items_ref"
+            type={VariableType.Array}
+          ></QueryVariable>
         </FormContainer>
         <Output list={outputList}></Output>
       </form>