// ==UserScript==
// @name         Chat GPT Code Blocks Line Numbers
// @author       NWP
// @description  Adds line numbers to Chat GPT code blocks either live (as the code is generated) or lazy (once the code has finished generating). Use lazy mode for performance mode. The default mode is the live mode. Use the toggle in the Tampermonkey menu to switch between the modes.
// @namespace    https://greasyfork.org/users/877912
// @version      0.1
// @license      MIT
// @match        https://chatgpt.com/*
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==
(function() {
'use strict';
function refreshPage() {
location.reload();
}
function toggleLiveLineNumbers() {
const isLive = GM_getValue('liveLineNumbers', true);  // Default to true
GM_setValue('liveLineNumbers', !isLive);
refreshPage();
}
function registerMenu() {
GM_registerMenuCommand(
`Live line numbers: ${GM_getValue('liveLineNumbers', true) ? 'ON' : 'OFF'}`,  // Default to true
toggleLiveLineNumbers
);
}
registerMenu();
const liveLineNumbers = GM_getValue('liveLineNumbers', true);  // Default to true
function createLineNumbersElement() {
const lineNumbersElement = document.createElement('div');
lineNumbersElement.classList.add('line-numbers-inline');
lineNumbersElement.style.display = 'flex';
lineNumbersElement.style.flexDirection = 'column';
lineNumbersElement.style.paddingTop = '0.07rem';
lineNumbersElement.style.textAlign = 'right';
lineNumbersElement.style.userSelect = 'none';
lineNumbersElement.style.pointerEvents = 'none';
lineNumbersElement.style.color = '#aaa';
lineNumbersElement.style.background = '#1e1e1e';
lineNumbersElement.style.lineHeight = '1.5';
lineNumbersElement.style.zIndex = '2';
lineNumbersElement.style.position = 'sticky';
lineNumbersElement.style.left = '0';
lineNumbersElement.style.minWidth = 'auto';
lineNumbersElement.style.transform = 'none';
return lineNumbersElement;
}
function updateLineNumbers(codeBlock, lineNumbersElement) {
const lines = codeBlock.textContent.split('\n');
lineNumbersElement.innerHTML = '';
const maxLineNumber = lines.length;
const digits = maxLineNumber.toString().length;
const minWidth = `${digits}ch`;
lineNumbersElement.style.minWidth = minWidth;
codeBlock.style.paddingLeft = "1ch";
lines.forEach((_, index) => {
const lineNumber = document.createElement('div');
lineNumber.style.lineHeight = '1.5';
lineNumber.style.margin = '0';
lineNumber.style.padding = '0';
lineNumber.textContent = (index + 1).toString();
lineNumbersElement.appendChild(lineNumber);
});
}
function addLineNumbersInline(container, useLiveUpdates) {
const codeBlock = container.querySelector('code');
if (!codeBlock || container.querySelector('.line-numbers-inline')) return;
container.style.position = 'relative';
container.style.display = 'flex';
container.style.alignItems = 'flex-start';
container.style.padding = '0';
container.style.margin = '0';
container.style.overflowX = 'auto';
container.style.overflowY = 'hidden';
const lineNumbersElement = createLineNumbersElement();
container.insertBefore(lineNumbersElement, codeBlock);
if (useLiveUpdates) {
updateLineNumbers(codeBlock, lineNumbersElement);
let updateScheduled = false;
const observer = new MutationObserver(() => {
if (!updateScheduled) {
updateScheduled = true;
requestAnimationFrame(() => {
updateLineNumbers(codeBlock, lineNumbersElement);
updateScheduled = false;
});
}
});
observer.observe(codeBlock, {
childList: true,
subtree: true,
characterData: true,
});
} else {
let updateTimeout;
function debouncedUpdate() {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(() => {
updateLineNumbers(codeBlock, lineNumbersElement);
}, 500);
}
const observer = new MutationObserver(mutations => {
let shouldUpdate = false;
mutations.forEach(mutation => {
if (mutation.type === 'childList' || mutation.type === 'characterData') {
shouldUpdate = true;
}
});
if (shouldUpdate) {
debouncedUpdate();
}
});
observer.observe(codeBlock, {
childList: true,
subtree: true,
characterData: true,
});
debouncedUpdate();
}
}
function observeCodeBlocks(useLiveUpdates) {
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) {
const codeContainers = node.querySelectorAll('div.overflow-y-auto');
codeContainers.forEach(container => addLineNumbersInline(container, useLiveUpdates));
}
});
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
document.querySelectorAll('div.overflow-y-auto').forEach(container => {
addLineNumbersInline(container, useLiveUpdates);
});
}
observeCodeBlocks(liveLineNumbers);
})();