[FIX] Auto Translate not working on new message template

.vscode/settings.json

@@ -14,10 +14,5 @@
 		}
 	],
 	"typescript.tsdk": "./node_modules/typescript/lib",
-	"cSpell.words": [
-		"livechat",
-		"omnichannel",
-		"photoswipe",
-		"tmid"
-	]
+	"cSpell.words": ["katex", "livechat", "omnichannel", "photoswipe", "tmid"]
 }

apps/meteor/app/autotranslate/client/lib/actionButton.ts

@@ -1,13 +1,16 @@
 import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
-import { isTranslatedMessage } from '@rocket.chat/core-typings';
 
 import { AutoTranslate } from './autotranslate';
 import { settings } from '../../../settings/client';
 import { hasAtLeastOnePermission } from '../../../authorization/client';
 import { MessageAction } from '../../../ui-utils/client/lib/MessageAction';
 import { messageArgs } from '../../../../client/lib/utils/messageArgs';
 import { Messages } from '../../../models/client';
+import {
+	hasTranslationLanguageInAttachments,
+	hasTranslationLanguageInMessage,
+} from '../../../../client/views/room/MessageList/lib/autoTranslate';
 
 Meteor.startup(() => {
 	AutoTranslate.init();
@@ -22,21 +25,27 @@ Meteor.startup(() => {
 				action(_, props) {
 					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
-					if (!isTranslatedMessage(message) || !message.translations[language]) {
-						// } && !_.find(message.attachments, attachment => { return attachment.translations && attachment.translations[language]; })) {
+					if (!hasTranslationLanguageInMessage(message, language) && !hasTranslationLanguageInAttachments(message.attachments, language)) {
 						(AutoTranslate.messageIdsToWait as any)[message._id] = true;
 						Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
 						Meteor.call('autoTranslate.translateMessage', message, language);
 					}
 					const action = 'autoTranslateShowInverse' in message ? '$unset' : '$set';
 					Messages.update({ _id: message._id }, { [action]: { autoTranslateShowInverse: true } });
 				},
-				condition({ message, user }) {
+				condition({ message, subscription, user }) {
+					const language = subscription?.autoTranslateLanguage || AutoTranslate.getLanguage(message.rid) || '';
 					if (!user) {
 						return false;
 					}
 
-					return Boolean(message?.u && message.u._id !== user._id && isTranslatedMessage(message) && message.autoTranslateShowInverse);
+					return Boolean(
+						(message?.u &&
+							message.u._id !== user._id &&
+							subscription?.autoTranslate &&
+							(message as { autoTranslateShowInverse?: boolean }).autoTranslateShowInverse) ||
+							(!hasTranslationLanguageInMessage(message, language) && !hasTranslationLanguageInAttachments(message.attachments, language)),
+					);
 				},
 				order: 90,
 			});
@@ -48,21 +57,27 @@ Meteor.startup(() => {
 				action(_, props) {
 					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
-					if (!isTranslatedMessage(message) || !message.translations[language]) {
-						// } && !_.find(message.attachments, attachment => { return attachment.translations && attachment.translations[language]; })) {
+					if (!hasTranslationLanguageInMessage(message, language) && !hasTranslationLanguageInAttachments(message.attachments, language)) {
 						(AutoTranslate.messageIdsToWait as any)[message._id] = true;
 						Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
 						Meteor.call('autoTranslate.translateMessage', message, language);
 					}
 					const action = 'autoTranslateShowInverse' in message ? '$unset' : '$set';
 					Messages.update({ _id: message._id }, { [action]: { autoTranslateShowInverse: true } });
 				},
-				condition({ message, user }) {
+				condition({ message, subscription, user }) {
+					const language = subscription?.autoTranslateLanguage || AutoTranslate.getLanguage(message.rid) || '';
 					if (!user) {
 						return false;
 					}
 
-					return Boolean(message?.u && message.u._id !== user._id && isTranslatedMessage(message) && !message.autoTranslateShowInverse);
+					return Boolean(
+						message?.u &&
+							message.u._id !== user._id &&
+							subscription?.autoTranslate &&
+							!(message as { autoTranslateShowInverse?: boolean }).autoTranslateShowInverse &&
+							(hasTranslationLanguageInMessage(message, language) || hasTranslationLanguageInAttachments(message.attachments, language)),
+					);
 				},
 				order: 90,
 			});

apps/meteor/app/autotranslate/client/lib/autotranslate.ts

@@ -9,10 +9,15 @@ import type {
 	IUser,
 	MessageAttachmentDefault,
 } from '@rocket.chat/core-typings';
+import { isTranslatedMessageAttachment } from '@rocket.chat/core-typings';
 
 import { Subscriptions, Messages } from '../../../models/client';
 import { hasPermission } from '../../../authorization/client';
 import { call } from '../../../../client/lib/utils/call';
+import {
+	hasTranslationLanguageInAttachments,
+	hasTranslationLanguageInMessage,
+} from '../../../../client/views/room/MessageList/lib/autoTranslate';
 
 let userLanguage = 'en';
 let username = '';
@@ -55,6 +60,9 @@ export const AutoTranslate = {
 		language: string,
 		autoTranslateShowInverse: boolean,
 	): MessageAttachmentDefault[] {
+		if (!isTranslatedMessageAttachment(attachments)) {
+			return attachments;
+		}
 		for (const attachment of attachments) {
 			if (attachment.author_name !== username) {
 				if (attachment.text && attachment.translations && attachment.translations[language]) {
@@ -134,16 +142,11 @@ export const createAutoTranslateMessageRenderer = (): ((message: ITranslatedMess
 				message.translations = {};
 			}
 			if (!!subscription?.autoTranslate !== !!message.autoTranslateShowInverse) {
-				const hasAttachmentsTranslate =
-					message.attachments?.some(
-						(attachment) =>
-							'translations' in attachment &&
-							typeof attachment.translations === 'object' &&
-							autoTranslateLanguage in attachment.translations,
-					) ?? false;
-
 				message.translations.original = message.html;
-				if (message.translations[autoTranslateLanguage] && !hasAttachmentsTranslate) {
+				if (
+					message.translations[autoTranslateLanguage] &&
+					!hasTranslationLanguageInAttachments(message.attachments, autoTranslateLanguage)
+				) {
 					message.html = message.translations[autoTranslateLanguage];
 				}
 
@@ -155,12 +158,6 @@ export const createAutoTranslateMessageRenderer = (): ((message: ITranslatedMess
 					);
 				}
 			}
-		} else if (message.attachments && message.attachments.length > 0) {
-			message.attachments = AutoTranslate.translateAttachments(
-				message.attachments,
-				autoTranslateLanguage,
-				!!message.autoTranslateShowInverse,
-			);
 		}
 		return message;
 	};
@@ -177,7 +174,8 @@ export const createAutoTranslateMessageStreamHandler = (): ((message: ITranslate
 				subscription &&
 				subscription.autoTranslate === true &&
 				message.msg &&
-				(!message.translations || !message.translations[language])
+				(!message.translations ||
+					(!hasTranslationLanguageInMessage(message, language) && !hasTranslationLanguageInAttachments(message.attachments, language)))
 			) {
 				// || (message.attachments && !_.find(message.attachments, attachment => { return attachment.translations && attachment.translations[language]; }))
 				Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });

apps/meteor/app/autotranslate/server/autotranslate.ts

@@ -305,10 +305,13 @@ export abstract class AutoTranslate {
 			Meteor.defer(() => {
 				for (const [index, attachment] of message.attachments?.entries() ?? []) {
 					if (attachment.description || attachment.text) {
-						const translations = this._translateAttachmentDescriptions(attachment, targetLanguages);
+						// Removes the initial link `[ ](quoterl)` from quote message before translation
+						const translatedText = attachment?.text?.replace(/\[(.*?)\]\(.*?\)/g, '$1') || attachment?.text;
+						const attachmentMessage = { ...attachment, text: translatedText };
+						const translations = this._translateAttachmentDescriptions(attachmentMessage, targetLanguages);
+
 						if (!_.isEmpty(translations)) {
 							Messages.addAttachmentTranslations(message._id, index, translations);
-							Messages.addTranslations(message._id, translations, TranslationProviderRegistry[Provider]);
 						}
 					}
 				}

apps/meteor/app/autotranslate/server/googleTranslate.ts

@@ -146,6 +146,7 @@ class GoogleAutoTranslate extends AutoTranslate {
 					params: {
 						key: this.apiKey,
 						target: language,
+						format: 'text',
 					},
 					query,
 				});
@@ -190,6 +191,7 @@ class GoogleAutoTranslate extends AutoTranslate {
 					params: {
 						key: this.apiKey,
 						target: language,
+						format: 'text',
 					},
 					query,
 				});

apps/meteor/app/ui-message/client/message.html

@@ -55,7 +55,6 @@
 					{{#if showTranslated}}
 						<span class="translated">
 							<i class="icon-language {{#if msg.autoTranslateFetching}}loading{{/if}}" title="{{_ "Translated"}}"></i>
-							<span class="translation-provider">{{ translationProvider }}</span>
 						</span>
 					{{/if}}
 					{{#if msg.sentByEmail}}

apps/meteor/app/ui-message/client/message.js

@@ -20,6 +20,7 @@ import { renderMessageBody } from '../../../client/lib/utils/renderMessageBody';
 import { settings } from '../../settings/client';
 import { formatTime } from '../../../client/lib/utils/formatTime';
 import { formatDate } from '../../../client/lib/utils/formatDate';
+import { hasTranslationLanguageInAttachments } from '../../../client/views/room/MessageList/lib/autoTranslate';
 import { roomCoordinator } from '../../../client/lib/rooms/roomCoordinator';
 import './messageThread';
 import './message.html';
@@ -257,7 +258,9 @@ Template.message.helpers({
 			const autoTranslate = subscription && subscription.autoTranslate;
 			return (
 				msg.autoTranslateFetching ||
-				(!!autoTranslate !== !!msg.autoTranslateShowInverse && msg.translations && msg.translations[settings.translateLanguage])
+				(!!autoTranslate !== !!msg.autoTranslateShowInverse && msg.translations && msg.translations[settings.translateLanguage]) ||
+				(!!autoTranslate !== !!msg.autoTranslateShowInverse &&
+					hasTranslationLanguageInAttachments(msg.attachments, settings.translateLanguage))
 			);
 		}
 	},

apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx

@@ -3,6 +3,7 @@ import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React from 'react';
 
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentContent from '../Attachment/AttachmentContent';
@@ -22,13 +23,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>

apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx

@@ -3,6 +3,7 @@ import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React from 'react';
 
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentDescription from '../Attachment/AttachmentDescription';
@@ -27,14 +28,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>

apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx

@@ -3,6 +3,7 @@ import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React from 'react';
 
+import MessageContentBody from '../../../../views/room/MessageList/components/MessageContentBody';
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
 import AttachmentContent from '../Attachment/AttachmentContent';
@@ -28,6 +29,7 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 	description,
 	title_link: link,
 	title_link_download: hasDownload,
+	md,
 }) => {
 	const [loadImage, setLoadImage] = useLoadImage();
 	const [collapsed, collapse] = useCollapse(collapsedDefault);
@@ -36,7 +38,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>

apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx

@@ -6,6 +6,7 @@ import type { FC } from 'react';
 import React 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';
@@ -32,6 +33,7 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 	description,
 	title_link: link,
 	title_link_download: hasDownload,
+	md,
 }) => {
 	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
@@ -51,7 +53,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>

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

@@ -25,8 +25,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();

apps/meteor/client/views/room/MessageList/components/MessageContent.tsx

@@ -17,7 +17,7 @@ import type { 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 type { MessageWithMdEnforced } from '../lib/parseMessageTextToAstMarkdown';
 import MessageContentBody from './MessageContentBody';
@@ -53,8 +53,6 @@ const MessageContent: FC<{
 
 	const isEncryptedMessage = isE2EEMessage(message);
 
-	const messageAttachments = useTranslateAttachments({ message });
-
 	return (
 		<>
 			{!message.blocks?.length && !!message.md?.length && (
@@ -72,7 +70,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} />}
 

apps/meteor/client/views/room/MessageList/components/MessageIndicators.tsx

@@ -1,24 +1,17 @@
 import type { IMessage, ITranslatedMessage } from '@rocket.chat/core-typings';
 import { isEditedMessage, isE2EEMessage, isOTRMessage } from '@rocket.chat/core-typings';
-import { MessageStatusIndicator, MessageStatusIndicatorItem, MessageStatusIndicatorText } from '@rocket.chat/fuselage';
+import { MessageStatusIndicator, MessageStatusIndicatorItem } from '@rocket.chat/fuselage';
 import { useUserId, useTranslation } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
 import React from 'react';
 
-import {
-	useMessageDateFormatter,
-	useShowStarred,
-	useShowTranslated,
-	useShowFollowing,
-	useTranslateProvider,
-} from '../contexts/MessageListContext';
+import { useMessageDateFormatter, useShowStarred, useShowTranslated, useShowFollowing } from '../contexts/MessageListContext';
 
 export const MessageIndicators: FC<{
 	message: IMessage & Partial<ITranslatedMessage>;
 }> = ({ message }) => {
 	const t = useTranslation();
-	const translated = useShowTranslated({ message });
-	const translateProvider = useTranslateProvider({ message });
+	const translated = useShowTranslated(message);
 	const starred = useShowStarred({ message });
 	const following = useShowFollowing({ message });
 
@@ -31,11 +24,7 @@ export const MessageIndicators: FC<{
 
 	return (
 		<MessageStatusIndicator>
-			{translated && (
-				<MessageStatusIndicatorText>
-					<MessageStatusIndicatorItem name='language' title={t('Translated')} /> {translateProvider}
-				</MessageStatusIndicatorText>
-			)}
+			{translated && <MessageStatusIndicatorItem name='language' title={t('Translated')} />}
 
 			{following && <MessageStatusIndicatorItem name='bell' title={t('Following')} />}