Feat: Add Email and DuckDuckGo and Wikipedia Operator #3221 (#9090)

### What problem does this PR solve?

Feat: Add Email and DuckDuckGo and Wikipedia Operator #3221

### Type of change


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

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

@@ -2,17 +2,17 @@ import { Operator } from '../../constant';
 import AkShareForm from '../akshare-form';
 import ArXivForm from '../arxiv-form';
 import DeepLForm from '../deepl-form';
-import DuckDuckGoForm from '../duckduckgo-form';
-import EmailForm from '../email-form';
 import GithubForm from '../github-form';
 import GoogleScholarForm from '../google-scholar-form';
 import PubMedForm from '../pubmed-form';
-import WikipediaForm from '../wikipedia-form';
 import BingForm from './bing-form';
 import CrawlerForm from './crawler-form';
+import DuckDuckGoForm from './duckduckgo-form';
+import EmailForm from './email-form';
 import ExeSQLForm from './exesql-form';
 import RetrievalForm from './retrieval-form';
 import TavilyForm from './tavily-form';
+import WikipediaForm from './wikipedia-form';
 import YahooFinanceForm from './yahoo-finance-form';
 
 export const ToolFormConfigMap = {

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

@@ -0,0 +1,38 @@
+import { FormContainer } from '@/components/form-container';
+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 { FormWrapper } from '../../components/form-wrapper';
+import {
+  DuckDuckGoFormPartialSchema,
+  DuckDuckGoWidgets,
+} from '../../duckduckgo-form';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+function DuckDuckGoForm() {
+  const values = useValues();
+
+  const FormSchema = z.object(DuckDuckGoFormPartialSchema);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <DuckDuckGoWidgets></DuckDuckGoWidgets>
+        </FormContainer>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(DuckDuckGoForm);

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

@@ -0,0 +1,35 @@
+import { FormContainer } from '@/components/form-container';
+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 { FormWrapper } from '../../components/form-wrapper';
+import { EmailFormPartialSchema, EmailFormWidgets } from '../../email-form';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+function EmailForm() {
+  const values = useValues();
+
+  const FormSchema = z.object(EmailFormPartialSchema);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <EmailFormWidgets></EmailFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(EmailForm);

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

@@ -1,6 +1,7 @@
 import { FormContainer } from '@/components/form-container';
 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 { ApiKeyField } from '../../components/api-key-field';
@@ -9,7 +10,7 @@ import { TavilyFormSchema } from '../../tavily-form';
 import { useValues } from '../use-values';
 import { useWatchFormChange } from '../use-watch-change';
 
-const TavilyForm = () => {
+function TavilyForm() {
   const values = useValues();
 
   const FormSchema = z.object(TavilyFormSchema);
@@ -30,6 +31,6 @@ const TavilyForm = () => {
       </FormWrapper>
     </Form>
   );
-};
+}
 
-export default TavilyForm;
+export default memo(TavilyForm);

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

@@ -0,0 +1,38 @@
+import { FormContainer } from '@/components/form-container';
+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 { FormWrapper } from '../../components/form-wrapper';
+import {
+  WikipediaFormPartialSchema,
+  WikipediaFormWidgets,
+} from '../../wikipedia-form';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+function WikipediaForm() {
+  const values = useValues();
+
+  const FormSchema = z.object(WikipediaFormPartialSchema);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <WikipediaFormWidgets></WikipediaFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(WikipediaForm);