☰

ChatGPT Enhanced Interface

It enhances the ChatGPT interface and will not send the message unless the button is pushed. This allows the user to type multiple lines in a message without being interrupted when hitting the Enter key. The submit button is colored white until it is selected and turns green. This indicates that it is active and at that point pressing the space bar or enter should activate the button and submit the prompt to ChatGPT.

目前为 2023-12-16 提交的版本。查看 最新版本。

// ==UserScript==
// @name         ChatGPT Enhanced Interface
// @namespace    https://github.com/lundeen-bryan
// @version      1.0.0
// @description  It enhances the ChatGPT interface and will not send the message unless the button is pushed. This allows the user to type multiple lines in a message without being interrupted when hitting the Enter key. The submit button is colored white until it is selected and turns green. This indicates that it is active and at that point pressing the space bar or enter should activate the button and submit the prompt to ChatGPT.
// @author       lundeen-bryan
// @match        https://chat.openai.com/*
// @noframes     true
// @license      GPL
// ==/UserScript==

(function() {
    'use strict';

    /**
     * Functionality for Ctrl+Enter and Enter
     * @param {KeyboardEvent} event
     */
    function handleKeyPress(event) {
        const inputBox = document.querySelector('textarea');
        if (event.key === 'Enter' && !event.metaKey && inputBox) {
            event.stopPropagation();
        }
    }

    // Override the enter key to allow multiple lines
    function overrideEnterKey() {
        const inputBox = document.querySelector('textarea');
        if (inputBox) {
            inputBox.removeEventListener('keydown', handleKeyPress, true);
            inputBox.addEventListener('keydown', handleKeyPress, true);
        }
    }

    // Observer for eky press to override the enter key
    const observerForKeyPress = new MutationObserver(overrideEnterKey);
    observerForKeyPress.observe(document, { childList: true, subtree: true });

    // Style for focused button and arrow
    const style = document.createElement('style');
    style.textContent = `
        .focused-gizmo {
            background-color: #19c37d !important; /* New button color */
        }
        .focused-gizmo svg {
            color: white !important; /* New arrow color */
        }
    `;
    document.head.appendChild(style);

    /**
     * Functionality for changing button color on focus
     * @param {FocusEvent} event
     */
    function toggleFocusStyle(event) {
        const button = document.querySelector('[data-testid="send-button"]');
        if (event.type === 'focus') {
            button.classList.add('focused-gizmo');
        } else if (event.type === 'blur') {
            button.classList.remove('focused-gizmo');
        }
    }

    // Adds listener for button focus to change color
    function addButtonFocusListener() {
        const button = document.querySelector('[data-testid="send-button"]');
        if (button) {
            button.addEventListener('focus', toggleFocusStyle, {once: true});
            button.addEventListener('blur', toggleFocusStyle, {once: true});
        }
    }

    // Observer for button focus to change color
    const observerForButtonFocus = new MutationObserver(addButtonFocusListener);
    observerForButtonFocus.observe(document.body, { childList: true, subtree: true });
})();