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

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -0,0 +1,46 @@
+import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import type { UserLabel } from './UserAutoCompleteMultipleOptions';
+import { normalizeUsername } from '../../../lib/utils/normalizeUsername';
+
+export type UserAutoCompleteMultipleOptionProps = {
+	label: UserLabel;
+	value: string | number;
+	selected?: boolean;
+	focus?: boolean;
+	role?: string;
+};
+
+const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMultipleOptionProps) => {
+	const { name, _federated } = label;
+	const useRealName = useSetting('UI_Use_Real_Name');
+	const username = normalizeUsername(label.username);
+
+	const optionLabel = useMemo(() => {
+		if (!useRealName || !name) {
+			return <>{username}</>;
+		}
+
+		return (
+			<>
+				{name} {!_federated && <OptionDescription>@{username}</OptionDescription>}
+			</>
+		);
+	}, [_federated, name, useRealName, username]);
+
+	return (
+		<Option
+			{...props}
+			aria-label={username}
+			avatar={_federated ? undefined : <UserAvatar username={username || ''} size='x20' />}
+			icon={_federated ? 'globe' : undefined}
+			key={username}
+			label={optionLabel}
+		/>
+	);
+};
+
+export default UserAutoCompleteMultipleOption;