templates/chatbot.html

{% 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 %}