Feat: Added meta data to the chat configuration page #8531 (#9417)

### What problem does this PR solve?

Feat: Added meta data to the chat configuration page #8531

### Type of change


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

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

@@ -1,6 +1,10 @@
 import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useFetchDialog } from '@/hooks/use-chat-request';
+import { transformBase64ToFile } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { PanelRightClose } from 'lucide-react';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
@@ -11,6 +15,7 @@ import { useChatSettingSchema } from './use-chat-setting-schema';
 type ChatSettingsProps = { switchSettingVisible(): void };
 export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   const formSchema = useChatSettingSchema();
+  const { data } = useFetchDialog();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -34,6 +39,14 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
     console.log(values);
   }
 
+  useEffect(() => {
+    const nextData = {
+      ...data,
+      icon: data.icon ? [transformBase64ToFile(data.icon)] : [],
+    };
+    form.reset(nextData as z.infer<typeof formSchema>);
+  }, [data, form]);
+
   return (
     <section className="p-5  w-[400px] max-w-[20%]">
       <div className="flex justify-between items-center text-base">
@@ -49,7 +62,9 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
           className="space-y-6 overflow-auto max-h-[87vh] pr-4"
         >
           <ChatBasicSetting></ChatBasicSetting>
+          <Separator />
           <ChatPromptEngine></ChatPromptEngine>
+          <Separator />
           <ChatModelSettings></ChatModelSettings>
         </form>
       </FormProvider>