Make local echo work for threads (#7157)

src/ContentMessages.tsx

@@ -20,7 +20,7 @@ import React from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { IEncryptedFile, IMediaEventInfo } from "./customisations/models/IMediaEventContent";
 import { IUploadOpts } from "matrix-js-sdk/src/@types/requests";
-import { MsgType } from "matrix-js-sdk/src/@types/event";
+import { MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
 
 import dis from './dispatcher/dispatcher';
 import * as sdk from './index';
@@ -518,6 +518,7 @@ export default class ContentMessages {
                     uploadAll = true;
                 }
             }
+
             promBefore = this.sendContentToRoom(file, roomId, relation, matrixClient, promBefore);
         }
     }
@@ -649,7 +650,10 @@ export default class ContentMessages {
             return promBefore;
         }).then(function() {
             if (upload.canceled) throw new UploadCanceledError();
-            const prom = matrixClient.sendMessage(roomId, content);
+            const threadId = relation?.rel_type === RelationType.Thread
+                ? relation.event_id
+                : null;
+            const prom = matrixClient.sendMessage(roomId, threadId, content);
             if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
                 prom.then(resp => {
                     sendRoundTripMetric(matrixClient, roomId, resp.event_id);

src/components/structures/ThreadView.tsx

@@ -81,7 +81,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         this.teardownThread();
         dis.unregister(this.dispatcherRef);
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        room.on(ThreadEvent.New, this.onNewThread);
+        room.removeListener(ThreadEvent.New, this.onNewThread);
     }
 
     public componentDidUpdate(prevProps) {

src/components/views/rooms/EditMessageComposer.tsx

@@ -426,7 +426,11 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
             }
             if (shouldSend) {
                 this.cancelPreviousPendingEdit();
-                const prom = this.props.mxClient.sendMessage(roomId, editContent);
+
+                const event = this.props.editState.getEvent();
+                const threadId = event.threadRootId || null;
+
+                const prom = this.props.mxClient.sendMessage(roomId, threadId, editContent);
                 this.clearStoredEditorState();
                 dis.dispatch({ action: "message_sent" });
                 CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);

src/components/views/rooms/SendMessageComposer.tsx

@@ -483,7 +483,11 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                 decorateStartSendingTime(content);
             }
 
-            const prom = this.props.mxClient.sendMessage(roomId, content);
+            const threadId = this.props.relation?.rel_type === RelationType.Thread
+                ? this.props.relation.event_id
+                : null;
+
+            const prom = this.props.mxClient.sendMessage(roomId, threadId, content);
             if (replyToEvent) {
                 // Clear reply_to_event as we put the message into the queue
                 // if the send fails, retry will handle resending.