From 4923f4d322854e6e4d90d8c3a4693f06defd7232 Mon Sep 17 00:00:00 2001 From: sheriff Oladimeji Date: Fri, 20 Oct 2023 12:30:49 +0100 Subject: [PATCH 1/3] feat: make bot functional --- public/css/bot.css | 1 + public/pages/index.js | 102 +++++++++++++++++++++++++----------------- 2 files changed, 61 insertions(+), 42 deletions(-) diff --git a/public/css/bot.css b/public/css/bot.css index 2325352..5994a80 100644 --- a/public/css/bot.css +++ b/public/css/bot.css @@ -114,6 +114,7 @@ body { width: 100%; gap: 11rem; } + @media (min-width: 250px) and (max-width: 372px) { .msger{ width: 100%; diff --git a/public/pages/index.js b/public/pages/index.js index fbc2062..18d1fc0 100644 --- a/public/pages/index.js +++ b/public/pages/index.js @@ -1,42 +1,60 @@ -const chatForm = document.getElementById('chat-form'); - const messageInput = document.getElementById('message-input'); - const chatLog = document.getElementById('chat-log'); - - chatForm.addEventListener('submit', (event) => { - event.preventDefault(); - const message = messageInput.value; - - const messageEl = document.createElement('div'); - messageEl.className = 'message'; - messageEl.textContent = `You: ${message}`; - messageEl.style.background = ' background-color: #007BFF;' - chatLog.appendChild(messageEl); - - fetch('/chat', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ message }), - }) - .then((res) => res.json()) - .then((data) => { - const reply = data.reply; - const replyEl = document.createElement('div'); - replyEl.className = 'reply'; - replyEl.textContent = `Chatbot: ${reply}`; - chatLog.appendChild(replyEl); - chatLog.scrollTop = chatLog.scrollHeight; - }); - - messageInput.value = ''; - }); - function goBack() { - window.history.back(); - } - - function startChat() { - location.reload(); - } - - \ No newline at end of file +const chatForm = document.querySelector("#chat-form"); +const messageInput = document.getElementById("message-input"); +const chatLog = document.getElementById("chat-log"); + +chatForm.addEventListener("submit", async (event) => { + event.preventDefault(); + const message = messageInput.value; + + const messageEl = document.createElement("div"); + messageEl.className = "message right-msg"; + messageEl.textContent = `You: ${message}`; + chatLog.appendChild(messageEl); + + const response = await fetch("https://codex-a2ni.onrender.com/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ prompt: message }), + }); + + if (response.ok) { + try { + const data = await response.json(); + const parsedData = data.bot.trim(); + + const replyEl = document.createElement("div"); + replyEl.className = "msg left-msg"; + const botReply = ` +
+
+
+
BOT
+
00:00
+
+
+ ${parsedData} +
+
+ `; + replyEl.innerHTML = botReply; + chatLog.appendChild(replyEl); + + chatLog.scrollTop = chatLog.scrollHeight; + messageInput.value = ""; + } catch (error) { + console.error("Error parsing the bot response:", error); + } + } else { + console.error("Request to the API failed with status:", response.status); + } +}); + +function goBack() { + window.history.back(); +} + +function startChat() { + location.reload(); +} From 7316a3898a094bfb4126d47a2c9a4eeff1ef6484 Mon Sep 17 00:00:00 2001 From: sheriff Oladimeji Date: Fri, 20 Oct 2023 12:42:06 +0100 Subject: [PATCH 2/3] improve bot styling --- public/css/bot.css | 192 ++++++++++++++++++++++-------------------- public/pages/index.js | 4 +- 2 files changed, 102 insertions(+), 94 deletions(-) diff --git a/public/css/bot.css b/public/css/bot.css index 5994a80..9183f9a 100644 --- a/public/css/bot.css +++ b/public/css/bot.css @@ -1,137 +1,145 @@ body { - background-color: #f0f0f0; - font-family: Arial, sans-serif; + background-color: #f0f0f0; + font-family: Arial, sans-serif; } .msger { - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - max-width: 600px; - margin: 0 auto; - padding: 10px; - background-color: #fff; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); - border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + max-width: 600px; + margin: 0 auto; + padding: 10px; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + border-radius: 10px; } .msger-header { - text-align: center; - margin-bottom: 20px; + text-align: center; + margin-bottom: 20px; } .msger-header-title p { - font-size: 24px; - font-weight: bold; - margin: 0; + font-size: 24px; + font-weight: bold; + margin: 0; } .msger-chat { - flex-grow: 1; - overflow-y: auto; - padding: 10px; + flex-grow: 1; + overflow-y: auto; + padding: 10px; } .msg { - display: flex; - align-items: center; - justify-content: flex-end; - margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: flex-end; + margin-bottom: 10px; } .msg-img { - width: 40px; - height: 40px; - background-size: cover; - border-radius: 50%; - margin-right: 10px; + width: 40px; + height: 40px; + background-size: cover; + border-radius: 50%; + margin-right: 10px; +} +.msg-user { + background-color: white; + margin-block: 8px; + padding: 4px; + + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, + rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } -.msg-bubble, .message-reply { - background-color: #eeb283; - border-radius: 10px; - padding: 10px; - color: #fff; - max-width: 70%; +.msg-bubble, +.message-reply { + background-color: #eeb283; + border-radius: 10px; + padding: 10px; + color: #fff; + max-width: 70%; } .msg-info { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .msg-info-name { - font-weight: bold; + font-weight: bold; } .msger-inputarea { - display: flex; - gap: 27px; - width: 100%; - align-items: center; - padding: 10px; - background-color: #fff; - border-top: 1px solid #ddd; - border-radius: 0 0 10px 10px; + display: flex; + gap: 27px; + width: 100%; + align-items: center; + padding: 10px; + background-color: #fff; + border-top: 1px solid #ddd; + border-radius: 0 0 10px 10px; } - .msger-input { - flex-grow: 1; - padding: 10px; - border: none; - border-radius: 5px; + flex-grow: 1; + padding: 10px; + border: none; + border-radius: 5px; } .msger-send-btn { - background-color: #eeb283; - color: #fff; - border: none; - border-radius: 50%; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; + background-color: #eeb283; + color: #fff; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } .msger-send-btn:hover { - background-color:#f59349; -} -.btn{ - background-color: #eeb283; - border-radius: 1rem; - padding: 10px 20px; - margin: 10px; - font-size: 2rem; -} -#back-btn{ - display: flex; - justify-content: flex-start; - align-items: center; - width: 100%; - gap: 11rem; + background-color: #f59349; +} +.btn { + background-color: #eeb283; + border-radius: 1rem; + padding: 10px 20px; + margin: 10px; + font-size: 2rem; +} +#back-btn { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + gap: 11rem; } @media (min-width: 250px) and (max-width: 372px) { - .msger{ - width: 100%; - height: 100%; - } - .msger-inputarea{ - gap: px; - } - label{ - display: none; - } - #back-btn{ - gap: 8rem; - } + .msger { + width: 100%; + height: 100%; + } + .msger-inputarea { + gap: px; + } + label { + display: none; + } + #back-btn { + gap: 8rem; + } } @media (min-width: 372px) and (max-width: 600px) { - #back-btn{ - gap: 15rem; - } + #back-btn { + gap: 15rem; + } } diff --git a/public/pages/index.js b/public/pages/index.js index 18d1fc0..a48c51e 100644 --- a/public/pages/index.js +++ b/public/pages/index.js @@ -7,8 +7,8 @@ chatForm.addEventListener("submit", async (event) => { const message = messageInput.value; const messageEl = document.createElement("div"); - messageEl.className = "message right-msg"; - messageEl.textContent = `You: ${message}`; + messageEl.className = "message msg-user"; + messageEl.textContent = message; chatLog.appendChild(messageEl); const response = await fetch("https://codex-a2ni.onrender.com/", { From bed8a5d8952b7cfd17ee3fffd320641b64e36dfc Mon Sep 17 00:00:00 2001 From: sheriff Oladimeji Date: Fri, 20 Oct 2023 12:48:38 +0100 Subject: [PATCH 3/3] fix: fix error fetching bot response --- public/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/pages/index.js b/public/pages/index.js index a48c51e..89ca7dc 100644 --- a/public/pages/index.js +++ b/public/pages/index.js @@ -44,10 +44,10 @@ chatForm.addEventListener("submit", async (event) => { chatLog.scrollTop = chatLog.scrollHeight; messageInput.value = ""; } catch (error) { - console.error("Error parsing the bot response:", error); + console.error("Error fetching bot response:", error); } } else { - console.error("Request to the API failed with status:", response.status); + console.error("Request failed:", response.status); } });