The Message-Component can now display GIFs as well

src/components/MessageComponent.vue

@@ -3,12 +3,15 @@
     ownMessage: Boolean,
     timestamp: String,
     message: String,
+    gif: Boolean,
+    url: String,
   })
 </script>
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
-    <p style="margin-bottom: 0;">{{props.message}}</p>
+    <p v-if="!props.gif" style="margin-bottom: 0;">{{props.message}}</p>
+    <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
     <div style="text-align: right;">
       <small style="margin-top: 0;">{{props.timestamp}}</small>
     </div>
@@ -18,7 +21,7 @@
 <style scoped>
   .message {
     border-radius: 10px;
-    max-width: 15rem;
+    width: 15rem;
     padding: 7px;
     margin:3px;
     box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);