From b0c5b2f2ce4b67ad7f3c528f6b5c1f8b8d720091 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Thu, 22 Jul 2021 14:10:59 -0700
Subject: [PATCH] Use the proper tile view to display reply preview

---
 .../web/ui/session/room/MessageComposer.js    | 28 ++++++++++---------
 .../web/ui/session/room/TimelineList.js       |  2 +-
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js
index ea9e0bfb..b28c51b0 100644
--- a/src/platform/web/ui/session/room/MessageComposer.js
+++ b/src/platform/web/ui/session/room/MessageComposer.js
@@ -18,6 +18,7 @@ import {TemplateView} from "../../general/TemplateView.js";
 import {Popup} from "../../general/Popup.js";
 import {Menu} from "../../general/Menu.js";
 import {TextMessageView} from "./timeline/TextMessageView.js";
+import {viewClassForEntry} from "./TimelineList.js"
 
 export class MessageComposer extends TemplateView {
     constructor(viewModel) {
@@ -33,19 +34,20 @@ export class MessageComposer extends TemplateView {
             onKeydown: e => this._onKeyDown(e),
             onInput: () => vm.setInput(this._input.value),
         });
-        const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => !rvm ? null :
-            t.div({
-                className: "MessageComposer_replyPreview"
-            }, [
-                t.span({ className: "replying" }, "Replying"),
-                t.button({
-                    className: "cancel",
-                    onClick: () => this._clearReplyingTo()
-                }, "Close"),
-                // TODO need proper view, not just assumed TextMessageView
-                t.view(new TextMessageView(vm.replyViewModel, true, "div"))
-            ])
-        );
+        const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => {
+            const View = rvm && viewClassForEntry(rvm);
+            if (!View) { return null; }
+            return t.div({
+                    className: "MessageComposer_replyPreview"
+                }, [
+                    t.span({ className: "replying" }, "Replying"),
+                    t.button({
+                        className: "cancel",
+                        onClick: () => this._clearReplyingTo()
+                    }, "Close"),
+                    t.view(new View(rvm, true, "div"))
+                ])
+        });
         const input = t.div({className: "MessageComposer_input"}, [
             this._input,
             t.button({
diff --git a/src/platform/web/ui/session/room/TimelineList.js b/src/platform/web/ui/session/room/TimelineList.js
index 74556c57..e0179e5d 100644
--- a/src/platform/web/ui/session/room/TimelineList.js
+++ b/src/platform/web/ui/session/room/TimelineList.js
@@ -24,7 +24,7 @@ import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js";
 import {AnnouncementView} from "./timeline/AnnouncementView.js";
 import {RedactedView} from "./timeline/RedactedView.js";
 
-function viewClassForEntry(entry) {
+export function viewClassForEntry(entry) {
     switch (entry.shape) {
         case "gap": return GapView;
         case "announcement": return AnnouncementView;