static/script.js - master - pr_aytipelag/DataSphere_Analytics

static/script.js
80 строк3 KB
kontrama
загружена финальная, рабочая версия сайта
19 июн 2025, 14:42
19 июн 2025, 14:424a14896
document.addEventListener("DOMContentLoaded", function() {
    const chatButton = document.createElement("button");
    chatButton.id = "chatButton";
    chatButton.className = "fixed bottom-5 right-5 bg-blue-500 text-white px-4 py-2 rounded-full shadow-lg hover:bg-green-700 transition";
    chatButton.innerHTML = "💬 Чат поддержки";
    document.body.appendChild(chatButton);

    const chatContainer = document.createElement("div");
    chatContainer.id = "chatContainer";
    chatContainer.className = "fixed bottom-5 right-5 bg-white p-4 rounded-lg shadow-lg w-80 hidden";
    chatContainer.innerHTML = `
        <h2 class="text-lg font-bold mb-2">Чат с поддержкой</h2>
        <div id="chatMessages" class="border h-40 overflow-y-auto p-2 bg-gray-100 rounded mb-2"></div>
        <textarea id="chatInput" class="w-full border rounded p-2" placeholder="Введите сообщение..."></textarea>
        <div class="flex justify-end mt-2">
            <button id="closeChat" class="px-3 py-1 bg-gray-400 text-white rounded hover:bg-gray-600 transition">Закрыть</button>
            <button id="sendMessage" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-green-700 transition">Отправить</button>
        </div>
    `;
    document.body.appendChild(chatContainer);

    function addMessage(text, isAssistant = false) {
        let chatBox = document.getElementById("chatMessages");
        let newMessage = document.createElement("div");
        newMessage.classList.add("p-2", "rounded", "mb-1", "shadow-sm");
        newMessage.textContent = text;
        
        if (isAssistant) {
            newMessage.classList.add("bg-blue-100");
        } else {
            newMessage.classList.add("bg-white");
        }
        
        chatBox.appendChild(newMessage);
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    chatButton.addEventListener("click", function() {
        document.getElementById("chatContainer").classList.remove("hidden");
        chatButton.classList.add("hidden");

        let chatBox = document.getElementById("chatMessages");
        if (chatBox.children.length === 0) {
            addMessage("Здравствуйте, я виртуальный ассистент, чем я могу помочь?", true);
        }
    });

    document.getElementById("closeChat").addEventListener("click", function() {
        document.getElementById("chatContainer").classList.add("hidden");
        chatButton.classList.remove("hidden");
    });

    document.getElementById("sendMessage").addEventListener("click", async function () {
    let message = document.getElementById("chatInput").value.trim();
    if (message !== "") {
        addMessage(message);  
        document.getElementById("chatInput").value = "";

        try {
            const response = await fetch("/api/chat", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ prompt: message })
            });

            const data = await response.json();
            if (data.answer) {
                addMessage(data.answer, true); 
            } else {
                addMessage("Извините, ответ не получен.", true);
            }
        } catch (err) {
            console.error(err);
            addMessage("Произошла ошибка при обращении к серверу.", true);
        }
    }
});
});