Button/button2.js - backend_html-test - pr_aytipelag/DataSphere_Analytics

Button/button2.js
60 строк3 KB
AyLmao
Кнопка и её функционал фронт
14 июн 2025, 17:23
14 июн 2025, 17:231f6ae8d
document.addEventListener("DOMContentLoaded", function() {
    const chatButton = document.createElement("button");
    chatButton.id = "chatButton";
    chatButton.className = "fixed bottom-5 right-5 bg-red-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-red-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", function() {
        let message = document.getElementById("chatInput").value;
        if (message.trim() !== "") {
            addMessage(message);
            document.getElementById("chatInput").value = "";
        }
    });
});