Tamper Monkey ChatGPT script - Nov-2023-UI Adapt

gistfile1.txt

// ==UserScript==
// @name         Chat GPT Prompts
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://chat.openai.com/*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @run-at       document-idle
// @grant        none
// ==/UserScript==


/*
    Focus: Feature
    - [DONE] Link to chat.
    - [DONE] Provide a button under each comment div: store link
    - when click on link (on start), the UI:
       - scroll to that chat id
       - change border of that chat comment to bright-yellow, 2px
*/


(function() {
    'use strict';

    /**
        {
            "<comment_id>": {
                "html_element_elements": "",
                "html_element_event_listeners": "",
                "i_like_it_button_click_event_listeners": []
            },
            "events_listeners": [
                {html_ele: ..., event_name: "click", function_signature: f{}}
            ]
        }
    */
    const CACHE_comment_id_to_html_tools = {
        events_listeners: []
    };
    const masterDiv = document.createElement('div');
    document.body.appendChild(masterDiv)
    masterDiv.style.position = 'absolute'
    masterDiv.style.top = '0px';
    masterDiv.style.right = '0px';
    masterDiv.style["max-width"] = '50vw';
    masterDiv.style["max-height"] = '30vh';
    masterDiv.style["overflow-y"] = 'scroll';
    masterDiv.style['z-index'] = '9999';
    masterDiv.style['background-color'] = 'rgba(255, 20, 147, 0.5)';

    let collapsed = false;

    function scroll_to_datatest_id(data_test_id) {
        let childDivsWithDataTestId = document.querySelectorAll(`div[data-testid='${data_test_id}']`);
        let allCommentDivs = Array.from(childDivsWithDataTestId)
        allCommentDivs[0].scrollIntoView()
        allCommentDivs[0].style.border = '2px solid yellow;'
    }

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            console.log('Text successfully copied to clipboard!');
        }).catch(err => {
            console.error('Unable to copy text to clipboard:', err);
        });
    }

    function removeAllEventListeners(dbg_str) {
        for (let operation of CACHE_comment_id_to_html_tools.events_listeners) {
            operation.html_ele.removeEventListener(operation.event_name, operation.function_signature);
        }
        CACHE_comment_id_to_html_tools.events_listeners = []
        console.log("Removed Events Listener -- " + dbg_str)
    }

    function execute(dbg_str) {
        // console.log(dbg_str)

        masterDiv.innerHTML = ""
        removeAllEventListeners(dbg_str);

        // SET UP top right I_Ken_ChatGPT_Too Control board
        let masterButton = CACHE_comment_id_to_html_tools['MASTER-BUTTON']
        if (masterButton == null) {
            masterButton = document.createElement('button');
            CACHE_comment_id_to_html_tools['MASTER-BUTTON'] = masterButton;

        }
        masterButton.textContent = "Bootstrap ChatGPT"
        masterDiv.appendChild(masterButton)
        masterButton.style["background-color"] = 'pink';
        // Add click event listener to save a record into cookie. TODO: make this automatic
        const fn_signature = function(event) {
            event.preventDefault();
            execute("master Button clicked")
        }
        masterButton.addEventListener('click', fn_signature, false)

        CACHE_comment_id_to_html_tools.events_listeners.push({
            html_ele: masterButton,
            event_name: "click",
            function_signature: fn_signature
        })

        // SET UP do-collapse button
        if (collapsed) {
            // show expand
            let collapse_button = CACHE_comment_id_to_html_tools['COLLAPSE-BUTTON']
            if (collapse_button == null) {
                collapse_button = document.createElement('button');
                CACHE_comment_id_to_html_tools['COLLAPSE-BUTTON'] = collapse_button;

            }
            collapse_button.textContent = "Expand"
            masterDiv.appendChild(collapse_button)
            collapse_button.style["background-color"] = 'pink';
            collapse_button.style["margin-left"] = '20px';
            // Add click event listener to save a record into cookie. TODO: make this automatic
            const fn_signature = function(event) {
                event.preventDefault();
                collapsed = false
                execute("Expand Clicked")
            }
            collapse_button.addEventListener('click', fn_signature, false)
            CACHE_comment_id_to_html_tools.events_listeners.push({
                html_ele: collapse_button,
                event_name: "click",
                function_signature: fn_signature
            })
        } else {
            // show expand
            let collapse_button = CACHE_comment_id_to_html_tools['COLLAPSE-BUTTON']
            if (collapse_button == null) {
                collapse_button = document.createElement('button');
                CACHE_comment_id_to_html_tools['COLLAPSE-BUTTON'] = collapse_button;

            }
            collapse_button.textContent = "Collapse"
            masterDiv.appendChild(collapse_button)
            collapse_button.style["background-color"] = 'pink';
            collapse_button.style["margin-left"] = '20px';
            // Add click event listener to save a record into cookie. TODO: make this automatic
            const fn_signature = function(event) {
                event.preventDefault();
                collapsed = true
                execute("Collapse Clicked")
            }
            collapse_button.addEventListener('click', fn_signature, false)
            CACHE_comment_id_to_html_tools.events_listeners.push({
                html_ele: collapse_button,
                event_name: "click",
                function_signature: fn_signature
            })
        }

        // SET UP Buttons to control bookmark or not.
        const current_chat_id = location.pathname
        let childDivsWithDataTestId = document.querySelectorAll('div[data-testid]');
        let allCommentDivs = Array.from(childDivsWithDataTestId)

        let favorite_comments = localStorage.getItem(current_chat_id) || '[]'
        favorite_comments = JSON.parse(favorite_comments)
        favorite_comments = Array.from(new Set(favorite_comments))


        for (let commentDiv of allCommentDivs) {

            const data_test_id = commentDiv.getAttribute('data-testid')

            // Link it Button
            let link_it_button = CACHE_comment_id_to_html_tools[`#link_it_${data_test_id}`]
            if (link_it_button == null) {
                link_it_button = document.createElement('button');
                link_it_button.id = `link_it_${data_test_id}`
                CACHE_comment_id_to_html_tools[`#link_it_${data_test_id}`] = link_it_button;
            }
            commentDiv.appendChild(link_it_button);

            link_it_button.style.width = "5vw"
            link_it_button.innerHTML = "🔗"
            link_it_button.style.position = 'relative'

            // Copy link to clipboard
            const fn_signature = function(event) {
                event.preventDefault();
                const desired_link = `${location.href}?focus_on_data_test_id=${data_test_id}`
                copyToClipboard(desired_link)
            }
            link_it_button.addEventListener('click', fn_signature, false)

            CACHE_comment_id_to_html_tools.events_listeners.push({
                html_ele: link_it_button,
                event_name: "click",
                function_signature: fn_signature
            })


            // Like it Button
            let ilike_button = CACHE_comment_id_to_html_tools[`#ilike_it_${data_test_id}`]
            if (ilike_button == null) {
                ilike_button = document.createElement('button');
                ilike_button.id = `ilike_it_${data_test_id}`
                CACHE_comment_id_to_html_tools[`#ilike_it_${data_test_id}`] = ilike_button;
            }
            commentDiv.appendChild(ilike_button);

            ilike_button.style.width = "10vw"
            ilike_button.innerHTML = "Bookmark This."
            ilike_button.style.position = 'relative'
            ilike_button.style["margin-left"] = '25%';
            ilike_button.style.height = '100px';
            ilike_button.style.backgroundColor = '#000';
            ilike_button.style.color = '#CC3366';
            ilike_button.style.border = '2px solid #FFF';
            ilike_button.style.cursor = 'pointer';
            ilike_button.style.fontFamily = 'Courier New, monospace';
            ilike_button.style.textAlign = 'left';

            let alreadyFaved = favorite_comments.includes(commentDiv.getAttribute('data-testid'))
            // If the button does not exist, create and inject it
            if (alreadyFaved) {
                commentDiv.style.position = 'relative'
                ilike_button.textContent = `Already Bookmarked!!`;
                ilike_button.style.color = '#28A745';

                // "Favorited/De-Fav" Button
                const fn_signature = function(event) {
                    event.preventDefault();
                    let previousSave

                    let previousSaveSearch = localStorage.getItem(current_chat_id)
                    if (previousSaveSearch && previousSaveSearch.length > 0) {
                        previousSave = JSON.parse(previousSaveSearch)
                    } else {
                        previousSave = []
                    }
                    const found_index = previousSave.findIndex(ele => ele == data_test_id)
                    if (found_index >= 0) {
                        // console.log("removing: ", found_index, "from", previousSave)
                        previousSave.splice(found_index, 1)
                    }
                    const uniqueList = [...new Set(previousSave)];
                    localStorage.setItem(current_chat_id, JSON.stringify(uniqueList))
                    // backward compatibility. Previous version didn't store this mapping
                    localStorage.setItem(document.title, current_chat_id)
                    execute("Don't Care Clicked")
                }
                ilike_button.addEventListener('click', fn_signature, false)

                CACHE_comment_id_to_html_tools.events_listeners.push({
                    html_ele: ilike_button,
                    event_name: "click",
                    function_signature: fn_signature
                })

                // Scrollable menu item view
                const aHrefLink = document.createElement('a')
                let comment_content = commentDiv.textContent.replace("1 / 1","")
                if (comment_content.slice(0,7) == "ChatGPT") {
                    comment_content = comment_content.substr(7)
                }
                aHrefLink.textContent = "- " + comment_content.slice(0, Math.min(100, comment_content.length)) + "...";
                aHrefLink.style["background-color"] = "pink"
                aHrefLink.style.color = "#002f6c"

                const fn_signature_scrollable = function(event) {
                    event.preventDefault();
                    ilike_button.scrollIntoView(
                        {
                            behavior: "smooth",
                            block: "start",
                            inline: "start"
                        }
                    )
                };


                aHrefLink.addEventListener('click', fn_signature_scrollable, false)
                CACHE_comment_id_to_html_tools.events_listeners.push({
                    html_ele: aHrefLink,
                    event_name: "click",
                    function_signature: fn_signature_scrollable
                })

                if (!collapsed) {
                    masterDiv.appendChild(document.createElement('br'))
                    masterDiv.appendChild(aHrefLink)
                    masterDiv.appendChild(document.createElement('br'))
                }

            } else {

                commentDiv.style.position = 'relative'
                ilike_button.innerHTML = '!BookMark!';

                const fn_signature = function(event) {
                    event.preventDefault();
                    let previousSave

                    let previousSaveSearch = localStorage.getItem(current_chat_id)
                    if (previousSaveSearch && previousSaveSearch.length > 0) {
                        previousSave = JSON.parse(previousSaveSearch)
                    } else {
                        previousSave = []
                    }
                    previousSave.push(data_test_id)
                    const uniqueList = [...new Set(previousSave)];
                    localStorage.setItem(current_chat_id, JSON.stringify(uniqueList))
                    localStorage.setItem(document.title, current_chat_id)
                    execute("I Likey Clicked")
                }
                ilike_button.addEventListener('click', fn_signature, false)

                CACHE_comment_id_to_html_tools.events_listeners.push({
                    html_ele: ilike_button,
                    event_name: "click",
                    function_signature: fn_signature
                })

            }

        }


        // Set up Count-Bookmarked for chats on side menu
        var relativeListItems = document.querySelectorAll("li.relative a > div");
        for (let liElement of relativeListItems) {
            const chatTitle = liElement.textContent
            const chatId = localStorage.getItem(chatTitle)
            console.log(chatTitle, chatId)
            if (!chatId || chatId == "") {
                continue
            }

            let bookmarks = localStorage.getItem(chatId)
            console.log(chatId, bookmarks)
            if (!bookmarks || bookmarks.length == 0) {
                continue
            }
            bookmarks = JSON.parse(bookmarks)

            // Header-Menu item view
            const header_menu_helper = document.createElement('div')
            header_menu_helper.textContent = `${bookmarks.length}`
            header_menu_helper.style["background-color"] = "pink"
            header_menu_helper.style.color = "#002f6c"

            header_menu_helper.style.position = "absolute"
            header_menu_helper.style.width = "3ch"
            header_menu_helper.style.border = "1px solid black"
            header_menu_helper.style.left = "0px"
            header_menu_helper.style.top = "0px"
            header_menu_helper.style["z-index"] = "9999"

            const fn_signature_scrollable = function(event) {
                event.preventDefault();
            };
            header_menu_helper.addEventListener('click', fn_signature_scrollable, false)
            CACHE_comment_id_to_html_tools.events_listeners.push({
                html_ele: header_menu_helper,
                event_name: "click",
                function_signature: fn_signature_scrollable
            })


            liElement.parentNode.parentNode.appendChild(header_menu_helper)

        }

    }
    execute("starting of dis tool")

    if (location.search.includes("focus_on_data_test_id")) {

        const match = location.search.match(/focus_on_data_test_id=([a-zA-Z0-9\-]+)/);
        const value = match && match[1];
        if (value) {
            scroll_to_datatest_id(value)
        }
    }

  })()