Replies

src/assets/css/chat.scss

@@ -150,7 +150,7 @@ $chat-text-size: 0.7pt;
     margin-left: 30% !important;
     text-align: right;
     .bubble {
-        background-color: #88eec0;
+        background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
         padding: 8px;
     }
@@ -243,12 +243,40 @@ $chat-text-size: 0.7pt;
     font-size: 14 * $chat-text-size;
     color: #000000;
     overflow-wrap: break-word;
+    white-space: pre;
     .edit-marker {
         font-size: 0.8rem;
         color: #888888;
     }
 }
 
+.original-message {
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
+    padding: 8px;
+    max-height: 200px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: 8px;
+    .original-message-sender {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 700;
+        font-size: 13 * $chat-text-size;
+        color: #000000;
+        overflow-wrap: break-word;
+        white-space: pre;
+    }
+    .original-message-text {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-size: 11 * $chat-text-size;
+        color: #000000;
+        overflow-wrap: break-word;
+        white-space: pre;
+    }
+}
+
 .time {
     font-family: 'Titillium Web', sans-serif;
     font-weight: 300;

src/components/Chat.vue

@@ -14,6 +14,7 @@
               v-on:close="showContextMenu = false"
               v-if="selectedEvent && showContextMenu"
               v-on:addreaction="addReaction"
+              v-on:addreply="addReply(selectedEvent)"
               v-on:edit="edit(selectedEvent)"
               :event="selectedEvent"
               :incoming="selectedEvent.getSender() != $matrix.currentUserId"
@@ -55,16 +56,10 @@
                   'm.reaction'
                 )
               "
+              :timelineSet="timelineWindow._timelineSet"
               v-on:send-quick-reaction="sendQuickReaction"
               v-on:context-menu="showContextMenuForEvent($event)"
             />
-            <!-- <message-operations
-              v-on:close="showContextMenu = false"
-              v-if="selectedEvent == event && showContextMenu"
-              v-on:addreaction="addReaction"
-              :event="event"
-              :incoming="event.getSender() != $matrix.currentUserId"
-            /> -->
           </div>
         </div>
       </div>
@@ -73,6 +68,8 @@
     <!-- Input area -->
     <v-container v-if="room" fluid class="input-area-outer">
       <v-row class="ma-0 pa-0">
+        <div v-if="replyToEvent">REPLYING TO EVENT: {{ replyToEvent.getContent().body }}</div>
+
         <!-- CONTACT IS TYPING -->
         <div class="typing">
           {{ typingMembersString }}
@@ -112,8 +109,8 @@
           />
         </v-col>
 
-        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent">
+        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent || replyToEvent">
-          <v-btn fab small elevation="0" color="black" @click.stop="cancelEdit">
+          <v-btn fab small elevation="0" color="black" @click.stop="cancelEditReply">
             <v-icon color="white">cancel</v-icon>
           </v-btn>
         </v-col>
@@ -261,6 +258,7 @@ export default {
       showEmojiPicker: false,
       selectedEvent: null,
       editedEvent: null,
+      replyToEvent: null,
       showContextMenu: false,
       /**
        * Current chat container size. We need to keep track of this so that if and when
@@ -298,7 +296,7 @@ export default {
       return this.room.roomId;
     },
     attachButtonDisabled() {
-      return this.editedEvent || this.currentInput.length > 0;
+      return this.editedEvent != null || this.replyToEvent != null || this.currentInput.length > 0;
     },
     sendButtonDisabled() {
       return this.currentInput.length == 0;
@@ -328,6 +326,7 @@ export default {
 
   watch: {
     room: {
+      immediate: true,
       handler(room, ignoredOldVal) {
         console.log("Chat: Current room changed");
 
@@ -351,8 +350,7 @@ export default {
             this.paginateBackIfNeeded();
           });
         });
-      },
+      }
-      immediate: true,
     },
   },
 
@@ -524,7 +522,8 @@ export default {
             this.$matrix.matrixClient,
             this.roomId,
             this.currentInput,
-            this.editedEvent
+            this.editedEvent,
+            this.replyToEvent
           )
           .then(() => {
             console.log("Sent message");
@@ -534,6 +533,7 @@ export default {
           });
         this.currentInput = "";
         this.editedEvent = null; //TODO - Is this a good place to reset this?
+        this.replyToEvent = null;
       }
     },
 
@@ -678,15 +678,21 @@ export default {
       this.showEmojiPicker = true;
     },
 
+    addReply(event) {
+      this.replyToEvent = event;
+      this.$refs.messageInput.focus();
+    },
+
     edit(event) {
       this.editedEvent = event;
       this.currentInput = event.getContent().body;
       this.$refs.messageInput.focus();
     },
 
-    cancelEdit() {
+    cancelEditReply() {
       this.currentInput = "";
       this.editedEvent = null;
+      this.replyToEvent = null;
     },
 
     emojiSelected(e) {

src/components/messages/MessageIncomingText.vue

@@ -8,13 +8,18 @@
     </v-avatar>
 
     <div class="bubble">
+      <div class="original-message" v-if="inReplyToText">
+        <div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
+        <div class="original-message-text">{{ inReplyToText }}</div>
+      </div>
       <div class="message">
-        {{ event.getContent().body }}
+        {{ messageText }}
         <span class="edit-marker" v-if="event.replacingEventId()"
           >(edited)</span
         >
       </div>
       <QuickReactions :event="event" :reactions="reactions" />
+      <!-- <div>{{ JSON.stringify(event) }}</div> -->
     </div>
     <v-btn icon class="op-button" @click.stop="showContextMenu"
       ><v-icon>more_vert</v-icon></v-btn

src/components/messages/MessageOutgoingText.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="messageOut">
     <div class="bubble">
+      <div class="original-message" v-if="inReplyToText">
+        <div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
+        <div class="original-message-text">{{ inReplyToText }}</div>
+      </div>
+
       <div class="message">
-        {{ event.getContent().body }}
+        {{ messageText }}
         <span class="edit-marker" v-if="event.replacingEventId()"
           >(edited)</span
         >

src/components/messages/messageMixin.js

@@ -22,9 +22,78 @@ export default {
       default: function () {
         return null
       }
+    },
+    timelineSet: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    },
+  },
+  data() {
+    return {
+      inReplyToEvent: null,
+      inReplyToSender: null
+    }
+  },
+  mounted() {
+    const relatesTo = this.event.getWireContent()['m.relates_to'];
+    if (relatesTo && relatesTo['m.in_reply_to'])
+    {
+      // Can we find the original message?
+      const originalEventId = relatesTo['m.in_reply_to'].event_id;
+      if (originalEventId) {
+        const originalEvent = this.timelineSet.findEventById(originalEventId);
+        this.inReplyToEvent = originalEvent;
+        this.inReplyToSender = this.messageEventDisplayName(originalEvent);
+      }
     }
   },
   computed: {
+    inReplyToText() {
+      const relatesTo = this.event.getWireContent()['m.relates_to'];
+      if (relatesTo && relatesTo['m.in_reply_to'])
+      {
+        const content = this.event.getContent();
+
+        const lines = content.body.split('\n').reverse();
+        while (lines.length && !lines[0].startsWith('> ')) lines.shift();
+        // Reply fallback has a blank line after it, so remove it to prevent leading newline
+        if (lines[0] === '') lines.shift();
+        const text = lines
+        .map((item) => { return item.replace(/^> (<.*> )?/g, ''); })
+        .reverse()
+        .join('\n');
+        if (text) {
+          return text;
+        }
+
+        if (this.inReplyToEvent) {
+          var c = this.inReplyToEvent.getContent();
+          return c.body;
+        }
+
+        // We don't have the original text (at the moment at least)
+        return  "<original text>";
+      }
+      return null;
+    },
+
+    messageText() {
+      const relatesTo = this.event.getWireContent()['m.relates_to'];
+      if (relatesTo && relatesTo['m.in_reply_to'])
+      {
+        const content = this.event.getContent();
+
+        // Remove the new text and strip "> " from the old original text
+        const lines = content.body.split('\n');
+        while (lines.length && lines[0].startsWith('> ')) lines.shift();
+        // Reply fallback has a blank line after it, so remove it to prevent leading newline
+        if (lines[0] === '') lines.shift();
+        return lines.join('\n');
+      }
+      return this.event.getContent().body;
+    }
   },
   methods: {
     showContextMenu() {

src/plugins/utils.js

@@ -113,7 +113,7 @@ class Util {
         });
     }
 
-    sendTextMessage(matrixClient, roomId, text, editedEvent) {
+    sendTextMessage(matrixClient, roomId, text, editedEvent, replyToEvent) {
         var content = ContentHelpers.makeTextMessage(text);
         if (editedEvent) {
             content['m.relates_to'] = {
@@ -124,6 +124,18 @@ class Util {
                 body: content.body,
                 msgtype: content.msgtype
             }
+        } else if (replyToEvent) {
+            content['m.relates_to'] = {
+                'm.in_reply_to': {
+                    event_id: replyToEvent.getId()
+                }
+            }
+
+            // Prefix the content with reply info (seems to be a legacy thing)
+            const prefix = replyToEvent.getContent().body.split('\n').map((item,index) => {
+                return "> " + (index == 0 ? ("<" + replyToEvent.getSender() + "> ") : "") + item;
+            }).join('\n');
+            content.body = prefix + "\n\n" + content.body;
         }
         return this.sendMessage(matrixClient, roomId, "m.room.message", content);
     }

src/services/matrix.service.js

@@ -24,6 +24,7 @@ export default {
                     matrixClient: null,
                     matrixClientReady: false,
                     rooms: [],
+                    currentRoom: null,
                 }
             },
             mounted() {
@@ -47,11 +48,15 @@ export default {
                 currentRoomId() {
                     return this.$store.state.currentRoomId;
                 },
+            },
 
-                currentRoom() {
+            watch: {
-                    return this.getRoom(this.currentRoomId);
+                currentRoomId: {
-                },
+                    immediate: true,
-
+                    handler(roomId) {
+                        this.currentRoom = this.getRoom(roomId);
+                    }
+                }
             },
 
             methods: {
@@ -120,6 +125,8 @@ export default {
                 initClient() {
                     this.reloadRooms();
                     this.matrixClientReady = true;
+                    this.currentRoom = null;
+                    this.currentRoom = this.getRoom(this.currentRoomId);
                     this.matrixClient.emit('Matrix.initialized', this.matrixClient);
                 },
 
@@ -259,6 +266,9 @@ export default {
                 },
 
                 getRoom(roomId) {
+                    if (!roomId) {
+                        return null;
+                    }
                     var room = this.rooms.find(room => {
                         if (roomId.startsWith("#")) {
                             return room.getCanonicalAlias() == roomId;