From 3c01f256e39bde281a8642bed6abde6ba2828ad4 Mon Sep 17 00:00:00 2001 From: Bruno Oliveira Date: Tue, 16 Jan 2024 14:19:25 +0100 Subject: [PATCH 1/3] WIP: Chatbot scaffold --- docs/_includes/chatbot.html | 10 +++++++ docs/_includes/chatbot.js | 44 +++++++++++++++++++++++++++++++ docs/_includes/stylesheet.css | 49 +++++++++++++++++++++++++++++++++++ docs/_layouts/default.html | 2 ++ 4 files changed, 105 insertions(+) create mode 100644 docs/_includes/chatbot.html create mode 100644 docs/_includes/chatbot.js diff --git a/docs/_includes/chatbot.html b/docs/_includes/chatbot.html new file mode 100644 index 00000000..606b1a45 --- /dev/null +++ b/docs/_includes/chatbot.html @@ -0,0 +1,10 @@ +
+ +
+ + +
diff --git a/docs/_includes/chatbot.js b/docs/_includes/chatbot.js new file mode 100644 index 00000000..605e6ef9 --- /dev/null +++ b/docs/_includes/chatbot.js @@ -0,0 +1,44 @@ +document.getElementById('chatbot-send').addEventListener('click', function() { + var userInput = document.getElementById('chatbot-input').value; + if (userInput.trim() !== '') { + sendMessageToServer(userInput); + document.getElementById('chatbot-input').value = ''; + } +}); + +function sendMessageToServer(message) { + console.log("Sending....") + displayMessage("User: "+message); + // Show typing indicator + document.getElementById('chatbot-typing').style.display = 'block'; + // Example POST request with Fetch API + fetch('http://127.0.0.1:8000/chat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ message: message, history: [] }), + }) + .then(response => response.json()) + .then(data => { + console.log(data); + displayMessage("SigridBot: "+data.reply); + }) + .catch((error) => { + console.error('Error:', error); + }) + .finally(() => { + // Hide typing indicator + document.getElementById('chatbot-typing').style.display = 'none'; + }); +} + +function displayMessage(message) { + var messagesContainer = document.getElementById('chatbot-messages'); + var newMessageDiv = document.createElement('div'); + newMessageDiv.textContent = message; + messagesContainer.appendChild(newMessageDiv); + + // Scroll to the latest message + messagesContainer.scrollTop = messagesContainer.scrollHeight; +} diff --git a/docs/_includes/stylesheet.css b/docs/_includes/stylesheet.css index 9783cf3d..8f86a062 100644 --- a/docs/_includes/stylesheet.css +++ b/docs/_includes/stylesheet.css @@ -291,3 +291,52 @@ sig-toc .h4 { .awesomplete .visually-hidden { display: none; } + +#chatbot { + position: fixed; + bottom: 10px; + right: 10px; + width: 300px; + background-color: white; + border: 1px solid #ddd; + border-radius: 5px; + padding: 10px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); +} + +#chatbot-messages { + height: 280px; + overflow-y: auto; + margin-bottom: 10px; +} + +#chatbot-input { + width: calc(100% - 70px); +} + +#chatbot-send { + width: 50px; +} + +#chatbot-typing { + text-align: center; +} + +.dot { + height: 10px; + width: 10px; + margin: 0 2px; + background-color: #333; + border-radius: 50%; + display: inline-block; + animation: typing 1.4s infinite ease-in-out; +} + +.dot:nth-child(1) { animation-delay: -0.32s; } +.dot:nth-child(2) { animation-delay: -0.16s; } + +@keyframes typing { + 0%, 80%, 100% { transform: scale(0); } + 40% { transform: scale(1.0); } +} + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 29ee1089..5975b9c2 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -21,6 +21,7 @@
{% include menu.html %} + {% include chatbot.html %}
{{ content }}
@@ -31,6 +32,7 @@ {% include section-links.js %} {% include stats.js %} {% include search.js %} + {% include chatbot.js %} From bab15103eeb8b2e0b722ebb630ca9e7884dc62bc Mon Sep 17 00:00:00 2001 From: Bruno Oliveira Date: Wed, 17 Jan 2024 16:28:02 +0100 Subject: [PATCH 2/3] WIP: Enable streaming --- docs/_includes/chatbot.js | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/docs/_includes/chatbot.js b/docs/_includes/chatbot.js index 605e6ef9..729d5e0b 100644 --- a/docs/_includes/chatbot.js +++ b/docs/_includes/chatbot.js @@ -8,7 +8,11 @@ document.getElementById('chatbot-send').addEventListener('click', function() { function sendMessageToServer(message) { console.log("Sending....") - displayMessage("User: "+message); + var newMessageDiv = document.createElement('div'); + var messagesContainer = document.getElementById('chatbot-messages'); + messagesContainer.appendChild(newMessageDiv); + displayMessage(newMessageDiv, "User: "+message); + // Show typing indicator document.getElementById('chatbot-typing').style.display = 'block'; // Example POST request with Fetch API @@ -19,10 +23,17 @@ function sendMessageToServer(message) { }, body: JSON.stringify({ message: message, history: [] }), }) - .then(response => response.json()) - .then(data => { - console.log(data); - displayMessage("SigridBot: "+data.reply); + .then(async response => { + const reader = response.body.getReader(); + while (true) { + await new Promise(resolve => setTimeout(resolve, 80)); + + const {done, value} = await reader.read(); + if (done) break; + console.log(new TextDecoder().decode(value)); + displayMessage(newMessageDiv, new TextDecoder().decode(value)); + // Process each chunk of data here + } }) .catch((error) => { console.error('Error:', error); @@ -33,12 +44,9 @@ function sendMessageToServer(message) { }); } -function displayMessage(message) { - var messagesContainer = document.getElementById('chatbot-messages'); - var newMessageDiv = document.createElement('div'); - newMessageDiv.textContent = message; - messagesContainer.appendChild(newMessageDiv); +function displayMessage(newMessageDiv, message) { + newMessageDiv.textContent += message; // Scroll to the latest message - messagesContainer.scrollTop = messagesContainer.scrollHeight; + //messagesContainer.scrollTop = messagesContainer.scrollHeight; } From 440e4c709af0b40adb443f2b44257f0e6533b209 Mon Sep 17 00:00:00 2001 From: Bruno Oliveira Date: Wed, 17 Jan 2024 17:28:22 +0100 Subject: [PATCH 3/3] WIP: Enable streaming --- docs/_includes/chatbot.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/_includes/chatbot.js b/docs/_includes/chatbot.js index 729d5e0b..2b05ce44 100644 --- a/docs/_includes/chatbot.js +++ b/docs/_includes/chatbot.js @@ -11,7 +11,7 @@ function sendMessageToServer(message) { var newMessageDiv = document.createElement('div'); var messagesContainer = document.getElementById('chatbot-messages'); messagesContainer.appendChild(newMessageDiv); - displayMessage(newMessageDiv, "User: "+message); + displayMessage(newMessageDiv, messagesContainer,"User: "+message); // Show typing indicator document.getElementById('chatbot-typing').style.display = 'block'; @@ -24,6 +24,11 @@ function sendMessageToServer(message) { body: JSON.stringify({ message: message, history: [] }), }) .then(async response => { + var newMessageDiv = document.createElement('div'); + var messagesContainer = document.getElementById('chatbot-messages'); + messagesContainer.appendChild(newMessageDiv); + displayMessage(newMessageDiv, messagesContainer,"SigridBot: "); + const reader = response.body.getReader(); while (true) { await new Promise(resolve => setTimeout(resolve, 80)); @@ -31,7 +36,7 @@ function sendMessageToServer(message) { const {done, value} = await reader.read(); if (done) break; console.log(new TextDecoder().decode(value)); - displayMessage(newMessageDiv, new TextDecoder().decode(value)); + displayMessage(newMessageDiv, messagesContainer, new TextDecoder().decode(value)); // Process each chunk of data here } }) @@ -44,9 +49,10 @@ function sendMessageToServer(message) { }); } -function displayMessage(newMessageDiv, message) { +function displayMessage(newMessageDiv,messagesContainer, message) { newMessageDiv.textContent += message; + newMessageDiv.textContent += '\n'; // Scroll to the latest message - //messagesContainer.scrollTop = messagesContainer.scrollHeight; + messagesContainer.scrollTop = messagesContainer.scrollHeight; }