fix sendEvent, update eventContent file

src/components/eventContent.vue

@@ -6,14 +6,20 @@
     {{content.body}}
   </div>
   <div v-else-if="content.msgtype==='m.file'" :class="`file ${compact?'compact':''}`">
+    <a :href="getSource(content.url)" target="_blank">
+    <div class="fileContent">
       <icon
         title="file"
         ic="./sym/ic_attach_file_white.svg"
+        class="download"
       />
-    <div class="text">
-      <a :href="getSource(content.url)">
+      <div class="filename">
           {{content.filename || getSource(content.url)}}
-      </a><br>{{content.body}}
+      </div>
+    </div>
+    </a>
+    <div class="text">
+      {{content.body}}
     </div>
   </div>
   <div v-else-if="content.msgtype==='m.audio'" :class="`audio ${compact?'compact':''}`">
@@ -59,11 +65,26 @@ export default {
 
 <style scoped lang="scss">
 .file{
-  .text{
+  max-width: 30rem;
+  .fileContent{
+    position: relative;
+    background-color: #1d1d1d;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    min-height: 3rem;
+    .filename{
+      display: inline-block;
       position: relative;
-    left: 4rem;
+      margin-left: 4rem;
       top: 0;
-    width: 100%;
+      height: 100%;
+    }
+    .download{
+      position: absolute;
+    }
+  }
+  .compact{
+    max-width: 20rem;
   }
 }
 .image{

src/components/newMessage.vue

@@ -105,8 +105,8 @@ export default {
     },
     async sendEvent(event){
       if (!event.content.body.trim()) return;
-      await matrix.sendEvent(this.event, this.roomId, this.replyTo);
-      //await matrix.sendEvent(new Proxy(this.event, this.eventProxy), this.roomId, this.replyTo);
+      if (this.replyTo) this.setReplyTo(this.replyTo);
+      matrix.sendEvent(new Proxy(this.event, this.eventProxyHandler), this.roomId);
       event.content.body = '';
       this.resetAttachment();
       this.resetReplyTo();
@@ -125,6 +125,11 @@ export default {
       matrix.client.sendTyping(this.roomId, true, timeout+100);
       setTimeout(()=>this.waitForSendTyping=false, timeout);
     },
+    setReplyTo(event){
+      this.event.content['m.relates_to'] = {
+        'm.in_reply_to': event
+      }
+    },
     resizeMessageBanner(){
       let id = this.$refs.newMessageInput;
       id.style.height = '1.25rem';
@@ -177,12 +182,14 @@ export default {
         mimetype: file.type,
         url: window.URL.createObjectURL(file),
         blob: blob || await this.readFile(file),
+        filename: file.name,
         file
       };
       this.event.content = {
         body: file.name,
         msgtype: this.attachment.msgtype,
-        mimetype: this.attachment.mimetype
+        mimetype: this.attachment.mimetype,
+        filename: file.name
       };
     },
     resetAttachment(){
@@ -212,7 +219,7 @@ export default {
           body: '',
           msgtype: 'm.text',
           'm.relates_to': {
-            'm.in_reply_to': this.replyTo
+            'm.in_reply_to': undefined
           }
         }
       },
@@ -224,10 +231,10 @@ export default {
       isRecording: false,
       recBlob: undefined,
       attachment: undefined,
-      eventProxy: {
-        set: ()=>{},
+      eventProxyHandler: {
+        set: () => true,
         get: (target, key) => {
-          if (typeof target[key] === 'object') return new Proxy(target[key], this.eventProxy);
+          if (typeof target[key] === 'object') return new Proxy(Object.assign({}, target[key]), this.eventProxyHandler);
           return target[key];
         }
       }

src/lib/matrixHandler.js

@@ -77,22 +77,9 @@ export class MatrixHandler {
       }
     });
   }
-  async sendEvent({content, type}, roomId, replyTo = undefined){
-    console.log(replyTo, content)
-    await this.client.sendEvent(roomId, type, {
-      body: content.body.trim(),
-      msgtype: content.msgtype,
-      mimetype: content.mimetype,
-      url: content.url,
-      '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}`));
-    /*return await this.client.sendEvent(roomId, type, content)
+  async sendEvent({content, type}, roomId){
+    return await this.client.sendEvent(roomId, type, content)
       .then(() => console.log('message sent successfully'))
-      .catch((err) => console.log(`error while sending message => ${err}`));*/
+      .catch((err) => console.log(`error while sending message => ${err}`));
   }
 }