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

@@ -1,50 +1,119 @@
+import { FormContainer } from '@/components/form-container';
+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 } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ReactNode } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialEmailValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
 
-const EmailForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+interface InputFormFieldProps {
+  name: string;
+  label: ReactNode;
+  type?: string;
+}
+
+function InputFormField({ name, label, type }: InputFormFieldProps) {
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Input {...field} type={type}></Input>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function EmailFormWidgets() {
   const { t } = useTranslate('flow');
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
+    <>
+      <InputFormField
+        name="smtp_server"
+        label={t('smtpServer')}
+      ></InputFormField>
+      <InputFormField
+        name="smtp_port"
+        label={t('smtpPort')}
+        type="number"
+      ></InputFormField>
+      <InputFormField name="email" label={t('senderEmail')}></InputFormField>
+      <InputFormField
+        name="password"
+        label={t('authCode')}
+        type="password"
+      ></InputFormField>
+      <InputFormField
+        name="sender_name"
+        label={t('senderName')}
+      ></InputFormField>
+    </>
+  );
+}
 
-      {/* SMTP服务器配置 */}
-      <Form.Item label={t('smtpServer')} name={'smtp_server'}>
-        <Input placeholder="smtp.example.com" />
-      </Form.Item>
-      <Form.Item label={t('smtpPort')} name={'smtp_port'}>
-        <Input type="number" placeholder="587" />
-      </Form.Item>
-      <Form.Item label={t('senderEmail')} name={'email'}>
-        <Input placeholder="sender@example.com" />
-      </Form.Item>
-      <Form.Item label={t('authCode')} name={'password'}>
-        <Input.Password placeholder="your_password" />
-      </Form.Item>
-      <Form.Item label={t('senderName')} name={'sender_name'}>
-        <Input placeholder="Sender Name" />
-      </Form.Item>
+export const EmailFormPartialSchema = {
+  smtp_server: z.string(),
+  smtp_port: z.number(),
+  email: z.string(),
+  password: z.string(),
+  sender_name: z.string(),
+};
 
-      {/* 动态参数说明 */}
-      <div style={{ marginBottom: 24 }}>
-        <h4>{t('dynamicParameters')}</h4>
-        <div>{t('jsonFormatTip')}</div>
-        <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4 }}>
-          {`{
-  "to_email": "recipient@example.com",  
-  "cc_email": "cc@example.com",
-  "subject": "Email Subject",           
-  "content": "Email Content"            
-}`}
-        </pre>
+const FormSchema = z.object({
+  to_email: z.string(),
+  cc_email: z.string(),
+  content: z.string(),
+  subject: z.string(),
+  ...EmailFormPartialSchema,
+});
+
+const outputList = buildOutputList(initialEmailValues.outputs);
+
+const EmailForm = ({ node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const defaultValues = useFormValues(initialEmailValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <InputFormField name="to_email" label={t('toEmail')}></InputFormField>
+          <InputFormField name="cc_email" label={t('ccEmail')}></InputFormField>
+          <InputFormField name="content" label={t('content')}></InputFormField>
+          <InputFormField name="subject" label={t('subject')}></InputFormField>
+          <EmailFormWidgets></EmailFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
       </div>
     </Form>
   );