☰

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