alexchexes · November 8, 2024 15:48 · alexchexes · May 17, 2024 · dievilz · Sep 12, 2024
diff --git a/chatgpt_ui_fix.user.js b/chatgpt_ui_fix.user.js
 // ==UserScript==
 // @name         ChatGPT CSS fixes
 // @version      2024-11-08
 // @updateURL    https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
 // @downloadURL  https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
 // @namespace    http://tampermonkey.net/
 // @description  Adjusts width of side bar and messages of the ChatGPT web interface
 // @author       alexchexes
 // @match        https://chat.openai.com/*
 // @match        https://chatgpt.com/*
 // @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
 // @grant        GM_addStyle
 // ==/UserScript==

 /* global GM_addStyle */

 console.info('%c\'ChatGPT CSS fixes\' userscript is connected', 'color: #8ff; background: #000');

 (function() {
 	const accentForDark = `#f39c12`;

 	const defaultSettings = {
 		/* CHAT ELEMENTS */

 		chatWidth: {
 			enabled: true,
 			maxWidth: `90%`,
 		},

 		codeBlockFont: {
 			enabled: true,
 			fontFamily: `Consolas`,
 		},

 		codeBlockBackground: {
 			enabled: true,
 			bgColorDark: `#181818`,
 			// bgColorLight: `#252525`,
 		},

 		codeBlockLineBreaks: { enabled: true },
 		codeBlocksInUserMessages: { enabled: true },

 		userMessageVisibility: {
 			enabled: true,
 			backgroundDark: `linear-gradient(45deg, #3c4b83, #343a79)`,
 			backgroundLight: `#c1d6f6`,
 		},

 		botAvatarVisibility: { enabled: true },

 		/* TOP BAR */

 		topBarTransparency: { enabled: true },

 		gptVersionVisibility: {
 			enabled: true,
 			color: accentForDark,
 		},

 		/* SIDEBAR */

 		sidebarWidth: {
 			enabled: true,
 			sidebarWidth: `330px`,
 		},
 		sidebarHeadingsVisibility: {
 			enabled: true,
 			color: accentForDark,
 		},
 		multilineHistoryTitles: {
 			enabled: true,
 		},
 	};

 	const constructFeaturesCss = () => {
 		const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style*="260px"]`;
 	
 		const cssByFeature = {
 			/*------------------------------*
 			*         CHAT ELEMENTS         *
 			*-------------------------------*/
 			
 			/* Main chat section width */
 			chatWidth: `
 				@media (min-width: 1280px) {
 					.xl\\:max-w-3xl {
 						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
 					}
 				}
 				@media (min-width: 1024px) {
 					.lg\\:max-w-\\[38rem\\] {
 						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
 					}
 				}
 				@media (min-width: 768px) {
 					.md\\:max-w-2xl {
 						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
 					}
 					.md\\:max-w-3xl {
 						max-width: ${defaultSettings.chatWidth.maxWidth} !important;
 					}
 				}
 			`,
 	
 			/* Code blocks font */
 			codeBlockFont: `
 				code, pre {
 					font-family: ${defaultSettings.codeBlockFont.fontFamily}, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
 				}
 			`,
 	
 			/* Code blocks background color */
 			codeBlockBackground: `
 				/* DARK */
 				html.dark pre > div.rounded-md {
 					background-color: ${defaultSettings.codeBlockBackground.bgColorDark};
 				}
 			`,
 	
 			/* Break lines in code blocks */
 			codeBlockLineBreaks: `
 				code, code.\\!whitespace-pre {
 					white-space: pre-wrap !important;
 				}
 			`,
 	
 			/* Code blocks inside user messages */
 			codeBlocksInUserMessages: `
 				/* inline code */
 				[data-message-author-role="user"] div > code {
 					background: #00000030;
 					border-radius: 11px;
 					padding: 2px 5px;
 				}

 				/* multiline code blocks */
 				[data-message-author-role="user"] pre {
 					background: #00000030;
 					padding: 2px 7px;
 					border-radius: 11px;
 				}

 				/* multiline code blocks FONT SIZE */
 				[data-message-author-role="user"] pre > code {
 					font-size: 14px;
 				}
 			`,
 				
 			/* Make our messages more visible. */
 			userMessageVisibility: `
 				/* DARK */
 				html.dark [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .bg-token-message-surface {
 					background: ${defaultSettings.userMessageVisibility.backgroundDark};
 				}
 	
 				/* LIGHT */
 				html.light [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .bg-token-message-surface {
 					background: ${defaultSettings.userMessageVisibility.backgroundLight};
 				}
 			`,
 	
 			/* Make bot message start more visible by increasing visibility of its avatar. */
 			botAvatarVisibility: `
 				/* DARK */
 				html.dark .gizmo-bot-avatar > div {
 					background: linear-gradient(45deg, #3F51B5, #00BCD4);
 				}
 				html.dark .gizmo-bot-avatar {
 					outline: none;
 				}
 				
 				/* LIGHT */
 				html.light .gizmo-bot-avatar > div {
 					background: #252525;
 					color: #ffffff;
 				}
 			`,
 	
 			/*----------------*
 			*     TOP BAR     *
 			*-----------------*/
 			
 			/* Make top bar transparent as it consumes vertical space for no reason */
 			topBarTransparency: `
 				html div.sticky.top-0.flex.items-center.justify-between.z-10.font-semibold {
 					background-color: rgba(0,0,0,0);
 				}
 	
 				/* Background for top bar element that shows the current GPT version */
 				/* DARK */
 				html.dark .sticky.top-0 [type="button"]:not(:hover) {
 					background-color: #0000001f;
 					border-radius: 8px;
 				}
 				/* LIGHT */
 				html.light .sticky.top-0 [type="button"]:not(:hover) {
 					background-color: #ffffffb0;
 					border-radius: 8px;
 				}
 			`,
 	
 			/* GPT version visibility */
 			gptVersionVisibility: `
 				/* DARK */
 				html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-secondary {
 					color: ${defaultSettings.gptVersionVisibility.color};
 				}
 				/* LIGHT */
 				html.light .sticky.top-0 [type="button"] > div > span.text-token-text-secondary {
 					color: #000;
 				}
 			`,
 	
 			/*------------------*
 			*      SIDEBAR      *
 			*-------------------*/
 	
 			/* Sidebar width */
 			sidebarWidth: `
 				@media not all and (max-width: 768px) {
 					${sidebar_container_selector},
 					${sidebar_container_selector} .w-\\[260px\\] {
 						width: ${defaultSettings.sidebarWidth.sidebarWidth} !important;
 					}
 				}
 			`,
 			
 			/* History periods headings (like "Today", "Yesterday") visibility */
 			sidebarHeadingsVisibility: `
 				/* DARK */
 				html.dark ${sidebar_container_selector} h3 {
 					color: ${defaultSettings.sidebarHeadingsVisibility.color};
 				}
 	
 				/* LIGHT */
 				html.light ${sidebar_container_selector} h3 {
 					font-weight: 700;
 				}
 			`,

 			multilineHistoryTitles: `
 				ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap {
 					overflow: visible;
 					white-space: unset;
 				}
 				ol > li:not(:hover) > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent {
 					background-image: none;
 				}
 			`,
 	
 		};

 		// Adding a unique string to find our <style> element later
 		let cssStyles = `/* USERSCRIPT_FEATURES_STYLES */`;
 		
 		// Combine feature CSS blocks into a single CSS string if enabled in the current settings
 		for (let key in cssByFeature) {
 			if (Object.prototype.hasOwnProperty.call(cssByFeature, key)) {
 				if (typeof defaultSettings[key] !== 'undefined' && defaultSettings[key].enabled) {
 					cssStyles += cssByFeature[key] + '\n';
 				}
 			}
 		}
 	
 		cssStyles = cssStyles.replaceAll("\t", ' ');
 		return cssStyles;
 	};

 	const renderFeaturesStyles = () => {
 		const css = constructFeaturesCss();
 		GM_addStyle(css);
 	};

 	/* Stub for the later feature update */
 	// const removeFeaturesStyles = () => {
 	// 	let style_elements = document.querySelectorAll('style');

 	// 	style_elements.forEach(style_el => {
 	// 		if (style_el.innerHTML.includes('USERSCRIPT_FEATURES_STYLES')) {
 	// 			style_el.remove();
 	// 		}
 	// 	});
 	// };

 	renderFeaturesStyles();
 })();
	// ==UserScript==
	// @name ChatGPT CSS fixes
	// @version 2024-11-08
	// @updateURL https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
	// @downloadURL https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js
	// @namespace http://tampermonkey.net/
	// @description Adjusts width of side bar and messages of the ChatGPT web interface
	// @author alexchexes
	// @match https://chat.openai.com/*
	// @match https://chatgpt.com/*
	// @icon https://www.google.com/s2/favicons?sz=64&domain=openai.com
	// @grant GM_addStyle
	// ==/UserScript==

	/* global GM_addStyle */

	console.info('%c\'ChatGPT CSS fixes\' userscript is connected', 'color: #8ff; background: #000');

	(function() {
	const accentForDark = `#f39c12`;

	const defaultSettings = {
	/* CHAT ELEMENTS */

	chatWidth: {
	enabled: true,
	maxWidth: `90%`,
	},

	codeBlockFont: {
	enabled: true,
	fontFamily: `Consolas`,
	},

	codeBlockBackground: {
	enabled: true,
	bgColorDark: `#181818`,
	// bgColorLight: `#252525`,
	},

	codeBlockLineBreaks: { enabled: true },
	codeBlocksInUserMessages: { enabled: true },

	userMessageVisibility: {
	enabled: true,
	backgroundDark: `linear-gradient(45deg, #3c4b83, #343a79)`,
	backgroundLight: `#c1d6f6`,
	},

	botAvatarVisibility: { enabled: true },

	/* TOP BAR */

	topBarTransparency: { enabled: true },

	gptVersionVisibility: {
	enabled: true,
	color: accentForDark,
	},

	/* SIDEBAR */

	sidebarWidth: {
	enabled: true,
	sidebarWidth: `330px`,
	},
	sidebarHeadingsVisibility: {
	enabled: true,
	color: accentForDark,
	},
	multilineHistoryTitles: {
	enabled: true,
	},
	};

	const constructFeaturesCss = () => {
	const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style*="260px"]`;

	const cssByFeature = {
	/------------------------------
	* CHAT ELEMENTS *
	-------------------------------/

	/* Main chat section width */
	chatWidth: `
	@media (min-width: 1280px) {
	.xl\\:max-w-3xl {
	max-width: ${defaultSettings.chatWidth.maxWidth} !important;
	}
	}
	@media (min-width: 1024px) {
	.lg\\:max-w-\\[38rem\\] {
	max-width: ${defaultSettings.chatWidth.maxWidth} !important;
	}
	}
	@media (min-width: 768px) {
	.md\\:max-w-2xl {
	max-width: ${defaultSettings.chatWidth.maxWidth} !important;
	}
	.md\\:max-w-3xl {
	max-width: ${defaultSettings.chatWidth.maxWidth} !important;
	}
	}
	`,

	/* Code blocks font */
	codeBlockFont: `
	code, pre {
	font-family: ${defaultSettings.codeBlockFont.fontFamily}, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
	}
	`,

	/* Code blocks background color */
	codeBlockBackground: `
	/* DARK */
	html.dark pre > div.rounded-md {
	background-color: ${defaultSettings.codeBlockBackground.bgColorDark};
	}
	`,

	/* Break lines in code blocks */
	codeBlockLineBreaks: `
	code, code.\\!whitespace-pre {
	white-space: pre-wrap !important;
	}
	`,

	/* Code blocks inside user messages */
	codeBlocksInUserMessages: `
	/* inline code */
	[data-message-author-role="user"] div > code {
	background: #00000030;
	border-radius: 11px;
	padding: 2px 5px;
	}

	/* multiline code blocks */
	[data-message-author-role="user"] pre {
	background: #00000030;
	padding: 2px 7px;
	border-radius: 11px;
	}

	/* multiline code blocks FONT SIZE */
	[data-message-author-role="user"] pre > code {
	font-size: 14px;
	}
	`,

	/* Make our messages more visible. */
	userMessageVisibility: `
	/* DARK */
	html.dark [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .bg-token-message-surface {
	background: ${defaultSettings.userMessageVisibility.backgroundDark};
	}

	/* LIGHT */
	html.light [data-message-author-role="user"].text-message > .flex.w-full.flex-col > .bg-token-message-surface {
	background: ${defaultSettings.userMessageVisibility.backgroundLight};
	}
	`,

	/* Make bot message start more visible by increasing visibility of its avatar. */
	botAvatarVisibility: `
	/* DARK */
	html.dark .gizmo-bot-avatar > div {
	background: linear-gradient(45deg, #3F51B5, #00BCD4);
	}
	html.dark .gizmo-bot-avatar {
	outline: none;
	}

	/* LIGHT */
	html.light .gizmo-bot-avatar > div {
	background: #252525;
	color: #ffffff;
	}
	`,

	/----------------
	* TOP BAR *
	-----------------/

	/* Make top bar transparent as it consumes vertical space for no reason */
	topBarTransparency: `
	html div.sticky.top-0.flex.items-center.justify-between.z-10.font-semibold {
	background-color: rgba(0,0,0,0);
	}

	/* Background for top bar element that shows the current GPT version */
	/* DARK */
	html.dark .sticky.top-0 [type="button"]:not(:hover) {
	background-color: #0000001f;
	border-radius: 8px;
	}
	/* LIGHT */
	html.light .sticky.top-0 [type="button"]:not(:hover) {
	background-color: #ffffffb0;
	border-radius: 8px;
	}
	`,

	/* GPT version visibility */
	gptVersionVisibility: `
	/* DARK */
	html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-secondary {
	color: ${defaultSettings.gptVersionVisibility.color};
	}
	/* LIGHT */
	html.light .sticky.top-0 [type="button"] > div > span.text-token-text-secondary {
	color: #000;
	}
	`,

	/------------------
	* SIDEBAR *
	-------------------/

	/* Sidebar width */
	sidebarWidth: `
	@media not all and (max-width: 768px) {
	${sidebar_container_selector},
	${sidebar_container_selector} .w-\\[260px\\] {
	width: ${defaultSettings.sidebarWidth.sidebarWidth} !important;
	}
	}
	`,

	/* History periods headings (like "Today", "Yesterday") visibility */
	sidebarHeadingsVisibility: `
	/* DARK */
	html.dark ${sidebar_container_selector} h3 {
	color: ${defaultSettings.sidebarHeadingsVisibility.color};
	}

	/* LIGHT */
	html.light ${sidebar_container_selector} h3 {
	font-weight: 700;
	}
	`,

	multilineHistoryTitles: `
	ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap {
	overflow: visible;
	white-space: unset;
	}
	ol > li:not(:hover) > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent {
	background-image: none;
	}
	`,

	};

	// Adding a unique string to find our <style> element later
	let cssStyles = `/* USERSCRIPT_FEATURES_STYLES */`;

	// Combine feature CSS blocks into a single CSS string if enabled in the current settings
	for (let key in cssByFeature) {
	if (Object.prototype.hasOwnProperty.call(cssByFeature, key)) {
	if (typeof defaultSettings[key] !== 'undefined' && defaultSettings[key].enabled) {
	cssStyles += cssByFeature[key] + '\n';
	}
	}
	}

	cssStyles = cssStyles.replaceAll("\t", ' ');
	return cssStyles;
	};

	const renderFeaturesStyles = () => {
	const css = constructFeaturesCss();
	GM_addStyle(css);
	};

	/* Stub for the later feature update */
	// const removeFeaturesStyles = () => {
	// let style_elements = document.querySelectorAll('style');

	// style_elements.forEach(style_el => {
	// if (style_el.innerHTML.includes('USERSCRIPT_FEATURES_STYLES')) {
	// style_el.remove();
	// }
	// });
	// };

	renderFeaturesStyles();
	})();