Kara now saves the chat and her saved answers in localstorage.

.idea/workspace.xml

@@ -6,7 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/app.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/app.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
     </list>
@@ -49,6 +48,7 @@
       <workItem from="1597348092890" duration="8205000" />
       <workItem from="1597530844649" duration="131000" />
       <workItem from="1597577497243" duration="3353000" />
+      <workItem from="1597583294362" duration="1455000" />
     </task>
     <task id="LOCAL-00001" summary="Adds gitignore.">
       <created>1597348071361</created>
@@ -298,13 +298,13 @@
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state width="533" height="302" key="javadoc.popup.new/0.0.1366.720@0.0.1366.720" timestamp="1597349276436" />
-    <state x="347" y="155" key="run.anything.popup" timestamp="1597354649319">
+    <state x="347" y="155" key="run.anything.popup" timestamp="1597584197904">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="347" y="155" key="run.anything.popup/0.0.1366.720@0.0.1366.720" timestamp="1597354649319" />
+    <state x="347" y="155" key="run.anything.popup/0.0.1366.720@0.0.1366.720" timestamp="1597584197904" />
-    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup" timestamp="1597530895698">
+    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup" timestamp="1597584542754">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup/0.0.1366.720@0.0.1366.720" timestamp="1597530895698" />
+    <state x="346" y="41" width="672" height="678" key="search.everywhere.popup/0.0.1366.720@0.0.1366.720" timestamp="1597584542754" />
   </component>
 </project>

app.js

@@ -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({
         ]
     },
     mounted() {
-        this.initialGreeting();
+        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({
                 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({
             this.scrollDown();
             this.react(this.chatbox);
             this.chatbox = '';
+
+            this.updateStorage();
         },
         react(message) {
             this.isTyping = true;
@@ -83,7 +117,7 @@ let kara = new Vue({
                 let answer = this.getAnswer(message);
                 console.log(answer);
 
-            	this.aiMessage(answer);
+                this.aiMessage(answer);
                 this.scrollDown();
             }, 3000);
         },
@@ -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({
                 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();
         }
     }
 })

index.html

@@ -20,7 +20,7 @@
                 <i class="fas fa-chevron-down"></i>
             </div>
         </div>
-        Kara
+        {{ this.name }}
     </h5>
 
     <div id="chat-box">
@@ -100,6 +100,8 @@
         </div>
     </div>
 </div>
+
+
 <script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>