Properly emit change in reply tile

src/domain/session/room/ComposerViewModel.js

@@ -6,13 +6,59 @@ export class ComposerViewModel extends ViewModel {
         this._roomVM = roomVM;
         this._isEmpty = true;
         this._replyVM = null;
+        this._replySub = null;
+        this._replyingToId = null;
     }
 
-    setReplyingTo(tile) {
-        const changed = this._replyVM !== tile;
-        this._replyVM = tile;
-        if (changed) {
+    setReplyingTo(id) {
+        if (this._replyingToId === id) {
+            return;
+        }
+        this._replyingToId = id;
+        // Dispose of event subscription
+        if (this._replySub) {
+            this._replySub();
+            this.untrack(this._replySub);
+        }
+        // replyVM may not be created yet even if subscribed.
+        if (this._replyVM) {
+            this._replyVM.dispose();
+            this._replyVM = null;
+        }
+        // Early return if we don't have an ID to reply to.
+        if (!id) {
+            this._replySub = null;
             this.emitChange("replyViewModel");
+            return;
+        }
+        const observable = this._roomVM._observeEvent(id);
+        const entry = observable.get();
+        if (entry) {
+            this._replyVM = this._roomVM._createTile(entry);
+        }
+        this._replySub = observable.subscribe(entry => {
+            if (!this._replyVM) {
+                this._replyVM = this._roomVM._createTile(entry);
+            } else {
+                this._updateReplyEntry(entry);
+            }
+            this.emitChange("replyViewModel");
+        });
+        this.track(this._replySub);
+        this.emitChange("replyViewModel");
+    }
+
+    _updateReplyEntry(entry) {
+        const action = this._replyVM.updateEntry(entry);
+        if (action.shouldReplace) {
+            const newTile = this._roomVM._createTile(entry);
+            this._replyVM.dispose();
+            this._replyVM = newTile || null;
+        } else if (action.shouldRemove) {
+            this._replyVM.dispose();
+            this._replyVM = null;
+        } else if (action.shouldUpdate) {
+            this._replyVM.emitChange(action.updateParams);
         }
     }
 

src/domain/session/room/RoomViewModel.js

@@ -19,6 +19,7 @@ import {TimelineViewModel} from "./timeline/TimelineViewModel.js";
 import {ComposerViewModel} from "./ComposerViewModel.js"
 import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
 import {ViewModel} from "../../ViewModel.js";
+import {tilesCreator} from "./timeline/tilesCreator.js";
 
 export class RoomViewModel extends ViewModel {
     constructor(options) {
@@ -30,6 +31,7 @@ export class RoomViewModel extends ViewModel {
         this._timelineError = null;
         this._sendError = null;
         this._composerVM = null;
+        this._tilesCreator = null;
         if (room.isArchived) {
             this._composerVM = new ArchivedViewModel(this.childOptions({archivedRoom: room}));
         } else {
@@ -43,12 +45,15 @@ export class RoomViewModel extends ViewModel {
         this._room.on("change", this._onRoomChange);
         try {
             const timeline = await this._room.openTimeline();
-            const timelineVM = this.track(new TimelineViewModel(this.childOptions({
+            this._tilesCreator = tilesCreator(this.childOptions({
                 room: this._room,
                 roomVM: this,
                 timeline,
+            }));
+            this._timelineVM = this.track(new TimelineViewModel(this.childOptions({
+                tilesCreator: this._tilesCreator,
+                timeline
             })));
-            this._timelineVM = timelineVM;
             this.emitChange("timelineViewModel");
         } catch (err) {
             console.error(`room.openTimeline(): ${err.message}:\n${err.stack}`);
@@ -301,11 +306,19 @@ export class RoomViewModel extends ViewModel {
         this.navigation.applyPath(path);
     }
 
-    startReply(entry) {
+    startReply(id) {
         if (!this._room.isArchived) {
-            this._composerVM.setReplyingTo(entry);
+            this._composerVM.setReplyingTo(id);
         }
     }
+
+    _createTile(entry) {
+        return this._tilesCreator(entry);
+    }
+
+    _observeEvent(eventId) {
+        return this._room.observeEvent(eventId);
+    }
 }
 
 function imageToInfo(image) {

src/domain/session/room/timeline/TimelineViewModel.js

@@ -38,9 +38,9 @@ import {ViewModel} from "../../../ViewModel.js";
 export class TimelineViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {room, timeline, roomVM} = options;
+        const {timeline, tilesCreator} = options;
         this._timeline = this.track(timeline);
-        this._tiles = new TilesCollection(timeline.entries, tilesCreator(this.childOptions({room, timeline, roomVM})));
+        this._tiles = new TilesCollection(timeline.entries, tilesCreator);
     }
 
     /**

src/domain/session/room/timeline/tiles/BaseMessageTile.js

@@ -107,7 +107,7 @@ export class BaseMessageTile extends SimpleTile {
     }
 
     startReply() {
-        this._roomVM.startReply(this);
+        this._roomVM.startReply(this._entry.id);
     }
 
     reply(msgtype, body, log = null) {