Feat: Add bing form #3221 (#8875)

### What problem does this PR solve?

Feat: Add bing form #3221
### Type of change


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

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -102,6 +102,7 @@ function AccordionOperators() {
               Operator.TavilySearch,
               Operator.Crawler,
               Operator.ExeSQL,
+              Operator.Bing,
             ]}
           ></OperatorItemList>
         </AccordionContent>

web/src/pages/agent/constant.tsx

@@ -516,7 +516,7 @@ export const initialBingValues = {
     'YOUR_API_KEY (obtained from https://www.microsoft.com/en-us/bing/apis/bing-web-search-api)',
   country: 'CH',
   language: 'en',
-  ...initialQueryBaseValues,
+  query: '',
 };
 
 export const initialGoogleScholarValues = {

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

@@ -1,12 +1,42 @@
-import TopNItem from '@/components/top-n-item';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
-import { useMemo } from 'react';
-import { IOperatorForm } from '../../interface';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialBingValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
 import { BingCountryOptions, BingLanguageOptions } from '../../options';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { FormWrapper } from '../components/form-wrapper';
+import { QueryVariable } from '../components/query-variable';
 
-const BingForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+export const BingFormSchema = {
+  channel: z.string(),
+  api_key: z.string(),
+  country: z.string(),
+  language: z.string(),
+  top_n: z.number(),
+};
+
+export const FormSchema = z.object({
+  query: z.string().optional(),
+  ...BingFormSchema,
+});
+
+export function BingFormWidgets() {
+  const form = useFormContext();
   const { t } = useTranslate('flow');
 
   const options = useMemo(() => {
@@ -14,29 +44,88 @@ const BingForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   }, []);
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item label={t('channel')} name={'channel'}>
-        <Select options={options}></Select>
-      </Form.Item>
-      <Form.Item label={t('apiKey')} name={'api_key'}>
-        <Input></Input>
-      </Form.Item>
-      <Form.Item label={t('country')} name={'country'}>
-        <Select options={BingCountryOptions}></Select>
-      </Form.Item>
-      <Form.Item label={t('language')} name={'language'}>
-        <Select options={BingLanguageOptions}></Select>
-      </Form.Item>
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name="channel"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('channel')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch {...field} options={options}></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="api_key"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('apiKey')}</FormLabel>
+            <FormControl>
+              <Input {...field}></Input>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="country"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('country')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={BingCountryOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="language"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('language')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={BingLanguageOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+function BingForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialBingValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <QueryVariable></QueryVariable>
+        <BingFormWidgets></BingFormWidgets>
+      </FormWrapper>
     </Form>
   );
-};
+}
 
-export default BingForm;
+export default memo(BingForm);

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

@@ -13,6 +13,7 @@ import {
 import { Input, NumberInput } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
 import { useForm, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 import { initialExeSqlValues } from '../../constant';
@@ -135,7 +136,7 @@ export function ExeSQLFormWidgets({ loading }: { loading: boolean }) {
   );
 }
 
-const ExeSQLForm = ({ node }: INextOperatorForm) => {
+function ExeSQLForm({ node }: INextOperatorForm) {
   const defaultValues = useFormValues(initialExeSqlValues, node);
 
   const { onSubmit, loading } = useSubmitForm();
@@ -155,6 +156,6 @@ const ExeSQLForm = ({ node }: INextOperatorForm) => {
       </FormWrapper>
     </Form>
   );
-};
+}
 
-export default ExeSQLForm;
+export default memo(ExeSQLForm);

web/src/pages/agent/form/tool-form/bing-form/index.tsx

@@ -0,0 +1,32 @@
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { BingFormSchema, BingFormWidgets } from '../../bing-form';
+import { FormWrapper } from '../../components/form-wrapper';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+export const FormSchema = z.object(BingFormSchema);
+
+function BingForm() {
+  const defaultValues = useValues();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <BingFormWidgets></BingFormWidgets>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(BingForm);

web/src/pages/agent/form/tool-form/constant.tsx

@@ -1,7 +1,6 @@
 import { Operator } from '../../constant';
 import AkShareForm from '../akshare-form';
 import ArXivForm from '../arxiv-form';
-import BingForm from '../bing-form';
 import DeepLForm from '../deepl-form';
 import DuckDuckGoForm from '../duckduckgo-form';
 import EmailForm from '../email-form';
@@ -11,6 +10,7 @@ import GoogleScholarForm from '../google-scholar-form';
 import PubMedForm from '../pubmed-form';
 import WikipediaForm from '../wikipedia-form';
 import YahooFinanceForm from '../yahoo-finance-form';
+import BingForm from './bing-form';
 import CrawlerForm from './crawler-form';
 import ExeSQLForm from './exesql-form';
 import RetrievalForm from './retrieval-form';

web/src/pages/agent/hooks/use-agent-tool-initial-values.ts

@@ -22,6 +22,8 @@ export function useAgentToolInitialValues() {
           };
         case Operator.ExeSQL:
           return omit(initialValues, 'query');
+        case Operator.Bing:
+          return omit(initialValues, 'query');
 
         default:
           return initialValues;