kara/app.js

let kara = new Vue({
    el: '#kara',
    data: {
        features: {
            changeName: false,
            themes: true,
            ownReactions: true,
            setNameAtStart: true
        },
        messages: [],
        lastMessage: null,
        lastMessageData: {},
        name: 'Kara',
        location: null,
        chatbox: null,
        isTyping: false,
        askedForName: false,
        takeNote: false,
        username: '',
        themes: null,
        activeTheme: 'slate',
        talk: false,
        addModal: {
            includeAll: false,
            keywords: '',
            responses: [
                'Answer #1'
            ]
        },
        settingsModal: {
            name: null,
            username: null,
            location: ''
        },
        notes: [],
        answers: [
            {
                includeAll: false,
                keywords: [
                    'hi', 'hallo', 'servas', 'servus', 'hello'
                ],
                responses: [
                    'Hey! :)',
                    'Hello!',
                    'How are you?'
                ]
            },
            {
                includeAll: true,
                keywords: [
                    'how', 'are', 'you'
                ],
                responses: [
                    'I\'m good! Thanks for asking! :) How about you?',
                    'A bit tired from trying to do that think called "thinking".. i\'ll figure it out one day.',
                    'Wooo! I\'m hyped for party! You\'re in?'
                ]
            }
        ]
    },
    mounted() {
        this.getSavedData();
        if (this.features.themes) {
            this.getBootswatchThemes();
        }

        this.settingsModal = {
            name: this.name,
            username: this.username,
            location: this.location
        };

        if (!this.username || this.username === "null") {
            this.initialGreeting();

            if (this.features.setNameAtStart) {
                this.askForName();
            }

            this.isTyping = false;
        } else {
            this.welcomeBack();
        }

        document.getElementById('chatinput').focus();
        document.title = this.name;

        this.scrollDown();
    },
    methods: {
        karaTalks(message) {
          var speech = new SpeechSynthesisUtterance();

          // Set the text and voice attributes.
          speech.text = message;
          speech.volume = 1;
          speech.rate = 1;
          speech.pitch = 1;

          window.speechSynthesis.speak(speech);
        },
        addMessage(body, bot, me = false) {
            this.messages.push({
                body: body,
                bot: bot,
                command: body.search('/') === 0,
                me: me,
                time: Date.now()
            })
        },
        botMessage(body) {
            this.addMessage(body, true);
            if (this.talk) {
                this.karaTalks(body);
            }
        },
        userMessage(body) {
            this.addMessage(body, false);
            this.lastMessage = body;

            this.updateStorage();
        },
        initialGreeting() {
            this.botMessage(
                this.oneOf(
                    [
                        "Hi! I'm " + this.name + ". :)",
                        "Hi, nice to meet you! My name is " + this.name + ". :)"
                    ]
                )
            );

            this.updateStorage();
        },
        welcomeBack() {
            this.botMessage(
                this.oneOf(
                    [
                        "Hi! Haven't heard of you in a while. :)",
                        "Welcome back! :)",
                        "Hey :) Good to see you :)",
                    ]
                )
            );
        },
        sendMessage() {
            if (this.chatbox.trim() === '') {
                return false;
            }

            if (this.chatbox.search('/me') !== 0) {
                this.userMessage(this.chatbox);
            }
            this.scrollDown();
            this.react(this.chatbox);
            this.chatbox = '';
        },
        react(message, recursive = false) {
            this.isTyping = true;

            if (message.search('/') === 0 && !recursive) {
                setTimeout(() => {
                    this.processCommands(message);

                    this.isTyping = false;
                    this.scrollDown();
                }, 1000);
            } else {
                setTimeout(() => {
                    // Check commands
                    if (this.askedForName === true) {
                        this.setName(message);
                    } else if (this.takeNote === true) {
                        this.saveNote(message);
                    } else {
                        let answer = this.getAnswer(message);
                        if (answer) {
                            this.botMessage(answer);
                        }

                        this.updateStorage();
                    }

                    this.isTyping = false;
                    this.scrollDown();
                }, 1800);
            }
        },
        processCommands(message) {
            if (this.checkForCommands(message, 'note')) {
                let noteToSave = this.checkForCommands(message, 'note');
                this.saveNote(noteToSave);
            }

            if (this.checkForCommands(message, 'clear')) {
                this.clearChat();
            }

            if (this.checkForCommands(message, 'weather')) {
                this.checkWeather()
            }

            if (this.checkForCommands(message, 'joke')) {
                this.tellJoke(this.checkForCommands(message, 'joke'))
            }

            if (this.checkForCommands(message, 'me')) {
                this.meMessage(this.checkForCommands(message, 'me'))
            }
            
            if (this.checkForCommands(message, 'talk')) {
                this.talk = !this.talk;
                alert(this.talk);
            }
        },
        checkForCommands(message, commands) {
            if (!Array.isArray(commands)) {
                commands = [commands];
            }

            let commandFound = false;
            let parameter = false;

            commands.forEach((command) => {
                if (commandFound) {
                    return;
                }
                let commandString = '/' + command;

                if (message.search(commandString) === 0) {
                    parameter = message.replace(commandString, '').trim();
                    commandFound = true;
                }
            });

            return parameter ? parameter : commandFound;
        },
        scrollDown() {
            $('#chat-box').stop().animate({
                scrollTop: ($('#chat-box')[0].scrollHeight * 10)
            }, 800);
        },
        oneOf(answers) {
            let amountOfAnswers = answers.length;
            let randomIndex = Math.floor(Math.random() * (amountOfAnswers));

            return this.convertWildcards(answers[randomIndex]);
        },
        convertWildcards(message) {
            message = message.replace('$name$', this.username);
            message = message.replace('$botname$', this.name);

            return message;
        },
        includesOneOf(phrases, wordsToSearch) {
            let includes = false;

            wordsToSearch.forEach((searchWord) => {
                if (phrases.includes(searchWord)) {
                    includes = true;
                }
            })

            return includes;
        },
        includesAllOf(phrases, wordsToSearch) {
            let includesAllPhrases = true;

            wordsToSearch.forEach((searchWord) => {
                if (!phrases.includes(searchWord)) {
                    includesAllPhrases = false;
                }
            })

            return includesAllPhrases;
        },
        cleanupMessage(message) {
            message = message.toLowerCase();
            return message.replace('?', '')
                .replace('!', '')
                .replace('.', '')
                .replace(',', '')
                .replace('-', '')
                .replace('_', '')
                .replace('#', '')
                .replace('\'', '')
                .replace('"', '')
                .replace('+', '')
                .replace('*', '')
                .replace('§', '')
                .replace('$', '')
                .replace('%', '')
                .replace('&', '')
                .replace('/', '')
                .replace('(', '')
                .replace(')', '')
                .replace('=', '')
                .replace('\\', '')
                .replace('@', '')
                .replace('~', '')
                .replace('…', '');
        },
        getAnswer(message) {
            message = this.cleanupMessage(message);

            let phrases = message.split(' ');
            let answer = undefined;

            if (this.lastMessageData.joke && this.includesOneOf(phrases, ['another', 'more'])) {
                this.tellJoke(this.lastMessageData.category);
            }

            if (this.includesAllOf(phrases, ['change', 'my', 'name'])) {
                this.askedForName = true;
                return "Please tell me how i should call you.";
            }

            if (this.includesAllOf(phrases, ['new', 'note']) ||
                this.includesAllOf(phrases, ['new', 'task']) ||
                this.includesAllOf(phrases, ['take', 'note']) ||
                this.includesAllOf(phrases, ['save', 'to', 'clipboard'])
            ) {
                this.takeNote = true;
                return this.oneOf([
                    "What do you wan't me to save for you?",
                    "Tell me what you wan't to save.",
                    "What is it you wan't to save?",
                ]);
            }

            if (this.includesAllOf(phrases, ['clear', 'chat'])) {
                this.clearChat();
                return false;
            }

            if (this.includesAllOf(phrases, ['weather']) &&
                this.includesOneOf(phrases, ['how', 'whats'])
            ) {
                this.checkWeather();
                return false;
            }

            if (this.includesAllOf(phrases, ['knock', 'joke'])) {
                this.tellJoke('knock-knock');
                return false;
            }

            if (this.includesAllOf(phrases, ['joke']) && this.includesOneOf(phrases, ['coding', 'programming', 'code', 'it'])) {
                this.tellJoke('programming');
                return false;
            }

            if (this.includesAllOf(phrases, ['tell', 'joke']) ||
                this.includesAllOf(phrases, ['something', 'funny']) ||
                this.includesAllOf(phrases, ['cheer', 'me', 'up'])
            ) {
                this.tellJoke('general');
                return false;
            }

            if (this.includesAllOf(phrases, ['whats', 'the', 'time']) || this.includesAllOf(phrases, ['how', 'late'])) {
                return "It's " + moment().format('LT');
            }

            if (this.includesAllOf(phrases, ['what', 'day', 'it'])) {
                return "It's " + moment().format('dddd') + ".";
            }

            if (this.includesAllOf(phrases, ['what', 'date', 'it']) || this.includesAllOf(phrases, ['whats', 'the', 'date'])) {
                return "It's " + moment().format('dddd') + ", " + moment().format('MMMM Do YYYY') + ".";
            }

            this.answers.forEach((answerOption) => {
                if (answerOption.includeAll === true) {
                    if (this.includesAllOf(phrases, answerOption.keywords)) {
                        answer = this.oneOf(answerOption.responses);
                    }
                } else {
                    if (this.includesOneOf(phrases, answerOption.keywords)) {
                        answer = this.oneOf(answerOption.responses);
                    }
                }
            });

            if (answer) {
                return answer;
            }

            return 'I don\'t know what to say..';
        },
        addResponseToInput() {
            this.addModal.responses.push('');
        },
        addNewResponseContainer() {
            let includeAll = this.addModal.includeAll;
            let keywords = this.cleanupMessage(this.addModal.keywords).split(',');
            let responses = this.addModal.responses;

            this.answers.push({
                includeAll: includeAll,
                keywords: keywords,
                responses: responses
            });

            this.addModal.includeAll = false;
            this.addModal.keywords = '';
            this.addModal.responses = [''];

            this.updateStorage();
        },
        updateStorage() {
            localStorage.setItem('name', this.name);
            localStorage.setItem('username', this.username);
            localStorage.setItem('activeTheme', this.activeTheme);
            localStorage.setItem('messages', JSON.stringify(this.messages));
            localStorage.setItem('answers', JSON.stringify(this.answers));
            localStorage.setItem('notes', JSON.stringify(this.notes));
            localStorage.setItem('lastMessage', JSON.stringify(this.lastMessage));
            localStorage.setItem('location', JSON.stringify(this.location));
        },
        getSavedData() {
            let savedName = localStorage.getItem('name');

            this.name = savedName ? savedName : this.name;

            let savedUsername = localStorage.getItem('username');
            this.username = savedUsername ? savedUsername : null;

            let savedActiveTheme = localStorage.getItem('activeTheme');
            this.activeTheme = savedActiveTheme ? savedActiveTheme : 'slate';

            let savedMessages = JSON.parse(localStorage.getItem('messages'));
            this.messages = savedMessages ? savedMessages : [];

            let savedAnswers = JSON.parse(localStorage.getItem('answers'));
            this.answers = savedAnswers ? savedAnswers : [];

            let savedNotes = JSON.parse(localStorage.getItem('notes'));
            this.notes = savedNotes ? savedNotes : [];

            let savedLastMessage = JSON.parse(localStorage.getItem('lastMessage'));
            this.lastMessage = savedLastMessage ? savedLastMessage : null;

            let savedLocation = JSON.parse(localStorage.getItem('location'));
            this.location = savedLocation ? savedLocation : null;

            this.scrollDown();
        },
        askForName() {
            this.botMessage(
                this.oneOf([
                    'May i ask for your name?',
                    'Whats your name? :)',
                    'How can i call you?',
                    'How did your developers call you? :)'
                ])
            );

            this.askedForName = true;
        },
        setName(message) {
            this.username = message.trim();
            this.settingsModal.username = this.username;
            this.askedForName = false;
            this.updateStorage();

            this.botMessage(
                this.oneOf([
                    "That's a beautiful name!",
                    "Okay, i'll call you " + this.username + " from now on :)",
                    "Nice to meet you, " + this.username + ". :D"
                ])
            )
        },
        saveNote(message) {
            this.takeNote = false;

            this.notes.push({
                time: moment(),
                body: message,
                checked: false
            });

            this.updateStorage();

            this.botMessage(
                this.oneOf([
                    "Saved! :)",
                    "You can read and check your notes in the clipboard-section. :)"
                ])
            )
        },
        clearNotes() {
            this.notes = [];

            this.botMessage(
                this.oneOf([
                    "Notes cleared. 🚮"
                ])
            );

            this.updateStorage();
        },
        saveSettings() {
            this.name = this.settingsModal.name;
            this.username = this.settingsModal.username;
            this.location = this.settingsModal.location;
            this.updateStorage();

            // this.botMessage('Settings saved! :)');
            this.scrollDown();
        },
        clearChat() {
            this.messages = [];
            this.botMessage(this.oneOf([
                'Chat cleared.',
                'Evidence destroyed.',
                'Mind cleared.',
                'Uhm.. i think forgot everything we ever talked about.. oops.',
                'A fresh start!',
                "You've got something to hide? Nevermind, gotcha fam. Chat is cleared now. 🐱‍👤"
            ]));

            this.updateStorage();
        },
        checkWeather() {
            let vue = this;

            if (!vue.location) {
                vue.botMessage('Please set your location in the settings. ⚙');
                return;
            }

            let city = this.location.toLowerCase();
            let url = 'http://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=8a1aa336da8899c1038bf6bd808d8961&units=metric';

            axios.get(url)
                .then(function (response) {
                    vue.botMessage('In ' + response.data.name + ' it\'s ' + response.data.main.temp.toFixed() + '°C with ' + response.data.weather[0].description + '.');
                })
                .catch(function (error) {
                    alert(error);
                    vue.botMessage('I couldn\'t check the weather for your location. 🤔');
                })

            this.updateStorage();
        },
        tellJoke(category) {
            let vue = this;
            let categorySet = false;

            if (category !== true && category !== false) {
                category = category.trim();
                categorySet = true;
            } else {
                category = 'general'
            }

            let url = 'https://official-joke-api.appspot.com/jokes/' + category + '/random';

            axios.get(url)
                .then(function (response) {
                    console.log(response);
                    let joke = response.data[0];

                    vue.botMessage(joke.setup);

                    setTimeout(() => {
                        vue.botMessage(joke.punchline);
                        vue.scrollDown();
                    }, 3500);

                    vue.lastMessageData = {
                        joke: true,
                        category: category
                    };
                })
                .catch(function (error) {
                    console.log(error);

                    if (categorySet) {
                        vue.botMessage("Sorry, i don't know any jokes about this topic.. 🙄");
                    } else {
                        vue.botMessage("I can't remember any jokes right now, sorry. 😢");
                    }
                });

            this.updateStorage();
        },
        meMessage(message) {
            this.addMessage(this.username  + ' ' + message, false, true);
            this.react(message, true);
        },
        clearStorage() {
            localStorage.clear();
            location.reload();
        },
        getBootswatchThemes() {
            let vue = this;

            axios.get('https://bootswatch.com/api/4.json')
                .then(function (response) {
                    vue.themes = response.data.themes;
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    }
})