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

apps/meteor/client/components/UserStatusText/ReactiveUserStatusText.tsx

@@ -0,0 +1,16 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { useUserPresence } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import UserStatusText from './UserStatusText';
+
+export type ReactiveUserStatusTextProps = {
+	uid: IUser['_id'];
+};
+
+const ReactiveUserStatusText = ({ uid }: ReactiveUserStatusTextProps) => {
+	const presence = useUserPresence(uid);
+	return <UserStatusText status={presence?.status} statusText={presence?.statusText} statusExpiresAt={presence?.statusExpiresAt} />;
+};
+
+export default memo(ReactiveUserStatusText);

apps/meteor/client/components/UserStatusText/UserStatusText.tsx

@@ -0,0 +1,47 @@
+import { UserStatus } from '@rocket.chat/core-typings';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import { isTruthy } from '@rocket.chat/tools';
+import { useTranslation } from 'react-i18next';
+
+import { useExpirationText } from '../../hooks/useExpirationText';
+import MarkdownText from '../MarkdownText';
+
+const STATUS_LABEL_KEYS: Record<UserStatus, string> = {
+	[UserStatus.ONLINE]: 'Online',
+	[UserStatus.AWAY]: 'Away',
+	[UserStatus.BUSY]: 'Busy',
+	[UserStatus.OFFLINE]: 'Offline',
+	[UserStatus.DISABLED]: 'Disabled',
+};
+
+export type UserStatusTextProps = {
+	status?: UserStatus;
+	statusText?: string;
+	statusExpiresAt?: Date | string;
+};
+
+const UserStatusText = ({ status, statusText, statusExpiresAt }: UserStatusTextProps) => {
+	const { t } = useTranslation();
+	const expirationText = useExpirationText(statusExpiresAt);
+
+	const statusLabel = status ? t(STATUS_LABEL_KEYS[status] ?? STATUS_LABEL_KEYS[UserStatus.OFFLINE]) : undefined;
+	const headline = [statusLabel, statusText].filter(isTruthy).join(' - ');
+
+	if (!headline && !expirationText) {
+		return null;
+	}
+
+	return (
+		<>
+			{headline && <MarkdownText content={headline} parseEmoji={true} variant='inline' />}
+			{expirationText && (
+				<Box fontScale='c1' display='flex' alignItems='center'>
+					<Icon name='clock' size='x16' marginInlineEnd={4} />
+					{expirationText}
+				</Box>
+			)}
+		</>
+	);
+};
+
+export default UserStatusText;

apps/meteor/client/components/UserStatusText/index.ts

@@ -0,0 +1,2 @@
+export { default as UserStatusText } from './UserStatusText';
+export { default as ReactiveUserStatusText } from './ReactiveUserStatusText';