Feat: Adjust the style of the canvas node #10703 (#10795)

### What problem does this PR solve?

Feat: Adjust the style of the canvas node #10703


### Type of change


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

web/src/pages/agent/setting-dialog/index.tsx

@@ -8,7 +8,6 @@ import {
 } from '@/components/ui/dialog';
 import { useSetAgentSetting } from '@/hooks/use-agent-request';
 import { IModalProps } from '@/interfaces/common';
-import { transformFile2Base64 } from '@/utils/file-util';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -23,11 +22,7 @@ export function SettingDialog({ hideModal }: IModalProps<any>) {
 
   const submit = useCallback(
     async (values: SettingFormSchemaType) => {
-      const avatar = values.avatar;
-      const code = await setAgentSetting({
-        ...values,
-        avatar: avatar.length > 0 ? await transformFile2Base64(avatar[0]) : '',
-      });
+      const code = await setAgentSetting(values);
       if (code === 0) {
         hideModal?.();
       }
@@ -39,7 +34,7 @@ export function SettingDialog({ hideModal }: IModalProps<any>) {
     <Dialog open onOpenChange={hideModal}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogTitle>{t('common.edit')}</DialogTitle>
         </DialogHeader>
         <SettingForm submit={submit}></SettingForm>
         <DialogFooter>

web/src/pages/agent/setting-dialog/setting-form.tsx

@@ -1,32 +1,20 @@
 import { z } from 'zod';
 
-import {
-  FileUpload,
-  FileUploadDropzone,
-  FileUploadItem,
-  FileUploadItemDelete,
-  FileUploadItemMetadata,
-  FileUploadItemPreview,
-  FileUploadList,
-  FileUploadTrigger,
-} from '@/components/file-upload';
+import { AvatarUpload } from '@/components/avatar-upload';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Textarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFetchAgent } from '@/hooks/use-agent-request';
-import { transformBase64ToFile } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { CloudUpload, X } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
 const formSchema = z.object({
   title: z.string().min(1, {}),
-  avatar: z.array(z.custom<File>()).optional().nullable(),
+  avatar: z.string().optional(),
   description: z.string().optional().nullable(),
   permission: z.string(),
 });
@@ -55,7 +43,7 @@ export function SettingForm({ submit }: SettingFormProps) {
     form.reset({
       title: data?.title,
       description: data?.description,
-      avatar: data.avatar ? [transformBase64ToFile(data.avatar)] : [],
+      avatar: data.avatar,
       permission: data?.permission,
     });
   }, [data, form]);
@@ -71,45 +59,7 @@ export function SettingForm({ submit }: SettingFormProps) {
           <Input />
         </RAGFlowFormItem>
         <RAGFlowFormItem name="avatar" label={t('photo')}>
-          {(field) => (
-            <FileUpload
-              value={field.value}
-              onValueChange={field.onChange}
-              accept="image/*"
-              maxFiles={1}
-              onFileReject={(_, message) => {
-                form.setError('avatar', {
-                  message,
-                });
-              }}
-              multiple
-            >
-              <FileUploadDropzone className="flex-row flex-wrap border-dotted text-center">
-                <CloudUpload className="size-4" />
-                Drag and drop or
-                <FileUploadTrigger asChild>
-                  <Button variant="link" size="sm" className="p-0">
-                    choose files
-                  </Button>
-                </FileUploadTrigger>
-                to upload
-              </FileUploadDropzone>
-              <FileUploadList>
-                {field.value?.map((file: File, index: number) => (
-                  <FileUploadItem key={index} value={file}>
-                    <FileUploadItemPreview />
-                    <FileUploadItemMetadata />
-                    <FileUploadItemDelete asChild>
-                      <Button variant="ghost" size="icon" className="size-7">
-                        <X />
-                        <span className="sr-only">Delete</span>
-                      </Button>
-                    </FileUploadItemDelete>
-                  </FileUploadItem>
-                ))}
-              </FileUploadList>
-            </FileUpload>
-          )}
+          <AvatarUpload></AvatarUpload>
         </RAGFlowFormItem>
         <RAGFlowFormItem name="description" label={t('description')}>
           <Textarea rows={4} />