The user now has the ability to load more gifs | added a menu to the main chat-page to choose between the search tab and the chat list

src/components/MessageComponent.vue

@@ -4,14 +4,17 @@
     timestamp: String,
     message: String,
     gif: Boolean,
+    link: Boolean,
     url: String,
   })
 </script>
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
-    <p v-if="!props.gif" style="margin-bottom: 0;">{{props.message}}</p>
+    <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
     <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
+    <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>
+
     <div style="text-align: right;">
       <small style="margin-top: 0;">{{props.timestamp}}</small>
     </div>
@@ -27,6 +30,11 @@
     box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
   }
 
+  .message p {
+    max-width: 100%;
+    overflow-wrap: break-word;
+  }
+
   .sent {
     background: #729EA1;
     margin-left: auto;