From 0dd60e96fc855df4ed882fb93b23c241115bf1f0 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Mon, 3 Aug 2020 08:13:49 +0200
Subject: [PATCH 1/9] File sharing feature

---
 demo/src/App.vue                              |   8 +-
 src/ChatWindow.vue                            |   1 +
 src/Launcher.vue                              |   1 +
 src/Message.vue                               |   6 +-
 src/MessageList.vue                           |   2 +-
 src/assets/mimes/application_msword.svg.vue   |   3 +
 src/assets/mimes/application_pdf.svg.vue      |   3 +
 .../mimes/application_vnd.ms-excel.svg.vue    |   3 +
 .../application_vnd.ms-powerpoint.svg.vue     |   3 +
 src/assets/mimes/application_zip.svg.vue      |   3 +
 src/assets/mimes/default_file.svg.vue         |   3 +
 src/assets/mimes/image_jpeg.svg.vue           |   3 +
 src/assets/mimes/image_png.svg.vue            |   3 +
 src/assets/mimes/image_svg.svg.vue            |   3 +
 src/assets/mimes/text_csv.svg.vue             |   3 +
 src/components/mimes/IconPdfFile.vue          |  17 ++
 src/messages/FileMessage.vue                  | 145 +++++++++++++++---
 src/messages/ImageMessage.vue                 | 106 +++++++++++++
 18 files changed, 286 insertions(+), 30 deletions(-)
 create mode 100644 src/assets/mimes/application_msword.svg.vue
 create mode 100644 src/assets/mimes/application_pdf.svg.vue
 create mode 100644 src/assets/mimes/application_vnd.ms-excel.svg.vue
 create mode 100644 src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
 create mode 100644 src/assets/mimes/application_zip.svg.vue
 create mode 100644 src/assets/mimes/default_file.svg.vue
 create mode 100644 src/assets/mimes/image_jpeg.svg.vue
 create mode 100644 src/assets/mimes/image_png.svg.vue
 create mode 100644 src/assets/mimes/image_svg.svg.vue
 create mode 100644 src/assets/mimes/text_csv.svg.vue
 create mode 100644 src/components/mimes/IconPdfFile.vue
 create mode 100644 src/messages/ImageMessage.vue

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 054867da..9596a8f8 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -24,13 +24,14 @@
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      @download="downloadMessage"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
           👍
         </button>
       </template>
-      <template v-slot:text-message-body="scopedProps"> 
+      <template v-slot:text-message-body="scopedProps">
         <p class="sc-message--text-content" v-html="scopedProps.messageText"></p>
         <p v-if="scopedProps.message.data.meta" class='sc-message--meta' :style="{color: scopedProps.messageColors.color}">{{scopedProps.message.data.meta}}</p>
         <p v-if="scopedProps.message.isEdited || scopedProps.message.liked" class='sc-message--edited'>
@@ -196,7 +197,10 @@ export default {
         const m = this.messageList.find(m => m.id === message.id);
         m.type = 'system';
         m.data.text = 'This message has been removed';
-      }
+      },
+    downloadMessage(message){
+      console.log("try to download Message")
+    }
     },
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 383d2154..c24bbcb7 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -28,6 +28,7 @@
       :messageStyling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message">
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 4ba830c3..ad2f2e76 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -29,6 +29,7 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:header>
         <slot name="header">
diff --git a/src/Message.vue b/src/Message.vue
index 4c02290b..5929de96 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -30,7 +30,8 @@
           </template>
       </TextMessage>
       <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
-      <FileMessage v-else-if="message.type === 'file'" :data="message.data" :messageColors="determineMessageColors()" />
+      <FileMessage v-else-if="message.type === 'file' && message.data.file.mime" :data="message.data" :messageColors="determineMessageColors()" @download="$emit('download')"/>
+      <ImageMessage v-else-if="message.type === 'file' && message.data.file.url" :data="message.data" :messageColors="determineMessageColors()" />
       <TypingMessage v-else-if="message.type === 'typing'" :messageColors="determineMessageColors()" />
       <SystemMessage v-else-if="message.type === 'system'" :data="message.data" :messageColors="determineMessageColors()">
           <slot name="system-message-body" :message="message.data">
@@ -43,6 +44,7 @@
 <script>
 import TextMessage from './messages/TextMessage.vue'
 import FileMessage from './messages/FileMessage.vue'
+import ImageMessage from './messages/ImageMessage.vue'
 import EmojiMessage from './messages/EmojiMessage.vue'
 import TypingMessage from './messages/TypingMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
@@ -150,7 +152,7 @@ export default {
 }
 
 .sc-message--meta {
-  font-size: xx-small;
+  font-size: x-small;
   margin-bottom: 0px;
   color: white;
   text-align: center;
diff --git a/src/MessageList.vue b/src/MessageList.vue
index dc983db3..7265c3a6 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sc-message-list" ref="scrollList" :style="{backgroundColor: colors.messageList.bg}" @scroll="handleScroll">
-    <Message v-for="(message, idx) in messages" :message="message" :user="profile(message.author)" :key="idx" :colors="colors" :messageStyling="messageStyling" @remove="$emit('remove', message)">
+    <Message v-for="(message, idx) in messages" :message="message" :user="profile(message.author)" :key="idx" :colors="colors" :messageStyling="messageStyling" @remove="$emit('remove', message)" @download="$emit('download', message)">
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message">
         </slot>
diff --git a/src/assets/mimes/application_msword.svg.vue b/src/assets/mimes/application_msword.svg.vue
new file mode 100644
index 00000000..806c40e0
--- /dev/null
+++ b/src/assets/mimes/application_msword.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M168,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z"/><path d="M256,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40S273.645,384,256,384Zm0,64c-8.673,0-16-10.991-16-24s7.327-24,16-24,16,10.991,16,24S264.673,448,256,448Z"/><path d="M336,400a10.708,10.708,0,0,1,4.59,1.058,8,8,0,1,0,6.82-14.474A26.581,26.581,0,0,0,336,384c-17.645,0-32,17.944-32,40s14.355,40,32,40a26.6,26.6,0,0,0,11.411-2.584,8,8,0,0,0-6.822-14.473A10.71,10.71,0,0,1,336,448c-8.673,0-16-10.991-16-24S327.327,400,336,400Z"/><path d="M192,168a8,8,0,0,0,8,8H376a8,8,0,0,0,0-16H200A8,8,0,0,0,192,168Z"/><path d="M136,208H280a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,224H248a8,8,0,0,0,0,16H376a8,8,0,0,0,0-16Z"/><path d="M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M136,176h32a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/><path d="M136,240h80a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/><path d="M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M136,144h80a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z"/><path d="M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/></svg>
+</template>
diff --git a/src/assets/mimes/application_pdf.svg.vue b/src/assets/mimes/application_pdf.svg.vue
new file mode 100644
index 00000000..dc3fef83
--- /dev/null
+++ b/src/assets/mimes/application_pdf.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M336,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a8,8,0,0,0,0-16h-8V400h24a8,8,0,0,0,0-16Z"/><path d="M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M240,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z"/><path d="M248,176H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M248,208h32a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M248,240H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/><path d="M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/><path d="M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z"/><path d="M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/><path d="M136,240h80a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8v96A8,8,0,0,0,136,240Zm8-96h64v80H144Z"/><path d="M248,144h64a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/></svg>
+</template>
diff --git a/src/assets/mimes/application_vnd.ms-excel.svg.vue b/src/assets/mimes/application_vnd.ms-excel.svg.vue
new file mode 100644
index 00000000..faa40b0c
--- /dev/null
+++ b/src/assets/mimes/application_vnd.ms-excel.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M272,448H248V392a8,8,0,0,0-16,0v64a8,8,0,0,0,8,8h32a8,8,0,0,0,0-16Z"/><path d="M211.578,384.845a8,8,0,0,0-10.733,3.577L192,406.112l-8.845-17.69a8,8,0,0,0-14.31,7.156L183.056,424l-14.211,28.422a8,8,0,1,0,14.31,7.156L192,441.888l8.845,17.69a8,8,0,1,0,14.31-7.156L200.944,424l14.211-28.422A8,8,0,0,0,211.578,384.845Z"/><path d="M320,400h16a8,8,0,0,0,0-16H320a24,24,0,0,0,0,48,8,8,0,0,1,0,16H304a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M136,304H376a8,8,0,0,0,8-8V152a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8V296A8,8,0,0,0,136,304Zm8-48h64v32H144Zm144-48v32H224V208Zm-64-16V160h64v32Zm80,16h64v32H304Zm-16,48v32H224V256Zm-80-16H144V208h64Zm96,48V256h64v32Zm64-96H304V160h64ZM208,160v32H144V160Z"/></svg>
+</template>
diff --git a/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
new file mode 100644
index 00000000..eb3489ab
--- /dev/null
+++ b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M184,224a80,80,0,1,0,80-80,8,8,0,0,0-8,8v64H192A8,8,0,0,0,184,224Zm80,8a8,8,0,0,0,8-8V160.5A64,64,0,1,1,200.5,232Z"/><path d="M160,200h72a8,8,0,0,0,8-8V120a8,8,0,0,0-8-8,80.091,80.091,0,0,0-80,80A8,8,0,0,0,160,200Zm64-71.5V184H168.5A64.138,64.138,0,0,1,224,128.5Z"/><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M256,384H240a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M336,384H304a8,8,0,0,0,0,16h8v56a8,8,0,0,0,16,0V400h8a8,8,0,0,0,0-16Z"/></svg>
+</template>
diff --git a/src/assets/mimes/application_zip.svg.vue b/src/assets/mimes/application_zip.svg.vue
new file mode 100644
index 00000000..301250ab
--- /dev/null
+++ b/src/assets/mimes/application_zip.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32h56V48H160a8,8,0,0,0,0,16h16V80H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16a8,8,0,0,0-7.761,6.06l-5.906,23.622a24,24,0,1,0,43.334,0l-5.906-23.622A8,8,0,0,0,192,240V224h16a8,8,0,0,0,0-16H192V192h16a8,8,0,0,0,0-16H192V160h16a8,8,0,0,0,0-16H192V128h16a8,8,0,0,0,0-16H192V96h16a8,8,0,0,0,0-16H192V64h16a8,8,0,0,0,0-16H192V32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32Zm72,248a8,8,0,0,1-16,0,7.9,7.9,0,0,1,.938-3.756,8,8,0,0,0,.7-1.825L182.246,256h3.508l4.605,18.419a8,8,0,0,0,.7,1.825A7.9,7.9,0,0,1,192,280ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M272,400a8,8,0,0,0,0-16H240a8,8,0,0,0,0,16h8v48h-8a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16h-8V400Z"/><path d="M320,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M208,448H188.944l26.211-52.422A8,8,0,0,0,208,384H176a8,8,0,0,0,0,16h19.056l-26.211,52.422A8,8,0,0,0,176,464h32a8,8,0,0,0,0-16Z"/></svg>
+</template>
diff --git a/src/assets/mimes/default_file.svg.vue b/src/assets/mimes/default_file.svg.vue
new file mode 100644
index 00000000..7dd2a169
--- /dev/null
+++ b/src/assets/mimes/default_file.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg id="Outline" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m104 496h304a40.045 40.045 0 0 0 40-40v-336a8 8 0 0 0 -2.343-5.657l-96-96a8 8 0 0 0 -5.657-2.343h-240a40.045 40.045 0 0 0 -40 40v400a40.045 40.045 0 0 0 40 40zm248-452.687 68.687 68.687h-44.687a24.027 24.027 0 0 1 -24-24zm-272 12.687a24.028 24.028 0 0 1 24-24h232v56a40.045 40.045 0 0 0 40 40h56v328a24.028 24.028 0 0 1 -24 24h-304a24.028 24.028 0 0 1 -24-24z"/><path d="m192 168a8 8 0 0 0 8 8h192a8 8 0 0 0 0-16h-192a8 8 0 0 0 -8 8z"/><path d="m120 224h160a8 8 0 0 0 0-16h-160a8 8 0 0 0 0 16z"/><path d="m392 256h-144a8 8 0 0 0 0 16h144a8 8 0 0 0 0-16z"/><path d="m120 320h192a8 8 0 0 0 0-16h-192a8 8 0 0 0 0 16z"/><path d="m120 176h48a8 8 0 0 0 0-16h-48a8 8 0 0 0 0 16z"/><path d="m392 208h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 0-16z"/><path d="m120 272h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m392 304h-48a8 8 0 0 0 0 16h48a8 8 0 0 0 0-16z"/><path d="m328 400h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 0-16z"/><path d="m120 416h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m120 368h64a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16z"/><path d="m120 128h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m304 360a8 8 0 0 0 -8-8h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 8-8z"/><path d="m392 352h-64a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16z"/><path d="m392 400h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16z"/></svg>
+</template>
diff --git a/src/assets/mimes/image_jpeg.svg.vue b/src/assets/mimes/image_jpeg.svg.vue
new file mode 100644
index 00000000..806511f8
--- /dev/null
+++ b/src/assets/mimes/image_jpeg.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M248,384H232a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M200,384a8,8,0,0,0-8,8v48a8,8,0,0,1-16,0,8,8,0,0,0-16,0,24,24,0,0,0,48,0V392A8,8,0,0,0,200,384Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.236,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M152,304H360a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V296A8,8,0,0,0,152,304Zm16.645-16,47.482-59.352,33.727,40.474a8,8,0,0,0,8.676,2.467l43.7-14.567L338.374,288ZM352,144V278.606l-42.794-36.68a8,8,0,0,0-7.736-1.515l-42.82,14.273-36.5-43.806A8,8,0,0,0,216,208h-.08a8,8,0,0,0-6.167,3L160,273.194V144Z"/><path d="M288,224a24,24,0,1,0-24-24A24.027,24.027,0,0,0,288,224Zm0-32a8,8,0,1,1-8,8A8.009,8.009,0,0,1,288,192Z"/></svg>
+</template>
diff --git a/src/assets/mimes/image_png.svg.vue b/src/assets/mimes/image_png.svg.vue
new file mode 100644
index 00000000..851fd740
--- /dev/null
+++ b/src/assets/mimes/image_png.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M445.657,114.343l-96-96A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120A8,8,0,0,0,445.657,114.343ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M184,384H168a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.236,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M264,384a8,8,0,0,0-8,8v30.111l-16.845-33.689A8,8,0,0,0,224,392v64a8,8,0,0,0,16,0V425.889l16.845,33.689A8,8,0,0,0,272,456V392A8,8,0,0,0,264,384Z"/><path d="M176,304h32a8,8,0,0,0,8-8V272h16v24a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V272h16v24a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V264a8,8,0,0,0-8-8H312V240h24a8,8,0,0,0,8-8V200a8,8,0,0,0-8-8H312V176h24a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H304a8,8,0,0,0-8,8v24H280V136a8,8,0,0,0-8-8H240a8,8,0,0,0-8,8v24H216V136a8,8,0,0,0-8-8H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h24v16H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h24v16H176a8,8,0,0,0-8,8v32A8,8,0,0,0,176,304Zm56-96v16H216V208Zm64,16H280V208h16Zm-32,0H248V208h16Zm-16,16h16v16H248Zm16-48H248V176h16Zm-48,48h16v16H216Zm48,48H248V272h16Zm16-48h16v16H280Zm48,48H312V272h16Zm0-64H312V208h16Zm-16-80h16v16H312Zm-16,48H280V176h16Zm-48-48h16v16H248Zm-16,48H216V176h16Zm-48-48h16v16H184Zm0,64h16v16H184Zm0,64h16v16H184Z"/></svg>
+</template>
diff --git a/src/assets/mimes/image_svg.svg.vue b/src/assets/mimes/image_svg.svg.vue
new file mode 100644
index 00000000..d8425430
--- /dev/null
+++ b/src/assets/mimes/image_svg.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M184,400h16a8,8,0,0,0,0-16H184a24,24,0,0,0,0,48,8,8,0,0,1,0,16H168a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M265.94,384.239a8,8,0,0,0-9.7,5.821L248,423.015l-8.239-32.955a8,8,0,1,0-15.522,3.88l16,64a8,8,0,0,0,15.522,0l16-64A8,8,0,0,0,265.94,384.239Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.235,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M176,304h32a8,8,0,0,0,8-8v-8h80v8a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V264a8,8,0,0,0-8-8h-8V176h8a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H304a8,8,0,0,0-8,8v8H216v-8a8,8,0,0,0-8-8H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h8v80h-8a8,8,0,0,0-8,8v32A8,8,0,0,0,176,304Zm152-16H312V272h16ZM312,144h16v16H312Zm-128,0h16v16H184Zm16,32h8a8,8,0,0,0,8-8v-8h80v8a8,8,0,0,0,8,8h8v80h-8a8,8,0,0,0-8,8v8H216v-8a8,8,0,0,0-8-8h-8Zm-16,96h16v16H184Z"/></svg>
+</template>
diff --git a/src/assets/mimes/text_csv.svg.vue b/src/assets/mimes/text_csv.svg.vue
new file mode 100644
index 00000000..e3c9f80a
--- /dev/null
+++ b/src/assets/mimes/text_csv.svg.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M256,400h16a8,8,0,0,0,0-16H256a24,24,0,0,0,0,48,8,8,0,0,1,0,16H240a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M337.94,384.239a8,8,0,0,0-9.7,5.821L320,423.016l-8.239-32.956a8,8,0,1,0-15.522,3.88l16,64a8,8,0,0,0,15.522,0l16-64A8,8,0,0,0,337.94,384.239Z"/><path d="M200,400a10.675,10.675,0,0,1,4.588,1.058,8,8,0,0,0,6.824-14.473A26.587,26.587,0,0,0,200,384c-17.645,0-32,17.944-32,40s14.355,40,32,40a26.587,26.587,0,0,0,11.412-2.585,8,8,0,0,0-6.824-14.473A10.675,10.675,0,0,1,200,448c-8.673,0-16-10.99-16-24S191.327,400,200,400Z"/><path d="M160,256a8,8,0,0,0,0,16h24v24a8,8,0,0,0,16,0V272h48v24a8,8,0,0,0,16,0V272h48v24a8,8,0,0,0,16,0V272h24a8,8,0,0,0,0-16H328V224h24a8,8,0,0,0,0-16H328V176h24a8,8,0,0,0,0-16H328V136a8,8,0,0,0-16,0v24H264V136a8,8,0,0,0-16,0v24H200V136a8,8,0,0,0-16,0v24H160a8,8,0,0,0,0,16h24v32H160a8,8,0,0,0,0,16h24v32Zm152,0H264V224h48Zm0-80v32H264V176Zm-112,0h48v32H200Zm0,48h48v32H200Z"/></svg>
+</template>
diff --git a/src/components/mimes/IconPdfFile.vue b/src/components/mimes/IconPdfFile.vue
new file mode 100644
index 00000000..74d39749
--- /dev/null
+++ b/src/components/mimes/IconPdfFile.vue
@@ -0,0 +1,17 @@
+<template>
+  <path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z
+  M336,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a8,8,0,0,0,0-16h-8V400h24a8,8,0,0,0,0-16Z
+  M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z
+  M240,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z
+  M248,176H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z
+  M248,208h32a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z
+  M248,240H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z
+  M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z
+  M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z
+  M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z
+  M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z
+  M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z
+  M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z
+  M136,240h80a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8v96A8,8,0,0,0,136,240Zm8-96h64v80H144Z
+  M248,144h64a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/>
+</template>
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index e7924990..49ebf4a8 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -1,16 +1,65 @@
 <template>
-  <div class='sc-message--file' :style="messageColors">
-    <div class='sc-message--file-icon'>
-      <img :src="data.file.url" class="sc-image">
+  <div class="sc-message--file" :style="messageColors" :id="data.file.id">
+    <div class="sc-message--file-icon" v-if="data.file.mime == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'">
+      <ApplicationWord />
     </div>
-    <div class='sc-message--file-name' :style="messageColors">
-      <a :href="data.file.url ? data.file.url : '#'" target='_blank'>{{data.file.name || ''}}</a>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'">
+      <ApplicationExcel />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'">
+      <ApplicationPowerPoint />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/zip'">
+      <ApplicationZip />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'image/jpeg'">
+      <ApplicationJpg />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'image/svg+xml'">
+      <ApplicationSvg />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'text/csv'">
+      <ApplicationCsv />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/pdf'">
+      <ApplicationPdf />
+    </div>
+    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'image/png'">
+      <ApplicationPng />
+    </div>
+    <div class="sc-message--file-icon" v-else="">
+      <ApplicationDefault />
+    </div>
+    <div class="sc-message--file-content">
+      <div class="sc-message--file-name" :style="messageColors">
+        {{truncateFilename(data.file.name, 20) || ''}}
+      </div>
+      <svg class="sc-message--file-download-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px" @click="$emit('download')">
+        <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+        <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+        <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
+        <path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
+      </svg>
+      <div class="sc-message--file-size" :style="messageColors">
+        {{humanReadableFileSize(data.file.size) || ''}}
+      </div>
     </div>
     <div class="sc-message--file-text" :style="messageColors">{{data.text}}<p v-if="data.meta" class='sc-message--meta' :style="messageColors">{{data.meta}}</p></div>
   </div>
 </template>
 
 <script>
+
+import ApplicationWord from '../assets/mimes/application_msword.svg.vue'
+import ApplicationPdf from '../assets/mimes/application_pdf.svg.vue'
+import ApplicationPng from '../assets/mimes/image_png.svg.vue'
+import ApplicationExcel from '../assets/mimes/application_vnd.ms-excel.svg.vue'
+import ApplicationPowerPoint from '../assets/mimes/application_vnd.ms-powerpoint.svg.vue'
+import ApplicationZip from '../assets/mimes/application_zip.svg.vue'
+import ApplicationDefault from '../assets/mimes/default_file.svg.vue'
+import ApplicationJpg from '../assets/mimes/image_jpeg.svg.vue'
+import ApplicationSvg from '../assets/mimes/image_svg.svg.vue'
+import ApplicationCsv from '../assets/mimes/text_csv.svg.vue'
 export default {
   props: {
     data: {
@@ -20,40 +69,65 @@ export default {
     messageColors: {
       type: Object,
       required: true
+    },
+  },
+  methods:{
+    humanReadableFileSize(aSize) {
+      aSize = Math.abs(parseInt(aSize, 10));
+      var def = [[1, 'bytes'], [1024, 'kb'], [1024*1024, 'Mb'], [1024*1024*1024, 'Gb']];
+      for(var i=0; i<def.length; i++){
+        if(aSize<def[i][0]) return (aSize/def[i-1][0]).toFixed(2)+' '+def[i-1][1];
+      }
+    },
+    truncateFilename(filename, maxLength) {
+      if(filename.length > maxLength) {
+        return filename.substring(0, maxLength) + '...'
+      } else {
+        return filename
+      }
     }
+  },
+  components:{
+    ApplicationWord,
+    ApplicationPdf,
+    ApplicationPng,
+    ApplicationExcel,
+    ApplicationPowerPoint,
+    ApplicationZip,
+    ApplicationDefault,
+    ApplicationJpg,
+    ApplicationSvg,
+    ApplicationCsv,
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss">
 .sc-message--file {
   border-radius: 6px;
   font-weight: 300;
   font-size: 14px;
   line-height: 1.4;
-  /* white-space: pre-wrap; */
   -webkit-font-smoothing: subpixel-antialiased
 }
 
-.sc-message--content.sent .sc-message--file {
+.sc-message--content .sc-message--file {
   word-wrap: break-word;
+  padding: 5px;
+  width: 223px;
 }
 
-.sc-message--file-icon {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 15px;
-  margin-bottom: 0px;
-}
+.sc-message--file-content {
+  font-size: small;
+  float: right;
 
-.sc-image {
-  max-width: 100%;
-  min-width: 100%;
+  .sc-message--file-download-icon {
+    float: right;
+    cursor: pointer;
+  }
 }
 
 .sc-message--file-text {
-  padding: 17px 20px;
   border-radius: 6px;
   font-weight: 300;
   font-size: 14px;
@@ -64,11 +138,9 @@ export default {
 
 .sc-message--file-name {
   color: white;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-top: 0;
-  font-size: x-small;
-  text-align: center;
+  margin-top: 7px;
+  text-align: left;
+  width: 148px;
 }
 
 .sc-message--file-name a {
@@ -89,7 +161,6 @@ export default {
 .sc-message--content.received .sc-message--file {
   color: #263238;
   background-color: #f4f7f9;
-  margin-right: 40px;
 }
 
 .sc-message--content.received .sc-message--file-name {
@@ -103,4 +174,28 @@ export default {
 .sc-message--content.received .sc-message--file a:hover {
   color: #0c0c0c;
 }
+
+.sc-message--file-icon {
+  float: left;
+}
+
+.sc-message--file-icon svg {
+  fill: #000000;
+  height: 60px;
+  width: 60px;
+}
+
+.sc-message--content.sent {
+  .sc-message--file-icon svg {
+    fill: #ffffff;
+  }
+
+  .sc-message--file-download-icon {
+    fill: #ffffff;
+    path {
+      stroke: #ffffff;
+    }
+  }
+}
+
 </style>
diff --git a/src/messages/ImageMessage.vue b/src/messages/ImageMessage.vue
new file mode 100644
index 00000000..285dd441
--- /dev/null
+++ b/src/messages/ImageMessage.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class='sc-message--image' :style="messageColors">
+    <div class='sc-message--image-icon'>
+      <img :src="data.file.url" class="sc-image">
+    </div>
+    <div class='sc-message--image-name' :style="messageColors">
+      <a :href="data.file.url ? data.file.url : '#'" target='_blank'>{{data.file.name || ''}}</a>
+    </div>
+    <div class="sc-message--file-text" :style="messageColors">{{data.text}}<p v-if="data.meta" class='sc-message--meta' :style="messageColors">{{data.meta}}</p></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    messageColors: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sc-message--file {
+  border-radius: 6px;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  /* white-space: pre-wrap; */
+  -webkit-font-smoothing: subpixel-antialiased
+}
+
+.sc-message--content.sent .sc-message--file {
+  word-wrap: break-word;
+}
+
+.sc-message--file-icon {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 15px;
+  margin-bottom: 0px;
+}
+
+.sc-image {
+  max-width: 100%;
+  min-width: 100%;
+}
+
+.sc-message--file-text {
+  padding: 17px 20px;
+  border-radius: 6px;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  -webkit-font-smoothing: subpixel-antialiased
+}
+
+.sc-message--file-name {
+  color: white;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 0;
+  font-size: x-small;
+  text-align: center;
+}
+
+.sc-message--file-name a {
+  text-decoration: none;
+  color: #ece7e7;
+}
+
+.sc-message--file-name a:hover {
+  color: white;
+}
+
+.sc-message--content.sent .sc-message--file-text {
+  color: white;
+  background-color: #4e8cff;
+  word-wrap: break-word;
+}
+
+.sc-message--content.received .sc-message--file {
+  color: #263238;
+  background-color: #f4f7f9;
+  margin-right: 40px;
+}
+
+.sc-message--content.received .sc-message--file-name {
+  color: #000;
+}
+
+.sc-message--content.received .sc-message--file a {
+  color: rgba(43, 40, 40, 0.7);
+}
+
+.sc-message--content.received .sc-message--file a:hover {
+  color: #0c0c0c;
+}
+</style>

From f627a284ce7520e1f65a1dc5d00dcd9e5870f787 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Sun, 4 Oct 2020 17:23:44 +0200
Subject: [PATCH 2/9] Update Message.vue

---
 src/Message.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Message.vue b/src/Message.vue
index bb2493e0..d3071fe3 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sc-message" :id="message.id">
+  <div class="sc-message" :id="message.type === 'file' ? message.data.file.id : message.id">
     <div
       class="sc-message--content"
       :class="{

From 037de6edfa47dcf8cff93cfdb0d7ebdd90cffdaf Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Tue, 20 Oct 2020 23:13:16 +0200
Subject: [PATCH 3/9] refactorisation, adds a svg to import, removes useless
 file use library to truncate name and calculate size of file

---
 demo/src/App.vue                     |  3 ++-
 package.json                         |  2 ++
 src/Message.vue                      | 28 ++++++++++++++++++++++------
 src/assets/download-icon.svg.vue     |  8 ++++++++
 src/components/mimes/IconPdfFile.vue | 17 -----------------
 src/messages/FileMessage.vue         | 19 +++++++------------
 yarn.lock                            | 10 ++++++++++
 7 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/download-icon.svg.vue
 delete mode 100644 src/components/mimes/IconPdfFile.vue

diff --git a/demo/src/App.vue b/demo/src/App.vue
index e399149e..4c266629 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -4,7 +4,7 @@
       :chosenColor="chosenColor"
       :colors="colors"
     />
-    <beautiful-chat 
+    <beautiful-chat
       :alwaysScrollToBottom="alwaysScrollToBottom"
       :close="closeChat"
       :colors="colors"
@@ -204,6 +204,7 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    downloadMessage(message){},
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];
diff --git a/package.json b/package.json
index 71b352f9..cc56344e 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "kind-of": "6.0.3",
     "minimist": "1.2.3",
     "msgdown": "^1.0.2",
+    "pretty-bytes": "^5.4.1",
+    "smart-truncate": "^1.0.1",
     "v-tooltip": "^2.0.1"
   },
   "devDependencies": {
diff --git a/src/Message.vue b/src/Message.vue
index aecb1aaa..f9b1b14d 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -47,12 +47,28 @@
         </template>
       </TextMessage>
       <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
-      <FileMessage v-else-if="message.type === 'file' && message.data.file.mime" :data="message.data" :messageColors="determineMessageColors()" @download="$emit('download')"/>
-      <ImageMessage v-else-if="message.type === 'file' && message.data.file.url" :data="message.data" :messageColors="determineMessageColors()" />
-      <TypingMessage v-else-if="message.type === 'typing'" :messageColors="determineMessageColors()" />
-      <SystemMessage v-else-if="message.type === 'system'" :data="message.data" :messageColors="determineMessageColors()">
-          <slot name="system-message-body" :message="message.data">
-          </slot>
+      <FileMessage
+        v-else-if="message.type === 'file' && message.data.file.mime"
+        :data="message.data"
+        :message-colors="messageColors"
+        @download="$emit('download')"
+      />
+      <ImageMessage
+        v-else-if="message.type === 'file' && message.data.file.url"
+        :data="message.data"
+        :message-colors="messageColors"
+      />
+      <TypingMessage
+        v-else-if="message.type === 'typing'"
+        :message-colors="messageColors"
+      />
+      <SystemMessage
+        v-else-if="message.type === 'system'"
+        :data="message.data"
+        :message-colors="messageColors"
+      >
+        <slot name="system-message-body" :message="message.data">
+        </slot>
       </SystemMessage>
     </div>
   </div>
diff --git a/src/assets/download-icon.svg.vue b/src/assets/download-icon.svg.vue
new file mode 100644
index 00000000..ced77ebb
--- /dev/null
+++ b/src/assets/download-icon.svg.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg class="sc-message--file-download-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px" @click="$emit('download')">
+    <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+    <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+    <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
+    <path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
+  </svg>
+</template>
diff --git a/src/components/mimes/IconPdfFile.vue b/src/components/mimes/IconPdfFile.vue
deleted file mode 100644
index 74d39749..00000000
--- a/src/components/mimes/IconPdfFile.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z
-  M336,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a8,8,0,0,0,0-16h-8V400h24a8,8,0,0,0,0-16Z
-  M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z
-  M240,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z
-  M248,176H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z
-  M248,208h32a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z
-  M248,240H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z
-  M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z
-  M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z
-  M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z
-  M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z
-  M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z
-  M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z
-  M136,240h80a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8v96A8,8,0,0,0,136,240Zm8-96h64v80H144Z
-  M248,144h64a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/>
-</template>
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index e0142df7..6f5ff610 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -34,12 +34,7 @@
       <div class="sc-message--file-name" :style="messageColors">
         {{truncateFilename(data.file.name, 20) || ''}}
       </div>
-      <svg class="sc-message--file-download-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px" @click="$emit('download')">
-        <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-        <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-        <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
-        <path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
-      </svg>
+      <DownloadIcon />
       <div class="sc-message--file-size" :style="messageColors">
         {{humanReadableFileSize(data.file.size) || ''}}
       </div>
@@ -59,6 +54,7 @@ import ApplicationDefault from '../assets/mimes/default_file.svg.vue'
 import ApplicationJpg from '../assets/mimes/image_jpeg.svg.vue'
 import ApplicationSvg from '../assets/mimes/image_svg.svg.vue'
 import ApplicationCsv from '../assets/mimes/text_csv.svg.vue'
+import DownloadIcon from '../assets/download-icon.svg.vue'
 export default {
   props: {
     data: {
@@ -72,15 +68,13 @@ export default {
   },
   methods:{
     humanReadableFileSize(aSize) {
-      aSize = Math.abs(parseInt(aSize, 10));
-      var def = [[1, 'bytes'], [1024, 'kb'], [1024*1024, 'Mb'], [1024*1024*1024, 'Gb']];
-      for(var i=0; i<def.length; i++){
-        if(aSize<def[i][0]) return (aSize/def[i-1][0]).toFixed(2)+' '+def[i-1][1];
-      }
+      const prettyBytes = require('pretty-bytes');
+      return prettyBytes(aSize);
     },
     truncateFilename(filename, maxLength) {
       if(filename.length > maxLength) {
-        return filename.substring(0, maxLength) + '...'
+        const smartTruncate = require('smart-truncate');
+        return smartTruncate(string, maxLength, {position: 10});
       } else {
         return filename
       }
@@ -97,6 +91,7 @@ export default {
     ApplicationJpg,
     ApplicationSvg,
     ApplicationCsv,
+    DownloadIcon
   }
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 02a5425c..c91a9132 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7063,6 +7063,11 @@ prettier@^2.0.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
   integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
+pretty-bytes@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
+
 pretty-error@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -7898,6 +7903,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+smart-truncate@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/smart-truncate/-/smart-truncate-1.0.1.tgz#a2173d7abc724a5a30e1b63af88616228b14a475"
+  integrity sha512-f+kSLMDWKSCpYhwOZM+Da4d8klk5nY4gH57HOEOaaotsZEsTIm/51/9vKDNE26WjU72eBM1zEYdQl6uDwvZfLg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"

From 686bca34d1721921eddb9be9496206416d3be80e Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Mon, 26 Oct 2020 07:55:24 +0100
Subject: [PATCH 4/9] Refactorisation of code, updates Readme, export download
 icon

refactorisation of method to truncate, calculate size and type of file, fixes syntaxes and download icon has been export as an asset svg
---
 README.md                        | 48 ++++++++++++++++
 src/assets/download-icon.svg.vue | 10 ++--
 src/messages/FileMessage.vue     | 99 ++++++++++++++++----------------
 src/messages/ImageMessage.vue    |  2 +-
 4 files changed, 102 insertions(+), 57 deletions(-)

diff --git a/README.md b/README.md
index 43f6df1c..b534c24a 100644
--- a/README.md
+++ b/README.md
@@ -146,6 +146,9 @@ export default {
       // called when the user scrolls message list to top
       // leverage pagination for loading another page of messages
     },
+    downloadMessage(message) {
+      console.log('Try to download the file')
+    },
     handleOnType () {
       console.log('Emit typing event')
     },
@@ -193,6 +196,7 @@ For more detailed examples see the demo folder.
 |-----|--------|---------------|
 | onType | undefined | Fires when user types on the message input |
 | edit | `message` | Fires after user edited message |
+| download | `message` | Download file only if document type is file |
 
 #### Slots
 
@@ -282,7 +286,51 @@ Message objects are rendered differently depending on their type. Currently, onl
     }
   }
 }
+
+{
+  author: 'me',
+  type: 'file',
+  id: 1, // or text '1'
+  isEdited: false,
+  data: {
+    file: {
+      id: 1,
+      mime: 'image/png',
+      name: 'test.png',
+      size: 588147,
+      meta: '06-16-2019 12:45'
+    }
+  }
+}
+
 ```
+##### file message object
+
+different file type are represented in `vue-beautiful-chat`
+
+WORD file <img src="https://user-images.githubusercontent.com/16837548/94787922-36f5e700-03d3-11eb-8e95-f468938d24c2.png">
+
+PDF file <img src="https://user-images.githubusercontent.com/16837548/94788088-66a4ef00-03d3-11eb-9907-b380a6bb1907.png">
+
+EXCEL file <img src="https://user-images.githubusercontent.com/16837548/94788119-70c6ed80-03d3-11eb-9031-ce46131e0b06.png">
+
+POWER POINT file <img src="https://user-images.githubusercontent.com/16837548/94788155-7cb2af80-03d3-11eb-80dc-bb77a4a0d429.png">
+
+ZIP file <img src="https://user-images.githubusercontent.com/16837548/94788179-850aea80-03d3-11eb-8b5a-8945e2232c2c.png">
+
+JPG/JPEG file <img src="https://user-images.githubusercontent.com/16837548/94788216-918f4300-03d3-11eb-9778-a148828fba8d.png">
+
+PNG file <img src="https://user-images.githubusercontent.com/16837548/94788250-9b18ab00-03d3-11eb-91be-4af48dea21eb.png">
+
+SVG file <img src="https://user-images.githubusercontent.com/16837548/94788290-a53aa980-03d3-11eb-9c37-936f1c5ac53f.png">
+
+CSV file <img src="https://user-images.githubusercontent.com/16837548/94788314-acfa4e00-03d3-11eb-8e69-835a699b7ea0.png">
+
+And if we have an other type file we will have this icon <img src="https://user-images.githubusercontent.com/16837548/94788364-be435a80-03d3-11eb-870a-f0defe70ef21.png">
+
+
+
+
 
 
 #### Quick replies
diff --git a/src/assets/download-icon.svg.vue b/src/assets/download-icon.svg.vue
index ced77ebb..f05ff5bc 100644
--- a/src/assets/download-icon.svg.vue
+++ b/src/assets/download-icon.svg.vue
@@ -1,8 +1,8 @@
 <template>
-  <svg class="sc-message--file-download-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px" @click="$emit('download')">
-    <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-    <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-    <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
-    <path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px">
+    <path fill="none" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+    <path fill="none" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+    <path fill="none" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
+    <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
   </svg>
 </template>
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index 6f5ff610..10cac952 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -1,49 +1,29 @@
 <template>
   <div class="sc-message--file" :style="messageColors" :id="data.file.id">
-    <div class="sc-message--file-icon" v-if="data.file.mime == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'">
-      <ApplicationWord />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'">
-      <ApplicationExcel />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'">
-      <ApplicationPowerPoint />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/zip'">
-      <ApplicationZip />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'image/jpeg'">
-      <ApplicationJpg />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'image/svg+xml'">
-      <ApplicationSvg />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'text/csv'">
-      <ApplicationCsv />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'application/pdf'">
-      <ApplicationPdf />
-    </div>
-    <div class="sc-message--file-icon" v-else-if="data.file.mime == 'image/png'">
-      <ApplicationPng />
-    </div>
-    <div class="sc-message--file-icon" v-else="">
-      <ApplicationDefault />
+    <div class="sc-message--file-icon" :style="messageColors">
+      <component :is="`Application${someMethodThatMapsMimeToIconSuffix(data.file.mime)}`" />
     </div>
     <div class="sc-message--file-content">
       <div class="sc-message--file-name" :style="messageColors">
-        {{truncateFilename(data.file.name, 20) || ''}}
+        {{data.file && smartTruncate(data.file.name || '', 20)}}
+      </div>
+      <!-- <svg class="sc-message--file-download-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px" @click="$emit('download')">
+       <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+       <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
+       <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
+       <path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
+     </svg> -->
+      <div class="sc-message--file-download-icon" :style="messageColors" @click="$emit('download')">
+        <DownloadIcon />
       </div>
-      <DownloadIcon />
       <div class="sc-message--file-size" :style="messageColors">
-        {{humanReadableFileSize(data.file.size) || ''}}
+        {{data.file && humanReadableFileSize(data.file.size || 0)}}
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
 import ApplicationWord from '../assets/mimes/application_msword.svg.vue'
 import ApplicationPdf from '../assets/mimes/application_pdf.svg.vue'
 import ApplicationPng from '../assets/mimes/image_png.svg.vue'
@@ -55,6 +35,8 @@ import ApplicationJpg from '../assets/mimes/image_jpeg.svg.vue'
 import ApplicationSvg from '../assets/mimes/image_svg.svg.vue'
 import ApplicationCsv from '../assets/mimes/text_csv.svg.vue'
 import DownloadIcon from '../assets/download-icon.svg.vue'
+import prettyBytes from 'pretty-bytes'
+import smartTruncate from 'smart-truncate'
 export default {
   props: {
     data: {
@@ -68,16 +50,35 @@ export default {
   },
   methods:{
     humanReadableFileSize(aSize) {
-      const prettyBytes = require('pretty-bytes');
       return prettyBytes(aSize);
     },
-    truncateFilename(filename, maxLength) {
-      if(filename.length > maxLength) {
-        const smartTruncate = require('smart-truncate');
-        return smartTruncate(string, maxLength, {position: 10});
+    smartTruncate(str, len) {
+      return smartTruncate(str, len, {position: 10})
+    },
+    someMethodThatMapsMimeToIconSuffix(type) {
+      let suffix = ''
+      if (type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'){
+        suffix = 'Word';
+      } else if (type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        suffix = 'Excel';
+      } else if (type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
+        suffix = 'PowerPoint';
+      } else if (type === 'application/zip') {
+        suffix = 'Zip';
+      } else if (type === 'image/jpeg') {
+        suffix = 'Jpg';
+      } else if (type === 'image/svg+xml') {
+        suffix = 'Svg';
+      } else if (type === 'text/csv') {
+        suffix = 'Csv';
+      } else if (type === 'application/pdf') {
+        suffix = 'Pdf';
+      } else if (type === 'image/png') {
+        suffix = 'Png';
       } else {
-        return filename
+        suffix = 'Default';
       }
+      return suffix;
     }
   },
   components:{
@@ -96,7 +97,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped>
 .sc-message--file {
   border-radius: 6px;
   font-weight: 300;
@@ -180,17 +181,13 @@ export default {
   width: 60px;
 }
 
-.sc-message--content.sent {
-  .sc-message--file-icon svg {
-    fill: #ffffff;
-  }
-
-  .sc-message--file-download-icon {
-    fill: #ffffff;
-    path {
-      stroke: #ffffff;
-    }
-  }
+.sc-message--file-download-icon svg {
+  fill: #000000;
+  stroke: #000000;
 }
 
+.sc-message--content.sent svg {
+  fill: #ffffff;
+  stroke: #ffffff;
+}
 </style>
diff --git a/src/messages/ImageMessage.vue b/src/messages/ImageMessage.vue
index 285dd441..46daa9c7 100644
--- a/src/messages/ImageMessage.vue
+++ b/src/messages/ImageMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='sc-message--image' :style="messageColors">
-    <div class='sc-message--image-icon'>
+    <div class="sc-message--image-icon">
       <img :src="data.file.url" class="sc-image">
     </div>
     <div class='sc-message--image-name' :style="messageColors">

From ebb72632ea4a0e957f4073362d94d482a004be15 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Mon, 26 Oct 2020 19:49:59 +0100
Subject: [PATCH 5/9] Fixes the comment and refactorisation

---
 README.md                     |  9 ++----
 src/messages/FileMessage.vue  | 58 ++++++++++++-----------------------
 src/messages/ImageMessage.vue | 30 +++++++++---------
 3 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/README.md b/README.md
index b534c24a..dd701087 100644
--- a/README.md
+++ b/README.md
@@ -306,7 +306,7 @@ Message objects are rendered differently depending on their type. Currently, onl
 ```
 ##### file message object
 
-different file type are represented in `vue-beautiful-chat`
+Custom file icons based on mime:
 
 WORD file <img src="https://user-images.githubusercontent.com/16837548/94787922-36f5e700-03d3-11eb-8e95-f468938d24c2.png">
 
@@ -326,12 +326,7 @@ SVG file <img src="https://user-images.githubusercontent.com/16837548/94788290-a
 
 CSV file <img src="https://user-images.githubusercontent.com/16837548/94788314-acfa4e00-03d3-11eb-8e69-835a699b7ea0.png">
 
-And if we have an other type file we will have this icon <img src="https://user-images.githubusercontent.com/16837548/94788364-be435a80-03d3-11eb-870a-f0defe70ef21.png">
-
-
-
-
-
+For file types other than the above, the default icon is displayed ... <img src="https://user-images.githubusercontent.com/16837548/94788364-be435a80-03d3-11eb-870a-f0defe70ef21.png">
 
 #### Quick replies
 
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index 10cac952..ddbfe43b 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -1,29 +1,25 @@
 <template>
   <div class="sc-message--file" :style="messageColors" :id="data.file.id">
     <div class="sc-message--file-icon" :style="messageColors">
-      <component :is="`Application${someMethodThatMapsMimeToIconSuffix(data.file.mime)}`" />
+      <component :is="`Application${mimeToIcon[data.file.mime] || 'Default'}`" />
     </div>
     <div class="sc-message--file-content">
       <div class="sc-message--file-name" :style="messageColors">
         {{data.file && smartTruncate(data.file.name || '', 20)}}
       </div>
-      <!-- <svg class="sc-message--file-download-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px" @click="$emit('download')">
-       <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-       <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-       <path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
-       <path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
-     </svg> -->
       <div class="sc-message--file-download-icon" :style="messageColors" @click="$emit('download')">
         <DownloadIcon />
       </div>
       <div class="sc-message--file-size" :style="messageColors">
-        {{data.file && humanReadableFileSize(data.file.size || 0)}}
+        {{data.file && prettyBytes(data.file.size || 0)}}
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import prettyBytes from 'pretty-bytes'
+import smartTruncate from 'smart-truncate'
 import ApplicationWord from '../assets/mimes/application_msword.svg.vue'
 import ApplicationPdf from '../assets/mimes/application_pdf.svg.vue'
 import ApplicationPng from '../assets/mimes/image_png.svg.vue'
@@ -35,9 +31,22 @@ import ApplicationJpg from '../assets/mimes/image_jpeg.svg.vue'
 import ApplicationSvg from '../assets/mimes/image_svg.svg.vue'
 import ApplicationCsv from '../assets/mimes/text_csv.svg.vue'
 import DownloadIcon from '../assets/download-icon.svg.vue'
-import prettyBytes from 'pretty-bytes'
-import smartTruncate from 'smart-truncate'
 export default {
+  data() {
+    return {
+      mimeToIcon: {
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PowerPoint',
+        'application/zip': 'Zip',
+        'image/jpeg': 'Jpg',
+        'image/svg+xml': 'Svg',
+        'text/csv': 'Csv',
+        'application/pdf': 'Pdf',
+        'image/png':'Png',
+      }
+    }
+  },
   props: {
     data: {
       type: Object,
@@ -49,37 +58,10 @@ export default {
     },
   },
   methods:{
-    humanReadableFileSize(aSize) {
-      return prettyBytes(aSize);
-    },
+    prettyBytes,
     smartTruncate(str, len) {
       return smartTruncate(str, len, {position: 10})
     },
-    someMethodThatMapsMimeToIconSuffix(type) {
-      let suffix = ''
-      if (type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'){
-        suffix = 'Word';
-      } else if (type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
-        suffix = 'Excel';
-      } else if (type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
-        suffix = 'PowerPoint';
-      } else if (type === 'application/zip') {
-        suffix = 'Zip';
-      } else if (type === 'image/jpeg') {
-        suffix = 'Jpg';
-      } else if (type === 'image/svg+xml') {
-        suffix = 'Svg';
-      } else if (type === 'text/csv') {
-        suffix = 'Csv';
-      } else if (type === 'application/pdf') {
-        suffix = 'Pdf';
-      } else if (type === 'image/png') {
-        suffix = 'Png';
-      } else {
-        suffix = 'Default';
-      }
-      return suffix;
-    }
   },
   components:{
     ApplicationWord,
diff --git a/src/messages/ImageMessage.vue b/src/messages/ImageMessage.vue
index 46daa9c7..56dbdc43 100644
--- a/src/messages/ImageMessage.vue
+++ b/src/messages/ImageMessage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class='sc-message--image' :style="messageColors">
+  <div class="sc-message--image" :style="messageColors">
     <div class="sc-message--image-icon">
       <img :src="data.file.url" class="sc-image">
     </div>
-    <div class='sc-message--image-name' :style="messageColors">
+    <div class="sc-message--image-name" :style="messageColors">
       <a :href="data.file.url ? data.file.url : '#'" target='_blank'>{{data.file.name || ''}}</a>
     </div>
-    <div class="sc-message--file-text" :style="messageColors">{{data.text}}<p v-if="data.meta" class='sc-message--meta' :style="messageColors">{{data.meta}}</p></div>
+    <div class="sc-message--image-text" :style="messageColors">{{data.text}}<p v-if="data.meta" class="sc-message--meta" :style="messageColors">{{data.meta}}</p></div>
   </div>
 </template>
 
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <style scoped>
-.sc-message--file {
+.sc-message--image {
   border-radius: 6px;
   font-weight: 300;
   font-size: 14px;
@@ -35,11 +35,11 @@ export default {
   -webkit-font-smoothing: subpixel-antialiased
 }
 
-.sc-message--content.sent .sc-message--file {
+.sc-message--content.sent .sc-message--image {
   word-wrap: break-word;
 }
 
-.sc-message--file-icon {
+.sc-message--image-icon {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
@@ -52,7 +52,7 @@ export default {
   min-width: 100%;
 }
 
-.sc-message--file-text {
+.sc-message--image-text {
   padding: 17px 20px;
   border-radius: 6px;
   font-weight: 300;
@@ -62,7 +62,7 @@ export default {
   -webkit-font-smoothing: subpixel-antialiased
 }
 
-.sc-message--file-name {
+.sc-message--image-name {
   color: white;
   padding-left: 15px;
   padding-right: 15px;
@@ -71,36 +71,36 @@ export default {
   text-align: center;
 }
 
-.sc-message--file-name a {
+.sc-message--image-name a {
   text-decoration: none;
   color: #ece7e7;
 }
 
-.sc-message--file-name a:hover {
+.sc-message--image-name a:hover {
   color: white;
 }
 
-.sc-message--content.sent .sc-message--file-text {
+.sc-message--content.sent .sc-message--image-text {
   color: white;
   background-color: #4e8cff;
   word-wrap: break-word;
 }
 
-.sc-message--content.received .sc-message--file {
+.sc-message--content.received .sc-message--image {
   color: #263238;
   background-color: #f4f7f9;
   margin-right: 40px;
 }
 
-.sc-message--content.received .sc-message--file-name {
+.sc-message--content.received .sc-message--image-name {
   color: #000;
 }
 
-.sc-message--content.received .sc-message--file a {
+.sc-message--content.received .sc-message--image a {
   color: rgba(43, 40, 40, 0.7);
 }
 
-.sc-message--content.received .sc-message--file a:hover {
+.sc-message--content.received .sc-message--image a:hover {
   color: #0c0c0c;
 }
 </style>

From 2ae664481930cb9b0685b9d2ee3cd189f140b8f2 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Sun, 1 Nov 2020 21:37:30 +0100
Subject: [PATCH 6/9] update title of new section in the README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bf7d413a..bfedde51 100644
--- a/README.md
+++ b/README.md
@@ -306,7 +306,7 @@ Message objects are rendered differently depending on their type. Currently, onl
 }
 
 ```
-##### file message object
+##### File type messages
 
 Custom file icons based on mime:
 

From decb77b650ca747e82d01e9ee8502a40a271f232 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Wed, 11 Nov 2020 22:25:23 +0100
Subject: [PATCH 7/9] adds meta at fileMessage

---
 src/messages/FileMessage.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index ddbfe43b..5b2f51b9 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -14,6 +14,9 @@
         {{data.file && prettyBytes(data.file.size || 0)}}
       </div>
     </div>
+    <div class="sc-message--file-meta" :style="messageColors">
+      <p v-if="data.meta" class='sc-message--meta' :style="messageColors">{{data.meta}}</p>
+    </div>
   </div>
 </template>
 

From 4ce58452da380bb27a06ddb6339dcf281e6bb4d6 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Thu, 12 Nov 2020 19:20:16 +0100
Subject: [PATCH 8/9] Adding different files type exemple to the demo

---
 demo/src/messageHistory.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/demo/src/messageHistory.js b/demo/src/messageHistory.js
index cbdabb16..f59ad508 100644
--- a/demo/src/messageHistory.js
+++ b/demo/src/messageHistory.js
@@ -21,5 +21,15 @@ export default [
   { type: 'text', author: `me`, id: 18, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
   { type: 'text', author: `me`, id: 19, data: { text: `...or not?`, meta: '✓ Delivered' } },
   { type: 'system', id: 20, data: { text: 'User changed security key', meta: '04-08-2018 15:57' } },
-  { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."] }
+  { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."] },
+  { type: 'file', author: `me`, id: 22, data: { meta: '12-11-2020 15:57', file: {id:"122134", mime:"application/vnd.openxmlformats-officedocument.wordprocessingml.document", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.docx"} } },
+  { type: 'file', author: `me`, id: 23, data: { meta: '12-11-2020 15:57', file: {id:"122135", mime:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.xlsx"} } },
+  { type: 'file', author: `me`, id: 24, data: { meta: '12-11-2020 15:57', file: {id:"122136", mime:"application/vnd.openxmlformats-officedocument.presentationml.presentation", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.pptx"} } },
+  { type: 'file', author: `me`, id: 25, data: { meta: '12-11-2020 15:57', file: {id:"122137", mime:"application/zip", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.zip"} } },
+  { type: 'file', author: `me`, id: 26, data: { meta: '12-11-2020 15:57', file: {id:"122138", mime:"image/jpeg", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.jpg"} } },
+  { type: 'file', author: `me`, id: 27, data: { meta: '12-11-2020 15:57', file: {id:"122139", mime:"image/svg+xml", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.svg"} } },
+  { type: 'file', author: `me`, id: 28, data: { meta: '12-11-2020 15:57', file: {id:"1221310", mime:"text/csv", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.csv"} } },
+  { type: 'file', author: `me`, id: 29, data: { meta: '12-11-2020 15:57', file: {id:"1221311", mime:"image/png", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.png"} } },
+  { type: 'file', author: `me`, id: 30, data: { meta: '12-11-2020 15:57', file: {id:"1221312", mime:"application/pdf", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.pdf"} } },
+  { type: 'file', author: `me`, id: 30, data: { meta: '12-11-2020 15:57', file: {id:"1221312", mime:"text/html", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.html"} } }
 ]

From b640967d60858b416d90bb6f2f46992ccd5891c5 Mon Sep 17 00:00:00 2001
From: arabakevin <34araba@gmail.com>
Date: Fri, 13 Nov 2020 22:08:10 +0100
Subject: [PATCH 9/9] Reduces the size of each svg files.

---
 src/assets/download-icon.svg.vue                       | 9 ++++-----
 src/assets/mimes/application_msword.svg.vue            | 5 ++++-
 src/assets/mimes/application_pdf.svg.vue               | 5 ++++-
 src/assets/mimes/application_vnd.ms-excel.svg.vue      | 5 ++++-
 src/assets/mimes/application_vnd.ms-powerpoint.svg.vue | 7 ++++++-
 src/assets/mimes/application_zip.svg.vue               | 5 ++++-
 src/assets/mimes/default_file.svg.vue                  | 5 ++++-
 src/assets/mimes/image_jpeg.svg.vue                    | 6 +++++-
 src/assets/mimes/image_png.svg.vue                     | 5 ++++-
 src/assets/mimes/image_svg.svg.vue                     | 5 ++++-
 src/assets/mimes/text_csv.svg.vue                      | 5 ++++-
 11 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/assets/download-icon.svg.vue b/src/assets/download-icon.svg.vue
index f05ff5bc..9726d67d 100644
--- a/src/assets/download-icon.svg.vue
+++ b/src/assets/download-icon.svg.vue
@@ -1,8 +1,7 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px">
-    <path fill="none" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-    <path fill="none" stroke-miterlimit="10" stroke-width="2" d="M31 28L25 34 19 28"/>
-    <path fill="none" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25 20L25 34"/>
-    <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M43,24.3c0-0.1,0-0.2,0-0.3c0-5.5-4.5-10-10-10c-1.2,0-2.3,0.2-3.4,0.6C27.7,11.3,24.1,9,20,9C13.9,9,9,13.9,9,20c0,0.1,0,0.1,0,0.2c-4.6,0.9-8,5-8,9.8c0,5.5,4.5,10,10,10c5.2,0,26.3,0,30,0c4.4,0,8-3.6,8-8C49,28.3,46.4,25.1,43,24.3z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30" height="30">
+    <path fill="none" d="M31 28l-6 6-6-6"/>
+    <path fill="none" d="M31 28l-6 6-6-6m6-8v14"/>
+    <path fill="none" d="M43 24.3V24a10.03 10.03 0 00-13.4-9.4C27.7 11.3 24.1 9 20 9 13.9 9 9 13.9 9 20v.2c-4.6.9-8 5-8 9.8 0 5.5 4.5 10 10 10h30c4.4 0 8-3.6 8-8 0-3.7-2.6-6.9-6-7.7z"/>
   </svg>
 </template>
diff --git a/src/assets/mimes/application_msword.svg.vue b/src/assets/mimes/application_msword.svg.vue
index 806c40e0..a2be6083 100644
--- a/src/assets/mimes/application_msword.svg.vue
+++ b/src/assets/mimes/application_msword.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M168,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z"/><path d="M256,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40S273.645,384,256,384Zm0,64c-8.673,0-16-10.991-16-24s7.327-24,16-24,16,10.991,16,24S264.673,448,256,448Z"/><path d="M336,400a10.708,10.708,0,0,1,4.59,1.058,8,8,0,1,0,6.82-14.474A26.581,26.581,0,0,0,336,384c-17.645,0-32,17.944-32,40s14.355,40,32,40a26.6,26.6,0,0,0,11.411-2.584,8,8,0,0,0-6.822-14.473A10.71,10.71,0,0,1,336,448c-8.673,0-16-10.991-16-24S327.327,400,336,400Z"/><path d="M192,168a8,8,0,0,0,8,8H376a8,8,0,0,0,0-16H200A8,8,0,0,0,192,168Z"/><path d="M136,208H280a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,224H248a8,8,0,0,0,0,16H376a8,8,0,0,0,0-16Z"/><path d="M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M136,176h32a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/><path d="M136,240h80a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/><path d="M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M136,144h80a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z"/><path d="M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M168 384a8 8 0 00-8 8v64a8 8 0 008 8 40 40 0 000-80zm8 62.63v-45.26a24 24 0 010 45.26zM256 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40-14.36-40-32-40zm0 64c-8.67 0-16-11-16-24s7.33-24 16-24 16 11 16 24-7.33 24-16 24zM336 400a10.7 10.7 0 014.59 1.06 8 8 0 106.82-14.48A26.58 26.58 0 00336 384c-17.64 0-32 17.94-32 40s14.36 40 32 40a26.6 26.6 0 0011.41-2.58 8 8 0 00-6.82-14.48A10.71 10.71 0 01336 448c-8.67 0-16-11-16-24s7.33-24 16-24zM192 168a8 8 0 008 8h176a8 8 0 000-16H200a8 8 0 00-8 8zM136 208h144a8 8 0 000-16H136a8 8 0 000 16zM376 224H248a8 8 0 000 16h128a8 8 0 000-16zM136 272h184a8 8 0 000-16H136a8 8 0 000 16zM136 176h32a8 8 0 000-16h-32a8 8 0 000 16zM376 192h-64a8 8 0 000 16h64a8 8 0 000-16zM136 240h80a8 8 0 000-16h-80a8 8 0 000 16zM376 256h-24a8 8 0 000 16h24a8 8 0 000-16zM136 304h48a8 8 0 000-16h-48a8 8 0 000 16zM136 144h80a8 8 0 000-16h-80a8 8 0 000 16zM296 288h-80a8 8 0 000 16h80a8 8 0 000-16zM376 288h-48a8 8 0 000 16h48a8 8 0 000-16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/application_pdf.svg.vue b/src/assets/mimes/application_pdf.svg.vue
index dc3fef83..77a3eb61 100644
--- a/src/assets/mimes/application_pdf.svg.vue
+++ b/src/assets/mimes/application_pdf.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M336,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a8,8,0,0,0,0-16h-8V400h24a8,8,0,0,0,0-16Z"/><path d="M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M240,384a8,8,0,0,0-8,8v64a8,8,0,0,0,8,8,40,40,0,0,0,0-80Zm8,62.629V401.371a24,24,0,0,1,0,45.258Z"/><path d="M248,176H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M248,208h32a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M248,240H376a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/><path d="M136,272H320a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M376,192H312a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/><path d="M376,256H352a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/><path d="M136,304h48a8,8,0,0,0,0-16H136a8,8,0,0,0,0,16Z"/><path d="M296,288H216a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16Z"/><path d="M376,288H328a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/><path d="M136,240h80a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8v96A8,8,0,0,0,136,240Zm8-96h64v80H144Z"/><path d="M248,144h64a8,8,0,0,0,0-16H248a8,8,0,0,0,0,16Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M336 384h-32a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a8 8 0 000-16h-8v-16h24a8 8 0 000-16zM192 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM240 384a8 8 0 00-8 8v64a8 8 0 008 8 40 40 0 000-80zm8 62.63v-45.26a24 24 0 010 45.26zM248 176h128a8 8 0 000-16H248a8 8 0 000 16zM248 208h32a8 8 0 000-16h-32a8 8 0 000 16zM248 240h128a8 8 0 000-16H248a8 8 0 000 16zM136 272h184a8 8 0 000-16H136a8 8 0 000 16zM376 192h-64a8 8 0 000 16h64a8 8 0 000-16zM376 256h-24a8 8 0 000 16h24a8 8 0 000-16zM136 304h48a8 8 0 000-16h-48a8 8 0 000 16zM296 288h-80a8 8 0 000 16h80a8 8 0 000-16zM376 288h-48a8 8 0 000 16h48a8 8 0 000-16zM136 240h80a8 8 0 008-8v-96a8 8 0 00-8-8h-80a8 8 0 00-8 8v96a8 8 0 008 8zm8-96h64v80h-64zM248 144h64a8 8 0 000-16h-64a8 8 0 000 16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/application_vnd.ms-excel.svg.vue b/src/assets/mimes/application_vnd.ms-excel.svg.vue
index faa40b0c..cdffc2d1 100644
--- a/src/assets/mimes/application_vnd.ms-excel.svg.vue
+++ b/src/assets/mimes/application_vnd.ms-excel.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M272,448H248V392a8,8,0,0,0-16,0v64a8,8,0,0,0,8,8h32a8,8,0,0,0,0-16Z"/><path d="M211.578,384.845a8,8,0,0,0-10.733,3.577L192,406.112l-8.845-17.69a8,8,0,0,0-14.31,7.156L183.056,424l-14.211,28.422a8,8,0,1,0,14.31,7.156L192,441.888l8.845,17.69a8,8,0,1,0,14.31-7.156L200.944,424l14.211-28.422A8,8,0,0,0,211.578,384.845Z"/><path d="M320,400h16a8,8,0,0,0,0-16H320a24,24,0,0,0,0,48,8,8,0,0,1,0,16H304a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M136,304H376a8,8,0,0,0,8-8V152a8,8,0,0,0-8-8H136a8,8,0,0,0-8,8V296A8,8,0,0,0,136,304Zm8-48h64v32H144Zm144-48v32H224V208Zm-64-16V160h64v32Zm80,16h64v32H304Zm-16,48v32H224V256Zm-80-16H144V208h64Zm96,48V256h64v32Zm64-96H304V160h64ZM208,160v32H144V160Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M272 448h-24v-56a8 8 0 00-16 0v64a8 8 0 008 8h32a8 8 0 000-16zM211.58 384.85a8 8 0 00-10.74 3.57l-8.84 17.7-8.85-17.7a8 8 0 00-14.3 7.16l14.2 28.42-14.2 28.42a8 8 0 1014.3 7.16l8.85-17.7 8.85 17.7a8 8 0 1014.3-7.16L200.96 424l14.2-28.42a8 8 0 00-3.57-10.73zM320 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zM136 304h240a8 8 0 008-8V152a8 8 0 00-8-8H136a8 8 0 00-8 8v144a8 8 0 008 8zm8-48h64v32h-64zm144-48v32h-64v-32zm-64-16v-32h64v32zm80 16h64v32h-64zm-16 48v32h-64v-32zm-80-16h-64v-32h64zm96 48v-32h64v32zm64-96h-64v-32h64zm-160-32v32h-64v-32z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
index eb3489ab..ca27c3ba 100644
--- a/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
+++ b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
@@ -1,3 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M184,224a80,80,0,1,0,80-80,8,8,0,0,0-8,8v64H192A8,8,0,0,0,184,224Zm80,8a8,8,0,0,0,8-8V160.5A64,64,0,1,1,200.5,232Z"/><path d="M160,200h72a8,8,0,0,0,8-8V120a8,8,0,0,0-8-8,80.091,80.091,0,0,0-80,80A8,8,0,0,0,160,200Zm64-71.5V184H168.5A64.138,64.138,0,0,1,224,128.5Z"/><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M256,384H240a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M192,384H176a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M336,384H304a8,8,0,0,0,0,16h8v56a8,8,0,0,0,16,0V400h8a8,8,0,0,0,0-16Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M184 224a80 80 0 1080-80 8 8 0 00-8 8v64h-64a8 8 0 00-8 8zm80 8a8 8 0 008-8v-63.5a64 64 0 11-71.5 71.5z"/>
+    <path d="M160 200h72a8 8 0 008-8v-72a8 8 0 00-8-8 80.1 80.1 0 00-80 80 8 8 0 008 8zm64-71.5V184h-55.5a64.14 64.14 0 0155.5-55.5z"/>
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M256 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM192 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM336 384h-32a8 8 0 000 16h8v56a8 8 0 0016 0v-56h8a8 8 0 000-16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/application_zip.svg.vue b/src/assets/mimes/application_zip.svg.vue
index 301250ab..37087c0a 100644
--- a/src/assets/mimes/application_zip.svg.vue
+++ b/src/assets/mimes/application_zip.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32h56V48H160a8,8,0,0,0,0,16h16V80H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16H160a8,8,0,0,0,0,16h16v16a8,8,0,0,0-7.761,6.06l-5.906,23.622a24,24,0,1,0,43.334,0l-5.906-23.622A8,8,0,0,0,192,240V224h16a8,8,0,0,0,0-16H192V192h16a8,8,0,0,0,0-16H192V160h16a8,8,0,0,0,0-16H192V128h16a8,8,0,0,0,0-16H192V96h16a8,8,0,0,0,0-16H192V64h16a8,8,0,0,0,0-16H192V32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32Zm72,248a8,8,0,0,1-16,0,7.9,7.9,0,0,1,.938-3.756,8,8,0,0,0,.7-1.825L182.246,256h3.508l4.605,18.419a8,8,0,0,0,.7,1.825A7.9,7.9,0,0,1,192,280ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M272,400a8,8,0,0,0,0-16H240a8,8,0,0,0,0,16h8v48h-8a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16h-8V400Z"/><path d="M320,384H304a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M208,448H188.944l26.211-52.422A8,8,0,0,0,208,384H176a8,8,0,0,0,0,16h19.056l-26.211,52.422A8,8,0,0,0,176,464h32a8,8,0,0,0,0-16Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h56v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16a8 8 0 00-7.76 6.06l-5.9 23.62a24 24 0 1043.33 0l-5.9-23.62A8 8 0 00192 240v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16V96h16a8 8 0 000-16h-16V64h16a8 8 0 000-16h-16V32h144v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm72 248a8 8 0 01-16 0 7.9 7.9 0 01.94-3.76 8 8 0 00.7-1.82l4.6-18.42h3.51l4.6 18.42a8 8 0 00.7 1.82A7.9 7.9 0 01192 280zm200 200H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M272 400a8 8 0 000-16h-32a8 8 0 000 16h8v48h-8a8 8 0 000 16h32a8 8 0 000-16h-8v-48zm48-16h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zm-112 32h-19.06l26.21-52.42A8 8 0 00208 384h-32a8 8 0 000 16h19.06l-26.21 52.42A8 8 0 00176 464h32a8 8 0 000-16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/default_file.svg.vue b/src/assets/mimes/default_file.svg.vue
index 7dd2a169..d6734546 100644
--- a/src/assets/mimes/default_file.svg.vue
+++ b/src/assets/mimes/default_file.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg id="Outline" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m104 496h304a40.045 40.045 0 0 0 40-40v-336a8 8 0 0 0 -2.343-5.657l-96-96a8 8 0 0 0 -5.657-2.343h-240a40.045 40.045 0 0 0 -40 40v400a40.045 40.045 0 0 0 40 40zm248-452.687 68.687 68.687h-44.687a24.027 24.027 0 0 1 -24-24zm-272 12.687a24.028 24.028 0 0 1 24-24h232v56a40.045 40.045 0 0 0 40 40h56v328a24.028 24.028 0 0 1 -24 24h-304a24.028 24.028 0 0 1 -24-24z"/><path d="m192 168a8 8 0 0 0 8 8h192a8 8 0 0 0 0-16h-192a8 8 0 0 0 -8 8z"/><path d="m120 224h160a8 8 0 0 0 0-16h-160a8 8 0 0 0 0 16z"/><path d="m392 256h-144a8 8 0 0 0 0 16h144a8 8 0 0 0 0-16z"/><path d="m120 320h192a8 8 0 0 0 0-16h-192a8 8 0 0 0 0 16z"/><path d="m120 176h48a8 8 0 0 0 0-16h-48a8 8 0 0 0 0 16z"/><path d="m392 208h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 0-16z"/><path d="m120 272h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m392 304h-48a8 8 0 0 0 0 16h48a8 8 0 0 0 0-16z"/><path d="m328 400h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 0-16z"/><path d="m120 416h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m120 368h64a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16z"/><path d="m120 128h96a8 8 0 0 0 0-16h-96a8 8 0 0 0 0 16z"/><path d="m304 360a8 8 0 0 0 -8-8h-80a8 8 0 0 0 0 16h80a8 8 0 0 0 8-8z"/><path d="m392 352h-64a8 8 0 0 0 0 16h64a8 8 0 0 0 0-16z"/><path d="m392 400h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16z"/></svg>
+  <svg height="512" width="512" xmlns="http://www.w3.org/2000/svg">
+    <path d="M104 496h304a40.05 40.05 0 0040-40V120a8 8 0 00-2.34-5.66l-96-96A8 8 0 00344 16H104a40.05 40.05 0 00-40 40v400a40.05 40.05 0 0040 40zM352 43.31L420.69 112H376a24.03 24.03 0 01-24-24zM80 56a24.03 24.03 0 0124-24h232v56a40.05 40.05 0 0040 40h56v328a24.03 24.03 0 01-24 24H104a24.03 24.03 0 01-24-24z"/>
+    <path d="M192 168a8 8 0 008 8h192a8 8 0 000-16H200a8 8 0 00-8 8zM120 224h160a8 8 0 000-16H120a8 8 0 000 16zM392 256H248a8 8 0 000 16h144a8 8 0 000-16zM120 320h192a8 8 0 000-16H120a8 8 0 000 16zM120 176h48a8 8 0 000-16h-48a8 8 0 000 16zM392 208h-80a8 8 0 000 16h80a8 8 0 000-16zM120 272h96a8 8 0 000-16h-96a8 8 0 000 16zM392 304h-48a8 8 0 000 16h48a8 8 0 000-16zM328 400h-80a8 8 0 000 16h80a8 8 0 000-16zM120 416h96a8 8 0 000-16h-96a8 8 0 000 16zM120 368h64a8 8 0 000-16h-64a8 8 0 000 16zM120 128h96a8 8 0 000-16h-96a8 8 0 000 16zM304 360a8 8 0 00-8-8h-80a8 8 0 000 16h80a8 8 0 008-8zM392 352h-64a8 8 0 000 16h64a8 8 0 000-16zM392 400h-32a8 8 0 000 16h32a8 8 0 000-16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/image_jpeg.svg.vue b/src/assets/mimes/image_jpeg.svg.vue
index 806511f8..6a20999c 100644
--- a/src/assets/mimes/image_jpeg.svg.vue
+++ b/src/assets/mimes/image_jpeg.svg.vue
@@ -1,3 +1,7 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M248,384H232a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M200,384a8,8,0,0,0-8,8v48a8,8,0,0,1-16,0,8,8,0,0,0-16,0,24,24,0,0,0,48,0V392A8,8,0,0,0,200,384Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.236,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M152,304H360a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V296A8,8,0,0,0,152,304Zm16.645-16,47.482-59.352,33.727,40.474a8,8,0,0,0,8.676,2.467l43.7-14.567L338.374,288ZM352,144V278.606l-42.794-36.68a8,8,0,0,0-7.736-1.515l-42.82,14.273-36.5-43.806A8,8,0,0,0,216,208h-.08a8,8,0,0,0-6.167,3L160,273.194V144Z"/><path d="M288,224a24,24,0,1,0-24-24A24.027,24.027,0,0,0,288,224Zm0-32a8,8,0,1,1-8,8A8.009,8.009,0,0,1,288,192Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M248 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM200 384a8 8 0 00-8 8v48a8 8 0 01-16 0 8 8 0 00-16 0 24 24 0 0048 0v-48a8 8 0 00-8-8zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM152 304h208a8 8 0 008-8V136a8 8 0 00-8-8H152a8 8 0 00-8 8v160a8 8 0 008 8zm16.64-16l47.49-59.35 33.72 40.47a8 8 0 008.68 2.47l43.7-14.57L338.37 288zM352 144v134.6l-42.8-36.67a8 8 0 00-7.73-1.52l-42.82 14.27-36.5-43.8A8 8 0 00216 208h-.08a8 8 0 00-6.17 3L160 273.2V144z"/>
+    <path d="M288 224a24 24 0 10-24-24 24.03 24.03 0 0024 24zm0-32a8 8 0 11-8 8 8 8 0 018-8z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/image_png.svg.vue b/src/assets/mimes/image_png.svg.vue
index 851fd740..25bf598a 100644
--- a/src/assets/mimes/image_png.svg.vue
+++ b/src/assets/mimes/image_png.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M445.657,114.343l-96-96A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120A8,8,0,0,0,445.657,114.343ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M184,384H168a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V432h8a24,24,0,0,0,0-48Zm0,32h-8V400h8a8,8,0,0,1,0,16Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.236,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M264,384a8,8,0,0,0-8,8v30.111l-16.845-33.689A8,8,0,0,0,224,392v64a8,8,0,0,0,16,0V425.889l16.845,33.689A8,8,0,0,0,272,456V392A8,8,0,0,0,264,384Z"/><path d="M176,304h32a8,8,0,0,0,8-8V272h16v24a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V272h16v24a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V264a8,8,0,0,0-8-8H312V240h24a8,8,0,0,0,8-8V200a8,8,0,0,0-8-8H312V176h24a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H304a8,8,0,0,0-8,8v24H280V136a8,8,0,0,0-8-8H240a8,8,0,0,0-8,8v24H216V136a8,8,0,0,0-8-8H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h24v16H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h24v16H176a8,8,0,0,0-8,8v32A8,8,0,0,0,176,304Zm56-96v16H216V208Zm64,16H280V208h16Zm-32,0H248V208h16Zm-16,16h16v16H248Zm16-48H248V176h16Zm-48,48h16v16H216Zm48,48H248V272h16Zm16-48h16v16H280Zm48,48H312V272h16Zm0-64H312V208h16Zm-16-80h16v16H312Zm-16,48H280V176h16Zm-48-48h16v16H248Zm-16,48H216V176h16Zm-48-48h16v16H184Zm0,64h16v16H184Zm0,64h16v16H184Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M445.66 114.34l-96-96A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M184 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM264 384a8 8 0 00-8 8v30.11l-16.84-33.69A8 8 0 00224 392v64a8 8 0 0016 0v-30.11l16.84 33.69A8 8 0 00272 456v-64a8 8 0 00-8-8zM176 304h32a8 8 0 008-8v-24h16v24a8 8 0 008 8h32a8 8 0 008-8v-24h16v24a8 8 0 008 8h32a8 8 0 008-8v-32a8 8 0 00-8-8h-24v-16h24a8 8 0 008-8v-32a8 8 0 00-8-8h-24v-16h24a8 8 0 008-8v-32a8 8 0 00-8-8h-32a8 8 0 00-8 8v24h-16v-24a8 8 0 00-8-8h-32a8 8 0 00-8 8v24h-16v-24a8 8 0 00-8-8h-32a8 8 0 00-8 8v32a8 8 0 008 8h24v16h-24a8 8 0 00-8 8v32a8 8 0 008 8h24v16h-24a8 8 0 00-8 8v32a8 8 0 008 8zm56-96v16h-16v-16zm64 16h-16v-16h16zm-32 0h-16v-16h16zm-16 16h16v16h-16zm16-48h-16v-16h16zm-48 48h16v16h-16zm48 48h-16v-16h16zm16-48h16v16h-16zm48 48h-16v-16h16zm0-64h-16v-16h16zm-16-80h16v16h-16zm-16 48h-16v-16h16zm-48-48h16v16h-16zm-16 48h-16v-16h16zm-48-48h16v16h-16zm0 64h16v16h-16zm0 64h16v16h-16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/image_svg.svg.vue b/src/assets/mimes/image_svg.svg.vue
index d8425430..de16e856 100644
--- a/src/assets/mimes/image_svg.svg.vue
+++ b/src/assets/mimes/image_svg.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.064,56.064,0,0,0,64,72V440a56.064,56.064,0,0,0,56,56H392a56.064,56.064,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.064,56.064,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M184,400h16a8,8,0,0,0,0-16H184a24,24,0,0,0,0,48,8,8,0,0,1,0,16H168a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M265.94,384.239a8,8,0,0,0-9.7,5.821L248,423.015l-8.239-32.955a8,8,0,1,0-15.522,3.88l16,64a8,8,0,0,0,15.522,0l16-64A8,8,0,0,0,265.94,384.239Z"/><path d="M344,416H328a8,8,0,0,0,0,16h7.049c-2.252,9.217-8.235,16-15.049,16-8.673,0-16-10.991-16-24s7.327-24,16-24a10.71,10.71,0,0,1,4.589,1.057,8,8,0,0,0,6.822-14.473A26.6,26.6,0,0,0,320,384c-17.645,0-32,17.944-32,40s14.355,40,32,40,32-17.944,32-40A8,8,0,0,0,344,416Z"/><path d="M176,304h32a8,8,0,0,0,8-8v-8h80v8a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V264a8,8,0,0,0-8-8h-8V176h8a8,8,0,0,0,8-8V136a8,8,0,0,0-8-8H304a8,8,0,0,0-8,8v8H216v-8a8,8,0,0,0-8-8H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h8v80h-8a8,8,0,0,0-8,8v32A8,8,0,0,0,176,304Zm152-16H312V272h16ZM312,144h16v16H312Zm-128,0h16v16H184Zm16,32h8a8,8,0,0,0,8-8v-8h80v8a8,8,0,0,0,8,8h8v80h-8a8,8,0,0,0-8,8v8H216v-8a8,8,0,0,0-8-8h-8Zm-16,96h16v16H184Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M184 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zM265.94 384.24a8 8 0 00-9.7 5.82L248 423.01l-8.24-32.95a8 8 0 10-15.52 3.88l16 64a8 8 0 0015.52 0l16-64a8 8 0 00-5.82-9.7zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM176 304h32a8 8 0 008-8v-8h80v8a8 8 0 008 8h32a8 8 0 008-8v-32a8 8 0 00-8-8h-8v-80h8a8 8 0 008-8v-32a8 8 0 00-8-8h-32a8 8 0 00-8 8v8h-80v-8a8 8 0 00-8-8h-32a8 8 0 00-8 8v32a8 8 0 008 8h8v80h-8a8 8 0 00-8 8v32a8 8 0 008 8zm152-16h-16v-16h16zm-16-144h16v16h-16zm-128 0h16v16h-16zm16 32h8a8 8 0 008-8v-8h80v8a8 8 0 008 8h8v80h-8a8 8 0 00-8 8v8h-80v-8a8 8 0 00-8-8h-8zm-16 96h16v16h-16z"/>
+  </svg>
 </template>
diff --git a/src/assets/mimes/text_csv.svg.vue b/src/assets/mimes/text_csv.svg.vue
index e3c9f80a..4ee7f0e4 100644
--- a/src/assets/mimes/text_csv.svg.vue
+++ b/src/assets/mimes/text_csv.svg.vue
@@ -1,3 +1,6 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="OutLine" viewBox="0 0 512 512" width="512" height="512"><path d="M349.657,18.343A8,8,0,0,0,344,16H120A56.063,56.063,0,0,0,64,72V440a56.063,56.063,0,0,0,56,56H392a56.063,56.063,0,0,0,56-56V120a8,8,0,0,0-2.343-5.657ZM352,43.313,420.687,112H392a40.045,40.045,0,0,1-40-40ZM120,32H336V72a56.063,56.063,0,0,0,56,56h40V352H80V72A40.045,40.045,0,0,1,120,32ZM392,480H120a40.045,40.045,0,0,1-40-40V368H432v72A40.045,40.045,0,0,1,392,480Z"/><path d="M256,400h16a8,8,0,0,0,0-16H256a24,24,0,0,0,0,48,8,8,0,0,1,0,16H240a8,8,0,0,0,0,16h16a24,24,0,0,0,0-48,8,8,0,0,1,0-16Z"/><path d="M337.94,384.239a8,8,0,0,0-9.7,5.821L320,423.016l-8.239-32.956a8,8,0,1,0-15.522,3.88l16,64a8,8,0,0,0,15.522,0l16-64A8,8,0,0,0,337.94,384.239Z"/><path d="M200,400a10.675,10.675,0,0,1,4.588,1.058,8,8,0,0,0,6.824-14.473A26.587,26.587,0,0,0,200,384c-17.645,0-32,17.944-32,40s14.355,40,32,40a26.587,26.587,0,0,0,11.412-2.585,8,8,0,0,0-6.824-14.473A10.675,10.675,0,0,1,200,448c-8.673,0-16-10.99-16-24S191.327,400,200,400Z"/><path d="M160,256a8,8,0,0,0,0,16h24v24a8,8,0,0,0,16,0V272h48v24a8,8,0,0,0,16,0V272h48v24a8,8,0,0,0,16,0V272h24a8,8,0,0,0,0-16H328V224h24a8,8,0,0,0,0-16H328V176h24a8,8,0,0,0,0-16H328V136a8,8,0,0,0-16,0v24H264V136a8,8,0,0,0-16,0v24H200V136a8,8,0,0,0-16,0v24H160a8,8,0,0,0,0,16h24v32H160a8,8,0,0,0,0,16h24v32Zm152,0H264V224h48Zm0-80v32H264V176Zm-112,0h48v32H200Zm0,48h48v32H200Z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M256 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zm81.94-15.76a8 8 0 00-9.7 5.82L320 423.02l-8.24-32.96a8 8 0 10-15.52 3.88l16 64a8 8 0 0015.52 0l16-64a8 8 0 00-5.82-9.7zM200 400a10.68 10.68 0 014.59 1.06 8 8 0 006.82-14.48A26.59 26.59 0 00200 384c-17.64 0-32 17.94-32 40s14.36 40 32 40a26.59 26.59 0 0011.41-2.58 8 8 0 00-6.82-14.48A10.68 10.68 0 01200 448c-8.67 0-16-10.99-16-24s7.33-24 16-24zm-40-144a8 8 0 000 16h24v24a8 8 0 0016 0v-24h48v24a8 8 0 0016 0v-24h48v24a8 8 0 0016 0v-24h24a8 8 0 000-16h-24v-32h24a8 8 0 000-16h-24v-32h24a8 8 0 000-16h-24v-24a8 8 0 00-16 0v24h-48v-24a8 8 0 00-16 0v24h-48v-24a8 8 0 00-16 0v24h-24a8 8 0 000 16h24v32h-24a8 8 0 000 16h24v32zm152 0h-48v-32h48zm0-80v32h-48v-32zm-112 0h48v32h-48zm0 48h48v32h-48z"/>
+  </svg>
 </template>