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

apps/meteor/client/components/message/variants/SystemMessage.tsx

@@ -0,0 +1,131 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import {
+	MessageSystem,
+	MessageSystemBody,
+	MessageSystemContainer,
+	MessageSystemLeftContainer,
+	MessageSystemName,
+	MessageSystemTimestamp,
+	MessageSystemBlock,
+	CheckBox,
+	MessageUsername,
+	MessageNameContainer,
+} from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import { MessageTypes } from '@rocket.chat/message-types';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useUserPresence, useUserCard } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, KeyboardEvent } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { normalizeUsername } from '../../../../lib/utils/normalizeUsername';
+import {
+	useIsSelecting,
+	useToggleSelect,
+	useIsSelectedMessage,
+	useCountSelected,
+} from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
+import Attachments from '../content/Attachments';
+import MessageActions from '../content/MessageActions';
+import { getCheckboxLabel } from '../helpers/getCheckboxLabel';
+import {
+	useMessageListShowRealName,
+	useMessageListShowUsername,
+	useMessageListFormatDateAndTime,
+	useMessageListFormatTime,
+} from '../list/MessageListContext';
+
+export type SystemMessageProps = {
+	message: IMessage;
+	showUserAvatar: boolean;
+} & ComponentProps<typeof MessageSystem>;
+
+const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps) => {
+	const { t } = useTranslation();
+	const formatTime = useMessageListFormatTime();
+	const formatDateAndTime = useMessageListFormatDateAndTime();
+	const { triggerProps, openUserCard } = useUserCard();
+
+	const showRealName = useMessageListShowRealName();
+	const user = { ...message.u, roles: [], ...useUserPresence(message.u._id) };
+	const normalizedUsername = normalizeUsername(user.username);
+	const usernameAndRealNameAreSame = !user.name || normalizedUsername === user.name;
+	const showUsername = useMessageListShowUsername() && showRealName && !usernameAndRealNameAreSame;
+	const displayName = useUserDisplayName(user);
+
+	const messageType = MessageTypes.getType(message);
+
+	const isSelecting = useIsSelecting();
+	const toggleSelected = useToggleSelect(message._id);
+	const isSelected = useIsSelectedMessage(message._id);
+	useCountSelected();
+	const buttonProps = useButtonPattern((e) => openUserCard(e, user.username));
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+		if (!isSelecting) return;
+
+		if (!(e.code === 'Space' || e.code === 'Enter')) return;
+
+		e.preventDefault();
+		toggleSelected();
+	};
+
+	const checkboxLabel = getCheckboxLabel(message, t);
+
+	return (
+		<MessageSystem
+			role='listitem'
+			aria-roledescription={t('system_message')}
+			tabIndex={0}
+			onClick={isSelecting ? toggleSelected : undefined}
+			onKeyDown={handleKeyDown}
+			isSelected={isSelected}
+			data-system-message-type={message.t}
+			{...props}
+		>
+			<MessageSystemLeftContainer>
+				{!isSelecting && showUserAvatar && <UserAvatar username={message.u.username} size='x18' />}
+				{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} aria-label={checkboxLabel} />}
+			</MessageSystemLeftContainer>
+			<MessageSystemContainer>
+				<MessageSystemBlock>
+					<MessageNameContainer style={{ cursor: 'pointer' }} {...buttonProps} {...triggerProps}>
+						<MessageSystemName>{displayName}</MessageSystemName>
+						{showUsername && (
+							<>
+								{' '}
+								<MessageUsername data-username={normalizedUsername}>@{normalizedUsername}</MessageUsername>
+							</>
+						)}
+					</MessageNameContainer>
+					{messageType && (
+						<MessageSystemBody role='document' aria-roledescription={t('system_message_body')}>
+							{messageType.text(t, message)}
+						</MessageSystemBody>
+					)}
+					<MessageSystemTimestamp title={formatDateAndTime(message.ts)}>{formatTime(message.ts)}</MessageSystemTimestamp>
+				</MessageSystemBlock>
+				{message.attachments && (
+					<MessageSystemBlock>
+						<Attachments attachments={message.attachments} />
+					</MessageSystemBlock>
+				)}
+				{message.actionLinks?.length && (
+					<MessageActions
+						message={message}
+						actions={message.actionLinks.map(({ method_id: methodId, i18nLabel, ...action }) => ({
+							methodId,
+							i18nLabel: i18nLabel as TranslationKey,
+							...action,
+						}))}
+					/>
+				)}
+			</MessageSystemContainer>
+		</MessageSystem>
+	);
+};
+
+export default memo(SystemMessage);