diff --git a/apps/meteor/client/hooks/useDecryptedMessage.ts b/apps/meteor/client/hooks/useDecryptedMessage.ts new file mode 100644 index 00000000000..7c13077787d --- /dev/null +++ b/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; +}; diff --git a/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx b/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx index b6d074dee60..4132167189a 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx +++ b/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 = 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;