Create chatbot.html

templates/chatbot.html

@@ -0,0 +1,109 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="text-2xl font-bold text-gray-800">
+    Welcome to NeuroML 🚀
+</div>
+
+<p class="mt-4 text-gray-600">
+    Ask anything about Machine Learning using the chat button.
+</p>
+
+<!-- ================= CHAT BUTTON ================= -->
+<button id="chat-btn"
+class="fixed bottom-6 right-6 bg-indigo-600 text-white w-14 h-14 rounded-full shadow-xl text-xl z-50">
+🤖
+</button>
+
+<!-- ================= CHAT BOX ================= -->
+<div id="chat-box"
+class="hidden fixed bottom-24 right-6 w-80 bg-white rounded-xl shadow-2xl border z-50">
+
+    <div class="p-3 bg-indigo-600 text-white rounded-t-xl font-semibold">
+        Qwen ML Tutor
+    </div>
+
+    <div id="chat-messages"
+         class="p-3 h-64 overflow-y-auto text-sm space-y-2">
+    </div>
+
+    <div class="p-3 flex gap-2 border-t">
+        <input id="chat-input"
+               class="border flex-1 p-2 rounded text-sm"
+               placeholder="Ask ML question..." />
+        <button id="send-btn"
+                class="bg-indigo-600 text-white px-4 rounded">
+            Send
+        </button>
+    </div>
+</div>
+
+<!-- ================= CHAT SCRIPT ================= -->
+<script>
+    const chatBtn = document.getElementById("chat-btn");
+    const chatBox = document.getElementById("chat-box");
+    const sendBtn = document.getElementById("send-btn");
+    const input = document.getElementById("chat-input");
+    const messages = document.getElementById("chat-messages");
+
+    chatBtn.addEventListener("click", () => {
+        chatBox.classList.toggle("hidden");
+    });
+
+    sendBtn.addEventListener("click", sendMessage);
+
+    input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+            sendMessage();
+        }
+    });
+
+    function addMessage(text, sender) {
+        const div = document.createElement("div");
+
+        if (sender === "user") {
+            div.className = "text-right";
+            div.innerHTML = `
+                <span class="inline-block bg-indigo-500 text-white px-3 py-2 rounded-lg max-w-[85%]">
+                    ${text}
+                </span>
+            `;
+        } else {
+            div.className = "text-left";
+            div.innerHTML = `
+                <span class="inline-block bg-gray-200 text-gray-800 px-3 py-2 rounded-lg max-w-[85%]">
+                    ${text}
+                </span>
+            `;
+        }
+
+        messages.appendChild(div);
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    async function sendMessage() {
+        const text = input.value.trim();
+        if (!text) return;
+
+        addMessage(text, "user");
+        input.value = "";
+
+        try {
+            const response = await fetch("/chat", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({ message: text })
+            });
+
+            const data = await response.json();
+            addMessage(data.reply, "bot");
+
+        } catch (error) {
+            addMessage("Server error. Please try again.", "bot");
+        }
+    }
+</script>
+
+{% endblock %}