From a057efc2489be9cf0be504311ac2dd1b8f3ca095 Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Wed, 26 Jul 2023 18:03:17 -0400 Subject: [PATCH 01/14] openads chat wip --- assets/js/openads-chat.js | 18 +++++++ assets/openads-chat.css | 67 +++++++++++++++++++++++++ components/layout.js | 19 +++++++ ebooks/mastering-mongoose-thankyou.html | 15 ++++++ 4 files changed, 119 insertions(+) create mode 100644 assets/js/openads-chat.js create mode 100644 assets/openads-chat.css diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js new file mode 100644 index 000000000..768e9226c --- /dev/null +++ b/assets/js/openads-chat.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + const widget = document.createElement('div'); + widget.innerText = 'Ask me anything about JavaScript'; + widget.classList.add('openads-widget'); + widget.onclick = function() { + chatWindow.classList.add('show'); + }; + document.body.appendChild(widget); + + const chatWindow = document.querySelector('.openads-chat'); + + const chatExit = document.querySelector('.openads-chat-exit'); + chatExit.onclick = function() { + chatWindow.classList.remove('show'); + } +})(); \ No newline at end of file diff --git a/assets/openads-chat.css b/assets/openads-chat.css new file mode 100644 index 000000000..c6fdc4545 --- /dev/null +++ b/assets/openads-chat.css @@ -0,0 +1,67 @@ +.openads-widget { + position: fixed; + background-color: #f0db4f; + right: 0px; + top: 50vh; + padding: 1em; + cursor: pointer; + width: 120px; +} + +.openads-chat { + position: fixed; + width: 0px; + right: 0px; + height: 100vh; + background-color: white; + border-left: 1px solid #ddd; + border-bottom: 1px solid #ddd; + top: 0px; + box-sizing: border-box; + transition: width 0.3s ease; + z-index: 1000000; + overflow: hidden; +} + +.openads-chat.show { + width: 320px; +} + +.openads-chat-exit { + position: absolute; + right: 0px; + top: 0px; + cursor: pointer; +} + +.openads-chat-wrapper { + position: relative; + display: flex; + flex-direction: row; + padding: 1em; +} + +.openads-chat-new-message { + display: flex; + width: 100%; +} + +.openads-chat-input { + flex-grow: 1; +} + +.openads-chat-input input { + box-sizing: border-box; + width: 100%; + font-size: 1.1em; +} + +.open-ads-chat-button { + flex-grow: 0; +} + +.openads-chat-submit { + border: 0px; + background-color: #208E96; + color: white; +} diff --git a/components/layout.js b/components/layout.js index 35361735f..578b7ef9b 100644 --- a/components/layout.js +++ b/components/layout.js @@ -45,11 +45,30 @@ module.exports = params => ` ${footer()} ${floatAd(params.ad)} + ${openAdsChat} + + ${carbonAdScript(params.carbonAds)} `; +const openAdsChat = ` +
+
+
×
+
+
+ +
+
+ +
+
+
+
+`.trim(); + function carbonAdScript(carbonAds) { if (carbonAds === false) { return ''; diff --git a/ebooks/mastering-mongoose-thankyou.html b/ebooks/mastering-mongoose-thankyou.html index 4f398476c..60494f7f3 100644 --- a/ebooks/mastering-mongoose-thankyou.html +++ b/ebooks/mastering-mongoose-thankyou.html @@ -144,6 +144,21 @@

Resources

+
+
+
×
+
+
+ +
+
+ +
+
+
+
+ + From d3b2385c1fe59885d773bead61997d0307e04670 Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Thu, 27 Jul 2023 13:06:01 -0400 Subject: [PATCH 02/14] basic chatbot ui --- assets/images/guest.svg | 7 ++++ assets/js/openads-chat.js | 31 ++++++++++++++++- assets/openads-chat.css | 46 +++++++++++++++++++++++-- components/layout.js | 26 ++++++++++---- ebooks/mastering-mongoose-thankyou.html | 26 ++++++++++---- 5 files changed, 121 insertions(+), 15 deletions(-) create mode 100644 assets/images/guest.svg diff --git a/assets/images/guest.svg b/assets/images/guest.svg new file mode 100644 index 000000000..1ac79d232 --- /dev/null +++ b/assets/images/guest.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 768e9226c..ef4f90d74 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -14,5 +14,34 @@ const chatExit = document.querySelector('.openads-chat-exit'); chatExit.onclick = function() { chatWindow.classList.remove('show'); - } + }; + + const newMessageInput = document.querySelector('.openads-chat-input input'); + const newMessageButton = document.querySelector('.openads-chat-submit'); + const chatHistory = document.querySelector('.openads-chat-history'); + + window.submitOpenAdsMessage = function submitOpenAdsMessage() { + const value = newMessageInput.value; + newMessageButton.disabled = true; + newMessageInput.disabled = true; + + const newMessage = document.createElement('div'); + newMessage.classList.add('openads-chat-history-message'); + newMessage.innerHTML = ` +
+ + Guest +
+
+ ${value} +
+ `; + chatHistory.appendChild(newMessage); + + setTimeout(() => { + newMessageInput.value = ''; + newMessageInput.disabled = false; + newMessageButton.disabled = false; + }, 2000); + }; })(); \ No newline at end of file diff --git a/assets/openads-chat.css b/assets/openads-chat.css index c6fdc4545..51193e075 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -37,13 +37,27 @@ .openads-chat-wrapper { position: relative; display: flex; - flex-direction: row; - padding: 1em; + flex-direction: column; + padding-top: 1em; + padding-bottom: 1em; + box-sizing: border-box; + height: 100%; + gap: 10px; +} + +.openads-chat-history { + flex-grow: 1; + border-bottom: 1px solid #ddd; + padding-left: 1em; + padding-right: 1em; } .openads-chat-new-message { display: flex; width: 100%; + box-sizing: border-box; + padding-left: 1em; + padding-right: 1em; } .openads-chat-input { @@ -54,6 +68,7 @@ box-sizing: border-box; width: 100%; font-size: 1.1em; + margin-bottom: 0px; } .open-ads-chat-button { @@ -64,4 +79,31 @@ border: 0px; background-color: #208E96; color: white; + font-size: 1.5em; + height: calc(1.1em + 3px); + border-radius: 4px; + padding-top: 0px; +} + +.openads-chat-submit:disabled { + background-color: #ddd; +} + +.openads-chat-message-body { + margin-left: 24px; +} + +.openads-chat-history-message { + margin-bottom: 1em; +} + +.openads-chat-history-message .participant { + color: #666; + font-size: 0.9em; } + +.openads-chat-history-message .participant img { + height: 16px; + width: 16px; + margin-right: 4px; +} \ No newline at end of file diff --git a/components/layout.js b/components/layout.js index 578b7ef9b..2e2a7cb87 100644 --- a/components/layout.js +++ b/components/layout.js @@ -57,14 +57,28 @@ const openAdsChat = `
×
-
-
- -
-
- +
+
+
+ + Mastering JS +
+
+ Hi, I'm a JavaScript programming bot. + Ask me something about JavaScript! +
+
+
+
+ +
+
+ +
+
+
`.trim(); diff --git a/ebooks/mastering-mongoose-thankyou.html b/ebooks/mastering-mongoose-thankyou.html index 60494f7f3..56698f04b 100644 --- a/ebooks/mastering-mongoose-thankyou.html +++ b/ebooks/mastering-mongoose-thankyou.html @@ -147,14 +147,28 @@

Resources

×
-
-
- -
-
- +
+
+
+ + Mastering JS +
+
+ Hi, I'm a JavaScript programming bot. + Ask me something about JavaScript! +
+
+
+
+ +
+
+ +
+
+
From 2e6cc5143632b402a61ce711a2a5f9a5ee9193ee Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Sat, 29 Jul 2023 15:14:21 -0400 Subject: [PATCH 03/14] quick improvements for openads chat --- assets/js/openads-chat.js | 42 +++++++++++++++++++++++++++++++++------ assets/openads-chat.css | 2 ++ 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index ef4f90d74..9a5d8d31f 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -1,6 +1,8 @@ (function() { 'use strict'; + const endpoint = 'https://mj-chatbot-production.up.railway.app/api/chat'; + const widget = document.createElement('div'); widget.innerText = 'Ask me anything about JavaScript'; widget.classList.add('openads-widget'); @@ -20,8 +22,11 @@ const newMessageButton = document.querySelector('.openads-chat-submit'); const chatHistory = document.querySelector('.openads-chat-history'); - window.submitOpenAdsMessage = function submitOpenAdsMessage() { + window.submitOpenAdsMessage = async function submitOpenAdsMessage() { const value = newMessageInput.value; + if (!value) { + return; + } newMessageButton.disabled = true; newMessageInput.disabled = true; @@ -38,10 +43,35 @@ `; chatHistory.appendChild(newMessage); - setTimeout(() => { - newMessageInput.value = ''; - newMessageInput.disabled = false; - newMessageButton.disabled = false; - }, 2000); + let response; + let error = false; + try { + response = await fetch('https://mj-chatbot-production.up.railway.app/api/chat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ question: value }) + }).then(res => res.json()).then(res => res.response); + } catch (err) { + + } + + newMessageInput.value = ''; + newMessageInput.disabled = false; + newMessageButton.disabled = false; + + const newResponse = document.createElement('div'); + newResponse.classList.add('openads-chat-history-message'); + newResponse.innerHTML = ` +
+ + Mastering JS +
+
+ ${response} +
+ `; + chatHistory.appendChild(newResponse); }; })(); \ No newline at end of file diff --git a/assets/openads-chat.css b/assets/openads-chat.css index 51193e075..c59421008 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -50,6 +50,8 @@ border-bottom: 1px solid #ddd; padding-left: 1em; padding-right: 1em; + overflow-y: scroll; + overflow-x: hidden; } .openads-chat-new-message { From 1cb80eb8acad7042fc967cb629f823a482cf53a3 Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Mon, 31 Jul 2023 11:29:16 -0400 Subject: [PATCH 04/14] add marked and various layout fixes for openads chat --- assets/js/openads-chat.js | 4 ++-- assets/openads-chat.css | 17 +++++++++++++---- components/layout.js | 3 ++- ebooks/mastering-mongoose-thankyou.html | 3 ++- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 9a5d8d31f..1ca86f967 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -18,7 +18,7 @@ chatWindow.classList.remove('show'); }; - const newMessageInput = document.querySelector('.openads-chat-input input'); + const newMessageInput = document.querySelector('.openads-chat-input textarea'); const newMessageButton = document.querySelector('.openads-chat-submit'); const chatHistory = document.querySelector('.openads-chat-history'); @@ -69,7 +69,7 @@ Mastering JS
- ${response} + ${marked.parse(response)}
`; chatHistory.appendChild(newResponse); diff --git a/assets/openads-chat.css b/assets/openads-chat.css index c59421008..031918b9d 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -29,7 +29,7 @@ .openads-chat-exit { position: absolute; - right: 0px; + right: 2px; top: 0px; cursor: pointer; } @@ -38,7 +38,7 @@ position: relative; display: flex; flex-direction: column; - padding-top: 1em; + padding-top: 1.5em; padding-bottom: 1em; box-sizing: border-box; height: 100%; @@ -62,15 +62,22 @@ padding-right: 1em; } +.openads-chat-message-body p:first-child { + margin-top: 0px; +} + .openads-chat-input { flex-grow: 1; } -.openads-chat-input input { +.openads-chat-input textarea { box-sizing: border-box; width: 100%; font-size: 1.1em; margin-bottom: 0px; + border: 1px solid #eee; + height: 3em; + border-radius: 4px; } .open-ads-chat-button { @@ -82,9 +89,11 @@ background-color: #208E96; color: white; font-size: 1.5em; - height: calc(1.1em + 3px); + box-sizing: border-box; + height: 1.75em; border-radius: 4px; padding-top: 0px; + cursor: pointer; } .openads-chat-submit:disabled { diff --git a/components/layout.js b/components/layout.js index 2e2a7cb87..726cb3822 100644 --- a/components/layout.js +++ b/components/layout.js @@ -47,6 +47,7 @@ module.exports = params => `
${openAdsChat} + ${carbonAdScript(params.carbonAds)} @@ -72,7 +73,7 @@ const openAdsChat = `
- +
diff --git a/ebooks/mastering-mongoose-thankyou.html b/ebooks/mastering-mongoose-thankyou.html index 56698f04b..577461f8c 100644 --- a/ebooks/mastering-mongoose-thankyou.html +++ b/ebooks/mastering-mongoose-thankyou.html @@ -162,7 +162,7 @@

Resources

- +
@@ -172,6 +172,7 @@

Resources

+ From 93eca617044a784e3c738aa92bbe36fe1fdfc48e Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Wed, 2 Aug 2023 12:25:27 -0400 Subject: [PATCH 05/14] new endpoint --- assets/js/openads-chat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 1ca86f967..adda57f8f 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -46,7 +46,7 @@ let response; let error = false; try { - response = await fetch('https://mj-chatbot-production.up.railway.app/api/chat', { + response = await fetch('https://mj-chatbot-production-abe0.up.railway.app/api/ping', { method: 'POST', headers: { 'Content-Type': 'application/json' From 01ceb21366bdda9d8e6c9cdab78d14d85934a8c2 Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Wed, 2 Aug 2023 16:47:03 -0400 Subject: [PATCH 06/14] add sources --- assets/js/openads-chat.js | 17 +++++++++++++++-- assets/openads-chat.css | 21 +++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index adda57f8f..10aefb62d 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -28,6 +28,7 @@ return; } newMessageButton.disabled = true; + newMessageButton.innerHTML = ''; newMessageInput.disabled = true; const newMessage = document.createElement('div'); @@ -52,7 +53,7 @@ 'Content-Type': 'application/json' }, body: JSON.stringify({ question: value }) - }).then(res => res.json()).then(res => res.response); + }).then(res => res.json()); } catch (err) { } @@ -60,6 +61,7 @@ newMessageInput.value = ''; newMessageInput.disabled = false; newMessageButton.disabled = false; + newMessageButton.innerHTML = '»'; const newResponse = document.createElement('div'); newResponse.classList.add('openads-chat-history-message'); @@ -69,7 +71,18 @@ Mastering JS
- ${marked.parse(response)} + ${marked.parse(response.content)} +
+
+
+
 
+
+ Source +
+
+
+ ${response.title} +
`; chatHistory.appendChild(newResponse); diff --git a/assets/openads-chat.css b/assets/openads-chat.css index 031918b9d..2ea900b00 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -94,12 +94,17 @@ border-radius: 4px; padding-top: 0px; cursor: pointer; + width: 1.25em; } .openads-chat-submit:disabled { background-color: #ddd; } +.openads-chat-submit img { + width: 0.75em; +} + .openads-chat-message-body { margin-left: 24px; } @@ -117,4 +122,20 @@ height: 16px; width: 16px; margin-right: 4px; +} + +.openads-chat-message-source-header { + color: #666; + font-weight: 600; + font-size: 0.9em; + position: relative; +} + +.openads-chat-message-source-header-line { + position: absolute; + border-bottom: 4px solid #666; + width: 100%; + top: 0px; + line-height: 8px; + z-index: -1; } \ No newline at end of file From 4d98c4fab967bd148dd88538ee5d4eaf6b1a253d Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Wed, 2 Aug 2023 17:09:57 -0400 Subject: [PATCH 07/14] make source open in new window, handle "enter" in textarea --- assets/js/openads-chat.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 10aefb62d..78f63ee92 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -81,10 +81,16 @@
- ${response.title} + ${response.title}
`; chatHistory.appendChild(newResponse); }; + + document.querySelector('.openads-chat-input textarea').addEventListener('keypress', ev => { + if (ev.code === 'Enter') { + window.submitOpenAdsMessage(); + } + }); })(); \ No newline at end of file From cb2d4e649dba81a0a671503d55bb96ddf68b4b2b Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Fri, 4 Aug 2023 14:09:55 -0400 Subject: [PATCH 08/14] make chatbot bigger and fill screen on mobile --- assets/openads-chat.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/assets/openads-chat.css b/assets/openads-chat.css index 2ea900b00..3bd5925d8 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -24,7 +24,7 @@ } .openads-chat.show { - width: 320px; + width: 60vw; } .openads-chat-exit { @@ -43,6 +43,7 @@ box-sizing: border-box; height: 100%; gap: 10px; + font-size: 18px; } .openads-chat-history { @@ -90,7 +91,7 @@ color: white; font-size: 1.5em; box-sizing: border-box; - height: 1.75em; + height: 2.25em; border-radius: 4px; padding-top: 0px; cursor: pointer; @@ -138,4 +139,10 @@ top: 0px; line-height: 8px; z-index: -1; +} + +@media (max-width: 1000px) { + .openads-chat.show { + width: 100vw; + } } \ No newline at end of file From 5e91119cd47cf8ab20cfe5d8795b068b6228444e Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Fri, 4 Aug 2023 14:13:01 -0400 Subject: [PATCH 09/14] try something for mobile --- components/layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout.js b/components/layout.js index 726cb3822..7ac447436 100644 --- a/components/layout.js +++ b/components/layout.js @@ -26,7 +26,7 @@ module.exports = params => ` - + From 9f8b3bfa90ff0406c66188bd2f5597cc89b6ce4d Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Fri, 4 Aug 2023 14:25:48 -0400 Subject: [PATCH 10/14] style improvements --- assets/images/chatbot.svg | 2 ++ assets/js/openads-chat.js | 2 +- assets/openads-chat.css | 30 ++++++++++++++++++++++++- ebooks/mastering-mongoose-thankyou.html | 2 +- 4 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 assets/images/chatbot.svg diff --git a/assets/images/chatbot.svg b/assets/images/chatbot.svg new file mode 100644 index 000000000..f57045c4d --- /dev/null +++ b/assets/images/chatbot.svg @@ -0,0 +1,2 @@ + +chat-bot \ No newline at end of file diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 78f63ee92..997e9e6bc 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -4,7 +4,7 @@ const endpoint = 'https://mj-chatbot-production.up.railway.app/api/chat'; const widget = document.createElement('div'); - widget.innerText = 'Ask me anything about JavaScript'; + widget.innerHTML = '
Ask me anything about JavaScript
'; widget.classList.add('openads-widget'); widget.onclick = function() { chatWindow.classList.add('show'); diff --git a/assets/openads-chat.css b/assets/openads-chat.css index 3bd5925d8..0eb9fa57a 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -5,7 +5,9 @@ top: 50vh; padding: 1em; cursor: pointer; - width: 120px; + width: 180px; + display: flex; + gap: 10px; } .openads-chat { @@ -141,8 +143,34 @@ z-index: -1; } +.openads-chat-icon { + flex-grow: 0; + padding-top: 0.5em; +} + +.openads-chat-icon img { + height: 2em; +} + +.openads-widget-text { + flex-grow: 1; +} + @media (max-width: 1000px) { .openads-chat.show { width: 100vw; } + + .openads-widget { + position: fixed; + background-color: #f0db4f; + top: auto; + right: 10px; + bottom: 10px; + padding: 1em; + border-radius: 4px; + cursor: pointer; + width: 120px; + font-size: 0.9em; + } } \ No newline at end of file diff --git a/ebooks/mastering-mongoose-thankyou.html b/ebooks/mastering-mongoose-thankyou.html index 577461f8c..af9473776 100644 --- a/ebooks/mastering-mongoose-thankyou.html +++ b/ebooks/mastering-mongoose-thankyou.html @@ -21,7 +21,7 @@ - + From a22acb8ba787f5625541875f36a42c40ff15eb3f Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Fri, 4 Aug 2023 14:31:12 -0400 Subject: [PATCH 11/14] prevent scrolling while chat is active --- assets/js/openads-chat.js | 2 ++ assets/openads-chat.css | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 997e9e6bc..70e6ed59c 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -7,6 +7,7 @@ widget.innerHTML = '
Ask me anything about JavaScript
'; widget.classList.add('openads-widget'); widget.onclick = function() { + document.querySelector('.allwrapper').classList.add('openads-chat-fixed'); chatWindow.classList.add('show'); }; document.body.appendChild(widget); @@ -15,6 +16,7 @@ const chatExit = document.querySelector('.openads-chat-exit'); chatExit.onclick = function() { + document.querySelector('.allwrapper').classList.remove('openads-chat-fixed'); chatWindow.classList.remove('show'); }; diff --git a/assets/openads-chat.css b/assets/openads-chat.css index 0eb9fa57a..e7054ec46 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -10,6 +10,10 @@ gap: 10px; } +.openads-chat-fixed { + position: fixed; +} + .openads-chat { position: fixed; width: 0px; From 73274270a9884de0a031dddc1391bccac168a9f3 Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Fri, 4 Aug 2023 14:33:31 -0400 Subject: [PATCH 12/14] try alternative sizing --- assets/openads-chat.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/openads-chat.css b/assets/openads-chat.css index e7054ec46..39c3af517 100644 --- a/assets/openads-chat.css +++ b/assets/openads-chat.css @@ -18,7 +18,7 @@ position: fixed; width: 0px; right: 0px; - height: 100vh; + height: 100%; background-color: white; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; From a752817698f460fcab8f73a3fd85c2cce091b883 Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Wed, 11 Oct 2023 11:17:55 -0400 Subject: [PATCH 13/14] use new endpoint --- assets/js/openads-chat.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index 70e6ed59c..eedf673f6 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -1,7 +1,12 @@ (function() { 'use strict'; - const endpoint = 'https://mj-chatbot-production.up.railway.app/api/chat'; + const queryString = new URLSearchParams(window.location.search); + + const isLocalhost = window.location.hostname === 'localhost'; + const endpoint = isLocalhost ? + 'http://localhost:3000/chatbot' : + 'https://masteringjs-backend-production.up.railway.app/chatbot'; const widget = document.createElement('div'); widget.innerHTML = '
Ask me anything about JavaScript
'; @@ -24,6 +29,13 @@ const newMessageButton = document.querySelector('.openads-chat-submit'); const chatHistory = document.querySelector('.openads-chat-history'); + setTimeout(() => { + if (queryString.has('show-chatbot')) { + document.querySelector('.allwrapper').classList.add('openads-chat-fixed'); + chatWindow.classList.add('show'); + } + }, 0); + window.submitOpenAdsMessage = async function submitOpenAdsMessage() { const value = newMessageInput.value; if (!value) { @@ -49,7 +61,7 @@ let response; let error = false; try { - response = await fetch('https://mj-chatbot-production-abe0.up.railway.app/api/ping', { + response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' From 645c32d408c5705ad65f10395aa79b9a91fa655e Mon Sep 17 00:00:00 2001 From: Valeri Karpov Date: Thu, 12 Oct 2023 17:19:16 -0400 Subject: [PATCH 14/14] allow showing multiple sources --- assets/js/openads-chat.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/assets/js/openads-chat.js b/assets/js/openads-chat.js index eedf673f6..e5639dd40 100644 --- a/assets/js/openads-chat.js +++ b/assets/js/openads-chat.js @@ -79,6 +79,20 @@ const newResponse = document.createElement('div'); newResponse.classList.add('openads-chat-history-message'); + let sources; + if (response.sources) { + sources = response.sources.map(source => ` +
+ ${source.title} +
+ `).join('\n'); + } else { + sources = ` +
+ ${response.title} +
+ `; + } newResponse.innerHTML = `
@@ -94,9 +108,7 @@ Source
-
- ${response.title} -
+ ${sources} `; chatHistory.appendChild(newResponse);