fix: show deletion reason as primary text on redacted messages

src/app/components/message/MsgTypeRenderers.tsx

@@ -40,12 +40,11 @@ export function MBadEncrypted() {
 
 type RedactedContentProps = {
   reason?: string;
-  originalBody?: string;
 };
-export function RedactedContent({ reason, originalBody }: RedactedContentProps) {
+export function RedactedContent({ reason }: RedactedContentProps) {
   return (
     <Text>
-      <MessageDeletedContent reason={reason} originalBody={originalBody} />
+      <MessageDeletedContent reason={reason} />
     </Text>
   );
 }

src/app/components/message/content/FallbackContent.tsx

@@ -4,14 +4,12 @@ import React from 'react';
 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
 const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
 
-export const MessageDeletedContent = as<'div', { children?: never; reason?: string; originalBody?: string }>(
+export const MessageDeletedContent = as<'div', { children?: never; reason?: string }>(
-  ({ reason, originalBody, ...props }, ref) => (
+  ({ reason, ...props }, ref) => (
     <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
       <Icon size="50" src={Icons.Delete} />
-      {originalBody ? (
+      {reason ? (
-        <s>{originalBody.length > 80 ? `${originalBody.slice(0, 80)}…` : originalBody}</s>
+        <i>{reason}</i>
-      ) : reason ? (
-        <i>This message has been deleted. {reason}</i>
       ) : (
         <i>This message has been deleted</i>
       )}

src/app/features/room/RoomTimeline.tsx

@@ -506,8 +506,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     smooth: true,
   });
 
-  const redactedBodyCache = useRef<Map<string, string>>(new Map());
-
   const [focusItem, setFocusItem] = useState<
     | {
         index: number;
@@ -1037,14 +1035,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const getContent = (() =>
           editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;
 
-        // Cache body before it can be stripped by redaction
-        if (!mEvent.isRedacted()) {
-          const c = mEvent.getContent();
-          if (c.body && ['m.text', 'm.notice', 'm.emote'].includes(c.msgtype ?? '')) {
-            redactedBodyCache.current.set(mEventId, c.body);
-          }
-        }
-
         const senderId = mEvent.getSender() ?? '';
         const senderDisplayName =
           getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
@@ -1106,10 +1096,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             dateFormatString={dateFormatString}
           >
             {mEvent.isRedacted() ? (
-              <RedactedContent
+              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
-                reason={mEvent.getUnsigned().redacted_because?.content.reason}
-                originalBody={redactedBodyCache.current.get(mEventId)}
-              />
             ) : (
               <RenderMessageContent
                 displayName={senderDisplayName}