☰

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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