init2

application/static/src/chat.js

@@ -0,0 +1,44 @@
+var el = document.getElementById('message-form');
+if (el) {
+    el.addEventListener("submit", function (event) {
+        console.log("submitting")
+        event.preventDefault()
+        var message = document.getElementById("message-input").value;
+        msg_html = '<div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
+        msg_html += message
+        msg_html += '</p></div>'
+        document.getElementById("messages").innerHTML += msg_html;
+        let chatWindow = document.getElementById("chat-container");
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+        document.getElementById("message-input").value = "";
+        document.getElementById("button-submit").innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i> Thinking...';
+        document.getElementById("button-submit").disabled = true;
+
+        fetch('/api/answer', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({question: message}),
+        })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                msg_html = '<div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start"><code class="text-sm">'
+                msg_html += data.answer
+                msg_html += '</code></div>'
+                document.getElementById("messages").innerHTML += msg_html;
+                let chatWindow = document.getElementById("chat-container");
+                chatWindow.scrollTop = chatWindow.scrollHeight;
+                document.getElementById("button-submit").innerHTML = 'Send';
+                document.getElementById("button-submit").disabled = false;
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                document.getElementById("button-submit").innerHTML = 'Send';
+                document.getElementById("button-submit").disabled = false;
+            });
+
+
+    });
+}

application/static/src/input.css

@@ -0,0 +1,56 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#chat-container {
+    height: 44rem;
+    background-color: white;
+    padding: 10px;
+    overflow: auto;
+}
+
+
+
+.bg-gray-200 {
+    background-color: #edf2f7;
+  }
+
+  .bg-gray-900 {
+    background-color: #1a202c;
+  }
+
+  .rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .shadow {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  }
+
+  .text-gray-700 {
+    color: #4a5568;
+  }
+
+  .text-sm {
+    font-size: 0.875rem;
+  }
+
+  .p-4 {
+    padding: 1.5rem;
+  }
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+