Feat: Show multiple chat boxes #3221 (#9443)

### What problem does this PR solve?

Feat: Show multiple chat boxes #3221

### Type of change


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

web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx

@@ -3,6 +3,7 @@
 import { FileUploader } from '@/components/file-uploader';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
 import { SwitchFormField } from '@/components/switch-fom-field';
+import { TavilyFormField } from '@/components/tavily-form-field';
 import {
   FormControl,
   FormField,
@@ -105,6 +106,7 @@ export default function ChatBasicSetting() {
         name={'prompt_config.tts'}
         label={t('tts')}
       ></SwitchFormField>
+      <TavilyFormField></TavilyFormField>
       <KnowledgeBaseFormField></KnowledgeBaseFormField>
     </div>
   );

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -68,8 +68,8 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   }, [data, form]);
 
   return (
-    <section className="p-5  w-[440px] ">
-      <div className="flex justify-between items-center text-base">
+    <section className="p-5  w-[440px] border-l">
+      <div className="flex justify-between items-center text-base pb-2">
         Chat Settings
         <X className="size-4 cursor-pointer" onClick={switchSettingVisible} />
       </div>

web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx

@@ -24,6 +24,7 @@ export function useChatSettingSchema() {
         optional: z.boolean(),
       }),
     ),
+    tavily_api_key: z.string().optional(),
   });
 
   const formSchema = z.object({