Feat: Add hatPromptEngine component #3221 (#4881)

### What problem does this PR solve?

Feat: Add hatPromptEngine component #3221

### Type of change


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

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

@@ -1,16 +1,49 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormProvider, useForm } from 'react-hook-form';
+import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';
 import { ChatPromptEngine } from './chat-prompt-engine';
+import { useChatSettingSchema } from './use-chat-setting-schema';
 
 export function AppSettings() {
+  const formSchema = useChatSettingSchema();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      language: 'English',
+      prompt_config: {
+        quote: true,
+        keyword: false,
+        tts: false,
+        use_kg: false,
+        refine_multiturn: true,
+      },
+      top_n: 8,
+      vector_similarity_weight: 0.2,
+      top_k: 1024,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
   return (
-    <section className="p-6 w-[500px] max-w-[25%]">
-      <div className="text-2xl font-bold mb-4 text-colors-text-neutral-strong">
+    <section className="py-6 w-[500px] max-w-[25%] ">
+      <div className="text-2xl font-bold mb-4 text-colors-text-neutral-strong px-6">
         App settings
       </div>
-      <ChatBasicSetting></ChatBasicSetting>
-      <ChatPromptEngine></ChatPromptEngine>
-      <ChatModelSettings></ChatModelSettings>
+      <div className="overflow-auto max-h-[88vh] px-6 space-y-6">
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <ChatBasicSetting></ChatBasicSetting>
+            <ChatPromptEngine></ChatPromptEngine>
+            <ChatModelSettings></ChatModelSettings>
+          </form>
+        </FormProvider>
+      </div>
     </section>
   );
 }