☰

ChatGPT Mini Panel with AI Conversation and Google Search

Mini chat panel with ChatGPT that relays messages between the user and AI, along with Google search functionality

Від 07.04.2024. Дивіться остання версія.

// ==UserScript==
// @name         ChatGPT Mini Panel with AI Conversation and Google Search
// @namespace    http://your.domain.com
// @version      0.6
// @description  Mini chat panel with ChatGPT that relays messages between the user and AI, along with Google search functionality
// @match        https://*/*
// @match        http://*/*
// @grant        GM_xmlhttpRequest
// @icon         https://img.icons8.com/nolan/77/chatgpt.png
// ==/UserScript==

(function() {
    'use strict';

    let panelColor = 'linear-gradient(135deg, #ff6ec4, #7873f5)';
    let headerColor = '#ff6ec4';
    let messageColor = '#7873f5';
    let apiKey = ''; // User's Pandorabots API key
    let isApiKeyValid = false;

    // Load Font Awesome
    const faStylesheet = document.createElement('link');
    faStylesheet.rel = 'stylesheet';
    faStylesheet.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
    document.head.appendChild(faStylesheet);

    // Create draggable icon
    const chatIcon = document.createElement('div');
    chatIcon.innerHTML = `
        <img src="https://img.icons8.com/nolan/77/chatgpt.png" alt="ChatGPT Icon" style="width: 40px; height: 40px; cursor: pointer;">
    `;
    chatIcon.style.position = 'fixed';
    chatIcon.style.bottom = '20px';
    chatIcon.style.right = '20px';
    chatIcon.style.zIndex = '9999'; // Ensure the icon stays above other elements
    document.body.appendChild(chatIcon);

    // Function to handle spinning animation
    function spinIcon() {
        chatIcon.querySelector('img').style.animation = 'spin 1s linear infinite';
        setTimeout(() => {
            chatIcon.querySelector('img').style.animation = 'none';
        }, 1000);
    }

    // Create mini chat panel
    const chatPanel = document.createElement('div');
    chatPanel.innerHTML = `
        <div id="chat-header" style="background-color: ${headerColor}; padding: 10px; cursor: pointer; border-top-left-radius: 15px; border-top-right-radius: 15px; animation: fadeInDown 0.5s;">
            <i class="fas fa-comments" style="margin-right: 10px;"></i>ChatGPT
            <i id="settings-btn" class="fas fa-cog" style="float: right; margin-left: 10px; cursor: pointer;"></i>
            <i id="help-btn" class="fas fa-question-circle" style="float: right; cursor: pointer;"></i>
            <i id="close-btn" class="fas fa-times" style="float: right; cursor: pointer;"></i>
            <i id="google-btn" class="fab fa-google" style="float: right; margin-right: 10px; cursor: pointer;"></i>
        </div>
        <div id="chat-messages" style="max-height: 120px; overflow-y: auto; padding: 20px; background-color: ${messageColor}; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"></div>
        <input type="text" id="chat-input" placeholder="Type your message..." style="width: calc(100% - 42px); padding: 10px; margin: 10px; border: 1px solid #ccc; border-radius: 5px;">
        <button id="send-btn" style="background-color: ${headerColor}; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px; animation: fadeInUp 0.5s;"><i class="fas fa-paper-plane"></i></button>
    `;
    chatPanel.style.position = 'fixed';
    chatPanel.style.bottom = '20px';
    chatPanel.style.right = '20px';
    chatPanel.style.width = '300px';
    chatPanel.style.borderRadius = '15px';
    chatPanel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
    chatPanel.style.display = 'none'; // Initially hide the panel
    chatPanel.style.zIndex = '9998'; // Ensure the panel stays above other elements but behind the icon
    document.body.appendChild(chatPanel);

    // Create help panel
    const helpPanel = document.createElement('div');
    helpPanel.innerHTML = `
        <div id="help-header" style="background-color: ${headerColor}; padding: 10px; cursor: pointer; border-top-left-radius: 15px; border-top-right-radius: 15px; animation: fadeInDown 0.5s;">Help</div>
        <div id="help-content" style="padding: 20px; background-color: ${messageColor}; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
            <p>Welcome to ChatGPT! This panel allows you to chat with ChatGPT from any website.</p>
            <p>To start chatting, simply click on the ChatGPT icon and type your message in the input field.</p>
            <p>Click on the Settings icon to customize the appearance and behavior of the chat panel.</p>
            <p>You can also click on the Google icon to perform a Google search.</p>
        </div>
    `;
    helpPanel.style.position = 'fixed';
    helpPanel.style.bottom = '20px';
    helpPanel.style.right = '20px';
    helpPanel.style.width = '300px';
    helpPanel.style.borderRadius = '15px';
    helpPanel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
    helpPanel.style.display = 'none'; // Initially hide the panel
    helpPanel.style.zIndex = '9997'; // Ensure the panel stays above other elements but behind the chat panel
    document.body.appendChild(helpPanel);

    // Create settings panel
    const settingsPanel = document.createElement('div');
    settingsPanel.innerHTML = `
        <div id="settings-header" style="background-color: ${headerColor}; padding: 10px; cursor: pointer; border-top-left-radius: 15px; border-top-right-radius: 15px; animation: fadeInDown 0.5s;">Settings</div>
        <div id="settings-content" style="padding: 20px; background-color: ${messageColor}; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
            <label for="panel-color">Panel Color:</label>
            <input type="color" id="panel-color" value="${panelColor}" style="margin-right: 10px;"><br><br>
            <label for="header-color">Header Color:</label>
            <input type="color" id="header-color" value="${headerColor}" style="margin-right: 10px;"><br><br>
            <label for="message-color">Message Color:</label>
            <input type="color" id="message-color" value="${messageColor}" style="margin-right: 10px;"><br><br>
            <label for="api-key">Pandorabots API Key:</label>
            <input type="text" id="api-key" value="${apiKey}" style="margin-right: 10px;"><br><br>
            <button id="save-settings-btn" style="background-color: ${headerColor}; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px; animation: fadeInUp 0.5s;">Save Settings</button>
        </div>
    `;
    settingsPanel.style.position = 'fixed';
    settingsPanel.style.bottom = '20px';
    settingsPanel.style.right = '20px';
    settingsPanel.style.width = '300px';
    settingsPanel.style.borderRadius = '15px';
    settingsPanel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
    settingsPanel.style.display = 'none'; // Initially hide the panel
    settingsPanel.style.zIndex = '9997'; // Ensure the panel stays above other elements but behind the chat panel
    document.body.appendChild(settingsPanel);

    // Make icon draggable
    let isDragging = false;
    let offsetX, offsetY;

    chatIcon.addEventListener('mousedown', function(e) {
        isDragging = true;
        offsetX = e.clientX - chatIcon.getBoundingClientRect().left;
        offsetY = e.clientY - chatIcon.getBoundingClientRect().top;
    });

    document.addEventListener('mousemove', function(e) {
        if (isDragging) {
            chatIcon.style.left = (e.clientX - offsetX) + 'px';
            chatIcon.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
    });

    // Toggle chat panel visibility when icon is clicked
    chatIcon.addEventListener('click', function() {
        if (chatPanel.style.display === 'none') {
            chatPanel.style.display = 'block';
            chatPanel.style.animation = 'fadeInUp 0.5s';
            // Display welcome message
            displayMessage("Welcome to ChatGPT! Type your message below to start chatting.");
        } else {
            chatPanel.style.animation = 'fadeOutDown 0.5s';
            setTimeout(() => {
                chatPanel.style.display = 'none';
            }, 500);
        }
        spinIcon(); // Add spinning animation
    });

    // Help button functionality
    document.getElementById('help-btn').addEventListener('click', function() {
        if (helpPanel.style.display === 'none') {
            helpPanel.style.display = 'block';
            helpPanel.style.animation = 'fadeInUp 0.5s';
        } else {
            helpPanel.style.animation = 'fadeOutDown 0.5s';
            setTimeout(() => {
                helpPanel.style.display = 'none';
            }, 500);
        }
    });

    // Settings button functionality
    document.getElementById('settings-btn').addEventListener('click', function() {
        if (settingsPanel.style.display === 'none') {
            settingsPanel.style.display = 'block';
            settingsPanel.style.animation = 'fadeInUp 0.5s';
            // Hide chat panel when settings panel is opened
            chatPanel.style.display = 'none';
        } else {
            settingsPanel.style.animation = 'fadeOutDown 0.5s';
            setTimeout(() => {
                settingsPanel.style.display = 'none';
            }, 500);
        }
    });

    // Close button functionality for help panel
    document.getElementById('help-header').addEventListener('click', function() {
        helpPanel.style.animation = 'fadeOutDown 0.5s';
        setTimeout(() => {
            helpPanel.style.display = 'none';
        }, 500);
    });

    // Close button functionality for settings panel
    document.getElementById('settings-header').addEventListener('click', function() {
        settingsPanel.style.animation = 'fadeOutDown 0.5s';
        setTimeout(() => {
            settingsPanel.style.display = 'none';
        }, 500);
    });

    // Close button functionality for chat panel
    document.getElementById('close-btn').addEventListener('click', function() {
        chatPanel.style.animation = 'fadeOutDown 0.5s';
        setTimeout(() => {
            chatPanel.style.display = 'none';
        }, 500);
    });

    // Save settings button functionality
    const saveSettingsButton = document.getElementById('save-settings-btn');
    saveSettingsButton.addEventListener('click', function() {
        // Save settings here
        panelColor = document.getElementById('panel-color').value;
        headerColor = document.getElementById('header-color').value;
        messageColor = document.getElementById('message-color').value;
        apiKey = document.getElementById('api-key').value;
        // Apply new colors to elements
        chatPanel.style.background = panelColor;
        document.getElementById('chat-header').style.backgroundColor = headerColor;
        document.getElementById('chat-messages').style.backgroundColor = messageColor;
        // Close settings panel
        settingsPanel.style.animation = 'fadeOutDown 0.5s';
        setTimeout(() => {
            settingsPanel.style.display = 'none';
        }, 500);
    });

    // Send button functionality
    document.getElementById('send-btn').addEventListener('click', function() {
        const messageInput = document.getElementById('chat-input').value;
        sendMessage(messageInput);
        // Clear input field after sending message
        document.getElementById('chat-input').value = '';
    });

    // Function to send message
    function sendMessage(message) {
        if (message.trim() === '') return;
        const messageDiv = document.createElement('div');
        messageDiv.textContent = 'You: ' + message;
        document.getElementById('chat-messages').appendChild(messageDiv);
        // Scroll to the bottom of the chat messages
        document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
    }

    // Display a message in the chat panel
    function displayMessage(message) {
        const messageDiv = document.createElement('div');
        messageDiv.textContent = message;
        document.getElementById('chat-messages').appendChild(messageDiv);
        // Scroll to the bottom of the chat messages
        document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
    }

})();