[pull] develop from RocketChat:develop

.changeset/easy-laws-talk.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes non-deterministic comparator in team's channel desertion table

apps/meteor/app/api/server/v1/invites.ts

@@ -250,6 +250,7 @@ const invites = API.v1
 		},
 		async function action() {
 			const { token } = this.bodyParams;
+			// eslint-disable-next-line react-hooks/rules-of-hooks
 			return API.v1.success(await useInviteToken(this.userId, token));
 		},
 	)

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

@@ -69,6 +69,16 @@ export const AutoTranslate = {
 					}
 				}
 
+				if (attachment.description && attachment.translations && attachment.translations[language]) {
+					attachment.translations.original = attachment.description;
+
+					if (autoTranslateShowInverse) {
+						attachment.description = attachment.translations.original;
+					} else {
+						attachment.description = attachment.translations[language];
+					}
+				}
+
 				if (attachment.attachments && attachment.attachments.length > 0) {
 					// @ts-expect-error - not sure what to do with this
 					attachment.attachments = this.translateAttachments(attachment.attachments, language);

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

@@ -320,7 +320,7 @@ export abstract class AutoTranslate {
 		if (message.attachments && message.attachments.length > 0) {
 			setImmediate(async () => {
 				for (const [index, attachment] of message.attachments?.entries() ?? []) {
-					if (attachment.text) {
+					if (attachment.description || attachment.text) {
 						// Removes the initial link `[ ](quoterl)` from quote message before translation
 						const translatedText = attachment?.text?.replace(/\[(.*?)\]\(.*?\)/g, '$1') || attachment?.text;
 						const attachmentMessage = { ...attachment, text: translatedText };

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

@@ -196,7 +196,7 @@ class DeeplAutoTranslate extends AutoTranslate {
 					params: {
 						auth_key: this.apiKey,
 						target_lang: language,
-						text: attachment.text || '',
+						text: attachment.description || attachment.text || '',
 					},
 				});
 				if (!result.ok) {

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

@@ -195,7 +195,7 @@ class GoogleAutoTranslate extends AutoTranslate {
 						key: this.apiKey,
 						target: language,
 						format: 'text',
-						q: attachment.text || '',
+						q: attachment.description || attachment.text || '',
 					},
 				});
 				if (!result.ok) {

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

@@ -192,7 +192,7 @@ class MsAutoTranslate extends AutoTranslate {
 			return this._translate(
 				[
 					{
-						Text: attachment.text || '',
+						Text: attachment.description || attachment.text || '',
 					},
 				],
 				targetLanguages,

apps/meteor/app/lib/server/functions/notifications/email.js

@@ -77,8 +77,13 @@ export async function getEmailContent({ message, user, room }) {
 	}
 
 	if (hasFiles) {
-		const fileParts = files.map((file) => {
-			return escapeHTML(file.name);
+		const attachments = message.attachments || [];
+		const fileParts = files.map((file, index) => {
+			let part = escapeHTML(file.name);
+			if (attachments[index]?.description) {
+				part += `<br/><br/>${escapeHTML(attachments[index].description)}`;
+			}
+			return part;
 		});
 		contentParts.push(fileParts.join('<br/><br/>'));
 	}

apps/meteor/app/lib/server/lib/sendNotificationsOnMessage.ts

@@ -195,6 +195,8 @@ export const sendNotification = async ({
 		const firstAttachment = message.attachments?.length && message.attachments.shift();
 
 		if (firstAttachment) {
+			firstAttachment.description =
+				typeof firstAttachment.description === 'string' ? emojione.shortnameToUnicode(firstAttachment.description) : undefined;
 			firstAttachment.text = typeof firstAttachment.text === 'string' ? emojione.shortnameToUnicode(firstAttachment.text) : undefined;
 		}
 

apps/meteor/app/lib/server/methods/updateMessage.ts

@@ -34,7 +34,7 @@ export async function executeUpdateMessage(
 	// IF the message has custom fields, always update
 	// Ideally, we'll compare the custom fields to check for change, but since we don't know the shape of
 	// custom fields, as it's user defined, we're gonna update
-	const msgText = originalMessage.msg;
+	const msgText = originalMessage?.attachments?.[0]?.description ?? originalMessage.msg;
 	if (msgText === message.msg && !previewUrls && !message.customFields) {
 		return;
 	}
@@ -86,6 +86,13 @@ export async function executeUpdateMessage(
 	}
 	await canSendMessageAsync(message.rid, { uid: user._id, username: user.username ?? undefined, ...user });
 
+	// It is possible to have an empty array as the attachments property, so ensure both things exist
+	if (originalMessage.attachments && originalMessage.attachments.length > 0 && originalMessage.attachments[0].description !== undefined) {
+		originalMessage.attachments[0].description = message.msg;
+		message.attachments = originalMessage.attachments;
+		message.msg = originalMessage.msg;
+	}
+
 	message.u = originalMessage.u;
 
 	return updateMessage(message, user, originalMessage, previewUrls);

apps/meteor/app/livechat/server/lib/sendTranscript.ts

@@ -108,14 +108,17 @@ export async function sendTranscript({
 
 		const messageType = MessageTypes.getType(message);
 
-		const messageContent = messageType?.system
+		let messageContent = messageType?.system
 			? DOMPurify.sanitize(`
 				<i>${messageType.text(i18n.cloneInstance({ interpolation: { escapeValue: false } }).t, message)}}</i>`)
 			: escapeHtml(message.msg);
 
 		let filesHTML = '';
 
 		if (message.attachments && message.attachments?.length > 0) {
+			messageContent = message.attachments[0].description || '';
+			escapeHtml(messageContent);
+
 			for await (const attachment of message.attachments) {
 				if (!isFileAttachment(attachment)) {
 					continue;

apps/meteor/app/slackbridge/server/RocketAdapter.ts

@@ -203,11 +203,14 @@ export default class RocketAdapter {
 
 		if (rocketMessage.file.name) {
 			let fileName = rocketMessage.file.name;
-			const text = rocketMessage.msg;
+			let text = rocketMessage.msg;
 
 			const attachment = this.getMessageAttachment(rocketMessage);
 			if (attachment) {
 				fileName = Meteor.absoluteUrl(attachment.title_link);
+				if (!text) {
+					text = attachment.description;
+				}
 			}
 
 			await slack.postMessage(slack.getSlackChannel(rocketMessage.rid), { ...rocketMessage, msg: `${text} ${fileName}` });

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -120,7 +120,7 @@ export class ChatMessages implements ChatAPI {
 		},
 		editMessage: async (message: IMessage, { cursorAtStart = false }: { cursorAtStart?: boolean } = {}) => {
 			this.composer?.uploads.clear();
-			const text = (await this.data.getDraft(message._id)) || message.msg;
+			const text = (await this.data.getDraft(message._id)) || message.attachments?.[0]?.description || message.msg;
 
 			await this.currentEditingMessage.stop();
 

apps/meteor/client/apps/gameCenter/GameCenter.tsx

@@ -1,5 +1,5 @@
 import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/externalComponent';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoomToolbox } from '@rocket.chat/ui-contexts';
 import { useState } from 'react';
 import type { MouseEvent } from 'react';
@@ -18,9 +18,9 @@ const GameCenter = () => {
 
 	const result = useExternalComponentsQuery();
 
-	const handleClose = useEffectEvent(() => closeTab());
+	const handleClose = useStableCallback(() => closeTab());
 
-	const handleBack = useEffectEvent((e: MouseEvent) => {
+	const handleBack = useStableCallback((e: MouseEvent) => {
 		setOpenedGame(undefined);
 		preventSyntheticEvent(e);
 	});

apps/meteor/client/components/ConfirmOwnerChangeModal.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import type { ComponentPropsWithoutRef } from 'react';
 import { Trans } from 'react-i18next';
@@ -18,7 +18,7 @@ const ConfirmOwnerChangeModal = ({
 	onConfirm,
 	onCancel,
 }: ConfirmOwnerChangeModalProps) => {
-	const getChangeOwnerRooms = useEffectEvent(() => {
+	const getChangeOwnerRooms = useStableCallback(() => {
 		if (shouldChangeOwner.length === 0) {
 			return '';
 		}
@@ -50,7 +50,7 @@ const ConfirmOwnerChangeModal = ({
 		);
 	});
 
-	const getRemovedRooms = useEffectEvent(() => {
+	const getRemovedRooms = useStableCallback(() => {
 		if (shouldBeRemoved.length === 0) {
 			return '';
 		}

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -11,7 +11,7 @@ import {
 	FieldRow,
 	FieldError,
 } from '@rocket.chat/fuselage-forms';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
@@ -69,7 +69,7 @@ const CreateDiscussion = ({
 		},
 	});
 
-	const onParentRoomChange = useEffectEvent((room: IRoom | undefined) => {
+	const onParentRoomChange = useStableCallback((room: IRoom | undefined) => {
 		if (!room) {
 			return;
 		}

apps/meteor/client/components/SidebarToggler/SidebarToggler.tsx

@@ -1,4 +1,4 @@
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
 import { useEmbeddedLayout } from '@rocket.chat/ui-client';
 import { useLayout, useSession } from '@rocket.chat/ui-contexts';
 import { memo } from 'react';
@@ -10,7 +10,7 @@ const SideBarToggler = () => {
 	const isLayoutEmbedded = useEmbeddedLayout();
 	const unreadMessagesBadge = useSession('unread') as number | string | undefined;
 
-	const toggleSidebar = useEffectEvent(() => sidebar.toggle());
+	const toggleSidebar = useStableCallback(() => sidebar.toggle());
 
 	return (
 		<SidebarTogglerButton

apps/meteor/client/components/avatar/RoomAvatarEditor.tsx

@@ -2,7 +2,7 @@ import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -24,7 +24,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const handleChangeAvatar = useEffectEvent(async (file: File) => {
+	const handleChangeAvatar = useStableCallback(async (file: File) => {
 		const reader = new FileReader();
 		reader.readAsDataURL(file);
 		reader.onloadend = async (): Promise<void> => {
@@ -38,7 +38,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 	});
 
 	const [clickUpload, reset] = useSingleFileInput(handleChangeAvatar);
-	const clickReset = useEffectEvent(() => {
+	const clickReset = useStableCallback(() => {
 		reset();
 		onChangeAvatar(null);
 	});

apps/meteor/client/components/message/content/MessageActions.tsx

@@ -1,6 +1,6 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { Box, ButtonGroup } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 
@@ -22,7 +22,7 @@ type MessageActionsProps = {
 };
 
 const MessageActions = ({ message, actions }: MessageActionsProps) => {
-	const runAction = useEffectEvent((action: string) => () => {
+	const runAction = useStableCallback((action: string) => () => {
 		actionLinks.run(action, message);
 	});
 

apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx

@@ -4,13 +4,17 @@ import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
 import { useReloadOnError } from './hooks/useReloadOnError';
+import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
+import MessageContentBody from '../../../MessageContentBody';
 
 const AudioAttachment = ({
 	title,
 	audio_url: url,
 	audio_type: type,
 	audio_size: size,
+	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
 	collapsed,
@@ -21,6 +25,7 @@ const AudioAttachment = ({
 
 	return (
 		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
 			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size} isCollapsed={collapsed}>
 				<AudioPlayer src={src} type={type} ref={mediaRef} />
 			</MessageCollapsible>

apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx

@@ -13,7 +13,9 @@ import { useTranslation } from 'react-i18next';
 
 import { getFileExtension } from '../../../../../../lib/utils/getFileExtension';
 import { forAttachmentDownload, registerDownloadForUid } from '../../../../../hooks/useDownloadFromServiceWorker';
+import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
+import MessageContentBody from '../../../MessageContentBody';
 import AttachmentSize from '../structure/AttachmentSize';
 import { useOpenEncryptedPdf } from './hooks/useOpenEncryptedPdf';
 
@@ -23,6 +25,8 @@ type GenericFileAttachmentProps = MessageAttachmentBase;
 
 const GenericFileAttachment = ({
 	title,
+	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
 	size,
@@ -81,6 +85,7 @@ const GenericFileAttachment = ({
 
 	return (
 		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
 			<MessageCollapsible title={title} hasDownload={hasDownload} link={link} isCollapsed={collapsed}>
 				<MessageGenericPreview style={{ maxWidth: 368, width: '100%' }}>
 					<MessageGenericPreviewContent

apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx

@@ -2,7 +2,9 @@ import type { ImageAttachmentProps } from '@rocket.chat/core-typings';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 
 import { useLoadImage } from './hooks/useLoadImage';
+import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
+import MessageContentBody from '../../../MessageContentBody';
 import AttachmentImage from '../structure/AttachmentImage';
 
 const ImageAttachment = ({
@@ -16,6 +18,7 @@ const ImageAttachment = ({
 		height: 368,
 	},
 	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
 	collapsed,
@@ -25,6 +28,7 @@ const ImageAttachment = ({
 
 	return (
 		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
 			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size} isCollapsed={collapsed}>
 				<AttachmentImage
 					{...imageDimensions}

apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx

@@ -5,13 +5,17 @@ import { useMemo } from 'react';
 
 import { useReloadOnError } from './hooks/useReloadOnError';
 import { userAgentMIMETypeFallback } from '../../../../../lib/utils/userAgentMIMETypeFallback';
+import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
+import MessageContentBody from '../../../MessageContentBody';
 
 const VideoAttachment = ({
 	title,
 	video_url: url,
 	video_type: type,
 	video_size: size,
+	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
 	collapsed,
@@ -22,6 +26,7 @@ const VideoAttachment = ({
 
 	return (
 		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
 			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size} isCollapsed={collapsed}>
 				<MessageGenericPreview style={{ maxWidth: 368, width: '100%' }}>
 					<Box is='video' controls preload='metadata' ref={mediaRef}>

apps/meteor/client/components/message/content/attachments/file/hooks/useReloadOnError.tsx

@@ -1,4 +1,4 @@
-import { useEffectEvent, useSafeRefCallback } from '@rocket.chat/fuselage-hooks';
+import { useStableCallback, useSafeRefCallback } from '@rocket.chat/fuselage-hooks';
 import { useCallback, useRef, useState } from 'react';
 
 const events = ['error', 'stalled', 'play'];
@@ -52,7 +52,7 @@ export const useReloadOnError = (url: string, type: 'video' | 'audio') => {
 	const isRecovering = useRef(false);
 	const firstRecoveryAttempted = useRef(false);
 
-	const handleMediaURLRecovery = useEffectEvent(async (event: Event) => {
+	const handleMediaURLRecovery = useStableCallback(async (event: Event) => {
 		if (isRecovering.current) {
 			console.debug(`Media URL recovery already in progress, skipping ${event.type} event`);
 			return;