Spaces:

Adieee5
/

ajnjdnjpek

Running

File size: 9,316 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>University Assistant</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet"
        href="{{ url_for('static', filename='style.css') }}">
    <!-- <link rel="stylesheet" href="../static/style.css"> -->

    <script>
        tailwind.config = {
            darkMode: 'class',
        };
    </script>
</head>

<body class="bg-zinc-100 text-black dark:bg-slate-950 dark:text-white flex items-center justify-center min-h-screen">
    <div
        class="flex w-full flex-col overflow-hidden  border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg h-screen relative">
        <!-- Theme Toggle Icon -->
        <button id="theme-toggle"
            class="absolute top-2 right-2 z-20 flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-black dark:text-white shadow transition-all"
            title="Toggle Theme">
            🌓
        </button>

        <div class="flex flex-col flex-grow overflow-hidden">
            <div id="chat-container" class="flex-grow overflow-y-auto p-3 space-y-3 bg-zinc-100 dark:bg-slate-950">
                <!-- Chat messages will appear here -->
            </div>
            <div class="border-t p-2 border-gray-300 dark:border-slate-800">
                <div class="flex gap-2">
                    <input id="chat-input"
                        class="flex-grow rounded-md border border-gray-300 dark:border-slate-800 bg-white dark:bg-slate-800 px-3 py-1 text-sm text-black dark:text-white focus:outline-none"
                        type="text" placeholder="Type your question here..." />
                    <button id="send-button" class="rounded-md bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">
                        ➤
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const toggleButton = document.getElementById("theme-toggle");
        toggleButton.addEventListener("click", () => {
            document.documentElement.classList.toggle("dark");

            // Optional: save preference
            if (document.documentElement.classList.contains("dark")) {
                localStorage.setItem("theme", "dark");
            } else {
                localStorage.setItem("theme", "light");
            }
        });

        // Optional: load theme from localStorage
        if (localStorage.getItem("theme") === "dark") {
            document.documentElement.classList.add("dark");
        }

        const API_BASE_URL = window.location.origin;

        const chatContainer = document.getElementById("chat-container");
        const chatInput = document.getElementById("chat-input");
        const sendButton = document.getElementById("send-button");

        const initialMessage = {
            id: "1",
            text: "Hello! I'm the JUIT University Assistant. How can I help you today? !(The first message may take 10-15s to load)",
            isUser: false,
        };

        let messages = [initialMessage];
        let isTyping = false;

        function renderMessages() {
            chatContainer.innerHTML = "";
            messages.forEach((msg) => {
                const bubble = document.createElement("div");
                bubble.className = `flex items-start gap-2 ${msg.isUser ? "flex-row-reverse" : "flex-row"}`;
                const avatar = document.createElement("img");
                avatar.className = "h-9 w-9 rounded-full object-cover";

                // Use complete URLs for images
                const baseUrl = window.location.origin;
                avatar.src = msg.isUser ? `${baseUrl}/static/profile.png` : `${baseUrl}/static/JUIT_icon.png`;
                // avatar.src = msg.isUser ? `../static/profile.png` : `../static/JUIT_icon.png`;
                avatar.alt = msg.isUser ? "" : "";

                avatar.onerror = function () {
                    // Fallback if image fails to load
                    this.src = msg.isUser ?
                        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230ea5e9'/%3E%3C/svg%3E" :
                        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23475569'/%3E%3C/svg%3E";
                };

                const msgDiv = document.createElement("div");
                msgDiv.className = `max-w-[75%] break-words rounded-md px-3 py-1 text-sm ${
                    msg.isUser
                        ? "bg-blue-600 text-white rounded-tr-none"
                        : "bg-gray-200 text-black light:bg-gray-700 light:text-white rounded-tl-none"
                }`;
                msgDiv.innerText = msg.text;
                bubble.appendChild(avatar);
                bubble.appendChild(msgDiv);
                chatContainer.appendChild(bubble);
            });
            if (isTyping) {
                const typing = document.createElement("div");
                typing.className = "flex items-start gap-2";
                typing.innerHTML = `
                    <img src="../static/JUIT_icon.png" alt="Bot" class="h-9 w-9 rounded-full object-cover" />
                    <div class="max-w-[75%] rounded-md rounded-tl-none bg-gray-200 light:bg-gray-700 px-3 py-1 text-sm">
                    <div class="dot-typing text-black light:text-white">
                        <span>.</span><span>.</span><span>.</span>
                    </div>
                    </div>
                `;
                chatContainer.appendChild(typing);
            }

            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        async function simulateBotResponse(userInput) {
            try {
                const response = await fetch(`${API_BASE_URL}/get`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        message: userInput
                    }),
                });

                if (!response.ok) {
                    const errorText = await response.text();
                    throw new Error(`API error (${response.status}): ${errorText}`);
                }

                const data = await response.json();
                if (data.error) throw new Error(data.error);

                return data.response;
            } catch (error) {
                console.error("Error fetching response:", error);
                throw error;
            }
        }

        async function handleSendMessage() {
            const text = chatInput.value.trim();
            if (!text || isTyping) return;

            const userMessage = {
                id: Date.now().toString(),
                text,
                isUser: true,
            };

            messages.push(userMessage);
            chatInput.value = "";
            isTyping = true;

            // Render messages, including typing animation
            renderMessages();

            // Add typing animation (". . .")
            const typingMessage = {
                id: "typing",
                text: ". . .", // Use animated dots here
                isUser: false,
            };
            messages.push(typingMessage);

            try {
                const res = await simulateBotResponse(text);

                // Remove typing animation once response is received
                messages.pop(); // Removes the ". . ." animation message

                const botMessage = {
                    id: (Date.now() + 1).toString(),
                    text: res.response,
                    isUser: false,
                };
                messages.push(botMessage);
            } catch (error) {
                // Remove typing animation if there's an error
                messages.pop(); // Removes the ". . ." animation message

                messages.push({
                    id: Date.now().toString(),
                    text: `Error: ${error.message || "Failed to get response. Please try again."}`,
                    isUser: false,
                });
            }

            isTyping = false;
            renderMessages();
        }

        // Check server health on page load
        async function checkServerHealth() {
            try {
                const response = await fetch(`${API_BASE_URL}/health`);
                if (!response.ok) {
                    console.warn("Server health check failed");
                }
            } catch (error) {
                console.error("Server health check error:", error);
            }
        }

        sendButton.addEventListener("click", handleSendMessage);
        chatInput.addEventListener("keydown", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                handleSendMessage();
            }
        });

        // Initialize
        renderMessages();
        checkServerHealth();
    </script>
</body>

</html>