|
|
|
|
@ -5,9 +5,6 @@ let kara = new Vue({
@@ -5,9 +5,6 @@ let kara = new Vue({
|
|
|
|
|
name: 'Kara', |
|
|
|
|
chatbox: null, |
|
|
|
|
isTyping: false, |
|
|
|
|
templates: { |
|
|
|
|
initialGreeting: "Hi! I'm Kara. :)" |
|
|
|
|
}, |
|
|
|
|
addModal: { |
|
|
|
|
includeAll: false, |
|
|
|
|
keywords: '', |
|
|
|
|
@ -41,8 +38,15 @@ let kara = new Vue({
@@ -41,8 +38,15 @@ let kara = new Vue({
|
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
if (this.getSavedData() === false) { |
|
|
|
|
this.initialGreeting(); |
|
|
|
|
// Todo: add method to ask for and save username
|
|
|
|
|
} else { |
|
|
|
|
this.welcomeBack(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
document.getElementById('chatinput').focus(); |
|
|
|
|
document.title = this.name; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
addMessage(body, ai) { |
|
|
|
|
@ -51,15 +55,43 @@ let kara = new Vue({
@@ -51,15 +55,43 @@ let kara = new Vue({
|
|
|
|
|
ai: ai, |
|
|
|
|
time: Date.now() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
aiMessage(body) { |
|
|
|
|
this.addMessage(body, true); |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
userMessage(body) { |
|
|
|
|
this.addMessage(body, false); |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
initialGreeting() { |
|
|
|
|
this.aiMessage(this.templates.initialGreeting); |
|
|
|
|
this.aiMessage( |
|
|
|
|
this.oneOf( |
|
|
|
|
[ |
|
|
|
|
"Hi! I'm " + this.name + ". :)", |
|
|
|
|
"Hi, nice to meet you! My name is " + this.name + ". :)" |
|
|
|
|
] |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
welcomeBack() { |
|
|
|
|
this.aiMessage( |
|
|
|
|
this.oneOf( |
|
|
|
|
[ |
|
|
|
|
"Hi! Haven't heard of you in a while. :)", |
|
|
|
|
"Welcome back! :)", |
|
|
|
|
"Hey :) Good to see you :)", |
|
|
|
|
] |
|
|
|
|
) |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
sendMessage() { |
|
|
|
|
if (this.chatbox.trim() === '') { |
|
|
|
|
@ -70,6 +102,8 @@ let kara = new Vue({
@@ -70,6 +102,8 @@ let kara = new Vue({
|
|
|
|
|
this.scrollDown(); |
|
|
|
|
this.react(this.chatbox); |
|
|
|
|
this.chatbox = ''; |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
react(message) { |
|
|
|
|
this.isTyping = true; |
|
|
|
|
@ -91,6 +125,8 @@ let kara = new Vue({
@@ -91,6 +125,8 @@ let kara = new Vue({
|
|
|
|
|
$('#chat-box').stop().animate({ |
|
|
|
|
scrollTop: $('#chat-box')[0].scrollHeight |
|
|
|
|
}, 800); |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
oneOf(answers) { |
|
|
|
|
let amountOfAnswers = answers.length; |
|
|
|
|
@ -189,6 +225,34 @@ let kara = new Vue({
@@ -189,6 +225,34 @@ let kara = new Vue({
|
|
|
|
|
keywords: keywords, |
|
|
|
|
responses: responses |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.addModal.includeAll = false; |
|
|
|
|
this.addModal.keywords = ''; |
|
|
|
|
this.addModal.responses = ['']; |
|
|
|
|
|
|
|
|
|
this.updateStorage(); |
|
|
|
|
}, |
|
|
|
|
updateStorage() { |
|
|
|
|
localStorage.setItem('name', this.name); |
|
|
|
|
localStorage.setItem('messages', JSON.stringify(this.messages)); |
|
|
|
|
localStorage.setItem('answers', JSON.stringify(this.answers)); |
|
|
|
|
}, |
|
|
|
|
getSavedData() { |
|
|
|
|
let savedName = localStorage.getItem('name') |
|
|
|
|
|
|
|
|
|
if (savedName === '') { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.name = localStorage.getItem('name'); |
|
|
|
|
|
|
|
|
|
let savedMessages = JSON.parse(localStorage.getItem('messages')); |
|
|
|
|
this.messages = savedMessages ? savedMessages : []; |
|
|
|
|
|
|
|
|
|
let savedAnswers = JSON.parse(localStorage.getItem('answers')); |
|
|
|
|
this.answers = savedAnswers ? savedAnswers : this.answers; |
|
|
|
|
|
|
|
|
|
this.scrollDown(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
