☰

Perplexity helper

Simple script that adds buttons to Perplexity website for repeating request using Copilot.

  1. // ==UserScript==
  2. // @name        Perplexity helper
  3. // @namespace   Tiartyos
  4. // @match       https://www.perplexity.ai/*
  5. // @grant       none
  6. // @version     7.0
  7. // @author      Tiartyos, monnef
  8. // @description Simple script that adds buttons to Perplexity website for repeating request using Copilot.
  9. // @require     https://code.jquery.com/jquery-3.6.0.min.js
  10. // @require     https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js
  11. // @require     https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js
  12. // @require     https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js
  13. // @require     https://cdn.jsdelivr.net/npm/color2k@2.0.2/dist/index.unpkg.umd.js
  14. // @require     https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js
  15. // @require     https://cdnjs.cloudflare.com/ajax/libs/jsondiffpatch/0.4.1/jsondiffpatch.umd.min.js
  16. // @require     https://cdn.jsdelivr.net/npm/hex-to-css-filter@6.0.0/dist/umd/hex-to-css-filter.min.js
  17. // @require     https://cdn.jsdelivr.net/npm/perplex-plus@0.0.57/dist/lib/perplex-plus.js
  18. // @homepageURL https://www.perplexity.ai/
  19. // @license     GPL-3.0-or-later
  20. // ==/UserScript==
  21.  
  22. const PP = window.PP.noConflict();
  23. const jq = PP.jq;
  24. const hexToCssFilter = window.HexToCSSFilter.hexToCSSFilter;
  25.  
  26. const $c = (cls, parent) => jq(`.${cls}`, parent);
  27. const $i = (id, parent) => jq(`#${id}`, parent);
  28. const classNames = (...args) => args.filter(Boolean).join(' ');
  29.  
  30. const takeStr = n => str => str.slice(0, n);
  31. const dropStr = n => str => str.slice(n);
  32. const dropRightStr = n => str => str.slice(0, -n);
  33. const filter = pred => xs => xs.filter(pred);
  34. const pipe = x => (...fns) => fns.reduce((acc, fn) => fn(acc), x);
  35.  
  36. const nl = '\n';
  37. const markdownConverter = new showdown.Converter({ tables: true });
  38.  
  39. let debugMode = false;
  40. const enableDebugMode = () => {
  41.   debugMode = true;
  42. };
  43.  
  44. const userscriptName = 'Perplexity helper';
  45. const logPrefix = `[${userscriptName}]`;
  46.  
  47. const debugLog = (...args) => {
  48.   if (debugMode) {
  49.     console.debug(logPrefix, ...args);
  50.   }
  51. };
  52.  
  53. let debugTags = false;
  54. const debugLogTags = (...args) => {
  55.   if (debugTags) {
  56.     console.debug(logPrefix, '[tags]', ...args);
  57.   }
  58. };
  59.  
  60. let debugModalCreation = false;
  61. const logModalCreation = (...args) => {
  62.   if (debugModalCreation) {
  63.     console.debug(logPrefix, '[modalCreation]', ...args);
  64.   }
  65. }
  66.  
  67. let debugReplaceIconsInMenu = false;
  68. const logReplaceIconsInMenu = (...args) => {
  69.   if (debugReplaceIconsInMenu) {
  70.     console.debug(logPrefix, '[replaceIconsInMenu]', ...args);
  71.   }
  72. }
  73.  
  74. const log = (...args) => {
  75.   console.log(logPrefix, ...args);
  76. };
  77.  
  78. const logError = (...args) => {
  79.   console.error(logPrefix, ...args);
  80. };
  81.  
  82. const enableTagsDebugging = () => {
  83.   debugTags = true;
  84. };
  85.  
  86. // Throttled debug logging to prevent spam
  87. // Stores unique message-parameter combinations for 60 seconds
  88. const debugLogThrottleCache = new Map();
  89. const THROTTLE_WINDOW_MS = 60000; // 60 seconds
  90.  
  91. const debugLogThrottled = (message, params = {}) => {
  92.   if (!debugMode) return;
  93.  
  94.   const now = Date.now();
  95.   const messageKey = message;
  96.  
  97.   // Get or create message cache
  98.   if (!debugLogThrottleCache.has(messageKey)) {
  99.     debugLogThrottleCache.set(messageKey, new Map());
  100.   }
  101.  
  102.   const messageCache = debugLogThrottleCache.get(messageKey);
  103.  
  104.   // Create a key for the parameters using deep comparison
  105.   const paramsKey = JSON.stringify(params, Object.keys(params).sort());
  106.  
  107.   // Check if we've seen this exact combination recently
  108.   if (messageCache.has(paramsKey)) {
  109.     const lastLogged = messageCache.get(paramsKey);
  110.     if (now - lastLogged < THROTTLE_WINDOW_MS) {
  111.       return; // Skip logging, too recent
  112.     }
  113.   }
  114.  
  115.   // Log the message and update cache
  116.   console.debug(logPrefix, '[throttled]', message, params);
  117.   messageCache.set(paramsKey, now);
  118.  
  119.   // Clean up old entries (optional optimization)
  120.   if (messageCache.size > 100) { // Prevent memory bloat
  121.     const cutoff = now - THROTTLE_WINDOW_MS;
  122.     for (const [key, timestamp] of messageCache.entries()) {
  123.       if (timestamp < cutoff) {
  124.         messageCache.delete(key);
  125.       }
  126.     }
  127.   }
  128. };
  129.  
  130. ($ => {
  131.   $.fn.nthParent = function (n) {
  132.     let $p = $(this);
  133.     if (!(n > -0)) { return $(); }
  134.     let p = 1 + n;
  135.     while (p--) { $p = $p.parent(); }
  136.     return $p;
  137.   };
  138. })(jq);
  139.  
  140.  
  141. const initializePerplexityHelperHandlers = () => {
  142.   // Register the condition checker
  143.   PP.registerShouldBlockEnterHandler($wrapper => hasActiveToggledTagsForCurrentContext($wrapper));
  144.  
  145.   // Register the handler for blocked enter key
  146.   PP.registerBlockedEnterHandler(async ($textarea, $wrapper) => {
  147.     // Flash the textarea indicator
  148.     $textarea.removeClass(pulseFocusCls);
  149.     $textarea.get(0).offsetHeight; // Force reflow
  150.     $textarea.addClass(pulseFocusCls);
  151.     setTimeout(() => $textarea.removeClass(pulseFocusCls), 400);
  152.  
  153.     // Apply toggled tags
  154.     await applyToggledTagsOnSubmit($wrapper);
  155.     await sleep(500);
  156.  
  157.     // Find and click submit button
  158.     const $submitBtn = getSubmitButtonAnyExceptMic($wrapper);
  159.     if ($submitBtn.length) {
  160.       logEventHooks('blockedEnterInPromptAreaHandler: Clicking submit button after toggle tags', { $submitBtn, ariaLabel: $submitBtn.attr('aria-label'), dataTestId: $submitBtn.attr('data-testid') });
  161.       $submitBtn.click();
  162.     } else {
  163.       logEventHooks('blockedEnterInPromptAreaHandler: No submit button found');
  164.     }
  165.   });
  166. };
  167.  
  168.  
  169.  
  170. // unpkg had quite often problems, tens of seconds to load, sometime 503 fails
  171. // const getLucideIconUrl = iconName => `https://unpkg.com/lucide-static@latest/icons/${iconName}.svg`;
  172. const getLucideIconUrl = (iconName) => `https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/${iconName}.svg`;
  173.  
  174. const getBrandIconInfo = (modelName = '', { preferBaseModelCompany = false } = {}) => {
  175.   const normalizedModelName = modelName.toLowerCase();
  176.   
  177.   // Try to get data from perplex-plus ModelDescriptor first
  178.   try {
  179.     const modelDescriptor = PP?.findModelDescriptorByName?.(modelName);
  180.     if (modelDescriptor) {
  181.       // Determine which company and color to use based on preferBaseModelCompany setting
  182.       const useBaseModel = preferBaseModelCompany && modelDescriptor.baseModelCompany;
  183.       const company = useBaseModel ? modelDescriptor.baseModelCompany : modelDescriptor.company;
  184.       const companyColor = useBaseModel ? modelDescriptor.baseModelCompanyColor : modelDescriptor.companyColor;
  185.       
  186.       // Map company names to icon names
  187.       const companyToIcon = {
  188.         'perplexity': 'perplexity',
  189.         'openai': 'openai', 
  190.         'anthropic': 'claude',
  191.         'google': 'gemini',
  192.         'xai': 'xai',
  193.         'deepseek': 'deepseek',
  194.         'meta': 'meta'
  195.       };
  196.       
  197.       const iconName = companyToIcon[company];
  198.       // debugLog('getBrandIconInfo: Found icon for model', { modelName, preferBaseModelCompany, iconName, companyColor, modelDescriptor });
  199.       if (iconName && companyColor) {
  200.         return { iconName, brandColor: companyColor };
  201.       }
  202.     }
  203.   } catch (error) {
  204.     // Fallback to original logic if perplex-plus data is not available
  205.   }
  206.  
  207.   debugLogThrottled(`getBrandIconInfo: No icon found for model. modelName = ${modelName}, preferBaseModelCompany = ${preferBaseModelCompany}`);
  208.  
  209.   // Original fallback logic
  210.   if (normalizedModelName.includes('claude')) {
  211.     return { iconName: 'claude', brandColor: '#D97757' };
  212.   } else if (normalizedModelName.includes('gpt') || normalizedModelName.startsWith('o')) {
  213.     return { iconName: 'openai', brandColor: '#FFFFFF' };
  214.   } else if (normalizedModelName.includes('gemini')) {
  215.     return { iconName: 'gemini', brandColor: '#1C69FF' };
  216.   } else if (normalizedModelName.includes('sonar') || normalizedModelName.includes('best') || normalizedModelName.includes('auto')) {
  217.     return preferBaseModelCompany ? { iconName: 'meta', brandColor: '#1D65C1' } : { iconName: 'perplexity', brandColor: '#22B8CD' };
  218.   } else if (normalizedModelName.includes('r1')) {
  219.     return preferBaseModelCompany ? { iconName: 'deepseek', brandColor: '#4D6BFE' } : { iconName: 'perplexity', brandColor: '#22B8CD' };
  220.   } else if (normalizedModelName.includes('grok')) {
  221.     return { iconName: 'xai', brandColor: '#FFFFFF' };
  222.   } else if (normalizedModelName.includes('llama') || normalizedModelName.includes('meta')) {
  223.     return { iconName: 'meta', brandColor: '#1D65C1' };
  224.   } else if (normalizedModelName.includes('anthropic')) {
  225.     return { iconName: 'anthropic', brandColor: '#F1F0E8' };
  226.   }
  227.  
  228.   return null;
  229. };
  230.  
  231. const getTDesignIconUrl = iconName => `https://api.iconify.design/tdesign:${iconName}.svg`;
  232.  
  233. const getLobeIconsUrl = iconName => `https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/${iconName}.svg`;
  234.  
  235. const parseIconName = iconName => {
  236.   if (!iconName.includes(':')) return { typePrefix: 'l', processedIconName: iconName };
  237.   const [typePrefix, processedIconName] = iconName.split(':');
  238.   return { typePrefix, processedIconName };
  239. };
  240.  
  241. const getIconUrl = iconName => {
  242.   const { typePrefix, processedIconName } = parseIconName(iconName);
  243.   if (typePrefix === 'td') {
  244.     return getTDesignIconUrl(processedIconName);
  245.   }
  246.   if (typePrefix === 'l') {
  247.     return getLucideIconUrl(processedIconName);
  248.   }
  249.   throw new Error(`Unknown icon type: ${typePrefix}`);
  250. };
  251.  
  252. const pplxHelperTag = 'pplx-helper';
  253. const genCssName = x => `${pplxHelperTag}--${x}`;
  254.  
  255. const button = (id, icoName, title, extraClass) => `<button title="${title}" type="button" id="${id}" class="btn-helper bg-super dark:bg-superDark dark:text-backgroundDark text-white hover:opacity-80 font-sans focus:outline-none outline-none outline-transparent transition duration-300 ease-in-out font-sans  select-none items-center relative group  justify-center text-center items-center rounded-full cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-base aspect-square h-10 ${extraClass}"  >
  256. <div class="flex items-center leading-none justify-center gap-xs">
  257.     ${icoName}
  258. </div></button>`;
  259.  
  260. const upperButton = (id, icoName, title) => `
  261. <div title="${title}" id="${id}" class="border rounded-full px-sm py-xs flex items-center gap-x-sm  border-borderMain/60 dark:border-borderMainDark/60 divide-borderMain dark:divide-borderMainDark ring-borderMain dark:ring-borderMainDark  bg-transparent cursor-pointer"><div class="border-borderMain/60 dark:border-borderMainDark/60 divide-borderMain dark:divide-borderMainDark ring-borderMain dark:ring-borderMainDark  bg-transparent"><div class="flex items-center gap-x-xs transition duration-300 select-none hover:text-superAlt light font-sans text-sm font-medium text-textOff dark:text-textOffDark selection:bg-super selection:text-white dark:selection:bg-opacity-50 selection:bg-opacity-70"><div class="">${icoName}<path fill="currentColor" d="M64 288L39.8 263.8C14.3 238.3 0 203.8 0 167.8C0 92.8 60.8 32 135.8 32c36 0 70.5 14.3 96 39.8L256 96l24.2-24.2c25.5-25.5 60-39.8 96-39.8C451.2 32 512 92.8 512 167.8c0 36-14.3 70.5-39.8 96L448 288 256 480 64 288z"></path></svg></div><div></div></div></div></div>
  262. `;
  263.  
  264. const textButton = (id, text, title) => `
  265. <button title="${title}" id="${id}" type="button" class="bg-super text-white hover:opacity-80 font-sans focus:outline-none outline-none transition duration-300 ease-in-out font-sans  select-none items-center relative group justify-center rounded-md cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-sm px-sm font-medium h-8">
  266. <div class="flex items-center leading-none justify-center gap-xs"><span class="flex items-center relative ">${text}</span></div></button>
  267. `;
  268. const icoColor = '#1F1F1F';
  269. const robotIco = `<svg style="width: 23px; fill: ${icoColor};" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="m32 224h32v192h-32a31.96166 31.96166 0 0 1 -32-32v-128a31.96166 31.96166 0 0 1 32-32zm512-48v272a64.06328 64.06328 0 0 1 -64 64h-320a64.06328 64.06328 0 0 1 -64-64v-272a79.974 79.974 0 0 1 80-80h112v-64a32 32 0 0 1 64 0v64h112a79.974 79.974 0 0 1 80 80zm-280 80a40 40 0 1 0 -40 40 39.997 39.997 0 0 0 40-40zm-8 128h-64v32h64zm96 0h-64v32h64zm104-128a40 40 0 1 0 -40 40 39.997 39.997 0 0 0 40-40zm-8 128h-64v32h64zm192-128v128a31.96166 31.96166 0 0 1 -32 32h-32v-192h32a31.96166 31.96166 0 0 1 32 32z"/></svg>`;
  270. const robotRepeatIco = `<svg style="width: 23px; fill: ${icoColor};"  viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">    <path d="M442.179,325.051L442.179,459.979C442.151,488.506 418.685,511.972 390.158,512L130.053,512C101.525,511.972 78.06,488.506 78.032,459.979L78.032,238.868C78.032,203.208 107.376,173.863 143.037,173.863L234.095,173.863L234.095,121.842C234.095,107.573 245.836,95.832 260.105,95.832C274.374,95.832 286.116,107.573 286.116,121.842L286.116,173.863L309.247,173.863C321.515,245.71 373.724,304.005 442.179,325.051ZM26.011,277.905L52.021,277.905L52.021,433.968L25.979,433.968C11.727,433.968 -0,422.241 -0,407.989L-0,303.885C-0,289.633 11.727,277.905 25.979,277.905L26.011,277.905ZM468.19,331.092C478.118,332.676 488.289,333.497 498.65,333.497C505.935,333.497 513.126,333.091 520.211,332.299L520.211,407.989C520.211,422.241 508.483,433.968 494.231,433.968L468.19,433.968L468.19,331.092ZM208.084,407.958L156.063,407.958L156.063,433.968L208.084,433.968L208.084,407.958ZM286.116,407.958L234.095,407.958L234.095,433.968L286.116,433.968L286.116,407.958ZM364.147,407.958L312.126,407.958L312.126,433.968L364.147,433.968L364.147,407.958ZM214.587,303.916C214.587,286.08 199.91,271.403 182.074,271.403C164.238,271.403 149.561,286.08 149.561,303.916C149.561,321.752 164.238,336.429 182.074,336.429C182.075,336.429 182.075,336.429 182.076,336.429C199.911,336.429 214.587,321.753 214.587,303.918C214.587,303.917 214.587,303.917 214.587,303.916ZM370.65,303.916C370.65,286.08 355.973,271.403 338.137,271.403C320.301,271.403 305.624,286.08 305.624,303.916C305.624,321.752 320.301,336.429 338.137,336.429C338.138,336.429 338.139,336.429 338.139,336.429C355.974,336.429 370.65,321.753 370.65,303.918C370.65,303.917 370.65,303.917 370.65,303.916Z" style="fill-rule:nonzero;"/>
  271.     <g transform="matrix(14.135,0,0,14.135,329.029,-28.2701)">
  272.         <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM17.19,15.94C17.15,16.03 17.1,16.11 17.03,16.18L15.34,17.87C15.19,18.02 15,18.09 14.81,18.09C14.62,18.09 14.43,18.02 14.28,17.87C13.99,17.58 13.99,17.1 14.28,16.81L14.69,16.4L9.1,16.4C7.8,16.4 6.75,15.34 6.75,14.05L6.75,12.28C6.75,11.87 7.09,11.53 7.5,11.53C7.91,11.53 8.25,11.87 8.25,12.28L8.25,14.05C8.25,14.52 8.63,14.9 9.1,14.9L14.69,14.9L14.28,14.49C13.99,14.2 13.99,13.72 14.28,13.43C14.57,13.14 15.05,13.14 15.34,13.43L17.03,15.12C17.1,15.19 17.15,15.27 17.19,15.36C17.27,15.55 17.27,15.76 17.19,15.94ZM17.25,11.72C17.25,12.13 16.91,12.47 16.5,12.47C16.09,12.47 15.75,12.13 15.75,11.72L15.75,9.95C15.75,9.48 15.37,9.1 14.9,9.1L9.31,9.1L9.72,9.5C10.01,9.79 10.01,10.27 9.72,10.56C9.57,10.71 9.38,10.78 9.19,10.78C9,10.78 8.81,10.71 8.66,10.56L6.97,8.87C6.9,8.8 6.85,8.72 6.81,8.63C6.73,8.45 6.73,8.24 6.81,8.06C6.85,7.97 6.9,7.88 6.97,7.81L8.66,6.12C8.95,5.83 9.43,5.83 9.72,6.12C10.01,6.41 10.01,6.89 9.72,7.18L9.31,7.59L14.9,7.59C16.2,7.59 17.25,8.65 17.25,9.94L17.25,11.72Z" style="fill-rule:nonzero;"/>
  273.     </g></svg>`;
  274.  
  275. const cogIco = `<svg style="width: 23px; fill: rgb(141, 145, 145);" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 38.297 38.297"
  276. \t xml:space="preserve">
  277. <g>
  278. \t<path d="M25.311,18.136l2.039-2.041l-2.492-2.492l-2.039,2.041c-1.355-0.98-2.941-1.654-4.664-1.934v-2.882H14.63v2.883
  279. \t\tc-1.722,0.278-3.308,0.953-4.662,1.934l-2.041-2.041l-2.492,2.492l2.041,2.041c-0.98,1.354-1.656,2.941-1.937,4.662H2.658v3.523
  280. \t\tH5.54c0.279,1.723,0.955,3.309,1.937,4.664l-2.041,2.039l2.492,2.492l2.041-2.039c1.354,0.979,2.94,1.653,4.662,1.936v2.883h3.524
  281. \t\tv-2.883c1.723-0.279,3.309-0.955,4.664-1.936l2.039,2.039l2.492-2.492l-2.039-2.039c0.98-1.355,1.654-2.941,1.934-4.664h2.885
  282. \t\tv-3.524h-2.885C26.967,21.078,26.293,19.492,25.311,18.136z M16.393,30.869c-3.479,0-6.309-2.83-6.309-6.307
  283. \t\tc0-3.479,2.83-6.308,6.309-6.308c3.479,0,6.307,2.828,6.307,6.308C22.699,28.039,19.871,30.869,16.393,30.869z M35.639,8.113v-2.35
  284. \t\th-0.965c-0.16-0.809-0.474-1.561-0.918-2.221l0.682-0.683l-1.664-1.66l-0.68,0.683c-0.658-0.445-1.41-0.76-2.217-0.918V0h-2.351
  285. \t\tv0.965c-0.81,0.158-1.562,0.473-2.219,0.918L24.625,1.2l-1.662,1.66l0.683,0.683c-0.445,0.66-0.761,1.412-0.918,2.221h-0.966v2.35
  286. \t\th0.966c0.157,0.807,0.473,1.559,0.918,2.217l-0.681,0.68l1.658,1.664l0.685-0.682c0.657,0.443,1.409,0.758,2.219,0.916v0.967h2.351
  287. \t\tv-0.968c0.807-0.158,1.559-0.473,2.217-0.916l0.682,0.68l1.662-1.66l-0.682-0.682c0.444-0.658,0.758-1.41,0.918-2.217H35.639
  288. \t\tL35.639,8.113z M28.701,10.677c-2.062,0-3.74-1.678-3.74-3.74c0-2.064,1.679-3.742,3.74-3.742c2.064,0,3.742,1.678,3.742,3.742
  289. \t\tC32.443,9,30.766,10.677,28.701,10.677z"/>
  290. </g>
  291. </svg>`;
  292.  
  293.  
  294. const perplexityHelperModalId = 'perplexityHelperModal';
  295. const getPerplexityHelperModal = () => $i(perplexityHelperModalId);
  296.  
  297. const modalSettingsTitleCls = genCssName('modal-settings-title');
  298.  
  299. const gitlabLogo = classes => `
  300. <svg class="${classes}" fill="#000000" width="800px" height="800px" viewBox="0 0 512 512" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"><path d="M494.07,281.6l-25.18-78.08a11,11,0,0,0-.61-2.1L417.78,44.48a20.08,20.08,0,0,0-19.17-13.82A19.77,19.77,0,0,0,379.66,44.6L331.52,194.15h-152L131.34,44.59a19.76,19.76,0,0,0-18.86-13.94h-.11a20.15,20.15,0,0,0-19.12,14L42.7,201.73c0,.14-.11.26-.16.4L16.91,281.61a29.15,29.15,0,0,0,10.44,32.46L248.79,476.48a11.25,11.25,0,0,0,13.38-.07L483.65,314.07a29.13,29.13,0,0,0,10.42-32.47m-331-64.51L224.8,408.85,76.63,217.09m209.64,191.8,59.19-183.84,2.55-8h86.52L300.47,390.44M398.8,59.31l43.37,134.83H355.35M324.16,217l-43,133.58L255.5,430.14,186.94,217M112.27,59.31l43.46,134.83H69M40.68,295.58a6.19,6.19,0,0,1-2.21-6.9l19-59L197.08,410.27M470.34,295.58,313.92,410.22l.52-.69L453.5,229.64l19,59a6.2,6.2,0,0,1-2.19,6.92"/></svg>
  301. `;
  302.  
  303. const modalLargeIconAnchorClasses = 'hover:scale-110 opacity-50 hover:opacity-100 transition-all duration-300';
  304.  
  305. const modalTabGroupTabsCls = genCssName('modal-tab-group-tabs');
  306. const modalTabGroupActiveCls = genCssName('modal-tab-group-active');
  307. const modalTabGroupContentCls = genCssName('modal-tab-group-content');
  308. const modalTabGroupSeparatorCls = genCssName('modal-tab-group-separator');
  309.  
  310. const modalHTML = `
  311. <div id="${perplexityHelperModalId}" class="modal">
  312.   <div class="modal-content">
  313.     <span class="close">&times;</span>
  314.     <h1 class="flex items-center gap-4">
  315.       <span class="mr-4 ${modalSettingsTitleCls}">Perplexity Helper</span>
  316.       <a href="https://gitlab.com/Tiartyos/perplexity-helper"
  317.         target="_blank" title="GitLab Repository"
  318.         class="${modalLargeIconAnchorClasses}"
  319.       >
  320.         ${gitlabLogo('w-8 h-8 invert')}
  321.       </a>
  322.       <a href="https://tiartyos.gitlab.io/perplexity-helper/"
  323.         target="_blank" title="Web Page"
  324.         class="${modalLargeIconAnchorClasses}"
  325.       >
  326.         <img src="${getLucideIconUrl('globe')}" class="w-8 h-8 invert">
  327.       </a>
  328.     </h1>
  329.     <p class="text-xs opacity-30 mt-1 mb-3">Changes may require page refresh.</p>
  330.     <div class="${modalTabGroupTabsCls}">
  331.     </div>
  332.     <hr class="!mt-0 !mb-0 ${modalTabGroupSeparatorCls}">
  333.   </div>
  334. </div>
  335. `;
  336.  
  337. const tagsContainerCls = genCssName('tags-container');
  338. const tagContainerCompactCls = genCssName('tag-container-compact');
  339. const tagContainerWiderCls = genCssName('tag-container-wider');
  340. const tagContainerWideCls = genCssName('tag-container-wide');
  341. const tagContainerExtraWideCls = genCssName('tag-container-extra-wide');
  342. const threadTagContainerCls = genCssName('thread-tag-container');
  343. const newTagContainerCls = genCssName('new-tag-container');
  344. const newTagContainerInCollectionCls = genCssName('new-tag-container-in-collection');
  345. const tagCls = genCssName('tag');
  346. const tagDarkTextCls = genCssName('tag-dark-text');
  347. const tagIconCls = genCssName('tag-icon');
  348. const tagPaletteCls = genCssName('tag-palette');
  349. const tagPaletteItemCls = genCssName('tag-palette-item');
  350. const tagTweakNoBorderCls = genCssName('tag-tweak-no-border');
  351. const tagTweakSlimPaddingCls = genCssName('tag-tweak-slim-padding');
  352. const tagsPreviewCls = genCssName('tags-preview');
  353. const tagsPreviewNewCls = genCssName('tags-preview-new');
  354. const tagsPreviewThreadCls = genCssName('tags-preview-thread');
  355. const tagsPreviewNewInCollectionCls = genCssName('tags-preview-new-in-collection');
  356. const tagTweakTextShadowCls = genCssName('tag-tweak-text-shadow');
  357. const tagFenceCls = genCssName('tag-fence');
  358. const tagAllFencesWrapperCls = genCssName('tag-all-fences-wrapper');
  359. const tagRestOfTagsWrapperCls = genCssName('tag-rest-of-tags-wrapper');
  360. const tagFenceContentCls = genCssName('tag-fence-content');
  361. const tagDirectoryCls = genCssName('tag-directory');
  362. const tagDirectoryContentCls = genCssName('tag-directory-content');
  363. const helpTextCls = genCssName('help-text');
  364. const queryBoxCls = genCssName('query-box');
  365. const controlsAreaCls = genCssName('controls-area');
  366. const textAreaCls = genCssName('text-area');
  367. const standardButtonCls = genCssName('standard-button');
  368. const lucideIconParentCls = genCssName('lucide-icon-parent');
  369. const roundedMD = genCssName('rounded-md');
  370. const leftPanelSlimCls = genCssName('left-panel-slim');
  371. const modelIconButtonCls = genCssName('model-icon-button');
  372. const modelLabelCls = genCssName('model-label');
  373. const modelLabelStyleJustTextCls = genCssName('model-label-style-just-text');
  374. const modelLabelStyleButtonSubtleCls = genCssName('model-label-style-button-subtle');
  375. const modelLabelStyleButtonWhiteCls = genCssName('model-label-style-button-white');
  376. const modelLabelStyleButtonCyanCls = genCssName('model-label-style-button-cyan');
  377. const modelLabelOverwriteCyanIconToGrayCls = genCssName('model-label-overwrite-cyan-icon-to-gray');
  378. const modelLabelRemoveCpuIconCls = genCssName('model-label-remove-cpu-icon');
  379. const reasoningModelCls = genCssName('reasoning-model');
  380. const modelLabelLargerIconsCls = genCssName('model-label-larger-icons');
  381. const notReasoningModelCls = genCssName('not-reasoning-model');
  382. const modelIconCls = genCssName('model-icon');
  383. const iconColorCyanCls = genCssName('icon-color-cyan');
  384. const iconColorGrayCls = genCssName('icon-color-gray');
  385. const iconColorWhiteCls = genCssName('icon-color-white');
  386. const iconColorPureWhiteCls = genCssName('icon-color-pure-white');
  387. const errorIconCls = genCssName('error-icon');
  388. const customJsAppliedCls = genCssName('customJsApplied');
  389. const customCssAppliedCls = genCssName('customCssApplied');
  390. const customWidgetsHtmlAppliedCls = genCssName('customWidgetsHtmlApplied');
  391. const sideMenuHiddenCls = genCssName('side-menu-hidden');
  392. const sideMenuLabelsHiddenCls = genCssName('side-menu-labels-hidden');
  393. const topSettingsButtonId = genCssName('settings-button-top');
  394. const leftSettingsButtonId = genCssName('settings-button-left');
  395. const leftSettingsButtonWrapperId = genCssName('settings-button-left-wrapper');
  396. const leftMarginOfThreadContentStylesId = genCssName('left-margin-of-thread-content-styles');
  397. const enhancedSubmitButtonCls = genCssName('enhanced-submit-button');
  398. const enhancedSubmitButtonPhTextCls = genCssName('enhanced-submit-button-ph-text');
  399. const enhancedSubmitButtonActiveCls = genCssName('enhanced-submit-button-active');
  400. const promptAreaKeyListenerCls = genCssName('prompt-area-key-listener');
  401. const promptAreaKeyListenerIndicatorCls = genCssName('prompt-area-key-listener-indicator');
  402. const pulseFocusCls = genCssName('pulse-focus');
  403. const modelSelectionListItemsSemiHideCls = genCssName('model-selection-list-items-semi-hide');
  404. const hideUpgradeToMaxAdsCls = genCssName('hide-upgrade-to-max-ads');
  405. const hideUpgradeToMaxAdsSemiHideCls = genCssName('hide-upgrade-to-max-ads-semi-hide');
  406. const extraSpaceBellowLastAnswerCls = genCssName('extra-space-bellow-last-answer');
  407. const quickProfileButtonCls = genCssName('quick-profile-button');
  408. const quickProfileButtonActiveCls = genCssName('quick-profile-button-active');
  409. const quickProfileButtonDisabledCls = genCssName('quick-profile-button-disabled');
  410.  
  411. const cyanPerplexityColor = '#1fb8cd';
  412. const cyanMediumPerplexityColor = '#204b51';
  413. const cyanDarkPerplexityColor = '#203133';
  414. const cyanVeryDarkPerplexityColor = '#0a2527';
  415.  
  416. const grayPerplexityColor = '#1f2121';
  417. const grayLightPerplexityColor = '#90908f';
  418. const grayDarkPerplexityColor = '#191a1a';
  419.  
  420.  
  421. const extraSpaceBellowLastAnswerContent = ('⸬  '.repeat(6) + '\\A').repeat(2);
  422.  
  423. const styles = `
  424. .textarea_wrapper {
  425.   display: flex;
  426.   flex-direction: column;
  427. }
  428.  
  429. @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&display=swap');
  430.  
  431. .textarea_wrapper > textarea {
  432.   width: 100%;
  433.   background-color: rgba(0, 0, 0, 0.8);
  434.   padding: 0 5px;
  435.   border-radius: 0.5em;
  436. }
  437.  
  438. .textarea_label {
  439. }
  440.  
  441. .${helpTextCls} {
  442.   background-color: #225;
  443.   padding: 0.3em 0.7em;
  444.   border-radius: 0.5em;
  445.   margin: 1em 0;
  446. }
  447. .${helpTextCls} {
  448.   cursor: text;
  449. }
  450.  
  451. .${helpTextCls} a {
  452.   text-decoration: underline;
  453. }
  454. .${helpTextCls} a:hover {
  455.   color: white;
  456. }
  457.  
  458. .${helpTextCls} code {
  459.   font-size: 80%;
  460.   background-color: rgba(255, 255, 255, 0.1);
  461.   border-radius: 0.3em;
  462.   padding: 0.1em;
  463. }
  464. .${helpTextCls} pre > code {
  465.   background: none;
  466. }
  467. .${helpTextCls} pre {
  468.   font-size: 80%;
  469.   overflow: auto;
  470.   background-color: rgba(255, 255, 255, 0.1);
  471.   border-radius: 0.3em;
  472.   padding: 0.1em 1em;
  473. }
  474. .${helpTextCls} li {
  475.   list-style: circle;
  476.   margin-left: 1em;
  477. }
  478. .${helpTextCls} hr {
  479.   margin: 1em 0 0.5em 0;
  480.   border-color: rgba(255, 255, 255, 0.1);
  481. }
  482.  
  483. .${helpTextCls} table {
  484.   border: 1px solid rgba(255, 255, 255, 0.1);
  485.   border-radius: 0.5em;
  486.   display: inline-block;
  487. }
  488. .${helpTextCls} table td, .${helpTextCls} table th {
  489.   padding: 0.1em 0.5em;
  490. }
  491.  
  492. .btn-helper {
  493. margin-left: 20px
  494. }
  495.  
  496. .modal {
  497.   display: none;
  498.   position: fixed;
  499.   z-index: 1000;
  500.   left: 0;
  501.   top: 0;
  502.   width: 100%;
  503.   height: 100%;
  504.   overflow: auto;
  505.   background-color: rgba(0, 0, 0, 0.8)
  506. }
  507.  
  508. .modal-content {
  509.   display: flex;
  510.   margin: 1em auto;
  511.   width: calc(100vw - 2em);
  512.   padding: 20px;
  513.   border: 1px solid #333;
  514.   background: linear-gradient(135deg, #151517, #202025);
  515.   border-radius: 6px;
  516.   color: rgb(206, 206, 210);
  517.   flex-direction: column;
  518.   position: relative;
  519.   overflow-y: auto;
  520.   cursor: default;
  521.   font-family: 'Fira Sans', sans-serif;
  522. }
  523.  
  524. .${modalTabGroupTabsCls} {
  525.   display: flex;
  526.   flex-direction: row;
  527. }
  528.  
  529. .modal-content .${modalTabGroupTabsCls} > button {
  530.   border-radius: 0.5em 0.5em 0 0;
  531.   border-bottom: 0;
  532.   padding: 0.2em 0.5em 0 0.5em;
  533.   background-color: #1e293b;
  534.   color: rgba(255, 255, 255, 0.5);
  535.   outline-bottom: none;
  536.   white-space: nowrap;
  537. }
  538.  
  539. .modal-content .${modalTabGroupTabsCls} > button.${modalTabGroupActiveCls} {
  540.   /* background-color: #3b82f6; */
  541.   color: white;
  542.   text-shadow: 0 0 1px currentColor;
  543.   padding: 0.3em 0.5em 0.2em 0.5em;
  544. }
  545.  
  546. .modal-content .${modalTabGroupContentCls} {
  547.   display: flex;
  548.   flex-direction: column;
  549.   gap: 1em;
  550.   padding-top: 1em;
  551. }
  552.  
  553. .${modalSettingsTitleCls} {
  554.   background: linear-gradient(to bottom, white, gray);
  555.   -webkit-background-clip: text;
  556.   background-clip: text;
  557.   -webkit-text-fill-color: transparent;
  558.   font-weight: bold;
  559.   font-size: 3em;
  560.   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  561.   user-select: none;
  562.   margin-top: -0.33em;
  563.   margin-bottom: -0.33em;
  564. }
  565.  
  566. .${modalSettingsTitleCls} .animate-letter {
  567.   display: inline-block;
  568.   background: inherit;
  569.   -webkit-background-clip: text;
  570.   background-clip: text;
  571.   -webkit-text-fill-color: transparent;
  572.   transition: transform 0.3s ease-out;
  573. }
  574.  
  575. .${modalSettingsTitleCls} .animate-letter.active {
  576.   /* Move and highlight on active */
  577.   transform: translateY(-10px) rotate(5deg);
  578.   -webkit-text-fill-color: #4dabff;
  579.   text-shadow: 0 0 5px #4dabff, 0 0 10px #4dabff;
  580. }
  581.  
  582. .modal-content .hover\\:scale-110:hover {
  583.   transform: scale(1.1);
  584. }
  585.  
  586. .modal-content label {
  587.   padding-right: 10px;
  588. }
  589.  
  590. .modal-content hr {
  591.   height: 1px;
  592.   margin: 1em 0;
  593.   border-color: rgba(255, 255, 255, 0.1);
  594. }
  595.  
  596. .modal-content hr.${modalTabGroupSeparatorCls} {
  597.   margin: 0 -1em 0 -1em;
  598. }
  599.  
  600. .modal-content input[type="checkbox"] {
  601.   appearance: none;
  602.   width: 1.2em;
  603.   height: 1.2em;
  604.   border: 2px solid #ffffff80;
  605.   border-radius: 0.25em;
  606.   background-color: transparent;
  607.   transition: all 0.2s ease;
  608.   cursor: pointer;
  609.   position: relative;
  610. }
  611.  
  612. .modal-content input[type="checkbox"]:checked {
  613.   background-color: #3b82f6;
  614.   border-color: #3b82f6;
  615. }
  616.  
  617. .modal-content input[type="checkbox"]:checked::after {
  618.   content: '';
  619.   position: absolute;
  620.   left: 50%;
  621.   top: 50%;
  622.   width: 0.4em;
  623.   height: 0.7em;
  624.   border: solid white;
  625.   border-width: 0 2px 2px 0;
  626.   transform: translate(-50%, -60%) rotate(45deg);
  627. }
  628.  
  629. .modal-content input[type="checkbox"]:hover {
  630.   border-color: #ffffff;
  631. }
  632.  
  633. .modal-content input[type="checkbox"]:focus {
  634.   outline: 2px solid #3b82f680;
  635.   outline-offset: 2px;
  636. }
  637.  
  638. .modal-content .checkbox_label {
  639.   color: white;
  640.   line-height: 1.5;
  641. }
  642.  
  643. .modal-content .checkbox_wrapper {
  644.   display: flex;
  645.   align-items: center;
  646.   gap: 0.5em;
  647. }
  648.  
  649. .modal-content .number_label {
  650.   margin-left: 0.5em;
  651. }
  652.  
  653. .modal-content .color_wrapper {
  654.   display: flex;
  655.   align-items: center;
  656. }
  657.  
  658. .modal-content .color_label {
  659.   margin-left: 0.5em;
  660. }
  661.  
  662. .modal-content input, .modal-content button {
  663.   background-color: #1e293b;
  664.   border: 2px solid #ffffff80;
  665.   border-radius: 0.5em;
  666.   color: white;
  667.   padding: 0.5em;
  668.   transition: border-color 0.3s ease, outline 0.3s ease;
  669. }
  670.  
  671. .modal-content input:hover, .modal-content button:hover {
  672.   border-color: #ffffff;
  673. }
  674.  
  675. .modal-content input:focus, .modal-content button:focus {
  676.   outline: 2px solid #3b82f680;
  677.   outline-offset: 2px;
  678. }
  679.  
  680. .modal-content input[type="number"] {
  681.   padding: 0.5em;
  682.   transition: border-color 0.3s ease, outline 0.3s ease;
  683. }
  684.  
  685. .modal-content input[type="color"] {
  686.   padding: 0;
  687.   height: 2em;
  688. }
  689.  
  690. .modal-content input[type="color"]:hover {
  691.   border-color: #ffffff;
  692. }
  693.  
  694. .modal-content input[type="color"]:focus {
  695.   outline: 2px solid #3b82f680;
  696.   outline-offset: 2px;
  697. }
  698.  
  699. .modal-content h1 + hr {
  700.   margin-top: 0.5em;
  701. }
  702.  
  703.  
  704. .modal-content select {
  705.   appearance: none;
  706.   background-color: #1e293b; /* Dark blue background */
  707.   border: 2px solid #ffffff80;
  708.   border-radius: 0.5em;
  709.   padding: 0.3em 2em 0.3em 0.5em;
  710.   color: white;
  711.   font-size: 1em;
  712.   cursor: pointer;
  713.   transition: all 0.2s ease;
  714.   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  715.   background-repeat: no-repeat;
  716.   background-position: right 0.5em center;
  717.   background-size: 1.2em;
  718. }
  719.  
  720. .modal-content select option {
  721.   background-color: #1e293b; /* Match select background */
  722.   color: white;
  723.   padding: 0.5em;
  724. }
  725.  
  726. .modal-content select:hover {
  727.   border-color: #ffffff;
  728. }
  729.  
  730. .modal-content select:focus {
  731.   outline: 2px solid #3b82f680;
  732.   outline-offset: 2px;
  733. }
  734.  
  735. .modal-content .select_label {
  736.   color: white;
  737.   margin-left: 0.5em;
  738. }
  739.  
  740. .modal-content .select_wrapper {
  741.   display: flex;
  742.   align-items: center;
  743. }
  744.  
  745. .close {
  746.   color: rgb(206, 206, 210);
  747.   float: right;
  748.   font-size: 28px;
  749.   font-weight: bold;
  750.   position: absolute;
  751.   right: 20px;
  752.   top: 5px;
  753. }
  754.  
  755. .close:hover,
  756. .close:focus {
  757.   color: white;
  758.   text-decoration: none;
  759.   cursor: pointer;
  760. }
  761.  
  762. #copied-modal,#copied-modal-2 {
  763.   padding: 5px 5px;
  764.   background:gray;
  765.   position:absolute;
  766.   display: none;
  767.   color: white;
  768.   font-size: 15px;
  769. }
  770.  
  771. label > div.select-none {
  772.   user-select: text;
  773.   cursor: initial;
  774. }
  775.  
  776. .${tagsContainerCls} {
  777.   display: flex;
  778.   flex-direction: row;
  779.   margin: 5px 0;
  780. }
  781. .${tagsContainerCls}.${threadTagContainerCls} {
  782.   margin-left: 0.5em;
  783.   margin-right: 0.5em;
  784.   margin-bottom: 2px;
  785. }
  786.  
  787. .${tagContainerCompactCls} {
  788.   margin-top: -2em;
  789.   margin-bottom: 1px;
  790. }
  791. .${tagContainerCompactCls} .${tagFenceCls} {
  792.   margin: 0;
  793.   padding: 1px;
  794. }
  795. .${tagContainerCompactCls} .${tagCls} {
  796. }
  797. .${tagContainerCompactCls} .${tagAllFencesWrapperCls} {
  798.   gap: 1px;
  799. }
  800. .${tagContainerCompactCls} .${tagRestOfTagsWrapperCls} {
  801.   margin: 1px;
  802. }
  803. .${tagContainerCompactCls} .${tagRestOfTagsWrapperCls},
  804. .${tagContainerCompactCls} .${tagFenceContentCls},
  805. .${tagContainerCompactCls} .${tagDirectoryContentCls} {
  806.   gap: 1px;
  807. }
  808.  
  809. .${tagContainerWiderCls} {
  810.   margin-left: -6em;
  811.   margin-right: -6em;
  812. }
  813. .${tagContainerWiderCls} .${tagCls} {
  814. }
  815.  
  816. .${tagContainerWideCls} {
  817.   margin-left: -12em;
  818.   margin-right: -12em;
  819. }
  820.  
  821. .${tagContainerExtraWideCls} {
  822.   margin-left: -16em;
  823.   margin-right: -16em;
  824.   max-width: 100vw;
  825. }
  826.  
  827. .${tagsContainerCls} {
  828.   @media (max-width: 768px) {
  829.     margin-left: 0 !important;
  830.     margin-right: 0 !important;
  831.   }
  832. }
  833.  
  834.  
  835. .${tagCls} {
  836.   border: 1px solid #3b3b3b;
  837.   background-color: #282828;
  838.   /*color: rgba(255, 255, 255, 0.482);*/ /* equivalent of #909090; when on #282828 background */
  839.   padding: 0px 8px 0 8px;
  840.   border-radius: 4px;
  841.   cursor: pointer;
  842.   transition: background-color 0.2s, color 0.2s;
  843.   display: inline-block;
  844.   color: #E8E8E6;
  845.   user-select: none;
  846. }
  847. .${tagCls}.${tagDarkTextCls} {
  848.   color: #171719;
  849. }
  850. .${tagCls} span {
  851.   display: inline-block;
  852. }
  853.  
  854. .${tagCls}.${tagTweakNoBorderCls} {
  855.   border: none;
  856. }
  857.  
  858. .${tagCls}.${tagTweakSlimPaddingCls} {
  859.   padding: 0px 4px 0 4px;
  860. }
  861.  
  862. .${tagCls} .${tagIconCls} {
  863.   width: 16px;
  864.   height: 16px;
  865.   margin-right: 2px;
  866.   margin-left: -4px;
  867.   margin-top: -4px;
  868.   vertical-align: middle;
  869.   display: inline-block;
  870.   filter: invert(1);
  871. }
  872. .${tagCls}.${tagDarkTextCls} .${tagIconCls} {
  873.   filter: none;
  874. }
  875. .${tagCls}.${tagTweakSlimPaddingCls} .${tagIconCls} {
  876.   margin-left: -2px;
  877. }
  878. .${tagCls} span {
  879.   position: relative;
  880.   top: 1.5px;
  881. }
  882. .${tagCls}.${tagTweakTextShadowCls} span {
  883.   text-shadow: 1px 0 0.5px black, -1px 0 0.5px black, 0 1px 0.5px black, 0 -1px 0.5px black;
  884. }
  885. .${tagCls}.${tagTweakTextShadowCls}.${tagDarkTextCls} span {
  886.   text-shadow: 1px 0 0.5px white, -1px 0 0.5px white, 0 1px 0.5px white, 0 -1px 0.5px white;
  887. }
  888. .${tagCls}:hover {
  889.   background-color: #333;
  890.   color: #fff;
  891.   transform: scale(1.02);
  892. }
  893. .${tagCls}.${tagDarkTextCls}:hover {
  894.   /* color: #171717; */
  895.   color: #2f2f2f;
  896. }
  897. .${tagCls}:active {
  898.   transform: scale(0.98);
  899. }
  900.  
  901. .${tagPaletteCls} {
  902.   display: flex;
  903.   flex-wrap: wrap;
  904.   gap: 1px;
  905. }
  906. .${tagPaletteCls} .${tagPaletteItemCls} {
  907.   text-shadow: 1px 0 1px black, -1px 0 1px black, 0 1px 1px black, 0 -1px 1px black;
  908.   width: 40px;
  909.   height: 25px;
  910.   display: inline-block;
  911.   text-align: center;
  912.   padding: 0 2px;
  913.   transition: color 0.2s, border 0.1s;
  914.   border: 2px solid transparent;
  915. }
  916.  
  917. .${tagPaletteItemCls}:hover {
  918.   cursor: pointer;
  919.   color: white;
  920.   border: 2px solid white;
  921. }
  922.  
  923. .${tagsPreviewCls} {
  924.   background-color: #191a1a;
  925.   padding: 0.5em 1em;
  926.   border-radius: 1em;
  927. }
  928.  
  929. .${tagAllFencesWrapperCls} {
  930.   display: flex;
  931.   flex-direction: row;
  932.   gap: 5px;
  933. }
  934.  
  935. .${tagRestOfTagsWrapperCls} {
  936.   display: flex;
  937.   flex-direction: row;
  938.   flex-wrap: wrap;
  939.   align-content: flex-start;
  940.   gap: 5px;
  941.   margin: 8px;
  942. }
  943.  
  944. .${tagFenceCls} {
  945.   display: flex;
  946.   margin: 5px 0;
  947.   padding: 5px;
  948.   border-radius: 4px;
  949. }
  950.  
  951. .${tagFenceContentCls} {
  952.   display: flex;
  953.   flex-direction: column;
  954.   flex-wrap: wrap;
  955.   gap: 5px;
  956. }
  957.  
  958. .${tagDirectoryCls} {
  959.   position: relative;
  960.   display: flex;
  961.   z-index: 100;
  962. }
  963. .${tagDirectoryCls}:hover .${tagDirectoryContentCls} {
  964.   display: flex;
  965. }
  966. .${tagDirectoryContentCls} {
  967.   position: absolute;
  968.   display: none;
  969.   flex-direction: column;
  970.   gap: 5px;
  971.   top: 0px;
  972.   padding-bottom: 1px;
  973.   left: -5px;
  974.   transform: translateY(-100%);
  975.   background: rgba(0, 0, 0, 0.5);
  976.   padding: 5px;
  977.   border-radius: 4px;
  978.   flex-wrap: nowrap;
  979.   width: max-content;
  980. }
  981. .${tagDirectoryContentCls} .${tagCls} {
  982.   white-space: nowrap;
  983.   width: fit-content;
  984. }
  985.  
  986. .${queryBoxCls} {
  987.   flex-wrap: wrap;
  988. }
  989.  
  990. .${controlsAreaCls} {
  991.   grid-template-columns: repeat(4,minmax(0,1fr))
  992. }
  993.  
  994. .${textAreaCls} {
  995.   grid-column-end: 5;
  996. }
  997.  
  998. .${standardButtonCls} {
  999.   grid-column-start: 4;
  1000. }
  1001.  
  1002. .${roundedMD} {
  1003.   border-radius: 0.375rem!important;
  1004. }
  1005.  
  1006. #${leftSettingsButtonId} svg {
  1007.   transition: fill 0.2s;
  1008. }
  1009. #${leftSettingsButtonId}:hover svg {
  1010.   fill: #fff !important;
  1011. }
  1012.  
  1013. .w-collapsedSideBarWidth #${leftSettingsButtonId} span {
  1014.   display: none;
  1015. }
  1016.  
  1017. .w-collapsedSideBarWidth #${leftSettingsButtonId} {
  1018.   width: 100%;
  1019.   border-radius: 0.25rem;
  1020.   height: 40px;
  1021. }
  1022.  
  1023. #${leftSettingsButtonWrapperId} {
  1024.   display: flex;
  1025.   padding: 0.1em 0.2em;
  1026.   justify-content: flex-start;
  1027. }
  1028.  
  1029. .w-collapsedSideBarWidth #${leftSettingsButtonWrapperId} {
  1030.   justify-content: center;
  1031. }
  1032.  
  1033. .${lucideIconParentCls} > img {
  1034.   transition: opacity 0.2s ease;
  1035. }
  1036.  
  1037. .${lucideIconParentCls}:hover > img, a.dark\\:text-textMainDark .${lucideIconParentCls} > img {
  1038.   opacity: 1;
  1039. }
  1040.  
  1041. .${leftPanelSlimCls} .pt-sm > * {
  1042.   padding: 0.2rem 0 !important;
  1043. }
  1044.  
  1045. .${leftPanelSlimCls} {
  1046.   max-width: 45px !important;
  1047. }
  1048.  
  1049. .${leftPanelSlimCls} > .py-md {
  1050.   margin-left: -0.1em;
  1051. }
  1052.  
  1053. .${leftPanelSlimCls} > .py-md > div.flex-col > * {
  1054. /*   background: red; */
  1055.   margin-right: 0;
  1056.   max-width: 40px;
  1057. }
  1058.  
  1059. .${modelLabelCls} {
  1060.   color: #888;
  1061.   /* padding is from style attr */
  1062.   transition: color 0.2s, background-color 0.2s, border 0.2s;
  1063. /*
  1064.   margin-right: 0.5em;
  1065.   margin-left: 0.5em;
  1066. */
  1067.   padding-top: 3px;
  1068.   /*margin-right: 0.5em;*/
  1069. }
  1070. button.${modelIconButtonCls} {
  1071.   padding-right: 1.0em;
  1072.   padding-left: 1.0em;
  1073.   gap: 5px;
  1074. }
  1075. button:hover > .${modelLabelCls} {
  1076.   color: #fff;
  1077. }
  1078. button.${modelIconButtonCls} > .min-w-0 {
  1079.   min-width: 16px;
  1080.   margin-right: 0.0em;
  1081. }
  1082. button.${modelLabelRemoveCpuIconCls} {
  1083. /*  margin-left: 0.5em; */
  1084. /*  padding-left: 0.5em; */
  1085.   padding-right: 1.25em;
  1086. }
  1087. .${modelIconCls} {
  1088.   width: 16px;
  1089.   min-width: 16px;
  1090.   height: 16px;
  1091.   margin-right: 2px;
  1092.   margin-left: 0;
  1093.   margin-top: -0px;
  1094.   opacity: 0.5;
  1095.   transition: opacity 0.2s;
  1096. }
  1097. button.${modelLabelLargerIconsCls} .${modelIconCls} {
  1098.   transform: scale(1.2);
  1099. }
  1100. button:hover .${modelIconCls} {
  1101.   opacity: 1;
  1102. }
  1103. button.${modelLabelRemoveCpuIconCls} .${modelLabelCls} {
  1104.   /*margin-right: 0.5em; */
  1105. }
  1106. button.${modelLabelRemoveCpuIconCls}:has(.${reasoningModelCls}) .${modelLabelCls} {
  1107.   /*margin-right: 0.5em; */
  1108. }
  1109. button.${modelLabelRemoveCpuIconCls}.${notReasoningModelCls} .${modelLabelCls} {
  1110.   /* margin-right: 0.0em; */
  1111. }
  1112. .${modelLabelRemoveCpuIconCls} div:has(div > svg.tabler-icon-cpu) {
  1113.   display: none;
  1114. }
  1115.  
  1116. button:has(> .${modelLabelCls}.${modelLabelStyleButtonSubtleCls}) {
  1117.   border: 1px solid #333;
  1118. }
  1119. button:hover:has(> .${modelLabelCls}.${modelLabelStyleButtonSubtleCls}) {
  1120.   background: #333 !important;
  1121. }
  1122. /* Apply style even if the span is empty */
  1123. button.${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonSubtleCls}:empty) {
  1124.   border: 1px solid #333;
  1125. }
  1126. button.${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonSubtleCls}:empty):hover {
  1127.   background: #333 !important;
  1128. }
  1129.  
  1130. .${modelLabelCls}.${modelLabelStyleButtonWhiteCls} {
  1131.   color: #8D9191 !important;
  1132. }
  1133. button:hover > .${modelLabelCls}.${modelLabelStyleButtonWhiteCls} {
  1134.   color: #fff !important;
  1135. }
  1136. .${modelIconButtonCls} svg[stroke] {
  1137.   stroke: #8D9191 !important;
  1138. }
  1139. .${modelIconButtonCls}:hover svg[stroke] {
  1140.   stroke: #fff !important;
  1141. }
  1142. button:has(> .${modelLabelCls}.${modelLabelStyleButtonWhiteCls}) {
  1143.   background: #191A1A !important;
  1144.   color: #2D2F2F !important;
  1145. }
  1146. button:has(> .${modelLabelCls}.${modelLabelStyleButtonWhiteCls}):hover {
  1147.   color: #8D9191 !important;
  1148. }
  1149. /* Apply style even if the span is empty */
  1150. button.${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonWhiteCls}:empty) {
  1151.   background: #191A1A !important;
  1152.   color: #2D2F2F !important;
  1153. }
  1154. button.${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonWhiteCls}:empty):hover {
  1155.   color: #8D9191 !important;
  1156. }
  1157.  
  1158. .${modelLabelCls}.${modelLabelStyleButtonCyanCls} {
  1159.   color: ${cyanPerplexityColor};
  1160. }
  1161. button:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) {
  1162.   border: 1px solid ${cyanMediumPerplexityColor};
  1163.   background: ${cyanDarkPerplexityColor} !important;
  1164. }
  1165. button:hover:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) {
  1166.   border: 1px solid ${cyanPerplexityColor};
  1167. }
  1168. /* Apply style even if the span is empty */
  1169. button.${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}:empty) {
  1170.   border: 1px solid ${cyanMediumPerplexityColor};
  1171.   background: ${cyanDarkPerplexityColor} !important;
  1172. }
  1173. button.${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}:empty):hover {
  1174.   border: 1px solid ${cyanPerplexityColor};
  1175. }
  1176. .${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) svg[stroke] {
  1177.   stroke: ${cyanPerplexityColor} !important;
  1178. }
  1179. .${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}):hover svg[stroke] {
  1180.   stroke: #fff !important;
  1181. }
  1182.  
  1183. button:has(> .${modelLabelCls}.${modelLabelOverwriteCyanIconToGrayCls}) {
  1184.   color: #888 !important;
  1185. }
  1186. button:has(> .${modelLabelCls}.${modelLabelOverwriteCyanIconToGrayCls}):hover {
  1187.   color: #fff !important;
  1188. }
  1189.  
  1190. .${reasoningModelCls} {
  1191.   width: 16px;
  1192.   height: 16px;
  1193. /*
  1194.   margin-right: 2px;
  1195.   margin-left: 2px;
  1196.   margin-top: -2px;
  1197.  */
  1198.   filter: invert();
  1199.   opacity: 0.5;
  1200.   transition: opacity 0.2s;
  1201. }
  1202. button.${modelLabelLargerIconsCls} .${reasoningModelCls} {
  1203.   transform: scale(1.2);
  1204. }
  1205. button:hover .${reasoningModelCls} {
  1206.   opacity: 1;
  1207. }
  1208.  
  1209. div[ph-processed-custom-model-popover] :is(.${modelIconCls}, .${reasoningModelCls}) {
  1210.   opacity: 1;
  1211. }
  1212.  
  1213. .${errorIconCls} {
  1214.   width: 16px;
  1215.   height: 16px;
  1216.   margin-right: 4px;
  1217.   margin-left: 4px;
  1218.   margin-top: -0px;
  1219.   opacity: 0.75;
  1220.   transition: opacity 0.2s;
  1221. }
  1222. button.${modelLabelLargerIconsCls} .${errorIconCls} {
  1223.   transform: scale(1.2);
  1224. }
  1225. button:hover .${errorIconCls} {
  1226.   opacity: 1;
  1227. }
  1228. /* button:has(.${reasoningModelCls}) > div > div > svg {
  1229.   width: 32px;
  1230.   height: 16px;
  1231.   margin-left: 8px;
  1232.   margin-right: 12px;
  1233.   margin-top: 0px;
  1234.   min-width: 16px;
  1235.   background-color: cyan;
  1236. }
  1237. button:has(.${reasoningModelCls}) > div > div:has(svg) {
  1238.   width: 16px;
  1239.   height: 16px;
  1240.   min-width: 30px;
  1241.   background-color: purple;
  1242. } */
  1243.  
  1244.  
  1245. .${iconColorCyanCls} {
  1246.   filter: invert(54%) sepia(84%) saturate(431%) hue-rotate(139deg) brightness(97%) contrast(90%);
  1247.   transition: filter 0.2s;
  1248. }
  1249.  
  1250. button:hover:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) .${iconColorCyanCls} {
  1251.   filter: invert(100%);
  1252. }
  1253.  
  1254. .${iconColorGrayCls} {
  1255.   filter: invert(100%);
  1256.   opacity: 0.5;
  1257.   transition: filter 0.2s;
  1258. }
  1259. button:has(.${reasoningModelCls}):hover .${iconColorGrayCls} {
  1260.   filter: invert(100%);
  1261. }
  1262.  
  1263. .${iconColorPureWhiteCls} {
  1264.   filter: invert(100%);
  1265. }
  1266.  
  1267. .${iconColorWhiteCls} {
  1268.   filter: invert(50%);
  1269.   transition: filter 0.2s;
  1270. }
  1271. button:has(.${reasoningModelCls}):hover .${iconColorWhiteCls} {
  1272.   filter: invert(100%);
  1273. }
  1274.  
  1275.  
  1276. .${sideMenuHiddenCls} {
  1277.   display: none;
  1278. }
  1279.  
  1280. .${sideMenuLabelsHiddenCls} .p-sm > .font-sans.text-2xs,
  1281. .${sideMenuLabelsHiddenCls} .min-w-0.pb-sm .font-sans.text-2xs {
  1282.   display: none;
  1283. }
  1284.  
  1285.  
  1286. .${enhancedSubmitButtonCls} {
  1287.   position: absolute;
  1288.   top: 0;
  1289.   left: 0;
  1290.   width: 101%;
  1291.   height: 101%;
  1292.   border-radius: inherit;
  1293.   cursor: pointer;
  1294.   background: transparent;
  1295.   box-shadow: 0 0 0 1px transparent;
  1296.   z-index: 10;
  1297.   display: flex;
  1298.   align-items: center;
  1299.   justify-content: center;
  1300.   opacity: 0;
  1301.   transform: scale(1.1);
  1302.   transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  1303.   overflow: visible;
  1304.   pointer-events: none;
  1305. }
  1306.  
  1307. /* ISSUE: Using hard-coded 'active' class here instead of enhancedSubmitButtonActiveCls */
  1308. .${enhancedSubmitButtonCls}.active {
  1309.   opacity: 0.5;
  1310.   transform: scale(1);
  1311.   pointer-events: auto;
  1312.   box-shadow: 0 0 0 1px cyan inset;
  1313. }
  1314.  
  1315. .${enhancedSubmitButtonCls}:hover {
  1316.   opacity: 1;
  1317.   background: radial-gradient(circle at right top, rgb(23, 8, 56), rgb(4, 2, 12));
  1318. }
  1319.  
  1320. .${enhancedSubmitButtonCls}::before {
  1321.   content: '';
  1322.   position: absolute;
  1323.   top: -2px;
  1324.   left: -2px;
  1325.   right: -2px;
  1326.   bottom: -2px;
  1327.   background: transparent;
  1328.   z-index: -1;
  1329.   box-shadow: 0 0 0 1.2px transparent;
  1330.   border-radius: inherit;
  1331.   transition: opacity 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  1332.   opacity: 0;
  1333. }
  1334.  
  1335. /* ISSUE: Using hard-coded 'active' class here instead of enhancedSubmitButtonActiveCls */
  1336. .${enhancedSubmitButtonCls}.active::before {
  1337.   opacity: 0.9;
  1338.   box-shadow: 0 0 0 1.2px #00ffff;
  1339.   animation: gradientBorder 3s ease infinite;
  1340. }
  1341.  
  1342. .${enhancedSubmitButtonCls}:hover::before {
  1343.   opacity: 1;
  1344. }
  1345.  
  1346. @keyframes gradientBorder {
  1347.   0% { box-shadow: 0 0 0 1.2px rgba(0, 255, 255, 0.6); }
  1348.   50% { box-shadow: 0 0 0 1.2px rgba(0, 255, 255, 1), 0 0 8px rgba(0, 255, 255, 0.6); }
  1349.   100% { box-shadow: 0 0 0 1.2px rgba(0, 255, 255, 0.6); }
  1350. }
  1351.  
  1352. @keyframes pulseIndicator {
  1353.   0% { transform: scale(1); opacity: 0.6; }
  1354.   50% { transform: scale(1.5); opacity: 1; }
  1355.   100% { transform: scale(1); opacity: 0.6; }
  1356. }
  1357.  
  1358. .${enhancedSubmitButtonPhTextCls} {
  1359.   font-family: 'JetBrains Mono', monospace;
  1360.   color: #00c1ff;
  1361.   display: none;
  1362.   position: absolute;
  1363.   font-size: 20px;
  1364.   user-select: none;
  1365.   align-items: center;
  1366.   justify-content: center;
  1367.   width: 100%;
  1368.   height: 100%;
  1369. }
  1370.  
  1371. .${enhancedSubmitButtonCls}:hover .${enhancedSubmitButtonPhTextCls} {
  1372.   display: flex;
  1373. }
  1374.  
  1375. /* Prompt area with active toggle tags */
  1376. textarea.${promptAreaKeyListenerCls},
  1377. div[contenteditable].${promptAreaKeyListenerCls} { // @stupid cursor apply model. ${promptAreaKeyListenerCls} <- correct. no bracket!
  1378.   box-shadow: 0 0 0 1px rgba(31, 184, 205, 0.2), 0 0px 0px rgba(31, 184, 205, 0);
  1379.   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  1380.   border-color: rgba(31, 184, 205, 0.2);
  1381.   position: relative;
  1382.   background-image: linear-gradient(to bottom, rgba(31, 184, 205, 0.03), transparent);
  1383. }
  1384.  
  1385. /* Nice glow effect when focused */
  1386. textarea.${promptAreaKeyListenerCls}:focus,
  1387. div[contenteditable].${promptAreaKeyListenerCls}:focus {
  1388.   box-shadow: 0 0 0 1px rgba(31, 184, 205, 0.5), 0 0 8px 1px rgba(31, 184, 205, 0.3);
  1389.   border-color: rgba(31, 184, 205, 0.5);
  1390.   background-image: linear-gradient(to bottom, rgba(31, 184, 205, 0.05), transparent);
  1391. }
  1392.  
  1393. /* Active indicator for textarea */
  1394. .${promptAreaKeyListenerIndicatorCls} {
  1395.   position: absolute;
  1396.   bottom: 5px;
  1397.   right: 5px;
  1398.   width: 4px;
  1399.   height: 4px;
  1400.   border-radius: 50%;
  1401.   background-color: rgba(31, 184, 205, 0.6);
  1402.   z-index: 5;
  1403.   pointer-events: none;
  1404.   box-shadow: 0 0 4px 1px rgba(31, 184, 205, 0.4);
  1405.   animation: pulseIndicator 2s ease-in-out infinite;
  1406.   opacity: 0;
  1407.   transform: scale(0);
  1408.   transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  1409. }
  1410.  
  1411. /* When actually visible, override initial zero values */
  1412. .${promptAreaKeyListenerIndicatorCls}.visible {
  1413.   opacity: 1;
  1414.   transform: scale(1);
  1415. }
  1416.  
  1417. /* Pulse focus effect when Enter is pressed */
  1418. textarea.${pulseFocusCls},
  1419. div[contenteditable].${pulseFocusCls} {  // @ stupid cursor apply model. ${pulseFocusCls} <- correct. no bracket!
  1420.   box-shadow: 0 0 0 2px rgba(31, 184, 205, 0.8), 0 0 12px 4px rgba(31, 184, 205, 0.6) !important;
  1421.   border-color: rgba(31, 184, 205, 0.8) !important;
  1422.   transition: none !important;
  1423. }
  1424.  
  1425. /* Semi-hide model selection list items with hover effect */
  1426. .${modelSelectionListItemsSemiHideCls} {
  1427.   opacity: 0.3;
  1428.   transition: opacity 0.2s ease-in-out;
  1429. }
  1430.  
  1431. .${modelSelectionListItemsSemiHideCls}:hover {
  1432.   opacity: 1;
  1433. }
  1434.  
  1435. /* Hide upgrade to max ads */
  1436. .${hideUpgradeToMaxAdsCls} {
  1437.   display: none !important;
  1438. }
  1439.  
  1440. .${hideUpgradeToMaxAdsSemiHideCls} {
  1441.   opacity: 0.3;
  1442.   transition: opacity 0.2s ease-in-out;
  1443. }
  1444.  
  1445. .${hideUpgradeToMaxAdsSemiHideCls}:hover {
  1446.   opacity: 1;
  1447. }
  1448.  
  1449. .${extraSpaceBellowLastAnswerCls} {
  1450.   padding-bottom: 7.5em;
  1451. }
  1452. .${extraSpaceBellowLastAnswerCls}::after {
  1453.   content: '${extraSpaceBellowLastAnswerContent}';
  1454.   white-space: pre;
  1455.   opacity: 0.02;
  1456.   font-size: 5em;
  1457.   justify-content: center;
  1458.   align-items: top;
  1459.   display: flex;
  1460.   min-height: 1em;
  1461.   margin-bottom: -1em;
  1462.   transition: opacity 5.0s ease-in-out;
  1463.   pointer-events: none;
  1464.   overflow: hidden;
  1465. }
  1466.  
  1467. .${extraSpaceBellowLastAnswerCls}:hover::after {
  1468.   opacity: 0.1;
  1469. }
  1470.  
  1471. /* Using class, because perplexity historically had multiple prompt areas */
  1472. .${quickProfileButtonCls} {
  1473.   box-sizing: border-box;
  1474.   border: 1px solid transparent;
  1475.   background-color: ${grayDarkPerplexityColor};
  1476.   border-radius: 25%;
  1477.   width: 2.25em;
  1478.   height: 2.2em;
  1479.   display: flex;
  1480.   align-items: center;
  1481.   justify-content: center;
  1482.   cursor: pointer;
  1483.   align-items: center;
  1484.   justify-content: center;
  1485.   transform: scale(1);
  1486.   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
  1487.   margin: 0;
  1488.   padding: 0;
  1489. }
  1490.  
  1491. .${quickProfileButtonCls}.${quickProfileButtonDisabledCls} {
  1492.   opacity: 0.25;
  1493.   cursor: not-allowed;
  1494.   border-color: ${grayDarkPerplexityColor};
  1495.   background-color: ${grayDarkPerplexityColor};
  1496. }
  1497.  
  1498. .${quickProfileButtonCls}.${quickProfileButtonActiveCls} {
  1499.   background-color: ${cyanVeryDarkPerplexityColor};
  1500.   border-color: ${cyanMediumPerplexityColor};
  1501. }
  1502.  
  1503. .${quickProfileButtonCls}.${quickProfileButtonActiveCls} > img {
  1504.   opacity: 0.9;
  1505.   filter: brightness(0) saturate(100%) invert(58%) sepia(59%) saturate(480%) hue-rotate(137deg) brightness(95%) contrast(94%);
  1506. }
  1507.  
  1508. .${quickProfileButtonCls}:hover:not(.${quickProfileButtonDisabledCls}) {
  1509.   border-color: ${cyanPerplexityColor};
  1510. }
  1511.  
  1512. .${quickProfileButtonCls}:active:not(.${quickProfileButtonDisabledCls}) {
  1513.   transform: scale(0.97) translateY(1px);
  1514.   box-shadow: 0 0 0 0.5px ${cyanPerplexityColor};
  1515. }
  1516.  
  1517. .${quickProfileButtonCls} > img {
  1518.   width: 1.0em;
  1519.   height: 1.0em;
  1520.   filter: invert(1);
  1521.   opacity: 0.5;
  1522.   transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
  1523. }
  1524.  
  1525. .${quickProfileButtonCls}:hover > img {
  1526.   opacity: 1;
  1527. }
  1528. `;
  1529.  
  1530. const TAG_POSITION = {
  1531.   BEFORE: 'before',
  1532.   AFTER: 'after',
  1533.   CARET: 'caret',
  1534.   WRAP: 'wrap',
  1535. };
  1536.  
  1537. const TAG_CONTAINER_TYPE = {
  1538.   NEW: 'new',
  1539.   NEW_IN_COLLECTION: 'new-in-collection',
  1540.   THREAD: 'thread',
  1541.   ALL: 'all',
  1542. };
  1543.  
  1544. const tagsHelpText = `
  1545. Each line is one tag.
  1546. Non-field text is what will be inserted into prompt.
  1547. Field is denoted by \`<\` and \`>\`, field name is before \`:\`, field value after \`:\`.
  1548.  
  1549. Supported fields:
  1550. - \`label\`: tag label shown on tag "box" (new items around prompt input area)
  1551. - \`position\`: where the tag text will be inserted, default is \`before\`; valid values are \`before\`/\`after\` (existing text) or \`caret\` (at cursor position) or \`wrap\` (wrap text around \`$$wrap$$\` marker)
  1552. - \`color\`: tag color; CSS colors supported, you can use colors from a pre-generated palette via \`%\` syntax, e.g. \`<color:%5>\`. See palette bellow.
  1553. - \`tooltip\`: shown on hover (aka title); (default) tooltip can be disabled when this field is set to empty string - \`<tooltip:>\`
  1554. - \`target\`: where the tag will be inserted, default is \`new\`; valid values are \`new\` (on home page or when clicking on "New Thread" button) / \`thread\` (on thread page) / \`all\` (everywhere)
  1555. - \`hide\`: hide the tag from the tag list
  1556. - \`link\`: link to a URL, e.g. \`<link:https://example.com>\`, can be used for collections. only one link per tag is supported.
  1557. - \`link-target\`: target of the link, e.g. \`<link-target:_blank>\` (opens in new tab), default is \`_self\` (same tab).
  1558. - \`icon\`: Lucide icon name, e.g. \`<icon:arrow-right>\`. see [lucide icons](https://lucide.dev/icons). prefix \`td:\` is used for [TDesign icons](https://tdesign.tencent.com/design/icon-en#header-69). prefix \`l:\` for Lucide icons is implicit and can be omitted.
  1559. - \`toggle-mode\`: makes the tag work as a toggle button. When toggled on (highlighted), a special cyan/green outline appears around the submit button. Click this enhanced submit button to apply all toggled tag actions before submitting. Toggle status is saved between sessions. No parameters needed - just use \`<toggle-mode>\`.
  1560. - \`set-mode\`: set the query mode: \`pro\` or \`research\`, e.g. \`<set-mode:pro>\`
  1561. - \`set-model\`: set the model, e.g. \`<set-model:claude-3-7-sonnet-thinking>\`
  1562. - \`set-sources\`: set the sources, e.g. \`<set-sources:001>\` for disabled first source (web), disabled second source (academic), enabled third source (social)
  1563. - \`auto-submit\`: automatically submit the query after the tag is clicked (applies after other tag actions like \`set-mode\` or \`set-model\`), e.g. \`<auto-submit>\`
  1564. - \`dir\`: unique identifier for a directory tag (it will not insert text into prompt)
  1565. - \`in-dir\`: identifier of the parent directory this tag belongs to
  1566. - \`fence\`: unique identifier for a fence definition (hidden by default)
  1567. - \`in-fence\`: identifier of the fence this tag belongs to
  1568. - \`fence-width\`: CSS width for a fence, e.g. \`<fence-width:10em>\`
  1569. - \`fence-border-style\`: CSS border style for a fence (e.g., solid, dashed, dotted)
  1570. - \`fence-border-color\`: CSS color or a palette \`%\` syntax for a fence border
  1571. - \`fence-border-width\`: CSS width for a fence border
  1572.  
  1573. ---
  1574.  
  1575. | String | Replacement | Example |
  1576. |---|---|---|
  1577. | \`\\n\` | newline | |
  1578. | \`$$time$$\` | current time | \`23:05\` |
  1579. | \`$$wrap$$\` | sets position where existing text will be inserted | |
  1580.  
  1581. ---
  1582.  
  1583. Examples:
  1584. \`\`\`
  1585. stable diffusion web ui - <label:SDWU>
  1586. , prefer concise modern syntax and style, <position:caret><label:concise modern>
  1587. tell me a joke<label:Joke><tooltip:>
  1588. tell me a joke<label:Joke & Submit><auto-submit>
  1589. <label:Sonnet><toggle-mode><set-model:claude-3-7-sonnet-thinking><icon:brain>
  1590. <toggle-mode><label:Add Note><position:after><color:%2>\n\nNOTE: This is a toggle-mode note appended to the end of prompt
  1591. \`\`\`
  1592.  
  1593. Directory example:
  1594. \`\`\`
  1595. <dir:games>Games<icon:gamepad-2>
  1596. <in-dir:games>FFXIV: <color:%15><label:FFXIV>
  1597. <in-dir:games>Vintage Story - <label:VS>
  1598. \`\`\`
  1599.  
  1600. Fence example:
  1601. \`\`\`
  1602. <fence:anime><fence-border-style:dashed><fence-border-color:%10>
  1603. <in-fence:anime>Shounen
  1604. <in-fence:anime>Seinen
  1605. <in-fence:anime>Shoujo
  1606. \`\`\`
  1607.  
  1608. Another fence example:
  1609. \`\`\`
  1610. <fence:programming><fence-border-style:solid><fence-border-color:%20>
  1611. <in-fence:programming>Haskell
  1612. <in-fence:programming>Raku<label:🦋>
  1613. \`\`\`
  1614. `.trim();
  1615.  
  1616. const defaultTagColor = '#282828';
  1617.  
  1618. const TAGS_PALETTE_COLORS_NUM = 16;
  1619. const TAGS_PALETTE_CLASSIC = Object.freeze((() => {
  1620.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1621.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1622.   return _.flow(
  1623.     _.map(x => startH + x * step, _),
  1624.     _.map(h => color2k.hsla(h, startS, startL, startA), _),
  1625.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1626.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1627. })());
  1628.  
  1629. const TAGS_PALETTE_PASTEL = Object.freeze((() => {
  1630.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1631.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1632.   return _.flow(
  1633.     _.map(x => startH + x * step, _),
  1634.     _.map(h => color2k.hsla(h, startS - 0.2, startL + 0.2, startA), _),
  1635.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1636.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1637. })());
  1638.  
  1639. const TAGS_PALETTE_GRIM = Object.freeze((() => {
  1640.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1641.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1642.   return _.flow(
  1643.     _.map(x => startH + x * step, _),
  1644.     _.map(h => color2k.hsla(h, startS - 0.6, startL - 0.3, startA), _),
  1645.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1646.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1647. })());
  1648.  
  1649. const TAGS_PALETTE_DARK = Object.freeze((() => {
  1650.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1651.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1652.   return _.flow(
  1653.     _.map(x => startH + x * step, _),
  1654.     _.map(h => color2k.hsla(h, startS, startL - 0.4, startA), _),
  1655.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1656.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1657. })());
  1658.  
  1659. const TAGS_PALETTE_GRAY = Object.freeze((() => {
  1660.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1661.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(0, 0, step * x, 1));
  1662. })());
  1663.  
  1664. const TAGS_PALETTE_CYAN = Object.freeze((() => {
  1665.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1666.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1667.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(startH, startS, step * x, 1));
  1668. })());
  1669.  
  1670. const TAGS_PALETTE_TRANSPARENT = Object.freeze((() => {
  1671.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1672.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(0, 0, 0, step * x));
  1673. })());
  1674.  
  1675. const TAGS_PALETTE_HACKER = Object.freeze((() => {
  1676.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1677.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(120, step * x, step * x * 0.5, 1));
  1678. })());
  1679.  
  1680. const TAGS_PALETTES = Object.freeze({
  1681.   CLASSIC: TAGS_PALETTE_CLASSIC,
  1682.   PASTEL: TAGS_PALETTE_PASTEL,
  1683.   GRIM: TAGS_PALETTE_GRIM,
  1684.   DARK: TAGS_PALETTE_DARK,
  1685.   GRAY: TAGS_PALETTE_GRAY,
  1686.   CYAN: TAGS_PALETTE_CYAN,
  1687.   TRANSPARENT: TAGS_PALETTE_TRANSPARENT,
  1688.   HACKER: TAGS_PALETTE_HACKER,
  1689.   CUSTOM: 'CUSTOM',
  1690. });
  1691.  
  1692. const convertColorInPaletteFormat = currentPalette => value => currentPalette[parseInt(dropStr(1)(value), 10)] ?? defaultTagColor;
  1693.  
  1694. const TAG_HOME_PAGE_LAYOUT = {
  1695.   DEFAULT: 'default',
  1696.   COMPACT: 'compact',
  1697.   WIDER: 'wider',
  1698.   WIDE: 'wide',
  1699.   EXTRA_WIDE: 'extra-wide',
  1700. };
  1701.  
  1702. const parseBinaryState = binaryStr => {
  1703.   if (!/^[01-]+$/.test(binaryStr)) {
  1704.     throw new Error('Invalid binary state: ' + binaryStr);
  1705.   }
  1706.   return binaryStr.split('').map(bit => bit === '1' ? true : bit === '0' ? false : null);
  1707. };
  1708.  
  1709. const processTagField = currentPalette => name => value => {
  1710.   if (name === 'color' && value.startsWith('%')) return convertColorInPaletteFormat(currentPalette)(value);
  1711.   if (name === 'hide') return true;
  1712.   if (name === 'auto-submit') return true;
  1713.   if (name === 'toggle-mode') return true;
  1714.   if (name === 'set-sources') return parseBinaryState(value);
  1715.   return value;
  1716. };
  1717.  
  1718. const tagLineRegex = /<(label|position|color|tooltip|target|hide|link|link-target|icon|dir|in-dir|fence|in-fence|fence-border-style|fence-border-color|fence-border-width|fence-width|set-mode|set-model|auto-submit|set-sources|toggle-mode)(?::([^<>]*))?>/g;
  1719. const parseOneTagLine = currentPalette => line =>
  1720.   Array.from(line.matchAll(tagLineRegex)).reduce(
  1721.     (acc, match) => {
  1722.       const [fullMatch, field, value] = match;
  1723.       const processedValue = processTagField(currentPalette)(field)(value);
  1724.       return {
  1725.         ...acc,
  1726.         [_.camelCase(field)]: processedValue,
  1727.         text: acc.text.replace(fullMatch, '').replace(/\\n/g, '\n'),
  1728.       };
  1729.     },
  1730.     {
  1731.       text: line,
  1732.       color: defaultTagColor,
  1733.       target: TAG_CONTAINER_TYPE.NEW,
  1734.       hide: false,
  1735.       'link-target': '_self',
  1736.     }
  1737.   );
  1738.  
  1739. const parseTagsText = text => {
  1740.   const lines = text.split('\n').filter(tag => tag.trim().length > 0);
  1741.   const palette = getPalette(loadConfig()?.tagPalette);
  1742.   return lines.map(parseOneTagLine(palette)).map((x, i) => ({ ...x, originalIndex: i }));
  1743. };
  1744.  
  1745. const getTagsContainer = () => $c(tagsContainerCls);
  1746.  
  1747. const posFromTag = tag => Object.values(TAG_POSITION).includes(tag.position) ? tag.position : TAG_POSITION.BEFORE;
  1748.  
  1749. const splitTextAroundWrap = (text) => {
  1750.   const parts = text.split('$$wrap$$');
  1751.   return {
  1752.     before: parts[0] || '',
  1753.     after: parts[1] || '',
  1754.   };
  1755. };
  1756.  
  1757. const applyTagToString = (tag, val, caretPos) => {
  1758.   const { text } = tag;
  1759.   const timeString = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
  1760.   const textAfterTime = text.replace(/\$\$time\$\$/g, timeString);
  1761.   const { before: processedTextBefore, after: processedTextAfter } = splitTextAroundWrap(textAfterTime);
  1762.   const processedText = processedTextBefore;
  1763.  
  1764.   switch (posFromTag(tag)) {
  1765.     case TAG_POSITION.BEFORE:
  1766.       return `${processedText}${val}`;
  1767.     case TAG_POSITION.AFTER:
  1768.       return `${val}${processedText}`;
  1769.     case TAG_POSITION.CARET:
  1770.       return `${takeStr(caretPos)(val)}${processedText}${dropStr(caretPos)(val)}`;
  1771.     case TAG_POSITION.WRAP:
  1772.       return `${processedTextBefore}${val}${processedTextAfter}`;
  1773.     default:
  1774.       throw new Error(`Invalid position: ${tag.position}`);
  1775.   }
  1776. };
  1777.  
  1778. const getPromptAreaFromTagsContainer = tagsContainerEl => PP.getAnyPromptArea(tagsContainerEl.parent());
  1779.  
  1780. const getPromptAreaWrapperFromTagsContainer = tagsContainerEl => PP.getAnyPromptAreaWrapper(tagsContainerEl.parent());
  1781.  
  1782. const getPalette = paletteName => {
  1783.   // Add this check for 'CUSTOM'
  1784.   if (paletteName === TAGS_PALETTES.CUSTOM) {
  1785.     // Use tagPaletteCustom from config or default if not found
  1786.     return loadConfigOrDefault()?.tagPaletteCustom ?? defaultConfig.tagPaletteCustom;
  1787.   }
  1788.   // Fallback to predefined palettes or CLASSIC as default
  1789.   const palette = TAGS_PALETTES[paletteName];
  1790.   // Check if palette is an array before returning, otherwise return default
  1791.   return Array.isArray(palette) ? palette : TAGS_PALETTES.CLASSIC;
  1792. };
  1793.  
  1794. // Function to update a toggle tag's visual state
  1795. const updateToggleTagState = (tagEl, tag, newToggleState) => {
  1796.   if (!tagEl || !tag) return;
  1797.  
  1798.   const isTagLight = color2k.getLuminance(tag.color) > loadConfigOrDefault().tagLuminanceThreshold;
  1799.   const colorMod = isTagLight ? color2k.darken : color2k.lighten;
  1800.   const hoverBgColor = color2k.toRgba(colorMod(tag.color, 0.1));
  1801.  
  1802.   // For toggle tags, adjust the color based on toggle state
  1803.   const toggledColor = newToggleState ? color2k.lighten(tag.color, 0.3) : tag.color;
  1804.  
  1805.   // Update the tag element
  1806.   tagEl.attr('data-toggled', newToggleState);
  1807.   tagEl.css('background-color', toggledColor);
  1808.   tagEl.attr('data-hoverBgColor', color2k.toHex(hoverBgColor));
  1809.  
  1810.   // Update tooltip if using default
  1811.   if (!tag.tooltip) {
  1812.     const newTooltip = `${logPrefix} Toggle ${newToggleState ? 'off' : 'on'} - ${tag.label || 'tag'}`;
  1813.     tagEl.prop('title', newTooltip);
  1814.   }
  1815. };
  1816.  
  1817. const createTag = containerEl => isPreview => tag => {
  1818.   if (tag.hide) return null;
  1819.  
  1820.   // Generate a unique identifier for this toggle tag
  1821.   const tagId = generateToggleTagId(tag);
  1822.  
  1823.   // Get saved toggle state if this is a toggle-mode tag and tagToggleSave is enabled
  1824.   const config = loadConfigOrDefault();
  1825.   // Make sure tagToggledStates exists to prevent errors
  1826.   if (!config.tagToggledStates) {
  1827.     config.tagToggledStates = {};
  1828.     saveConfig(config);
  1829.   }
  1830.   // TODO: rewrite most of code with _phTagToggleState - new util functions/classes for working with it
  1831.   // Check both the in-memory toggle state and the saved toggle state (if tagToggleSave is enabled)
  1832.   // In-memory toggle state takes precedence during the current session
  1833.   const inMemoryToggleState = window._phTagToggleState && tagId ? window._phTagToggleState[tagId] : undefined;
  1834.   const savedToggleState = (tagId && config.tagToggleSave) ? config.tagToggledStates[tagId] || false : false;
  1835.   const isToggled = inMemoryToggleState !== undefined ? inMemoryToggleState : savedToggleState;
  1836.  
  1837.   const labelString = tag.label ?? tag.text;
  1838.   const isTagLight = color2k.getLuminance(tag.color) > loadConfig().tagLuminanceThreshold;
  1839.   const colorMod = isTagLight ? color2k.darken : color2k.lighten;
  1840.   const hoverBgColor = color2k.toRgba(colorMod(tag.color, 0.1));
  1841.   const borderColor = color2k.toRgba(colorMod(tag.color, loadConfig().tagTweakRichBorderColor ? 0.2 : 0.1));
  1842.  
  1843.   const clickHandler = async (evt) => {
  1844.     debugLog('TAG clicked', tag, evt);
  1845.     if (tag.link) return;
  1846.  
  1847.     // Handle toggle mode
  1848.     if (tag.toggleMode) {
  1849.       const el = jq(evt.currentTarget);
  1850.  
  1851.       // Get the current toggle state directly from the element
  1852.       // This is critical for handling multiple clicks correctly
  1853.       const currentToggleState = el.attr('data-toggled') === 'true';
  1854.       const newToggleState = !currentToggleState;
  1855.  
  1856.       // Update the toggle state in config only if tagToggleSave is enabled
  1857.       // Make sure tagId is valid before using it
  1858.       if (tagId) {
  1859.         const config = loadConfigOrDefault();
  1860.  
  1861.         // Create a temporary in-memory toggle state for visual indication
  1862.         // We'll track this regardless of tagToggleSave setting
  1863.         window._phTagToggleState = window._phTagToggleState || {};
  1864.         window._phTagToggleState[tagId] = newToggleState;
  1865.  
  1866.         // Only save the toggle state permanently if the tagToggleSave setting is enabled
  1867.         if (config.tagToggleSave) {
  1868.           const updatedConfig = {
  1869.             ...config,
  1870.             tagToggledStates: {
  1871.               ...config.tagToggledStates,
  1872.               [tagId]: newToggleState
  1873.             }
  1874.           };
  1875.           saveConfig(updatedConfig);
  1876.         }
  1877.  
  1878.         // Update visual indicators for submit buttons
  1879.         updateToggleIndicators();
  1880.  
  1881.         // Update the tag's visual state
  1882.         updateToggleTagState(el, tag, newToggleState);
  1883.       } else {
  1884.         debugLog('Error: Invalid toggle tag ID', tag);
  1885.       }
  1886.  
  1887.       return;
  1888.     }
  1889.  
  1890.     // Regular tag handling for non-toggle tags
  1891.     try {
  1892.       // Apply all tag's actions and wait for them to complete
  1893.       await applyTagActions(tag);
  1894.       const $el = jq(evt.currentTarget);
  1895.  
  1896.       // Handle auto submit for this tag after all actions are applied
  1897.       if (tag.autoSubmit) {
  1898.         const $tagsContainer = $el.closest(`.${tagsContainerCls}`);
  1899.         const $promptAreaWrapper = getPromptAreaWrapperFromTagsContainer($tagsContainer);
  1900.         await applyToggledTagsOnSubmit($promptAreaWrapper);
  1901.  
  1902.         const submitButton = PP.getSubmitButtonAnyExceptMic();
  1903.         debugLog('[createTag] clickHandler: submitButton=', submitButton);
  1904.         if (submitButton.length) {
  1905.           if (submitButton.length > 1) {
  1906.             debugLog('[createTag] clickHandler: multiple submit buttons found, using first one');
  1907.           }
  1908.           submitButton.first().click();
  1909.         } else {
  1910.           debugLog('[createTag] clickHandler: no submit button found');
  1911.         }
  1912.       } else {
  1913.         // Focus the prompt area if we're not auto-submitting
  1914.         const tagsContainer = $el.closest(`.${tagsContainerCls}`);
  1915.         if (tagsContainer.length) {
  1916.           const promptArea = getPromptAreaFromTagsContainer(tagsContainer);
  1917.           if (promptArea.length) {
  1918.             promptArea[0].focus();
  1919.           }
  1920.         }
  1921.       }
  1922.     } catch (error) {
  1923.       logError('Error applying tag actions:', error);
  1924.     }
  1925.   };
  1926.  
  1927.   const tagFont = loadConfig().tagFont;
  1928.  
  1929.   // Create tooltip message based on tag type - without using let
  1930.   const tooltipMsg = tag.link
  1931.     ? `${logPrefix} Open link: ${tag.link}`
  1932.     : tag.toggleMode
  1933.       ? `${logPrefix} Toggle ${isToggled ? 'off' : 'on'} - ${tag.label || 'tag'}`
  1934.       : `${logPrefix} Insert \`${tag.text}\` at position \`${posFromTag(tag)}\``;
  1935.  
  1936.   const defaultTooltip = tooltipMsg;
  1937.  
  1938.   // For toggle tags, adjust the color based on toggle state
  1939.   const toggledColor = isToggled ? color2k.lighten(tag.color, 0.3) : tag.color;
  1940.   const backgroundColor = tag.toggleMode ? toggledColor : tag.color;
  1941.  
  1942.   const tagEl = jq(`<div/>`)
  1943.     .addClass(tagCls)
  1944.     .prop('title', tag.tooltip ?? defaultTooltip)
  1945.     .attr('data-tag', JSON.stringify(tag))
  1946.     .css({
  1947.       backgroundColor,
  1948.       borderColor,
  1949.       fontFamily: tagFont,
  1950.       borderRadius: `${loadConfig().tagRoundness}px`,
  1951.     })
  1952.     .attr('data-color', color2k.toHex(tag.color))
  1953.     .attr('data-hoverBgColor', color2k.toHex(hoverBgColor))
  1954.     .attr('data-font', tagFont)
  1955.     .attr('data-toggled', isToggled.toString())
  1956.     .on('mouseenter', event => {
  1957.       jq(event.currentTarget).css('background-color', hoverBgColor);
  1958.     })
  1959.     .on('mouseleave', event => {
  1960.       const el = jq(event.currentTarget);
  1961.       const isCurrentToggled = el.attr('data-toggled') === 'true';
  1962.       const currentColor = tag.toggleMode && isCurrentToggled ?
  1963.         color2k.lighten(tag.color, 0.3) : tag.color;
  1964.       el.css('background-color', currentColor);
  1965.     });
  1966.  
  1967.   if (isTagLight) {
  1968.     tagEl.addClass(tagDarkTextCls);
  1969.   }
  1970.  
  1971.   if (loadConfig()?.tagTweakNoBorder) {
  1972.     tagEl.addClass(tagTweakNoBorderCls);
  1973.   }
  1974.   if (loadConfig()?.tagTweakSlimPadding) {
  1975.     tagEl.addClass(tagTweakSlimPaddingCls);
  1976.   }
  1977.   if (loadConfig()?.tagTweakTextShadow) {
  1978.     tagEl.addClass(tagTweakTextShadowCls);
  1979.   }
  1980.  
  1981.   const textEl = jq('<span/>')
  1982.     .text(labelString)
  1983.     .css({
  1984.       'font-weight': loadConfig().tagBold ? 'bold' : 'normal',
  1985.       'font-style': loadConfig().tagItalic ? 'italic' : 'normal',
  1986.       'font-size': `${loadConfig().tagFontSize}px`,
  1987.       'transform': `translateY(${loadConfig().tagTextYOffset}px)`,
  1988.     });
  1989.  
  1990.   if (tag.icon) {
  1991.     const iconEl = jq('<img/>')
  1992.       .attr('src', getIconUrl(tag.icon))
  1993.       .addClass(tagIconCls)
  1994.       .css({
  1995.         'width': `${loadConfig().tagIconSize}px`,
  1996.         'height': `${loadConfig().tagIconSize}px`,
  1997.         'transform': `translateY(${loadConfig().tagIconYOffset}px)`,
  1998.       });
  1999.     if (!labelString) {
  2000.       iconEl.css({
  2001.         marginLeft: '0',
  2002.         marginRight: '0',
  2003.       });
  2004.     }
  2005.     textEl.prepend(iconEl);
  2006.   }
  2007.  
  2008.   tagEl.append(textEl);
  2009.  
  2010.   if (tag.link) {
  2011.     const linkEl = jq('<a/>')
  2012.       .attr('href', tag.link)
  2013.       .attr('target', tag.linkTarget)
  2014.       .css({
  2015.         textDecoration: 'none',
  2016.         color: 'inherit'
  2017.       });
  2018.     textEl.wrap(linkEl);
  2019.   }
  2020.  
  2021.   if (!isPreview && !tag.link && !tag.dir) {
  2022.     tagEl.click(clickHandler);
  2023.   }
  2024.   containerEl.append(tagEl);
  2025.  
  2026.   return tagEl;
  2027. };
  2028.  
  2029. const genDebugFakeTags = () =>
  2030.   _.times(TAGS_PALETTE_COLORS_NUM, x => `Fake ${x} ${_.times(x / 3).map(() => 'x').join('')}<color:%${x % TAGS_PALETTE_COLORS_NUM}>`)
  2031.     .join('\n');
  2032.  
  2033. const getTagContainerType = containerEl => {
  2034.   if (containerEl.hasClass(threadTagContainerCls) || containerEl.hasClass(tagsPreviewThreadCls)) return TAG_CONTAINER_TYPE.THREAD;
  2035.   if (containerEl.hasClass(newTagContainerCls) || containerEl.hasClass(tagsPreviewNewCls)) return TAG_CONTAINER_TYPE.NEW;
  2036.   if (containerEl.hasClass(newTagContainerInCollectionCls) || containerEl.hasClass(tagsPreviewNewInCollectionCls)) return TAG_CONTAINER_TYPE.NEW_IN_COLLECTION;
  2037.   return null;
  2038. };
  2039.  
  2040. const getPromptWrapperTagContainerType = promptWrapper => {
  2041.   if (PP.getPromptAreaOfNewThread(promptWrapper).length) return TAG_CONTAINER_TYPE.NEW;
  2042.   if (PP.getPromptAreaOnThread(promptWrapper).length) return TAG_CONTAINER_TYPE.THREAD;
  2043.   if (PP.getPromptAreaOnCollection(promptWrapper).length) return TAG_CONTAINER_TYPE.NEW_IN_COLLECTION;
  2044.   return null;
  2045. };
  2046.  
  2047. const isTagRelevantForContainer = containerType => tag =>
  2048.   containerType === tag.target
  2049.   || (containerType === TAG_CONTAINER_TYPE.NEW_IN_COLLECTION && tag.target === TAG_CONTAINER_TYPE.NEW)
  2050.   || tag.target === TAG_CONTAINER_TYPE.ALL;
  2051.  
  2052. const tagContainerTypeToTagContainerClass = {
  2053.   [TAG_CONTAINER_TYPE.THREAD]: threadTagContainerCls,
  2054.   [TAG_CONTAINER_TYPE.NEW]: newTagContainerCls,
  2055.   [TAG_CONTAINER_TYPE.NEW_IN_COLLECTION]: newTagContainerInCollectionCls,
  2056. };
  2057.  
  2058. const currentUrlIsSettingsPage = () => window.location.pathname.includes('/settings/');
  2059.  
  2060. const refreshTags = ({ force = false } = {}) => {
  2061.   if (!loadConfigOrDefault()?.tagsEnabled) return;
  2062.   const promptWrapper = PP.getPromptAreaWrapperOfNewThread()
  2063.     .add(PP.getPromptAreaWrapperOnThread())
  2064.     .add(PP.getPromptAreaWrapperOnCollection())
  2065.     .filter((_, rEl) => {
  2066.       const isPreview = Boolean(jq(rEl).attr('data-preview'));
  2067.       return isPreview || !currentUrlIsSettingsPage();
  2068.     });
  2069.   if (!promptWrapper.length) {
  2070.     debugLogTags('no prompt area found');
  2071.   }
  2072.   // debugLogTags('promptWrappers', promptWrapper);
  2073.   const allTags = _.flow(
  2074.     x => x + (unsafeWindow.phFakeTags ? `${nl}${genDebugFakeTags()}${nl}` : ''),
  2075.     parseTagsText,
  2076.   )(loadConfig()?.tagsText ?? defaultConfig.tagsText);
  2077.   debugLogTags('refreshing allTags', allTags);
  2078.  
  2079.   const createContainer = (promptWrapper) => {
  2080.     const el = jq(`<div/>`).addClass(tagsContainerCls);
  2081.     const tagContainerType = getPromptWrapperTagContainerType(promptWrapper);
  2082.     if (tagContainerType) {
  2083.       const clsToAdd = tagContainerTypeToTagContainerClass[tagContainerType];
  2084.       if (!clsToAdd) {
  2085.         console.error('Unexpected tagContainerType:', tagContainerType, { promptWrapper });
  2086.       }
  2087.       el.addClass(clsToAdd);
  2088.     }
  2089.     return el;
  2090.   };
  2091.   promptWrapper.each((_, rEl) => {
  2092.     const el = jq(rEl);
  2093.     if (el.parent().find(`.${tagsContainerCls}`).length) {
  2094.       el.parent().addClass(queryBoxCls);
  2095.       return;
  2096.     }
  2097.     el.before(createContainer(el));
  2098.   });
  2099.  
  2100.   const currentPalette = getPalette(loadConfig().tagPalette);
  2101.  
  2102.   const createFence = (fence) => {
  2103.     const fenceEl = jq('<div/>')
  2104.       .addClass(tagFenceCls)
  2105.       .css({
  2106.         'border-style': fence.fenceBorderStyle ?? 'solid',
  2107.         'border-color': fence.fenceBorderColor?.startsWith('%')
  2108.           ? convertColorInPaletteFormat(currentPalette)(fence.fenceBorderColor)
  2109.           : fence.fenceBorderColor ?? defaultTagColor,
  2110.         'border-width': fence.fenceBorderWidth ?? '1px',
  2111.       })
  2112.       .attr('data-tag', JSON.stringify(fence))
  2113.       ;
  2114.     const fenceContentEl = jq('<div/>')
  2115.       .addClass(tagFenceContentCls)
  2116.       .css({
  2117.         'width': fence.fenceWidth ?? '',
  2118.       })
  2119.       ;
  2120.     fenceEl.append(fenceContentEl);
  2121.     return { fenceEl, fenceContentEl };
  2122.   };
  2123.  
  2124.   const createDirectory = () => {
  2125.     const directoryEl = jq('<div/>').addClass(tagDirectoryCls);
  2126.     const directoryContentEl = jq('<div/>').addClass(tagDirectoryContentCls);
  2127.     directoryEl.append(directoryContentEl);
  2128.     return { directoryEl, directoryContentEl };
  2129.   };
  2130.  
  2131.   const containerEls = getTagsContainer();
  2132.   containerEls.each((_i, rEl) => {
  2133.     const containerEl = jq(rEl);
  2134.     const isPreview = Boolean(containerEl.attr('data-preview'));
  2135.  
  2136.     const tagContainerTypeFromPromptWrapper = getPromptWrapperTagContainerType(containerEl.nthParent(2));
  2137.     const prelimTagContainerType = getTagContainerType(containerEl);
  2138.     if (tagContainerTypeFromPromptWrapper !== prelimTagContainerType && !isPreview) {
  2139.       debugLog('tagContainerTypeFromPromptWrapper !== prelimTagContainerType', { tagContainerTypeFromPromptWrapper, prelimTagContainerType, containerEl, isPreview });
  2140.       containerEl
  2141.         .empty()
  2142.         .removeClass(threadTagContainerCls, newTagContainerCls, newTagContainerInCollectionCls)
  2143.         .addClass(tagContainerTypeToTagContainerClass[tagContainerTypeFromPromptWrapper])
  2144.         ;
  2145.     } else {
  2146.       if (!isPreview) {
  2147.         debugLogTags('tagContainerTypeFromPromptWrapper === prelimTagContainerType', { tagContainerTypeFromPromptWrapper, prelimTagContainerType, containerEl, isPreview });
  2148.       }
  2149.     }
  2150.  
  2151.     // TODO: use something else than lodash/fp. in following functions it behaved randomly very weirdly
  2152.     // e.g. partial application of map resulting in an empty array or sortBy sorting field name instead
  2153.     // of input array. possibly inconsistent normal FP order of arguments
  2154.     const mapParseAttrTag = xs => xs.map(el => JSON.parse(el.dataset.tag));
  2155.     const sortByOriginalIndex = xs => [...xs].sort((a, b) => a.originalIndex - b.originalIndex);
  2156.     const tagElsInCurrentContainer = containerEl.find(`.${tagCls}, .${tagFenceCls}`).toArray();
  2157.     const filterOutHidden = filter(x => !x.hide);
  2158.     const currentTags = _.flow(
  2159.       mapParseAttrTag,
  2160.       sortByOriginalIndex,
  2161.       filterOutHidden,
  2162.       _.uniq,
  2163.     )(tagElsInCurrentContainer);
  2164.     const tagContainerType = getTagContainerType(containerEl);
  2165.     const tagsForThisContainer = _.flow(
  2166.       filter(isTagRelevantForContainer(tagContainerType)),
  2167.       filterOutHidden,
  2168.       sortByOriginalIndex,
  2169.     )(allTags);
  2170.     debugLogTags('tagContainerType =', tagContainerType, ', current tags =', currentTags, ', tagsForThisContainer =', tagsForThisContainer, ', tagElsInCurrentContainer =', tagElsInCurrentContainer);
  2171.     if (_.isEqual(currentTags, tagsForThisContainer) && !force) {
  2172.       debugLogTags('no tags changed');
  2173.       return;
  2174.     }
  2175.     const diff = jsondiffpatch.diff(currentTags, tagsForThisContainer);
  2176.     const changedTags = jsondiffpatch.formatters.console.format(diff);
  2177.     debugLogTags('changedTags', changedTags);
  2178.     containerEl.empty();
  2179.     const tagHomePageLayout = loadConfig()?.tagHomePageLayout;
  2180.     if (!isPreview) {
  2181.       if ((tagContainerType === TAG_CONTAINER_TYPE.NEW || tagContainerType === TAG_CONTAINER_TYPE.NEW_IN_COLLECTION)) {
  2182.         if (tagContainerType === TAG_CONTAINER_TYPE.NEW_IN_COLLECTION) {
  2183.           // only compact layout is supported for new in collection
  2184.           if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.COMPACT) {
  2185.             containerEl.addClass(tagContainerCompactCls);
  2186.           }
  2187.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.COMPACT) {
  2188.           containerEl.addClass(tagContainerCompactCls);
  2189.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.WIDER) {
  2190.           containerEl.addClass(tagContainerWiderCls);
  2191.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.WIDE) {
  2192.           containerEl.addClass(tagContainerWideCls);
  2193.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.EXTRA_WIDE) {
  2194.           containerEl.addClass(tagContainerExtraWideCls);
  2195.         } else {
  2196.           containerEl.removeClass(`${tagContainerCompactCls} ${tagContainerWiderCls} ${tagContainerWideCls} ${tagContainerExtraWideCls}`);
  2197.         }
  2198.         const extraMargin = loadConfig()?.tagContainerExtraBottomMargin || 0;
  2199.         containerEl.css('margin-bottom', `${extraMargin}em`);
  2200.       }
  2201.     }
  2202.  
  2203.     const fences = {};
  2204.     const directories = {};
  2205.  
  2206.     const fencesWrapperEl = jq('<div/>').addClass(tagAllFencesWrapperCls);
  2207.     const restWrapperEl = jq('<div/>').addClass(tagRestOfTagsWrapperCls);
  2208.  
  2209.     tagsForThisContainer.forEach(tag => {
  2210.       const { fence, dir, inFence, inDir } = tag;
  2211.  
  2212.       const getOrCreateDirectory = dirName => {
  2213.         if (!directories[dirName]) directories[dirName] = createDirectory();
  2214.         return directories[dirName];
  2215.       };
  2216.  
  2217.       const getTagContainer = () => {
  2218.         if (fence) {
  2219.           if (!fences[fence]) fences[fence] = createFence(tag);
  2220.           return fences[fence].fenceContentEl;
  2221.         } else if (dir && inFence) {
  2222.           if (!fences[inFence]) {
  2223.             console.error(`fence ${inFence} for tag not found`, tag);
  2224.             return null;
  2225.           }
  2226.           const { directoryEl } = getOrCreateDirectory(dir);
  2227.           fences[inFence].fenceContentEl.append(directoryEl);
  2228.           return directoryEl;
  2229.         } else if (dir) {
  2230.           const { directoryEl } = getOrCreateDirectory(dir);
  2231.           restWrapperEl.append(directoryEl);
  2232.           return directoryEl;
  2233.         } else if (inFence) {
  2234.           if (!fences[inFence]) {
  2235.             console.error(`fence ${inFence} for tag not found`, tag);
  2236.             return null;
  2237.           }
  2238.           return fences[inFence].fenceContentEl;
  2239.         } else if (inDir) {
  2240.           if (!directories[inDir]) {
  2241.             console.error(`directory ${inDir} for tag not found`, tag);
  2242.             return null;
  2243.           }
  2244.           return directories[inDir].directoryContentEl;
  2245.         } else {
  2246.           return restWrapperEl;
  2247.         }
  2248.       };
  2249.  
  2250.       const tagContainer = getTagContainer();
  2251.       if (tagContainer && !fence) {
  2252.         createTag(tagContainer)(isPreview)(tag);
  2253.       }
  2254.     });
  2255.  
  2256.     Object.values(fences).forEach(({ fenceEl }) => fencesWrapperEl.append(fenceEl));
  2257.     containerEl.append(fencesWrapperEl).append(restWrapperEl);
  2258.   });
  2259. };
  2260.  
  2261. const setupTags = () => {
  2262.   debugLog('setting up tags');
  2263.   setInterval(refreshTags, 500);
  2264. };
  2265.  
  2266. const ICON_REPLACEMENT_MODE = Object.freeze({
  2267.   OFF: 'Off',
  2268.   LUCIDE1: 'Lucide 1',
  2269.   LUCIDE2: 'Lucide 2',
  2270.   LUCIDE3: 'Lucide 3',
  2271.   TDESIGN1: 'TDesign 1',
  2272.   TDESIGN2: 'TDesign 2',
  2273.   TDESIGN3: 'TDesign 3',
  2274. });
  2275.  
  2276. const leftPanelIconMappingsToLucide1 = Object.freeze({
  2277.   'search': 'search',
  2278.   'discover': 'telescope',
  2279.   'spaces': 'shapes',
  2280. });
  2281.  
  2282. const leftPanelIconMappingsToLucide2 = Object.freeze({
  2283.   'search': 'house',
  2284.   'discover': 'compass',
  2285.   'spaces': 'square-stack',
  2286.   'library': 'archive',
  2287. });
  2288.  
  2289. const leftPanelIconMappingsToLucide3 = Object.freeze({
  2290.   'search': 'search',
  2291.   'discover': 'telescope',
  2292.   'spaces': 'bot',
  2293.   'library': 'folder-open',
  2294. });
  2295.  
  2296. const leftPanelIconMappingsToTDesign1 = Object.freeze({
  2297.   'search': 'search',
  2298.   'discover': 'compass-filled',
  2299.   'spaces': 'grid-view',
  2300.   'library': 'book',
  2301. });
  2302.  
  2303. const leftPanelIconMappingsToTDesign2 = Object.freeze({
  2304.   'search': 'search',
  2305.   'discover': 'shutter-filled',
  2306.   'spaces': 'palette-1',
  2307.   'library': 'folder-open-1-filled',
  2308. });
  2309.  
  2310. const leftPanelIconMappingsToTDesign3 = Object.freeze({
  2311.   'search': 'search',
  2312.   'discover': 'banana-filled',
  2313.   'spaces': 'chili-filled',
  2314.   'library': 'barbecue-filled',
  2315. });
  2316.  
  2317. const iconMappings = {
  2318.   LUCIDE1: leftPanelIconMappingsToLucide1,
  2319.   LUCIDE2: leftPanelIconMappingsToLucide2,
  2320.   LUCIDE3: leftPanelIconMappingsToLucide3,
  2321.   TDESIGN1: leftPanelIconMappingsToTDesign1,
  2322.   TDESIGN2: leftPanelIconMappingsToTDesign2,
  2323.   TDESIGN3: leftPanelIconMappingsToTDesign3,
  2324. };
  2325.  
  2326. const MODEL_LABEL_TEXT_MODE = Object.freeze({
  2327.   OFF: 'Off',
  2328.   FULL_NAME: 'Full Name',
  2329.   SHORT_NAME: 'Short Name',
  2330.   PP_MODEL_ID: 'PP Model ID',
  2331.   OWN_NAME_VERSION_SHORT: 'Own Name + Version Short',
  2332.   VERY_SHORT: 'Very Short',
  2333.   FAMILIAR_NAME: 'Familiar Name',
  2334. });
  2335.  
  2336. const MODEL_LABEL_STYLE = Object.freeze({
  2337.   OFF: 'Off',
  2338.   NO_TEXT: 'No text',
  2339.   JUST_TEXT: 'Just Text',
  2340.   BUTTON_SUBTLE: 'Button Subtle',
  2341.   BUTTON_WHITE: 'Button White',
  2342.   BUTTON_CYAN: 'Button Cyan',
  2343. });
  2344.  
  2345. const CUSTOM_MODEL_POPOVER_MODE = Object.freeze({
  2346.   OFF: 'Off',
  2347.   SIMPLE_LIST: 'Simple List',
  2348.   COMPACT_LIST: 'Compact List',
  2349.   SIMPLE_GRID: 'Simple 2x Grid',
  2350.   COMPACT_GRID: 'Compact 2x Grid',
  2351. });
  2352.  
  2353. const MODEL_LABEL_ICON_REASONING_MODEL = Object.freeze({
  2354.   OFF: 'Off',
  2355.   LIGHTBULB: 'Lightbulb',
  2356.   BRAIN: 'Brain',
  2357.   MICROCHIP: 'Microchip',
  2358.   COG: 'Cog',
  2359.   BRAIN_COG: 'Brain Cog',
  2360.   CALCULATOR: 'Calculator',
  2361.   BOT: 'Bot',
  2362. });
  2363.  
  2364. const MODEL_LABEL_ICONS = Object.freeze({
  2365.   OFF: 'Off',
  2366.   MONOCHROME: 'Monochrome',
  2367.   COLOR: 'Color',
  2368. });
  2369.  
  2370. const MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS = Object.freeze({
  2371.   OFF: 'Off',
  2372.   SEMI_HIDE: 'Semi hide',
  2373.   HIDE: 'Hide',
  2374. });
  2375.  
  2376. const HIDE_UPGRADE_TO_MAX_ADS_OPTIONS = Object.freeze({
  2377.   OFF: 'Off',
  2378.   SEMI_HIDE: 'Semi-Hide',
  2379.   HIDE: 'Hide',
  2380. });
  2381.  
  2382. const defaultConfig = Object.freeze({
  2383.   // General
  2384.   hideSideMenu: false,
  2385.   slimLeftMenu: false,
  2386.   hideSideMenuLabels: false,
  2387.   hideHomeWidgets: false,
  2388.   hideDiscoverButton: false,
  2389.   hideRelated: false,
  2390.   hideUpgradeToMaxAds: HIDE_UPGRADE_TO_MAX_ADS_OPTIONS.OFF,
  2391.   fixImageGenerationOverlay: false,
  2392.   extraSpaceBellowLastAnswer: false,
  2393.   quickProfileButtonEnabled: false,
  2394.   quickProfiles: [],
  2395.   replaceIconsInMenu: ICON_REPLACEMENT_MODE.OFF,
  2396.   leftMarginOfThreadContent: null,
  2397.  
  2398.   // Model
  2399.   modelLabelTextMode: MODEL_LABEL_TEXT_MODE.OFF,
  2400.   modelLabelStyle: MODEL_LABEL_STYLE.OFF,
  2401.   modelLabelOverwriteCyanIconToGray: false,
  2402.   modelLabelUseIconForReasoningModels: MODEL_LABEL_ICON_REASONING_MODEL.OFF,
  2403.   modelLabelReasoningModelIconColor: '#ffffff',
  2404.   modelLabelRemoveCpuIcon: false,
  2405.   modelLabelLargerIcons: false,
  2406.   modelLabelIcons: MODEL_LABEL_ICONS.OFF,
  2407.   modelPreferBaseModelIcon: false,
  2408.   customModelPopover: CUSTOM_MODEL_POPOVER_MODE.SIMPLE_GRID,
  2409.   modelIconsInPopover: false,
  2410.   modelSelectionListItemsMax: MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS.OFF,
  2411.  
  2412.   // Legacy
  2413.   showCopilot: true,
  2414.   showCopilotNewThread: true,
  2415.   showCopilotRepeatLast: true,
  2416.   showCopilotCopyPlaceholder: true,
  2417.  
  2418.   // Tags
  2419.   tagsEnabled: true,
  2420.   tagsText: '',
  2421.   tagPalette: 'CLASSIC',
  2422.   tagPaletteCustom: ['#000', '#fff', '#ff0', '#f00', '#0f0', '#00f', '#0ff', '#f0f'],
  2423.   tagFont: 'Roboto',
  2424.   tagHomePageLayout: TAG_HOME_PAGE_LAYOUT.DEFAULT,
  2425.   tagContainerExtraBottomMargin: 0,
  2426.   tagLuminanceThreshold: 0.35,
  2427.   tagBold: false,
  2428.   tagItalic: false,
  2429.   tagFontSize: 16,
  2430.   tagIconSize: 16,
  2431.   tagRoundness: 4,
  2432.   tagTextYOffset: 0,
  2433.   tagIconYOffset: 0,
  2434.   tagToggleSave: false,
  2435.   toggleModeHooks: true,
  2436.   tagToggleModeIndicators: true,
  2437.   tagToggledStates: {}, // Store toggle states by tag identifier
  2438.  
  2439.   // Raw
  2440.   mainCaptionHtml: '',
  2441.   mainCaptionHtmlEnabled: false,
  2442.   customJs: '',
  2443.   customJsEnabled: false,
  2444.   customCss: '',
  2445.   customCssEnabled: false,
  2446.   customWidgetsHtml: '',
  2447.   customWidgetsHtmlEnabled: false,
  2448.  
  2449.   // Settings
  2450.   activeSettingsTab: 'general',
  2451.  
  2452.   // Debug
  2453.   debugMode: false,
  2454.   debugTagsMode: false,
  2455.   debugTagsSuppressSubmit: false,
  2456.   autoOpenSettings: false,
  2457.   debugModalCreation: false,
  2458.   debugEventHooks: false,
  2459.   debugReplaceIconsInMenu: false,
  2460.   leftMarginOfThreadContentEnabled: false,
  2461.   leftMarginOfThreadContent: 0,
  2462. });
  2463.  
  2464. // TODO: if still using local storage, at least it should be prefixed with user script name
  2465. const storageKey = 'checkBoxStates';
  2466.  
  2467. const loadConfig = () => {
  2468.   try {
  2469.     // TODO: use storage from GM API
  2470.     const val = JSON.parse(localStorage.getItem(storageKey));
  2471.     // debugLog('loaded config', val);
  2472.     return val;
  2473.   } catch (e) {
  2474.     console.error('Failed to load config, using default', e);
  2475.     return defaultConfig;
  2476.   }
  2477. };
  2478.  
  2479. const loadConfigOrDefault = () => loadConfig() ?? defaultConfig;
  2480.  
  2481. const saveConfig = cfg => {
  2482.   debugLog('saving config', cfg);
  2483.   localStorage.setItem(storageKey, JSON.stringify(cfg));
  2484. };
  2485.  
  2486. const createCheckbox = (id, labelText, onChange) => {
  2487.   logModalCreation('Creating checkbox', { id, labelText });
  2488.   const checkbox = jq(`<input type="checkbox" id=${id}>`);
  2489.   const label = jq(`<label class="checkbox_label" for="${id}">${labelText}</label>`);
  2490.   const checkboxWithLabel = jq('<div class="checkbox_wrapper"></div>').append(checkbox).append(' ').append(label);
  2491.   logModalCreation('checkboxwithlabel', checkboxWithLabel);
  2492.  
  2493.   getSettingsLastTabGroupContent().append(checkboxWithLabel);
  2494.   checkbox.on('change', onChange);
  2495.   return checkbox;
  2496. };
  2497.  
  2498. const createTextArea = (id, labelText, onChange, helpText, links) => {
  2499.   logModalCreation('Creating text area', { id, labelText });
  2500.   const textarea = jq(`<textarea id=${id}></textarea>`);
  2501.   const bookIconHtml = `<img src="${getLucideIconUrl('book-text')}" class="w-4 h-4 invert inline-block"/>`;
  2502.   const labelTextHtml = `<span class="opacity-100">${labelText}</span>`;
  2503.   const label = jq(`<label class="textarea_label">${labelTextHtml}${helpText ? ' ' + bookIconHtml : ''}</label>`);
  2504.   const labelWithLinks = jq('<div/>').addClass('flex flex-row gap-2 mb-2').append(label);
  2505.   const textareaWrapper = jq('<div class="textarea_wrapper"></div>').append(labelWithLinks);
  2506.   if (links) {
  2507.     links.forEach(({ icon, label, url, tooltip }) => {
  2508.       const iconHtml = `<img src="${getIconUrl(icon)}" class="w-4 h-4 invert opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"/>`;
  2509.       const link = jq(`<a href="${url}" target="_blank" class="flex flex-row gap-2 items-center">${icon ? iconHtml : ''}${label ? ' ' + label : ''}</a>`);
  2510.       link.attr('title', tooltip);
  2511.       labelWithLinks.append(link);
  2512.     });
  2513.   }
  2514.   if (helpText) {
  2515.     const help = jq(`<div/>`).addClass(helpTextCls).html(markdownConverter.makeHtml(helpText)).append(jq('<br/>'));
  2516.     help.find('a').each((_, a) => jq(a).attr('target', '_blank'));
  2517.     help.append(jq('<button/>').text('[Close help]').on('click', () => help.hide()));
  2518.     textareaWrapper.append(help);
  2519.     label
  2520.       .css({ cursor: 'pointer' })
  2521.       .on('click', () => help.toggle())
  2522.       .prop('title', 'Click to toggle help')
  2523.       ;
  2524.     help.hide();
  2525.   }
  2526.   textareaWrapper.append(textarea);
  2527.   logModalCreation('textareaWithLabel', textareaWrapper);
  2528.  
  2529.   getSettingsLastTabGroupContent().append(textareaWrapper);
  2530.   textarea.on('change', onChange);
  2531.   return textarea;
  2532. };
  2533.  
  2534. const createSelect = (id, labelText, options, onChange) => {
  2535.   const select = jq(`<select id=${id}>`);
  2536.   options.forEach(({ value, label }) => {
  2537.     jq('<option>').val(value).text(label).appendTo(select);
  2538.   });
  2539.   const label = jq(`<label class="select_label">${labelText}</label>`);
  2540.   const selectWithLabel = jq('<div class="select_wrapper"></div>').append(select).append(label);
  2541.   logModalCreation('Creating select', { id, labelText, options, selectWithLabel });
  2542.  
  2543.   getSettingsLastTabGroupContent().append(selectWithLabel);
  2544.   select.on('change', onChange);
  2545.   return select;
  2546. };
  2547.  
  2548. const createPaletteLegend = paletteName => {
  2549.   const wrapper = jq('<div/>')
  2550.     .addClass(tagPaletteCls)
  2551.     .append(jq('<span>').html('Palette of color codes:&nbsp;'))
  2552.     ;
  2553.   const palette = getPalette(paletteName);
  2554.   palette.forEach((color, i) => {
  2555.     const colorCode = `%${i}`;
  2556.     const colorPart = genColorPart(colorCode);
  2557.     // console.log('createPaletteLegend', {i, colorCode, colorPart, color});
  2558.     jq('<span/>')
  2559.       .text(colorCode)
  2560.       .addClass(tagPaletteItemCls)
  2561.       .css({
  2562.         'background-color': color,
  2563.       })
  2564.       .prop('title', `Copy ${colorPart} to clipboard`)
  2565.       .click(() => {
  2566.         copyTextToClipboard(colorPart);
  2567.       })
  2568.       .appendTo(wrapper);
  2569.   });
  2570.   return wrapper;
  2571. };
  2572.  
  2573. const createColorInput = (id, labelText, onChange) => {
  2574.   logModalCreation('Creating color input', { id, labelText });
  2575.   const input = jq(`<input type="color" id=${id}>`);
  2576.   const label = jq(`<label class="color_label">${labelText}</label>`);
  2577.   const inputWithLabel = jq('<div class="color_wrapper"></div>').append(input).append(label);
  2578.   logModalCreation('inputWithLabel', inputWithLabel);
  2579.  
  2580.   getSettingsLastTabGroupContent().append(inputWithLabel);
  2581.   input.on('change', onChange);
  2582.   return input;
  2583. };
  2584.  
  2585. const createNumberInput = (id, labelText, onChange, { step = 1, min = 0, max = 100 } = {}) => {
  2586.   logModalCreation('Creating number input', { id, labelText, step, min, max });
  2587.   const input = jq(`<input type="number" id=${id}>`)
  2588.     .prop('step', step)
  2589.     .prop('min', min)
  2590.     .prop('max', max)
  2591.     ;
  2592.   const label = jq(`<label class="number_label">${labelText}</label>`);
  2593.   const inputWithLabel = jq('<div class="number_wrapper"></div>').append(input).append(label);
  2594.   logModalCreation('inputWithLabel', inputWithLabel);
  2595.  
  2596.   getSettingsLastTabGroupContent().append(inputWithLabel);
  2597.   input.on('change', onChange);
  2598.   return input;
  2599. };
  2600.  
  2601. const createTagsPreview = () => {
  2602.   const wrapper = jq('<div/>')
  2603.     .addClass(tagsPreviewCls)
  2604.     .append(jq('<div>').text('Preview').addClass('text-lg font-bold'))
  2605.     .append(jq('<div>').text('Target New:'))
  2606.     .append(jq('<div>').addClass(tagsPreviewNewCls).addClass(tagsContainerCls).attr('data-preview', 'true'))
  2607.     .append(jq('<div>').text('Target Thread:'))
  2608.     .append(jq('<div>').addClass(tagsPreviewThreadCls).addClass(tagsContainerCls).attr('data-preview', 'true'))
  2609.     ;
  2610.   getSettingsLastTabGroupContent().append(wrapper);
  2611. };
  2612.  
  2613. const coPilotNewThreadAutoSubmitCheckboxId = 'coPilotNewThreadAutoSubmit';
  2614. const getCoPilotNewThreadAutoSubmitCheckbox = () => $i(coPilotNewThreadAutoSubmitCheckboxId);
  2615.  
  2616. const coPilotRepeatLastAutoSubmitCheckboxId = 'coPilotRepeatLastAutoSubmit';
  2617. const getCoPilotRepeatLastAutoSubmitCheckbox = () => $i(coPilotRepeatLastAutoSubmitCheckboxId);
  2618.  
  2619. const hideSideMenuCheckboxId = 'hideSideMenu';
  2620. const getHideSideMenuCheckbox = () => $i(hideSideMenuCheckboxId);
  2621.  
  2622. const tagsEnabledId = genCssName('tagsEnabled');
  2623. const getTagsEnabledCheckbox = () => $i(tagsEnabledId);
  2624.  
  2625. const tagsTextAreaId = 'tagsText';
  2626. const getTagsTextArea = () => $i(tagsTextAreaId);
  2627.  
  2628. const tagColorPickerId = genCssName('tagColorPicker');
  2629. const getTagColorPicker = () => $i(tagColorPickerId);
  2630.  
  2631. const enableDebugCheckboxId = genCssName('enableDebug');
  2632. const getEnableDebugCheckbox = () => $i(enableDebugCheckboxId);
  2633.  
  2634. const enableTagsDebugCheckboxId = genCssName('enableTagsDebug');
  2635. const getEnableTagsDebugCheckbox = () => $i(enableTagsDebugCheckboxId);
  2636.  
  2637. const debugTagsSuppressSubmitCheckboxId = genCssName('debugTagsSuppressSubmit');
  2638. const getDebugTagsSuppressSubmitCheckbox = () => $i(debugTagsSuppressSubmitCheckboxId);
  2639.  
  2640. const tagPaletteSelectId = genCssName('tagPaletteSelect');
  2641. const getTagPaletteSelect = () => $i(tagPaletteSelectId);
  2642.  
  2643. const tagFontSelectId = genCssName('tagFontSelect');
  2644. const getTagFontSelect = () => $i(tagFontSelectId);
  2645.  
  2646. const tagTweakNoBorderCheckboxId = genCssName('tagTweakNoBorder');
  2647. const getTagTweakNoBorderCheckbox = () => $i(tagTweakNoBorderCheckboxId);
  2648.  
  2649. const tagTweakSlimPaddingCheckboxId = genCssName('tagTweakSlimPadding');
  2650. const getTagTweakSlimPaddingCheckbox = () => $i(tagTweakSlimPaddingCheckboxId);
  2651.  
  2652. const tagTweakRichBorderColorCheckboxId = genCssName('tagTweakRichBorderColor');
  2653. const getTagTweakRichBorderColorCheckbox = () => $i(tagTweakRichBorderColorCheckboxId);
  2654.  
  2655. const tagTweakTextShadowCheckboxId = genCssName('tagTweakTextShadow');
  2656. const getTagTweakTextShadowCheckbox = () => $i(tagTweakTextShadowCheckboxId);
  2657.  
  2658. const tagHomePageLayoutSelectId = genCssName('tagHomePageLayout');
  2659. const getTagHomePageLayoutSelect = () => $i(tagHomePageLayoutSelectId);
  2660.  
  2661. const tagContainerExtraBottomMarginInputId = genCssName('tagContainerExtraBottomMargin');
  2662. const getTagContainerExtraBottomMarginInput = () => $i(tagContainerExtraBottomMarginInputId);
  2663.  
  2664. const tagLuminanceThresholdInputId = genCssName('tagLuminanceThreshold');
  2665. const getTagLuminanceThresholdInput = () => $i(tagLuminanceThresholdInputId);
  2666.  
  2667. const tagBoldCheckboxId = genCssName('tagBold');
  2668. const getTagBoldCheckbox = () => $i(tagBoldCheckboxId);
  2669.  
  2670. const tagItalicCheckboxId = genCssName('tagItalic');
  2671. const getTagItalicCheckbox = () => $i(tagItalicCheckboxId);
  2672.  
  2673. const tagFontSizeInputId = genCssName('tagFontSize');
  2674. const getTagFontSizeInput = () => $i(tagFontSizeInputId);
  2675.  
  2676. const tagIconSizeInputId = genCssName('tagIconSize');
  2677. const getTagIconSizeInput = () => $i(tagIconSizeInputId);
  2678.  
  2679. const tagRoundnessInputId = genCssName('tagRoundness');
  2680. const getTagRoundnessInput = () => $i(tagRoundnessInputId);
  2681.  
  2682. const tagTextYOffsetInputId = genCssName('tagTextYOffset');
  2683. const getTagTextYOffsetInput = () => $i(tagTextYOffsetInputId);
  2684.  
  2685. const tagIconYOffsetInputId = genCssName('tagIconYOffset');
  2686. const getTagIconYOffsetInput = () => $i(tagIconYOffsetInputId);
  2687.  
  2688. const tagToggleSaveCheckboxId = genCssName('tagToggleSave');
  2689. const getTagToggleSaveCheckbox = () => $i(tagToggleSaveCheckboxId);
  2690.  
  2691. const toggleModeHooksCheckboxId = genCssName('toggleModeHooks');
  2692. const getToggleModeHooksCheckbox = () => $i(toggleModeHooksCheckboxId);
  2693.  
  2694. const tagToggleModeIndicatorsCheckboxId = genCssName('tagToggleModeIndicators');
  2695. const getTagToggleModeIndicatorsCheckbox = () => $i(tagToggleModeIndicatorsCheckboxId);
  2696.  
  2697. const tagPaletteCustomTextAreaId = genCssName('tagPaletteCustomTextArea');
  2698. const getTagPaletteCustomTextArea = () => $i(tagPaletteCustomTextAreaId);
  2699.  
  2700. const replaceIconsInMenuId = genCssName('replaceIconsInMenu');
  2701. const getReplaceIconsInMenu = () => $i(replaceIconsInMenuId);
  2702.  
  2703. const slimLeftMenuCheckboxId = genCssName('slimLeftMenu');
  2704. const getSlimLeftMenuCheckbox = () => $i(slimLeftMenuCheckboxId);
  2705.  
  2706. const leftMarginOfThreadContentInputId = genCssName('leftMarginOfThreadContent');
  2707. const getLeftMarginOfThreadContentInput = () => $i(leftMarginOfThreadContentInputId);
  2708.  
  2709. const leftMarginOfThreadContentEnabledId = genCssName('leftMarginOfThreadContentEnabled');
  2710. const getLeftMarginOfThreadContentEnabled = () => $i(leftMarginOfThreadContentEnabledId);
  2711.  
  2712. const hideHomeWidgetsCheckboxId = genCssName('hideHomeWidgets');
  2713. const getHideHomeWidgetsCheckbox = () => $i(hideHomeWidgetsCheckboxId);
  2714.  
  2715. const hideDiscoverButtonCheckboxId = genCssName('hideDiscoverButton');
  2716. const getHideDiscoverButtonCheckbox = () => $i(hideDiscoverButtonCheckboxId);
  2717.  
  2718. const hideRelatedCheckboxId = genCssName('hideRelated');
  2719. const getHideRelatedCheckbox = () => $i(hideRelatedCheckboxId);
  2720.  
  2721. const hideUpgradeToMaxAdsSelectId = genCssName('hideUpgradeToMaxAds');
  2722. const getHideUpgradeToMaxAdsSelect = () => $i(hideUpgradeToMaxAdsSelectId);
  2723.  
  2724. const fixImageGenerationOverlayCheckboxId = genCssName('fixImageGenerationOverlay');
  2725. const getFixImageGenerationOverlayCheckbox = () => $i(fixImageGenerationOverlayCheckboxId);
  2726.  
  2727. const extraSpaceBellowLastAnswerCheckboxId = genCssName('extraSpaceBellowLastAnswer');
  2728. const getExtraSpaceBellowLastAnswerCheckbox = () => $i(extraSpaceBellowLastAnswerCheckboxId);
  2729.  
  2730. const modelLabelTextModeSelectId = genCssName('modelLabelTextModeSelect');
  2731. const getModelLabelTextModeSelect = () => $i(modelLabelTextModeSelectId);
  2732.  
  2733. const modelLabelStyleSelectId = genCssName('modelLabelStyleSelect');
  2734. const getModelLabelStyleSelect = () => $i(modelLabelStyleSelectId);
  2735.  
  2736. const modelLabelOverwriteCyanIconToGrayCheckboxId = genCssName('modelLabelOverwriteCyanIconToGray');
  2737. const getModelLabelOverwriteCyanIconToGrayCheckbox = () => $i(modelLabelOverwriteCyanIconToGrayCheckboxId);
  2738.  
  2739. const modelLabelUseIconForReasoningModelsSelectId = genCssName('modelLabelUseIconForReasoningModelsSelect');
  2740. const getModelLabelUseIconForReasoningModelsSelect = () => $i(modelLabelUseIconForReasoningModelsSelectId);
  2741.  
  2742. const modelLabelReasoningModelIconColorId = genCssName('modelLabelReasoningModelIconColor');
  2743. const getModelLabelReasoningModelIconColor = () => $i(modelLabelReasoningModelIconColorId);
  2744.  
  2745. const modelLabelRemoveCpuIconCheckboxId = genCssName('modelLabelRemoveCpuIconCheckbox');
  2746. const getModelLabelRemoveCpuIconCheckbox = () => $i(modelLabelRemoveCpuIconCheckboxId);
  2747.  
  2748. const modelLabelLargerIconsCheckboxId = genCssName('modelLabelLargerIconsCheckbox');
  2749. const getModelLabelLargerIconsCheckbox = () => $i(modelLabelLargerIconsCheckboxId);
  2750.  
  2751. const modelLabelIconsSelectId = genCssName('modelLabelIconsSelect');
  2752. const getModelLabelIconsSelect = () => $i(modelLabelIconsSelectId);
  2753.  
  2754. const modelPreferBaseModelIconCheckboxId = genCssName('modelPreferBaseModelIcon');
  2755. const getModelPreferBaseModelIconCheckbox = () => $i(modelPreferBaseModelIconCheckboxId);
  2756.  
  2757. const customModelPopoverSelectId = genCssName('customModelPopoverSelect');
  2758. const getCustomModelPopoverSelect = () => $i(customModelPopoverSelectId);
  2759.  
  2760. const modelIconsInPopoverCheckboxId = genCssName('modelIconsInPopoverCheckbox');
  2761. const modelSelectionListItemsMaxSelectId = genCssName('modelSelectionListItemsMaxSelect');
  2762. const getModelIconsInPopoverCheckbox = () => $i(modelIconsInPopoverCheckboxId);
  2763. const getModelSelectionListItemsMaxSelect = () => $i(modelSelectionListItemsMaxSelectId);
  2764.  
  2765. const mainCaptionHtmlTextAreaId = genCssName('mainCaptionHtmlTextArea');
  2766. const getMainCaptionHtmlTextArea = () => $i(mainCaptionHtmlTextAreaId);
  2767.  
  2768. const customJsTextAreaId = genCssName('customJsTextArea');
  2769. const getCustomJsTextArea = () => $i(customJsTextAreaId);
  2770.  
  2771. const customCssTextAreaId = genCssName('customCssTextArea');
  2772. const getCustomCssTextArea = () => $i(customCssTextAreaId);
  2773.  
  2774. const customWidgetsHtmlTextAreaId = genCssName('customWidgetsHtmlTextArea');
  2775. const getCustomWidgetsHtmlTextArea = () => $i(customWidgetsHtmlTextAreaId);
  2776.  
  2777. const mainCaptionHtmlEnabledId = genCssName('mainCaptionHtmlEnabled');
  2778. const customJsEnabledId = genCssName('customJsEnabled');
  2779. const customCssEnabledId = genCssName('customCssEnabled');
  2780. const customWidgetsHtmlEnabledId = genCssName('customWidgetsHtmlEnabled');
  2781.  
  2782. const getMainCaptionHtmlEnabledCheckbox = () => $i(mainCaptionHtmlEnabledId);
  2783. const getCustomJsEnabledCheckbox = () => $i(customJsEnabledId);
  2784. const getCustomCssEnabledCheckbox = () => $i(customCssEnabledId);
  2785. const getCustomWidgetsHtmlEnabledCheckbox = () => $i(customWidgetsHtmlEnabledId);
  2786.  
  2787. const hideSideMenuLabelsId = genCssName('hideSideMenuLabels');
  2788. const getHideSideMenuLabels = () => $i(hideSideMenuLabelsId);
  2789.  
  2790. const autoOpenSettingsCheckboxId = genCssName('autoOpenSettings');
  2791. const getAutoOpenSettingsCheckbox = () => $i(autoOpenSettingsCheckboxId);
  2792.  
  2793. const debugModalCreationCheckboxId = genCssName('debugModalCreation');
  2794. const getDebugModalCreationCheckbox = () => $i(debugModalCreationCheckboxId);
  2795.  
  2796. const debugEventHooksCheckboxId = genCssName('debugEventHooks');
  2797. const getDebugEventHooksCheckbox = () => $i(debugEventHooksCheckboxId);
  2798.  
  2799. const debugReplaceIconsInMenuCheckboxId = genCssName('debugReplaceIconsInMenu');
  2800. const getDebugReplaceIconsInMenuCheckbox = () => $i(debugReplaceIconsInMenuCheckboxId);
  2801.  
  2802. const quickProfileButtonEnabledCheckboxId = genCssName('quickProfileButtonEnabled');
  2803. const getQuickProfileButtonEnabledCheckbox = () => $i(quickProfileButtonEnabledCheckboxId);
  2804. const quickProfileAddButtonId = genCssName('quickProfileAddButton');
  2805. const getQuickProfileAddButton = () => $i(quickProfileAddButtonId);
  2806. const quickProfileModelSelectId = genCssName('quickProfileModelSelect');
  2807. const getQuickProfileModelSelect = () => $i(quickProfileModelSelectId);
  2808. const quickProfileListId = genCssName('quickProfileList');
  2809. const getQuickProfileList = () => $i(quickProfileListId);
  2810.  
  2811. const copyTextToClipboard = async text => {
  2812.   try {
  2813.     await navigator.clipboard.writeText(text);
  2814.     console.log('Text copied to clipboard', { text });
  2815.   } catch (err) {
  2816.     console.error('Failed to copy text: ', err);
  2817.   }
  2818. };
  2819.  
  2820. const genColorPart = color => `<color:${color}>`;
  2821.  
  2822. const loadCurrentConfigToSettingsForm = () => {
  2823.   // Go away stupid AI!
  2824.   const savedStatesRaw = JSON.parse(localStorage.getItem(storageKey));
  2825.   if (savedStatesRaw === null) { return; }
  2826.   const savedStates = { ...defaultConfig, ...savedStatesRaw };
  2827.   // Do **NOT** replace with `loadConfigOrDefault()` or you will burn in hell for all eternity!
  2828.  
  2829.   getCoPilotNewThreadAutoSubmitCheckbox().prop('checked', savedStates.coPilotNewThreadAutoSubmit);
  2830.   getCoPilotRepeatLastAutoSubmitCheckbox().prop('checked', savedStates.coPilotRepeatLastAutoSubmit);
  2831.   getHideSideMenuCheckbox().prop('checked', savedStates.hideSideMenu);
  2832.   getTagsEnabledCheckbox().prop('checked', savedStates.tagsEnabled);
  2833.   getTagsTextArea().val(savedStates.tagsText);
  2834.   getTagColorPicker().val(savedStates.tagColor);
  2835.   getEnableDebugCheckbox().prop('checked', savedStates.debugMode);
  2836.   getEnableTagsDebugCheckbox().prop('checked', savedStates.debugTagsMode);
  2837.   getDebugTagsSuppressSubmitCheckbox().prop('checked', savedStates.debugTagsSuppressSubmit);
  2838.   getTagPaletteSelect().val(savedStates.tagPalette);
  2839.   getTagFontSelect().val(savedStates.tagFont);
  2840.   getTagTweakNoBorderCheckbox().prop('checked', savedStates.tagTweakNoBorder);
  2841.   getTagTweakSlimPaddingCheckbox().prop('checked', savedStates.tagTweakSlimPadding);
  2842.   getTagTweakRichBorderColorCheckbox().prop('checked', savedStates.tagTweakRichBorderColor);
  2843.   getTagTweakTextShadowCheckbox().prop('checked', savedStates.tagTweakTextShadow);
  2844.   getTagHomePageLayoutSelect().val(savedStates.tagHomePageLayout);
  2845.   getTagContainerExtraBottomMarginInput().val(savedStates.tagContainerExtraBottomMargin);
  2846.   getTagLuminanceThresholdInput().val(savedStates.tagLuminanceThreshold);
  2847.   getTagBoldCheckbox().prop('checked', savedStates.tagBold);
  2848.   getTagItalicCheckbox().prop('checked', savedStates.tagItalic);
  2849.   getTagFontSizeInput().val(savedStates.tagFontSize);
  2850.   getTagIconSizeInput().val(savedStates.tagIconSize);
  2851.   getTagRoundnessInput().val(savedStates.tagRoundness);
  2852.   getTagTextYOffsetInput().val(savedStates.tagTextYOffset);
  2853.   getTagIconYOffsetInput().val(savedStates.tagIconYOffset);
  2854.   getTagTweakNoBorderCheckbox().prop('checked', savedStates?.tagTweakNoBorder);
  2855.   getTagTweakSlimPaddingCheckbox().prop('checked', savedStates?.tagTweakSlimPadding);
  2856.   getTagTweakRichBorderColorCheckbox().prop('checked', savedStates?.tagTweakRichBorderColor);
  2857.   getTagTweakTextShadowCheckbox().prop('checked', savedStates?.tagTweakTextShadow);
  2858.   getTagToggleSaveCheckbox().prop('checked', savedStates.tagToggleSave);
  2859.   getToggleModeHooksCheckbox().prop('checked', savedStates.toggleModeHooks);
  2860.   getTagToggleModeIndicatorsCheckbox().prop('checked', savedStates.tagToggleModeIndicators);
  2861.   getReplaceIconsInMenu().val(savedStates.replaceIconsInMenu);
  2862.   getSlimLeftMenuCheckbox().prop('checked', savedStates.slimLeftMenu);
  2863.   getHideHomeWidgetsCheckbox().prop('checked', savedStates.hideHomeWidgets);
  2864.   getHideDiscoverButtonCheckbox().prop('checked', savedStates.hideDiscoverButton);
  2865.   getHideRelatedCheckbox().prop('checked', savedStates.hideRelated);
  2866.   getHideUpgradeToMaxAdsSelect().val(savedStates.hideUpgradeToMaxAds);
  2867.   getFixImageGenerationOverlayCheckbox().prop('checked', savedStates.fixImageGenerationOverlay);
  2868.   getExtraSpaceBellowLastAnswerCheckbox().prop('checked', savedStates.extraSpaceBellowLastAnswer);
  2869.   getModelLabelTextModeSelect().val(savedStates.modelLabelTextMode);
  2870.   getModelLabelStyleSelect().val(savedStates.modelLabelStyle);
  2871.   getModelLabelRemoveCpuIconCheckbox().prop('checked', savedStates.modelLabelRemoveCpuIcon);
  2872.   getModelLabelLargerIconsCheckbox().prop('checked', savedStates.modelLabelLargerIcons);
  2873.   getModelLabelOverwriteCyanIconToGrayCheckbox().prop('checked', savedStates.modelLabelOverwriteCyanIconToGray);
  2874.   getModelLabelUseIconForReasoningModelsSelect().val(savedStates.modelLabelUseIconForReasoningModels ?? MODEL_LABEL_ICON_REASONING_MODEL.OFF);
  2875.   getModelLabelReasoningModelIconColor().val(savedStates.modelLabelReasoningModelIconColor || '#ffffff');
  2876.   getModelLabelIconsSelect().val(savedStates.modelLabelIcons ?? MODEL_LABEL_ICONS.OFF);
  2877.   getCustomModelPopoverSelect().val(savedStates.customModelPopover ?? CUSTOM_MODEL_POPOVER_MODE.SIMPLE_GRID);
  2878.   getModelIconsInPopoverCheckbox().prop('checked', savedStates.modelIconsInPopover);
  2879.   getModelSelectionListItemsMaxSelect().val(savedStates.modelSelectionListItemsMax ?? MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS.OFF);
  2880.   getTagPaletteCustomTextArea().val((savedStates.tagPaletteCustom || []).join(', '));
  2881.   getMainCaptionHtmlTextArea().val(savedStates.mainCaptionHtml);
  2882.   getCustomJsTextArea().val(savedStates.customJs);
  2883.   getCustomCssTextArea().val(savedStates.customCss);
  2884.   getCustomWidgetsHtmlTextArea().val(savedStates.customWidgetsHtml);
  2885.   getMainCaptionHtmlEnabledCheckbox().prop('checked', savedStates.mainCaptionHtmlEnabled);
  2886.   getCustomJsEnabledCheckbox().prop('checked', savedStates.customJsEnabled);
  2887.   getCustomCssEnabledCheckbox().prop('checked', savedStates.customCssEnabled);
  2888.   getCustomWidgetsHtmlEnabledCheckbox().prop('checked', savedStates.customWidgetsHtmlEnabled);
  2889.   getHideSideMenuLabels().prop('checked', savedStates.hideSideMenuLabels);
  2890.   getLeftMarginOfThreadContentInput().val(savedStates.leftMarginOfThreadContent);
  2891.   getAutoOpenSettingsCheckbox().prop('checked', savedStates.autoOpenSettings);
  2892.   getDebugModalCreationCheckbox().prop('checked', savedStates.debugModalCreation);
  2893.   getDebugEventHooksCheckbox().prop('checked', savedStates.debugEventHooks);
  2894.   getModelPreferBaseModelIconCheckbox().prop('checked', savedStates.modelPreferBaseModelIcon);
  2895.   getDebugReplaceIconsInMenuCheckbox().prop('checked', savedStates.debugReplaceIconsInMenu);
  2896.   getLeftMarginOfThreadContentEnabled().prop('checked', savedStates.leftMarginOfThreadContentEnabled);
  2897.   getLeftMarginOfThreadContentInput().val(savedStates.leftMarginOfThreadContent);
  2898.   getQuickProfileButtonEnabledCheckbox().prop('checked', savedStates.quickProfileButtonEnabled);
  2899. };
  2900.  
  2901. function handleSettingsInit() {
  2902.   const modalExists = getPerplexityHelperModal().length > 0;
  2903.   const firstCheckboxExists = getCoPilotNewThreadAutoSubmitCheckbox().length > 0;
  2904.  
  2905.   if (!modalExists || firstCheckboxExists) { return; }
  2906.  
  2907.   const $tabButtons = $c(modalTabGroupTabsCls).addClass('flex gap-2 items-end');
  2908.  
  2909.   const setActiveTab = (tabName) => {
  2910.     $c(modalTabGroupTabsCls).find('> button').each((_, tab) => {
  2911.       const $tab = jq(tab);
  2912.       if ($tab.attr('data-tab') === tabName) {
  2913.         $tab.addClass(modalTabGroupActiveCls);
  2914.       } else {
  2915.         $tab.removeClass(modalTabGroupActiveCls);
  2916.       }
  2917.     });
  2918.     $c(modalTabGroupContentCls).each((_, tab) => {
  2919.       const $tab = jq(tab);
  2920.       if ($tab.attr('data-tab') === tabName) {
  2921.         $tab.show();
  2922.       } else {
  2923.         $tab.hide();
  2924.       }
  2925.     });
  2926.  
  2927.     // Save the active tab to config
  2928.     const config = loadConfigOrDefault();
  2929.     saveConfig({
  2930.       ...config,
  2931.       activeSettingsTab: tabName
  2932.     });
  2933.   };
  2934.  
  2935.   const createTabContent = (tabName, tabLabel) => {
  2936.     const $tabButton = jq('<button/>').text(tabLabel).attr('data-tab', tabName).on('click', () => setActiveTab(tabName));
  2937.     $tabButtons.append($tabButton);
  2938.     const $tabContent = jq('<div/>')
  2939.       .addClass(modalTabGroupContentCls)
  2940.       .attr('data-tab', tabName);
  2941.     getSettingsModalContent().append($tabContent);
  2942.     return $tabContent;
  2943.   };
  2944.  
  2945.   const insertSeparator = () => getSettingsLastTabGroupContent().append('<hr/>');
  2946.  
  2947.   // -------------------------------------------------------------------------------------------------------------------
  2948.   createTabContent('general', 'General');
  2949.  
  2950.   createCheckbox(hideSideMenuCheckboxId, 'Hide Side Menu ⚠️', saveConfigFromForm);
  2951.   createCheckbox(slimLeftMenuCheckboxId, 'Slim Left Menu', saveConfigFromForm);
  2952.   createCheckbox(hideHomeWidgetsCheckboxId, 'Hide Home Page Widgets', saveConfigFromForm);
  2953.   createCheckbox(hideSideMenuLabelsId, 'Hide Side Menu Labels', saveConfigFromForm);
  2954.   createCheckbox(hideDiscoverButtonCheckboxId, 'Hide Discover Button', saveConfigFromForm);
  2955.   createCheckbox(hideRelatedCheckboxId, 'Hide Related', saveConfigFromForm);
  2956.   createSelect(
  2957.     hideUpgradeToMaxAdsSelectId,
  2958.     'Hide Upgrade to Max Ads ⚠️ Experimental',
  2959.     Object.values(HIDE_UPGRADE_TO_MAX_ADS_OPTIONS).map(value => ({ value, label: value })),
  2960.     saveConfigFromForm
  2961.   );
  2962.   createCheckbox(fixImageGenerationOverlayCheckboxId, 'Fix Image Generation Overlay Position (Experimental; only use if you encounter the submit button in a custom image prompt outside of the viewport)', saveConfigFromForm);
  2963.   createCheckbox(extraSpaceBellowLastAnswerCheckboxId, 'Add extra space bellow last answer', saveConfigFromForm);
  2964.   createSelect(
  2965.     replaceIconsInMenuId,
  2966.     'Replace menu icons',
  2967.     Object.values(ICON_REPLACEMENT_MODE).map(value => ({ value, label: value })),
  2968.     () => {
  2969.       saveConfigFromForm();
  2970.       replaceIconsInMenu();
  2971.     }
  2972.   );
  2973.   createCheckbox(leftMarginOfThreadContentEnabledId, 'Left margin of thread content', saveConfigFromForm);
  2974.   createNumberInput(
  2975.     leftMarginOfThreadContentInputId,
  2976.     'Left margin of thread content (in em; empty for disabled; 0 for removing left whitespace in thread with normal sidebar width; -1 for slim sidebar)',
  2977.     saveConfigFromForm,
  2978.     { min: -10, max: 10, step: 0.5 }
  2979.   );
  2980.  
  2981.  
  2982.   // -------------------------------------------------------------------------------------------------------------------
  2983.   createTabContent('model', 'Model');
  2984.  
  2985.   createSelect(
  2986.     modelLabelStyleSelectId,
  2987.     'Model Label Style',
  2988.     Object.values(MODEL_LABEL_STYLE).map(value => ({ value, label: value })),
  2989.     saveConfigFromForm
  2990.   );
  2991.   createSelect(
  2992.     modelLabelTextModeSelectId,
  2993.     'Model Label Text',
  2994.     Object.values(MODEL_LABEL_TEXT_MODE).map(value => ({ value, label: value })),
  2995.     saveConfigFromForm
  2996.   );
  2997.   createCheckbox(modelLabelOverwriteCyanIconToGrayCheckboxId, 'Overwrite Model Icon: Cyan -> Gray', saveConfigFromForm);
  2998.   createSelect(
  2999.     modelLabelUseIconForReasoningModelsSelectId,
  3000.     'Use icon for reasoning models',
  3001.     Object.values(MODEL_LABEL_ICON_REASONING_MODEL).map(value => ({ value, label: value })),
  3002.     saveConfigFromForm
  3003.   );
  3004.   createColorInput(modelLabelReasoningModelIconColorId, 'Color for reasoning model icon', saveConfigFromForm);
  3005.   createSelect(
  3006.     modelLabelIconsSelectId,
  3007.     'Model Label Icons',
  3008.     Object.values(MODEL_LABEL_ICONS).map(value => ({ value, label: value })),
  3009.     saveConfigFromForm
  3010.   );
  3011.   createSelect(
  3012.     customModelPopoverSelectId,
  3013.     'Custom Model Popover (Experimental)',
  3014.     Object.values(CUSTOM_MODEL_POPOVER_MODE).map(value => ({ value, label: value })),
  3015.     saveConfigFromForm
  3016.   );
  3017.   createCheckbox(modelIconsInPopoverCheckboxId, 'Model Icons In Popover', saveConfigFromForm);
  3018.   createSelect(
  3019.     modelSelectionListItemsMaxSelectId,
  3020.     'Model Selection List Items "Max"',
  3021.     Object.values(MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS).map(value => ({ value, label: value })),
  3022.     saveConfigFromForm
  3023.   );
  3024.   createCheckbox(modelLabelRemoveCpuIconCheckboxId, 'Remove CPU icon', saveConfigFromForm);
  3025.   createCheckbox(modelLabelLargerIconsCheckboxId, 'Use larger model icons', saveConfigFromForm);
  3026.   createCheckbox(modelPreferBaseModelIconCheckboxId, 'Prefer Base Model Company Icon', saveConfigFromForm);
  3027.  
  3028.   // -------------------------------------------------------------------------------------------------------------------
  3029.   createTabContent('tags', 'Tags');
  3030.  
  3031.   createCheckbox(tagsEnabledId, 'Enable Tags', saveConfigFromForm);
  3032.  
  3033.   createTextArea(tagsTextAreaId, 'Tags', saveConfigFromForm, tagsHelpText, [
  3034.     { icon: 'l:images', tooltip: 'Lucide Icons', url: 'https://lucide.dev/icons' },
  3035.     { icon: 'td:image', tooltip: 'TDesign Icons', url: 'https://tdesign.tencent.com/design/icon-en#header-69' }
  3036.   ])
  3037.     .prop('rows', 12).css('min-width', '700px').prop('wrap', 'off');
  3038.  
  3039.   const paletteLegendContainer = jq('<div/>').attr('id', 'palette-legend-container');
  3040.   getSettingsLastTabGroupContent().append(paletteLegendContainer);
  3041.  
  3042.   const updatePaletteLegend = () => {
  3043.     paletteLegendContainer.empty().append(createPaletteLegend(loadConfig()?.tagPalette));
  3044.   };
  3045.  
  3046.   updatePaletteLegend();
  3047.  
  3048.   createSelect(
  3049.     tagPaletteSelectId,
  3050.     'Tag color palette',
  3051.     Object.keys(TAGS_PALETTES).map(key => ({ value: key, label: key })),
  3052.     () => {
  3053.       saveConfigFromForm();
  3054.       updatePaletteLegend();
  3055.       refreshTags();
  3056.     }
  3057.   );
  3058.  
  3059.   createTextArea(
  3060.     tagPaletteCustomTextAreaId,
  3061.     'Custom Palette Colors (comma-separated):',
  3062.     () => {
  3063.       saveConfigFromForm();
  3064.       // Update legend and tags only if CUSTOM is the selected palette
  3065.       if (getTagPaletteSelect().val() === TAGS_PALETTES.CUSTOM) {
  3066.         updatePaletteLegend();
  3067.         refreshTags();
  3068.       }
  3069.     }
  3070.   ).prop('rows', 2); // Make it a bit smaller than the main tags text area
  3071.  
  3072.   createTagsPreview();
  3073.  
  3074.   const FONTS = Object.keys(fontUrls);
  3075.  
  3076.   createCheckbox(tagToggleSaveCheckboxId, 'Save toggle-mode tag states', () => {
  3077.     const isEnabled = getTagToggleSaveCheckbox().prop('checked');
  3078.     // If we're turning off the setting, reset saved toggle states
  3079.     if (!isEnabled) {
  3080.       const config = loadConfigOrDefault();
  3081.       if (config.tagToggledStates && Object.keys(config.tagToggledStates).length > 0) {
  3082.         if (confirm('Do you want to clear all saved toggle states?')) {
  3083.           const updatedConfig = {
  3084.             ...config,
  3085.             tagToggledStates: {}
  3086.           };
  3087.           saveConfig(updatedConfig);
  3088.         }
  3089.       }
  3090.     }
  3091.     saveConfigFromForm();
  3092.   });
  3093.  
  3094.   createCheckbox(toggleModeHooksCheckboxId, 'Toggle mode hooks (experimental)', saveConfigFromForm);
  3095.   createCheckbox(tagToggleModeIndicatorsCheckboxId, 'Toggle mode indicators', saveConfigFromForm);
  3096.  
  3097.   // Add a reset button for toggle states
  3098.   const resetToggleStatesButton = jq('<button>')
  3099.     .text('Reset All Toggle States')
  3100.     .on('click', () => {
  3101.       resetAllToggleStates();
  3102.     })
  3103.     .css({
  3104.       marginLeft: '10px',
  3105.       marginBottom: '10px',
  3106.       padding: '3px 8px',
  3107.       fontSize: '0.9em'
  3108.     });
  3109.   getSettingsLastTabGroupContent().append(resetToggleStatesButton);
  3110.  
  3111.   createSelect(
  3112.     tagFontSelectId,
  3113.     'Tag font',
  3114.     FONTS.map(font => ({ value: font, label: font })),
  3115.     () => {
  3116.       saveConfigFromForm();
  3117.       loadFont(loadConfigOrDefault().tagFont);
  3118.       refreshTags({ force: true });
  3119.     }
  3120.   );
  3121.   createColorInput(tagColorPickerId, 'Custom color - copy field for tag to clipboard', () => {
  3122.     const color = getTagColorPicker().val();
  3123.     debugLog('color', color);
  3124.     copyTextToClipboard(genColorPart(color));
  3125.   });
  3126.   const saveConfigFromFormAndForceRefreshTags = () => {
  3127.     saveConfigFromForm();
  3128.     refreshTags({ force: true });
  3129.   };
  3130.  
  3131.   createCheckbox(tagBoldCheckboxId, 'Bold text', saveConfigFromFormAndForceRefreshTags);
  3132.   createCheckbox(tagItalicCheckboxId, 'Italic text', saveConfigFromFormAndForceRefreshTags);
  3133.  
  3134.   createNumberInput(
  3135.     tagFontSizeInputId,
  3136.     'Font size',
  3137.     saveConfigFromFormAndForceRefreshTags,
  3138.     { min: 4, max: 64 }
  3139.   );
  3140.  
  3141.   createNumberInput(
  3142.     tagIconSizeInputId,
  3143.     'Icon size',
  3144.     saveConfigFromFormAndForceRefreshTags,
  3145.     { min: 4, max: 64 }
  3146.   );
  3147.  
  3148.   createNumberInput(
  3149.     tagRoundnessInputId,
  3150.     'Tag Roundness (px)',
  3151.     saveConfigFromFormAndForceRefreshTags,
  3152.     { min: 0, max: 32 }
  3153.   );
  3154.  
  3155.   createNumberInput(
  3156.     tagTextYOffsetInputId,
  3157.     'Text Y offset',
  3158.     saveConfigFromFormAndForceRefreshTags,
  3159.     { step: 1, min: -50, max: 50 }
  3160.   );
  3161.  
  3162.   createNumberInput(
  3163.     tagIconYOffsetInputId,
  3164.     'Icon Y offset',
  3165.     saveConfigFromFormAndForceRefreshTags,
  3166.     { step: 1, min: -50, max: 50 }
  3167.   );
  3168.  
  3169.   createCheckbox(tagTweakNoBorderCheckboxId, 'No border', saveConfigFromFormAndForceRefreshTags);
  3170.   createCheckbox(tagTweakSlimPaddingCheckboxId, 'Slim padding', saveConfigFromFormAndForceRefreshTags);
  3171.   createCheckbox(tagTweakRichBorderColorCheckboxId, 'Rich Border Color', saveConfigFromFormAndForceRefreshTags);
  3172.   createCheckbox(tagTweakTextShadowCheckboxId, 'Text shadow', saveConfigFromFormAndForceRefreshTags);
  3173.   createNumberInput(
  3174.     tagLuminanceThresholdInputId,
  3175.     'Tag Luminance Threshold (determines if tag is light or dark)',
  3176.     saveConfigFromFormAndForceRefreshTags,
  3177.     { step: 0.01, min: 0, max: 1 }
  3178.   );
  3179.   createSelect(
  3180.     tagHomePageLayoutSelectId,
  3181.     'Tag container layout on home page (requires page refresh)',
  3182.     Object.values(TAG_HOME_PAGE_LAYOUT).map(value => ({ value, label: value })),
  3183.     saveConfigFromForm
  3184.   );
  3185.   createNumberInput(
  3186.     tagContainerExtraBottomMarginInputId,
  3187.     'Extra bottom margin on home page (em)',
  3188.     saveConfigFromFormAndForceRefreshTags,
  3189.     { min: 0, max: 10, step: 0.5 }
  3190.   );
  3191.  
  3192.   const $modelsList = jq('<div/>').text('Model IDs: ');
  3193.   const modelIds = PP.modelDescriptors.map(md => md.ppModelId).join(', ');
  3194.   $modelsList.append(modelIds);
  3195.   getSettingsLastTabGroupContent().append($modelsList);
  3196.  
  3197.   // -------------------------------------------------------------------------------------------------------------------
  3198.   createTabContent('quick-profile', 'Quick Profile');
  3199.   createCheckbox(quickProfileButtonEnabledCheckboxId, 'Enable Quick Profile Button', saveConfigFromForm);
  3200.   const quickProfileList = jq('<div/>').attr('id', quickProfileListId);
  3201.   getSettingsLastTabGroupContent().append(quickProfileList);
  3202.   const quickProfileAddButton = jq('<button/>').attr('id', quickProfileAddButtonId).text('Add');
  3203.   const quickProfileModelSelect = jq('<select/>').attr('id', quickProfileModelSelectId);
  3204.   getSettingsLastTabGroupContent().append(jq('<div/>').addClass('flex gap-2').append(quickProfileModelSelect).append(quickProfileAddButton));
  3205.   
  3206.   // -------------------------------------------------------------------------------------------------------------------
  3207.   createTabContent('raw', 'Raw (HTML, CSS, JS)');
  3208.  
  3209.   createCheckbox(mainCaptionHtmlEnabledId, 'Enable Main Caption HTML', saveConfigFromForm);
  3210.   createTextArea(mainCaptionHtmlTextAreaId, 'Main Caption HTML', saveConfigFromForm)
  3211.     .prop('rows', 8).css('min-width', '700px');
  3212.  
  3213.   insertSeparator();
  3214.  
  3215.   createCheckbox(customWidgetsHtmlEnabledId, 'Enable Custom Widgets HTML', saveConfigFromForm);
  3216.   createTextArea(customWidgetsHtmlTextAreaId, 'Custom Widgets HTML', saveConfigFromForm)
  3217.     .prop('rows', 8).css('min-width', '700px');
  3218.  
  3219.   insertSeparator();
  3220.  
  3221.   createCheckbox(customCssEnabledId, 'Enable Custom CSS', saveConfigFromForm);
  3222.   createTextArea(customCssTextAreaId, 'Custom CSS', saveConfigFromForm)
  3223.     .prop('rows', 8).css('min-width', '700px');
  3224.  
  3225.   insertSeparator();
  3226.  
  3227.   createCheckbox(customJsEnabledId, 'Enable Custom JavaScript', saveConfigFromForm);
  3228.   createTextArea(customJsTextAreaId, 'Custom JS', saveConfigFromForm)
  3229.     .prop('rows', 8).css('min-width', '700px');
  3230.  
  3231.   // -------------------------------------------------------------------------------------------------------------------
  3232.   createTabContent('settings', 'Settings');
  3233.  
  3234.   getSettingsLastTabGroupContent().append(jq('<div/>').text('Settings are stored in your browser\'s local storage. It is recommended to backup your settings via the export button below after every change.'));
  3235.  
  3236.   const buttonsContainer = jq('<div/>').addClass('flex gap-2');
  3237.   getSettingsLastTabGroupContent().append(buttonsContainer);
  3238.  
  3239.   const createExportButton = () => {
  3240.     const exportButton = jq('<button>')
  3241.       .text('Export Settings')
  3242.       .on('click', () => {
  3243.         const settings = JSON.stringify(getSavedStates(), null, 2);
  3244.         const blob = new Blob([settings], { type: 'application/json' });
  3245.         const date = new Date().toISOString().replace(/[:]/g, '-').replace(/T/g, '--').split('.')[0]; // Format: YYYY-MM-DD--HH-MM-SS
  3246.         const filename = `perplexity-helper-settings_${date}.json`;
  3247.         const url = URL.createObjectURL(blob);
  3248.         const a = document.createElement('a');
  3249.         a.href = url;
  3250.         a.download = filename;
  3251.         document.body.appendChild(a);
  3252.         a.click();
  3253.         document.body.removeChild(a);
  3254.         URL.revokeObjectURL(url);
  3255.       });
  3256.     buttonsContainer.append(exportButton);
  3257.   };
  3258.   createExportButton();
  3259.  
  3260.   const createImportButton = () => {
  3261.     const importButton = jq('<button>')
  3262.       .text('Import Settings')
  3263.       .on('click', () => {
  3264.         const input = jq('<input type="file" accept=".json">');
  3265.         input.on('change', async (event) => {
  3266.           const file = event.target.files[0];
  3267.           if (file) {
  3268.             // this is a dangerous operation, so we need to confirm it
  3269.             const confirmOverwrite = confirm('This will overwrite your current settings. Do you want to continue?');
  3270.             if (confirmOverwrite) {
  3271.               const reader = new FileReader();
  3272.               reader.onload = (e) => {
  3273.                 try {
  3274.                   const settings = JSON.parse(e.target.result);
  3275.                   saveConfig(settings);
  3276.                   loadCurrentConfigToSettingsForm();
  3277.                   refreshTags();
  3278.                   alert('Settings imported successfully!');
  3279.                 } catch (error) {
  3280.                   console.error('Error importing settings:', error);
  3281.                   alert('Error importing settings. Please check the file format.');
  3282.                 }
  3283.               };
  3284.               reader.readAsText(file);
  3285.             }
  3286.           }
  3287.         });
  3288.         input.trigger('click');
  3289.       });
  3290.     buttonsContainer.append(importButton);
  3291.   };
  3292.   createImportButton();
  3293.  
  3294.   // -------------------------------------------------------------------------------------------------------------------
  3295.   createTabContent('legacy', 'Legacy');
  3296.  
  3297.   createCheckbox(coPilotNewThreadAutoSubmitCheckboxId, 'Auto Submit New Thread With CoPilot', saveConfigFromForm);
  3298.   createCheckbox(coPilotRepeatLastAutoSubmitCheckboxId, 'Auto Submit Repeat With CoPilot', saveConfigFromForm);
  3299.  
  3300.   // -------------------------------------------------------------------------------------------------------------------
  3301.   createTabContent('about', 'About');
  3302.   // TODO: probably rewrite as cards (top to bottom: avatar, name, gitlab/X/links, donate?)
  3303.   getSettingsLastTabGroupContent().append(jq('<div/>').html(`
  3304.     Perplexity Helper is a userscript that adds many quality of life features to Perplexity.<br>
  3305.     <br>
  3306.     Maintainer: <a href="https://gitlab.com/monnef" target="_blank">monnef</a> <span class="opacity-50">(tags, model picker and labels, rewrite of settings)</span><br>
  3307.     Original author: <a href="https://gitlab.com/tiartyos" target="_blank">Tiartyos</a> <span class="opacity-50">(copilot buttons, basic settings)</span>
  3308.     `));
  3309.  
  3310.   // -------------------------------------------------------------------------------------------------------------------
  3311.   createTabContent('debug', 'Debug'); // debug options at the bottom (do NOT add more normal options bellow this!)
  3312.  
  3313.   createCheckbox(enableDebugCheckboxId, 'Debug Mode', () => {
  3314.     saveConfigFromForm();
  3315.     const checked = getEnableDebugCheckbox().prop('checked');
  3316.     if (checked) {
  3317.       enableDebugMode();
  3318.     }
  3319.   });
  3320.  
  3321.   createCheckbox(enableTagsDebugCheckboxId, 'Debug Tags Mode', () => {
  3322.     saveConfigFromForm();
  3323.     const checked = getEnableTagsDebugCheckbox().prop('checked');
  3324.     if (checked) {
  3325.       enableTagsDebugging();
  3326.       refreshTags();
  3327.     }
  3328.   });
  3329.  
  3330.   createCheckbox(debugModalCreationCheckboxId, 'Debug: Log Modal Creation', saveConfigFromForm);
  3331.   createCheckbox(debugEventHooksCheckboxId, 'Debug: Log Event Hooks', saveConfigFromForm);
  3332.   createCheckbox(debugReplaceIconsInMenuCheckboxId, 'Debug: Log Replace Icons In Menu', saveConfigFromForm);
  3333.   
  3334.   createCheckbox(debugTagsSuppressSubmitCheckboxId, 'Debug: Suppress Submit After Applying Tags', saveConfigFromForm);
  3335.  
  3336.   createCheckbox(autoOpenSettingsCheckboxId, 'Automatically open settings after page load', saveConfigFromForm);
  3337.  
  3338.   getSettingsLastTabGroupContent().append(`
  3339.     <h2>Lobe Icons test</h2>
  3340.     <table style="border-collapse: separate; border-spacing: 20px; width: fit-content;">
  3341.       <tr>
  3342.         <td>Default</td>
  3343.         <td><img src="${getLobeIconsUrl('anthropic')}"></td>
  3344.       </tr>
  3345.       <tr>
  3346.         <td>Default (inverted)</td>
  3347.         <td><img class="invert" src="${getLobeIconsUrl('anthropic')}"></td>
  3348.       </tr>
  3349.     </table>
  3350.     `);
  3351.  
  3352.   // -------------------------------------------------------------------------------------------------------------------
  3353.   // Use the saved active tab if available, otherwise default to 'general'
  3354.   const config = loadConfigOrDefault();
  3355.   setActiveTab(config.activeSettingsTab || defaultConfig.activeSettingsTab);
  3356.   loadCurrentConfigToSettingsForm();
  3357.  
  3358.   const renderQuickProfiles = () => {
  3359.     const config = loadConfigOrDefault();
  3360.     const quickProfiles = config.quickProfiles ?? [];
  3361.     const quickProfilesList = getQuickProfileList();
  3362.     quickProfilesList.empty();
  3363.     quickProfileList.css({
  3364.       'margin-bottom': '0.5em',
  3365.       'margin-top': '0.5em',
  3366.     })
  3367.     quickProfiles.forEach((profile, index) => {
  3368.       const modelName = PP.getModelDescriptorFromId(profile.ppModelId)?.nameEn ?? '<Unknown>';
  3369.       const profileEl = jq('<div>')
  3370.         .append(
  3371.           jq('<button>')
  3372.             .attr('data-index', index)
  3373.             .text('Remove')
  3374.             .css({
  3375.               'margin-right': '0.5em',
  3376.             })
  3377.         )
  3378.         .append(`${modelName} (${profile.ppModelId})`)
  3379.         .css({
  3380.           'padding': '0.5em 0.75em',
  3381.           'border-left': `2px solid ${grayPerplexityColor}`,
  3382.         })
  3383.         ;
  3384.       quickProfilesList.append(profileEl);
  3385.     });
  3386.   };
  3387.  
  3388.   const modelSelect = getQuickProfileModelSelect();
  3389.   PP.modelDescriptors.forEach(model => {
  3390.     modelSelect.append(jq(`<option value="${model.ppModelId}">${model.nameEn}</option>`));
  3391.   });
  3392.  
  3393.   getQuickProfileAddButton().click(() => {
  3394.     const config = loadConfigOrDefault();
  3395.     const selectedModel = modelSelect.val();
  3396.     if (!config.quickProfiles) {
  3397.       config.quickProfiles = [];
  3398.     }
  3399.     if (selectedModel && !config.quickProfiles.some(p => p.ppModelId === selectedModel)) {
  3400.       config.quickProfiles.push({ ppModelId: selectedModel });
  3401.       saveConfig(config);
  3402.       renderQuickProfiles();
  3403.     }
  3404.   });
  3405.  
  3406.   getQuickProfileList().on('click', 'button', function() {
  3407.     const config = loadConfigOrDefault();
  3408.     const index = jq(this).data('index');
  3409.     config.quickProfiles.splice(index, 1);
  3410.     saveConfig(config);
  3411.     renderQuickProfiles();
  3412.   });
  3413.  
  3414.   renderQuickProfiles();
  3415. }
  3416.  
  3417. debugLog(jq.fn.jquery);
  3418. const getSavedStates = () => JSON.parse(localStorage.getItem(storageKey));
  3419.  
  3420. const getModal = () => jq("[data-testid='quick-search-modal'] > div");
  3421. const getCopilotToggleButton = textarea => textarea.parent().parent().find('[data-testid="copilot-toggle"]');
  3422. const upperControls = () => jq('svg[data-icon="lock"] ~ div:contains("Share")').nthParent(5).closest('.flex.justify-between:not(.grid-cols-3)');
  3423.  
  3424. const getControlsArea = () => jq('textarea[placeholder="Ask follow-up"]').parent().parent().children().last();
  3425.  
  3426. const getCopilotNewThreadButton = () => jq('#copilot_new_thread');
  3427. const getCopilotRepeatLastButton = () => jq('#copilot_repeat_last');
  3428. const getSelectAllButton = () => jq('#perplexity_helper_select_all');
  3429. const getSelectAllAndSubmitButton = () => jq('#perplexity_helper_select_all_and_submit');
  3430. const getCopyPlaceholder = () => jq('#perplexity_helper_copy_placeholder');
  3431. const getCopyAndFillInPlaceholder = () => jq('#perplexity_helper_copy_placeholder_and_fill_in');
  3432. const getTopSettingsButtonEl = () => $i(topSettingsButtonId);
  3433. const getLeftSettingsButtonEl = () => $i(leftSettingsButtonId);
  3434. const getSettingsModalContent = () => getPerplexityHelperModal().find(`.modal-content`);
  3435. const getSettingsLastTabGroupContent = () => getSettingsModalContent().find(`.${modalTabGroupContentCls}`).last();
  3436.  
  3437. const getSubmitBtn0 = () => jq('svg[data-icon="arrow-up"]').last().parent().parent();
  3438. const getSubmitBtn1 = () => jq('svg[data-icon="arrow-right"]').last().parent().parent();
  3439. const getSubmitBtn2 = () => jq('svg[data-icon="code-fork"]').last().parent().parent();
  3440.  
  3441. const isStandardControlsAreaFc = () => !getControlsArea().hasClass('bottom-0');
  3442. const getCurrentControlsArea = () => isStandardControlsAreaFc() ? getControlsArea() : getControlsArea().find('.bottom-0');
  3443.  
  3444. const getDashedCheckboxButton = () => jq('svg[data-icon="square-dashed"]').parent().parent();
  3445. const getStarSVG = () => jq('svg[data-icon="star-christmas"]');
  3446. const getSpecifyQuestionBox = () => jq('svg[data-icon="star-christmas"]').parent().parent().parent().last();
  3447.  
  3448. const getNumberOfDashedSVGs = () => getSpecifyQuestionBox().find('svg[data-icon="square-dashed"]').length;
  3449. const getSpecifyQuestionControlsWrapper = () => getSpecifyQuestionBox().find('button:contains("Continue")').parent();
  3450. const getCopiedModal = () => jq('#copied-modal');
  3451. const getCopiedModal2 = () => jq('#copied-modal-2');
  3452. const getCopyPlaceholderInput = () => getSpecifyQuestionBox().find('textarea');
  3453.  
  3454. const getSubmitButton0or2 = () => getSubmitBtn0().length < 1 ? getSubmitBtn2() : getSubmitBtn0();
  3455.  
  3456. const questionBoxWithPlaceholderExists = () => getSpecifyQuestionBox().find('textarea')?.attr('placeholder')?.length > 0 ?? false;
  3457.  
  3458. // TODO: no longer used? was this for agentic questions?
  3459. const selectAllCheckboxes = () => {
  3460.   const currentCheckboxes = getDashedCheckboxButton();
  3461.   debugLog('checkboxes', currentCheckboxes);
  3462.  
  3463.   const removeLastObject = (arr) => {
  3464.     if (!_.isEmpty(arr)) {
  3465.       debugLog('arr', arr);
  3466.       const newArr = _.dropRight(arr, 1);
  3467.       debugLog("newArr", newArr);
  3468.       getDashedCheckboxButton().last().click();
  3469.  
  3470.       return setTimeout(() => {
  3471.         removeLastObject(newArr);
  3472.       }, 1);
  3473.  
  3474.     }
  3475.   };
  3476.  
  3477.   removeLastObject(currentCheckboxes);
  3478. };
  3479.  
  3480. const isCopilotOn = (el) => el.hasClass('text-super');
  3481.  
  3482. const toggleBtnDot = (btnDot, value) => {
  3483.   debugLog(' toggleBtnDot btnDot', btnDot);
  3484.  
  3485.   const btnDotInner = btnDot.find('.rounded-full');
  3486.  
  3487.   debugLog('btnDotInner', btnDotInner);
  3488.  
  3489.   if (!btnDotInner.hasClass('bg-super') && value === true) {
  3490.     btnDot.click();
  3491.   }
  3492. };
  3493.  
  3494. const checkForCopilotToggleState = (timer, checkCondition, submitWhenTrue, submitButtonVersion) => {
  3495.   debugLog("checkForCopilotToggleState run", timer, checkCondition(), submitWhenTrue, submitButtonVersion);
  3496.   if (checkCondition()) {
  3497.     clearInterval(timer);
  3498.     debugLog("checkForCopilotToggleState condition met, interval cleared");
  3499.     const submitBtn = submitButtonVersion === 0 ? getSubmitButton0or2() : getSubmitBtn1();
  3500.     debugLog('submitBtn', submitBtn);
  3501.     if (submitWhenTrue) {
  3502.       submitBtn.click();
  3503.     }
  3504.   }
  3505. };
  3506.  
  3507. const openNewThreadModal = (lastQuery) => {
  3508.   debugLog('openNewThreadModal', lastQuery);
  3509.   const newThreadText = jq(".sticky div").filter(function () {
  3510.     return /^New Thread$/i.test(jq(this).text());
  3511.   });
  3512.   if (!newThreadText.length) {
  3513.     debugLog('newThreadText.length should be 1', newThreadText.length);
  3514.     return;
  3515.   }
  3516.   debugLog('newThreadText', newThreadText);
  3517.  
  3518.   newThreadText.click();
  3519.   setTimeout(() => {
  3520.     debugLog('newThreadText.click()');
  3521.     const modal = getModal();
  3522.  
  3523.     if (modal.length > 0) {
  3524.       const textArea = modal.find('textarea');
  3525.       if (textArea.length !== 1) debugLog('textArea.length should be 1', textArea.length);
  3526.  
  3527.       const newTextArea = textArea.last();
  3528.       const textareaElement = newTextArea[0];
  3529.       debugLog('textareaElement', textareaElement);
  3530.       PP.setPromptAreaValue(newTextArea, lastQuery);
  3531.  
  3532.       const copilotButton = getCopilotToggleButton(newTextArea);
  3533.  
  3534.       toggleBtnDot(copilotButton, true);
  3535.       const isCopilotOnBtn = () => isCopilotOn(copilotButton);
  3536.  
  3537.       const coPilotNewThreadAutoSubmit =
  3538.         getSavedStates()
  3539.           ? getSavedStates().coPilotNewThreadAutoSubmit
  3540.           : getCoPilotNewThreadAutoSubmitCheckbox().prop('checked');
  3541.  
  3542.       const copilotCheck = () => {
  3543.         const ctx = { timer: null };
  3544.         ctx.timer = setInterval(() => checkForCopilotToggleState(ctx.timer, isCopilotOnBtn, coPilotNewThreadAutoSubmit, 1), 500);
  3545.       };
  3546.  
  3547.       copilotCheck();
  3548.     } else {
  3549.       debugLog('else of modal.length > 0');
  3550.     }
  3551.   },
  3552.     2000);
  3553. };
  3554.  
  3555. const getLastQuery = () => {
  3556.   // wrapper around prompt + response
  3557.   const lastQueryBox = jq('svg[data-icon="repeat"]').last().nthParent(7);
  3558.   if (lastQueryBox.length === 0) {
  3559.     debugLog('lastQueryBox not found');
  3560.   }
  3561.  
  3562.   const wasCopilotUsed = lastQueryBox.find('svg[data-icon="star-christmas"]').length > 0;
  3563.   const lastQueryBoxText = lastQueryBox.find('.whitespace-pre-line').text();
  3564.  
  3565.   debugLog('[getLastQuery]', { lastQueryBox, wasCopilotUsed, lastQueryBoxText });
  3566.   return lastQueryBoxText ?? null;
  3567. };
  3568.  
  3569. const saveConfigFromForm = () => {
  3570.   const newConfig = {
  3571.     ...loadConfigOrDefault(),
  3572.     coPilotNewThreadAutoSubmit: getCoPilotNewThreadAutoSubmitCheckbox().prop('checked'),
  3573.     coPilotRepeatLastAutoSubmit: getCoPilotRepeatLastAutoSubmitCheckbox().prop('checked'),
  3574.     hideSideMenu: getHideSideMenuCheckbox().prop('checked'),
  3575.     slimLeftMenu: getSlimLeftMenuCheckbox().prop('checked'),
  3576.     hideSideMenuLabels: getHideSideMenuLabels().prop('checked'),
  3577.     tagsEnabled: getTagsEnabledCheckbox().prop('checked'),
  3578.     tagsText: getTagsTextArea().val(),
  3579.     tagPalette: getTagPaletteSelect().val(),
  3580.     tagPaletteCustom: getTagPaletteCustomTextArea().val().split(',').map(s => s.trim()),
  3581.     tagFont: getTagFontSelect().val(),
  3582.     tagHomePageLayout: getTagHomePageLayoutSelect().val(),
  3583.     tagContainerExtraBottomMargin: parseFloat(getTagContainerExtraBottomMarginInput().val()),
  3584.     tagLuminanceThreshold: parseFloat(getTagLuminanceThresholdInput().val()),
  3585.     tagBold: getTagBoldCheckbox().prop('checked'),
  3586.     tagItalic: getTagItalicCheckbox().prop('checked'),
  3587.     tagFontSize: parseFloat(getTagFontSizeInput().val()),
  3588.     tagIconSize: parseFloat(getTagIconSizeInput().val()),
  3589.     tagRoundness: parseFloat(getTagRoundnessInput().val()),
  3590.     tagTextYOffset: parseFloat(getTagTextYOffsetInput().val()),
  3591.     tagIconYOffset: parseFloat(getTagIconYOffsetInput().val()),
  3592.     tagToggleSave: getTagToggleSaveCheckbox().prop('checked'),
  3593.     toggleModeHooks: getToggleModeHooksCheckbox().prop('checked'),
  3594.     tagToggleModeIndicators: getTagToggleModeIndicatorsCheckbox().prop('checked'),
  3595.     debugMode: getEnableDebugCheckbox().prop('checked'),
  3596.     debugTagsMode: getEnableTagsDebugCheckbox().prop('checked'),
  3597.     debugTagsSuppressSubmit: getDebugTagsSuppressSubmitCheckbox().prop('checked'),
  3598.     autoOpenSettings: getAutoOpenSettingsCheckbox().prop('checked'),
  3599.     replaceIconsInMenu: getReplaceIconsInMenu().val(),
  3600.     hideHomeWidgets: getHideHomeWidgetsCheckbox().prop('checked'),
  3601.     hideDiscoverButton: getHideDiscoverButtonCheckbox().prop('checked'),
  3602.     hideRelated: getHideRelatedCheckbox().prop('checked'),
  3603.     hideUpgradeToMaxAds: getHideUpgradeToMaxAdsSelect().val(),
  3604.     fixImageGenerationOverlay: getFixImageGenerationOverlayCheckbox().prop('checked'),
  3605.     extraSpaceBellowLastAnswer: getExtraSpaceBellowLastAnswerCheckbox().prop('checked'),
  3606.     modelLabelTextMode: getModelLabelTextModeSelect().val(),
  3607.     modelLabelStyle: getModelLabelStyleSelect().val(),
  3608.     modelLabelOverwriteCyanIconToGray: getModelLabelOverwriteCyanIconToGrayCheckbox().prop('checked'),
  3609.     modelLabelUseIconForReasoningModels: getModelLabelUseIconForReasoningModelsSelect().val(),
  3610.     modelLabelReasoningModelIconColor: getModelLabelReasoningModelIconColor().val(),
  3611.     modelLabelRemoveCpuIcon: getModelLabelRemoveCpuIconCheckbox().prop('checked'),
  3612.     modelLabelLargerIcons: getModelLabelLargerIconsCheckbox().prop('checked'),
  3613.     modelLabelIcons: getModelLabelIconsSelect().val(),
  3614.     customModelPopover: getCustomModelPopoverSelect().val(),
  3615.     modelIconsInPopover: getModelIconsInPopoverCheckbox().prop('checked'),
  3616.     modelSelectionListItemsMax: getModelSelectionListItemsMaxSelect().val(),
  3617.     mainCaptionHtml: getMainCaptionHtmlTextArea().val(),
  3618.     mainCaptionHtmlEnabled: getMainCaptionHtmlEnabledCheckbox().prop('checked'),
  3619.     customJs: getCustomJsTextArea().val(),
  3620.     customJsEnabled: getCustomJsEnabledCheckbox().prop('checked'),
  3621.     customCss: getCustomCssTextArea().val(),
  3622.     customCssEnabled: getCustomCssEnabledCheckbox().prop('checked'),
  3623.     customWidgetsHtml: getCustomWidgetsHtmlTextArea().val(),
  3624.     customWidgetsHtmlEnabled: getCustomWidgetsHtmlEnabledCheckbox().prop('checked'),
  3625.     leftMarginOfThreadContent: getLeftMarginOfThreadContentInput().val() === "" ? null : parseFloat(getLeftMarginOfThreadContentInput().val()),
  3626.     debugModalCreation: getDebugModalCreationCheckbox().prop('checked'),
  3627.     debugEventHooks: getDebugEventHooksCheckbox().prop('checked'),
  3628.     modelPreferBaseModelIcon: getModelPreferBaseModelIconCheckbox().prop('checked'),
  3629.     debugReplaceIconsInMenu: getDebugReplaceIconsInMenuCheckbox().prop('checked'),
  3630.     leftMarginOfThreadContentEnabled: getLeftMarginOfThreadContentEnabled().prop('checked'),
  3631.     leftMarginOfThreadContent: getLeftMarginOfThreadContentInput().val() === "" ? null : parseFloat(getLeftMarginOfThreadContentInput().val()),
  3632.     tagTweakNoBorder: getTagTweakNoBorderCheckbox().prop('checked'),
  3633.     tagTweakSlimPadding: getTagTweakSlimPaddingCheckbox().prop('checked'),
  3634.     tagTweakRichBorderColor: getTagTweakRichBorderColorCheckbox().prop('checked'),
  3635.     tagTweakTextShadow: getTagTweakTextShadowCheckbox().prop('checked'),
  3636.     quickProfileButtonEnabled: getQuickProfileButtonEnabledCheckbox().prop('checked'),
  3637.   };
  3638.   saveConfig(newConfig);
  3639. };
  3640.  
  3641. const showPerplexityHelperSettingsModal = () => {
  3642.   loadCurrentConfigToSettingsForm();
  3643.   getPerplexityHelperModal().show().css('display', 'flex');
  3644. };
  3645.  
  3646. const hidePerplexityHelperSettingsModal = () => {
  3647.   getPerplexityHelperModal().hide();
  3648. };
  3649.  
  3650. const handleTopSettingsButtonInsertion = () => {
  3651.   const copilotHelperSettings = getTopSettingsButtonEl();
  3652.   // TODO: no longer works
  3653.   // debugLog('upperControls().length > 0', upperControls().length, 'copilotHelperSettings.length', copilotHelperSettings.length, 'upperControls().children().length', upperControls().children().length);
  3654.   if (upperControls().length > 0 && copilotHelperSettings.length < 1 && upperControls().children().length >= 1) {
  3655.     debugLog('inserting settings button');
  3656.     upperControls().children().eq(0).children().eq(0).append(upperButton(topSettingsButtonId, cogIco, 'Perplexity Helper Settings'));
  3657.   }
  3658. };
  3659.  
  3660. const handleTopSettingsButtonSetup = () => {
  3661.   const settingsButtonEl = getTopSettingsButtonEl();
  3662.  
  3663.   if (settingsButtonEl.length === 1 && !settingsButtonEl.attr('data-has-custom-click-event')) {
  3664.     debugLog('handleTopSettingsButtonSetup: setting up the button');
  3665.     if (settingsButtonEl.length === 0) {
  3666.       debugLog('handleTopSettingsButtonSetup: settingsButtonEl.length === 0');
  3667.     }
  3668.  
  3669.     settingsButtonEl.on("click", () => {
  3670.       debugLog('perplexity_helper_settings open click');
  3671.       showPerplexityHelperSettingsModal();
  3672.     });
  3673.  
  3674.     settingsButtonEl.attr('data-has-custom-click-event', true);
  3675.   }
  3676. };
  3677.  
  3678. const applySideMenuHiding = () => {
  3679.   const config = loadConfigOrDefault();
  3680.   if (!config.hideSideMenu) return;
  3681.   const $sideMenu = PP.getLeftPanel();
  3682.   if ($sideMenu.hasClass(sideMenuHiddenCls)) return;
  3683.   $sideMenu.addClass(sideMenuHiddenCls);
  3684.   console.log(logPrefix, '[applySideMenuHiding] User requested hiding of side menu (left panel). You can open Perplexity Helper settings modal via typing (copy&paste):\n\nph.showPerplexityHelperSettingsModal()\n\nin Console in DevTools and executing via enter key.', { $sideMenu });
  3685. };
  3686.  
  3687. const handleModalCreation = () => {
  3688.   if (getPerplexityHelperModal().length > 0) return;
  3689.   logModalCreation('Starting modal creation');
  3690.   jq("body").append(modalHTML);
  3691.  
  3692.   getPerplexityHelperModal().find('.close').on('click', () => {
  3693.     debugLog('perplexity_helper_settings close  click');
  3694.     hidePerplexityHelperSettingsModal();
  3695.   });
  3696.  
  3697.   // Setup title animation
  3698.   setTimeout(() => {
  3699.     const $titleEl = getPerplexityHelperModal().find(`.${modalSettingsTitleCls}`);
  3700.     if ($titleEl.length) {
  3701.       const text = $titleEl.text();
  3702.       const wrappedText = text
  3703.         .split('')
  3704.         .map((char, i) => {
  3705.           if (i === 0 || i === 11) { // P and H positions
  3706.             return `<span class="animate-letter" data-letter="${char}">${char}</span>`;
  3707.           }
  3708.           return char;
  3709.         })
  3710.         .join('');
  3711.  
  3712.       $titleEl.html(wrappedText);
  3713.  
  3714.       $titleEl.on('click', () => {
  3715.         const $firstLetter = $titleEl.find('.animate-letter').eq(0);
  3716.         const $secondLetter = $titleEl.find('.animate-letter').eq(1);
  3717.  
  3718.         // Staggered animation
  3719.         $firstLetter.addClass('active');
  3720.         setTimeout(() => {
  3721.           $firstLetter.removeClass('active');
  3722.           $secondLetter.addClass('active');
  3723.           setTimeout(() => {
  3724.             $secondLetter.removeClass('active');
  3725.           }, 500);
  3726.         }, 250);
  3727.       });
  3728.     }
  3729.   }, 500);
  3730. };
  3731.  
  3732. const lucideIconMappings = {
  3733.   LUCIDE1: leftPanelIconMappingsToLucide1,
  3734.   LUCIDE2: leftPanelIconMappingsToLucide2,
  3735. };
  3736.  
  3737. const findKeyByValue = (obj, value) =>
  3738.   Object.keys(obj).find(key => obj[key] === value);
  3739.  
  3740. const SUPPORTED_ICON_REPLACEMENT_MODES = [
  3741.   ICON_REPLACEMENT_MODE.LUCIDE1,
  3742.   ICON_REPLACEMENT_MODE.LUCIDE2,
  3743.   ICON_REPLACEMENT_MODE.LUCIDE3,
  3744.   ICON_REPLACEMENT_MODE.TDESIGN1,
  3745.   ICON_REPLACEMENT_MODE.TDESIGN2,
  3746.   ICON_REPLACEMENT_MODE.TDESIGN3,
  3747. ];
  3748.  
  3749. const replaceStr = (str, replacement) => (s) => s.replace(str, replacement);
  3750.  
  3751. const normalizeCollectionsSpaces = (str) => str.startsWith('collections/') ? 'spaces' : str;
  3752.  
  3753. const attrNamePhReplacementIcon = 'data-pplx-helper-replacement-icon';
  3754.  
  3755. let lastIconButtons = null;
  3756.  
  3757. const replaceIconsInMenu = () => {
  3758.   const config = loadConfigOrDefault();
  3759.   debugReplaceIconsInMenu = config.debugReplaceIconsInMenu;
  3760.   const replacementMode = findKeyByValue(ICON_REPLACEMENT_MODE, config.replaceIconsInMenu);
  3761.  
  3762.   if (SUPPORTED_ICON_REPLACEMENT_MODES.includes(config.replaceIconsInMenu)) {
  3763.     const processedAttr = `data-${pplxHelperTag}-processed`;
  3764.     const iconMapping = iconMappings[replacementMode];
  3765.     if (!iconMapping) {
  3766.       console.error(logPrefix, '[replaceIconsInMenu] iconMapping not found', { config, iconMappings });
  3767.       return;
  3768.     }
  3769.  
  3770.     const $iconButtons = PP.getIconsInLeftPanel().parent().find('> a:has(> div.grid > svg)');
  3771.     // console.log('replaceIconsInMenu', { $iconButtons, $iconButtonsLength: $iconButtons.length });
  3772.     if (lastIconButtons && lastIconButtons.length !== $iconButtons.length) {
  3773.       logReplaceIconsInMenu('$iconButtons', $iconButtons);
  3774.     }
  3775.     lastIconButtons = $iconButtons;
  3776.     $iconButtons.each((idx, rawIconButton) => {
  3777.       const $iconButton = jq(rawIconButton);
  3778.       const $svg = $iconButton.find('svg');
  3779.       const processed = $iconButton.attr(processedAttr);
  3780.       // some icon buttons (eg. spaces), can redraw after navigation, so we must check for our replacement icon
  3781.       const buttonHasReplacementIcon = $iconButton.find(`[${attrNamePhReplacementIcon}]`).length > 0;
  3782.       if (processed && buttonHasReplacementIcon) return;
  3783.       if ($iconButton.attr('id') === leftSettingsButtonId) return;
  3784.  
  3785.       const iconName = pipe($iconButton.attr('href'))(
  3786.         dropStr(1),
  3787.         dropRightStr(1),
  3788.         replaceStr('spaces/templates', 'spaces'),
  3789.         normalizeCollectionsSpaces
  3790.       ) || 'search';
  3791.       const replacementIconName = iconMapping[iconName];
  3792.       logReplaceIconsInMenu('(iconName)', iconName, ' -> (replacementIconName)', replacementIconName);
  3793.  
  3794.       $iconButton.attr(processedAttr, true);
  3795.  
  3796.       if (replacementIconName) {
  3797.         const isTDesign = config.replaceIconsInMenu.startsWith('TDesign');
  3798.         const newIconUrl = (isTDesign ? getTDesignIconUrl : getLucideIconUrl)(replacementIconName);
  3799.  
  3800.         logReplaceIconsInMenu('replacing icon', { iconName, replacementIconName, $svg, newIconUrl });
  3801.         $svg.hide();
  3802.         const newIconEl = jq('<img>')
  3803.           .attr('src', newIconUrl)
  3804.           .addClass('invert opacity-50')
  3805.           .addClass('relative duration-150 [grid-area:1/-1] group-hover:scale-110 text-text-200')
  3806.           .attr(attrNamePhReplacementIcon, true)
  3807.           .attr('data-original-icon-name', iconName)
  3808.           .attr('data-replacement-icon-name', replacementIconName)
  3809.           ;
  3810.         if (isTDesign) newIconEl.addClass('h-6');
  3811.         $svg.parent().addClass(lucideIconParentCls);
  3812.         $svg.after(newIconEl);
  3813.       } else {
  3814.         // $iconButton.css({backgroundColor: 'magenta'});
  3815.         if (!['plus', 'thread'].includes(iconName)) {
  3816.           console.error('[replaceIconsInMenu] no replacement icon found', { iconName, replacementIconName });
  3817.         }
  3818.       }
  3819.     });
  3820.   }
  3821. };
  3822.  
  3823. const createSidebarButton = (options) => {
  3824.   const { svgHtml, label, testId, href } = options;
  3825.   return jq('<a>', {
  3826.     'data-testid': testId,
  3827.     'class': 'p-sm group flex w-full flex-col items-center justify-center gap-0.5',
  3828.     'href': href ?? '#',
  3829.   }).append(
  3830.     jq('<div>', {
  3831.       'class': 'grid size-[40px] place-items-center border-borderMain/50 ring-borderMain/50 divide-borderMain/50 dark:divide-borderMainDark/50 dark:ring-borderMainDark/50 dark:border-borderMainDark/50 bg-transparent'
  3832.     }).append(
  3833.       jq('<div>', {
  3834.         'class': 'size-[90%] rounded-md duration-150 [grid-area:1/-1] group-hover:opacity-100 opacity-0 border-borderMain/50 ring-borderMain/50 divide-borderMain/50 dark:divide-borderMainDark/50 dark:ring-borderMainDark/50 dark:border-borderMainDark/50 bg-offsetPlus dark:bg-offsetPlusDark'
  3835.       }),
  3836.       jq(svgHtml).addClass('relative duration-150 [grid-area:1/-1] group-hover:scale-110 text-text-200'),
  3837.     ),
  3838.     jq('<div>', {
  3839.       'class': 'font-sans text-2xs md:text-xs text-textOff dark:text-textOffDark selection:bg-super/50 selection:text-textMain dark:selection:bg-superDuper/10 dark:selection:text-superDark',
  3840.       'text': label ?? 'MISSING LABEL'
  3841.     })
  3842.   );
  3843. };
  3844.  
  3845. const handleLeftSettingsButtonSetup = () => {
  3846.   const existingLeftSettingsButton = getLeftSettingsButtonEl();
  3847.   if (existingLeftSettingsButton.length === 1) {
  3848.     // const wrapper = existingLeftSettingsButton.parent();
  3849.     // if (!wrapper.is(':last-child')) {
  3850.     //   wrapper.appendTo(wrapper.parent());
  3851.     // }
  3852.     return;
  3853.   }
  3854.  
  3855.   const $topContainerInSidebar = PP.getIconButtonContainersInSidebar().first();
  3856.  
  3857.   if ($topContainerInSidebar.length === 0) {
  3858.     debugLog('handleLeftSettingsButtonSetup: leftPanel not found');
  3859.   }
  3860.  
  3861.   const $sidebarButton = createSidebarButton({
  3862.     svgHtml: cogIco,
  3863.     label: 'Perplexity Helper',
  3864.     testId: 'perplexity-helper-settings',
  3865.     href: '#',
  3866.   })
  3867.     .attr('id', leftSettingsButtonId)
  3868.     .on('click', () => {
  3869.       debugLog('left settings button clicked');
  3870.       if (!PP.isBreakpoint('md')) {
  3871.         PP.getLeftPanel().hide();
  3872.       }
  3873.       showPerplexityHelperSettingsModal();
  3874.     });
  3875.  
  3876.   $topContainerInSidebar.append($sidebarButton);
  3877. };
  3878.  
  3879. const handleSlimLeftMenu = () => {
  3880.   const config = loadConfigOrDefault();
  3881.   if (!config.slimLeftMenu) return;
  3882.  
  3883.   const $sideBar = PP.getSidebar();
  3884.   if ($sideBar.length === 0) {
  3885.     // debugLog('handleSlimLeftMenu: leftPanel not found');
  3886.   }
  3887.  
  3888.   $sideBar.addClass(leftPanelSlimCls);
  3889.   $sideBar.find('.py-md').css('width', '45px');
  3890. };
  3891.  
  3892. const handleHideHomeWidgets = () => {
  3893.   const config = loadConfigOrDefault();
  3894.   if (!config.hideHomeWidgets) return;
  3895.  
  3896.   const homeWidgets = PP.getHomeWidgets();
  3897.   if (homeWidgets.length === 0) {
  3898.     debugLog('handleHideHomeWidgets: homeWidgets not found');
  3899.     return;
  3900.   }
  3901.   if (homeWidgets.length > 1) {
  3902.     console.warn(logPrefix, '[handleHideHomeWidgets] too many homeWidgets found', homeWidgets);
  3903.   }
  3904.  
  3905.   homeWidgets.hide();
  3906. };
  3907.  
  3908. const handleFixImageGenerationOverlay = () => {
  3909.   const config = loadConfigOrDefault();
  3910.   if (!config.fixImageGenerationOverlay) return;
  3911.  
  3912.   const imageGenerationOverlay = PP.getImageGenerationOverlay();
  3913.   if (imageGenerationOverlay.length === 0) {
  3914.     // debugLog('handleFixImageGenerationOverlay: imageGenerationOverlay not found');
  3915.     return;
  3916.   }
  3917.  
  3918.   // only if wrench button is cyan (we are in custom prompt)
  3919.   if (!imageGenerationOverlay.find('button').hasClass('bg-super')) return;
  3920.  
  3921.   const transform = imageGenerationOverlay.css('transform');
  3922.   if (!transform) return;
  3923.  
  3924.   // Handle both matrix and translate formats
  3925.   const matrixMatch = transform.match(/matrix\(.*,\s*([\d.]+),\s*([\d.]+)\)/);
  3926.   const translateMatch = transform.match(/translate\(([\d.]+)px(?:,\s*([\d.]+)px)?\)/);
  3927.  
  3928.   const currentX = matrixMatch
  3929.     ? matrixMatch[1]  // Matrix format: 5th value is X translation
  3930.     : translateMatch?.[1] || 0;  // Translate format: first value
  3931.  
  3932.   debugLog('[handleFixImageGenerationOverlay] currentX', currentX, 'transform', transform);
  3933.   imageGenerationOverlay.css({
  3934.     transform: `translate(${currentX}px, 0px)`
  3935.   });
  3936. };
  3937.  
  3938. const handleExtraSpaceBellowLastAnswer = () => {
  3939.   const config = loadConfigOrDefault();
  3940.   if (!config.extraSpaceBellowLastAnswer) return;
  3941.   const $oldWithClassEls = jq(`.${extraSpaceBellowLastAnswerCls}`);
  3942.   const $newCandidates = jq(`.erp-tab\\:min-h-screen .md\\:pt-6.isolate > .max-w-threadContentWidth:not(.z-20)`);
  3943.   const $newCandidate = $newCandidates.last();
  3944.  
  3945.   if ($newCandidate.length > 0) {
  3946.     $newCandidate.addClass(extraSpaceBellowLastAnswerCls);
  3947.     const $oldElsWithoutCurrent = $oldWithClassEls.not($newCandidate);
  3948.     if ($oldElsWithoutCurrent.length > 0) {
  3949.       $oldElsWithoutCurrent.removeClass(extraSpaceBellowLastAnswerCls);
  3950.     }
  3951.   }
  3952. };
  3953.  
  3954. let quickProfileButton;
  3955. let currentProfileIndex = -1;
  3956.  
  3957. const handleQuickProfileButton = () => {
  3958.   const config = loadConfigOrDefault();
  3959.   if (!config.quickProfileButtonEnabled) {
  3960.     if (quickProfileButton) {
  3961.       quickProfileButton.remove();
  3962.       quickProfileButton = null;
  3963.     }
  3964.     return;
  3965.   }
  3966.  
  3967.   if (!quickProfileButton) {
  3968.     const $image = jq(`<img src="${getLucideIconUrl('award')}" />`);
  3969.     quickProfileButton = jq(`<div class="${quickProfileButtonCls}"></div>`).append($image);
  3970.     quickProfileButton.click(() => {
  3971.       if (quickProfileButton.hasClass(quickProfileButtonDisabledCls)) return;
  3972.       const config = loadConfigOrDefault();
  3973.       if (config.quickProfiles.length === 0) return;
  3974.       currentProfileIndex = (currentProfileIndex + 1) % config.quickProfiles.length;
  3975.       const profile = config.quickProfiles[currentProfileIndex];
  3976.       debugLog('quickProfileButton: profile', profile);
  3977.       PP.doSelectModel(profile.ppModelId);
  3978.     });
  3979.   }
  3980.  
  3981.   const promptAreaWrapper = PP.getAnyPromptAreaWrapper();
  3982.   if (promptAreaWrapper.length) {
  3983.     if (promptAreaWrapper.find(`.${quickProfileButtonCls}`).length === 0) {
  3984.       // const $spanWrapper = jq('<span>').append(quickProfileButton);
  3985.       PP.getModeLabButton(promptAreaWrapper).nthParent(3).append(quickProfileButton);
  3986.       // promptAreaWrapper.prepend(quickProfileButton);
  3987.     }
  3988.  
  3989.     const currentSelectedModel = PP.getModelDescriptionFromModelButton(PP.getAnyModelButton(promptAreaWrapper));
  3990.     if (currentSelectedModel) {
  3991.       quickProfileButton.removeClass(quickProfileButtonDisabledCls);
  3992.       const modelId = currentSelectedModel.ppModelId;
  3993.       const profile = config.quickProfiles.find(p => p.ppModelId === modelId);
  3994.       if (profile) {
  3995.         quickProfileButton.addClass(quickProfileButtonActiveCls);
  3996.       } else {
  3997.         quickProfileButton.removeClass(quickProfileButtonActiveCls);
  3998.       }
  3999.     } else {
  4000.       quickProfileButton.addClass(quickProfileButtonDisabledCls);
  4001.       quickProfileButton.removeClass(quickProfileButtonActiveCls);
  4002.     }
  4003.   }
  4004. };
  4005.  
  4006.  
  4007. const handleSearchPage = () => {
  4008.   // is this even used currently?
  4009.   // TODO: update this, button to start new thread with same text as original/last query might be useful
  4010.   return;
  4011.   const controlsArea = getCurrentControlsArea();
  4012.   controlsArea.addClass(controlsAreaCls);
  4013.   controlsArea.parent().find('textarea').first().addClass(textAreaCls);
  4014.   controlsArea.addClass(roundedMD);
  4015.   controlsArea.parent().addClass(roundedMD);
  4016.  
  4017.  
  4018.   if (controlsArea.length === 0) {
  4019.     debugLog('controlsArea not found', {
  4020.       controlsArea,
  4021.       currentControlsArea: getCurrentControlsArea(),
  4022.       isStandardControlsAreaFc: isStandardControlsAreaFc()
  4023.     });
  4024.   }
  4025.  
  4026.   const lastQueryBoxText = getLastQuery();
  4027.  
  4028.   const mainTextArea = isStandardControlsAreaFc() ? controlsArea.prev().prev() : controlsArea.parent().prev();
  4029.  
  4030.   if (mainTextArea.length === 0) {
  4031.     debugLog('mainTextArea not found', mainTextArea);
  4032.   }
  4033.  
  4034.  
  4035.   debugLog('lastQueryBoxText', { lastQueryBoxText });
  4036.   if (lastQueryBoxText) {
  4037.     const copilotNewThread = getCopilotNewThreadButton();
  4038.     const copilotRepeatLast = getCopilotRepeatLastButton();
  4039.  
  4040.     if (controlsArea.length > 0 && copilotNewThread.length < 1) {
  4041.       controlsArea.append(button('copilot_new_thread', robotIco, "Starts new thread for with last query text and Copilot ON", standardButtonCls));
  4042.     }
  4043.  
  4044.     // Due to updates in Perplexity, this is unnecessary for now
  4045.     // if (controlsArea.length > 0 && copilotRepeatLast.length < 1) {
  4046.     //   controlsArea.append(button('copilot_repeat_last', robotRepeatIco, "Repeats last query with Copilot ON"));
  4047.     // }
  4048.  
  4049.     if (!copilotNewThread.attr('data-has-custom-click-event')) {
  4050.       copilotNewThread.on("click", function () {
  4051.         debugLog('copilotNewThread Button clicked!');
  4052.         openNewThreadModal(getLastQuery());
  4053.       });
  4054.       copilotNewThread.attr('data-has-custom-click-event', true);
  4055.     }
  4056.  
  4057.     if (!copilotRepeatLast.attr('data-has-custom-click-event')) {
  4058.       copilotRepeatLast.on("click", function () {
  4059.         const controlsArea = getCurrentControlsArea();
  4060.         const textAreaElement = controlsArea.parent().find('textarea')[0];
  4061.  
  4062.         const coPilotRepeatLastAutoSubmit =
  4063.           getSavedStates()
  4064.             ? getSavedStates().coPilotRepeatLastAutoSubmit
  4065.             : getCoPilotRepeatLastAutoSubmitCheckbox().prop('checked');
  4066.  
  4067.         debugLog('coPilotRepeatLastAutoSubmit', coPilotRepeatLastAutoSubmit);
  4068.         PP.setPromptAreaValue(mainTextArea, getLastQuery());
  4069.         const copilotToggleButton = getCopilotToggleButton(mainTextArea);
  4070.         debugLog('mainTextArea', mainTextArea);
  4071.         debugLog('copilotToggleButton', copilotToggleButton);
  4072.  
  4073.         toggleBtnDot(copilotToggleButton, true);
  4074.         const isCopilotOnBtn = () => isCopilotOn(copilotToggleButton);
  4075.  
  4076.         const copilotCheck = () => {
  4077.           const ctx = { timer: null };
  4078.           ctx.timer = setInterval(() => checkForCopilotToggleState(ctx.timer, isCopilotOnBtn, coPilotRepeatLastAutoSubmit, 0), 500);
  4079.         };
  4080.  
  4081.         copilotCheck();
  4082.         debugLog('copilot_repeat_last Button clicked!');
  4083.       });
  4084.       copilotRepeatLast.attr('data-has-custom-click-event', true);
  4085.     }
  4086.   }
  4087.  
  4088.   if (getNumberOfDashedSVGs() > 0 && getNumberOfDashedSVGs() === getDashedCheckboxButton().length
  4089.     && getSelectAllButton().length < 1 && getSelectAllAndSubmitButton().length < 1) {
  4090.     debugLog('getNumberOfDashedSVGs() === getNumberOfDashedSVGs()', getNumberOfDashedSVGs());
  4091.     debugLog('getSpecifyQuestionBox', getSpecifyQuestionBox());
  4092.  
  4093.     const specifyQuestionControlsWrapper = getSpecifyQuestionControlsWrapper();
  4094.     debugLog('specifyQuestionControlsWrapper', specifyQuestionControlsWrapper);
  4095.     const selectAllButton = textButton('perplexity_helper_select_all', 'Select all', 'Selects all options');
  4096.     const selectAllAndSubmitButton = textButton('perplexity_helper_select_all_and_submit', 'Select all & submit', 'Selects all options and submits');
  4097.  
  4098.     specifyQuestionControlsWrapper.append(selectAllButton);
  4099.     specifyQuestionControlsWrapper.append(selectAllAndSubmitButton);
  4100.  
  4101.     getSelectAllButton().on("click", function () {
  4102.       selectAllCheckboxes();
  4103.     });
  4104.  
  4105.     getSelectAllAndSubmitButton().on("click", function () {
  4106.       selectAllCheckboxes();
  4107.       setTimeout(() => {
  4108.         getSpecifyQuestionControlsWrapper().find('button:contains("Continue")').click();
  4109.       }, 200);
  4110.     });
  4111.   }
  4112.  
  4113.   const constructClipBoard = (buttonId, buttonGetter, modalGetter, copiedModalId, elementGetter) => {
  4114.     const placeholderValue = getSpecifyQuestionBox().find('textarea').attr('placeholder');
  4115.  
  4116.     const clipboardInstance = new ClipboardJS(`#${buttonId}`, {
  4117.       text: () => placeholderValue
  4118.     });
  4119.  
  4120.     const copiedModal = `<span id="${copiedModalId}">Copied!</span>`;
  4121.     debugLog('copiedModalId', copiedModalId);
  4122.     debugLog('copiedModal', copiedModal);
  4123.  
  4124.     jq('main').append(copiedModal);
  4125.  
  4126.     clipboardInstance.on('success', _ => {
  4127.       var buttonPosition = buttonGetter().position();
  4128.       jq(`#${copiedModalId}`).css({
  4129.         top: buttonPosition.top - 30,
  4130.         left: buttonPosition.left + 50
  4131.       }).show();
  4132.  
  4133.       if (elementGetter !== undefined) {
  4134.         PP.setPromptAreaValue(elementGetter(), placeholderValue);
  4135.       }
  4136.  
  4137.       setTimeout(() => {
  4138.         modalGetter().hide();
  4139.       }, 5000);
  4140.     });
  4141.   };
  4142.  
  4143.   if (questionBoxWithPlaceholderExists() && getCopyPlaceholder().length < 1) {
  4144.     const copyPlaceholder = textButton('perplexity_helper_copy_placeholder', 'Copy placeholder', 'Copies placeholder value');
  4145.     const copyPlaceholderAndFillIn = textButton('perplexity_helper_copy_placeholder_and_fill_in', 'Copy placeholder and fill in',
  4146.       'Copies placeholder value and fills in input');
  4147.  
  4148.     const specifyQuestionControlsWrapper = getSpecifyQuestionControlsWrapper();
  4149.  
  4150.     specifyQuestionControlsWrapper.append(copyPlaceholder);
  4151.     specifyQuestionControlsWrapper.append(copyPlaceholderAndFillIn);
  4152.  
  4153.     constructClipBoard('perplexity_helper_copy_placeholder', getCopyPlaceholder, getCopiedModal, 'copied-modal');
  4154.     constructClipBoard('perplexity_helper_copy_placeholder_and_fill_in', getCopyAndFillInPlaceholder, getCopiedModal2, 'copied-modal-2', getCopyPlaceholderInput);
  4155.   }
  4156. };
  4157.  
  4158. const getLabelFromModelDescription = modelLabelStyle => modelLabelFromAriaLabel => modelDescription => {
  4159.   if (!modelDescription) return modelLabelFromAriaLabel;
  4160.   switch (modelLabelStyle) {
  4161.     case MODEL_LABEL_TEXT_MODE.OFF:
  4162.       return '';
  4163.     case MODEL_LABEL_TEXT_MODE.FULL_NAME:
  4164.       return modelDescription.nameEn;
  4165.     case MODEL_LABEL_TEXT_MODE.SHORT_NAME:
  4166.       return modelDescription.nameEnShort ?? modelDescription.nameEn;
  4167.     case MODEL_LABEL_TEXT_MODE.PP_MODEL_ID:
  4168.       return modelDescription.ppModelId;
  4169.     case MODEL_LABEL_TEXT_MODE.OWN_NAME_VERSION_SHORT:
  4170.       const nameText = modelDescription.ownNameEn ?? modelDescription.nameEn;
  4171.       const versionTextRaw = modelDescription.ownVersionEnShort ?? modelDescription.ownVersionEn;
  4172.       const versionText = versionTextRaw?.replace(/ P$/, ' Pro'); // HACK: Gemini 2.5 Pro
  4173.       return [nameText, versionText].filter(Boolean).join(modelDescription.ownNameVersionSeparator ?? ' ');
  4174.     case MODEL_LABEL_TEXT_MODE.VERY_SHORT:
  4175.       const abbr = modelDescription.abbrEn;
  4176.       if (!abbr) {
  4177.         console.warn('[getLabelFromModelDescription] modelDescription.abbrEn is empty', modelDescription);
  4178.       } else {
  4179.         return abbr;
  4180.       }
  4181.       const shortName = modelDescription.nameEnShort ?? modelDescription.nameEn;
  4182.       return shortName.split(/\s+/).map(word => word.charAt(0)).join('');
  4183.     case MODEL_LABEL_TEXT_MODE.FAMILIAR_NAME:
  4184.       return modelDescription.familiarNameEn ?? modelDescription.nameEn;
  4185.     default:
  4186.       throw new Error(`Unknown model label style: ${modelLabelStyle}`);
  4187.   }
  4188. };
  4189.  
  4190. const getExtraClassesFromModelLabelStyle = modelLabelStyle => {
  4191.   switch (modelLabelStyle) {
  4192.     case MODEL_LABEL_STYLE.BUTTON_SUBTLE:
  4193.       return modelLabelStyleButtonSubtleCls;
  4194.     case MODEL_LABEL_STYLE.BUTTON_WHITE:
  4195.       return modelLabelStyleButtonWhiteCls;
  4196.     case MODEL_LABEL_STYLE.BUTTON_CYAN:
  4197.       return modelLabelStyleButtonCyanCls;
  4198.     case MODEL_LABEL_STYLE.NO_TEXT:
  4199.       return '';
  4200.     default:
  4201.       return '';
  4202.   }
  4203. };
  4204.  
  4205. const handleModelLabel = () => {
  4206.   const config = loadConfigOrDefault();
  4207.   if (!config.modelLabelStyle || config.modelLabelStyle === MODEL_LABEL_STYLE.OFF) return;
  4208.  
  4209.   const $modelIcons = PP.getAnyModelButton();
  4210.   $modelIcons.each((_, el) => {
  4211.     const $el = jq(el);
  4212.  
  4213.     // Initial setup if elements don't exist yet
  4214.     if (!$el.find(`.${modelLabelCls}`).length) {
  4215.       $el.prepend(jq(`<span class="${modelLabelCls}"></span>`));
  4216.       $el.closest('.col-start-3').removeClass('col-start-3').addClass('col-start-2 col-end-4');
  4217.     }
  4218.     if (!$el.hasClass(modelIconButtonCls)) {
  4219.       $el.addClass(modelIconButtonCls);
  4220.     }
  4221.  
  4222.     // Get current config state and model information
  4223.     const modelDescription = PP.getModelDescriptionFromModelButton($el);
  4224.     const modelLabelFromAriaLabel = $el.attr('aria-label');
  4225.     const modelLabel = config.modelLabelStyle === MODEL_LABEL_STYLE.NO_TEXT ? '' :
  4226.       getLabelFromModelDescription(config.modelLabelTextMode)(modelLabelFromAriaLabel)(modelDescription);
  4227.  
  4228.     if (modelLabel === undefined || modelLabel === null) {
  4229.       console.error('[handleModelLabel] modelLabel is empty', { modelDescription, modelLabelFromAriaLabel, $el });
  4230.       return;
  4231.     }
  4232.  
  4233.     // Calculate the style classes
  4234.     const extraClasses = [
  4235.       getExtraClassesFromModelLabelStyle(config.modelLabelStyle),
  4236.       config.modelLabelOverwriteCyanIconToGray ? modelLabelOverwriteCyanIconToGrayCls : '',
  4237.     ].filter(Boolean).join(' ');
  4238.  
  4239.     // Check the current "CPU icon removal" configuration state
  4240.     const shouldRemoveCpuIcon = config.modelLabelRemoveCpuIcon;
  4241.     const hasCpuIconRemoval = $el.hasClass(modelLabelRemoveCpuIconCls);
  4242.  
  4243.     // Only update CPU icon removal class if needed
  4244.     if (shouldRemoveCpuIcon !== hasCpuIconRemoval) {
  4245.       if (shouldRemoveCpuIcon) {
  4246.         $el.addClass(modelLabelRemoveCpuIconCls);
  4247.       } else {
  4248.         $el.removeClass(modelLabelRemoveCpuIconCls);
  4249.       }
  4250.     }
  4251.  
  4252.     // Handle larger icons setting
  4253.     const shouldUseLargerIcons = config.modelLabelLargerIcons;
  4254.     const hasLargerIconsClass = $el.hasClass(modelLabelLargerIconsCls);
  4255.  
  4256.     // Only update larger icons class if needed
  4257.     if (shouldUseLargerIcons !== hasLargerIconsClass) {
  4258.       if (shouldUseLargerIcons) {
  4259.         $el.addClass(modelLabelLargerIconsCls);
  4260.       } else {
  4261.         $el.removeClass(modelLabelLargerIconsCls);
  4262.       }
  4263.     }
  4264.  
  4265.     // Work with the label element
  4266.     const $label = $el.find(`.${modelLabelCls}`);
  4267.  
  4268.     // Use data attributes to track current state
  4269.     const storedModelDescriptionStr = $label.attr('data-model-description');
  4270.     const storedExtraClasses = $label.attr('data-extra-classes');
  4271.     const storedLabel = $label.attr('data-label-text');
  4272.  
  4273.     // Only update if something has changed
  4274.     const modelDescriptionStr = JSON.stringify(modelDescription);
  4275.     const needsUpdate =
  4276.       storedModelDescriptionStr !== modelDescriptionStr ||
  4277.       storedExtraClasses !== extraClasses ||
  4278.       storedLabel !== modelLabel;
  4279.  
  4280.     if (needsUpdate) {
  4281.       // Store the current state in data attributes
  4282.       $label.attr('data-model-description', modelDescriptionStr);
  4283.       $label.attr('data-extra-classes', extraClasses);
  4284.       $label.attr('data-label-text', modelLabel);
  4285.  
  4286.       // Apply the text content
  4287.       $label.text(modelLabel);
  4288.  
  4289.       // Apply classes only if they've changed
  4290.       if (storedExtraClasses !== extraClasses) {
  4291.         $label.removeClass(modelLabelStyleButtonSubtleCls)
  4292.           .removeClass(modelLabelStyleButtonWhiteCls)
  4293.           .removeClass(modelLabelStyleButtonCyanCls)
  4294.           .removeClass(modelLabelOverwriteCyanIconToGrayCls)
  4295.           .addClass(extraClasses);
  4296.       }
  4297.     }
  4298.  
  4299.     // Handle error icon if errorType exists
  4300.     const hasErrorType = modelDescription?.errorType !== undefined;
  4301.     const existingErrorIcon = $el.find(`.${errorIconCls}`);
  4302.  
  4303.     // Check if we need to add or remove the error icon
  4304.     if (hasErrorType && existingErrorIcon.length === 0) {
  4305.       // Add the error icon
  4306.       const errorIconUrl = getLucideIconUrl('alert-triangle');
  4307.       const $errorIcon = jq(`<img src="${errorIconUrl}" alt="Error" class="${errorIconCls}" />`)
  4308.         .attr('data-error-type', modelDescription.errorType)
  4309.         .css('filter', hexToCssFilter('#FFA500').filter)
  4310.         .attr('title', modelDescription.errorString || 'Error: Used fallback model');
  4311.  
  4312.       // Insert the error icon at the correct position
  4313.       const $reasoningModelIcon = $el.find(`.${reasoningModelCls}`);
  4314.       if ($reasoningModelIcon.length > 0) {
  4315.         $reasoningModelIcon.after($errorIcon);
  4316.       } else {
  4317.         $el.prepend($errorIcon);
  4318.       }
  4319.     } else if (!hasErrorType && existingErrorIcon.length > 0) {
  4320.       // Remove the error icon if no longer needed
  4321.       existingErrorIcon.remove();
  4322.     } else if (hasErrorType && existingErrorIcon.length > 0) {
  4323.       // Update the error icon title if it changed
  4324.       if (existingErrorIcon.attr('data-error-type') !== modelDescription.errorType) {
  4325.         existingErrorIcon
  4326.           .attr('data-error-type', modelDescription.errorType)
  4327.           .attr('title', modelDescription.errorString || 'Error: Used fallback model');
  4328.       }
  4329.     }
  4330.  
  4331.     // Handle model icon
  4332.     if (config.modelLabelIcons && config.modelLabelIcons !== MODEL_LABEL_ICONS.OFF) {
  4333.       const existingIcon = $el.find(`.${modelIconCls}`);
  4334.  
  4335.       // Get model-specific icon based on model name
  4336.       const modelName = modelDescription?.nameEn ?? '';
  4337.       const brandIconInfo = getBrandIconInfo(modelName, { preferBaseModelCompany: config.modelPreferBaseModelIcon });
  4338.       if (!brandIconInfo) {
  4339.         // TODO: issues with "models" like "Pro Search", "Deep Research" and "Labs"
  4340.         debugLogThrottled('brandIconInfo is null', { modelLabelFromAriaLabel, modelName, modelDescription });
  4341.         return;
  4342.       }
  4343.  
  4344.       const { iconName, brandColor } = brandIconInfo;
  4345.       const existingIconData = existingIcon.attr('data-model-icon');
  4346.       const existingIconMode = existingIcon.attr('data-icon-mode');
  4347.  
  4348.       // Check if we need to update the icon
  4349.       const shouldUpdateIcon =
  4350.         existingIconData !== iconName ||
  4351.         existingIcon.length === 0 ||
  4352.         existingIconMode !== config.modelLabelIcons;
  4353.  
  4354.       if (shouldUpdateIcon) {
  4355.         existingIcon.remove();
  4356.  
  4357.         if (iconName) {
  4358.           const iconUrl = getLobeIconsUrl(iconName);
  4359.           const $icon = jq(`<img src="${iconUrl}" alt="Model icon" class="${modelIconCls}" />`)
  4360.             .attr('data-model-icon', iconName)
  4361.             .attr('data-icon-mode', config.modelLabelIcons);
  4362.  
  4363.           // Apply styling based on monochrome/color mode
  4364.           if (config.modelLabelIcons === MODEL_LABEL_ICONS.MONOCHROME) {
  4365.             // Apply monochrome filter
  4366.             $icon.css('filter', 'invert(1)');
  4367.  
  4368.             // Apply color classes for monochrome icons based on button style
  4369.             if (config.modelLabelStyle === MODEL_LABEL_STYLE.JUST_TEXT) {
  4370.               $icon.addClass(iconColorGrayCls);
  4371.             } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_CYAN) {
  4372.               $icon.addClass(iconColorCyanCls);
  4373.             } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_SUBTLE) {
  4374.               $icon.addClass(iconColorGrayCls);
  4375.             } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_WHITE) {
  4376.               $icon.addClass(iconColorWhiteCls);
  4377.             }
  4378.           } else if (config.modelLabelIcons === MODEL_LABEL_ICONS.COLOR) {
  4379.             // Ensure the icon displays in color
  4380.             $icon.attr('data-brand-color', brandColor);
  4381.             $icon.css('filter', hexToCssFilter(brandColor).filter);
  4382.             $icon.attr('data-brand-color-filter', hexToCssFilter(brandColor).filter);
  4383.           }
  4384.  
  4385.           const $reasoningModelIcon = $el.find(`.${reasoningModelCls}`);
  4386.           const $errorIcon = $el.find(`.${errorIconCls}`);
  4387.           const hasReasoningModelIcon = $reasoningModelIcon.length !== 0;
  4388.           const hasErrorIcon = $errorIcon.length !== 0;
  4389.  
  4390.           if (hasReasoningModelIcon) {
  4391.             // $icon.css({ marginLeft: '0px' });
  4392.             // $el.css({ paddingRight: hasReasoningModelIcon ? '8px' : '2px' });
  4393.             $reasoningModelIcon.after($icon);
  4394.           } else if (hasErrorIcon) {
  4395.             $errorIcon.after($icon);
  4396.           } else {
  4397.             // $icon.css({ marginLeft: '-2px' });
  4398.             $el.prepend($icon);
  4399.           }
  4400.  
  4401.           // if (!modelLabel) {
  4402.           //   $icon.css({ marginRight: '-6px', marginLeft: '-2px' });
  4403.           //   $el.css({ paddingRight: '8px', paddingLeft: '10px' });
  4404.           // }
  4405.         }
  4406.       }
  4407.     } else {
  4408.       // Remove model icon if setting is off
  4409.       $el.find(`.${modelIconCls}`).remove();
  4410.     }
  4411.  
  4412.     // Handle reasoning model icon
  4413.     const isReasoningModel = modelDescription?.modelType === 'reasoning';
  4414.     if (config.modelLabelUseIconForReasoningModels !== MODEL_LABEL_ICON_REASONING_MODEL.OFF) {
  4415.       const prevReasoningModelIcon = $el.find(`.${reasoningModelCls}`);
  4416.       const hasIconSetting = $el.attr('data-reasoning-icon-setting');
  4417.       const currentSetting = config.modelLabelUseIconForReasoningModels;
  4418.       const currentIconColor = config.modelLabelReasoningModelIconColor || '#ffffff';
  4419.       const storedIconColor = $el.attr('data-reasoning-icon-color');
  4420.  
  4421.       // Only make changes if the reasoning status, icon setting, or color has changed
  4422.       if (hasIconSetting !== currentSetting ||
  4423.         (isReasoningModel && prevReasoningModelIcon.length === 0) ||
  4424.         (!isReasoningModel && prevReasoningModelIcon.length > 0) ||
  4425.         storedIconColor !== currentIconColor) {
  4426.  
  4427.         // Update tracking attributes
  4428.         $el.attr('data-reasoning-icon-setting', currentSetting);
  4429.         $el.attr('data-reasoning-icon-color', currentIconColor);
  4430.         $el.attr('data-is-reasoning-model', isReasoningModel);
  4431.  
  4432.         // Update reasoning model class as needed
  4433.         if (!isReasoningModel) {
  4434.           $el.addClass(notReasoningModelCls);
  4435.           prevReasoningModelIcon.remove();
  4436.         } else {
  4437.           $el.removeClass(notReasoningModelCls);
  4438.  
  4439.           if (prevReasoningModelIcon.length === 0) {
  4440.             const iconUrl = getLucideIconUrl(config.modelLabelUseIconForReasoningModels.toLowerCase().replace(' ', '-'));
  4441.             const $icon = jq(`<img src="${iconUrl}" alt="Reasoning model" class="${reasoningModelCls}" />`);
  4442.  
  4443.             $icon.css('filter', hexToCssFilter(config.modelLabelReasoningModelIconColor || '#ffffff').filter);
  4444.  
  4445.             $el.prepend($icon);
  4446.  
  4447.             const $reasoningModelIcon = $el.find(`.${reasoningModelCls}`);
  4448.             $reasoningModelIcon.css({ display: 'inline-block' });
  4449.  
  4450.             if (config.modelLabelStyle === MODEL_LABEL_STYLE.JUST_TEXT) {
  4451.               $reasoningModelIcon.addClass(iconColorGrayCls);
  4452.             } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_CYAN) {
  4453.               $reasoningModelIcon.addClass(iconColorCyanCls);
  4454.             } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_SUBTLE) {
  4455.               $reasoningModelIcon.addClass(iconColorGrayCls);
  4456.             } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_WHITE) {
  4457.               $reasoningModelIcon.addClass(iconColorWhiteCls);
  4458.             }
  4459.  
  4460.             const $modelLabelIcon = $el.find(`.${modelIconCls}`);
  4461.             const $errorIcon = $el.find(`.${errorIconCls}`);
  4462.             if ($modelLabelIcon.length !== 0 || $errorIcon.length !== 0) {
  4463.               $reasoningModelIcon.css({ marginLeft: '4px' });
  4464.             } else {
  4465.               $reasoningModelIcon.css({ marginLeft: '0px' });
  4466.             }
  4467.           } else {
  4468.             prevReasoningModelIcon.css('filter', hexToCssFilter(config.modelLabelReasoningModelIconColor || '#ffffff').filter);
  4469.           }
  4470.         }
  4471.       }
  4472.     }
  4473.   });
  4474. };
  4475.  
  4476. const handleHideDiscoverButton = () => {
  4477.   const config = loadConfigOrDefault();
  4478.   if (!config.hideDiscoverButton) return;
  4479.   const $discoverIcon = PP.getIconsInLeftPanel().parent().find('a[href*="discover"]');
  4480.   $discoverIcon.hide();
  4481. };
  4482.  
  4483. const handleHideRelated = () => {
  4484.   const config = loadConfigOrDefault();
  4485.   if (!config.hideRelated) return;
  4486.  
  4487.   const $relSection = PP.getRelatedSection();
  4488.   if ($relSection.is(':visible')) {
  4489.     debugLog('handleHideRelated: hiding related section', { $relSection });
  4490.     $relSection.hide();
  4491.   }
  4492. };
  4493.  
  4494. const handleHideUpgradeToMaxAds = () => {
  4495.   const config = loadConfigOrDefault();
  4496.   if (config.hideUpgradeToMaxAds === HIDE_UPGRADE_TO_MAX_ADS_OPTIONS.OFF) return;
  4497.  
  4498.   const $upgradeAds = PP.getUpgradeToMaxAds();
  4499.  
  4500.   if ($upgradeAds.length === 0) {
  4501.     // debugLog('handleHideUpgradeToMaxAds: no upgrade ads found');
  4502.     return;
  4503.   }
  4504.  
  4505.   // Remove existing classes first
  4506.   $upgradeAds.removeClass(`${hideUpgradeToMaxAdsCls} ${hideUpgradeToMaxAdsSemiHideCls}`);
  4507.  
  4508.   if (config.hideUpgradeToMaxAds === HIDE_UPGRADE_TO_MAX_ADS_OPTIONS.HIDE) {
  4509.     $upgradeAds.addClass(hideUpgradeToMaxAdsCls);
  4510.     debugLog('handleHideUpgradeToMaxAds: hiding upgrade ads completely', { $upgradeAds });
  4511.   } else if (config.hideUpgradeToMaxAds === HIDE_UPGRADE_TO_MAX_ADS_OPTIONS.SEMI_HIDE) {
  4512.     $upgradeAds.addClass(hideUpgradeToMaxAdsSemiHideCls);
  4513.     debugLog('handleHideUpgradeToMaxAds: semi-hiding upgrade ads', { $upgradeAds });
  4514.   }
  4515. };
  4516.  
  4517. const handleModelSelectionListItemsMax = () => {
  4518.   const config = loadConfigOrDefault();
  4519.   if (config.modelSelectionListItemsMax === MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS.OFF) return;
  4520.  
  4521.   const maxItems = jq(PP.getModelSelectionListItems().toArray().filter(el => PP.isModelSelectionListItemMax(jq(el))));
  4522.   
  4523.   if (config.modelSelectionListItemsMax === MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS.HIDE) {
  4524.     maxItems.hide();
  4525.   } else if (config.modelSelectionListItemsMax === MODEL_SELECTION_LIST_ITEMS_MAX_OPTIONS.SEMI_HIDE) {
  4526.     maxItems.addClass(modelSelectionListItemsSemiHideCls);
  4527.   }
  4528. };
  4529.  
  4530. const handleCustomModelPopover = () => {
  4531.   const config = loadConfigOrDefault();
  4532.   const mode = config.customModelPopover;
  4533.   if (mode === CUSTOM_MODEL_POPOVER_MODE.OFF) return;
  4534.  
  4535.   const $modelSelectionList = PP.getModelSelectionList();
  4536.   if ($modelSelectionList.length === 0) return;
  4537.   const processedAttr = 'ph-processed-custom-model-popover';
  4538.   if ($modelSelectionList.attr(processedAttr)) return;
  4539.   $modelSelectionList.attr(processedAttr, true);
  4540.  
  4541.   $modelSelectionList.nthParent(2).css({ maxHeight: 'initial' });
  4542.  
  4543.   const $reasoningDelim = $modelSelectionList.children(".sm\\:mx-sm.bg-background");
  4544.   if ($reasoningDelim.length !== 1) {
  4545.     logError('handleCustomModelPopover: $reasoningDelim not found or not unique', { $modelSelectionList, $reasoningDelim });
  4546.   }
  4547.  
  4548.   const getModelInfoFromListItemElement = (el) => {
  4549.     const $el = jq(el);
  4550.     const $modelName = $el.find('.flex-col > :is(.text-textMain, .text-super) > span');
  4551.     const modelName = $modelName.text().trim();
  4552.     const modelIsSelected = $modelName.parent().hasClass('text-super');
  4553.     return { $el, $modelName, modelName, modelIsSelected };
  4554.   };
  4555.  
  4556.   const markListItemAsReasoningModel = (el) => {
  4557.     const { $el, modelIsSelected } = getModelInfoFromListItemElement(el);
  4558.     const $icon = jq('<img>', {
  4559.       src: getLucideIconUrl(config.modelLabelUseIconForReasoningModels.toLowerCase()),
  4560.       alt: 'Reasoning model',
  4561.       class: classNames(reasoningModelCls, modelIsSelected ? iconColorCyanCls : iconColorPureWhiteCls),
  4562.     }).css({ marginLeft: '0px' });
  4563.     $el.find('.cursor-pointer > .flex').first().prepend($icon);
  4564.   };
  4565.  
  4566.   const $delims = $modelSelectionList.children(".sm\\:mx-sm");
  4567.  
  4568.   const removeAllDelims = () => {
  4569.     $delims.hide();
  4570.     $reasoningDelim.hide();
  4571.   };
  4572.  
  4573.   const removeAllModelDescriptions = () => {
  4574.     const $modelDescriptions = $modelSelectionList.find('div.text-xs.text-textOff');
  4575.     if ($modelDescriptions.length === 0) {
  4576.       logError('handleCustomModelPopover: $modelDescriptions not found', { $modelSelectionList });
  4577.     }
  4578.     $modelDescriptions.hide();
  4579.  
  4580.     // horizontal alignment of reasoning icon, model name and check mark
  4581.     const $gapSm = $modelSelectionList.find('.group\\/item > .relative > .gap-sm');
  4582.     if ($gapSm.length === 0) {
  4583.       logError('handleCustomModelPopover: $gapSm not found', { $modelSelectionList, $gapSm });
  4584.     }
  4585.     $gapSm.css({ alignItems: 'center' });
  4586.   };
  4587.  
  4588.   const addModelIcons = () => {
  4589.     const $items = PP.getModelSelectionListItems();
  4590.     $items.each((_idx, el) => {
  4591.       const { $el, modelName, modelIsSelected } = getModelInfoFromListItemElement(el);
  4592.       // debugLog('addModelIcons: modelName=', modelName, ', $el=', $el);
  4593.       const modelDescriptor = PP.findModelDescriptorByName(modelName);
  4594.       if (!modelDescriptor) {
  4595.         logError('addModelIcons: modelDescriptor not found', { modelName, $el });
  4596.         return;
  4597.       }
  4598.       const iconUrl = getLobeIconsUrl(modelDescriptor.company);
  4599.       const $icon = jq('<img>', {
  4600.         src: iconUrl,
  4601.         alt: 'Model Icon',
  4602.         class: classNames(modelIconCls, modelIsSelected ? iconColorCyanCls : iconColorPureWhiteCls),
  4603.       }).css({ marginRight: '0' });
  4604.       $el.find('.cursor-pointer > .flex').first().prepend($icon);
  4605.     });
  4606.   };
  4607.   if (config.modelIconsInPopover) {
  4608.     addModelIcons();
  4609.   }
  4610.  
  4611.   const modelSelectionListType = PP.getModelSelectionListType($modelSelectionList);
  4612.   if (config.modelLabelUseIconForReasoningModels !== MODEL_LABEL_ICON_REASONING_MODEL.OFF) {
  4613.     if (modelSelectionListType === 'new') {
  4614.       const $delimIndex = $modelSelectionList.children().index($reasoningDelim);
  4615.       $modelSelectionList.children().slice($delimIndex + 1).each((_idx, el) => {
  4616.         markListItemAsReasoningModel(el);
  4617.       });
  4618.     } else {
  4619.       $modelSelectionList
  4620.         .children()
  4621.         .filter((_idx, rEl) => jq(rEl).find('span').text().includes('Reasoning'))
  4622.         .each((_idx, el) => markListItemAsReasoningModel(el));
  4623.     }
  4624.   }
  4625.  
  4626.   if (mode === CUSTOM_MODEL_POPOVER_MODE.COMPACT_LIST) {
  4627.     removeAllDelims();
  4628.     removeAllModelDescriptions();
  4629.     return;
  4630.   }
  4631.   if (mode === CUSTOM_MODEL_POPOVER_MODE.SIMPLE_LIST) {
  4632.     // it is already a list, we forced the height to grow
  4633.     return;
  4634.   }
  4635.  
  4636.   $modelSelectionList.css({
  4637.     display: 'grid',
  4638.     gridTemplateColumns: '1fr 1fr',
  4639.     gap: mode === CUSTOM_MODEL_POPOVER_MODE.COMPACT_GRID ? '0px' : '10px',
  4640.     'grid-auto-rows': 'min-content',
  4641.   });
  4642.  
  4643.   if (mode === CUSTOM_MODEL_POPOVER_MODE.COMPACT_GRID) {
  4644.     removeAllDelims();
  4645.     removeAllModelDescriptions();
  4646.   }
  4647.  
  4648.   $delims.hide();
  4649.   $reasoningDelim.css({ gridColumn: 'span 2', });
  4650. };
  4651.  
  4652. const mainCaptionAppliedCls = genCssName('mainCaptionApplied');
  4653. const handleMainCaptionHtml = () => {
  4654.   const config = loadConfigOrDefault();
  4655.   if (!config.mainCaptionHtmlEnabled) return;
  4656.   if (PP.getMainCaption().hasClass(mainCaptionAppliedCls)) return;
  4657.   PP.setMainCaptionHtml(config.mainCaptionHtml);
  4658.   PP.getMainCaption().addClass(mainCaptionAppliedCls);
  4659. };
  4660.  
  4661. const handleCustomJs = () => {
  4662.   const config = loadConfigOrDefault();
  4663.   if (!config.customJsEnabled) return;
  4664.  
  4665.   try {
  4666.     // Use a static key to ensure we only run once per page load
  4667.     const dataKey = 'data-' + genCssName('custom-js-applied');
  4668.     if (!jq('body').attr(dataKey)) {
  4669.       jq('body').attr(dataKey, true);
  4670.       // Use Function constructor to evaluate the JS code
  4671.       const customJsFn = new Function(config.customJs);
  4672.       customJsFn();
  4673.     }
  4674.   } catch (error) {
  4675.     console.error('Error executing custom JS:', error);
  4676.   }
  4677. };
  4678.  
  4679. const handleCustomCss = () => {
  4680.   const config = loadConfigOrDefault();
  4681.   if (!config.customCssEnabled) return;
  4682.  
  4683.   try {
  4684.     // Check if custom CSS has already been applied
  4685.     const dataKey = 'data-' + genCssName('custom-css-applied');
  4686.     if (!jq('head').attr(dataKey)) {
  4687.       jq('head').attr(dataKey, true);
  4688.       const styleElement = jq('<style></style>')
  4689.         .addClass(customCssAppliedCls)
  4690.         .text(config.customCss);
  4691.       jq('head').append(styleElement);
  4692.     }
  4693.   } catch (error) {
  4694.     console.error('Error applying custom CSS:', error);
  4695.   }
  4696. };
  4697.  
  4698. const handleCustomWidgetsHtml = () => {
  4699.   const config = loadConfigOrDefault();
  4700.   if (!config.customWidgetsHtmlEnabled) return;
  4701.  
  4702.   try {
  4703.     // Check if custom widgets have already been applied
  4704.     const dataKey = 'data-' + genCssName('custom-widgets-html-applied');
  4705.     if (!jq('body').attr(dataKey)) {
  4706.       jq('body').attr(dataKey, true);
  4707.       const widgetContainer = jq('<div></div>')
  4708.         .addClass(customWidgetsHtmlAppliedCls)
  4709.         .html(config.customWidgetsHtml);
  4710.       PP.getPromptAreaWrapperOfNewThread().append(widgetContainer);
  4711.     }
  4712.   } catch (error) {
  4713.     console.error('Error applying custom widgets HTML:', error);
  4714.   }
  4715. };
  4716.  
  4717. const handleHideSideMenuLabels = () => {
  4718.   const config = loadConfigOrDefault();
  4719.   if (!config.hideSideMenuLabels) return;
  4720.   const $sideMenu = PP.getSidebar();
  4721.   if ($sideMenu.hasClass(sideMenuLabelsHiddenCls)) return;
  4722.   $sideMenu.addClass(sideMenuLabelsHiddenCls);
  4723. };
  4724.  
  4725. let leftMarginOfThreadContentOverride = null; // from API
  4726.  
  4727. const getStyleTagOfLeftMarginOfThreadContent = () => {
  4728.   return jq('head').find(`#${leftMarginOfThreadContentStylesId}`);
  4729. };
  4730.  
  4731. const removeStyleTagOfLeftMarginOfThreadContent = () => {
  4732.   const $style = getStyleTagOfLeftMarginOfThreadContent();
  4733.   if ($style.length > 0) { $style.remove(); }
  4734. };
  4735.  
  4736. const addStyleTagOfLeftMarginOfThreadContent = () => {
  4737.   const config = loadConfigOrDefault();
  4738.   if (getStyleTagOfLeftMarginOfThreadContent().length > 0) return;
  4739.   const val = parseFloat(config.leftMarginOfThreadContent);
  4740.   if (isNaN(val)) return;
  4741.   jq(`<style id="${leftMarginOfThreadContentStylesId}">.max-w-threadContentWidth { margin-left: ${val}em !important; }</style>`).appendTo("head");
  4742. };
  4743.  
  4744. const handleRemoveWhiteSpaceOnLeftOfThreadContent = () => {
  4745.   const config = loadConfigOrDefault();
  4746.   const val = parseFloat(config.leftMarginOfThreadContent);
  4747.   if (isNaN(val)) return;
  4748.   const shouldBeHidden = leftMarginOfThreadContentOverride ?? config.leftMarginOfThreadContentEnabled;
  4749.   const styleIsPresent = getStyleTagOfLeftMarginOfThreadContent().length > 0;
  4750.   if (shouldBeHidden) {
  4751.     if (styleIsPresent) return;
  4752.     addStyleTagOfLeftMarginOfThreadContent();
  4753.   } else {
  4754.     if (!styleIsPresent) return;
  4755.     removeStyleTagOfLeftMarginOfThreadContent();
  4756.   }
  4757. };
  4758.  
  4759. // Function to apply a tag's actions (works for both regular and toggle tags)
  4760. const applyTagActions = async (tag, options = {}) => {
  4761.   const { skipText = false, callbacks = {} } = options;
  4762.  
  4763.   debugLog('Applying tag actions for tag:', tag);
  4764.  
  4765.   // Apply mode setting
  4766.   if (tag.setMode) {
  4767.     const mode = tag.setMode.toLowerCase();
  4768.     if (mode === 'pro' || mode === 'research' || mode === 'deep-research' || mode === 'dr' || mode === 'lab') {
  4769.       // Convert aliases to the actual mode name that PP understands
  4770.       const normalizedMode = mode === 'dr' || mode === 'deep-research' ? 'research' : mode;
  4771.  
  4772.       try {
  4773.         await PP.doSelectQueryMode(normalizedMode);
  4774.         debugLog(`[applyTagActions]: Set mode to ${normalizedMode}`);
  4775.         wait(50);
  4776.       } catch (error) {
  4777.         debugLog(`[applyTagActions]: Error setting mode to ${normalizedMode}`, error);
  4778.       }
  4779.     } else {
  4780.       debugLog(`[applyTagActions]: Invalid mode: ${tag.setMode}`);
  4781.     }
  4782.   }
  4783.  
  4784.   // Apply model setting
  4785.   if (tag.setModel) {
  4786.     try {
  4787.       const modelDescriptor = PP.getModelDescriptorFromId(tag.setModel);
  4788.       debugLog('[applyTagActions]: set model=', tag.setModel, ' modelDescriptor=', modelDescriptor);
  4789.  
  4790.       if (modelDescriptor) {
  4791.         await PP.doSelectModel(modelDescriptor.index);
  4792.         debugLog(`[applyTagActions]: Selected model ${modelDescriptor.nameEn}`);
  4793.         if (callbacks.modelSet) callbacks.modelSet(modelDescriptor);
  4794.       } else {
  4795.         debugLog(`[applyTagActions]: Model descriptor not found for ${tag.setModel}`);
  4796.       }
  4797.     } catch (error) {
  4798.       debugLog(`[applyTagActions]: Error setting model to ${tag.setModel}`, error);
  4799.     }
  4800.   }
  4801.  
  4802.   // Apply sources setting
  4803.   if (tag.setSources) {
  4804.     try {
  4805.       // Use PP's high-level function that handles the whole process
  4806.       await PP.doSetSourcesSelectionListValues()(tag.setSources);
  4807.       debugLog(`[applyTagActions]: Sources set to ${tag.setSources}`);
  4808.       await PP.sleep(50);
  4809.       if (callbacks.sourcesSet) callbacks.sourcesSet();
  4810.     } catch (error) {
  4811.       logError(`[applyTagActions]: Error setting sources`, error);
  4812.     }
  4813.   }
  4814.  
  4815.   // Add text to prompt if it's not empty and we're not skipping text
  4816.   if (!skipText && tag.text && tag.text.trim().length > 0) {
  4817.     try {
  4818.       const $promptArea = PP.getAnyPromptArea();
  4819.       if ($promptArea.length) {
  4820.         const promptAreaRaw = $promptArea[0];
  4821.  
  4822.         debugLog(`[applyTagActions]: Element info - tagName: ${promptAreaRaw.tagName}, contentEditable: ${promptAreaRaw.contentEditable}, hasContentEditableAttr: ${promptAreaRaw.hasAttribute('contenteditable')}`);
  4823.  
  4824.         // Get current text content properly for both textarea and contenteditable
  4825.         const { currentText, caretPos } = PP.getPromptAreaData($promptArea);
  4826.  
  4827.         debugLog(`[applyTagActions]: Current text: "${currentText.substring(0, 50)}${currentText.length > 50 ? '...' : ''}", length: ${currentText.length}, caret: ${caretPos}`);
  4828.         debugLog(`[applyTagActions]: Tag text: "${tag.text}", position: ${tag.position || 'default'}`);
  4829.  
  4830.         const newText = applyTagToString(tag, currentText, caretPos);
  4831.         debugLog(`[applyTagActions]: New text: "${newText.substring(0, 50)}${newText.length > 50 ? '...' : ''}", length: ${newText.length}`);
  4832.  
  4833.         PP.setPromptAreaValue($promptArea, newText);
  4834.         debugLog(`[applyTagActions]: Applied text: "${tag.text.substring(0, 20)}${tag.text.length > 20 ? '...' : ''}"`);
  4835.  
  4836.         // Check if the text is applied with retries, log error if all attempts fail
  4837.         const maxAttempts = 5;
  4838.         const delayMs = 50;
  4839.         const checkTextApplied = async (attempt = 0) => {
  4840.           if (promptAreaRaw.textContent === newText) return true;
  4841.           if (attempt >= maxAttempts) {
  4842.             logError(`[applyTagActions]: Failed to apply text after ${maxAttempts} attempts`);
  4843.             return false;
  4844.           }
  4845.           await PP.sleep(delayMs);
  4846.           return checkTextApplied(attempt + 1);
  4847.         };
  4848.         await checkTextApplied();
  4849.  
  4850.         if (callbacks.textApplied) {
  4851.           debugLog(`[applyTagActions]: Calling textApplied callback`);
  4852.           callbacks.textApplied(newText);
  4853.         }
  4854.       } else {
  4855.         debugLog(`[applyTagActions]: No prompt area found for text insertion`);
  4856.       }
  4857.     } catch (error) {
  4858.       debugLog(`[applyTagActions]: Error applying text`, error);
  4859.     }
  4860.   }
  4861. };
  4862.  
  4863. // Function to apply toggled tags' actions when submit is clicked
  4864. const applyToggledTagsOnSubmit = async ($wrapper) => {
  4865.   debugLog('Applying toggled tags on submit', { $wrapper });
  4866.   const config = loadConfigOrDefault();
  4867.  
  4868.   const allTags = parseTagsText(config.tagsText ?? defaultConfig.tagsText);
  4869.   const currentContainerType = getPromptWrapperTagContainerType($wrapper);
  4870.  
  4871.   if (!currentContainerType) {
  4872.     logError('Could not determine current container type, skipping toggled tags application', {
  4873.       $wrapper,
  4874.       currentContainerType,
  4875.       allTags,
  4876.     });
  4877.     return false;
  4878.   }
  4879.  
  4880.   // Find all toggled tags that are relevant for the current container type
  4881.   const toggledTags = allTags.filter(tag => {
  4882.     // First check if it's a toggle tag
  4883.     if (!tag.toggleMode) return false;
  4884.     const tagId = generateToggleTagId(tag);
  4885.     if (!tagId) return false;
  4886.  
  4887.     // Check in-memory toggle state first
  4888.     const inMemoryToggled = window._phTagToggleState && window._phTagToggleState[tagId] === true;
  4889.  
  4890.     // Then fall back to saved state if tagToggleSave is enabled
  4891.     const savedToggled = config.tagToggleSave && config.tagToggledStates && config.tagToggledStates[tagId] === true;
  4892.  
  4893.     // If neither is toggled, return false
  4894.     if (!inMemoryToggled && !savedToggled) return false;
  4895.  
  4896.     // Then check if this tag is relevant for the current container
  4897.     return isTagRelevantForContainer(currentContainerType)(tag);
  4898.   });
  4899.  
  4900.   debugLog(`Toggled tags for ${currentContainerType} context:`, toggledTags.length);
  4901.  
  4902.   // Apply each toggled tag's actions sequentially, waiting for each to complete
  4903.   for (const tag of toggledTags) {
  4904.     debugLog(`Applying toggled tag: ${tag.label || 'Unnamed tag'}`);
  4905.     try {
  4906.       await applyTagActions(tag);
  4907.       await PP.sleep(10);
  4908.       debugLog(`Successfully applied toggled tag: ${tag.label || 'Unnamed tag'}`);
  4909.     } catch (error) {
  4910.       logError(`Error applying toggled tag: ${tag.label || 'Unnamed tag'}`, error);
  4911.     }
  4912.   }
  4913.  
  4914.   return toggledTags.length > 0;
  4915. };
  4916.  
  4917. // Function to check if there are active toggled tags
  4918. const hasActiveToggledTags = () => {
  4919.   const config = loadConfigOrDefault();
  4920.  
  4921.   // Check in-memory toggle states first
  4922.   if (window._phTagToggleState && Object.values(window._phTagToggleState).some(state => state === true)) {
  4923.     return true;
  4924.   }
  4925.  
  4926.   // Then check saved toggle states if enabled
  4927.   if (!config.tagToggleSave || !config.tagToggledStates) return false;
  4928.  
  4929.   // Check if any tags are toggled on in saved state
  4930.   return Object.values(config.tagToggledStates).some(state => state === true);
  4931. };
  4932.  
  4933. // Function to check if there are active toggled tags for the current context
  4934. const hasActiveToggledTagsForCurrentContext = ($wrapper) => {
  4935.   const config = loadConfigOrDefault();
  4936.   const currentContainerType = getPromptWrapperTagContainerType($wrapper);
  4937.  
  4938.   // START DEBUG LOGGING
  4939.   const wrapperId = $wrapper && $wrapper.length ? ($wrapper.attr('id') || 'wrapper-' + Math.random().toString(36).substring(2, 9)) : 'no-wrapper';
  4940.   if (!$wrapper || !$wrapper.length) {
  4941.     debugLogTags(`hasActiveToggledTagsForCurrentContext - No valid wrapper provided for ${wrapperId}`);
  4942.     return false;
  4943.   }
  4944.  
  4945.   if (!currentContainerType) {
  4946.     debugLogTags(`hasActiveToggledTagsForCurrentContext - No container type for wrapper ${wrapperId}`);
  4947.     return false;
  4948.   }
  4949.   debugLogTags(`hasActiveToggledTagsForCurrentContext - Container type ${currentContainerType} for wrapper ${wrapperId}`);
  4950.   // END DEBUG LOGGING
  4951.  
  4952.   // Get all tags
  4953.   const allTags = parseTagsText(config.tagsText ?? defaultConfig.tagsText);
  4954.  
  4955.   // Filter for toggled-on tags relevant to the current context
  4956.   const hasActiveTags = allTags.some(tag => {
  4957.     if (!tag.toggleMode) return false;
  4958.     const tagId = generateToggleTagId(tag);
  4959.     if (!tagId) return false;
  4960.  
  4961.     // Check in-memory toggle state first
  4962.     const inMemoryToggled = window._phTagToggleState && window._phTagToggleState[tagId] === true;
  4963.  
  4964.     // Then fall back to saved state if tagToggleSave is enabled
  4965.     const savedToggled = config.tagToggleSave && config.tagToggledStates && config.tagToggledStates[tagId] === true;
  4966.  
  4967.     // If neither is toggled, return false
  4968.     if (!inMemoryToggled && !savedToggled) return false;
  4969.  
  4970.     // Check if this tag is relevant for the current container
  4971.     const isRelevant = isTagRelevantForContainer(currentContainerType)(tag);
  4972.  
  4973.     // DEBUG LOG
  4974.     if (inMemoryToggled || savedToggled) {
  4975.       debugLogTags(`hasActiveToggledTagsForCurrentContext - Tag ${tag.label || 'unnamed'}: inMemory=${inMemoryToggled}, saved=${savedToggled}, relevant=${isRelevant}`);
  4976.     }
  4977.  
  4978.     return isRelevant;
  4979.   });
  4980.  
  4981.   // DEBUG LOG
  4982.   debugLogTags(`hasActiveToggledTagsForCurrentContext - Final result for ${wrapperId}: ${hasActiveTags}`);
  4983.  
  4984.   return hasActiveTags;
  4985. };
  4986.  
  4987. // Function to get a comma-separated list of active toggled tag labels
  4988. const getActiveToggledTagLabels = ($wrapper) => {
  4989.   const config = loadConfigOrDefault();
  4990.  
  4991.   // Get all tags
  4992.   const allTags = parseTagsText(config.tagsText ?? defaultConfig.tagsText);
  4993.   // Filter for toggled-on tags
  4994.   const activeTags = allTags.filter(tag => {
  4995.     if (!tag.toggleMode) return false;
  4996.     const tagId = generateToggleTagId(tag);
  4997.     if (!tagId) return false;
  4998.  
  4999.     // Check in-memory toggle state first
  5000.     const inMemoryToggled = window._phTagToggleState && window._phTagToggleState[tagId] === true;
  5001.  
  5002.     // Then fall back to saved state if tagToggleSave is enabled
  5003.     const savedToggled = config.tagToggleSave && config.tagToggledStates && config.tagToggledStates[tagId] === true;
  5004.  
  5005.     // If neither is toggled, return false
  5006.     if (!inMemoryToggled && !savedToggled) return false;
  5007.  
  5008.     // If wrapper is provided, check if this tag is relevant for the current container type
  5009.     if ($wrapper) {
  5010.       const currentContainerType = getPromptWrapperTagContainerType($wrapper);
  5011.       if (currentContainerType && !isTagRelevantForContainer(currentContainerType)(tag)) {
  5012.         return false;
  5013.       }
  5014.     }
  5015.  
  5016.     return true;
  5017.   });
  5018.  
  5019.   // Return labels joined by commas
  5020.   return activeTags.map(tag => tag.label || 'Unnamed tag').join(', ');
  5021. };
  5022.  
  5023. const mockChromeRuntime = () => {
  5024.   if (!window.chrome) {
  5025.     window.chrome = {};
  5026.   }
  5027.   if (!window.chrome.runtime) {
  5028.     window.chrome.runtime = {
  5029.       _about: 'mock by Perplexity Helper; otherwise clicking on the submit button programmatically crashes in promise',
  5030.       sendMessage: function () {
  5031.         log('mockChromeRuntime: sendMessage', arguments);
  5032.         return Promise.resolve({ success: true });
  5033.       }
  5034.     };
  5035.   }
  5036. };
  5037.  
  5038. // Enhanced submit button for toggled tags
  5039. const createEnhancedSubmitButton = (originalButton) => {
  5040.   const $originalBtn = jq(originalButton);
  5041.   const config = loadConfigOrDefault();
  5042.  
  5043.   // Find the proper prompt area wrapper, going up to queryBox class first
  5044.   const $queryBox = $originalBtn.closest(`.${queryBoxCls}`);
  5045.   const $wrapper = $queryBox.length
  5046.     ? $queryBox.parent()
  5047.     : $originalBtn.closest('.flex').parent().parent().parent();
  5048.  
  5049.   const hasActiveInContext = hasActiveToggledTagsForCurrentContext($wrapper);
  5050.   const activeTagLabels = getActiveToggledTagLabels($wrapper);
  5051.   const title = activeTagLabels
  5052.     ? `Submit with toggled tags applied (${activeTagLabels})`
  5053.     : 'Submit with toggled tags applied';
  5054.  
  5055.   const $enhancedBtn = jq('<div/>')
  5056.     .addClass(enhancedSubmitButtonCls)
  5057.     .attr('title', title)
  5058.     // ISSUE: Using hard-coded 'active' class instead of enhancedSubmitButtonActiveCls
  5059.     .toggleClass('active', hasActiveInContext && config.tagToggleModeIndicators)
  5060.     .html(`<span class="${enhancedSubmitButtonPhTextCls}">PH</span>`);
  5061.  
  5062.   // Add the enhanced button as an overlay on the original
  5063.   $originalBtn.css('position', 'relative');
  5064.   $originalBtn.append($enhancedBtn);
  5065.  
  5066.   // Handle click on enhanced button
  5067.   $enhancedBtn.on('click', async (e) => {
  5068.     e.preventDefault();
  5069.     e.stopPropagation();
  5070.  
  5071.     // Show temporary processing indicator
  5072.     // ISSUE: Using hard-coded 'active' class instead of enhancedSubmitButtonActiveCls
  5073.     $enhancedBtn.addClass('active').css('opacity', '1').find(`.${enhancedSubmitButtonPhTextCls}`).text('...');
  5074.  
  5075.     // DEBUG
  5076.     if (loadConfigOrDefault().debugTagsMode) {
  5077.       debugLogTags(`Enhanced button click - adding 'active' class (should be ${enhancedSubmitButtonActiveCls})`);
  5078.     }
  5079.  
  5080.     const finishProcessing = () => {
  5081.       if (loadConfigOrDefault().debugTagsSuppressSubmit) {
  5082.         log('Suppressing submit after applying tags');
  5083.         return;
  5084.       }
  5085.       try {
  5086.         // $originalBtn[0].click();
  5087.         // const event = new MouseEvent('click', {
  5088.         //   bubbles: true,
  5089.         //   cancelable: true,
  5090.         // });
  5091.         // $originalBtn[0].dispatchEvent(event);
  5092.         // $originalBtn.trigger('click');
  5093.  
  5094.         // Try to make a more authentic-looking click event
  5095.         // const clickEvent = new MouseEvent('click', {
  5096.         //   bubbles: true,
  5097.         //   cancelable: true,
  5098.         //   view: window,
  5099.         //   detail: 1, // number of clicks
  5100.         //   isTrusted: true // attempt to make it look trusted (though this is readonly)
  5101.         // });
  5102.         // $originalBtn[0].dispatchEvent(clickEvent);
  5103.  
  5104.         // Find the React component's props
  5105.         // const reactInstance = Object.keys($originalBtn[0]).find(key => key.startsWith('__reactFiber$'));
  5106.         // if (reactInstance) {
  5107.         //   const props = $originalBtn[0][reactInstance].memoizedProps;
  5108.         //   if (props && props.onClick) {
  5109.         //     // Call the handler directly, bypassing the event system
  5110.         //     props.onClick();
  5111.         //   } else {
  5112.         //     logError('[createEnhancedSubmitButton]: No onClick handler found', {
  5113.         //       $originalBtn,
  5114.         //       reactInstance,
  5115.         //       props,
  5116.         //     });
  5117.         //   }
  5118.         // } else {
  5119.         //   logError('[createEnhancedSubmitButton]: No React instance found', {
  5120.         //     $originalBtn,
  5121.         //   });
  5122.         // }
  5123.  
  5124.         // mockChromeRuntime(); // maybe no longer needed?
  5125.         const $freshButton = PP.getSubmitButtonAnyExceptMic($wrapper);
  5126.         if ($freshButton.length) {
  5127.           debugLog('[createEnhancedSubmitButton.finishProcessing]: triggering fresh button click', { $freshButton, ariaLabel: $freshButton.attr('aria-label'), dataTestId: $freshButton.attr('data-testid') });
  5128.           $freshButton.click();
  5129.         } else {
  5130.           logError('[createEnhancedSubmitButton]: No fresh button found', { $wrapper });
  5131.         }
  5132.       } catch (error) {
  5133.         logError('[createEnhancedSubmitButton]: Error in finishProcessing:', error);
  5134.       }
  5135.     };
  5136.  
  5137.     try {
  5138.       // Apply all toggled tags sequentially, waiting for each to complete
  5139.       const tagsApplied = await applyToggledTagsOnSubmit($wrapper);
  5140.  
  5141.       // Add a small delay after applying all tags to ensure UI updates are complete
  5142.       if (tagsApplied) { await PP.sleep(50); }
  5143.  
  5144.       // Reset the button appearance
  5145.       $enhancedBtn.css('opacity', '').find(`.${enhancedSubmitButtonPhTextCls}`).text('');
  5146.       if (!hasActiveInContext) {
  5147.         // ISSUE: Using hard-coded 'active' class instead of enhancedSubmitButtonActiveCls
  5148.         $enhancedBtn.removeClass('active');
  5149.  
  5150.         // DEBUG
  5151.         if (loadConfigOrDefault().debugTagsMode) {
  5152.           debugLogTags(`Enhanced button - removing 'active' class because !hasActiveInContext (should be ${enhancedSubmitButtonActiveCls})`);
  5153.         }
  5154.       }
  5155.  
  5156.       // Trigger the original button click
  5157.       finishProcessing();
  5158.     } catch (error) {
  5159.       console.error('Error in enhanced submit button:', error);
  5160.       $enhancedBtn.css('opacity', '').find(`.${enhancedSubmitButtonPhTextCls}`).text('');
  5161.       if (!hasActiveInContext) {
  5162.         // ISSUE: Using hard-coded 'active' class instead of enhancedSubmitButtonActiveCls
  5163.         $enhancedBtn.removeClass('active');
  5164.  
  5165.         // DEBUG
  5166.         if (loadConfigOrDefault().debugTagsMode) {
  5167.           debugLogTags(`Enhanced button error handler - removing 'active' class (should be ${enhancedSubmitButtonActiveCls})`);
  5168.         }
  5169.       }
  5170.       // Still attempt to submit even if there was an error
  5171.       finishProcessing();
  5172.     }
  5173.   });
  5174.  
  5175.   return $enhancedBtn;
  5176. };
  5177.  
  5178. // Add enhanced submit buttons to handle toggled tags
  5179. const patchSubmitButtonsForToggledTags = () => {
  5180.   const config = loadConfigOrDefault();
  5181.  
  5182.   // Skip if toggle mode hooks are disabled
  5183.   if (!config.toggleModeHooks) return;
  5184.  
  5185.   const submitButtons = PP.getSubmitButtonAnyExceptMic();
  5186.   if (!submitButtons.length) return;
  5187.  
  5188.   submitButtons.each((_, btn) => {
  5189.     const $btn = jq(btn);
  5190.     if ($btn.attr('data-patched-for-toggled-tags')) return;
  5191.  
  5192.     // Create our enhanced button overlay
  5193.     createEnhancedSubmitButton(btn);
  5194.  
  5195.     // Mark as patched
  5196.     $btn.attr('data-patched-for-toggled-tags', 'true');
  5197.   });
  5198. };
  5199.  
  5200. // Function to add keypress listeners to prompt areas
  5201. const updateTextareaIndicator = ($textarea) => {
  5202.   if (!$textarea || !$textarea.length) return;
  5203.  
  5204.   // Get the current config
  5205.   const config = loadConfigOrDefault();
  5206.  
  5207.   // Get the wrapper
  5208.   const $wrapper = PP.getAnyPromptAreaWrapper($textarea.nthParent(4));
  5209.   if (!$wrapper || !$wrapper.length) return;
  5210.  
  5211.   // Check for active toggled tags in this context
  5212.   const hasActiveInContext = hasActiveToggledTagsForCurrentContext($wrapper);
  5213.  
  5214.   // Should we show the indicator?
  5215.   const shouldShowIndicator = hasActiveInContext && config.tagToggleModeIndicators;
  5216.  
  5217.   // Get current state to avoid unnecessary DOM updates
  5218.   const currentlyHasClass = $textarea.hasClass(promptAreaKeyListenerCls);
  5219.   const currentlyHasIndicator = $textarea.siblings(`.${promptAreaKeyListenerIndicatorCls}`).length > 0;
  5220.  
  5221.   // Only update DOM if state has changed
  5222.   if (currentlyHasClass !== shouldShowIndicator || currentlyHasIndicator !== shouldShowIndicator) {
  5223.     if (shouldShowIndicator) {
  5224.       // Apply the class for the glow effect with transition if not already applied
  5225.       if (!currentlyHasClass) {
  5226.         $textarea.addClass(promptAreaKeyListenerCls);
  5227.       }
  5228.  
  5229.       // Add the pulse dot indicator if not already present
  5230.       if (!currentlyHasIndicator) {
  5231.         // Make sure parent has relative positioning for proper indicator positioning
  5232.         const $parent = $textarea.parent();
  5233.         if ($parent.css('position') !== 'relative') {
  5234.           $parent.css('position', 'relative');
  5235.         }
  5236.  
  5237.         const $indicator = jq('<div>')
  5238.           .addClass(promptAreaKeyListenerIndicatorCls)
  5239.           .attr('title', 'Toggle tags active - Press Enter to submit');
  5240.  
  5241.         $textarea.after($indicator);
  5242.  
  5243.         // Force a reflow then add visible class for animation
  5244.         $indicator[0].offsetHeight; // Force reflow
  5245.         $indicator.addClass('visible');
  5246.       }
  5247.     } else {
  5248.       // Remove the class with transition for fade out
  5249.       if (currentlyHasClass) {
  5250.         $textarea.removeClass(promptAreaKeyListenerCls);
  5251.       }
  5252.  
  5253.       // For indicator, first make it invisible with transition, then remove from DOM
  5254.       if (currentlyHasIndicator) {
  5255.         const $indicator = $textarea.siblings(`.${promptAreaKeyListenerIndicatorCls}`);
  5256.         $indicator.removeClass('visible');
  5257.  
  5258.         // Remove from DOM after transition completes
  5259.         setTimeout(() => {
  5260.           if ($indicator.length) $indicator.remove();
  5261.         }, 500); // Match the transition duration in CSS
  5262.       }
  5263.     }
  5264.   }
  5265. };
  5266.  
  5267.  
  5268.  
  5269. const updateToggleIndicators = () => {
  5270.   const config = loadConfigOrDefault();
  5271.  
  5272.   // Track state changes with this object for debugging
  5273.   const debugStateChanges = {
  5274.     totalButtons: 0,
  5275.     unchanged: 0,
  5276.     titleChanged: 0,
  5277.     activeStateChanged: 0,
  5278.     stateChanges: []
  5279.   };
  5280.  
  5281.   // Update all enhanced submit buttons individually
  5282.   jq(`.${enhancedSubmitButtonCls}`).each((idx, btn) => {
  5283.     const $btn = jq(btn);
  5284.     const $originalBtn = $btn.parent();
  5285.     const btnId = $btn.attr('id') || `btn-${idx}`;
  5286.  
  5287.     debugStateChanges.totalButtons++;
  5288.  
  5289.     // Find the proper prompt area wrapper, going up to queryBox class first
  5290.     const $queryBox = $originalBtn.closest(`.${queryBoxCls}`);
  5291.     const $wrapper = $queryBox.length
  5292.       ? $queryBox.parent()
  5293.       : $originalBtn.closest('.flex').parent().parent().parent();
  5294.  
  5295.     // DEBUGGING - Track button's wrapper
  5296.     const wrapperId = $wrapper && $wrapper.length ? ($wrapper.attr('id') || 'wrapper-' + Math.random().toString(36).substring(2, 9)) : 'no-wrapper';
  5297.     if (loadConfigOrDefault().debugTagsMode) {
  5298.       debugLogTags(`updateToggleIndicators - Button ${btnId} in wrapper ${wrapperId}`);
  5299.     }
  5300.  
  5301.     const hasActiveInContext = hasActiveToggledTagsForCurrentContext($wrapper);
  5302.     const activeTagLabels = getActiveToggledTagLabels($wrapper);
  5303.     const title = activeTagLabels
  5304.       ? `Submit with toggled tags applied (${activeTagLabels})`
  5305.       : 'Submit with toggled tags applied';
  5306.  
  5307.     // Get current state to avoid unnecessary DOM updates
  5308.     // ISSUE: using hard-coded 'active' class instead of generated enhancedSubmitButtonActiveCls
  5309.     const isCurrentlyActive = $btn.hasClass('active');
  5310.     const shouldBeActive = hasActiveInContext && config.tagToggleModeIndicators;
  5311.  
  5312.     // DEBUG - Log the class mismatch
  5313.     if (loadConfigOrDefault().debugTagsMode) {
  5314.       const hasGeneratedClass = $btn.hasClass(enhancedSubmitButtonActiveCls);
  5315.       if (isCurrentlyActive !== hasGeneratedClass) {
  5316.         debugLogTags(`Class mismatch detected for ${btnId}: 'active'=${isCurrentlyActive}, '${enhancedSubmitButtonActiveCls}'=${hasGeneratedClass}`);
  5317.       }
  5318.     }
  5319.     const currentTitle = $btn.attr('title');
  5320.  
  5321.     // DEBUGGING - Track state for this button
  5322.     const stateChange = {
  5323.       btnId,
  5324.       wrapperId,
  5325.       isCurrentlyActive,
  5326.       shouldBeActive,
  5327.       stateChanged: isCurrentlyActive !== shouldBeActive,
  5328.       titleChanged: currentTitle !== title
  5329.     };
  5330.     debugStateChanges.stateChanges.push(stateChange);
  5331.  
  5332.     // Only update DOM elements if state has actually changed
  5333.     if (isCurrentlyActive !== shouldBeActive || currentTitle !== title) {
  5334.       // Update title if changed
  5335.       if (currentTitle !== title) {
  5336.         debugStateChanges.titleChanged++;
  5337.         $btn.attr('title', title);
  5338.       }
  5339.  
  5340.       // Toggle active class with transition effect if state has changed
  5341.       if (isCurrentlyActive !== shouldBeActive) {
  5342.         debugStateChanges.activeStateChanged++;
  5343.         // ISSUE: We're using literal 'active' here instead of enhancedSubmitButtonActiveCls
  5344.         // This should be fixed to use the generated class, but we're just logging for now
  5345.         // No additional class manipulation needed - CSS transitions handle the animation
  5346.         $btn.toggleClass('active', shouldBeActive);
  5347.  
  5348.         if (loadConfigOrDefault().debugTagsMode) {
  5349.           debugLogTags(`Class toggle for ${btnId}: 'active' changed to ${shouldBeActive}, from ${isCurrentlyActive}`);
  5350.         }
  5351.  
  5352.         // If transitioning to active, ensure we have proper z-index to show over other elements
  5353.         if (shouldBeActive) {
  5354.           $originalBtn.css('z-index', '5');
  5355.         } else {
  5356.           // Reset z-index after transition
  5357.           setTimeout(() => $originalBtn.css('z-index', ''), 500);
  5358.         }
  5359.       }
  5360.  
  5361.       // Update outline only if debugging state requires it
  5362.       $btn.css({ outline: config.debugTagsSuppressSubmit ? '5px solid red' : 'none' });
  5363.     } else {
  5364.       debugStateChanges.unchanged++;
  5365.     }
  5366.   });
  5367.  
  5368.   // Log state change stats
  5369.   if (loadConfigOrDefault().debugTagsMode) {
  5370.     if (debugStateChanges.activeStateChanged > 0) {
  5371.       debugLogTags(`updateToggleIndicators - SUMMARY: total=${debugStateChanges.totalButtons}, unchanged=${debugStateChanges.unchanged}, titleChanged=${debugStateChanges.titleChanged}, activeStateChanged=${debugStateChanges.activeStateChanged}`);
  5372.       debugLogTags('updateToggleIndicators - State changes:', debugStateChanges.stateChanges.filter(sc => sc.stateChanged));
  5373.     }
  5374.   }
  5375.  
  5376.   // Also update all textarea indicators when toggle mode hooks are enabled
  5377.   if (config.toggleModeHooks) {
  5378.     // Get all prompt areas with keypress listeners (both textarea and contenteditable divs)
  5379.     const promptAreas = jq('textarea[data-toggle-keypress-listener="true"], div[contenteditable][data-toggle-keypress-listener="true"]');
  5380.     if (promptAreas.length) {
  5381.       promptAreas.each((_, promptArea) => {
  5382.         updateTextareaIndicator(jq(promptArea));
  5383.       });
  5384.     }
  5385.   }
  5386. };
  5387.  
  5388. // Function to reset all toggle states (both in-memory and saved if tagToggleSave is enabled)
  5389. const resetAllToggleStates = () => {
  5390.   // Reset in-memory state
  5391.   window._phTagToggleState = {};
  5392.  
  5393.   // Reset saved state if tagToggleSave is enabled
  5394.   const config = loadConfigOrDefault();
  5395.   if (config.tagToggleSave && config.tagToggledStates) {
  5396.     const updatedConfig = {
  5397.       ...config,
  5398.       tagToggledStates: {}
  5399.     };
  5400.     saveConfig(updatedConfig);
  5401.   }
  5402.  
  5403.   // Update existing toggle tags directly in the DOM if possible
  5404.   const existingToggledTags = jq(`.${tagCls}[data-toggled="true"]`);
  5405.   if (existingToggledTags.length > 0) {
  5406.     existingToggledTags.each((_, el) => {
  5407.       const $el = jq(el);
  5408.       const tagData = JSON.parse($el.attr('data-tag') || '{}');
  5409.  
  5410.       if (tagData) {
  5411.         // Reset visual state back to untoggled
  5412.         updateToggleTagState($el, tagData, false);
  5413.       }
  5414.     });
  5415.   } else {
  5416.     // If we couldn't find any toggled tags in the DOM (perhaps they were added after),
  5417.     // fall back to a full refresh
  5418.     refreshTags({ force: true });
  5419.   }
  5420.  
  5421.   // Update indicators
  5422.   updateToggleIndicators();
  5423. };
  5424.  
  5425. // Function to generate a consistent ID for toggle tags
  5426. const generateToggleTagId = tag => {
  5427.   if (!tag.toggleMode) return null;
  5428.   return `toggle:${(tag.label || '') + ':' + (tag.position || '') + ':' + (tag.color || '')}:${tag.originalIndex || 0}`;
  5429. };
  5430.  
  5431. const work = () => {
  5432.   handleModalCreation();
  5433.   handleTopSettingsButtonInsertion();
  5434.   handleTopSettingsButtonSetup();
  5435.   handleSettingsInit();
  5436.   handleLeftSettingsButtonSetup();
  5437.   handleExtraSpaceBellowLastAnswer();
  5438.   handleHideDiscoverButton();
  5439.   handleHideSideMenuLabels();
  5440.   handleRemoveWhiteSpaceOnLeftOfThreadContent();
  5441.   updateToggleIndicators();
  5442.   patchSubmitButtonsForToggledTags();
  5443.   handleQuickProfileButton();
  5444.  
  5445.   const regex = /^https:\/\/www\.perplexity\.ai\/search\/?.*/;
  5446.   const currentUrl = jq(location).attr('href');
  5447.   const matchedCurrentUrlAsSearchPage = regex.test(currentUrl);
  5448.  
  5449.   // debugLog("currentUrl", currentUrl);
  5450.   // debugLog("matchedCurrentUrlAsSearchPage", matchedCurrentUrlAsSearchPage);
  5451.  
  5452.   if (matchedCurrentUrlAsSearchPage) {
  5453.     handleSearchPage();
  5454.   }
  5455. };
  5456.  
  5457. const fastWork = () => {
  5458.   handleCustomModelPopover();
  5459.   handleModelSelectionListItemsMax();
  5460.   handleSlimLeftMenu();
  5461.   handleHideHomeWidgets();
  5462.   handleHideRelated();
  5463.   handleHideUpgradeToMaxAds();
  5464.   applySideMenuHiding();
  5465.   replaceIconsInMenu();
  5466.   handleModelLabel();
  5467.   handleMainCaptionHtml();
  5468.   handleCustomJs();
  5469.   handleCustomCss();
  5470.   handleCustomWidgetsHtml();
  5471. };
  5472.  
  5473. const fontUrls = {
  5474.   Roboto: 'https://fonts.cdnfonts.com/css/roboto',
  5475.   Montserrat: 'https://fonts.cdnfonts.com/css/montserrat',
  5476.   Lato: 'https://fonts.cdnfonts.com/css/lato',
  5477.   Oswald: 'https://fonts.cdnfonts.com/css/oswald-4',
  5478.   Raleway: 'https://fonts.cdnfonts.com/css/raleway-5',
  5479.   'Ubuntu Mono': 'https://fonts.cdnfonts.com/css/ubuntu-mono',
  5480.   Nunito: 'https://fonts.cdnfonts.com/css/nunito',
  5481.   Poppins: 'https://fonts.cdnfonts.com/css/poppins',
  5482.   'Playfair Display': 'https://fonts.cdnfonts.com/css/playfair-display',
  5483.   Merriweather: 'https://fonts.cdnfonts.com/css/merriweather',
  5484.   'Fira Sans': 'https://fonts.cdnfonts.com/css/fira-sans',
  5485.   Quicksand: 'https://fonts.cdnfonts.com/css/quicksand',
  5486.   Comfortaa: 'https://fonts.cdnfonts.com/css/comfortaa-3',
  5487.   'Almendra': 'https://fonts.cdnfonts.com/css/almendra',
  5488.   'Enchanted Land': 'https://fonts.cdnfonts.com/css/enchanted-land',
  5489.   'Cinzel Decorative': 'https://fonts.cdnfonts.com/css/cinzel-decorative',
  5490.   'Orbitron': 'https://fonts.cdnfonts.com/css/orbitron',
  5491.   'Exo 2': 'https://fonts.cdnfonts.com/css/exo-2',
  5492.   'Chakra Petch': 'https://fonts.cdnfonts.com/css/chakra-petch',
  5493.   'Open Sans Condensed': 'https://fonts.cdnfonts.com/css/open-sans-condensed',
  5494.   'Saira Condensed': 'https://fonts.cdnfonts.com/css/saira-condensed',
  5495.   Inter: 'https://cdn.jsdelivr.net/npm/@fontsource/inter@4.5.0/index.min.css',
  5496.   'JetBrains Mono': 'https://fonts.cdnfonts.com/css/jetbrains-mono',
  5497. };
  5498.  
  5499. const loadFont = (fontName) => {
  5500.   const fontUrl = fontUrls[fontName];
  5501.   debugLog('loadFont', { fontName, fontUrl });
  5502.   if (fontUrl) {
  5503.     const link = document.createElement('link');
  5504.     link.rel = 'stylesheet';
  5505.     link.href = fontUrl;
  5506.     document.head.appendChild(link);
  5507.   }
  5508. };
  5509.  
  5510. const setupFixImageGenerationOverlay = () => {
  5511.   const config = loadConfigOrDefault();
  5512.   if (config.fixImageGenerationOverlay) {
  5513.     setInterval(handleFixImageGenerationOverlay, 250);
  5514.   }
  5515. };
  5516.  
  5517. (function () {
  5518.   if (loadConfigOrDefault()?.debugMode) {
  5519.     enableDebugMode();
  5520.   }
  5521.  
  5522.   debugLog('TAGS_PALETTES', TAGS_PALETTES);
  5523.   if (loadConfigOrDefault()?.debugTagsMode) {
  5524.     enableTagsDebugging();
  5525.   }
  5526.  
  5527.   // Initialize in-memory toggle state from saved state if tagToggleSave is enabled
  5528.   const config = loadConfigOrDefault();
  5529.   if (config.tagToggleSave && config.tagToggledStates) {
  5530.     window._phTagToggleState = { ...config.tagToggledStates };
  5531.     debugLog('Initialized in-memory toggle state from saved state', window._phTagToggleState);
  5532.   } else {
  5533.     window._phTagToggleState = {};
  5534.   }
  5535.  
  5536.   'use strict';
  5537.   jq("head").append(`<style>${styles}</style>`);
  5538.  
  5539.   setupTags();
  5540.   setupFixImageGenerationOverlay();
  5541.   initializePerplexityHelperHandlers();
  5542.  
  5543.   const mainInterval = setInterval(work, 1000);
  5544.   // This interval is too fast (100ms) which causes frequent DOM updates
  5545.   // and leads to the class toggling issue with 'active' vs enhancedSubmitButtonActiveCls
  5546.   const fastInterval = setInterval(fastWork, 100);
  5547.   window.ph = {
  5548.     stopWork: () => { clearInterval(mainInterval); clearInterval(fastInterval); },
  5549.     work,
  5550.     fastWork,
  5551.     jq,
  5552.     showPerplexityHelperSettingsModal,
  5553.     enableTagsDebugging: () => { debugTags = true; },
  5554.     disableTagsDebugging: () => { debugTags = false; },
  5555.     leftMarginOfThreadContent: {
  5556.       enable: () => {
  5557.         leftMarginOfThreadContentOverride = true;
  5558.         handleRemoveWhiteSpaceOnLeftOfThreadContent();
  5559.       },
  5560.       disable: () => {
  5561.         leftMarginOfThreadContentOverride = false;
  5562.         handleRemoveWhiteSpaceOnLeftOfThreadContent();
  5563.       },
  5564.       toggle: () => {
  5565.         leftMarginOfThreadContentOverride = !leftMarginOfThreadContentOverride;
  5566.         handleRemoveWhiteSpaceOnLeftOfThreadContent();
  5567.       },
  5568.     },
  5569.   };
  5570.  
  5571.   loadFont(loadConfigOrDefault().tagFont);
  5572.   loadFont('JetBrains Mono');
  5573.  
  5574.   // Auto open settings if enabled
  5575.   if (loadConfigOrDefault()?.autoOpenSettings) {
  5576.     // Use setTimeout to ensure the DOM is ready
  5577.     setTimeout(() => {
  5578.       showPerplexityHelperSettingsModal();
  5579.     }, 1000);
  5580.   }
  5581.  
  5582.   console.log(`%c${userscriptName}%c\n  %cTiartyos%c & %cmonnef%c\n ... loaded`,
  5583.     'color: #aaffaa; font-size: 1.5rem; background-color: rgba(0, 0, 0, 0.5); padding: 2px;',
  5584.     '',
  5585.     'color: #6b02ff; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); padding: 2px;',
  5586.     '',
  5587.     'color: #aa2cc3; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); padding: 2px;',
  5588.     '',
  5589.     '');
  5590.   console.log('to show settings use:\nph.showPerplexityHelperSettingsModal()');
  5591. }());

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址