refactor: fix translated not parsed and parse attachments

RocketChat · Nov 22, 2022 · 244e91a · 244e91a
1 parent 549850e
commit 244e91a
Show file tree

Hide file tree

Showing 14 changed files with 734 additions and 47 deletions.
diff --git a/apps/meteor/app/autotranslate/client/lib/actionButton.ts b/apps/meteor/app/autotranslate/client/lib/actionButton.ts
@@ -22,7 +22,10 @@ Meteor.startup(() => {
 				action(_, props) {
 					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
-					if (!isTranslatedMessage(message) || (!message.translations?.[language] && !message.attachments?.some((attachment) => attachment?.translations?.[language]))) {
+					if (
+						!isTranslatedMessage(message) ||
+						(!message.translations?.[language] && !message.attachments?.some((attachment) => attachment?.translations?.[language]))
+					) {
 						(AutoTranslate.messageIdsToWait as any)[message._id] = true;
 						Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
 						Meteor.call('autoTranslate.translateMessage', message, language);
@@ -56,7 +59,10 @@ Meteor.startup(() => {
 				action(_, props) {
 					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
-					if (!isTranslatedMessage(message) || (!message.translations?.[language] && !message.attachments?.some((attachment) => attachment?.translations?.[language])) {
+					if (
+						!isTranslatedMessage(message) ||
+						(!message.translations?.[language] && !message.attachments?.some((attachment) => attachment?.translations?.[language]))
+					) {
 						(AutoTranslate.messageIdsToWait as any)[message._id] = true;
 						Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
 						Meteor.call('autoTranslate.translateMessage', message, language);

diff --git a/apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx
@@ -2,6 +2,7 @@ import { AudioAttachmentProps } from '@rocket.chat/core-typings';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentContent from '../Attachment/AttachmentContent';
@@ -21,13 +22,15 @@ export const AudioAttachment: FC<AudioAttachmentProps> = ({
 	description,
 	title_link: link,
 	title_link_download: hasDownload,
+	md,
 }) => {
 	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
 			<AttachmentDescription>
 				<MarkdownText parseEmoji variant='inline' content={description} />
+				{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
 			</AttachmentDescription>
 			<AttachmentRow>
 				<AttachmentTitle>{title}</AttachmentTitle>

diff --git a/apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx
@@ -2,6 +2,7 @@ import { FileProp, MessageAttachmentBase } from '@rocket.chat/core-typings';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentDescription from '../Attachment/AttachmentDescription';
@@ -26,14 +27,15 @@ export const GenericFileAttachment: FC<GenericFileAttachmentProps> = ({
 		// format,
 		// name,
 	} = {},
+	md,
 }) => {
 	// const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
 			{description && (
 				<AttachmentDescription>
-					<MarkdownText parseEmoji content={description} />
+					{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
 				</AttachmentDescription>
 			)}
 			<AttachmentRow>

diff --git a/apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx
@@ -2,6 +2,7 @@ import { ImageAttachmentProps } from '@rocket.chat/core-typings';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentContent from '../Attachment/AttachmentContent';
@@ -27,6 +28,7 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 	description,
 	title_link: link,
 	title_link_download: hasDownload,
+	md,
 }) => {
 	const [loadImage, setLoadImage] = useLoadImage();
 	const [collapsed, collapse] = useCollapse(collapsedDefault);
@@ -35,7 +37,7 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 		<Attachment>
 			{description && (
 				<AttachmentDescription>
-					<MarkdownText parseEmoji variant='inline' content={description} />
+					{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
 				</AttachmentDescription>
 			)}
 			<AttachmentRow>

diff --git a/apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx
@@ -5,6 +5,7 @@ import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
 import { userAgentMIMETypeFallback } from '../../../../lib/utils/userAgentMIMETypeFallback';
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentContent from '../Attachment/AttachmentContent';
@@ -31,6 +32,7 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 	description,
 	title_link: link,
 	title_link_download: hasDownload,
+	md,
 }) => {
 	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
@@ -50,7 +52,7 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 					</Box>
 					{description && (
 						<AttachmentDetails is='figcaption'>
-							<MarkdownText parseEmoji variant='inline' content={description} />
+							{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
 						</AttachmentDetails>
 					)}
 				</AttachmentContent>

diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx
@@ -24,8 +24,8 @@ type MessageListProps = {
 
 export const MessageList = ({ rid }: MessageListProps): ReactElement => {
 	const t = useTranslation();
-	const messages = useMessages({ rid });
 	const subscription = useUserSubscription(rid);
+	const messages = useMessages({ rid, subscription });
 	const isBroadcast = Boolean(subscription?.broadcast);
 	const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
 	const format = useFormatDate();

diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
@@ -14,7 +14,7 @@ import { UserPresence } from '../../../../lib/presence';
 import MessageBlockUiKit from '../../../blocks/MessageBlock';
 import MessageLocation from '../../../location/MessageLocation';
 import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext';
-import { useTranslateAttachments, useMessageListShowReadReceipt } from '../contexts/MessageListContext';
+import { useMessageListShowReadReceipt } from '../contexts/MessageListContext';
 import { isOwnUserMessage } from '../lib/isOwnUserMessage';
 import { MessageWithMdEnforced } from '../lib/parseMessageTextToAstMarkdown';
 import MessageContentBody from './MessageContentBody';
@@ -50,8 +50,6 @@ const MessageContent: FC<{
 
 	const isEncryptedMessage = isE2EEMessage(message);
 
-	const messageAttachments = useTranslateAttachments({ message });
-
 	return (
 		<>
 			{!message.blocks?.length && !!message.md?.length && (
@@ -69,7 +67,7 @@ const MessageContent: FC<{
 				</MessageBlock>
 			)}
 
-			{!!messageAttachments.length && <Attachments attachments={messageAttachments} file={message.file} />}
+			{!!message?.attachments?.length && <Attachments attachments={message.attachments} file={message.file} />}
 
 			{oembedIsEnabled && !!message.urls?.length && <PreviewList urls={message.urls} />}
 

diff --git a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx
@@ -10,13 +10,16 @@ import {
 	ThreadMessageBody,
 	ThreadMessageUnfollow,
 	CheckBox,
+	MessageStatusIndicatorItem,
 } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
 import { MessageTypes } from '../../../../../app/ui-utils/client';
 import UserAvatar from '../../../../components/avatar/UserAvatar';
 import { useMessageActions } from '../../contexts/MessageContext';
+import { useShowTranslated } from '../contexts/MessageListContext';
 import { useIsSelecting, useToggleSelect, useIsSelectedMessage, useCountSelected } from '../contexts/SelectedMessagesContext';
 import { useMessageBody } from '../hooks/useMessageBody';
 import { useParentMessage } from '../hooks/useParentMessage';
@@ -28,6 +31,7 @@ const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boolean }>
 	} = useMessageActions();
 	const parentMessage = useParentMessage(message.tmid);
 	const body = useMessageBody(parentMessage.data);
+	const translated = useShowTranslated(message);
 	const t = useTranslation();
 
 	const isSelecting = useIsSelecting();
@@ -51,7 +55,17 @@ const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boolean }>
 					</ThreadMessageLeftContainer>
 					<ThreadMessageContainer>
 						<ThreadMessageOrigin system={!!messageType}>
-							{parentMessage.isSuccess && !messageType && <ThreadMessagePreviewBody message={{ ...parentMessage.data, msg: body }} />}
+							{parentMessage.isSuccess && !messageType && (
+								<>
+									<ThreadMessagePreviewBody message={{ ...parentMessage.data, msg: body }} />
+									{translated && (
+										<>
+											{' '}
+											<MessageStatusIndicatorItem name='language' color={colors.p500} title={t('Translated')} />
+										</>
+									)}
+								</>
+							)}
 							{messageType && t(messageType.message, messageType.data ? messageType.data(message) : {})}
 							{parentMessage.isLoading && <Skeleton />}
 						</ThreadMessageOrigin>
@@ -68,7 +82,19 @@ const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boolean }>
 				</ThreadMessageLeftContainer>
 				<ThreadMessageContainer>
 					<ThreadMessageBody>
-						{(message as { ignored?: boolean }).ignored ? t('Message_Ignored') : <ThreadMessagePreviewBody message={message} />}
+						{(message as { ignored?: boolean }).ignored ? (
+							t('Message_Ignored')
+						) : (
+							<>
+								<ThreadMessagePreviewBody message={message} />
+								{translated && (
+									<>
+										{' '}
+										<MessageStatusIndicatorItem name='language' title={t('Translated')} />
+									</>
+								)}
+							</>
+						)}
 					</ThreadMessageBody>
 				</ThreadMessageContainer>
 			</ThreadMessageRow>

diff --git a/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreviewBody.tsx b/apps/meteor/client/views/room/MessageList/components/ThreadMessagePreviewBody.tsx
@@ -1,15 +1,19 @@
 import { IMessage } from '@rocket.chat/core-typings';
 import { PreviewMarkup } from '@rocket.chat/gazzodown';
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
+import { useAutoTranslate } from '../hooks/useAutoTranslate';
 import { parseMessageTextToAstMarkdown } from '../lib/parseMessageTextToAstMarkdown';
 
 type ThreadMessagePreviewBodyProps = {
 	message: IMessage;
 };
 
 const ThreadMessagePreviewBody = ({ message }: ThreadMessagePreviewBodyProps): ReactElement => {
-	const parsedMessage = parseMessageTextToAstMarkdown(message, { colors: true, emoticons: true });
+	const subscription = useUserSubscription(message.rid);
+	const autoTranslateOptions = useAutoTranslate(subscription);
+	const parsedMessage = parseMessageTextToAstMarkdown(message, { colors: true, emoticons: true }, autoTranslateOptions);
 
 	return parsedMessage.md ? <PreviewMarkup tokens={parsedMessage.md} /> : <></>;
 };

diff --git a/apps/meteor/client/views/room/MessageList/hooks/useMessages.ts b/apps/meteor/client/views/room/MessageList/hooks/useMessages.ts
@@ -1,26 +1,29 @@
-import { IRoom, IMessage } from '@rocket.chat/core-typings';
+import { IRoom, IMessage, ISubscription } from '@rocket.chat/core-typings';
 import { useStableArray } from '@rocket.chat/fuselage-hooks';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import { Mongo } from 'meteor/mongo';
 import { useCallback, useMemo } from 'react';
 
 import { ChatMessage } from '../../../../../app/models/client';
 import { useReactiveValue } from '../../../../hooks/useReactiveValue';
-import { useMessageListContext } from '../contexts/MessageListContext';
 import {
 	MessageWithMdEnforced,
 	parseMessageTextToAstMarkdown,
 	removePossibleNullMessageValues,
 } from '../lib/parseMessageTextToAstMarkdown';
+import { useAutoTranslate } from './useAutoTranslate';
+import { useKatex } from './useKatex';
 
 const options = {
 	sort: {
 		ts: 1,
 	},
 };
 
-export const useMessages = ({ rid }: { rid: IRoom['_id'] }): MessageWithMdEnforced[] => {
-	const { autoTranslateLanguage, katex, showColors, useShowTranslated } = useMessageListContext();
+export const useMessages = ({ rid, subscription }: { rid: IRoom['_id']; subscription?: ISubscription }): MessageWithMdEnforced[] => {
+	const { katexEnabled, katexDollarSyntaxEnabled, katexParenthesisSyntaxEnabled } = useKatex();
+	const autoTranslateOptions = useAutoTranslate(subscription);
+	const showColors = Boolean(useSetting('HexColorPreview_Enabled'));
 	const hideSysMes = useSetting('Hide_System_Messages');
 
 	const hideSysMessagesStable = useStableArray(Array.isArray(hideSysMes) ? hideSysMes : []);
@@ -29,16 +32,24 @@ export const useMessages = ({ rid }: { rid: IRoom['_id'] }): MessageWithMdEnforc
 		const parseOptions = {
 			colors: showColors,
 			emoticons: true,
-			...(Boolean(katex) && {
+			...(katexEnabled && {
 				katex: {
-					dollarSyntax: katex?.dollarSyntaxEnabled,
-					parenthesisSyntax: katex?.parenthesisSyntaxEnabled,
+					dollarSyntax: katexDollarSyntaxEnabled,
+					parenthesisSyntax: katexParenthesisSyntaxEnabled,
 				},
 			}),
 		};
 		return (message: IMessage): MessageWithMdEnforced =>
-			parseMessageTextToAstMarkdown(removePossibleNullMessageValues(message), parseOptions, autoTranslateLanguage, useShowTranslated);
-	}, [autoTranslateLanguage, katex, showColors, useShowTranslated]);
+			parseMessageTextToAstMarkdown(removePossibleNullMessageValues(message), parseOptions, autoTranslateOptions);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		autoTranslateOptions.autoTranslateEnabled,
+		autoTranslateOptions.autoTranslateLanguage,
+		katexParenthesisSyntaxEnabled,
+		katexEnabled,
+		katexDollarSyntaxEnabled,
+		showColors,
+	]);
 
 	const query: Mongo.Query<IMessage> = useMemo(
 		() => ({