Add new api-functions for testing;

Unify message-rendering;

app.css

@@ -28,6 +28,13 @@ body {
 	max-width: 80%;
 }
 
+img.message-image {
+	max-width: 80%;
+	border-radius: 0 15px 15px 15px;
+
+	margin-bottom: 5px;
+}
+
 .bot-message {
 	border-radius: 0 15px 15px 15px;
 	background-color: lightgreen;

app.js

@@ -127,8 +127,19 @@ let kara = new Vue({
                 time: Date.now()
             })
         },
-        botMessage(body) {
+        addImageMessage(imageObject, bot) {
-            this.addMessage(body, true);
+            this.lastMessageData = imageObject;
+
+            this.messages.push({
+                body: imageObject.caption,
+                bot: bot,
+                src: imageObject.image
+            });
+
+            this.updateStorage();
+        },
+        botMessage(message) {
+            this.addMessage(message, true);
         },
         userMessage(body) {
             this.addMessage(body, false);
@@ -272,7 +283,7 @@ let kara = new Vue({
                 return answer;
             }
 
-            return 'I don\'t know what to say..';
+            this.getBackupAnswer(message);
         },
 
         // Forms
@@ -298,15 +309,25 @@ let kara = new Vue({
             }
 
             if (this.checkForCommands(message, 'weather')) {
-                this.checkWeather()
+                this.checkWeather();
             }
 
             if (this.checkForCommands(message, 'joke')) {
-                this.tellJoke(this.checkForCommands(message, 'joke'))
+                this.tellJoke(this.checkForCommands(message, 'joke'));
+            }
+
+            if (this.checkForCommands(message, 'meme')) {
+                this.getRandomMeme();
+            } else if (this.checkForCommands(message, 'me ')) {
+                this.meMessage(this.checkForCommands(message, 'me '));
             }
 
-            if (this.checkForCommands(message, 'me')) {
+            if (this.checkForCommands(message, 'cat')) {
-                this.meMessage(this.checkForCommands(message, 'me'))
+                this.getRandomCat();
+            }
+
+            if (this.checkForCommands(message, 'birb')) {
+                this.getRandomBirb();
             }
         },
         checkForCommands(message, commands) {
@@ -353,6 +374,78 @@ let kara = new Vue({
 
             this.updateStorage();
         },
+        getBackupAnswer(message) {
+            let vue = this;
+            let url = 'https://some-random-api.ml/chatbot?message=' + message;
+
+            axios.get(url)
+                .then(function (response) {
+                    vue.botMessage(response.data.response);
+                })
+                .catch(function (error) {
+                    vue.botMessage("I don't know what to say..");
+                })
+
+            this.updateStorage();
+        },
+        getRandomMeme() {
+            let vue = this;
+            let url = 'https://some-random-api.ml/meme';
+
+            axios.get(url)
+                .then(function (response) {
+                    vue.botMessage(response.data);
+                })
+                .catch(function (error) {
+                    vue.botMessage("Hmm.. i can't think of any good memes right now, sorry.. 😞");
+                })
+
+            this.updateStorage();
+        },
+        getRandomCat() {
+            let vue = this;
+            let url = 'https://api.thecatapi.com/v1/images/search?apiKey=5666b3cc-a7a3-406f-904d-b13594780d7f';
+
+            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';
+
+            axios.get(url)
+                .then(function (response) {
+                    console.log(response);
+                    console.log(response.data[0].url);
+                    vue.addImageMessage({
+                        caption: '',
+                        image: 'https://random.birb.pw/img/' + response.data.file
+                    }, true);
+                    setTimeout(() => {
+                        vue.scrollDown();
+                    }, 1000)
+                })
+                .catch(function (error) {
+                    vue.botMessage("I can't find any images at the moment, sorry.. 🐦");
+                })
+
+            this.updateStorage();
+        },
         tellJoke(category) {
             let vue = this;
             let categorySet = false;

index.html

@@ -33,11 +33,8 @@
 
     <div id="chat-box">
         <template v-for="message in messages">
-            <div class="message bot-message float-left" v-if="message.bot">
+            <img :src="message.src" :alt="message.body" class="message-image" v-if="message.src"/>
-                {{ message.body }}
+            <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">
-                <br/>
-            </div>
-            <div :class="'message user-message float-right' + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-else>
                 {{ message.body }}
                 <br/>
             </div>