add reply to events / update sendEvent / refactor parseMessage to eventUtils / fix quotes

src/components/message.vue

@@ -10,11 +10,12 @@
 </template>
 
 <script>
-import {matrix} from "@/main";
-import {calcUserName} from "@/lib/matrixUtils";
+import {matrix} from '@/main';
+import {calcUserName} from '@/lib/matrixUtils';
+import {parseMessage} from '@/lib/eventUtils';
 
 export default {
-  name: "message",
+  name: 'message',
   props: {
     msg: String,
     time: String,
@@ -23,18 +24,6 @@ export default {
     roomId: String
   },
   methods:{
-    solveTextLinks(text){
-      return (text || "").replace(
-        /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
-        (match, space, url)=>{
-          let hyperlink = url;
-          if (!hyperlink.match('^https?://')) {
-            hyperlink = 'http://' + hyperlink;
-          }
-          return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
-        }
-      )
-    },
     async getReplyEvent(content) {
       let replyId = this.getReplyId(content);
       if (replyId === undefined) return undefined;
@@ -46,14 +35,8 @@ export default {
       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')
-      );
-    },
-    calcUserName
+    calcUserName,
+    parseMessage
   },
   data(){
     return{
@@ -81,13 +64,13 @@ export default {
     margin-top: 0.25rem;
   }
   .messageReceive{
-    background-color: #42b983;
+    background-color: #424141;
     border-radius: 1rem 1rem 1rem 0;
   }
   .messageSend{
     margin-left:auto;
     margin-right:0;
-    background-color: #42a7b9;
+    background-color: #357882;
     border-radius: 1rem 1rem 0 1rem;
   }
   .time{

src/components/newMessage.vue

@@ -1,16 +1,16 @@
 <template>
-    <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
-      <label for="newMessageInput"></label>
+  <div class="newMessageBanner" ref="newMessageBanner">
+    <div class="reply" v-if="replyTo" @click="resetReplyTo">
+      <span class="username">{{calcUserName(replyTo.sender)}}</span><br>
+      {{parseMessage(replyTo.content.body)}}
+    </div>
+    <form v-on:submit.prevent="sendMessage()">
       <textarea
         @keyup.enter.exact="sendMessage()"
         @input="resizeMessageBanner()"
-        v-model="msg.content.body"
-        ref="newMessageInput"
-        id="newMessageInput"
-        class="newMessageInput"
-        autocomplete="off"
-        rows="1"
-        placeholder="type a message ..."
+        v-model="event.content.body"
+        ref="newMessageInput" class="newMessageInput"
+        rows="1" placeholder="type a message ..."
       />
       <icon
         type="submit"
@@ -19,52 +19,67 @@
         ic="./sym/ic_send_white.svg"
       />
     </form>
+  </div>
 </template>
 
 <script>
 import icon from '@/components/icon.vue';
 import {matrix} from '@/main.js';
+import {parseMessage} from '@/lib/eventUtils';
+import {calcUserName} from '@/lib/matrixUtils';
 
 export default {
-  name: "newMessage",
+  name: 'newMessage',
   components: {
     icon
   },
   props: {
     onResize: Function,
-    roomId: String
+    roomId: String,
+    replyTo: Object,
+    resetReplyTo: Function
   },
   methods: {
     sendMessage(){
-      let content = this.msg.content;
+      let content = this.event.content;
       if (!content.body.trim()) return;
-      let msgSend = Object.assign({}, this.msg);
-      matrix.sendEvent(msgSend, this.roomId);
-      content.body = "";
+      matrix.sendEvent(this.event, this.roomId, this.replyTo);
+      content.body = '';
+      this.resetReplyTo();
       let id = this.$refs.newMessageInput;
-      id.style.height = "1.25rem";
+      id.style.height = '1.25rem';
       this.onResize(id.parentElement.clientHeight);
     },
     resizeMessageBanner(){
       let id = this.$refs.newMessageInput;
       id.style.height = '1.25rem';
       id.style.height = `${id.scrollHeight}px`;
-      this.onResize(id.parentElement.clientHeight);
+      this.onResize(this.$refs.newMessageBanner.clientHeight);
+    },
+    focusInput(){
+      this.$refs.newMessageInput.focus();
     },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
     },
     onSelectEmoji(emoji) {
-      this.msg.content.body += emoji.data;
-    }
+      this.event.content.body += emoji.data;
+    },
+    parseMessage,
+    calcUserName
   },
   data(){
     return {
-      msg: {
-        type: "m.room.message",
+      event: {
+        type: 'm.room.message',
         content: {
-          body: "",
-          msgtype: "m.text"
+          body: '',
+          msgtype: 'm.text',
+          'm.relates_to': {
+            'm.in_reply_to': {
+              event_id: undefined
+            }
+          }
         }
       },
       showEmojiPicker: false
@@ -89,7 +104,7 @@ export default {
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
   padding: 0;
-  left: 2rem;
+  left: 1rem;
   min-height: 1.5rem;
   max-height: 10rem;
   width: calc(100% - 7rem);
@@ -110,4 +125,18 @@ export default {
   bottom: 0.25rem;
   background-color: unset;
 }
+.reply{
+  position: relative;
+  width: calc(100% - 7rem);
+  left: 1rem;
+  border-left:  2px solid #fff;
+  padding-left: 0.5rem;
+  margin-top: 0.75rem;
+  margin-right: 0.5rem;
+  word-break: break-word;
+  white-space: pre-line;
+}
+.username{
+  font-weight: bold;
+}
 </style>

src/components/timeline.vue

@@ -29,6 +29,7 @@
            v-for="event in group"
           :key="event.origin_server_ts"
           :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
+          @contextmenu.prevent="setReplyTo(event)"
         >
           <message
             v-if="event.content.msgtype==='m.text'"
@@ -54,11 +55,11 @@
 </template>
 
 <script>
-import message from "@/components/message";
-import avatar from "@/components/avatar";
-import splitArray from "@/lib/splitArray";
-import {getDate, getTime} from "@/lib/getTimeStrings";
-import {getUser, calcUserName} from "@/lib/matrixUtils";
+import message from '@/components/message';
+import avatar from '@/components/avatar';
+import splitArray from '@/lib/splitArray';
+import {getDate, getTime} from '@/lib/getTimeStrings';
+import {getUser, calcUserName} from '@/lib/matrixUtils';
 
 export default {
   name: 'eventGroup',
@@ -70,7 +71,8 @@ export default {
     timeline: Array,
     user: String,
     groupTimeline: Boolean,
-    roomId: String
+    roomId: String,
+    setReplyTo: Function
   },
   methods: {
     getUser,

src/lib/eventUtils.js

@@ -0,0 +1,19 @@
+export function solveTextLinks(text){
+  return (text || '').replace(
+    /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
+    (match, space, url)=>{
+      let hyperlink = url;
+      if (!hyperlink.match('^https?://')) {
+        hyperlink = 'http://' + hyperlink;
+      }
+      return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
+    }
+  )
+}
+export function parseMessage(msg){
+  return solveTextLinks(
+    msg.replace(/>.*\n/gm, '').trim()
+      .replace(/</g, '&lt')
+      .replace(/>/g, '&gt')
+  );
+}

src/lib/matrixHandler.js

@@ -68,18 +68,17 @@ export class MatrixHandler {
       callback();
     });
   }
-  async sendEvent(msg, roomId){
-    const msgSend = {
-      type: msg.type,
-      content: {
-        body: msg.content.body.trim(),
-        msgtype: msg.content.msgtype,
-      },
-    };
-    await this.client.sendEvent(roomId, msgSend.type, msgSend.content, '').then(() => {
-      console.log('message sent successfully');
-    }).catch((err) => {
-      console.log(`error while sending message => ${err}`);
-    });
+  async sendEvent({content, type}, roomId, replyTo = undefined){
+    await this.client.sendEvent(roomId, type, {
+      body: content.body.trim(),
+      msgtype: content.msgtype,
+      'm.relates_to': {
+        'm.in_reply_to': {
+          event_id: replyTo?replyTo.event_id:undefined
+        }
+      }
+    }).then(() => console.log('message sent successfully'))
+      .catch((err) => console.log(`error while sending message => ${err}`)
+      );
   }
 }

src/views/chat.vue

@@ -1,14 +1,21 @@
 <template>
   <div>
     <div ref="chatContainer" class="chatContainer">
-      <div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+      <div @scroll="onScroll()" ref="timelineContainer" class="timelineContainer">
         <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" :roomId="room.roomId" />
+        <timeline
+          :timeline="room.timeline" :group-timeline="isGroup()"
+          :user="user" :roomId="room.roomId"
+          :setReplyTo="event=>{replyTo=event; resize();}"
+        />
       </div>
       <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
     </div>
-    <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
+    <newMessage
+      :onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
+      :replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
+    />
     <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
   </div>
 </template>
@@ -20,7 +27,7 @@ import Icon from '@/components/icon';
 import {matrix} from '@/main';
 import splitArray from '@/lib/splitArray.js'
 import timeline from '@/components/timeline';
-import scrollHandler from "@/lib/scrollHandler";
+import scrollHandler from '@/lib/scrollHandler';
 
 export default {
   name: 'chat',
@@ -38,10 +45,10 @@ export default {
   },
   methods:{
     onScroll(){
-      if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
+      if (this.$refs.timelineContainer.scrollTop === 0) this.loadEvents();
       this.showScrollBtn = this.scroll.getScrollBottom() > 400;
     },
-    resize(height){
+    resize(height = this.$refs.newMessage.clientHeight){
       this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
     },
     isGroup(){
@@ -64,15 +71,21 @@ export default {
       showScrollBtn: false,
       scrollOnUpdate: true,
       loadingStatus: 'load more',
-      scroll: ()=>{}
+      scroll: ()=>{},
+      replyTo: undefined
     }
   },
   updated(){
     if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom();
   },
   mounted(){
-    this.scroll = new scrollHandler(this.$refs.msgContainer);
+    this.scroll = new scrollHandler(this.$refs.timelineContainer);
     this.scroll.scrollToBottom();
+  },
+  watch: {
+    '$route'(){
+      this.scroll.scrollToBottom();
+    }
   }
 }
 </script>
@@ -85,7 +98,7 @@ export default {
   top: 3.5rem;
   width: 100%;
   height: calc(100% - 7rem);
-  .messagesContainer{
+  .timelineContainer{
     height: 100%;
     overflow-y: auto;
   }