parse reply events

src/components/message.vue

@@ -1,18 +1,25 @@
 <template>
     <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
-      <div v-html="solveTextLinks(msg.replace(/</g, '&lt')
-         .replace(/>/g, '&gt'))"></div>
+      <div v-if="replyEvent" class="reply">
+        {{replyEvent.sender}}<br>
+        {{replyEvent.type==='m.room.message'?replyEvent.content.body:'unkown event'}}
+      </div>
+      <div v-html="parseMessage(msg)"></div>
       <div class="time">{{time}}</div>
     </div>
 </template>
 
 <script>
+import {matrix} from "@/main";
+
 export default {
   name: "message",
   props: {
     msg: String,
     time: String,
-    type: String
+    type: String,
+    content: Object,
+    roomId: String
   },
   methods:{
     solveTextLinks(text){
@@ -26,7 +33,33 @@ export default {
           return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
         }
       )
+    },
+    async getReplyEvent(content) {
+      let replyId = this.getReplyId(content);
+      if (replyId === undefined) return undefined;
+      await matrix.client.fetchRoomEvent(this.roomId, replyId).then((res) => {
+        this.replyEvent = res;
+      });
+    },
+    getReplyId(content){
+      if(!content['m.relates_to']) return undefined;
+      return content['m.relates_to']['m.in_reply_to'].event_id || undefined;
+    },
+    parseMessage(msg){
+      return this.solveTextLinks(
+        msg.replace(/>.*\n/gm, '').trim()
+          .replace(/</g, '&lt')
+          .replace(/>/g, '&gt')
+      );
     }
+  },
+  data(){
+    return{
+      replyEvent: undefined
+    }
+  },
+  created() {
+    this.getReplyEvent(this.content);
   }
 }
 </script>
@@ -61,4 +94,9 @@ export default {
     font-size: 0.7rem;
     text-align: right;
   }
+  .reply{
+    border-left:  2px solid #fff;
+    padding-left: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
 </style>

src/components/timeline.vue

@@ -30,9 +30,12 @@
           :key="event.origin_server_ts"
           :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
         >
-          <message v-if="event.content.msgtype==='m.text'"
+          <message
+            v-if="event.content.msgtype==='m.text'"
             :type="event.sender === user?'send':'receive'"
             :msg=event.content.body :time=getTime(event.origin_server_ts)
+            :content="event.content"
+            :roomId="roomId"
           />
           <div v-else-if="event.type==='m.room.member'" class="info">
             {{membershipEvents[event.content.membership]}}
@@ -52,6 +55,7 @@ import userThumbnail from "@/components/userThumbnail";
 import {matrix} from "@/main";
 import splitArray from "@/lib/splitArray";
 import {getDate, getTime} from "@/lib/getTimeStrings";
+import sdk from "matrix-js-sdk"
 
 export default {
   name: 'eventGroup',
@@ -62,12 +66,25 @@ export default {
   props: {
     timeline: Array,
     user: String,
-    groupTimeline: Boolean
+    groupTimeline: Boolean,
+    roomId: String
   },
   methods: {
     getUser(userId) {
       return matrix.client.getUser(userId);
     },
+    getReplyId(event){
+      if(!event.content['m.relates_to']) return undefined;
+      if(!event.content['m.relates_to']['m.in_reply_to']) return undefined;
+      return event.content['m.relates_to']['m.in_reply_to'].event_id || undefined;
+    },
+    async getReplyEvent(event, callback){
+      let replyId = this.getReplyId(event);
+      if (replyId === undefined) return undefined;
+      await matrix.client.fetchRoomEvent(this.roomId, replyId).then((res) => {
+        callback(new sdk.MatrixEvent(res));
+      });
+    },
     splitArray,
     getDate,
     getTime
@@ -126,6 +143,7 @@ export default {
       }
       .username{
         margin-left: 1rem;
+        font-weight: bold;
       }
       .event{
         .info{

src/views/chat.vue

@@ -4,7 +4,7 @@
       <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
         <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
         <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
-        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user"/>
+        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId"/>
       </div>
       <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     </div>