Merge branch 'matrixSearch' into feat/federation-search-public-rooms

* matrixSearch: First iteration Chore: Show different labels based on the call originator on direct calls (#27729) Chore: Change bundle tags color and refactor app details page header styles (#27293) [FIX] Auto Translate not working on new message template (#27317) the commit.
RocketChat · Jan 16, 2023 · 8425161 · 8425161
2 parents 13c9094 + 8bf8f41
commit 8425161
Show file tree

Hide file tree

Showing 54 changed files with 1,504 additions and 237 deletions.
diff --git a/.vscode/settings.json b/.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"]
 }
diff --git a/apps/meteor/app/autotranslate/client/lib/actionButton.ts b/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 }) {
 					if (!user) {
 						return false;
 					}
+					const language = subscription?.autoTranslateLanguage || AutoTranslate.getLanguage(message.rid) || '';
 
-					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,
 			});

diff --git a/apps/meteor/app/autotranslate/client/lib/autotranslate.ts b/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 } });

diff --git a/apps/meteor/app/autotranslate/server/autotranslate.ts b/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]);
 						}
 					}
 				}

diff --git a/apps/meteor/app/autotranslate/server/googleTranslate.ts b/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,
 				});

diff --git a/apps/meteor/app/ui-message/client/message.html b/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}}

diff --git a/apps/meteor/app/ui-message/client/message.js b/apps/meteor/app/ui-message/client/message.js
@@ -21,6 +21,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';
@@ -258,7 +259,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))
 			);
 		}
 	},

diff --git a/apps/meteor/app/ui-utils/client/lib/MessageAction.ts b/apps/meteor/app/ui-utils/client/lib/MessageAction.ts
@@ -5,14 +5,15 @@ import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import type { Icon } from '@rocket.chat/fuselage';
-import type { IMessage, IUser, ISubscription, IRoom, SettingValue, Serialized } from '@rocket.chat/core-typings';
+import type { IMessage, IUser, ISubscription, IRoom, SettingValue, Serialized, ITranslatedMessage } from '@rocket.chat/core-typings';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 
 import { Messages, Rooms, Subscriptions } from '../../../models/client';
 import { roomCoordinator } from '../../../../client/lib/rooms/roomCoordinator';
 import type { ToolboxContextValue } from '../../../../client/views/room/contexts/ToolboxContext';
 import type { ChatContext } from '../../../../client/views/room/contexts/ChatContext';
 import { APIClient } from '../../../utils/client';
+import type { AutoTranslateOptions } from '../../../../client/views/room/MessageList/hooks/useAutoTranslate';
 
 const getMessage = async (msgId: string): Promise<Serialized<IMessage> | null> => {
 	try {
@@ -71,7 +72,14 @@ export type MessageActionConfig = {
 			tabbar,
 			room,
 			chat,
-		}: { message?: IMessage; tabbar: ToolboxContextValue; room?: IRoom; chat: ContextType<typeof ChatContext> },
+			autoTranslateOptions,
+		}: {
+			message?: IMessage & Partial<ITranslatedMessage>;
+			tabbar: ToolboxContextValue;
+			room?: IRoom;
+			chat: ContextType<typeof ChatContext>;
+			autoTranslateOptions?: AutoTranslateOptions;
+		},
 	) => any;
 	condition?: (props: MessageActionConditionProps) => Promise<boolean> | boolean;
 };

diff --git a/apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts b/apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts
@@ -70,7 +70,14 @@ Meteor.startup(async function () {
 		label: 'Quote',
 		context: ['message', 'message-mobile', 'threads', 'federated'],
 		action(_, props) {
-			const { message = messageArgs(this).msg, chat } = props;
+			const { message = messageArgs(this).msg, chat, autoTranslateOptions } = props;
+
+			if (message && autoTranslateOptions?.autoTranslateEnabled && autoTranslateOptions.showAutoTranslate(message)) {
+				message.msg =
+					message.translations && autoTranslateOptions.autoTranslateLanguage
+						? message.translations[autoTranslateOptions.autoTranslateLanguage]
+						: message.msg;
+			}
 
 			chat?.composer?.quoteMessage(message);
 		},

diff --git a/apps/meteor/client/components/avatar/AppAvatar.tsx b/apps/meteor/client/components/avatar/AppAvatar.tsx
@@ -1,22 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
 import BaseAvatar from './BaseAvatar';
 
-// TODO: frontend chapter day - Remove inline Styling
-
 type AppAvatarProps = {
-	/* @deprecated */
-	size: 'x36' | 'x28' | 'x16' | 'x40' | 'x124';
-	/* @deprecated */
-	mie?: 'x80' | 'x20' | 'x16' | 'x8';
-	/* @deprecated */
-	alignSelf?: 'center';
-
 	iconFileContent: string;
 	iconFileData: string;
-};
+	size: ComponentProps<typeof BaseAvatar>['size'];
+} & ComponentProps<typeof Box>;
 
 export default function AppAvatar({ iconFileContent, size, iconFileData, ...props }: AppAvatarProps): ReactElement {
 	return (

diff --git a/apps/meteor/client/components/message/StatusIndicators.tsx b/apps/meteor/client/components/message/StatusIndicators.tsx
@@ -1,6 +1,6 @@
 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 { ReactElement } from 'react';
 import React from 'react';
@@ -10,7 +10,6 @@ import {
 	useShowStarred,
 	useShowTranslated,
 	useShowFollowing,
-	useTranslateProvider,
 } from '../../views/room/MessageList/contexts/MessageListContext';
 
 type StatusIndicatorsProps = {
@@ -19,8 +18,7 @@ type StatusIndicatorsProps = {
 
 const StatusIndicators = ({ message }: StatusIndicatorsProps): ReactElement => {
 	const t = useTranslation();
-	const translated = useShowTranslated({ message });
-	const translateProvider = useTranslateProvider({ message });
+	const translated = useShowTranslated(message);
 	const starred = useShowStarred({ message });
 	const following = useShowFollowing({ message });
 
@@ -33,11 +31,7 @@ const StatusIndicators = ({ message }: StatusIndicatorsProps): ReactElement => {
 
 	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')} />}
 

diff --git a/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
+import MessageContentBody from '../../../MessageContentBody';
 import { useCollapse } from '../../../hooks/useCollapse';
 import Attachment from '../structure/Attachment';
 import AttachmentContent from '../structure/AttachmentContent';
@@ -22,13 +23,14 @@ 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/content/attachments/file/GenericFileAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx
@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
+import MessageContentBody from '../../../MessageContentBody';
 import Attachment from '../structure/Attachment';
 import AttachmentDescription from '../structure/AttachmentDescription';
 import AttachmentDownload from '../structure/AttachmentDownload';
@@ -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>