snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx

@@ -0,0 +1,160 @@
+import type { IUser, AvatarObject } from '@rocket.chat/core-typings';
+import { Box, Button, Avatar, IconButton } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, FieldError, TextInput } from '@rocket.chat/fuselage-forms';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useToastMessageDispatch, useSetting } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent } from 'react';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
+import UserAvatarSuggestions from './UserAvatarSuggestions';
+import { readFileAsDataURL } from './readFileAsDataURL';
+import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
+import { isSafeAvatarUrl } from '../../../lib/utils/isSafeAvatarUrl';
+import { isValidImageFormat } from '../../../lib/utils/isValidImageFormat';
+
+export type UserAvatarEditorProps = {
+	currentUsername: IUser['username'];
+	username: IUser['username'];
+	setAvatarObj: (obj: AvatarObject) => void;
+	disabled?: boolean;
+	etag: IUser['avatarETag'];
+	name: IUser['name'];
+};
+
+function UserAvatarEditor({ currentUsername, username, setAvatarObj, name, disabled, etag }: UserAvatarEditorProps) {
+	const { t } = useTranslation();
+	const useFullNameForDefaultAvatar = useSetting('UI_Use_Name_Avatar');
+	const rotateImages = useSetting('FileUpload_RotateImages');
+	const [avatarFromUrl, setAvatarFromUrl] = useState('');
+	const [newAvatarSource, setNewAvatarSource] = useState<string>();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const [avatarUrlError, setAvatarUrlError] = useState<string | undefined>(undefined);
+
+	const setUploadedPreview = useCallback(
+		async (file: File, avatarObj: AvatarObject) => {
+			setAvatarObj(avatarObj);
+			try {
+				const dataURL = await readFileAsDataURL(file);
+
+				if (await isValidImageFormat(dataURL)) {
+					setNewAvatarSource(dataURL);
+				}
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: t('Avatar_format_invalid') });
+			}
+		},
+		[setAvatarObj, t, dispatchToastMessage],
+	);
+
+	const [clickUpload] = useSingleFileInput(setUploadedPreview);
+
+	const canAddUrl = !disabled && Boolean(avatarFromUrl) && !avatarUrlError;
+
+	const handleAddUrl = async (): Promise<void> => {
+		if (!canAddUrl) {
+			return;
+		}
+
+		if (!isSafeAvatarUrl(avatarFromUrl)) {
+			setAvatarUrlError(t('error-invalid-image-url'));
+			return;
+		}
+
+		if (!(await isValidImageFormat(avatarFromUrl))) {
+			setAvatarUrlError(t('error-invalid-image-url'));
+			return;
+		}
+
+		setNewAvatarSource(avatarFromUrl);
+		setAvatarObj({ avatarUrl: avatarFromUrl });
+		setAvatarUrlError(undefined);
+		dispatchToastMessage({ type: 'info', message: t('Avatar_preview_updated') });
+	};
+
+	const clickReset = (): void => {
+		setNewAvatarSource(`/avatar/%40${useFullNameForDefaultAvatar ? name : username}`);
+		setAvatarObj('reset');
+	};
+
+	const url = newAvatarSource;
+
+	const handleAvatarFromUrlChange = (event: ChangeEvent<HTMLInputElement>): void => {
+		if (avatarUrlError) {
+			setAvatarUrlError(undefined);
+		}
+		const { value } = event.currentTarget;
+		setAvatarFromUrl(value);
+	};
+
+	const handleSelectSuggestion = useCallback(
+		(suggestion: UserAvatarSuggestion) => {
+			setAvatarObj(suggestion as unknown as AvatarObject);
+			setNewAvatarSource(suggestion.blob);
+		},
+		[setAvatarObj, setNewAvatarSource],
+	);
+
+	return (
+		<Box display='flex' flexDirection='column' fontScale='p2m' color='default'>
+			{t('Profile_picture')}
+			<Box display='flex' flexDirection='row' marginBlockStart={4}>
+				<UserAvatar
+					size='x124'
+					url={url}
+					key={url}
+					alt={t('__username__profile_picture', { username: currentUsername || 'user' })}
+					username={currentUsername || ''}
+					etag={etag}
+					objectFit='contain'
+					style={{
+						imageOrientation: rotateImages ? 'from-image' : 'none',
+					}}
+					onError={() => setAvatarUrlError(t('error-invalid-image-url'))}
+				/>
+				<Box display='flex' flexDirection='column' flexGrow='1' marginInlineStart={4}>
+					<Box display='flex' flexDirection='row' marginBlockStart='none'>
+						<Button square disabled={disabled} marginInline={4} title={t('Accounts_SetDefaultAvatar')} onClick={clickReset}>
+							<Avatar url={`/avatar/%40${useFullNameForDefaultAvatar ? name : username}`} />
+						</Button>
+						<IconButton icon='upload' secondary disabled={disabled} title={t('Upload')} marginInline={4} onClick={clickUpload} />
+						<UserAvatarSuggestions disabled={disabled} onSelectOne={handleSelectSuggestion} />
+					</Box>
+					<Field paddingInlineStart={4} marginBlockStart={12}>
+						<FieldLabel>{t('Use_url_for_avatar')}</FieldLabel>
+						<FieldRow>
+							<TextInput
+								placeholder={t('Use_url_for_avatar')}
+								endAddon={
+									<IconButton
+										icon='permalink'
+										secondary
+										small
+										disabled={!canAddUrl}
+										title={t('Add_URL')}
+										onClick={handleAddUrl}
+										marginBlock={-4}
+										marginInlineEnd={-4}
+									/>
+								}
+								disabled={disabled}
+								value={avatarFromUrl}
+								onChange={handleAvatarFromUrlChange}
+								error={avatarUrlError}
+								onKeyDown={(event): void => {
+									if (event.key === 'Enter') {
+										handleAddUrl();
+									}
+								}}
+							/>
+						</FieldRow>
+						{avatarUrlError && <FieldError>{avatarUrlError}</FieldError>}
+					</Field>
+				</Box>
+			</Box>
+		</Box>
+	);
+}
+
+export default UserAvatarEditor;

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts

@@ -0,0 +1,6 @@
+export type UserAvatarSuggestion = {
+	blob: string;
+	contentType: string;
+	service: string;
+	url: string;
+};

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx

@@ -0,0 +1,31 @@
+import { Button, Avatar } from '@rocket.chat/fuselage';
+import { useCallback } from 'react';
+
+import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
+import { useUserAvatarSuggestions } from './useUserAvatarSuggestions';
+
+export type UserAvatarSuggestionsProps = {
+	disabled?: boolean;
+	onSelectOne?: (suggestion: UserAvatarSuggestion) => void;
+};
+
+function UserAvatarSuggestions({ disabled, onSelectOne }: UserAvatarSuggestionsProps) {
+	const { data: suggestions = [] } = useUserAvatarSuggestions();
+
+	const handleClick = useCallback((suggestion: UserAvatarSuggestion) => () => onSelectOne?.(suggestion), [onSelectOne]);
+
+	return (
+		<>
+			{suggestions.map(
+				(suggestion) =>
+					suggestion.blob && (
+						<Button key={suggestion.service} square disabled={disabled} marginInline={4} onClick={handleClick(suggestion)}>
+							<Avatar title={suggestion.service} url={suggestion.blob} />
+						</Button>
+					),
+			)}
+		</>
+	);
+}
+
+export default UserAvatarSuggestions;

apps/meteor/client/components/avatar/UserAvatarEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './UserAvatarEditor';

apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts

@@ -0,0 +1,16 @@
+export const readFileAsDataURL = (file: File) =>
+	new Promise<string>((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onloadend = (event) => {
+			const result = event.target?.result;
+			if (typeof result === 'string') {
+				resolve(result);
+				return;
+			}
+			reject(new Error('Failed to read file'));
+		};
+		reader.onerror = (event) => {
+			reject(new Error(`Failed to read file: ${event}`));
+		};
+		reader.readAsDataURL(file);
+	});

apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts

@@ -0,0 +1,12 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+export const useUserAvatarSuggestions = () => {
+	const getAvatarSuggestions = useEndpoint('GET', '/v1/users.getAvatarSuggestion');
+
+	return useQuery({
+		queryKey: ['account', 'profile', 'avatar-suggestions'],
+		queryFn: async () => getAvatarSuggestions(),
+		select: (data) => Object.values(data.suggestions),
+	});
+};