Replies

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-btn fab small elevation="0" color="black" @click.stop="cancelEdit">
+        <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="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() {