LunaDev
/
kara
1
1
Fork 0
Code Issues 14 Releases 1 Wiki Activity
Browse Source

Adds settingsModal; 

Adds more saving;
Disables saving welcomeBack messages;
master
Nero Ignis 5 years ago
parent
2ed5f00047
commit
42999f11ef
4 changed files with 110 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      .idea/workspace.xml
  2. 6
      app.css
  3. 58
      app.js
  4. 48
      index.html

32
.idea/workspace.xml
Unescape View File

@ -6,6 +6,8 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment=""> <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$/.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" /> <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@ -47,7 +49,7 @@
<workItem from="1597348092890" duration="8205000" /> <workItem from="1597348092890" duration="8205000" />
<workItem from="1597530844649" duration="131000" /> <workItem from="1597530844649" duration="131000" />
<workItem from="1597577497243" duration="3353000" /> <workItem from="1597577497243" duration="3353000" />
<workItem from="1597583294362" duration="3976000" /> <workItem from="1597583294362" duration="5755000" />
</task> </task>
<task id="LOCAL-00001" summary="Adds gitignore."> <task id="LOCAL-00001" summary="Adds gitignore.">
<created>1597348071361</created> <created>1597348071361</created>
@ -252,7 +254,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1597587202860</updated> <updated>1597587202860</updated>
</task> </task>
<option name="localTasksCounter" value="30" /> <task id="LOCAL-00030" summary="Change button symbol.">
<created>1597587291650</created>
<option name="number" value="00030" />
<option name="presentableId" value="LOCAL-00030" />
<option name="project" value="LOCAL" />
<updated>1597587291650</updated>
</task>
<option name="localTasksCounter" value="31" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -274,17 +283,18 @@
<MESSAGE value="Move answers to data." /> <MESSAGE value="Move answers to data." />
<MESSAGE value="Kara now saves the chat and her saved answers in localstorage." /> <MESSAGE value="Kara now saves the chat and her saved answers in localstorage." />
<MESSAGE value="Adds method to change saved username." /> <MESSAGE value="Adds method to change saved username." />
<option name="LAST_COMMIT_MESSAGE" value="Adds method to change saved username." /> <MESSAGE value="Change button symbol." />
<option name="LAST_COMMIT_MESSAGE" value="Change button symbol." />
</component> </component>
<component name="WindowStateProjectService"> <component name="WindowStateProjectService">
<state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557"> <state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" /> <state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" />
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597587202806"> <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597587291601">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597587202806" /> <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597587291601" />
<state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276"> <state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
@ -301,10 +311,10 @@
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="172" y="0" key="SettingsEditor/0.0.1366.720@0.0.1366.720" timestamp="1597530949459" /> <state x="172" y="0" key="SettingsEditor/0.0.1366.720@0.0.1366.720" timestamp="1597530949459" />
<state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597587206315"> <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597587292665">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597587206315" /> <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597587292665" />
<state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624"> <state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
@ -313,13 +323,13 @@
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state width="533" height="302" key="javadoc.popup.new/0.0.1366.720@0.0.1366.720" timestamp="1597585751908" /> <state width="533" height="302" key="javadoc.popup.new/0.0.1366.720@0.0.1366.720" timestamp="1597585751908" />
<state x="347" y="155" key="run.anything.popup" timestamp="1597584197904"> <state x="347" y="155" key="run.anything.popup" timestamp="1597587322870">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="347" y="155" key="run.anything.popup/0.0.1366.720@0.0.1366.720" timestamp="1597584197904" /> <state x="347" y="155" key="run.anything.popup/0.0.1366.720@0.0.1366.720" timestamp="1597587322870" />
<state x="346" y="41" width="672" height="678" key="search.everywhere.popup" timestamp="1597584542754"> <state x="346" y="41" width="672" height="678" key="search.everywhere.popup" timestamp="1597587640929">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="346" y="41" width="672" height="678" key="search.everywhere.popup/0.0.1366.720@0.0.1366.720" timestamp="1597584542754" /> <state x="346" y="41" width="672" height="678" key="search.everywhere.popup/0.0.1366.720@0.0.1366.720" timestamp="1597587640929" />
</component> </component>
</project> </project>

6
app.css
Unescape View File

@ -18,7 +18,7 @@ body {
max-width: 80%; max-width: 80%;
} }
.ai-message { .bot-message {
border-radius: 0px 15px 15px 15px; border-radius: 0px 15px 15px 15px;
background-color: lightgreen; background-color: lightgreen;
} }
@ -61,4 +61,8 @@ body {
.response-input { .response-input {
margin-bottom: 3px; margin-bottom: 3px;
}
.form-button {
width: 100%;
} }

58
app.js
Unescape View File

@ -14,6 +14,10 @@ let kara = new Vue({
'Answer #1' 'Answer #1'
] ]
}, },
settingsModal: {
name: null,
username: null
},
answers: [ answers: [
{ {
includeAll: false, includeAll: false,
@ -42,6 +46,11 @@ let kara = new Vue({
mounted() { mounted() {
this.getSavedData(); this.getSavedData();
this.settingsModal = {
name: this.name,
username: this.username
};
if (!this.username) { if (!this.username) {
this.initialGreeting(); this.initialGreeting();
this.askForName(); this.askForName();
@ -57,19 +66,15 @@ let kara = new Vue({
this.scrollDown(); this.scrollDown();
}, },
methods: { methods: {
addMessage(body, ai) { addMessage(body, bot) {
this.messages.push({ this.messages.push({
body: body, body: body,
ai: ai, bot: bot,
time: Date.now() time: Date.now()
}) })
this.updateStorage();
}, },
aiMessage(body) { botMessage(body) {
this.addMessage(body, true); this.addMessage(body, true);
this.updateStorage();
}, },
userMessage(body) { userMessage(body) {
this.addMessage(body, false); this.addMessage(body, false);
@ -77,7 +82,7 @@ let kara = new Vue({
this.updateStorage(); this.updateStorage();
}, },
initialGreeting() { initialGreeting() {
this.aiMessage( this.botMessage(
this.oneOf( this.oneOf(
[ [
"Hi! I'm " + this.name + ". :)", "Hi! I'm " + this.name + ". :)",
@ -89,7 +94,7 @@ let kara = new Vue({
this.updateStorage(); this.updateStorage();
}, },
welcomeBack() { welcomeBack() {
this.aiMessage( this.botMessage(
this.oneOf( this.oneOf(
[ [
"Hi! Haven't heard of you in a while. :)", "Hi! Haven't heard of you in a while. :)",
@ -98,8 +103,6 @@ let kara = new Vue({
] ]
) )
); );
this.updateStorage();
}, },
sendMessage() { sendMessage() {
if (this.chatbox.trim() === '') { if (this.chatbox.trim() === '') {
@ -110,8 +113,6 @@ let kara = new Vue({
this.scrollDown(); this.scrollDown();
this.react(this.chatbox); this.react(this.chatbox);
this.chatbox = ''; this.chatbox = '';
this.updateStorage();
}, },
react(message) { react(message) {
this.isTyping = true; this.isTyping = true;
@ -121,7 +122,11 @@ let kara = new Vue({
this.setName(message) this.setName(message)
} else { } else {
let answer = this.getAnswer(message); let answer = this.getAnswer(message);
this.aiMessage(answer); if (answer) {
this.botMessage(answer);
}
this.updateStorage();
} }
this.isTyping = false; this.isTyping = false;
@ -130,10 +135,8 @@ let kara = new Vue({
}, },
scrollDown() { scrollDown() {
$('#chat-box').stop().animate({ $('#chat-box').stop().animate({
scrollTop: $('#chat-box')[0].scrollHeight scrollTop: ($('#chat-box')[0].scrollHeight * 10)
}, 800); }, 800);
this.updateStorage();
}, },
oneOf(answers) { oneOf(answers) {
let amountOfAnswers = answers.length; let amountOfAnswers = answers.length;
@ -201,6 +204,11 @@ let kara = new Vue({
return "Please tell me how i should call you."; return "Please tell me how i should call you.";
} }
if (this.includesAllOf(phrases, ['clear', 'chat'])) {
this.clearChat()
return false;
}
this.answers.forEach((answerOption) => { this.answers.forEach((answerOption) => {
if (answerOption.includeAll === true) { if (answerOption.includeAll === true) {
if ( if (
@ -267,7 +275,7 @@ let kara = new Vue({
this.scrollDown(); this.scrollDown();
}, },
askForName() { askForName() {
this.aiMessage( this.botMessage(
this.oneOf([ this.oneOf([
'May i ask for your name?', 'May i ask for your name?',
'Whats your name? :)', 'Whats your name? :)',
@ -283,13 +291,25 @@ let kara = new Vue({
this.updateStorage(); this.updateStorage();
this.askedForName = false; this.askedForName = false;
this.aiMessage( this.botMessage(
this.oneOf([ this.oneOf([
"That's a beautiful name!", "That's a beautiful name!",
"Okay, i'll call you " + this.username + " from now on :)", "Okay, i'll call you " + this.username + " from now on :)",
"Nice to meet you, " + this.username + ". :D" "Nice to meet you, " + this.username + ". :D"
]) ])
) )
},
saveSettings() {
this.name = this.settingsModal.name;
this.username = this.settingsModal.username;
this.updateStorage();
this.botMessage('Settings saved! :)');
this.scrollDown();
},
clearChat() {
this.messages = [];
this.botMessage('Chat cleared.');
} }
} }
}) })

48
index.html
Unescape View File

@ -13,7 +13,10 @@
<div class="container-fluid" id="kara"> <div class="container-fluid" id="kara">
<h5 id="kara-banner"> <h5 id="kara-banner">
<div class="float-right"> <div class="float-right">
<div class="btn btn-sm btn-secondary" @click="scrollDown()" data-toggle="modal" data-target="#addModal"> <div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal">
<i class="fas fa-sliders-h"></i>
</div>
<div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#addModal">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
</div> </div>
<div class="btn btn-sm btn-secondary" @click="scrollDown()"> <div class="btn btn-sm btn-secondary" @click="scrollDown()">
@ -25,7 +28,7 @@
<div id="chat-box"> <div id="chat-box">
<template v-for="message in messages"> <template v-for="message in messages">
<div class="message ai-message float-left" v-if="message.ai"> <div class="message bot-message float-left" v-if="message.bot">
{{ message.body }} {{ message.body }}
<br/> <br/>
</div> </div>
@ -34,7 +37,7 @@
<br/> <br/>
</div> </div>
</template> </template>
<div class="message ai-message typing float-left" v-if="isTyping"> <div class="message bot-message typing float-left" v-if="isTyping">
<div class="spinner-grow text-secondary" role="status"> <div class="spinner-grow text-secondary" role="status">
<span class="sr-only"> <span class="sr-only">
Loading... Loading...
@ -96,6 +99,45 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Settings</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">What's my name?</label>
<input type="text" class="form-control" id="name" v-model="settingsModal.name">
</div>
<div class="form-group" v-if="username !== null">
<label for="username">What's your name?</label>
<input type="text" class="form-control" id="username" v-model="settingsModal.username">
</div>
<div class="form-group">
<label>Data</label>
<div class="row">
<div class="col-sm-6">
<button @click="clearChat()" class="btn btn-warning form-button" data-dismiss="modal">
Delete chat
</button>
</div>
<div class="col-sm-6">
<button @click="" class="btn btn-warning form-button">
Delete everything
</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveSettings()">Save</button>
</div>
</div>
</div>
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save