Fix msgtype changes from edits not rerendering timeline tiles (#33416)

* Fix msgtype changes from edits not rerendering timeline tiles

* Change approach to view model listeners instead

* Repaint the mounted tile on MatrixEventEvent.Replaced

apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ComponentProps } from "react";
 import { type MatrixClient, type MatrixEvent, PushRuleKind, type Room } from "matrix-js-sdk/src/matrix";
 import { mocked, type MockedObject } from "jest-mock";
-import { render, waitFor } from "jest-matrix-react";
+import { act, render, waitFor } from "jest-matrix-react";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 
 import {
@@ -174,6 +174,44 @@ describe("<TextualBody />", () => {
         expect(container).toHaveTextContent("* sender winks(edited)");
     });
 
+    it("updates the body kind when an edit changes msgtype to m.emote", async () => {
+        DMRoomMap.makeShared(defaultMatrixClient);
+
+        const ev = mkEvent({
+            type: "m.room.message",
+            room: room1Id,
+            user: "sender",
+            content: {
+                body: "hello",
+                msgtype: "m.text",
+            },
+            event: true,
+        });
+
+        const { container } = getComponent({ mxEvent: ev });
+        expect(container).toHaveTextContent("hello");
+
+        const edit = mkEvent({
+            type: "m.room.message",
+            room: room1Id,
+            user: "sender",
+            content: {
+                "body": "* waves",
+                "msgtype": "m.emote",
+                "m.new_content": {
+                    body: "waves",
+                    msgtype: "m.emote",
+                },
+            },
+            event: true,
+        });
+        act(() => {
+            ev.makeReplaced(edit);
+        });
+
+        await waitFor(() => expect(container).toHaveTextContent("* sender waves(edited)"));
+    });
+
     it("renders m.notice correctly", () => {
         DMRoomMap.makeShared(defaultMatrixClient);
 

apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -214,6 +214,35 @@ describe("EventTile", () => {
                 expect(screen.getByText("Can't load this message (m.room.message)")).toBeInTheDocument();
             });
         });
+
+        it("updates msgtype-derived tile classes when an edit changes msgtype to m.emote", async () => {
+            const { container } = getComponent();
+            expect(container.querySelector(".mx_EventTile_emote")).toBeNull();
+
+            const edit = new MatrixEvent({
+                type: EventType.RoomMessage,
+                room_id: ROOM_ID,
+                sender: "@alice:example.org",
+                content: {
+                    "body": "* waves",
+                    "msgtype": "m.emote",
+                    "m.new_content": {
+                        body: "waves",
+                        msgtype: "m.emote",
+                    },
+                    "m.relates_to": {
+                        rel_type: "m.replace",
+                        event_id: mxEvent.getId(),
+                    },
+                },
+            });
+
+            act(() => {
+                mxEvent.makeReplaced(edit);
+            });
+
+            await waitFor(() => expect(container.querySelector(".mx_EventTile_emote")).not.toBeNull());
+        });
     });
 
     describe("EventTile in the right panel", () => {