upstream-rocketchat/apps/meteor/client/components/message/variants/RoomMessage.tsx

import type { IMessage } from '@rocket.chat/core-typings';
import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rocket.chat/fuselage';
import { useToggle } from '@rocket.chat/fuselage-hooks';
import { MessageAvatar } from '@rocket.chat/ui-avatar';
import { useUserId, useUserCard } from '@rocket.chat/ui-contexts';
import type { ComponentProps, KeyboardEvent } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import type { MessageActionContext } from '../../../lib/MessageAction';
import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
import {
	useIsSelecting,
	useToggleSelect,
	useIsSelectedMessage,
	useCountSelected,
} from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
import Emoji from '../../Emoji';
import IgnoredContent from '../IgnoredContent';
import MessageHeader from '../MessageHeader';
import MessageToolbarHolder from '../MessageToolbarHolder';
import StatusIndicators from '../StatusIndicators';
import RoomMessageContent from './room/RoomMessageContent';
import { getCheckboxLabel } from '../helpers/getCheckboxLabel';
import { useMessageListReadReceipts } from '../list/MessageListContext';

export type RoomMessageProps = {
	message: IMessage & { ignored?: boolean };
	showUserAvatar: boolean;
	sequential: boolean;
	unread: boolean;
	mention: boolean;
	all: boolean;
	context?: MessageActionContext;
	ignoredUser?: boolean;
	searchText?: string;
} & ComponentProps<typeof Message>;

const getAriaLabelledBy = ({
	readReceiptEnabled,
	messageId,
	sequential,
}: {
	readReceiptEnabled: boolean;
	messageId: string;
	sequential: boolean;
}) => {
	const labels: string[] = [];

	if (!sequential) {
		labels.push(`${messageId}-displayName`, `${messageId}-time`);
	}

	labels.push(`${messageId}-content`);

	if (readReceiptEnabled) {
		labels.push(`${messageId}-read-status`);
	}

	return labels.join(' ');
};

const RoomMessage = ({
	message,
	showUserAvatar,
	sequential,
	all,
	mention,
	unread,
	context,
	ignoredUser,
	searchText,
	...props
}: RoomMessageProps) => {
	const { t } = useTranslation();
	const uid = useUserId();
	const editing = useIsMessageHighlight(message._id);
	const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false);
	const ignored = (ignoredUser || message.ignored) && !displayIgnoredMessage;
	const { openUserCard, triggerProps } = useUserCard();

	const selecting = useIsSelecting();

	const toggleSelected = useToggleSelect(message._id);
	const selected = useIsSelectedMessage(message._id);

	const { enabled: readReceiptEnabled } = useMessageListReadReceipts();

	useCountSelected();

	const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
		if (!selecting) return;

		if (!(e.code === 'Space' || e.code === 'Enter')) return;

		e.preventDefault();
		toggleSelected();
	};

	const checkboxLabel = getCheckboxLabel(message, t);

	return (
		<Message
			id={message._id}
			role='listitem'
			tabIndex={0}
			aria-roledescription={t('message')}
			aria-labelledby={getAriaLabelledBy({ readReceiptEnabled, messageId: message._id, sequential })}
			onClick={selecting ? toggleSelected : undefined}
			onKeyDown={handleKeyDown}
			isSelected={selected}
			isEditing={editing}
			isPending={message.temp}
			sequential={sequential}
			data-id={message._id}
			data-mid={message._id}
			data-unread={unread}
			data-sequential={sequential}
			data-own={message.u._id === uid}
			aria-busy={message.temp}
			{...props}
		>
			<MessageLeftContainer>
				{!sequential && message.u.username && !selecting && showUserAvatar && (
					<MessageAvatar
						emoji={message.emoji ? <Emoji emojiHandle={message.emoji} fillContainer /> : undefined}
						avatarUrl={message.avatar}
						username={message.u.username}
						size='x36'
						onClick={(e) => openUserCard(e, message.u.username)}
						style={{ cursor: 'pointer' }}
						role='button'
						{...triggerProps}
					/>
				)}
				{selecting && <CheckBox checked={selected} onChange={toggleSelected} aria-label={checkboxLabel} />}
				{sequential && <StatusIndicators message={message} />}
			</MessageLeftContainer>
			<MessageContainer>
				{!sequential && <MessageHeader message={message} />}
				{ignored ? (
					<IgnoredContent messageId={message._id} onShowMessageIgnored={toggleDisplayIgnoredMessage} />
				) : (
					<RoomMessageContent message={message} unread={unread} mention={mention} all={all} searchText={searchText} />
				)}
			</MessageContainer>
			{!message.private && message?.e2e !== 'pending' && !selecting && <MessageToolbarHolder message={message} context={context} />}
		</Message>
	);
};

export default memo(RoomMessage);