diff --git a/app.css b/app.css index 3196cb9..8a499a0 100644 --- a/app.css +++ b/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; diff --git a/app.js b/app.js index 677d455..b0fca5b 100644 --- a/app.js +++ b/app.js @@ -127,8 +127,19 @@ let kara = new Vue({ time: Date.now() }) }, - botMessage(body) { - this.addMessage(body, true); + addImageMessage(imageObject, bot) { + 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')) { - this.meMessage(this.checkForCommands(message, 'me')) + if (this.checkForCommands(message, 'cat')) { + 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; diff --git a/index.html b/index.html index 714aafa..1ecce7f 100644 --- a/index.html +++ b/index.html @@ -33,11 +33,8 @@