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

apps/meteor/client/components/message/content/reactions/Reaction.tsx

@@ -0,0 +1,74 @@
+import { MessageReaction as MessageReactionTemplate, MessageReactionEmoji, MessageReactionCounter } from '@rocket.chat/fuselage';
+import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
+import { useTooltipClose, useTooltipOpen } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useRef, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ReactionTooltip from './ReactionTooltip';
+import { normalizeUsername } from '../../../../../lib/utils/normalizeUsername';
+import { getEmojiClassNameAndDataTitle } from '../../../../lib/utils/renderEmoji';
+import { MessageListContext } from '../../list/MessageListContext';
+
+const normalizeUsernames = (names: string[]) => names.map<string>(normalizeUsername);
+
+// TODO: replace it with proper usage of i18next plurals
+export type ReactionProps = {
+	hasReacted: (name: string) => boolean;
+	counter: number;
+	name: string;
+	names: string[];
+	messageId: string;
+	onClick: () => void;
+} & ComponentProps<typeof MessageReactionTemplate>;
+
+const Reaction = ({ hasReacted, counter, name, names, messageId, onClick, ...props }: ReactionProps) => {
+	const { t } = useTranslation();
+	const ref = useRef<HTMLDivElement>(null);
+	const openTooltip = useTooltipOpen();
+	const closeTooltip = useTooltipClose();
+	const { showRealName, username } = useContext(MessageListContext);
+
+	const mine = hasReacted(name);
+
+	const emojiProps = getEmojiClassNameAndDataTitle(name);
+	const buttonProps = useButtonPattern(onClick);
+
+	return (
+		<MessageReactionTemplate
+			ref={ref}
+			key={name}
+			mine={mine}
+			aria-label={t('React_with__reaction__', { reaction: name })}
+			// if data-tooltip is not set, the tooltip will close on first mouse enter
+			data-tooltip=''
+			onMouseEnter={async (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+
+				ref.current &&
+					openTooltip(
+						<ReactionTooltip
+							emojiName={name}
+							usernames={normalizeUsernames(names)}
+							mine={mine}
+							messageId={messageId}
+							showRealName={showRealName}
+							username={username}
+						/>,
+						ref.current,
+					);
+			}}
+			onMouseLeave={(): void => {
+				closeTooltip();
+			}}
+			{...buttonProps}
+			{...props}
+		>
+			<MessageReactionEmoji {...emojiProps} />
+			<MessageReactionCounter counter={counter} />
+		</MessageReactionTemplate>
+	);
+};
+
+export default Reaction;