Feat: Fixed the issue where some fields in the chat configuration could not be displayed #3221 (#9430)

### What problem does this PR solve?

Feat: Fixed the issue where some fields in the chat configuration could
not be displayed #3221
### Type of change


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

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

@@ -1,11 +1,13 @@
-import { Button } from '@/components/ui/button';
+import { ButtonLoading } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
-import { useFetchDialog } from '@/hooks/use-chat-request';
-import { transformBase64ToFile } from '@/utils/file-util';
+import { useFetchDialog, useSetDialog } from '@/hooks/use-chat-request';
+import { transformBase64ToFile, transformFile2Base64 } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PanelRightClose } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'umi';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';
@@ -16,8 +18,12 @@ type ChatSettingsProps = { switchSettingVisible(): void };
 export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   const formSchema = useChatSettingSchema();
   const { data } = useFetchDialog();
+  const { setDialog, loading } = useSetDialog();
+  const { id } = useParams();
 
-  const form = useForm<z.infer<typeof formSchema>>({
+  type FormSchemaType = z.infer<typeof formSchema>;
+
+  const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: '',
@@ -35,8 +41,22 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
     },
   });
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
+  async function onSubmit(values: FormSchemaType) {
+    const icon = values.icon;
+    const avatar =
+      Array.isArray(icon) && icon.length > 0
+        ? await transformFile2Base64(icon[0])
+        : '';
+    setDialog({
+      ...data,
+      ...values,
+      icon: avatar,
+      dialog_id: id,
+    });
+  }
+
+  function onInvalid(errors: any) {
+    console.log('Form validation failed:', errors);
   }
 
   useEffect(() => {
@@ -44,32 +64,33 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
       ...data,
       icon: data.icon ? [transformBase64ToFile(data.icon)] : [],
     };
-    form.reset(nextData as z.infer<typeof formSchema>);
+    form.reset(nextData as FormSchemaType);
   }, [data, form]);
 
   return (
-    <section className="p-5  w-[400px] max-w-[20%]">
+    <section className="p-5  w-[440px] ">
       <div className="flex justify-between items-center text-base">
         Chat Settings
-        <PanelRightClose
-          className="size-4 cursor-pointer"
-          onClick={switchSettingVisible}
-        />
+        <X className="size-4 cursor-pointer" onClick={switchSettingVisible} />
       </div>
-      <FormProvider {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 overflow-auto max-h-[87vh] pr-4"
-        >
-          <ChatBasicSetting></ChatBasicSetting>
-          <Separator />
-          <ChatPromptEngine></ChatPromptEngine>
-          <Separator />
-          <ChatModelSettings></ChatModelSettings>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit, onInvalid)}>
+          <section className="space-y-6 overflow-auto max-h-[87vh] pr-4">
+            <ChatBasicSetting></ChatBasicSetting>
+            <Separator />
+            <ChatPromptEngine></ChatPromptEngine>
+            <Separator />
+            <ChatModelSettings></ChatModelSettings>
+          </section>
+          <ButtonLoading
+            className="w-full my-4"
+            type="submit"
+            loading={loading}
+          >
+            Update
+          </ButtonLoading>
         </form>
-      </FormProvider>
-
-      <Button className="w-full my-4">Update</Button>
+      </Form>
     </section>
   );
 }