Mini chat panel with ChatGPT that relays messages between the user and AI, along with Google search functionality and additional features
// ==UserScript==
// @name ChatGPT Mini Panel with AI Conversation and Google Search [BETA]
// @namespace http://your.domain.com
// @version 1.4.3.5
// @description Mini chat panel with ChatGPT that relays messages between the user and AI, along with Google search functionality and additional features
// @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 API key
let isGoogleSearchEnabled = true;
let chatHistory = []; // Array to store chat history
let selectedLanguage = 'en'; // Default language is English
// 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 fade in animation
function fadeIn(element) {
element.style.opacity = 0;
let opacity = 0;
const fadeInInterval = setInterval(function() {
if (opacity < 1) {
opacity += 0.1;
element.style.opacity = opacity;
} else {
clearInterval(fadeInInterval);
}
}, 50);
}
// Create fade out animation
function fadeOut(element) {
let opacity = 1;
const fadeOutInterval = setInterval(function() {
if (opacity > 0) {
opacity -= 0.1;
element.style.opacity = opacity;
} else {
clearInterval(fadeOutInterval);
element.style.display = 'none';
}
}, 50);
}
// 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;">ChatGPT</div>
<div id="chat-messages" style="max-height: 300px; 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;">
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 10px;">
<button id="send-btn" style="background-color: ${headerColor}; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px;"><i class="fas fa-paper-plane"></i> Send</button>
<button id="google-btn" style="background-color: ${headerColor}; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px;"><i class="fab fa-google"></i> Google</button>
<button id="settings-btn" style="background-color: ${headerColor}; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px;"><i class="fas fa-cog"></i> Settings</button>
</div>
<input type="file" id="file-upload" style="display: none;">
<div id="warning-message" style="color: red; font-size: 12px; padding: 10px;">Note: Some features do not work .</div>
`;
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);
// Toggle chat panel visibility when icon is clicked
chatIcon.addEventListener('click', function() {
if (chatPanel.style.display === 'none') {
chatPanel.style.display = 'block';
fadeIn(chatPanel);
// Display welcome message
displayMessage("Welcome to ChatGPT! Type your message below to start chatting.");
} else {
fadeOut(chatPanel);
}
spinIcon(); // Add spinning animation
});
// 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);
// Add message to chat history
chatHistory.push('You: ' + message);
// 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;
}
// Google search button functionality
document.getElementById('google-btn').addEventListener('click', function() {
if (isGoogleSearchEnabled) {
performGoogleSearch();
}
});
// Perform Google search
function performGoogleSearch() {
window.open('https://www.google.com/', '_blank');
}
// Settings button functionality
document.getElementById('settings-btn').addEventListener('click', function() {
const settingsPanel = document.getElementById('settings-panel');
if (settingsPanel.style.display === 'none') {
settingsPanel.style.display = 'block';
fadeIn(settingsPanel);
// Hide chat panel when settings panel is opened
chatPanel.style.display = 'none';
} else {
fadeOut(settingsPanel);
}
});
// Create settings panel
const settingsPanel = document.createElement('div');
settingsPanel.id = 'settings-panel';
settingsPanel.innerHTML = `
<div id="settings-header" style="background-color: ${headerColor}; padding: 10px; cursor: pointer; border-top-left-radius: 15px; border-top-right-radius: 15px;">Settings</div>
<div id="settings-content" style="padding: 20px; background-color: ${messageColor}; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; max-height: 300px; overflow-y: auto;">
<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="google-search">Enable Google Search:</label>
<input type="checkbox" id="google-search" checked><br><br>
<label for="api-key">API Key:</label>
<input type="text" id="api-key" placeholder="Enter your API key" style="margin-right: 10px;"><br><br>
<label for="language-select">Language:</label>
<select id="language-select">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="zh">Chinese</option>
<option value="hi">Hindi</option>
<option value="ar">Arabic</option>
<option value="fr">French</option>
<option value="ru">Russian</option>
<option value="ja">Japanese</option>
<option value="de">German</option>
<option value="pt">Portuguese</option>
</select>
<br><br>
<!-- Add more options here -->
<label for="theme-select">Theme:</label>
<select id="theme-select">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<br><br>
<label for="auto-reply">Auto-Reply:</label>
<input type="checkbox" id="auto-reply" checked><br><br>
<label for="show-typing">Show Typing Indicator:</label>
<input type="checkbox" id="show-typing" checked><br><br>
<label for="voice-input">Voice Input:</label>
<input type="checkbox" id="voice-input"><br><br>
<label for="file-upload">File Upload:</label>
<input type="checkbox" id="file-upload"><br><br>
<label for="theme-options">Theme Options:</label>
<input type="checkbox" id="theme-options"><br><br>
<label for="language-support">Language Support:</label>
<input type="checkbox" id="language-support"><br><br>
<label for="chatbot">Chatbot:</label>
<input type="checkbox" id="chatbot"><br><br>
<label for="emoji">Emoji:</label>
<input type="checkbox" id="emoji"><br><br>
<label for="video">Video:</label>
<input type="checkbox" id="video"><br><br>
<label for="pet">Pet:</label>
<input type="checkbox" id="pet"><br><br>
<!-- Add more options here -->
<button id="save-settings-btn" style="background-color: ${headerColor}; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px;">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);
// Save settings button functionality
const saveSettingsButton = document.getElementById('save-settings-btn');
saveSettingsButton.addEventListener('click', function() {
// Save settings logic 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;
isGoogleSearchEnabled = document.getElementById('google-search').checked;
selectedLanguage = document.getElementById('language-select').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
fadeOut(settingsPanel);
});
// Send button functionality
document.getElementById('send-btn').addEventListener('click', function() {
const message = document.getElementById('chat-input').value.trim();
sendMessage(message);
document.getElementById('chat-input').value = ''; // Clear input field after sending
});
// Enter key functionality for sending messages
document.getElementById('chat-input').addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
const message = this.value.trim();
sendMessage(message);
this.value = ''; // Clear input field after sending
}
});
// Auto-scrolling functionality
document.getElementById('chat-messages').addEventListener('DOMNodeInserted', function(event) {
this.scrollTop = this.scrollHeight;
});
// Typing indicator functionality
function showTypingIndicator() {
const typingIndicator = document.createElement('div');
typingIndicator.textContent = 'ChatGPT is typing...';
typingIndicator.classList.add('typing-indicator');
document.getElementById('chat-messages').appendChild(typingIndicator);
}
function hideTypingIndicator() {
const typingIndicator = document.querySelector('.typing-indicator');
if (typingIndicator) {
typingIndicator.remove();
}
}
// Timestamps functionality
function addTimestamp() {
const timestamp = new Date().toLocaleString();
return '[' + timestamp + '] ';
}
// Emojis functionality
function insertEmoji(emoji) {
document.getElementById('chat-input').value += emoji;
}
// Voice input functionality
// This feature would require additional libraries or APIs for speech recognition.
// File upload functionality
// This feature would require implementing file upload logic and handling on the server-side.
// Theme options functionality
// You can provide predefined themes and allow users to switch between them.
// Multi-language support functionality
// This feature would involve integrating translation APIs or libraries for multilingual chat support.
// Chatbot functionality
// This feature involves integrating a chatbot that responds to user queries or interacts with the user.
})();