MediaWiki:ChatBot.js

/* Códigos JavaScript aqui colocados serão carregados por todos aqueles que acessarem alguma página deste wiki */

function decodeChatBot(encodedText) {
    return atob(encodedText);
}

mw.loader.using('jquery', function () {
    $(document).ready(function () {
        var myPlace = document.getElementById('tpl-example-placeholder');
        if (!myPlace) {
            console.error("Elemento tpl-example-placeholder não encontrado.");
            return;
        }

        // Criar botão inicial (💬)
        var toggleButton = document.createElement('button');
        toggleButton.innerHTML = "💬";
        toggleButton.className = "bot-toggle";
        document.body.appendChild(toggleButton);

        // Criar contêiner do chatbot (inicialmente oculto)
        var projectId = 'Y2hhdGJvdC00NDk0MTc=';
        var agentId = 'ZjY5NTQyM2MtZmRkNi00NmZlLWJhM2UtZmJlMDFjMzViZjky';
        var chatContainer = document.createElement('div');
        chatContainer.className = "bot";
        chatContainer.id = "chatbot-container";
        chatContainer.innerHTML =
            '<df-messenger ' +
            'project-id="'+decodeChatBot(projectId)+'" ' +
            'agent-id="'+decodeChatBot(agentId)+'" ' +
            'language-code="en" ' +
            'max-query-length="-1">' +
            '<df-messenger-chat chat-title="chatBot Verde"></df-messenger-chat>' +
            '</df-messenger>';

        document.body.appendChild(chatContainer);

        // Criar botão de fechar (X) dentro do chat
        var closeButton = document.createElement('button');
        closeButton.innerHTML = "✖";
        closeButton.className = "chat-close-btn";
        closeButton.style.display = "none"; // Inicialmente escondido
        chatContainer.appendChild(closeButton); // Adiciona dentro do contêiner do chat

        // Criar o script do Dialogflow e aguardar carregamento
        var script = document.createElement('script');
        script.src = "https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js";
        script.onload = function () {
            console.log("Script do Dialogflow carregado.");
        };
        document.body.appendChild(script);

        // Alternar exibição do chatbot
        toggleButton.addEventListener("click", function () {
            chatContainer.style.display = "block";
            toggleButton.style.display = "none"; // Esconde o botão de 💬 quando abrir
            closeButton.style.display = "flex"; // Exibe o botão X
        });

        // Fechar o chatbot ao clicar no botão X
        closeButton.addEventListener("click", function () {
            chatContainer.style.display = "none";
            toggleButton.style.display = "flex"; // Reexibe o botão de 💬
            closeButton.style.display = "none"; // Esconde o botão X
        });
    });
});