diff --git a/.idea/.name b/.idea/.name
new file mode 100644
index 0000000..4d78cda
--- /dev/null
+++ b/.idea/.name
@@ -0,0 +1 @@
+kara
\ No newline at end of file
diff --git a/.idea/kara.iml b/.idea/kara.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/kara.iml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..d832bbe
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..3099bba
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1597264410641
+
+
+ 1597264410641
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app.css b/app.css
new file mode 100644
index 0000000..5927dab
--- /dev/null
+++ b/app.css
@@ -0,0 +1,30 @@
+#kara {
+ margin: 2em auto auto auto;
+ width: 50em;
+}
+
+#kara .card {
+ height: 40em;
+}
+
+.message {
+ padding: 10px;
+ margin-bottom: 5px;
+ min-width: 55%;
+ max-width: 80%;
+}
+
+.ai-message {
+ border-radius: 0px 15px 15px 15px;
+ background-color: lightgreen;
+}
+
+.user-message {
+ border-radius: 15px 0px 15px 15px;
+ background-color: lightblue;
+}
+
+#chat-box {
+ overflow-y: scroll;
+ height: 100%
+}
\ No newline at end of file
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..713e98d
--- /dev/null
+++ b/app.js
@@ -0,0 +1,106 @@
+let kara = new Vue({
+ el: '#kara',
+ data: {
+ messages: [],
+ name: 'Kara',
+ chatbox: null,
+ isTyping: false,
+ templates: {
+ initialGreeting: "Hi! I'm Kara. :)"
+ }
+ },
+ mounted() {
+ this.initialGreeting();
+ document.getElementById('chatinput').focus();
+ },
+ methods: {
+ addMessage(body, ai) {
+ this.messages.push({
+ body: body,
+ ai: ai,
+ time: Date.now()
+ })
+ },
+ aiMessage(body) {
+ this.addMessage(body, true);
+ },
+ userMessage(body) {
+ this.addMessage(body, false);
+ },
+ initialGreeting() {
+ this.aiMessage(this.templates.initialGreeting);
+ },
+ sendMessage() {
+ this.userMessage(this.chatbox);
+ this.react(this.chatbox);
+ this.chatbox = '';
+ },
+ react(message) {
+ this.isTyping = true;
+
+ setTimeout(() => {
+ this.isTyping = false;
+ document.getElementById('chatinput').focus();
+ }, 2500);
+
+ setTimeout(() => {
+ this.aiMessage(
+ this.getAnswer(message)
+ );
+ }, 3000);
+
+ this.scrollDown();
+ },
+ getAnswer(message) {
+ let isQuestion = (message.indexOf('?') > 0);
+
+ message = message.toLowerCase();
+ message = this.clearMessage(message);
+ let phrases = message.split(' ');
+
+
+
+ if (isQuestion) {
+ return 'This is a question!';
+ } else {
+ if (message.indexOf('name') > 0) {
+ return 'Nice to meet you!';
+ } else {
+ return "I don't know what to say.";
+ }
+ }
+
+ return answer;
+ },
+ scrollDown() {
+ $('#chat-box').stop().animate({
+ scrollTop: $('#chat-box')[0].scrollHeight
+ }, 800);
+ },
+ clearMessage(message) {
+ 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('…', '');
+ }
+ }
+})
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c650542
--- /dev/null
+++ b/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+ Kara AI
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.body }}
+
+
+
+ {{ message.body }}
+
+
+
+
+
+
+ Loading...
+
+
+
+
+ Loading...
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+