An aesthetic update to chatgpt-code-completer, the greasyfork script by Geetesh.Gupta

chatgpt-code-completer-X.user.js

// ==UserScript==
// @name         ChatGPT Code Completer X
// @namespace    http://zod.tf/
// @version      1.0.2
// @description  ChatGPT limits the amount of code output. So this script adds a continue button on ChatGPT webpage to continue getting the output code stream. Make sure a previous response having a code block is present to make it work.
// @author       zudsniper
// @match        https://chat.openai.com/chat
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @match             https://chat.openai.com/*
// @grant             GM_addStyle
// @grant             GM_addElement
// @grant             GM_setValue
// @grant             GM_getValue
// @run-at            document-idie
// ==/UserScript==

// & =========================== & //
//     chatGPT code completer X    //
// & =========================== & //
// !! Originally by Geetesh.Gupta !!
// https://greasyfork.org/scripts/456426-chatgpt-code-completer/code/ChatGPT%20Code%20Completer.user.js
// ---
// @zudsniper
// I am the one typing this -- I simply added some
// aesthetic updates & quality of life features such
// as a less obtrusive button, a hover tooltip, and
// some null checking.
// ---

(function() {
    'use strict';
    //
    //
    function insertButton(elem) {
        let formElemOuter = document.getElementsByTagName('form');
        if (formElemOuter === undefined || formElemOuter.length === 0) {
            console.log("Code Completer -- found no form (input) ");
            return;
        }
        let formElem = formElemOuter[0];
        if (formElem === undefined) {
            console.log("Code Completer -- form element is undefined");
            return;
        }
        // @zudsniper: this was already finding the send button... fuck
        let btnWrapper = formElem.getElementsByTagName('button')[0].parentElement;
        //let btnsParent = formElem.getElementsByTagName('button')[0].parentElement;
        if (btnWrapper === undefined) {
            console.log("Code Completer -- button parent element is undefined");
            return;
        }
        btnWrapper.insertBefore(elem, btnWrapper.nextSibling);
    }

    // @zudsniper
    // I am changing this button to an svg & moving it down with the send message button
    function createBtn() {
        let continueIcon = '<svg stroke="currentColor" fill="none" viewBox="0 0 24 24" class="h-4 w-4 mr-4" stroke-linecap="round" stroke-linejoin="round" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg"><g class=""><path d="M9 9C9 5.49997 14.5 5.5 14.5 9C14.5 11.5 12 10.9999 12 13.9999" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 18.01L12.01 17.9989" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>';
        let continueBtn = document.createElement('button');
        continueBtn.innerHTML = continueIcon;
        // continueBtn.textContent = "Continue";
        //continueBtn.setAttribute('style', 'display: flex; cursor: pointer;');
        //continueBtn.disabled = true;
        continueBtn.className = 'tooltip absolute p-1 rounded-md text-gray-300 top-0 md:top-0 bottom-0 md:bottom-0 hover:bg-transparent enabled:dark:hover:text-gray-400 dark:hover:bg-transparent disabled:hover:bg-transparent dark:disabled:hover:bg-transparent right-6 md:right-12 disabled:opacity-40';
        continueBtn.setAttribute('style', 'padding-top: 0.5rem;');
        // tooltip for the button
        let tooltip = document.createElement('span');
        tooltip.className = 'tooltiptext';
        tooltip.innerHTML = 'ask ChatGPT to continue where it left off <b>automatically</b>!';
        continueBtn.appendChild(tooltip);
        //continueBtn.className = "h-4 w-4 mr-1";
        //continueBtn.className = 'btn flex gap-2 justify-center btn-neutral';
        return continueBtn;
    }

    // adds CSS for tooltip, then adds tooltip
    function initTooltipCSS() {
         GM_addStyle(`
.tooltip {
  display: inline-block;
}

.tooltiptext {
  font-style: italic;
  font-size: 0.7rem;
  min-width: 7rem;
  margin-right: 2rem;
  text-align: left;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 99;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
}

.tooltip:hover .tooltiptext {
  visibility: visible !important;
}
`);
    }
    function getPrevNodeValues() {
        let codeBlocks = document.querySelectorAll('code.hljs');
        let lastCodeBlock = codeBlocks[codeBlocks.length - 1];
        let children = lastCodeBlock.innerText.split("\n")
        let res = "";
        for (let i=children.length-1; i>=0 && res.trim().length < 20; i--) {
            res += children[i];
        }
        return res;
    }

    function updateTextArea(value) {
        document.getElementsByTagName('textarea')[0].value = value
    }

    function main() {

        const btn = createBtn();
        insertButton(btn);
        initTooltipCSS();
        btn.onclick = () => {
            try {
                updateTextArea("what is the remaining part of the previous code? It ended at " + getPrevNodeValues());
            } catch (error) {
                console.log("Some error occured. Possible reasons:- Previous ChatGPT response does not include any code block or Website structure changed. The actual error: ", error)
            }
        }

    }

    main();

})();