chore: Improve usage of MessageListProvider

apps/meteor/client/components/GazzodownText.spec.tsx

@@ -13,6 +13,7 @@ jest.mock('@rocket.chat/fuselage-hooks', () => ({
 }));
 jest.mock('./message/list/MessageListContext', () => ({
 	useMessageListHighlights: jest.fn(),
+	useMessageListShowRealName: jest.fn(() => false),
 }));
 jest.mock('../lib/utils/fireGlobalEvent', () => ({
 	fireGlobalEvent: jest.fn(),
@@ -22,7 +23,6 @@ jest.mock('../views/room/hooks/useGoToRoom', () => ({
 }));
 
 const mockUseMessageListHighlights = useMessageListHighlights as jest.MockedFunction<typeof useMessageListHighlights>;
-
 const wrapper = mockAppRoot().withUserPreference('useEmojis', true).withSetting('UI_Use_Real_Name', false).withJohnDoe();
 
 const HighlightTester = ({ text }: { text: string }) => {

apps/meteor/client/components/GazzodownText.tsx

@@ -4,13 +4,13 @@ import type { ChannelMention, UserMention } from '@rocket.chat/gazzodown';
 import { MarkupInteractionContext } from '@rocket.chat/gazzodown';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { useFeaturePreview } from '@rocket.chat/ui-client';
-import { useLayout, useRouter, useSetting, useUserPreference, useUserId } from '@rocket.chat/ui-contexts';
+import { useLayout, useRouter, useUserPreference, useUserId } from '@rocket.chat/ui-contexts';
 import type { UIEvent } from 'react';
 import { useCallback, memo, useMemo } from 'react';
 
 import { detectEmoji } from '../lib/utils/detectEmoji';
 import { fireGlobalEvent } from '../lib/utils/fireGlobalEvent';
-import { useMessageListHighlights } from './message/list/MessageListContext';
+import { useMessageListHighlights, useMessageListShowRealName } from './message/list/MessageListContext';
 import { useUserCard } from '../views/room/contexts/UserCardContext';
 import { useGoToRoom } from '../views/room/hooks/useGoToRoom';
 
@@ -56,7 +56,7 @@ const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTe
 
 	const convertAsciiToEmoji = useUserPreference<boolean>('convertAsciiEmoji', true);
 	const useEmoji = Boolean(useUserPreference('useEmojis'));
-	const useRealName = useSetting('UI_Use_Real_Name', false);
+	const useRealName = useMessageListShowRealName();
 	const ownUserId = useUserId();
 	const showMentionSymbol = Boolean(useUserPreference<boolean>('mentionsWithSymbol'));
 

apps/meteor/client/components/message/MessageHeader.tsx

@@ -15,10 +15,14 @@ import { useTranslation } from 'react-i18next';
 
 import StatusIndicators from './StatusIndicators';
 import MessageRoles from './header/MessageRoles';
-import { useMessageListShowUsername, useMessageListShowRealName, useMessageListShowRoles } from './list/MessageListContext';
-import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
-import { useFormatTime } from '../../hooks/useFormatTime';
 import { useMessageRoles } from './header/hooks/useMessageRoles';
+import {
+	useMessageListShowUsername,
+	useMessageListShowRealName,
+	useMessageListShowRoles,
+	useMessageListFormatDateAndTime,
+	useMessageListFormatTime,
+} from './list/MessageListContext';
 import { useUserCard } from '../../views/room/contexts/UserCardContext';
 
 type MessageHeaderProps = {
@@ -28,8 +32,8 @@ type MessageHeaderProps = {
 const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 	const { t } = useTranslation();
 
-	const formatTime = useFormatTime();
-	const formatDateAndTime = useFormatDateAndTime();
+	const formatTime = useMessageListFormatTime();
+	const formatDateAndTime = useMessageListFormatDateAndTime();
 	const { triggerProps, openUserCard } = useUserCard();
 
 	const showRealName = useMessageListShowRealName();

apps/meteor/client/components/message/hooks/useNormalizedMessage.ts

@@ -8,15 +8,12 @@ import {
 	isQuoteAttachment,
 } from '@rocket.chat/core-typings';
 import type { Options } from '@rocket.chat/message-parser';
-import { useSetting } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import { useSubscriptionFromMessageQuery } from './useSubscriptionFromMessageQuery';
 import type { MessageWithMdEnforced } from '../../../lib/parseMessageTextToAstMarkdown';
 import { parseMessageTextToAstMarkdown } from '../../../lib/parseMessageTextToAstMarkdown';
 import { useAutoLinkDomains } from '../../../views/room/MessageList/hooks/useAutoLinkDomains';
-import { useAutoTranslate } from '../../../views/room/MessageList/hooks/useAutoTranslate';
-import { useKatex } from '../../../views/room/MessageList/hooks/useKatex';
+import { useMessageListAutoTranslate, useMessageListKatex, useMessageListShowColors } from '../list/MessageListContext';
 
 const normalizeAttachments = (attachments: MessageAttachment[], name?: string, type?: string): MessageAttachment[] => {
 	if (name) {
@@ -61,11 +58,11 @@ const normalizeAttachments = (attachments: MessageAttachment[], name?: string, t
 };
 
 export const useNormalizedMessage = <TMessage extends IMessage>(message: TMessage): MessageWithMdEnforced => {
-	const { katexEnabled, katexDollarSyntaxEnabled, katexParenthesisSyntaxEnabled } = useKatex();
+	const katex = useMessageListKatex();
+	const katexEnabled = !!katex;
 	const customDomains = useAutoLinkDomains();
-	const subscription = useSubscriptionFromMessageQuery(message).data ?? undefined;
-	const autoTranslateOptions = useAutoTranslate(subscription);
-	const showColors = useSetting('HexColorPreview_Enabled', true);
+	const autoTranslateOptions = useMessageListAutoTranslate();
+	const showColors = useMessageListShowColors();
 
 	return useMemo(() => {
 		const parseOptions: Options = {
@@ -74,8 +71,8 @@ export const useNormalizedMessage = <TMessage extends IMessage>(message: TMessag
 			customDomains,
 			...(katexEnabled && {
 				katex: {
-					dollarSyntax: katexDollarSyntaxEnabled,
-					parenthesisSyntax: katexParenthesisSyntaxEnabled,
+					dollarSyntax: katex.dollarSyntaxEnabled,
+					parenthesisSyntax: katex.parenthesisSyntaxEnabled,
 				},
 			}),
 		};
@@ -91,5 +88,5 @@ export const useNormalizedMessage = <TMessage extends IMessage>(message: TMessag
 		}
 
 		return normalizedMessage;
-	}, [showColors, customDomains, katexEnabled, katexDollarSyntaxEnabled, katexParenthesisSyntaxEnabled, message, autoTranslateOptions]);
+	}, [showColors, customDomains, katexEnabled, katex?.dollarSyntaxEnabled, katex?.parenthesisSyntaxEnabled, message, autoTranslateOptions]);
 };

apps/meteor/client/components/message/hooks/useOembedLayout.ts

@@ -1,4 +1,6 @@
-import { useLayout, useSetting } from '@rocket.chat/ui-contexts';
+import { useLayout } from '@rocket.chat/ui-contexts';
+
+import { useMessageListOembedEnabled } from '../list/MessageListContext';
 
 type OembedLayout = {
 	enabled: boolean;
@@ -15,7 +17,7 @@ export const useOembedLayout = (): OembedLayout => {
   very often, so this hook is not going to be re-evaluated very often either;
   this is why we don't need to memoize the result or store it in a context
   */
-	const enabled = useSetting('API_Embed', false);
+	const enabled = useMessageListOembedEnabled();
 	const { isMobile } = useLayout();
 
 	const maxWidth = isMobile ? ('100%' as const) : 368;

apps/meteor/client/components/message/list/MessageListContext.tsx

@@ -2,8 +2,17 @@ import type { IMessage } from '@rocket.chat/core-typings';
 import type { KeyboardEvent, MouseEvent, MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
+import type { useFormatDate } from '../../../hooks/useFormatDate';
+import type { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+import type { useFormatTime } from '../../../hooks/useFormatTime';
+
 export type MessageListContextValue = {
-	useShowTranslated: (message: IMessage) => boolean;
+	autoTranslate: {
+		showAutoTranslate: (message: IMessage) => boolean;
+		autoTranslateLanguage?: string;
+		autoTranslateEnabled: boolean;
+	};
+	autoLinkDomains: string;
 	useShowStarred: ({ message }: { message: IMessage }) => boolean;
 	useShowFollowing: ({ message }: { message: IMessage }) => boolean;
 	useMessageDateFormatter: () => (date: Date) => string;
@@ -25,11 +34,23 @@ export type MessageListContextValue = {
 	showColors: boolean;
 	jumpToMessageParam?: string;
 	username: string | undefined;
+	apiEmbedEnabled: boolean;
+	readReceipts: {
+		enabled: boolean;
+		storeUsers: boolean;
+	};
+	formatDateAndTime: ReturnType<typeof useFormatDateAndTime>;
+	formatTime: ReturnType<typeof useFormatTime>;
+	formatDate: ReturnType<typeof useFormatDate>;
 	messageListRef?: MutableRefObject<HTMLElement | undefined>;
 };
 
 export const MessageListContext = createContext<MessageListContextValue>({
-	useShowTranslated: () => false,
+	autoTranslate: {
+		showAutoTranslate: () => false,
+		autoTranslateLanguage: undefined,
+		autoTranslateEnabled: false,
+	},
 	useShowStarred: () => false,
 	useShowFollowing: () => false,
 	useUserHasReacted: () => (): boolean => false,
@@ -43,11 +64,20 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	showUsername: false,
 	showColors: false,
 	username: undefined,
+	apiEmbedEnabled: false,
+	readReceipts: {
+		enabled: false,
+		storeUsers: false,
+	},
+	autoLinkDomains: '',
+	formatDateAndTime: () => '',
+	formatTime: () => '',
+	formatDate: () => '',
 	messageListRef: { current: undefined },
 });
 
-export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>
-	useContext(MessageListContext).useShowTranslated(...args);
+export const useShowTranslated: MessageListContextValue['autoTranslate']['showAutoTranslate'] = (...args) =>
+	useContext(MessageListContext).autoTranslate.showAutoTranslate(...args);
 export const useShowStarred: MessageListContextValue['useShowStarred'] = (...args) =>
 	useContext(MessageListContext).useShowStarred(...args);
 export const useShowFollowing: MessageListContextValue['useShowFollowing'] = (...args) =>
@@ -67,3 +97,22 @@ export const useOpenEmojiPicker: MessageListContextValue['useOpenEmojiPicker'] =
 	useContext(MessageListContext).useOpenEmojiPicker(...args);
 
 export const useMessageListRef = (): MessageListContextValue['messageListRef'] => useContext(MessageListContext).messageListRef;
+
+export const useMessageListShowColors = (): MessageListContextValue['showColors'] => useContext(MessageListContext).showColors;
+
+export const useMessageListKatex = (): MessageListContextValue['katex'] => useContext(MessageListContext).katex;
+
+export const useMessageListReadReceipts = (): MessageListContextValue['readReceipts'] => useContext(MessageListContext).readReceipts;
+
+export const useMessageListAutoTranslate = (): MessageListContextValue['autoTranslate'] => useContext(MessageListContext).autoTranslate;
+
+export const useMessageListOembedEnabled = (): MessageListContextValue['apiEmbedEnabled'] => useContext(MessageListContext).apiEmbedEnabled;
+
+export const useMessageListAutoLinkDomains = (): MessageListContextValue['autoLinkDomains'] =>
+	useContext(MessageListContext).autoLinkDomains;
+
+export const useMessageListFormatDateAndTime = (): MessageListContextValue['formatDateAndTime'] =>
+	useContext(MessageListContext).formatDateAndTime;
+
+export const useMessageListFormatTime = (): MessageListContextValue['formatTime'] => useContext(MessageListContext).formatTime;
+export const useMessageListFormatDate = (): MessageListContextValue['formatDate'] => useContext(MessageListContext).formatDate;

apps/meteor/client/components/message/toolbar/items/actions/QuoteMessageAction.tsx

@@ -1,8 +1,8 @@
 import type { ITranslatedMessage, IMessage, ISubscription } from '@rocket.chat/core-typings';
 import { useTranslation } from 'react-i18next';
 
-import { useAutoTranslate } from '../../../../../views/room/MessageList/hooks/useAutoTranslate';
 import { useChat } from '../../../../../views/room/contexts/ChatContext';
+import { useMessageListAutoTranslate } from '../../../list/MessageListContext';
 import MessageToolbarItem from '../../MessageToolbarItem';
 
 type QuoteMessageActionProps = {
@@ -12,7 +12,7 @@ type QuoteMessageActionProps = {
 
 const QuoteMessageAction = ({ message, subscription }: QuoteMessageActionProps) => {
 	const chat = useChat();
-	const autoTranslateOptions = useAutoTranslate(subscription);
+	const autoTranslateOptions = useMessageListAutoTranslate();
 	const { t } = useTranslation();
 
 	if (!chat || !subscription) {

apps/meteor/client/components/message/toolbar/useReadReceiptsDetailsAction.tsx

@@ -1,14 +1,14 @@
 import type { IMessage } from '@rocket.chat/core-typings';
-import { useSetModal, useSetting } from '@rocket.chat/ui-contexts';
+import { useSetModal } from '@rocket.chat/ui-contexts';
 
 import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
 import ReadReceiptsModal from '../../../views/room/modals/ReadReceiptsModal';
+import { useMessageListReadReceipts } from '../list/MessageListContext';
 
 export const useReadReceiptsDetailsAction = (message: IMessage): MessageActionConfig | null => {
 	const setModal = useSetModal();
 
-	const readReceiptsEnabled = useSetting('Message_Read_Receipt_Enabled', false);
-	const readReceiptsStoreUsers = useSetting('Message_Read_Receipt_Store_Users', false);
+	const { enabled: readReceiptsEnabled, storeUsers: readReceiptsStoreUsers } = useMessageListReadReceipts();
 
 	if (!readReceiptsEnabled || !readReceiptsStoreUsers) {
 		return null;

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

@@ -20,8 +20,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MessageTypes } from '../../../../app/ui-utils/client';
-import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
-import { useFormatTime } from '../../../hooks/useFormatTime';
 import {
 	useIsSelecting,
 	useToggleSelect,
@@ -31,7 +29,12 @@ import {
 import { useUserCard } from '../../../views/room/contexts/UserCardContext';
 import Attachments from '../content/Attachments';
 import MessageActions from '../content/MessageActions';
-import { useMessageListShowRealName, useMessageListShowUsername } from '../list/MessageListContext';
+import {
+	useMessageListShowRealName,
+	useMessageListShowUsername,
+	useMessageListFormatDateAndTime,
+	useMessageListFormatTime,
+} from '../list/MessageListContext';
 
 type SystemMessageProps = {
 	message: IMessage;
@@ -40,8 +43,8 @@ type SystemMessageProps = {
 
 const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps): ReactElement => {
 	const { t } = useTranslation();
-	const formatTime = useFormatTime();
-	const formatDateAndTime = useFormatDateAndTime();
+	const formatTime = useMessageListFormatTime();
+	const formatDateAndTime = useMessageListFormatDateAndTime();
 	const { triggerProps, openUserCard } = useUserCard();
 
 	const showRealName = useMessageListShowRealName();

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

@@ -52,7 +52,7 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }:
 	useCountSelected();
 
 	const messageType = parentMessage.isSuccess ? MessageTypes.getType(parentMessage.data) : null;
-	const messageBody = useMessageBody(parentMessage.data, message.rid);
+	const messageBody = useMessageBody(parentMessage.data);
 
 	const previewMessage = isParsedMessage(messageBody) ? { md: messageBody } : { msg: messageBody };
 

apps/meteor/client/components/message/variants/room/RoomMessageContent.tsx

@@ -2,7 +2,7 @@ import type { IMessage } from '@rocket.chat/core-typings';
 import { isDiscussionMessage, isThreadMainMessage, isE2EEMessage, isQuoteAttachment } from '@rocket.chat/core-typings';
 import { MessageBody } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useSetting, useTranslation, useUserId, useUserPresence } from '@rocket.chat/ui-contexts';
+import { useTranslation, useUserId, useUserPresence } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { memo } from 'react';
 
@@ -20,6 +20,7 @@ import UrlPreviews from '../../content/UrlPreviews';
 import { useNormalizedMessage } from '../../hooks/useNormalizedMessage';
 import { useOembedLayout } from '../../hooks/useOembedLayout';
 import { useSubscriptionFromMessageQuery } from '../../hooks/useSubscriptionFromMessageQuery';
+import { useMessageListReadReceipts } from '../../list/MessageListContext';
 import UiKitMessageBlock from '../../uikit/UiKitMessageBlock';
 
 type RoomMessageContentProps = {
@@ -36,8 +37,8 @@ const RoomMessageContent = ({ message, unread, all, mention, searchText }: RoomM
 	const subscription = useSubscriptionFromMessageQuery(message).data ?? undefined;
 	const broadcast = subscription?.broadcast ?? false;
 	const uid = useUserId();
+	const { enabled: readReceiptEnabled } = useMessageListReadReceipts();
 	const messageUser = { ...message.u, roles: [], ...useUserPresence(message.u._id) };
-	const readReceiptEnabled = useSetting('Message_Read_Receipt_Enabled', false);
 	const chat = useChat();
 	const t = useTranslation();
 

apps/meteor/client/components/message/variants/thread/ThreadMessageContent.tsx

@@ -2,7 +2,7 @@ import type { IThreadMainMessage, IThreadMessage } from '@rocket.chat/core-typin
 import { isE2EEMessage, isQuoteAttachment } from '@rocket.chat/core-typings';
 import { MessageBody } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useSetting, useUserId, useUserPresence } from '@rocket.chat/ui-contexts';
+import { useUserId, useUserPresence } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +18,7 @@ import UrlPreviews from '../../content/UrlPreviews';
 import { useNormalizedMessage } from '../../hooks/useNormalizedMessage';
 import { useOembedLayout } from '../../hooks/useOembedLayout';
 import { useSubscriptionFromMessageQuery } from '../../hooks/useSubscriptionFromMessageQuery';
+import { useMessageListReadReceipts } from '../../list/MessageListContext';
 import UiKitMessageBlock from '../../uikit/UiKitMessageBlock';
 
 type ThreadMessageContentProps = {
@@ -30,8 +31,8 @@ const ThreadMessageContent = ({ message }: ThreadMessageContentProps): ReactElem
 	const subscription = useSubscriptionFromMessageQuery(message).data ?? undefined;
 	const broadcast = subscription?.broadcast ?? false;
 	const uid = useUserId();
+	const { enabled: readReceiptEnabled } = useMessageListReadReceipts();
 	const messageUser = { ...message.u, roles: [], ...useUserPresence(message.u._id) };
-	const readReceiptEnabled = useSetting('Message_Read_Receipt_Enabled', false);
 
 	const { t } = useTranslation();
 

apps/meteor/client/views/room/MessageList/MessageListItem.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 import RoomMessage from '../../../components/message/variants/RoomMessage';
 import SystemMessage from '../../../components/message/variants/SystemMessage';
 import ThreadMessagePreview from '../../../components/message/variants/ThreadMessagePreview';
-import { useFormatDate } from '../../../hooks/useFormatDate';
 import { useDateRef } from '../providers/DateListProvider';
 import { isMessageNewDay } from './lib/isMessageNewDay';
+import { useMessageListFormatDate } from '../../../components/message/list/MessageListContext';
 
 type MessageListItemProps = {
 	message: IMessage;
@@ -31,7 +31,7 @@ export const MessageListItem = ({
 	system,
 }: MessageListItemProps) => {
 	const { t } = useTranslation();
-	const formatDate = useFormatDate();
+	const formatDate = useMessageListFormatDate();
 
 	const ref = useDateRef();
 

apps/meteor/client/views/room/MessageList/hooks/useAutoLinkDomains.ts

@@ -1,8 +1,9 @@
-import { useSetting } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
+import { useMessageListAutoLinkDomains } from '../../../../components/message/list/MessageListContext';
+
 export const useAutoLinkDomains = (): string[] => {
-	const domains = useSetting('Message_CustomDomain_AutoLink', '');
+	const domains = useMessageListAutoLinkDomains();
 
 	const customDomains = useMemo(() => (domains ? domains.split(',').map((domain) => domain.trim()) : []), [domains]);