feat: Add ability to change profile avatar (#12642)

web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx

@@ -149,7 +149,7 @@ const ChatItem: FC<ChatItemProps> = ({
       suggestedQuestions={suggestedQuestions}
       onSend={doSend}
       showPromptLog
-      questionIcon={<Avatar name={userProfile.name} size={40} />}
+      questionIcon={<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={40} />}
       allToolIcons={allToolIcons}
       hideLogModal
       noSpacing

web/app/components/app/configuration/debug/debug-with-single-model/index.tsx

@@ -175,7 +175,7 @@ const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSi
       onRegenerate={doRegenerate}
       onStopResponding={handleStop}
       showPromptLog
-      questionIcon={<Avatar name={userProfile.name} size={40} />}
+      questionIcon={<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={40} />}
       allToolIcons={allToolIcons}
       onAnnotationEdited={handleAnnotationEdited}
       onAnnotationAdded={handleAnnotationAdded}

web/app/components/base/app-icon-picker/ImageInput.tsx

@@ -2,8 +2,7 @@
 
 import type { ChangeEvent, FC } from 'react'
 import { createRef, useEffect, useState } from 'react'
-import type { Area } from 'react-easy-crop'
-import Cropper from 'react-easy-crop'
+import Cropper, { type Area, type CropperProps } from 'react-easy-crop'
 import classNames from 'classnames'
 
 import { ImagePlus } from '../icons/src/vender/line/images'
@@ -18,11 +17,13 @@ export type OnImageInput = {
 
 type UploaderProps = {
   className?: string
+  cropShape?: CropperProps['cropShape']
   onImageInput?: OnImageInput
 }
 
 const ImageInput: FC<UploaderProps> = ({
   className,
+  cropShape,
   onImageInput,
 }) => {
   const [inputImage, setInputImage] = useState<{ file: File; url: string }>()
@@ -78,6 +79,7 @@ const ImageInput: FC<UploaderProps> = ({
         crop={crop}
         zoom={zoom}
         aspect={1}
+        cropShape={cropShape}
         onCropChange={setCrop}
         onCropComplete={onCropComplete}
         onZoomChange={setZoom}

web/app/components/base/avatar/index.tsx

@@ -2,9 +2,9 @@
 import { useState } from 'react'
 import cn from '@/utils/classnames'
 
-type AvatarProps = {
+export type AvatarProps = {
   name: string
-  avatar?: string
+  avatar: string | null
   size?: number
   className?: string
   textClassName?: string

web/app/components/datasets/settings/permission-selector/index.tsx

@@ -74,7 +74,7 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
         >
           {permission === 'only_me' && (
             <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200', disabled && 'hover:!bg-gray-100 !cursor-default')}>
-              <Avatar name={userProfile.name} className='shrink-0 mr-2' size={24} />
+              <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
               <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
               {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
             </div>
@@ -106,7 +106,7 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
                 setOpen(false)
               }}>
                 <div className='flex items-center gap-2'>
-                  <Avatar name={userProfile.name} className='shrink-0 mr-2' size={24} />
+                  <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
                   <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
                   {permission === 'only_me' && <Check className='w-4 h-4 text-primary-600' />}
                 </div>
@@ -149,7 +149,7 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
                 </div>
                 {showMe && (
                   <div className='pl-3 pr-[10px] py-1 flex gap-2 items-center rounded-lg'>
-                    <Avatar name={userProfile.name} className='shrink-0' size={24} />
+                    <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0' size={24} />
                     <div className='grow'>
                       <div className='text-[13px] text-gray-700 font-medium leading-[18px] truncate'>
                         {userProfile.name}
@@ -162,7 +162,7 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
                 )}
                 {filteredMemberList.map(member => (
                   <div key={member.id} className='pl-3 pr-[10px] py-1 flex gap-2 items-center rounded-lg hover:bg-gray-100 cursor-pointer' onClick={() => selectMember(member)}>
-                    <Avatar name={member.name} className='shrink-0' size={24} />
+                    <Avatar avatar={userProfile.avatar_url} name={member.name} className='shrink-0' size={24} />
                     <div className='grow'>
                       <div className='text-[13px] text-gray-700 font-medium leading-[18px] truncate'>{member.name}</div>
                       <div className='text-xs text-gray-500 leading-[18px] truncate'>{member.email}</div>

web/app/components/header/account-dropdown/index.tsx

@@ -68,7 +68,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                     ${open && 'bg-gray-200'}
                   `}
               >
-                <Avatar name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
                 {!isMobile && <>
                   {userProfile.name}
                   <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
@@ -92,7 +92,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                 >
                   <Menu.Item disabled>
                     <div className='flex flex-nowrap items-center px-4 py-[13px]'>
-                      <Avatar name={userProfile.name} size={36} className='mr-3' />
+                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
                       <div className='grow'>
                         <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
                         <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>

web/app/components/header/account-setting/members-page/index.tsx

@@ -95,7 +95,7 @@ const MembersPage = () => {
               accounts.map(account => (
                 <div key={account.id} className='flex border-b border-divider-subtle'>
                   <div className='grow flex items-center py-2 px-3'>
-                    <Avatar size={24} className='mr-2' name={account.name} />
+                    <Avatar avatar={account.avatar_url} size={24} className='mr-2' name={account.name} />
                     <div className=''>
                       <div className='text-text-secondary system-sm-medium'>
                         {account.name}