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/duckduckgo-form/index.tsx

@@ -1,3 +1,4 @@
+import { FormContainer } from '@/components/form-container';
 import { TopNFormField } from '@/components/top-n-item';
 import {
   Form,
@@ -9,44 +10,79 @@ import {
 } from '@/components/ui/form';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useMemo } from 'react';
-import { Channel } from '../../constant';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { Channel, initialDuckValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
 import { INextOperatorForm } from '../../interface';
-import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
 
-const DuckDuckGoForm = ({ form, node }: INextOperatorForm) => {
+export const DuckDuckGoFormPartialSchema = {
+  top_n: z.string(),
+  channel: z.string(),
+};
+
+const FormSchema = z.object({
+  query: z.string(),
+  ...DuckDuckGoFormPartialSchema,
+});
+
+export function DuckDuckGoWidgets() {
   const { t } = useTranslate('flow');
+  const form = useFormContext();
 
   const options = useMemo(() => {
     return Object.values(Channel).map((x) => ({ value: x, label: t(x) }));
   }, [t]);
 
+  return (
+    <>
+      <TopNFormField></TopNFormField>
+      <FormField
+        control={form.control}
+        name={'channel'}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel tooltip={t('channelTip')}>{t('channel')}</FormLabel>
+            <FormControl>
+              <RAGFlowSelect {...field} options={options} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialDuckValues.outputs);
+
+function DuckDuckGoForm({ node }: INextOperatorForm) {
+  const defaultValues = useFormValues(initialDuckValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
   return (
     <Form {...form}>
-      <form
-        className="space-y-6"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <DynamicInputVariable node={node}></DynamicInputVariable>
-        <TopNFormField></TopNFormField>
-        <FormField
-          control={form.control}
-          name="channel"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip={t('channelTip')}>{t('channel')}</FormLabel>
-              <FormControl>
-                <RAGFlowSelect {...field} options={options} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </form>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable></QueryVariable>
+          <DuckDuckGoWidgets></DuckDuckGoWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
     </Form>
   );
-};
+}
 
-export default DuckDuckGoForm;
+export default memo(DuckDuckGoForm);