Replies

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() {