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

apps/meteor/client/components/UserInfo/UserInfo.tsx

@@ -0,0 +1,233 @@
+import type { IUser, Serialized } from '@rocket.chat/core-typings';
+import { Box, Margins, Tag } from '@rocket.chat/fuselage';
+import {
+	useUserDisplayName,
+	ContextualbarScrollableContent,
+	InfoPanel,
+	InfoPanelActionGroup,
+	InfoPanelAvatar,
+	InfoPanelField,
+	InfoPanelLabel,
+	InfoPanelSection,
+	InfoPanelText,
+	InfoPanelTitle,
+} from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+import { memo, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useTimeAgo } from '../../hooks/useTimeAgo';
+import { useUserCustomFields } from '../../hooks/useUserCustomFields';
+import MarkdownText from '../MarkdownText';
+import UTCClock from '../UTCClock';
+import { UserCardRoles } from '../UserCard';
+import UserInfoABACAttributes from './UserInfoABACAttributes';
+import UserInfoAvatar from './UserInfoAvatar';
+
+type UserInfoDataProps = Serialized<
+	Pick<
+		IUser,
+		| 'name'
+		| 'username'
+		| 'nickname'
+		| 'bio'
+		| 'lastLogin'
+		| 'avatarETag'
+		| 'utcOffset'
+		| 'phone'
+		| 'createdAt'
+		| 'canViewAllInfo'
+		| 'customFields'
+		| 'freeSwitchExtension'
+		| 'abacAttributes'
+	>
+>;
+
+export type UserInfoProps = UserInfoDataProps & {
+	status: ReactNode;
+	customStatus?: ReactNode;
+	email?: string;
+	verified?: boolean;
+	actions: ReactNode;
+	roles: ReactNode[];
+	reason?: string;
+	invitationDate?: string;
+};
+
+const UserInfo = ({
+	username,
+	name,
+	lastLogin,
+	nickname,
+	bio,
+	avatarETag,
+	roles,
+	utcOffset,
+	phone,
+	email,
+	verified,
+	createdAt,
+	status,
+	customStatus,
+	customFields,
+	canViewAllInfo,
+	actions,
+	reason,
+	freeSwitchExtension,
+	abacAttributes,
+	invitationDate,
+	...props
+}: UserInfoProps) => {
+	const { t } = useTranslation();
+	const timeAgo = useTimeAgo();
+	const userDisplayName = useUserDisplayName({ name, username });
+	const userCustomFields = useUserCustomFields(customFields);
+
+	const usernameId = useId();
+
+	return (
+		<ContextualbarScrollableContent padding={24} {...props}>
+			<InfoPanel>
+				{username && (
+					<InfoPanelAvatar>
+						<UserInfoAvatar username={username} etag={avatarETag} />
+					</InfoPanelAvatar>
+				)}
+
+				{actions && <InfoPanelActionGroup>{actions}</InfoPanelActionGroup>}
+
+				<InfoPanelSection>
+					{userDisplayName && <InfoPanelTitle icon={status} title={userDisplayName} />}
+
+					{customStatus && <InfoPanelText>{customStatus}</InfoPanelText>}
+				</InfoPanelSection>
+
+				<InfoPanelSection>
+					{reason && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Reason_for_joining')}</InfoPanelLabel>
+							<InfoPanelText>{reason}</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{nickname && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Nickname')}</InfoPanelLabel>
+							<InfoPanelText>{nickname}</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{roles?.length !== 0 && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Roles')}</InfoPanelLabel>
+							<UserCardRoles>{roles}</UserCardRoles>
+						</InfoPanelField>
+					)}
+
+					{username && username !== name && (
+						<InfoPanelField is='dl'>
+							<InfoPanelLabel is='dt' id={usernameId}>
+								{t('Username')}
+							</InfoPanelLabel>
+							<InfoPanelText is='dd' aria-labelledby={usernameId}>
+								{username}
+							</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{utcOffset && Number.isInteger(utcOffset) && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Local_Time')}</InfoPanelLabel>
+							<InfoPanelText>
+								<UTCClock utcOffset={utcOffset} />
+							</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{bio && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Bio')}</InfoPanelLabel>
+							<InfoPanelText withTruncatedText={false}>
+								<MarkdownText variant='inline' content={bio} />
+							</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{Number.isInteger(utcOffset) && canViewAllInfo && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Last_login')}</InfoPanelLabel>
+							<InfoPanelText>{lastLogin ? timeAgo(lastLogin) : t('Never')}</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{phone && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Phone')}</InfoPanelLabel>
+							<InfoPanelText display='flex' flexDirection='row' alignItems='center'>
+								<Box is='a' withTruncatedText href={`tel:${phone}`}>
+									{phone}
+								</Box>
+							</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{email && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Email')}</InfoPanelLabel>
+							<InfoPanelText display='flex' flexDirection='row' alignItems='center'>
+								<Box is='a' withTruncatedText href={`mailto:${email}`}>
+									{email}
+								</Box>
+								<Margins inline={4}>
+									<Tag>{verified ? t('Verified') : t('Not_verified')}</Tag>
+								</Margins>
+							</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{freeSwitchExtension && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Voice_call_extension')}</InfoPanelLabel>
+							<InfoPanelText>{freeSwitchExtension}</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{abacAttributes && abacAttributes.length > 0 && (
+						<InfoPanelField>
+							<InfoPanelLabel title={t('ABAC_Attributes_description')}>{t('ABAC_Attributes')}</InfoPanelLabel>
+							<UserInfoABACAttributes abacAttributes={abacAttributes} />
+						</InfoPanelField>
+					)}
+					{userCustomFields?.map(
+						(customField) =>
+							customField?.value && (
+								<InfoPanelField key={customField.value}>
+									<InfoPanelLabel>{t(customField.label as TranslationKey)}</InfoPanelLabel>
+									<InfoPanelText>
+										<MarkdownText content={customField.value} variant='inline' />
+									</InfoPanelText>
+								</InfoPanelField>
+							),
+					)}
+
+					{invitationDate && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Invitation_date')}</InfoPanelLabel>
+							<InfoPanelText>{timeAgo(invitationDate)}</InfoPanelText>
+						</InfoPanelField>
+					)}
+
+					{createdAt && (
+						<InfoPanelField>
+							<InfoPanelLabel>{t('Created_at')}</InfoPanelLabel>
+							<InfoPanelText>{timeAgo(createdAt)}</InfoPanelText>
+						</InfoPanelField>
+					)}
+				</InfoPanelSection>
+			</InfoPanel>
+		</ContextualbarScrollableContent>
+	);
+};
+
+export default memo(UserInfo);