Feat: Add TavilyExtract operator #3221 (#8899)

### What problem does this PR solve?

Feat: Add TavilyExtract operator #3221

### Type of change


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

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

@@ -34,4 +34,5 @@ export const ToolFormConfigMap = {
   [Operator.Crawler]: CrawlerForm,
   [Operator.Email]: EmailForm,
   [Operator.TavilySearch]: TavilyForm,
+  [Operator.TavilyExtract]: TavilyForm,
 };

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

@@ -1,25 +1,17 @@
 import { FormContainer } from '@/components/form-container';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
+import { Form } from '@/components/ui/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import { FormWrapper } from '../../components/form-wrapper';
+import { TavilyApiKeyField, TavilyFormSchema } from '../../tavily-form';
 import { useValues } from '../use-values';
 import { useWatchFormChange } from '../use-watch-change';
 
 const TavilyForm = () => {
   const values = useValues();
 
-  const FormSchema = z.object({
-    api_key: z.string(),
-  });
+  const FormSchema = z.object(TavilyFormSchema);
 
   const form = useForm<z.infer<typeof FormSchema>>({
     defaultValues: values,
@@ -30,29 +22,11 @@ const TavilyForm = () => {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-5 px-5 "
-        autoComplete="off"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <FormContainer>
-          <FormField
-            control={form.control}
-            name="api_key"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Api Key</FormLabel>
-                <FormControl>
-                  <Input type="password" {...field}></Input>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          <TavilyApiKeyField></TavilyApiKeyField>
         </FormContainer>
-      </form>
+      </FormWrapper>
     </Form>
   );
 };