Make image-messages smaller;

Add random cat images;
Add random shiba images;
Add random memes;

app.css

@@ -29,7 +29,7 @@ body {
 }
 
 img.message-image {
-	max-width: 80%;
+	max-width: 60%;
 	border-radius: 0 15px 15px 15px;
 
 	margin-bottom: 5px;

app.js

@@ -131,9 +131,9 @@ let kara = new Vue({
             this.lastMessageData = imageObject;
 
             this.messages.push({
-                body: imageObject.caption,
+                body: imageObject.body,
                 bot: bot,
-                src: imageObject.image
+                src: imageObject.src
             });
 
             this.updateStorage();
@@ -205,6 +205,11 @@ let kara = new Vue({
                 return false;
             }
 
+            if (this.lastMessageData.meme && this.includesOneOf(keywords, ['another', 'more'])) {
+                this.getRandomMeme(this.lastMessageData.category);
+                return false;
+            }
+
             this.lastMessageData = {};
 
             if (this.includesAllOf(keywords, ['change', 'my', 'name'])) {
@@ -247,6 +252,42 @@ let kara = new Vue({
                 return false;
             }
 
+            if (this.includesAllOf(keywords, ['cat']) &&
+                this.includesOneOf(keywords, ['images', 'photos', 'send'])
+            ) {
+                this.getRandomCat();
+                return false;
+            }
+
+            if (this.includesOneOf(keywords, ['doggo', 'dog', 'shiba']) &&
+                this.includesOneOf(keywords, ['images', 'photos', 'send'])
+            ) {
+                this.getRandomShiba();
+                return false;
+            }
+
+            if (this.includesAllOf(keywords, ['dank', 'meme'])) {
+                this.getRandomMeme('dankmemes')
+                return false;
+            }
+
+            if (this.includesAllOf(keywords, ['dank', 'meme'])) {
+                this.getRandomMeme('dankmemes');
+                return false;
+            }
+
+            if (this.includesAllOf(keywords, ['meme']) &&
+                this.includesOneOf(keywords, ['get', 'send'])
+            ) {
+                this.getRandomMeme();
+                return false;
+            }
+
+            if (this.includesAllOf(keywords, ['joke']) && this.includesOneOf(keywords, ['coding', 'programming', 'code', 'it'])) {
+                this.tellJoke('programming');
+                return false;
+            }
+
             if (this.includesAllOf(keywords, ['tell', 'joke']) ||
                 this.includesAllOf(keywords, ['something', 'funny']) ||
                 this.includesAllOf(keywords, ['cheer', 'me', 'up'])
@@ -317,7 +358,7 @@ let kara = new Vue({
             }
 
             if (this.checkForCommands(message, 'meme')) {
-                this.getRandomMeme();
+                this.getRandomMeme(this.checkForCommands(message, 'meme'));
             } else if (this.checkForCommands(message, 'me ')) {
                 this.meMessage(this.checkForCommands(message, 'me '));
             }
@@ -326,9 +367,15 @@ let kara = new Vue({
                 this.getRandomCat();
             }
 
+            if (this.checkForCommands(message, 'shiba')) {
+                this.getRandomShiba();
+            }
+
             if (this.checkForCommands(message, 'birb')) {
                 this.getRandomBirb();
             }
+
+            this.lastMessage = message;
         },
         checkForCommands(message, commands) {
             if (!Array.isArray(commands)) {
@@ -388,13 +435,30 @@ let kara = new Vue({
 
             this.updateStorage();
         },
-        getRandomMeme() {
+        getRandomMeme(category = 'memes') {
             let vue = this;
-            let url = 'https://some-random-api.ml/meme';
+            let url = 'https://meme-api.herokuapp.com/gimme/';
 
-            axios.get(url)
+            let categorySet = false;
+
+            if (category !== true && category !== false) {
+                category = category.trim();
+                categorySet = true;
+            } else {
+                category = 'memes'
+            }
+
+            axios.get(url + category)
                 .then(function (response) {
-                    vue.botMessage(response.data);
+                    vue.addImageMessage({
+                        body: response.data.title,
+                        src: response.data.url
+                    }, true);
+
+                    vue.lastMessageData = {
+                        meme: true,
+                        category: category
+                    };
                 })
                 .catch(function (error) {
                     vue.botMessage("Hmm.. i can't think of any good memes right now, sorry.. 😞");
@@ -424,6 +488,28 @@ let kara = new Vue({
 
             this.updateStorage();
         },
+        getRandomShiba() {
+            let vue = this;
+            let url = 'http://shibe.online/api/shibes';
+
+            axios.get(url)
+                .then(function (response) {
+                    console.log(response);
+                    console.log(response.data[0].url);
+                    vue.addImageMessage({
+                        caption: '',
+                        image: response.data[0].url
+                    }, true);
+                    setTimeout(() => {
+                        vue.scrollDown();
+                    }, 1000)
+                })
+                .catch(function (error) {
+                    vue.botMessage("I can't find any images at the moment, sorry.. 🐶");
+                })
+
+            this.updateStorage();
+        },
         getRandomBirb() {
             let vue = this;
             let url = '//random.birb.pw/tweet.json';

index.html

@@ -33,11 +33,11 @@
 
     <div id="chat-box">
         <template v-for="message in messages">
-            <img :src="message.src" :alt="message.body" class="message-image" v-if="message.src"/>
             <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">
                 {{ message.body }}
                 <br/>
             </div>
+            <img :src="message.src" :alt="message.body" class="message-image" v-if="message.src"/>
         </template>
         <div class="message bot-message typing float-left" v-if="isTyping">
             <div class="spinner-grow text-secondary" role="status">