Add lyrics command; message-container & more;

app.css

@@ -109,4 +109,10 @@ img.message-image {
 
 .fa-check-circle {
 	color: green;
-}
+}
+
+.message-container {
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: 300px
+}

app.js

@@ -468,6 +468,10 @@ let kara = new Vue({
                 }
             });
 
+            if (this.checkForCommands(message, 'lyrics')) {
+                this.rsaLyrics(this.checkForCommands(message, 'lyrics'));
+            }
+
             if (this.checkForCommands(message, 'quiz')) {
                 this.startQuiz();
             }
@@ -728,6 +732,26 @@ let kara = new Vue({
                 vue.botMessage(response.data.fact);
             })
         },
+        rsaLyrics(searchFor) {
+            let vue = this;
+
+            axios.post('/api/curlJson', {
+                url: 'https://some-random-api.ml/lyrics/?title=' + searchFor.replace(' ', '%20')
+            })
+            .catch((error) => {
+                vue.botMessage("Hmm.. i just can't remember the lyrics, but i love that song! 🎵🎧");
+            })
+            .then((response) => {
+                vue.addImageMessage({
+                    body: "Here you go!<br>" +
+                        "<br>" +
+                        response.data.title + ' from ' + response.data.author + '<br>' +
+                        '<br>' +
+                        response.data.lyrics,
+                    src: response.data.thumbnail.genius
+                });
+            })
+        },
 
         // LocalStorage
         getSavedData() {

index.html

@@ -36,11 +36,11 @@
         <template v-for="message in messages">
             <div :class="'message' + (message.bot === true ? ' bot-message float-left' : ' user-message float-right') + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-if="message.body">
                 <template v-if="message.src">
-                    <a :href="message.src" :data-lightbox="message.body" :data-title="message.body">
+                    <a :href="message.src" data-lightbox="message-images" :data-title="message.body.length < 500 ? message.body : ''">
                         <img :src="message.src" :alt="message.body" class="message-image"/><br/>
                     </a>
                 </template>
-                {{ message.body }}
+                <div v-html="message.body.replace(/(?:\r\n|\r|\n)/g, '<br>')" class="message-container"></div>
             </div>
         </template>
         <div class="message bot-message typing float-left" v-if="isTyping">