WIP: Chatbot scaffold

docs/_includes/chatbot.html

@@ -0,0 +1,10 @@
+<div id="chatbot">
+    <div id="chatbot-typing" style="display: none;">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+    </div>
+    <div id="chatbot-messages"></div>
+    <input type="text" id="chatbot-input" placeholder="Type your message here..." />
+    <button id="chatbot-send">Send</button>
+</div>

docs/_includes/chatbot.js

@@ -0,0 +1,58 @@
+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....")
+    var newMessageDiv = document.createElement('div');
+    var messagesContainer = document.getElementById('chatbot-messages');
+    messagesContainer.appendChild(newMessageDiv);
+    displayMessage(newMessageDiv, messagesContainer,"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(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));
+
+                const {done, value} = await reader.read();
+                if (done) break;
+                console.log(new TextDecoder().decode(value));
+                displayMessage(newMessageDiv, messagesContainer, new TextDecoder().decode(value));
+                // Process each chunk of data here
+            }
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        })
+        .finally(() => {
+            // Hide typing indicator
+            document.getElementById('chatbot-typing').style.display = 'none';
+        });
+}
+
+function displayMessage(newMessageDiv,messagesContainer, message) {
+    newMessageDiv.textContent += message;
+    newMessageDiv.textContent += '\n';
+
+    // Scroll to the latest message
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}

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); }
+}
+

docs/_layouts/default.html

@@ -21,6 +21,7 @@
 
         <div class="container">
             {% include menu.html %}
+            {% include chatbot.html %}
             <article>
                 {{ content }}
             </article>
@@ -31,6 +32,7 @@
             {% include section-links.js %}
             {% include stats.js %}
             {% include search.js %}
+            {% include chatbot.js %}
         </script>
     </body>
 </html>