☰

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

Per 07-04-2024. Zie de nieuwste versie.

// ==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;
    }

})();