- 
+ 
+
Chat support
-Hi. My name is Sam. How can I help you?
+Hi. I am a DiGiCOR Chatbot. How may I assist?
diff --git a/flask chatbot/standalone-frontend/images/chatbox-icon.svg b/flask chatbot/standalone-frontend/images/chatbox-icon.svg
new file mode 100644
index 000000000..848efeb00
--- /dev/null
+++ b/flask chatbot/standalone-frontend/images/chatbox-icon.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/standalone-frontend/style.css b/flask chatbot/standalone-frontend/style.css
similarity index 89%
rename from standalone-frontend/style.css
rename to flask chatbot/standalone-frontend/style.css
index a6dcf2585..6383c2ff3 100644
--- a/standalone-frontend/style.css
+++ b/flask chatbot/standalone-frontend/style.css
@@ -8,15 +8,15 @@ body {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 100%;
- background: #F1F1F1;
+ background: #2477C5;
}
*, html {
- --primaryGradient: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%);
- --secondaryGradient: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%);
+ --primaryGradient: linear-gradient(93.12deg, #1d4791 0.52%, #008aff 100%);
+ --secondaryGradient: linear-gradient(268.91deg, #1d4791 -2.14%, #008aff 99.69%);
--primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
--secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
- --primary: #581B98;
+ --primary: #1b2398;
}
/* CHATBOX
@@ -31,7 +31,7 @@ body {
.chatbox__support {
display: flex;
flex-direction: column;
- background: #eee;
+ background: #369df8;
width: 300px;
height: 350px;
z-index: -123456;
@@ -97,7 +97,7 @@ body {
}
.chatbox__support {
- background: #f9f9f9;
+ background: #008aff;
height: 450px;
width: 350px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
@@ -124,12 +124,12 @@ body {
.chatbox__heading--header {
font-size: 1.2rem;
- color: white;
+ color: #008aff;
}
.chatbox__description--header {
font-size: .9rem;
- color: white;
+ color: #008aff
}
/* Messages */
@@ -139,7 +139,7 @@ body {
.messages__item {
margin-top: 10px;
- background: #E0E0E0;
+ background: #1e5ecc;
padding: 8px 12px;
max-width: 70%;
}
@@ -156,7 +156,7 @@ body {
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
background: var(--primary);
- color: white;
+ color: #008aff;
}
/* FOOTER */
@@ -182,14 +182,14 @@ body {
}
.chatbox__send--footer {
- color: white;
+ color: #008aff;
}
.chatbox__button button,
.chatbox__button button:focus,
.chatbox__button button:visited {
padding: 10px;
- background: white;
+ background: #008aff;
border: none;
outline: none;
border-top-left-radius: 50px;
diff --git a/flask chatbot/static/app.js b/flask chatbot/static/app.js
new file mode 100644
index 000000000..c57968ca9
--- /dev/null
+++ b/flask chatbot/static/app.js
@@ -0,0 +1,104 @@
+class Chatbox {
+ constructor() {
+ this.args = {
+ openButton: document.querySelector('.chatbox__button'),
+ chatBox: document.querySelector('.chatbox__support'),
+ sendButton: document.querySelector('.send__button')
+ }
+
+ this.state = false;
+ this.messages = [];
+ }
+
+ display() {
+ const {openButton, chatBox, sendButton} = this.args;
+
+ this.prompt(chatBox)
+
+ openButton.addEventListener('click', () => this.toggleState(chatBox))
+
+ sendButton.addEventListener('click', () => this.onSendButton(chatBox))
+
+ const node = chatBox.querySelector('input');
+ node.addEventListener("keyup", ({key}) => {
+ if (key === "Enter") {
+ this.onSendButton(chatBox)
+ }
+ })
+ }
+
+ prompt(chatbox) {
+ this.messages.push({ name: "Bot", message: "Welcome to DiGiCOR. I am DiGiCOR Chatbot, and I can help answer your simple queries.
1. If you wish to compare our systems model side by side filtering to your specifications, visit DiGiCOR Applicator .
2. If you wish to obtain pricing, say 'live agent' to speak to our staff." }); + this.updateChatText(chatbox) + } + + toggleState(chatbox) { + this.state = !this.state; + // show or hides the box + if(this.state) { + chatbox.classList.add('chatbox--active') + } else { + chatbox.classList.remove('chatbox--active') + } + } + + onSendButton(chatbox) { + var textField = chatbox.querySelector('input'); + let text1 = textField.value + if (text1 === "") { + return; + } + + let msg1 = { name: "User", message: text1 } + this.messages.push(msg1); + + fetch($SCRIPT_ROOT + '/predict', { + method: 'POST', + body: JSON.stringify({ message: text1 }), + mode: 'cors', + headers: { + 'Content-Type': 'application/json' + }, + }) + .then(r => r.json()) + .then(r => { + let msg2 = { name: "Bot", message: r.answer }; + this.messages.push(msg2); + this.updateChatText(chatbox) + textField.value = '' + + }).catch((error) => { + console.error('Error:', error); + this.updateChatText(chatbox) + textField.value = '' + }); + } + + updateChatText(chatbox) { + var html = ''; + this.messages.slice().reverse().forEach(function(item, index) { + if (item.name === "Bot") + { + html += '' + } + else + { + html += '' + } + }); + + const chatmessage = chatbox.querySelector('.chatbox__messages'); + chatmessage.innerHTML = html; + } +} + + +const chatbox = new Chatbox(); +chatbox.display(); + +// let promise = new Promise(chatbox.display(resolve, reject) { +// // the function is executed automatically when the promise is constructed + +// // after 1 second signal that the job is done with the result "done" +// setTimeout(() => resolve("Done"), 1000); +// }); \ No newline at end of file diff --git a/flask chatbot/static/images/chatbox-icon.svg b/flask chatbot/static/images/chatbox-icon.svg new file mode 100644 index 000000000..848efeb00 --- /dev/null +++ b/flask chatbot/static/images/chatbox-icon.svg @@ -0,0 +1,26 @@ + + + diff --git a/static/style.css b/flask chatbot/static/style.css similarity index 89% rename from static/style.css rename to flask chatbot/static/style.css index a6dcf2585..6383c2ff3 100644 --- a/static/style.css +++ b/flask chatbot/static/style.css @@ -8,15 +8,15 @@ body { font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 100%; - background: #F1F1F1; + background: #2477C5; } *, html { - --primaryGradient: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%); - --secondaryGradient: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%); + --primaryGradient: linear-gradient(93.12deg, #1d4791 0.52%, #008aff 100%); + --secondaryGradient: linear-gradient(268.91deg, #1d4791 -2.14%, #008aff 99.69%); --primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1); --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1); - --primary: #581B98; + --primary: #1b2398; } /* CHATBOX @@ -31,7 +31,7 @@ body { .chatbox__support { display: flex; flex-direction: column; - background: #eee; + background: #369df8; width: 300px; height: 350px; z-index: -123456; @@ -97,7 +97,7 @@ body { } .chatbox__support { - background: #f9f9f9; + background: #008aff; height: 450px; width: 350px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); @@ -124,12 +124,12 @@ body { .chatbox__heading--header { font-size: 1.2rem; - color: white; + color: #008aff; } .chatbox__description--header { font-size: .9rem; - color: white; + color: #008aff } /* Messages */ @@ -139,7 +139,7 @@ body { .messages__item { margin-top: 10px; - background: #E0E0E0; + background: #1e5ecc; padding: 8px 12px; max-width: 70%; } @@ -156,7 +156,7 @@ body { border-top-right-radius: 20px; border-bottom-left-radius: 20px; background: var(--primary); - color: white; + color: #008aff; } /* FOOTER */ @@ -182,14 +182,14 @@ body { } .chatbox__send--footer { - color: white; + color: #008aff; } .chatbox__button button, .chatbox__button button:focus, .chatbox__button button:visited { padding: 10px; - background: white; + background: #008aff; border: none; outline: none; border-top-left-radius: 50px; diff --git a/standalone-frontend/base.html b/flask chatbot/templates/base.html similarity index 66% rename from standalone-frontend/base.html rename to flask chatbot/templates/base.html index c2c3b5c39..1606c183e 100644 --- a/standalone-frontend/base.html +++ b/flask chatbot/templates/base.html @@ -1,6 +1,6 @@ - + @@ -12,11 +12,11 @@
1. If you wish to compare our systems model side by side filtering to your specifications, visit DiGiCOR Applicator .
2. If you wish to obtain pricing, say 'live agent' to speak to our staff." }); + this.updateChatText(chatbox) + } + + toggleState(chatbox) { + this.state = !this.state; + // show or hides the box + if(this.state) { + chatbox.classList.add('chatbox--active') + } else { + chatbox.classList.remove('chatbox--active') + } + } + + onSendButton(chatbox) { + var textField = chatbox.querySelector('input'); + let text1 = textField.value + if (text1 === "") { + return; + } + + let msg1 = { name: "User", message: text1 } + this.messages.push(msg1); + + fetch($SCRIPT_ROOT + '/predict', { + method: 'POST', + body: JSON.stringify({ message: text1 }), + mode: 'cors', + headers: { + 'Content-Type': 'application/json' + }, + }) + .then(r => r.json()) + .then(r => { + let msg2 = { name: "Bot", message: r.answer }; + this.messages.push(msg2); + this.updateChatText(chatbox) + textField.value = '' + + }).catch((error) => { + console.error('Error:', error); + this.updateChatText(chatbox) + textField.value = '' + }); + } + + updateChatText(chatbox) { + var html = ''; + this.messages.slice().reverse().forEach(function(item, index) { + if (item.name === "Bot") + { + html += '' + } + else + { + html += '' + } + }); + + const chatmessage = chatbox.querySelector('.chatbox__messages'); + chatmessage.innerHTML = html; + } +} + + +const chatbox = new Chatbox(); +chatbox.display(); + +// let promise = new Promise(chatbox.display(resolve, reject) { +// // the function is executed automatically when the promise is constructed + +// // after 1 second signal that the job is done with the result "done" +// setTimeout(() => resolve("Done"), 1000); +// }); \ No newline at end of file diff --git a/flask chatbot/static/images/chatbox-icon.svg b/flask chatbot/static/images/chatbox-icon.svg new file mode 100644 index 000000000..848efeb00 --- /dev/null +++ b/flask chatbot/static/images/chatbox-icon.svg @@ -0,0 +1,26 @@ + + + diff --git a/static/style.css b/flask chatbot/static/style.css similarity index 89% rename from static/style.css rename to flask chatbot/static/style.css index a6dcf2585..6383c2ff3 100644 --- a/static/style.css +++ b/flask chatbot/static/style.css @@ -8,15 +8,15 @@ body { font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 100%; - background: #F1F1F1; + background: #2477C5; } *, html { - --primaryGradient: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%); - --secondaryGradient: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%); + --primaryGradient: linear-gradient(93.12deg, #1d4791 0.52%, #008aff 100%); + --secondaryGradient: linear-gradient(268.91deg, #1d4791 -2.14%, #008aff 99.69%); --primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1); --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1); - --primary: #581B98; + --primary: #1b2398; } /* CHATBOX @@ -31,7 +31,7 @@ body { .chatbox__support { display: flex; flex-direction: column; - background: #eee; + background: #369df8; width: 300px; height: 350px; z-index: -123456; @@ -97,7 +97,7 @@ body { } .chatbox__support { - background: #f9f9f9; + background: #008aff; height: 450px; width: 350px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); @@ -124,12 +124,12 @@ body { .chatbox__heading--header { font-size: 1.2rem; - color: white; + color: #008aff; } .chatbox__description--header { font-size: .9rem; - color: white; + color: #008aff } /* Messages */ @@ -139,7 +139,7 @@ body { .messages__item { margin-top: 10px; - background: #E0E0E0; + background: #1e5ecc; padding: 8px 12px; max-width: 70%; } @@ -156,7 +156,7 @@ body { border-top-right-radius: 20px; border-bottom-left-radius: 20px; background: var(--primary); - color: white; + color: #008aff; } /* FOOTER */ @@ -182,14 +182,14 @@ body { } .chatbox__send--footer { - color: white; + color: #008aff; } .chatbox__button button, .chatbox__button button:focus, .chatbox__button button:visited { padding: 10px; - background: white; + background: #008aff; border: none; outline: none; border-top-left-radius: 50px; diff --git a/standalone-frontend/base.html b/flask chatbot/templates/base.html similarity index 66% rename from standalone-frontend/base.html rename to flask chatbot/templates/base.html index c2c3b5c39..1606c183e 100644 --- a/standalone-frontend/base.html +++ b/flask chatbot/templates/base.html @@ -1,6 +1,6 @@ - + @@ -12,11 +12,11 @@
-
+
+
Chat support
-Hi. My name is Sam. How can I help you?
+Hi. I am a DiGiCOR Chatbot. How may I assist?