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

packages/ui-avatar/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "@rocket.chat/ui-avatar",
+	"version": "30.0.0",
+	"private": true,
+	"main": "./dist/index.js",
+	"typings": "./dist/index.d.ts",
+	"files": [
+		"/dist"
+	],
+	"scripts": {
+		"build": "rm -rf dist && tsc -p tsconfig.build.json",
+		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+		"lint": "eslint .",
+		"lint:fix": "eslint --fix .",
+		"typecheck": "tsc -p tsconfig.json --noEmit"
+	},
+	"devDependencies": {
+		"@rocket.chat/core-typings": "workspace:~",
+		"@rocket.chat/emitter": "workspace:~",
+		"@rocket.chat/fuselage": "^0.89.0",
+		"@rocket.chat/fuselage-hooks": "^0.43.1",
+		"@rocket.chat/fuselage-tokens": "^0.34.0",
+		"@rocket.chat/icons": "^0.49.0",
+		"@rocket.chat/ui-contexts": "workspace:^",
+		"@types/react": "~19.2.18",
+		"@types/react-dom": "~19.2.5",
+		"eslint": "~9.39.5",
+		"react": "~19.2.8",
+		"react-dom": "~19.2.8",
+		"react-virtuoso": "~4.18.12",
+		"typescript": "~5.9.3"
+	},
+	"peerDependencies": {
+		"@rocket.chat/fuselage": "*",
+		"@rocket.chat/ui-contexts": "workspace:^",
+		"react": "*"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
+}

packages/ui-avatar/src/components/AppAvatar.tsx

@@ -0,0 +1,11 @@
+import type { BaseAvatarProps } from './BaseAvatar';
+import BaseAvatar from './BaseAvatar';
+
+export type AppAvatarProps = Pick<BaseAvatarProps, 'size'> & {
+	iconFileContent: string;
+	iconFileData: string;
+};
+
+export default function AppAvatar({ iconFileContent, iconFileData, size }: AppAvatarProps) {
+	return <BaseAvatar size={size} url={iconFileContent || `data:image/png;base64,${iconFileData}`} />;
+}

packages/ui-avatar/src/components/BaseAvatar.tsx

@@ -0,0 +1,30 @@
+import type { AvatarProps } from '@rocket.chat/fuselage';
+import { Avatar, Skeleton } from '@rocket.chat/fuselage';
+import { useStableCallback, usePrevious } from '@rocket.chat/fuselage-hooks';
+import type { SyntheticEvent } from 'react';
+import { useState } from 'react';
+
+export type BaseAvatarProps = Omit<AvatarProps, 'is'>;
+
+const BaseAvatar = ({ url, onLoad, onError, size, ...props }: BaseAvatarProps) => {
+	const [unloaded, setUnloaded] = useState(false);
+	const prevUrl = usePrevious(url);
+
+	const handleLoad = useStableCallback((event: SyntheticEvent<HTMLImageElement, Event>) => {
+		setUnloaded(false);
+		onLoad?.(event);
+	});
+
+	const handleError = useStableCallback((event: SyntheticEvent<HTMLImageElement, ErrorEvent>) => {
+		setUnloaded(true);
+		onError?.(event);
+	});
+
+	if (unloaded && url === prevUrl) {
+		return <Skeleton aria-hidden='true' variant='rect' width={size} height={size} {...props} />;
+	}
+
+	return <Avatar aria-hidden='true' onLoad={handleLoad} onError={handleError} url={url} size={size} {...props} />;
+};
+
+export default BaseAvatar;

packages/ui-avatar/src/components/MessageAvatar.tsx

@@ -0,0 +1,51 @@
+import { css } from '@rocket.chat/css-in-js';
+import { AvatarContainer, Box } from '@rocket.chat/fuselage';
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
+
+import UserAvatar from './UserAvatar';
+
+export type MessageAvatarProps = {
+	emoji?: ReactNode;
+	avatarUrl?: string;
+	username: string;
+	size?: ComponentProps<typeof UserAvatar>['size'];
+} & Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const DEFAULT_EMOJI_FONT_SIZE = '2.25rem';
+
+const getEmojiFontSize = (size: ComponentProps<typeof UserAvatar>['size']): string => {
+	const px = Number(size?.slice(1));
+	return Number.isFinite(px) && px > 0 ? `${px / 16}rem` : DEFAULT_EMOJI_FONT_SIZE;
+};
+
+const MessageAvatar = ({ emoji, avatarUrl, username, size = 'x36', ...props }: MessageAvatarProps) => {
+	if (emoji) {
+		const styleMessageAvatar = css`
+			overflow: hidden;
+			min-width: 0;
+			font-size: ${getEmojiFontSize(size)};
+			line-height: 1;
+
+			.emoji {
+				font-size: inherit;
+				line-height: inherit;
+			}
+
+			.emoji:not(.emoji--custom) {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		`;
+
+		return (
+			<AvatarContainer size={size} {...props}>
+				<Box className={styleMessageAvatar}>{emoji}</Box>
+			</AvatarContainer>
+		);
+	}
+
+	return <UserAvatar url={avatarUrl} username={username} size={size} {...props} />;
+};
+
+export default MessageAvatar;

packages/ui-avatar/src/components/RoomAvatar.tsx

@@ -0,0 +1,24 @@
+import { useRoomAvatarPath } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import type { BaseAvatarProps } from './BaseAvatar';
+import Avatar from './BaseAvatar';
+
+export type RoomAvatarProps = Pick<BaseAvatarProps, 'size'> & {
+	url?: string;
+	room: {
+		_id: string;
+		type?: string;
+		t?: string;
+		avatarETag?: string;
+	};
+};
+
+const RoomAvatar = function RoomAvatar({ room, url, size }: RoomAvatarProps) {
+	const getRoomPathAvatar = useRoomAvatarPath();
+	const urlFromContext = getRoomPathAvatar(room);
+
+	return <Avatar url={url || urlFromContext} size={size} />;
+};
+
+export default memo(RoomAvatar);

packages/ui-avatar/src/components/UserAvatar.tsx

@@ -0,0 +1,40 @@
+import { useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { BaseAvatarProps } from './BaseAvatar';
+import BaseAvatar from './BaseAvatar';
+
+type UsernameProp = {
+	username: string;
+	userId?: never;
+};
+
+type UserIdProp = {
+	userId: string;
+	username?: never;
+};
+export type UserAvatarProps = Omit<BaseAvatarProps, 'url' | 'title'> & {
+	etag?: string | null;
+	url?: string;
+	title?: string;
+} & (UsernameProp | UserIdProp);
+
+const UserAvatar = ({ username, userId, etag, ...rest }: UserAvatarProps) => {
+	const getUserAvatarPath = useUserAvatarPath();
+	const { t } = useTranslation();
+
+	if (userId) {
+		const { url = getUserAvatarPath({ userId, etag }), ...props } = rest;
+		return <BaseAvatar url={url} alt={t('Avatar')} {...props} />;
+	}
+	if (username) {
+		const { url = getUserAvatarPath({ username, etag }), ...props } = rest;
+		return <BaseAvatar url={url} data-username={username} title={username} alt={t('Avatar')} {...props} />;
+	}
+
+	// TODO: We should throw an Error after fixing the issue in Composer passing the username undefined
+	return null;
+};
+
+export default memo(UserAvatar);

packages/ui-avatar/src/index.ts

@@ -0,0 +1,5 @@
+export { default as BaseAvatar } from './components/BaseAvatar';
+export { default as AppAvatar } from './components/AppAvatar';
+export { default as RoomAvatar } from './components/RoomAvatar';
+export { default as UserAvatar } from './components/UserAvatar';
+export { default as MessageAvatar } from './components/MessageAvatar';

packages/ui-avatar/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+	"extends": "./tsconfig.json",
+	"exclude": ["**/*.stories.tsx"]
+}

packages/ui-avatar/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "@rocket.chat/tsconfig/client.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist"
+	},
+	"include": ["./src/**/*"]
+}