[FIX] Decrypt E2EE messages on thread list (#26133)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>

apps/meteor/client/hooks/useDecryptedMessage.ts

@@ -0,0 +1,25 @@
+import { IMessage, isE2EEMessage } from '@rocket.chat/core-typings';
+import { useSafely } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useState, useEffect } from 'react';
+
+import { e2e } from '../../app/e2e/client/rocketchat.e2e';
+
+export const useDecryptedMessage = (message: IMessage): string => {
+	const t = useTranslation();
+	const [decryptedMessage, setDecryptedMessage] = useSafely(useState(t('E2E_message_encrypted_placeholder')));
+
+	useEffect(() => {
+		if (!isE2EEMessage(message)) {
+			return;
+		}
+
+		e2e.decryptMessage(message).then((decryptedMsg) => {
+			if (decryptedMsg.msg) {
+				setDecryptedMessage(decryptedMsg.msg);
+			}
+		});
+	}, [message, t, setDecryptedMessage]);
+
+	return isE2EEMessage(message) ? decryptedMessage : message.msg;
+};

apps/meteor/client/views/room/contextualBar/Threads/Row.tsx

@@ -2,6 +2,7 @@ import type { IMessage } from '@rocket.chat/core-typings';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, memo, MouseEvent } from 'react';
 
+import { useDecryptedMessage } from '../../../../hooks/useDecryptedMessage';
 import { useTimeAgo } from '../../../../hooks/useTimeAgo';
 import { clickableItem } from '../../../../lib/clickableItem';
 import { callWithErrorHandling } from '../../../../lib/utils/callWithErrorHandling';
@@ -36,7 +37,8 @@ const Row: FC<ThreadRowProps> = memo(function Row({ thread, showRealNames, unrea
 	const t = useTranslation();
 	const formatDate = useTimeAgo();
 
-	const msg = normalizeThreadMessage(thread);
+	const decryptedMsg = useDecryptedMessage(thread);
+	const msg = normalizeThreadMessage({ ...thread, msg: decryptedMsg });
 
 	const { name = thread.u.username } = thread.u;