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;

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

@@ -0,0 +1,101 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { useGetMessageByID } from '../../../../views/room/contextualBar/Threads/hooks/useGetMessageByID';
+import MarkdownText from '../../../MarkdownText';
+
+export type ReactionTooltipProps = {
+	emojiName: string;
+	usernames: string[];
+	username: string | undefined;
+	mine: boolean;
+	showRealName: boolean;
+	messageId: string;
+};
+
+const getTranslationKey = (users: string[], mine: boolean): TranslationKey => {
+	if (users.length === 0) {
+		if (mine) {
+			return 'You_reacted_with';
+		}
+	}
+
+	if (users.length > 10) {
+		if (mine) {
+			return 'You_users_and_more_Reacted_with';
+		}
+		return 'Users_and_more_reacted_with';
+	}
+
+	if (mine) {
+		return 'You_and_users_Reacted_with';
+	}
+	return 'Users_reacted_with';
+};
+
+const ReactionTooltip = ({ emojiName, usernames, mine, messageId, showRealName, username }: ReactionTooltipProps) => {
+	const { t } = useTranslation();
+
+	const key = getTranslationKey(usernames, mine);
+
+	const getMessage = useGetMessageByID();
+
+	const { data: users, isLoading } = useQuery({
+		queryKey: ['chat.getMessage', 'reactions', messageId, usernames],
+
+		queryFn: async () => {
+			// This happens if the only reaction is from the current user
+			if (!usernames.length) {
+				return [];
+			}
+
+			if (!showRealName) {
+				return usernames;
+			}
+
+			const data = await getMessage(messageId);
+
+			const { reactions } = data;
+
+			if (!reactions) {
+				return [];
+			}
+
+			if (username) {
+				const index = reactions[emojiName].usernames.indexOf(username);
+				index >= 0 && reactions[emojiName].names?.splice(index, 1);
+				return (reactions[emojiName].names || usernames).filter(Boolean);
+			}
+
+			return reactions[emojiName].names || usernames;
+		},
+
+		staleTime: 1000 * 60 * 5,
+	});
+
+	if (isLoading) {
+		return (
+			<>
+				<Skeleton width='x200' variant='text' backgroundColor='surface-light' />
+				<Skeleton width='x200' variant='text' backgroundColor='surface-light' />
+				{usernames.length > 5 && <Skeleton width='x200' variant='text' backgroundColor='surface-light' />}
+				{usernames.length > 8 && <Skeleton width='x200' variant='text' backgroundColor='surface-light' />}
+			</>
+		);
+	}
+
+	return (
+		<MarkdownText
+			content={t(key, {
+				counter: usernames.length > 10 ? usernames.length - 10 : usernames.length,
+				users: users?.slice(0, 10).join(', ') || '',
+				emoji: emojiName,
+			})}
+			variant='inline'
+		/>
+	);
+};
+
+export default ReactionTooltip;

apps/meteor/client/components/message/content/reactions/useToggleReactionMutation.spec.ts

@@ -0,0 +1,36 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useToggleReactionMutation } from './useToggleReactionMutation';
+
+it('should be call rest `POST /v1/chat.react` method', async () => {
+	const fn = jest.fn();
+
+	const { result } = renderHook(() => useToggleReactionMutation(), {
+		wrapper: mockAppRoot().withEndpoint('POST', '/v1/chat.react', fn).withJohnDoe().build(),
+	});
+
+	result.current.mutate({ mid: 'MID', reaction: 'smile' });
+
+	await waitFor(() => expect(result.current.status).toBe('success'));
+
+	expect(fn).toHaveBeenCalledWith({
+		messageId: 'MID',
+		reaction: 'smile',
+	});
+});
+
+it('should not work for non-logged in users', async () => {
+	const fn = jest.fn();
+
+	const { result } = renderHook(() => useToggleReactionMutation(), {
+		wrapper: mockAppRoot().withEndpoint('POST', '/v1/chat.react', fn).build(),
+	});
+
+	result.current.mutate({ mid: 'MID', reaction: 'smile' });
+
+	await waitFor(() => expect(result.current.status).toBe('error'));
+
+	expect(fn).not.toHaveBeenCalled();
+	expect(result.current.error).toEqual(new Error('Not logged in'));
+});

apps/meteor/client/components/message/content/reactions/useToggleReactionMutation.ts

@@ -0,0 +1,28 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useEndpoint, useUserId } from '@rocket.chat/ui-contexts';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+type UseToggleReactionMutationVariables = {
+	mid: IMessage['_id'];
+	reaction: string;
+};
+
+export const useToggleReactionMutation = (
+	options?: Omit<UseMutationOptions<void, Error, UseToggleReactionMutationVariables>, 'mutationFn'>,
+): UseMutationResult<void, Error, UseToggleReactionMutationVariables> => {
+	const uid = useUserId();
+	const reactToMessage = useEndpoint('POST', '/v1/chat.react');
+
+	return useMutation({
+		mutationFn: async ({ mid, reaction }) => {
+			if (!uid) {
+				throw new Error('Not logged in');
+			}
+
+			await reactToMessage({ messageId: mid, reaction });
+		},
+
+		...options,
+	});
+};