Your Friendly ChatBot

<script>
    var inputMessage = document.getElementById("inputMessage");
    var sendMessage = document.getElementById("sendMessage");
    var chatbox = document.getElementById("chatbox");

    sendMessage.addEventListener("click", function() {
        var message = inputMessage.value;
        if (message.trim() !== "") {
            sendMessageToChat(message, "user");
            inputMessage.value = "";

            fetchResponse(message)
                .then(response => {
                    sendMessageToChat(response, "assistant");
                })
                .catch(error => {
                    console.error("Error fetching response:", error);
                    sendMessageToChat("Sorry, I'm having trouble understanding you right now.", "assistant");
                });
        }
    });

    function sendMessageToChat(message, role) {
        var messageElement = document.createElement("div");
        messageElement.classList.add("chat-bubble", role === "user" ? "chat-bubble-primary" : "chat-bubble-secondary");
        messageElement.innerHTML = "<p><strong>" + role + ":</strong> " + message + "</p>";
        chatbox.appendChild(messageElement);
        chatbox.scrollTop = chatbox.scrollHeight;
    }

    async function fetchResponse(message) {
        const response = await fetch(
            "https://api-inference.huggingface.co/models/google/flan-t5-xxl",
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer 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" 
                },
                body: JSON.stringify({
                    inputs: message,
                }),
            }
        );

        if (!response.ok) {
            throw new Error("Request failed with status " + response.status);
        }

        const data = await response.json();
        return data[0].generated_text; 
    }
</script>