Feat: Add AvatarUpload component #3221 (#9777)

### What problem does this PR solve?

Feat: Add AvatarUpload component #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

@@ -1,6 +1,6 @@
 'use client';
 
-import { FileUploader } from '@/components/file-uploader';
+import { AvatarUpload } from '@/components/avatar-upload';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
 import { MetadataFilter } from '@/components/metadata-filter';
 import { SwitchFormField } from '@/components/switch-fom-field';
@@ -49,14 +49,7 @@ export default function ChatBasicSetting() {
             <FormItem className="w-full">
               <FormLabel>{t('assistantAvatar')}</FormLabel>
               <FormControl>
-                <FileUploader
-                  value={field.value}
-                  onValueChange={field.onChange}
-                  maxFileCount={1}
-                  description={t('photoTip', {
-                    keyPrefix: 'knowledgeConfiguration',
-                  })}
-                />
+                <AvatarUpload {...field}></AvatarUpload>
               </FormControl>
               <FormMessage />
             </FormItem>

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

@@ -3,7 +3,6 @@ import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
 import { DatasetMetadata } from '@/constants/chat';
 import { useFetchDialog, useSetDialog } from '@/hooks/use-chat-request';
-import { transformBase64ToFile, transformFile2Base64 } from '@/utils/file-util';
 import {
   removeUselessFieldsFromValues,
   setLLMSettingEnabledValues,
@@ -36,7 +35,7 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
     shouldUnregister: true,
     defaultValues: {
       name: '',
-      icon: [],
+      icon: '',
       language: 'English',
       description: '',
       kb_ids: [],
@@ -64,15 +63,10 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
       values,
       'llm_setting.',
     );
-    const icon = nextValues.icon;
-    const avatar =
-      Array.isArray(icon) && icon.length > 0
-        ? await transformFile2Base64(icon[0])
-        : '';
+
     setDialog({
       ...omit(data, 'operator_permission'),
       ...nextValues,
-      icon: avatar,
       dialog_id: id,
     });
   }
@@ -88,7 +82,6 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
 
     const nextData = {
       ...data,
-      icon: data.icon ? [transformBase64ToFile(data.icon)] : [],
       ...llmSettingEnabledValues,
     };
     form.reset(nextData as FormSchemaType);

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

@@ -32,7 +32,7 @@ export function useChatSettingSchema() {
 
   const formSchema = z.object({
     name: z.string().min(1, { message: t('assistantNameMessage') }),
-    icon: z.array(z.instanceof(File)),
+    icon: z.string(),
     language: z.string().min(1, {
       message: t('languageMessage'),
     }),