☰

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     5.1
  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/perplex-plus@0.0.18/dist/lib/perplex-plus.js
  17. // @homepageURL https://www.perplexity.ai/
  18. // @license     GPL-3.0-or-later
  19. // ==/UserScript==
  20.  
  21. const PP = window.PP.noConflict();
  22. const jq = PP.jq;
  23. const $c = (cls, parent) => jq(`.${cls}`, parent);
  24. const $i = (id, parent) => jq(`#${id}`, parent);
  25. const takeStr = n => str => str.slice(0, n);
  26. const dropStr = n => str => str.slice(n);
  27. const filter = pred => xs => xs.filter(pred);
  28. const nl = '\n';
  29. const markdownConverter = new showdown.Converter({ tables: true });
  30.  
  31. let debugMode = false;
  32. const enableDebugMode = () => {
  33.   debugMode = true;
  34. };
  35.  
  36. const userscriptName = 'Perplexity helper';
  37. const logPrefix = `[${userscriptName}]`;
  38.  
  39. const debugLog = (...args) => {
  40.   if (debugMode) {
  41.     console.debug(logPrefix, ...args);
  42.   }
  43. }
  44.  
  45. let debugTags = false;
  46. const debugLogTags = (...args) => {
  47.   if (debugTags) {
  48.     console.debug(logPrefix, '[tags]', ...args);
  49.   }
  50. }
  51.  
  52. const enableTagsDebugging = () => {
  53.   debugTags = true;
  54. }
  55.  
  56. ($ => {
  57.   $.fn.nthParent = function (n) {
  58.     let $p = $(this);
  59.     if (!(n > -0)) { return $() }
  60.     let p = 1 + n;
  61.     while (p--) { $p = $p.parent(); }
  62.     return $p;
  63.   };
  64. })(jq);
  65.  
  66. // unpkg had quite often problems, tens of seconds to load, sometime 503 fails
  67. // const getLucideIconUrl = iconName => `https://unpkg.com/lucide-static@latest/icons/${iconName}.svg`;
  68. const getLucideIconUrl = (iconName) => `https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/${iconName}.svg`;
  69.  
  70. const getTDesignIconUrl = iconName => `https://api.iconify.design/tdesign:${iconName}.svg`;
  71.  
  72. const parseIconName = iconName => {
  73.   if (!iconName.includes(':')) return { typePrefix: 'l', processedIconName: iconName };
  74.   const [typePrefix, processedIconName] = iconName.split(':');
  75.   return { typePrefix, processedIconName };
  76. };
  77.  
  78. const getIconUrl = iconName => {
  79.   const {typePrefix, processedIconName} = parseIconName(iconName);
  80.   if (typePrefix === 'td') {
  81.     return getTDesignIconUrl(processedIconName);
  82.   }
  83.   if (typePrefix === 'l') {
  84.     return getLucideIconUrl(processedIconName);
  85.   }
  86.   throw new Error(`Unknown icon type: ${typePrefix}`);
  87. }
  88.  
  89. const pplxHelperTag = 'pplx-helper';
  90. const genCssName = x => `${pplxHelperTag}--${x}`;
  91.  
  92. 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}"  >
  93. <div class="flex items-center leading-none justify-center gap-xs">
  94.     ${icoName}
  95. </div></button>`;
  96.  
  97. const upperButton = (id, icoName, title) => `
  98. <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>
  99. `
  100.  
  101. const textButton = (id, text, title) => `
  102. <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">
  103. <div class="flex items-center leading-none justify-center gap-xs"><span class="flex items-center relative ">${text}</span></div></button>
  104. `
  105. const icoColor = '#1F1F1F';
  106. 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>`;
  107. 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;"/>
  108.     <g transform="matrix(14.135,0,0,14.135,329.029,-28.2701)">
  109.         <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;"/>
  110.     </g></svg>`;
  111.  
  112. 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"
  113. \t xml:space="preserve">
  114. <g>
  115. \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
  116. \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
  117. \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
  118. \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
  119. \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
  120. \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
  121. \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
  122. \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
  123. \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
  124. \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
  125. \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
  126. \t\tC32.443,9,30.766,10.677,28.701,10.677z"/>
  127. </g>
  128. </svg>`;
  129.  
  130.  
  131. const perplexityHelperModalId = 'perplexityHelperModal';
  132. const getPerplexityHelperModal = () => $i(perplexityHelperModalId);
  133.  
  134. const modalSettingsTitleCls = genCssName('modal-settings-title');
  135.  
  136. const gitlabLogo = classes => `
  137. <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>
  138. `;
  139.  
  140. const modalLargeIconAnchorClasses = 'hover:scale-110 opacity-50 hover:opacity-100 transition-all duration-300';
  141.  
  142. const modalTabGroupTabsCls = genCssName('modal-tab-group-tabs');
  143. const modalTabGroupActiveCls = genCssName('modal-tab-group-active');
  144. const modalTabGroupContentCls = genCssName('modal-tab-group-content');
  145. const modalTabGroupSeparatorCls = genCssName('modal-tab-group-separator');
  146.  
  147. const modalHTML = `
  148. <div id="${perplexityHelperModalId}" class="modal">
  149.   <div class="modal-content">
  150.     <span class="close">&times;</span>
  151.     <h1 class="flex items-center gap-4">
  152.       <span class="mr-4 ${modalSettingsTitleCls}">Perplexity Helper</span>
  153.       <a href="https://gitlab.com/Tiartyos/perplexity-helper"
  154.         target="_blank" title="GitLab Repository"
  155.         class="${modalLargeIconAnchorClasses}"
  156.       >
  157.         ${gitlabLogo('w-8 h-8 invert')}
  158.       </a>
  159.       <a href="https://tiartyos.gitlab.io/perplexity-helper/"
  160.         target="_blank" title="Web Page"
  161.         class="${modalLargeIconAnchorClasses}"
  162.       >
  163.         <img src="${getLucideIconUrl('globe')}" class="w-8 h-8 invert">
  164.       </a>
  165.     </h1>
  166.     <p class="text-xs opacity-30 mt-1 mb-3">Changes may require page refresh.</p>
  167.     <div class="${modalTabGroupTabsCls}">
  168.     </div>
  169.     <hr class="!mt-0 !mb-0 ${modalTabGroupSeparatorCls}">
  170.   </div>
  171. </div>
  172. `;
  173.  
  174. const tagsContainerCls = genCssName('tags-container');
  175. const tagContainerCompactCls = genCssName('tag-container-compact');
  176. const tagContainerWiderCls = genCssName('tag-container-wider');
  177. const tagContainerWideCls = genCssName('tag-container-wide');
  178. const tagContainerExtraWideCls = genCssName('tag-container-extra-wide');
  179. const threadTagContainerCls = genCssName('thread-tag-container');
  180. const newTagContainerCls = genCssName('new-tag-container');
  181. const newTagContainerInCollectionCls = genCssName('new-tag-container-in-collection');
  182. const tagCls = genCssName('tag');
  183. const tagDarkTextCls = genCssName('tag-dark-text');
  184. const tagIconCls = genCssName('tag-icon');
  185. const tagPaletteCls = genCssName('tag-palette');
  186. const tagPaletteItemCls = genCssName('tag-palette-item');
  187. const tagTweakNoBorderCls = genCssName('tag-tweak-no-border');
  188. const tagTweakSlimPaddingCls = genCssName('tag-tweak-slim-padding');
  189. const tagsPreviewCls = genCssName('tags-preview');
  190. const tagsPreviewNewCls = genCssName('tags-preview-new');
  191. const tagsPreviewThreadCls = genCssName('tags-preview-thread');
  192. const tagsPreviewNewInCollectionCls = genCssName('tags-preview-new-in-collection');
  193. const tagTweakTextShadowCls = genCssName('tag-tweak-text-shadow');
  194. const tagFenceCls = genCssName('tag-fence');
  195. const tagAllFencesWrapperCls = genCssName('tag-all-fences-wrapper');
  196. const tagRestOfTagsWrapperCls = genCssName('tag-rest-of-tags-wrapper');
  197. const tagFenceContentCls = genCssName('tag-fence-content');
  198. const tagDirectoryCls = genCssName('tag-directory');
  199. const tagDirectoryContentCls = genCssName('tag-directory-content');
  200. const helpTextCls = genCssName('help-text');
  201. const queryBoxCls = genCssName('query-box');
  202. const controlsAreaCls = genCssName('controls-area');
  203. const textAreaCls = genCssName('text-area');
  204. const standardButtonCls = genCssName('standard-button');
  205. const lucideIconParentCls = genCssName('lucide-icon-parent');
  206. const roundedMD = genCssName('rounded-md');
  207. const leftPanelSlimCls = genCssName('left-panel-slim');
  208. const modelIconButtonCls = genCssName('model-icon-button');
  209. const modelLabelCls = genCssName('model-label');
  210. const modelLabelStyleJustTextCls = genCssName('model-label-style-just-text');
  211. const modelLabelStyleButtonSubtleCls = genCssName('model-label-style-button-subtle');
  212. const modelLabelStyleButtonWhiteCls = genCssName('model-label-style-button-white');
  213. const modelLabelStyleButtonCyanCls = genCssName('model-label-style-button-cyan');
  214. const modelLabelOverwriteCyanIconToGrayCls = genCssName('model-label-overwrite-cyan-icon-to-gray');
  215. const reasoningModelCls = genCssName('reasoning-model');
  216. const iconColorCyanCls = genCssName('icon-color-cyan');
  217. const iconColorGrayCls = genCssName('icon-color-gray');
  218. const iconColorWhiteCls = genCssName('icon-color-white');
  219. const iconColorGoldCls = genCssName('icon-color-gold');
  220.  
  221. const topSettingsButtonId = genCssName('settings-button-top');
  222. const leftSettingsButtonId = genCssName('settings-button-left');
  223. const leftSettingsButtonWrapperId = genCssName('settings-button-left-wrapper');
  224.  
  225. const cyanPerplexityColor = '#1fb8cd';
  226. const cyanMediumPerplexityColor = '#204b51';
  227. const cyanDarkPerplexityColor = '#203133';
  228.  
  229. const styles = `
  230. .textarea_wrapper {
  231.   display: flex;
  232.   flex-direction: column;
  233. }
  234.  
  235. @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&display=swap');
  236.  
  237. .textarea_wrapper > textarea {
  238.   width: 100%;
  239.   background-color: rgba(0, 0, 0, 0.8);
  240.   padding: 0 5px;
  241.   border-radius: 0.5em;
  242. }
  243.  
  244. .textarea_label {
  245. }
  246.  
  247. .${helpTextCls} {
  248.   background-color: #225;
  249.   padding: 0.3em 0.7em;
  250.   border-radius: 0.5em;
  251.   margin: 1em 0;
  252. }
  253. .${helpTextCls} {
  254.   cursor: text;
  255. }
  256.  
  257. .${helpTextCls} a {
  258.   text-decoration: underline;
  259. }
  260. .${helpTextCls} a:hover {
  261.   color: white;
  262. }
  263.  
  264. .${helpTextCls} code {
  265.   font-size: 80%;
  266.   background-color: rgba(255, 255, 255, 0.1);
  267.   border-radius: 0.3em;
  268.   padding: 0.1em;
  269. }
  270. .${helpTextCls} pre > code {
  271.   background: none;
  272. }
  273. .${helpTextCls} pre {
  274.   font-size: 80%;
  275.   overflow: auto;
  276.   background-color: rgba(255, 255, 255, 0.1);
  277.   border-radius: 0.3em;
  278.   padding: 0.1em 1em;
  279. }
  280. .${helpTextCls} li {
  281.   list-style: circle;
  282.   margin-left: 1em;
  283. }
  284. .${helpTextCls} hr {
  285.   margin: 1em 0 0.5em 0;
  286.   border-color: rgba(255, 255, 255, 0.1);
  287. }
  288.  
  289. .${helpTextCls} table {
  290.   border: 1px solid rgba(255, 255, 255, 0.1);
  291.   border-radius: 0.5em;
  292.   display: inline-block;
  293. }
  294. .${helpTextCls} table td, .${helpTextCls} table th {
  295.   padding: 0.1em 0.5em;
  296. }
  297.  
  298. .btn-helper {
  299. margin-left: 20px
  300. }
  301.  
  302. .modal {
  303.   display: none;
  304.   position: fixed;
  305.   z-index: 1000;
  306.   left: 0;
  307.   top: 0;
  308.   width: 100%;
  309.   height: 100%;
  310.   overflow: auto;
  311.   background-color: rgba(0, 0, 0, 0.8)
  312. }
  313.  
  314. .modal-content {
  315.   display: flex;
  316.   margin: 1em auto;
  317.   width: calc(100vw - 2em);
  318.   padding: 20px;
  319.   border: 1px solid #333;
  320.   background-color: #202025;
  321.   border-radius: 6px;
  322.   color: rgb(206, 206, 210);
  323.   flex-direction: column;
  324.   position: relative;
  325.   overflow-y: auto;
  326.   cursor: default;
  327.   font-family: 'Fira Sans', sans-serif;
  328. }
  329.  
  330. .${modalTabGroupTabsCls} {
  331.   display: flex;
  332.   flex-direction: row;
  333. }
  334.  
  335. .modal-content .${modalTabGroupTabsCls} > button {
  336.   border-radius: 0.5em 0.5em 0 0;
  337.   border-bottom: 0;
  338.   padding: 0.2em 0.5em 0 0.5em;
  339.   background-color: #1e293b;
  340.   color: rgba(255, 255, 255, 0.5);
  341.   outline-bottom: none;
  342. }
  343.  
  344. .modal-content .${modalTabGroupTabsCls} > button.${modalTabGroupActiveCls} {
  345.   /* background-color: #3b82f6; */
  346.   color: white;
  347.   text-shadow: 0 0 1px currentColor;
  348.   padding: 0.3em 0.5em 0.2em 0.5em;
  349. }
  350.  
  351. .modal-content .${modalTabGroupContentCls} {
  352.   display: flex;
  353.   flex-direction: column;
  354.   gap: 1em;
  355.   padding-top: 1em;
  356. }
  357.  
  358. .${modalSettingsTitleCls} {
  359.   background: linear-gradient(to bottom, white, gray);
  360.   -webkit-background-clip: text;
  361.   background-clip: text;
  362.   -webkit-text-fill-color: transparent;
  363.   font-weight: bold;
  364.   font-size: 3em;
  365.   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  366.   user-select: none;
  367.   margin-top: -0.33em;
  368.   margin-bottom: -0.33em;
  369. }
  370.  
  371. .modal-content .hover\\:scale-110:hover {
  372.   transform: scale(1.1);
  373. }
  374.  
  375. .modal-content label {
  376.   padding-right: 10px;
  377. }
  378.  
  379. .modal-content hr {
  380.   height: 1px;
  381.   margin: 1em 0;
  382.   border-color: rgba(255, 255, 255, 0.1);
  383. }
  384.  
  385. .modal-content hr.${modalTabGroupSeparatorCls} {
  386.   margin: 0 -1em 0 -1em;
  387. }
  388.  
  389. .modal-content input[type="checkbox"] {
  390.   appearance: none;
  391.   width: 1.2em;
  392.   height: 1.2em;
  393.   border: 2px solid #ffffff80;
  394.   border-radius: 0.25em;
  395.   background-color: transparent;
  396.   transition: all 0.2s ease;
  397.   cursor: pointer;
  398.   position: relative;
  399. }
  400.  
  401. .modal-content input[type="checkbox"]:checked {
  402.   background-color: #3b82f6;
  403.   border-color: #3b82f6;
  404. }
  405.  
  406. .modal-content input[type="checkbox"]:checked::after {
  407.   content: '';
  408.   position: absolute;
  409.   left: 50%;
  410.   top: 50%;
  411.   width: 0.4em;
  412.   height: 0.7em;
  413.   border: solid white;
  414.   border-width: 0 2px 2px 0;
  415.   transform: translate(-50%, -60%) rotate(45deg);
  416. }
  417.  
  418. .modal-content input[type="checkbox"]:hover {
  419.   border-color: #ffffff;
  420. }
  421.  
  422. .modal-content input[type="checkbox"]:focus {
  423.   outline: 2px solid #3b82f680;
  424.   outline-offset: 2px;
  425. }
  426.  
  427. .modal-content .checkbox_label {
  428.   color: white;
  429.   line-height: 1.5;
  430. }
  431.  
  432. .modal-content .checkbox_wrapper {
  433.   display: flex;
  434.   align-items: center;
  435.   gap: 0.5em;
  436. }
  437.  
  438. .modal-content .number_label {
  439.   margin-left: 0.5em;
  440. }
  441.  
  442. .modal-content .color_wrapper {
  443.   display: flex;
  444.   align-items: center;
  445. }
  446.  
  447. .modal-content .color_label {
  448.   margin-left: 0.5em;
  449. }
  450.  
  451. .modal-content input, .modal-content button {
  452.   background-color: #1e293b;
  453.   border: 2px solid #ffffff80;
  454.   border-radius: 0.5em;
  455.   color: white;
  456.   padding: 0.5em;
  457.   transition: border-color 0.3s ease, outline 0.3s ease;
  458. }
  459.  
  460. .modal-content input:hover, .modal-content button:hover {
  461.   border-color: #ffffff;
  462. }
  463.  
  464. .modal-content input:focus, .modal-content button:focus {
  465.   outline: 2px solid #3b82f680;
  466.   outline-offset: 2px;
  467. }
  468.  
  469. .modal-content input[type="number"] {
  470.   padding: 0.5em;
  471.   transition: border-color 0.3s ease, outline 0.3s ease;
  472. }
  473.  
  474. .modal-content input[type="color"] {
  475.   padding: 0;
  476.   height: 2em;
  477. }
  478.  
  479. .modal-content input[type="color"]:hover {
  480.   border-color: #ffffff;
  481. }
  482.  
  483. .modal-content input[type="color"]:focus {
  484.   outline: 2px solid #3b82f680;
  485.   outline-offset: 2px;
  486. }
  487.  
  488. .modal-content h1 + hr {
  489.   margin-top: 0.5em;
  490. }
  491.  
  492.  
  493. .modal-content select {
  494.   appearance: none;
  495.   background-color: #1e293b; /* Dark blue background */
  496.   border: 2px solid #ffffff80;
  497.   border-radius: 0.5em;
  498.   padding: 0.3em 2em 0.3em 0.5em;
  499.   color: white;
  500.   font-size: 1em;
  501.   cursor: pointer;
  502.   transition: all 0.2s ease;
  503.   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");
  504.   background-repeat: no-repeat;
  505.   background-position: right 0.5em center;
  506.   background-size: 1.2em;
  507. }
  508.  
  509. .modal-content select option {
  510.   background-color: #1e293b; /* Match select background */
  511.   color: white;
  512.   padding: 0.5em;
  513. }
  514.  
  515. .modal-content select:hover {
  516.   border-color: #ffffff;
  517. }
  518.  
  519. .modal-content select:focus {
  520.   outline: 2px solid #3b82f680;
  521.   outline-offset: 2px;
  522. }
  523.  
  524. .modal-content .select_label {
  525.   color: white;
  526.   margin-left: 0.5em;
  527. }
  528.  
  529. .modal-content .select_wrapper {
  530.   display: flex;
  531.   align-items: center;
  532. }
  533.  
  534. .close {
  535.   color: rgb(206, 206, 210);
  536.   float: right;
  537.   font-size: 28px;
  538.   font-weight: bold;
  539.   position: absolute;
  540.   right: 20px;
  541.   top: 5px;
  542. }
  543.  
  544. .close:hover,
  545. .close:focus {
  546.   color: white;
  547.   text-decoration: none;
  548.   cursor: pointer;
  549. }
  550.  
  551. #copied-modal,#copied-modal-2 {
  552.   padding: 5px 5px;
  553.   background:gray;
  554.   position:absolute;
  555.   display: none;
  556.   color: white;
  557.   font-size: 15px;
  558. }
  559.  
  560. label > div.select-none {
  561.   user-select: text;
  562.   cursor: initial;
  563. }
  564.  
  565. .${tagsContainerCls} {
  566.   display: flex;
  567.   flex-direction: row;
  568.   margin: 5px 0;
  569. }
  570. .${tagsContainerCls}.${threadTagContainerCls} {
  571.   margin-left: 0.5em;
  572.   margin-right: 0.5em;
  573.   margin-bottom: 2px;
  574. }
  575.  
  576. .${tagContainerCompactCls} {
  577.   margin-top: -2em;
  578.   margin-bottom: 1px;
  579. }
  580. .${tagContainerCompactCls} .${tagFenceCls} {
  581.   margin: 0;
  582.   padding: 1px;
  583. }
  584. .${tagContainerCompactCls} .${tagCls} {
  585. }
  586. .${tagContainerCompactCls} .${tagAllFencesWrapperCls} {
  587.   gap: 1px;
  588. }
  589. .${tagContainerCompactCls} .${tagRestOfTagsWrapperCls} {
  590.   margin: 1px;
  591. }
  592. .${tagContainerCompactCls} .${tagRestOfTagsWrapperCls},
  593. .${tagContainerCompactCls} .${tagFenceContentCls},
  594. .${tagContainerCompactCls} .${tagDirectoryContentCls} {
  595.   gap: 1px;
  596. }
  597.  
  598. .${tagContainerWiderCls} {
  599.   margin-left: -6em;
  600.   margin-right: -6em;
  601.   margin-bottom: 2em;
  602. }
  603. .${tagContainerWiderCls} .${tagCls} {
  604. }
  605.  
  606. .${tagContainerWideCls} {
  607.   margin-left: -12em;
  608.   margin-right: -12em;
  609.   margin-bottom: 3em;
  610. }
  611.  
  612. .${tagContainerExtraWideCls} {
  613.   margin-left: -16em;
  614.   margin-right: -16em;
  615.   margin-bottom: 3em;
  616. }
  617.  
  618. .${tagCls} {
  619.   border: 1px solid #3b3b3b;
  620.   background-color: #282828;
  621.   /*color: rgba(255, 255, 255, 0.482);*/ /* equivalent of #909090; when on #282828 background */
  622.   padding: 0px 8px 0 8px;
  623.   border-radius: 4px;
  624.   cursor: pointer;
  625.   transition: background-color 0.2s, color 0.2s;
  626.   display: inline-block;
  627.   color: #E8E8E6;
  628.   user-select: none;
  629. }
  630. .${tagCls}.${tagDarkTextCls} {
  631.   color: #171719;
  632. }
  633. .${tagCls} span {
  634.   display: inline-block;
  635. }
  636.  
  637. .${tagCls}.${tagTweakNoBorderCls} {
  638.   border: none;
  639. }
  640.  
  641. .${tagCls}.${tagTweakSlimPaddingCls} {
  642.   padding: 0px 4px 0 4px;
  643. }
  644.  
  645. .${tagCls} .${tagIconCls} {
  646.   width: 16px;
  647.   height: 16px;
  648.   margin-right: 2px;
  649.   margin-left: -4px;
  650.   margin-top: -4px;
  651.   vertical-align: middle;
  652.   display: inline-block;
  653.   filter: invert(1);
  654. }
  655. .${tagCls}.${tagDarkTextCls} .${tagIconCls} {
  656.   filter: none;
  657. }
  658. .${tagCls}.${tagTweakSlimPaddingCls} .${tagIconCls} {
  659.   margin-left: -2px;
  660. }
  661. .${tagCls} span {
  662.   position: relative;
  663.   top: 1.5px;
  664. }
  665. .${tagCls}.${tagTweakTextShadowCls} span {
  666.   text-shadow: 1px 0 0.5px black, -1px 0 0.5px black, 0 1px 0.5px black, 0 -1px 0.5px black;
  667. }
  668. .${tagCls}.${tagTweakTextShadowCls}.${tagDarkTextCls} span {
  669.   text-shadow: 1px 0 0.5px white, -1px 0 0.5px white, 0 1px 0.5px white, 0 -1px 0.5px white;
  670. }
  671. .${tagCls}:hover {
  672.   background-color: #333;
  673.   color: #fff;
  674.   transform: scale(1.02);
  675. }
  676. .${tagCls}.${tagDarkTextCls}:hover {
  677.   /* color: #171717; */
  678.   color: #2f2f2f;
  679. }
  680. .${tagCls}:active {
  681.   transform: scale(0.98);
  682. }
  683.  
  684. .${tagPaletteCls} {
  685.   display: flex;
  686.   flex-wrap: wrap;
  687.   gap: 1px;
  688. }
  689. .${tagPaletteCls} .${tagPaletteItemCls} {
  690.   text-shadow: 1px 0 1px black, -1px 0 1px black, 0 1px 1px black, 0 -1px 1px black;
  691.   width: 40px;
  692.   height: 25px;
  693.   display: inline-block;
  694.   text-align: center;
  695.   padding: 0 2px;
  696.   transition: color 0.2s, border 0.1s;
  697.   border: 2px solid transparent;
  698. }
  699.  
  700. .${tagPaletteItemCls}:hover {
  701.   cursor: pointer;
  702.   color: white;
  703.   border: 2px solid white;
  704. }
  705.  
  706. .${tagsPreviewCls} {
  707.   background-color: #191a1a;
  708.   padding: 0.5em 1em;
  709.   border-radius: 1em;
  710. }
  711.  
  712. .${tagAllFencesWrapperCls} {
  713.   display: flex;
  714.   flex-direction: row;
  715.   gap: 5px;
  716. }
  717.  
  718. .${tagRestOfTagsWrapperCls} {
  719.   display: flex;
  720.   flex-direction: row;
  721.   flex-wrap: wrap;
  722.   align-content: flex-start;
  723.   gap: 5px;
  724.   margin: 8px;
  725. }
  726.  
  727. .${tagFenceCls} {
  728.   display: flex;
  729.   margin: 5px 0;
  730.   padding: 5px;
  731.   border-radius: 4px;
  732. }
  733.  
  734. .${tagFenceContentCls} {
  735.   display: flex;
  736.   flex-direction: column;
  737.   flex-wrap: wrap;
  738.   gap: 5px;
  739. }
  740.  
  741. .${tagDirectoryCls} {
  742.   position: relative;
  743.   display: flex;
  744.   z-index: 100;
  745. }
  746. .${tagDirectoryCls}:hover .${tagDirectoryContentCls} {
  747.   display: flex;
  748. }
  749. .${tagDirectoryContentCls} {
  750.   position: absolute;
  751.   display: none;
  752.   flex-direction: column;
  753.   gap: 5px;
  754.   top: 0px;
  755.   padding-bottom: 1px;
  756.   left: -5px;
  757.   transform: translateY(-100%);
  758.   background: rgba(0, 0, 0, 0.5);
  759.   padding: 5px;
  760.   border-radius: 4px;
  761.   flex-wrap: nowrap;
  762.   width: max-content;
  763. }
  764. .${tagDirectoryContentCls} .${tagCls} {
  765.   white-space: nowrap;
  766.   width: fit-content;
  767. }
  768.  
  769. .${queryBoxCls} {
  770.   flex-wrap: wrap;
  771. }
  772.  
  773. .${controlsAreaCls} {
  774.   grid-template-columns: repeat(4,minmax(0,1fr))
  775. }
  776.  
  777. .${textAreaCls} {
  778.   grid-column-end: 5;
  779. }
  780.  
  781. .${standardButtonCls} {
  782.   grid-column-start: 4;
  783. }
  784.  
  785. .${roundedMD} {
  786.   border-radius: 0.375rem!important;
  787. }
  788.  
  789. #${leftSettingsButtonId} svg {
  790.   transition: fill 0.2s;
  791. }
  792. #${leftSettingsButtonId}:hover svg {
  793.   fill: #fff !important;
  794. }
  795.  
  796. .w-collapsedSideBarWidth #${leftSettingsButtonId} span {
  797.   display: none;
  798. }
  799.  
  800. .w-collapsedSideBarWidth #${leftSettingsButtonId} {
  801.   width: 100%;
  802.   border-radius: 0.25rem;
  803.   height: 40px;
  804. }
  805.  
  806. #${leftSettingsButtonWrapperId} {
  807.   display: flex;
  808.   padding: 0.1em 0.2em;
  809.   justify-content: flex-start;
  810. }
  811.  
  812. .w-collapsedSideBarWidth #${leftSettingsButtonWrapperId} {
  813.   justify-content: center;
  814. }
  815.  
  816. .${lucideIconParentCls} > img {
  817.   transition: opacity 0.2s ease;
  818. }
  819.  
  820. .${lucideIconParentCls}:hover > img, a.dark\\:text-textMainDark .${lucideIconParentCls} > img {
  821.   opacity: 1;
  822. }
  823.  
  824. .${leftPanelSlimCls}.w-collapsedSideBarWidth,
  825. .${leftPanelSlimCls} .w-collapsedSideBarWidth {
  826.   width: 50px;
  827. }
  828.  
  829. /* active marker */
  830. .${leftPanelSlimCls} .w-collapsedSideBarWidth .absolute.rounded-l-sm.right-0 {
  831.     /* transform: translateX(-3px) !important; */
  832.     right: 3px;
  833. }
  834.  
  835. .${modelLabelCls} {
  836.   color: #888;
  837.   /* padding is from style attr */
  838.   transition: color 0.2s, background-color 0.2s, border 0.2s;
  839. }
  840. button:hover > .${modelLabelCls} {
  841.   color: #fff;
  842. }
  843. button:has(> .${modelLabelCls}) {
  844.   padding-right: 0.75em;
  845. }
  846.  
  847. button:has(> .${modelLabelCls}.${modelLabelStyleButtonSubtleCls}) {
  848.   border: 1px solid #333;
  849. }
  850. button:hover:has(> .${modelLabelCls}.${modelLabelStyleButtonSubtleCls}) {
  851.   background: #333 !important;
  852. }
  853.  
  854. .${modelLabelCls}.${modelLabelStyleButtonWhiteCls} {
  855.   color: #8D9191 !important;
  856. }
  857. button:hover > .${modelLabelCls}.${modelLabelStyleButtonWhiteCls} {
  858.   color: #fff !important;
  859. }
  860. .${modelIconButtonCls} svg[stroke] {
  861.   stroke: #8D9191 !important;
  862. }
  863. .${modelIconButtonCls}:hover svg[stroke] {
  864.   stroke: #fff !important;
  865. }
  866. button:has(> .${modelLabelCls}.${modelLabelStyleButtonWhiteCls}) {
  867.   background: #191A1A !important;
  868.   color: #2D2F2F !important;
  869. }
  870. button:has(> .${modelLabelCls}.${modelLabelStyleButtonWhiteCls}):hover {
  871.   color: #8D9191 !important;
  872. }
  873.  
  874. .${modelLabelCls}.${modelLabelStyleButtonCyanCls} {
  875.   color: ${cyanPerplexityColor};
  876. }
  877. button:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) {
  878.   border: 1px solid ${cyanMediumPerplexityColor};
  879.   background: ${cyanDarkPerplexityColor} !important;
  880. }
  881. button:hover:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) {
  882.   border: 1px solid ${cyanPerplexityColor};
  883. }
  884. .${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) svg[stroke] {
  885.   stroke: ${cyanPerplexityColor} !important;
  886. }
  887. .${modelIconButtonCls}:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}):hover svg[stroke] {
  888.   stroke: #fff !important;
  889. }
  890.  
  891. button:has(> .${modelLabelCls}.${modelLabelOverwriteCyanIconToGrayCls}) {
  892.   color: #888 !important;
  893. }
  894. button:has(> .${modelLabelCls}.${modelLabelOverwriteCyanIconToGrayCls}):hover {
  895.   color: #fff !important;
  896. }
  897.  
  898. .${reasoningModelCls} {
  899.   width: 16px;
  900.   height: 16px;
  901.   margin-right: 4px;
  902.   margin-left: 8px;
  903.   margin-top: -2px;
  904.   filter: invert();
  905. }
  906. button:has(.${reasoningModelCls}) > div > div > svg {
  907.   width: 32px;
  908.   height: 16px;
  909.   margin-left: 8px;
  910.   margin-right: 12px;
  911.   margin-top: 0px;
  912.   min-width: 16px;
  913. }
  914. button:has(.${reasoningModelCls}) > div > div:has(svg) {
  915.   width: 16px;
  916.   height: 16px;
  917.   min-width: 30px;
  918. }
  919.  
  920.  
  921. .${iconColorCyanCls} {
  922.   filter: invert(54%) sepia(84%) saturate(431%) hue-rotate(139deg) brightness(97%) contrast(90%);
  923.   transition: filter 0.2s;
  924. }
  925.  
  926. button:hover:has(> .${modelLabelCls}.${modelLabelStyleButtonCyanCls}) .${iconColorCyanCls} {
  927.   filter: invert(100%);
  928. }
  929.  
  930. .${iconColorGrayCls} {
  931.   filter: invert(50%);
  932.   transition: filter 0.2s;
  933. }
  934. button:has(.${reasoningModelCls}):hover .${iconColorGrayCls} {
  935.   filter: invert(100%);
  936. }
  937.  
  938. .${iconColorWhiteCls} {
  939.   filter: invert(50%);
  940.   transition: filter 0.2s;
  941. }
  942. button:has(.${reasoningModelCls}):hover .${iconColorWhiteCls} {
  943.   filter: invert(100%);
  944. }
  945.  
  946. .${iconColorGoldCls} {
  947.   filter: brightness(0) saturate(100%) invert(88%) sepia(75%) saturate(2577%) hue-rotate(324deg) brightness(96%) contrast(99%);
  948.   transition: filter 0.2s;
  949. }
  950.  
  951. `;
  952.  
  953. const TAG_POSITION = {
  954.   BEFORE: 'before',
  955.   AFTER: 'after',
  956.   CARET: 'caret',
  957. };
  958.  
  959. const TAG_CONTAINER_TYPE = {
  960.   NEW: 'new',
  961.   NEW_IN_COLLECTION: 'new-in-collection',
  962.   THREAD: 'thread',
  963.   ALL: 'all',
  964. }
  965.  
  966. const tagsHelpText = `
  967. Each line is one tag.
  968. Non-field text is what will be inserted into prompt.
  969. Field is denoted by \`<\` and \`>\`, field name is before \`:\`, field value after \`:\`.
  970.  
  971. Supported fields:
  972. - \`label\`: tag label shown on tag "box" (new items around prompt input area)
  973. - \`position\`: where the tag text will be inserted, default is \`before\`; valid values are \`before\`/\`after\` (existing text) or \`caret\` (at cursor position)
  974. - \`color\`: tag color; CSS colors supported, you can use colors from a pre-generated palette via \`%\` syntax, e.g. \`<color:%5>\`. See palette bellow.
  975. - \`tooltip\`: shown on hover (aka title); (default) tooltip can be disabled when this field is set to empty string - \`<tooltip:>\`
  976. - \`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)
  977. - \`hide\`: hide the tag from the tag list
  978. - \`link\`: link to a URL, e.g. \`<link:https://example.com>\`, can be used for collections. only one link per tag is supported.
  979. - \`link-target\`: target of the link, e.g. \`<link-target:_blank>\` (opens in new tab), default is \`_self\` (same tab).
  980. - \`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.
  981. - \`set-mode\`: set the query mode: \`pro\` or \`deep-research\`, e.g. \`<set-mode:pro>\`
  982. - \`set-model\`: set the model, e.g. \`<set-model:claude-3-7-sonnet-thinking>\`
  983. - \`set-sources\`: set the sources, e.g. \`<set-sources:001>\` for disabled first source (web), disabled second source (academic), enabled third source (social)
  984. - \`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>\`
  985. - \`dir\`: unique identifier for a directory tag (it will not insert text into prompt)
  986. - \`in-dir\`: identifier of the parent directory this tag belongs to
  987. - \`fence\`: unique identifier for a fence definition (hidden by default)
  988. - \`in-fence\`: identifier of the fence this tag belongs to
  989. - \`fence-width\`: CSS width for a fence, e.g. \`<fence-width:10em>\`
  990. - \`fence-border-style\`: CSS border style for a fence (e.g., solid, dashed, dotted)
  991. - \`fence-border-color\`: CSS color or a palette \`%\` syntax for a fence border
  992. - \`fence-border-width\`: CSS width for a fence border
  993.  
  994. ---
  995.  
  996. | String | Replacement | Example |
  997. |---|---|---|
  998. | \`\\n\` | newline | |
  999. | \`$$time$$\` | current time | \`23:05\` |
  1000.  
  1001. ---
  1002.  
  1003. Examples:
  1004. \`\`\`
  1005. stable diffusion web ui - <label:SDWU>
  1006. , prefer concise modern syntax and style, <position:caret><label:concise modern>
  1007. tell me a joke<label:Joke><tooltip:>
  1008. tell me a joke<label:Joke & Submit><auto-submit>
  1009. \`\`\`
  1010.  
  1011. Directory example:
  1012. \`\`\`
  1013. <dir:games>Games<icon:gamepad-2>
  1014. <in-dir:games>FFXIV: <color:%15><label:FFXIV>
  1015. <in-dir:games>Vintage Story - <label:VS>
  1016. \`\`\`
  1017.  
  1018. Fence example:
  1019. \`\`\`
  1020. <fence:anime><fence-border-style:dashed><fence-border-color:%10>
  1021. <in-fence:anime>Shounen
  1022. <in-fence:anime>Seinen
  1023. <in-fence:anime>Shoujo
  1024. \`\`\`
  1025.  
  1026. Another fence example:
  1027. \`\`\`
  1028. <fence:programming><fence-border-style:solid><fence-border-color:%20>
  1029. <in-fence:programming>Haskell
  1030. <in-fence:programming>Raku<label:🦋>
  1031. \`\`\`
  1032. `.trim();
  1033.  
  1034. const defaultTagColor = '#282828';
  1035.  
  1036. const changeValueUsingEvent = (selector, value) => {
  1037.   debugLog('changeValueUsingEvent', value, selector);
  1038.  
  1039.   const nativeTextareaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
  1040.   nativeTextareaValueSetter.call(selector, value);
  1041.   const inputEvent = new Event('input', {bubbles: true});
  1042.   selector.dispatchEvent(inputEvent);
  1043. }
  1044.  
  1045. const TAGS_PALETTE_COLORS_NUM = 16;
  1046. const TAGS_PALETTE_CLASSIC = Object.freeze((() => {
  1047.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1048.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1049.   return _.flow(
  1050.     _.map(x => startH + x * step, _),
  1051.     _.map(h => color2k.hsla(h, startS, startL, startA), _),
  1052.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1053.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1054. })());
  1055.  
  1056. const TAGS_PALETTE_PASTEL = Object.freeze((() => {
  1057.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1058.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1059.   return _.flow(
  1060.     _.map(x => startH + x * step, _),
  1061.     _.map(h => color2k.hsla(h, startS - 0.2, startL + 0.2, startA), _),
  1062.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1063.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1064. })());
  1065.  
  1066. const TAGS_PALETTE_GRIM = Object.freeze((() => {
  1067.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1068.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1069.   return _.flow(
  1070.     _.map(x => startH + x * step, _),
  1071.     _.map(h => color2k.hsla(h, startS - 0.6, startL - 0.3, startA), _),
  1072.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1073.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1074. })());
  1075.  
  1076. const TAGS_PALETTE_DARK = Object.freeze((() => {
  1077.   const step = 360 / TAGS_PALETTE_COLORS_NUM;
  1078.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1079.   return _.flow(
  1080.     _.map(x => startH + x * step, _),
  1081.     _.map(h => color2k.hsla(h, startS, startL - 0.4, startA), _),
  1082.     _.sortBy(x => color2k.parseToHsla(x)[0], _)
  1083.   )(_.range(0, TAGS_PALETTE_COLORS_NUM));
  1084. })());
  1085.  
  1086. const TAGS_PALETTE_GRAY = Object.freeze((() => {
  1087.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1088.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(0, 0, step * x, 1));
  1089. })());
  1090.  
  1091. const TAGS_PALETTE_CYAN = Object.freeze((() => {
  1092.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1093.   const [startH, startS, startL, startA] = color2k.parseToHsla(cyanPerplexityColor);
  1094.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(startH, startS, step * x, 1));
  1095. })());
  1096.  
  1097. const TAGS_PALETTE_TRANSPARENT = Object.freeze((() => {
  1098.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1099.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(0, 0, 0, step * x));
  1100. })());
  1101.  
  1102. const TAGS_PALETTE_HACKER = Object.freeze((() => {
  1103.   const step = 1 / TAGS_PALETTE_COLORS_NUM;
  1104.   return _.range(0, TAGS_PALETTE_COLORS_NUM).map(x => color2k.hsla(120, step * x, step * x * 0.5, 1));
  1105. })());
  1106.  
  1107. const TAGS_PALETTES = Object.freeze({
  1108.   CLASSIC: TAGS_PALETTE_CLASSIC,
  1109.   PASTEL: TAGS_PALETTE_PASTEL,
  1110.   GRIM: TAGS_PALETTE_GRIM,
  1111.   DARK: TAGS_PALETTE_DARK,
  1112.   GRAY: TAGS_PALETTE_GRAY,
  1113.   CYAN: TAGS_PALETTE_CYAN,
  1114.   TRANSPARENT: TAGS_PALETTE_TRANSPARENT,
  1115.   HACKER: TAGS_PALETTE_HACKER,
  1116.   CUSTOM: 'CUSTOM',
  1117. });
  1118.  
  1119. const convertColorInPaletteFormat =  currentPalette => value => currentPalette[parseInt(dropStr(1)(value), 10)] ?? defaultTagColor;
  1120.  
  1121. const TAG_HOME_PAGE_LAYOUT = {
  1122.   DEFAULT: 'default',
  1123.   COMPACT: 'compact',
  1124.   WIDER: 'wider',
  1125.   WIDE: 'wide',
  1126.   EXTRA_WIDE: 'extra-wide',
  1127. }
  1128.  
  1129. const parseBinaryState = binaryStr => {
  1130.   if (!/^[01-]+$/.test(binaryStr)) {
  1131.     throw new Error('Invalid binary state: ' + binaryStr);
  1132.   }
  1133.   return binaryStr.split('').map(bit => bit === '1' ? true : bit === '0' ? false : null);
  1134. };
  1135.  
  1136. const processTagField = currentPalette => name => value => {
  1137.   if (name === 'color' && value.startsWith('%')) return convertColorInPaletteFormat(currentPalette)(value);
  1138.   if (name === 'hide') return true;
  1139.   if (name === 'auto-submit') return true;
  1140.   if (name === 'set-sources') return parseBinaryState(value);
  1141.   return value;
  1142. };
  1143.  
  1144. 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)(?::([^<>]*))?>/g;
  1145. const parseOneTagLine = currentPalette => line =>
  1146.   Array.from(line.matchAll(tagLineRegex)).reduce(
  1147.     (acc, match) => {
  1148.       const [fullMatch, field, value] = match;
  1149.       const processedValue = processTagField(currentPalette)(field)(value);
  1150.       return {
  1151.         ...acc,
  1152.         [_.camelCase(field)]: processedValue,
  1153.         text: acc.text.replace(fullMatch, '').replace(/\\n/g, '\n'),
  1154.       };
  1155.     },
  1156.     {
  1157.       text: line, 
  1158.       color: defaultTagColor, 
  1159.       target: TAG_CONTAINER_TYPE.NEW, 
  1160.       hide: false, 
  1161.       'link-target': '_self',
  1162.     }
  1163.   );
  1164.  
  1165. const parseTagsText = text => {
  1166.   const lines = text.split('\n').filter(tag => tag.trim().length > 0);
  1167.   const palette = getPalette(loadConfig()?.tagPalette);
  1168.   return lines.map(parseOneTagLine(palette)).map((x, i) => ({...x, originalIndex: i}));
  1169. };
  1170.  
  1171. const getTagsContainer = () => $c(tagsContainerCls);
  1172.  
  1173. const posFromTag = tag => Object.values(TAG_POSITION).includes(tag.position) ? tag.position : TAG_POSITION.BEFORE;
  1174.  
  1175. const applyTagToString = (tag, val, caretPos) => {
  1176.   const {text} = tag;
  1177.   const timeString = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
  1178.   const processedText = text.replace(/\$\$time\$\$/g, timeString);
  1179.   switch (posFromTag(tag)) {
  1180.     case TAG_POSITION.BEFORE:
  1181.       return `${processedText}${val}`;
  1182.     case TAG_POSITION.AFTER:
  1183.       return `${val}${processedText}`;
  1184.     case TAG_POSITION.CARET:
  1185.       return `${takeStr(caretPos)(val)}${processedText}${dropStr(caretPos)(val)}`;
  1186.     default:
  1187.       throw new Error(`Invalid position: ${tag.position}`);
  1188.   }
  1189. };
  1190.  
  1191. const getPromptAreaFromTagsContainer = tagsContainerEl => PP.getAnyPromptArea(tagsContainerEl.parent());
  1192.  
  1193. const getPalette = paletteName => {
  1194.   // Add this check for 'CUSTOM'
  1195.   if (paletteName === TAGS_PALETTES.CUSTOM) {
  1196.     // Use tagPaletteCustom from config or default if not found
  1197.     return loadConfigOrDefault()?.tagPaletteCustom ?? defaultConfig.tagPaletteCustom;
  1198.   }
  1199.   // Fallback to predefined palettes or CLASSIC as default
  1200.   const palette = TAGS_PALETTES[paletteName];
  1201.   // Check if palette is an array before returning, otherwise return default
  1202.   return Array.isArray(palette) ? palette : TAGS_PALETTES.CLASSIC;
  1203. }
  1204.  
  1205. const createTag = containerEl => isPreview => tag => {
  1206.   if (tag.hide) return null;
  1207.  
  1208.   const labelString = tag.label ?? tag.text;
  1209.   const isTagLight = color2k.getLuminance(tag.color) > loadConfig().tagLuminanceThreshold;
  1210.   const colorMod = isTagLight ? color2k.darken : color2k.lighten;
  1211.   const hoverBgColor = color2k.toRgba(colorMod(tag.color, 0.1));
  1212.   const borderColor = color2k.toRgba(colorMod(tag.color, loadConfig().tagTweakRichBorderColor ? 0.2 : 0.1));
  1213.  
  1214.   const clickHandler = evt => {
  1215.     debugLog('clicked', tag, evt);
  1216.     if (tag.link) return;
  1217.     if (tag.setMode) {
  1218.       switch (tag.setMode) {
  1219.         case 'pro':
  1220.           PP.getModeProButton().click();
  1221.           break;
  1222.         case 'deep-research':
  1223.         case 'dr':
  1224.           PP.getModeDeepResearchButton().click();
  1225.           break;
  1226.         default:
  1227.           throw new Error(`Invalid set-mode: ${tag.setMode}`);
  1228.       }
  1229.     }
  1230.     if (tag.setModel) {
  1231.       setTimeout(() => { // delay for model button to be available after setting mode
  1232.         const modelDescriptor = PP.getModelDescriptorFromId(tag.setModel);
  1233.         debugLog('[createTag] clickHandler: set model=', tag.setModel, ' modelDescriptor=', modelDescriptor);
  1234.         PP.doSelectModel(modelDescriptor.index);
  1235.       }, 50);
  1236.     }
  1237.     if (tag.setSources) {
  1238.       setTimeout(() => {
  1239.         PP.getAnySourcesButton().click();
  1240.         setTimeout(() => {
  1241.           PP.setSourcesSelectionListValues()(tag.setSources, {
  1242.             callback: () => {
  1243.               debugLogTags('[createTag] clickHandler: setSources callback');
  1244.               setTimeout(() => {
  1245.                 PP.getAnySourcesButton().click();
  1246.               }, 5);
  1247.             },
  1248.           });
  1249.           debugLogTags('[createTag] clickHandler: setSources=', tag.setSources);
  1250.         }, 10);
  1251.       }, 80);
  1252.     }
  1253.     if (tag.autoSubmit) {
  1254.       setTimeout(() => {
  1255.         const submitButton = PP.submitButtonAny();
  1256.         debugLogTags('[createTag] clickHandler: submitButton=', submitButton);
  1257.         if (submitButton.length) {
  1258.           if (submitButton.length > 1) {
  1259.             debugLogTags('[createTag] clickHandler: multiple submit buttons found, using first one');
  1260.           }
  1261.           submitButton.first().click();
  1262.         } else {
  1263.           debugLogTags('[createTag] clickHandler: no submit button found');
  1264.         }
  1265.       }, 300);
  1266.     }
  1267.     const el = jq(evt.currentTarget);
  1268.     const tagsContainer = el.closest(`.${tagsContainerCls}`);
  1269.     if (!tagsContainer.length) {
  1270.       debugLogTags('[clickHandler] no tags container found');
  1271.       return;
  1272.     }
  1273.     const promptArea = getPromptAreaFromTagsContainer(tagsContainer);
  1274.     if (!promptArea.length) {
  1275.       debugLogTags('[clickHandler] no prompt area found', promptArea);
  1276.       return;
  1277.     }
  1278.     const promptAreaRaw = promptArea[0];
  1279.     const newText = applyTagToString(tag, promptArea.val(), promptAreaRaw.selectionStart);
  1280.     changeValueUsingEvent(promptAreaRaw, newText);
  1281.     promptAreaRaw.focus();
  1282.   };
  1283.  
  1284.   const tagFont = loadConfig().tagFont;
  1285.  
  1286.   const defaultTooltip = tag.link? `${logPrefix} Open link: ${tag.link}` : `${logPrefix} Insert \`${tag.text}\` at position \`${posFromTag(tag)}\``;
  1287.   const tagEl = jq(`<div/>`)
  1288.     .addClass(tagCls)
  1289.     .prop('title', tag.tooltip ?? defaultTooltip)
  1290.     .attr('data-tag', JSON.stringify(tag))
  1291.     .css({
  1292.       backgroundColor: tag.color,
  1293.       borderColor,
  1294.       fontFamily: tagFont,
  1295.       borderRadius: `${loadConfig().tagRoundness}px`,
  1296.     })
  1297.     .attr('data-color', color2k.toHex(tag.color))
  1298.     .attr('data-hoverBgColor', color2k.toHex(hoverBgColor))
  1299.     .attr('data-font', tagFont)
  1300.     .on('mouseenter', event => {
  1301.       jq(event.currentTarget).css('background-color', hoverBgColor);
  1302.     })
  1303.     .on('mouseleave', event => {
  1304.       jq(event.currentTarget).css('background-color', tag.color);
  1305.     });
  1306.  
  1307.   if (isTagLight) {
  1308.     tagEl.addClass(tagDarkTextCls);
  1309.   }
  1310.  
  1311.   if (loadConfig()?.tagTweakNoBorder) {
  1312.     tagEl.addClass(tagTweakNoBorderCls);
  1313.   }
  1314.   if (loadConfig()?.tagTweakSlimPadding) {
  1315.     tagEl.addClass(tagTweakSlimPaddingCls);
  1316.   }
  1317.   if (loadConfig()?.tagTweakTextShadow) {
  1318.     tagEl.addClass(tagTweakTextShadowCls);
  1319.   }
  1320.  
  1321.   const textEl = jq('<span/>')
  1322.     .text(labelString)
  1323.     .css({  
  1324.       'font-weight': loadConfig().tagBold ? 'bold' : 'normal',
  1325.       'font-style': loadConfig().tagItalic ? 'italic' : 'normal', 
  1326.       'font-size': `${loadConfig().tagFontSize}px`,
  1327.       'transform': `translateY(${loadConfig().tagTextYOffset}px)`,
  1328.     });
  1329.  
  1330.   if (tag.icon) {
  1331.     const iconEl = jq('<img/>')
  1332.       .attr('src', getIconUrl(tag.icon)) 
  1333.       .addClass(tagIconCls)
  1334.       .css({
  1335.         'width': `${loadConfig().tagIconSize}px`,
  1336.         'height': `${loadConfig().tagIconSize}px`,
  1337.         'transform': `translateY(${loadConfig().tagIconYOffset}px)`,  
  1338.       });
  1339.     if (!labelString) {
  1340.       iconEl.css({
  1341.         marginLeft: '0',
  1342.         marginRight: '0',
  1343.       });
  1344.     }
  1345.     textEl.prepend(iconEl);
  1346.   }
  1347.  
  1348.   tagEl.append(textEl);
  1349.  
  1350.   if (tag.link) {
  1351.     const linkEl = jq('<a/>')
  1352.       .attr('href', tag.link)
  1353.       .attr('target', tag.linkTarget)
  1354.       .css({
  1355.         textDecoration: 'none',
  1356.         color: 'inherit'
  1357.       });
  1358.     textEl.wrap(linkEl);
  1359.   }
  1360.  
  1361.   if (!isPreview && !tag.link && !tag.dir) {
  1362.     tagEl.click(clickHandler);
  1363.   }
  1364.   containerEl.append(tagEl);
  1365.  
  1366.   return tagEl;
  1367. };
  1368.  
  1369. const genDebugFakeTags = () =>
  1370.   _.times(TAGS_PALETTE_COLORS_NUM, x => `Fake ${x} ${_.times(x / 3).map(() => 'x').join('')}<color:%${x % TAGS_PALETTE_COLORS_NUM}>`)
  1371.     .join('\n');
  1372.  
  1373. const getTagContainerType = containerEl => {
  1374.   if (containerEl.hasClass(threadTagContainerCls) || containerEl.hasClass(tagsPreviewThreadCls)) return TAG_CONTAINER_TYPE.THREAD;
  1375.   if (containerEl.hasClass(newTagContainerCls) || containerEl.hasClass(tagsPreviewNewCls)) return TAG_CONTAINER_TYPE.NEW;
  1376.   if (containerEl.hasClass(newTagContainerInCollectionCls) || containerEl.hasClass(tagsPreviewNewInCollectionCls)) return TAG_CONTAINER_TYPE.NEW_IN_COLLECTION;
  1377.   return null;
  1378. }
  1379.  
  1380. const getPromptWrapperTagContainerType = promptWrapper => {
  1381.   if (PP.getPromptAreaOfNewThread(promptWrapper).length) return TAG_CONTAINER_TYPE.NEW;
  1382.   if (PP.getPromptAreaOnThread(promptWrapper).length) return TAG_CONTAINER_TYPE.THREAD;
  1383.   if (PP.getPromptAreaOnCollection(promptWrapper).length) return TAG_CONTAINER_TYPE.NEW_IN_COLLECTION;
  1384.   return null;
  1385. };
  1386.  
  1387. const isTagRelevantForContainer = containerType => tag =>
  1388.   containerType === tag.target
  1389. || (containerType === TAG_CONTAINER_TYPE.NEW_IN_COLLECTION && tag.target === TAG_CONTAINER_TYPE.NEW)
  1390. || tag.target === TAG_CONTAINER_TYPE.ALL
  1391.  
  1392. const tagContainerTypeToTagContainerClass = {
  1393.   [TAG_CONTAINER_TYPE.THREAD]: threadTagContainerCls,
  1394.   [TAG_CONTAINER_TYPE.NEW]: newTagContainerCls,
  1395.   [TAG_CONTAINER_TYPE.NEW_IN_COLLECTION]: newTagContainerInCollectionCls,
  1396. };
  1397.  
  1398. const currentUrlIsSettingsPage = () => window.location.pathname.includes('/settings/');
  1399.  
  1400. const refreshTags = ({force = false} = {}) => {
  1401.   const promptWrapper = PP.getPromptAreaWrapperOfNewThread()
  1402.     .add(PP.getPromptAreaWrapperOnThread())
  1403.     .add(PP.getPromptAreaWrapperOnCollection())
  1404.     .filter((_, rEl) => {
  1405.       const isPreview = Boolean(jq(rEl).attr('data-preview'));
  1406.       return isPreview || !currentUrlIsSettingsPage();
  1407.   });
  1408.   if (!promptWrapper.length) {
  1409.     debugLogTags('no prompt area found');
  1410.   }
  1411.   // debugLogTags('promptWrappers', promptWrapper);
  1412.   const allTags = _.flow(
  1413.     x => x + (unsafeWindow.phFakeTags ? `${nl}${genDebugFakeTags()}${nl}` : ''),
  1414.     parseTagsText,
  1415.   )(loadConfig()?.tagsText ?? defaultConfig.tagsText);
  1416.   debugLogTags('refreshing allTags', allTags);
  1417.  
  1418.   const createContainer = (promptWrapper) => {
  1419.     const el = jq(`<div/>`).addClass(tagsContainerCls);
  1420.     const tagContainerType = getPromptWrapperTagContainerType(promptWrapper);
  1421.     if (tagContainerType) {
  1422.       const clsToAdd = tagContainerTypeToTagContainerClass[tagContainerType];
  1423.       if (!clsToAdd) {
  1424.         console.error('Unexpected tagContainerType:', tagContainerType, {promptWrapper});
  1425.       }
  1426.       el.addClass(clsToAdd);
  1427.     }
  1428.     return el;
  1429.   }
  1430.   promptWrapper.each((_, rEl) => {
  1431.     const el = jq(rEl);
  1432.     if (el.parent().find(`.${tagsContainerCls}`).length) {
  1433.       el.parent().addClass(queryBoxCls);
  1434.       return;
  1435.     }
  1436.     el.before(createContainer(el));
  1437.   });
  1438.  
  1439.   const currentPalette = getPalette(loadConfig().tagPalette);
  1440.  
  1441.   const createFence = (fence) => {
  1442.     const fenceEl = jq('<div/>')
  1443.       .addClass(tagFenceCls)
  1444.       .css({
  1445.         'border-style': fence.fenceBorderStyle ?? 'solid',
  1446.         'border-color': fence.fenceBorderColor?.startsWith('%') 
  1447.             ? convertColorInPaletteFormat(currentPalette)(fence.fenceBorderColor) 
  1448.             : fence.fenceBorderColor ?? defaultTagColor,
  1449.         'border-width': fence.fenceBorderWidth ?? '1px',
  1450.       })
  1451.       .attr('data-tag', JSON.stringify(fence))
  1452.     ;
  1453.     const fenceContentEl = jq('<div/>')
  1454.       .addClass(tagFenceContentCls)
  1455.       .css({
  1456.         'width': fence.fenceWidth ?? '',
  1457.       })
  1458.     ;
  1459.     fenceEl.append(fenceContentEl);
  1460.     return { fenceEl, fenceContentEl };
  1461.   };
  1462.  
  1463.   const createDirectory = () => {
  1464.     const directoryEl = jq('<div/>').addClass(tagDirectoryCls);
  1465.     const directoryContentEl = jq('<div/>').addClass(tagDirectoryContentCls);
  1466.     directoryEl.append(directoryContentEl);
  1467.     return { directoryEl, directoryContentEl };
  1468.   };
  1469.  
  1470.   const containerEls = getTagsContainer();
  1471.   containerEls.each((_i, rEl) => {
  1472.     const containerEl = jq(rEl);
  1473.     const isPreview = Boolean(containerEl.attr('data-preview'));
  1474.  
  1475.     const tagContainerTypeFromPromptWrapper = getPromptWrapperTagContainerType(containerEl.nthParent(2));
  1476.     const prelimTagContainerType = getTagContainerType(containerEl);
  1477.     if (tagContainerTypeFromPromptWrapper !== prelimTagContainerType && !isPreview) {
  1478.       debugLog('tagContainerTypeFromPromptWrapper !== prelimTagContainerType', {tagContainerTypeFromPromptWrapper, prelimTagContainerType, containerEl, isPreview});
  1479.       containerEl
  1480.         .empty()
  1481.         .removeClass(threadTagContainerCls, newTagContainerCls, newTagContainerInCollectionCls)
  1482.         .addClass(tagContainerTypeToTagContainerClass[tagContainerTypeFromPromptWrapper])
  1483.       ;
  1484.     } else {
  1485.       if (!isPreview) {
  1486.         debugLogTags('tagContainerTypeFromPromptWrapper === prelimTagContainerType', {tagContainerTypeFromPromptWrapper, prelimTagContainerType, containerEl, isPreview});
  1487.       }
  1488.     }
  1489.  
  1490.     // TODO: use something else than lodash/fp. in following functions it behaved randomly very weirdly 
  1491.     // e.g. partial application of map resulting in an empty array or sortBy sorting field name instead 
  1492.     // of input array. possibly inconsistent normal FP order of arguments
  1493.     const mapParseAttrTag = xs => xs.map(el => JSON.parse(el.dataset.tag));
  1494.     const sortByOriginalIndex = xs => [...xs].sort((a, b) => a.originalIndex - b.originalIndex);
  1495.     const tagElsInCurrentContainer = containerEl.find(`.${tagCls}, .${tagFenceCls}`).toArray();
  1496.     const filterOutHidden = filter(x => !x.hide);
  1497.     const currentTags = _.flow(
  1498.       mapParseAttrTag,
  1499.       sortByOriginalIndex,
  1500.       filterOutHidden,
  1501.       _.uniq,
  1502.     )(tagElsInCurrentContainer);
  1503.     const tagContainerType = getTagContainerType(containerEl);
  1504.     const tagsForThisContainer = _.flow(
  1505.       filter(isTagRelevantForContainer(tagContainerType)),
  1506.       filterOutHidden,
  1507.       sortByOriginalIndex,
  1508.     )(allTags);
  1509.     debugLogTags('tagContainerType =', tagContainerType, ', current tags =', currentTags, ', tagsForThisContainer =', tagsForThisContainer, ', tagElsInCurrentContainer =', tagElsInCurrentContainer);
  1510.     if (_.isEqual(currentTags, tagsForThisContainer) && !force) {
  1511.       debugLogTags('no tags changed');
  1512.       return;
  1513.     }
  1514.     const diff = jsondiffpatch.diff(currentTags, tagsForThisContainer);
  1515.     const changedTags = jsondiffpatch.formatters.console.format(diff);
  1516.     debugLogTags('changedTags', changedTags);
  1517.     containerEl.empty();
  1518.     const tagHomePageLayout = loadConfig()?.tagHomePageLayout;
  1519.     if (!isPreview) {
  1520.       if ((tagContainerType === TAG_CONTAINER_TYPE.NEW || tagContainerType === TAG_CONTAINER_TYPE.NEW_IN_COLLECTION)) {
  1521.         if (tagContainerType === TAG_CONTAINER_TYPE.NEW_IN_COLLECTION) {
  1522.           // only compact layout is supported for new in collection
  1523.           if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.COMPACT) {
  1524.             containerEl.addClass(tagContainerCompactCls);
  1525.           }
  1526.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.COMPACT) {
  1527.           containerEl.addClass(tagContainerCompactCls);
  1528.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.WIDER) {
  1529.           containerEl.addClass(tagContainerWiderCls);
  1530.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.WIDE) {
  1531.           containerEl.addClass(tagContainerWideCls);
  1532.         } else if (tagHomePageLayout === TAG_HOME_PAGE_LAYOUT.EXTRA_WIDE) {
  1533.           containerEl.addClass(tagContainerExtraWideCls);
  1534.         } else {
  1535.           containerEl.removeClass(`${tagContainerCompactCls} ${tagContainerWiderCls} ${tagContainerWideCls} ${tagContainerExtraWideCls}`);
  1536.         }
  1537.       }
  1538.     }
  1539.  
  1540.     const fences = {};
  1541.     const directories = {};
  1542.  
  1543.     const fencesWrapperEl = jq('<div/>').addClass(tagAllFencesWrapperCls);
  1544.     const restWrapperEl = jq('<div/>').addClass(tagRestOfTagsWrapperCls);
  1545.  
  1546.     tagsForThisContainer.forEach(tag => {
  1547.       const { fence, dir, inFence, inDir } = tag;
  1548.     
  1549.       const getOrCreateDirectory = dirName => {
  1550.         if (!directories[dirName]) directories[dirName] = createDirectory();
  1551.         return directories[dirName];
  1552.       };
  1553.       
  1554.       const getTagContainer = () => {
  1555.         if (fence) {
  1556.           if (!fences[fence]) fences[fence] = createFence(tag);
  1557.           return fences[fence].fenceContentEl;
  1558.         } else if (dir && inFence) {
  1559.           if (!fences[inFence]) {
  1560.             console.error(`fence ${inFence} for tag not found`, tag);
  1561.             return null;
  1562.           }
  1563.           const { directoryEl } = getOrCreateDirectory(dir);
  1564.           fences[inFence].fenceContentEl.append(directoryEl);
  1565.           return directoryEl;
  1566.         } else if (dir) {
  1567.           const { directoryEl } = getOrCreateDirectory(dir);
  1568.           restWrapperEl.append(directoryEl);
  1569.           return directoryEl;
  1570.         } else if (inFence) {
  1571.           if (!fences[inFence]) {
  1572.             console.error(`fence ${inFence} for tag not found`, tag);
  1573.             return null;
  1574.           }
  1575.           return fences[inFence].fenceContentEl;
  1576.         } else if (inDir) {
  1577.           if (!directories[inDir]) {
  1578.             console.error(`directory ${inDir} for tag not found`, tag);
  1579.             return null;
  1580.           }
  1581.           return directories[inDir].directoryContentEl;
  1582.         } else {
  1583.           return restWrapperEl;
  1584.         }
  1585.       };
  1586.       
  1587.       const tagContainer = getTagContainer();
  1588.       if (tagContainer && !fence) {
  1589.         createTag(tagContainer)(isPreview)(tag);
  1590.       }
  1591.     });
  1592.  
  1593.     Object.values(fences).forEach(({ fenceEl }) => fencesWrapperEl.append(fenceEl));
  1594.     containerEl.append(fencesWrapperEl).append(restWrapperEl);
  1595.   });
  1596. }
  1597.  
  1598. const setupTags = () => {
  1599.   debugLog('setting up tags');
  1600.   setInterval(refreshTags, 500);
  1601. }
  1602.  
  1603. const ICON_REPLACEMENT_MODE = Object.freeze({
  1604.   OFF: 'Off',
  1605.   LUCIDE1: 'Lucide 1',
  1606.   LUCIDE2: 'Lucide 2',
  1607.   LUCIDE3: 'Lucide 3',
  1608.   TDESIGN1: 'TDesign 1',
  1609.   TDESIGN2: 'TDesign 2',
  1610.   TDESIGN3: 'TDesign 3',
  1611. });
  1612.  
  1613. const leftPanelIconMappingsToLucide1 = Object.freeze({
  1614.   'search': 'search',
  1615.   'discover': 'telescope',
  1616.   'collection-2': 'shapes',
  1617.   'library': 'library-big',
  1618. });
  1619.  
  1620. const leftPanelIconMappingsToLucide2 = Object.freeze({
  1621.   'search': 'house',
  1622.   'discover': 'compass',
  1623.   'collection-2': 'square-stack',
  1624.   'library': 'archive',
  1625. });
  1626.  
  1627. const leftPanelIconMappingsToLucide3 = Object.freeze({
  1628.   'search': 'search',
  1629.   'discover': 'telescope',
  1630.   'collection-2': 'bot',
  1631.   'library': 'folder-open',
  1632. });
  1633.  
  1634. const leftPanelIconMappingsToTDesign1 = Object.freeze({
  1635.   'search': 'search',
  1636.   'discover': 'compass-filled',
  1637.   'collection-2': 'grid-view',
  1638.   'library': 'book',
  1639. });
  1640.  
  1641. const leftPanelIconMappingsToTDesign2 = Object.freeze({
  1642.   'search': 'search',
  1643.   'discover': 'shutter-filled',
  1644.   'collection-2': 'palette-1',
  1645.   'library': 'folder-open-1-filled',
  1646. });
  1647.  
  1648. const leftPanelIconMappingsToTDesign3 = Object.freeze({
  1649.   'search': 'search',
  1650.   'discover': 'banana-filled',
  1651.   'collection-2': 'chili-filled',
  1652.   'library': 'barbecue-filled',
  1653. });
  1654.  
  1655. const iconMappings = {
  1656.   LUCIDE1: leftPanelIconMappingsToLucide1,
  1657.   LUCIDE2: leftPanelIconMappingsToLucide2,
  1658.   LUCIDE3: leftPanelIconMappingsToLucide3,
  1659.   TDESIGN1: leftPanelIconMappingsToTDesign1,
  1660.   TDESIGN2: leftPanelIconMappingsToTDesign2,
  1661.   TDESIGN3: leftPanelIconMappingsToTDesign3,
  1662. };
  1663.  
  1664. const MODEL_LABEL_TEXT_MODE = Object.freeze({
  1665.   OFF: 'Off',
  1666.   FULL_NAME: 'Full Name',
  1667.   SHORT_NAME: 'Short Name',
  1668.   PP_MODEL_ID: 'PP Model ID',
  1669.   OWN_NAME_VERSION_SHORT: 'Own Name + Version Short',
  1670. });
  1671.  
  1672. const MODEL_LABEL_STYLE = Object.freeze({
  1673.   OFF: 'Off',
  1674.   JUST_TEXT: 'Just Text',
  1675.   BUTTON_SUBTLE: 'Button Subtle',
  1676.   BUTTON_WHITE: 'Button White',
  1677.   BUTTON_CYAN: 'Button Cyan',
  1678. });
  1679.  
  1680. const defaultConfig = Object.freeze({
  1681.   showCopilot: true,
  1682.   showCopilotNewThread: true,
  1683.   showCopilotRepeatLast: true,
  1684.   showCopilotCopyPlaceholder: true,
  1685.   tagsText: '',
  1686.   debugMode: false,
  1687.   debugTagsMode: false,
  1688.   tagPalette: 'CLASSIC',
  1689.   tagPaletteCustom: ['#000', '#fff', '#ff0', '#f00', '#0f0', '#00f', '#0ff', '#f0f'],
  1690.   tagFont: 'Roboto',
  1691.   tagHomePageLayout: TAG_HOME_PAGE_LAYOUT.DEFAULT,
  1692.   tagLuminanceThreshold: 0.35,
  1693.   tagBold: false,
  1694.   tagItalic: false,
  1695.   tagFontSize: 16,
  1696.   tagIconSize: 16,
  1697.   tagRoundness: 4,
  1698.   tagTextYOffset: 0,
  1699.   tagIconYOffset: 0,
  1700.   replaceIconsInMenu: ICON_REPLACEMENT_MODE.OFF,
  1701.   slimLeftMenu: false,
  1702.   hideHomeWidgets: false,
  1703.   hideDiscoverButton: false,
  1704.   fixImageGenerationOverlay: false,
  1705.   extraSpaceBellowLastAnswer: false,
  1706.   modelLabelTextMode: MODEL_LABEL_TEXT_MODE.OFF,
  1707.   modelLabelStyle: MODEL_LABEL_STYLE.OFF,
  1708.   modelLabelOverwriteCyanIconToGray: false,
  1709.   modelLabelUseIconForReasoningModels: false,
  1710.   modelLabelReasoningModelIconGold: false,
  1711.   customModelPopover: false,
  1712.   mainCaptionHtml: '',
  1713. });
  1714.  
  1715. // TODO: if still using local storage, at least it should be prefixed with user script name
  1716. const storageKey = 'checkBoxStates';
  1717.  
  1718. const loadConfig = () => {
  1719.   try {
  1720.     // TODO: use storage from GM API
  1721.     const val = JSON.parse(localStorage.getItem(storageKey));
  1722.     // debugLog('loaded config', val);
  1723.     return val;
  1724.   } catch (e) {
  1725.     console.error('Failed to load config, using default', e);
  1726.     return defaultConfig;
  1727.   }
  1728. }
  1729.  
  1730. const loadConfigOrDefault = () => loadConfig() ?? defaultConfig
  1731.  
  1732. const saveConfig = cfg => {
  1733.   debugLog('saving config', cfg);
  1734.   localStorage.setItem(storageKey, JSON.stringify(cfg));
  1735. };
  1736.  
  1737. const createCheckbox = (id, labelText, onChange) => {
  1738.   debugLog("createCheckbox", id);
  1739.   const checkbox = jq(`<input type="checkbox" id=${id}>`);
  1740.   const label = jq(`<label class="checkbox_label" for="${id}">${labelText}</label>`);
  1741.   const checkboxWithLabel = jq('<div class="checkbox_wrapper"></div>').append(checkbox).append(' ').append(label);
  1742.   debugLog('checkboxwithlabel', checkboxWithLabel);
  1743.  
  1744.   getSettingsLastTabGroupContent().append(checkboxWithLabel);
  1745.   checkbox.on('change', onChange);
  1746.   return checkbox;
  1747. };
  1748.  
  1749. const createTextArea = (id, labelText, onChange, helpText, links) => {
  1750.   debugLog("createTextArea", id);
  1751.   const textarea = jq(`<textarea id=${id}></textarea>`);
  1752.   const bookIconHtml = `<img src="${getLucideIconUrl('book-text')}" class="w-4 h-4 invert inline-block"/>`;
  1753.   const labelTextHtml = `<span class="opacity-100">${labelText}</span>`;
  1754.   const label = jq(`<label class="textarea_label">${labelTextHtml}${helpText ? ' ' + bookIconHtml : ''}</label>`);
  1755.   const labelWithLinks = jq('<div/>').addClass('flex flex-row gap-2 mb-2').append(label);
  1756.   const textareaWrapper = jq('<div class="textarea_wrapper"></div>').append(labelWithLinks);
  1757.   if (links) {
  1758.     links.forEach(({icon, label, url, tooltip}) => {
  1759.       const iconHtml = `<img src="${getIconUrl(icon)}" class="w-4 h-4 invert opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out"/>`;
  1760.       const link = jq(`<a href="${url}" target="_blank" class="flex flex-row gap-2 items-center">${icon ? iconHtml : ''}${label ? ' ' + label : ''}</a>`);
  1761.       link.attr('title', tooltip);
  1762.       labelWithLinks.append(link);
  1763.     });
  1764.   }
  1765.   if (helpText) {
  1766.     const help = jq(`<div/>`).addClass(helpTextCls).html(markdownConverter.makeHtml(helpText)).append(jq('<br/>'));
  1767.     help.find('a').each((_, a) => jq(a).attr('target', '_blank'));
  1768.     help.append(jq('<button/>').text('[Close help]').on('click', () => help.hide()));
  1769.     textareaWrapper.append(help);
  1770.     label
  1771.       .css({cursor: 'pointer'})
  1772.       .on('click', () => help.toggle())
  1773.       .prop('title', 'Click to toggle help')
  1774.     ;
  1775.     help.hide();
  1776.   }
  1777.   textareaWrapper.append(textarea);
  1778.   debugLog('textareaWithLabel', textareaWrapper);
  1779.  
  1780.   getSettingsLastTabGroupContent().append(textareaWrapper);
  1781.   textarea.on('change', onChange);
  1782.   return textarea;
  1783. };
  1784.  
  1785. const createSelect = (id, labelText, options, onChange) => {
  1786.   const select = jq(`<select id=${id}>`);
  1787.   options.forEach(({value, label}) => {
  1788.     jq('<option>').val(value).text(label).appendTo(select);
  1789.   });
  1790.   const label = jq(`<label class="select_label">${labelText}</label>`);
  1791.   const selectWithLabel = jq('<div class="select_wrapper"></div>').append(select).append(label);
  1792.   debugLog('selectWithLabel', selectWithLabel);
  1793.  
  1794.   getSettingsLastTabGroupContent().append(selectWithLabel);
  1795.   select.on('change', onChange);
  1796.   return select;
  1797. };
  1798.  
  1799. const createPaletteLegend = paletteName => {
  1800.   const wrapper = jq('<div/>')
  1801.     .addClass(tagPaletteCls)
  1802.     .append(jq('<span>').html('Palette of color codes:&nbsp;'))
  1803.   ;
  1804.   const palette = getPalette(paletteName);
  1805.   palette.forEach((color, i) => {
  1806.     const colorCode = `%${i}`;
  1807.     const colorPart = genColorPart(colorCode);
  1808.     // console.log('createPaletteLegend', {i, colorCode, colorPart, color});
  1809.     jq('<span/>')
  1810.       .text(colorCode)
  1811.       .addClass(tagPaletteItemCls)
  1812.       .css({
  1813.         'background-color': color,
  1814.       })
  1815.       .prop('title', `Copy ${colorPart} to clipboard`)
  1816.       .click(() => {
  1817.         copyTextToClipboard(colorPart);
  1818.       })
  1819.       .appendTo(wrapper);
  1820.   });
  1821.   return wrapper;
  1822. }
  1823.  
  1824. const createColorInput = (id, labelText, onChange) => {
  1825.   debugLog("createColorInput", id);
  1826.   const input = jq(`<input type="color" id=${id}>`);
  1827.   const label = jq(`<label class="color_label">${labelText}</label>`);
  1828.   const inputWithLabel = jq('<div class="color_wrapper"></div>').append(input).append(label);
  1829.   debugLog('inputWithLabel', inputWithLabel);
  1830.  
  1831.   getSettingsLastTabGroupContent().append(inputWithLabel);
  1832.   input.on('change', onChange);
  1833.   return input;
  1834. }
  1835.  
  1836. const createNumberInput = (id, labelText, onChange, {step = 1, min = 0, max = 100} = {}) => {
  1837.   debugLog("createNumberInput", id);
  1838.   const input = jq(`<input type="number" id=${id}>`)
  1839.     .prop('step', step)
  1840.     .prop('min', min)
  1841.     .prop('max', max)
  1842.     ;
  1843.   const label = jq(`<label class="number_label">${labelText}</label>`);
  1844.   const inputWithLabel = jq('<div class="number_wrapper"></div>').append(input).append(label);
  1845.   debugLog('inputWithLabel', inputWithLabel);
  1846.  
  1847.   getSettingsLastTabGroupContent().append(inputWithLabel);
  1848.   input.on('change', onChange);
  1849.   return input;
  1850. };
  1851.  
  1852. const createTagsPreview = () => {
  1853.   const wrapper = jq('<div/>')
  1854.     .addClass(tagsPreviewCls)
  1855.     .append(jq('<div>').text('Preview').addClass('text-lg font-bold'))
  1856.     .append(jq('<div>').text('Target New:'))
  1857.     .append(jq('<div>').addClass(tagsPreviewNewCls).addClass(tagsContainerCls).attr('data-preview', 'true'))
  1858.     .append(jq('<div>').text('Target Thread:'))
  1859.     .append(jq('<div>').addClass(tagsPreviewThreadCls).addClass(tagsContainerCls).attr('data-preview', 'true'))
  1860.   ;
  1861.   getSettingsLastTabGroupContent().append(wrapper);
  1862. }
  1863.  
  1864. const coPilotNewThreadAutoSubmitCheckboxId = 'coPilotNewThreadAutoSubmit';
  1865. const getCoPilotNewThreadAutoSubmitCheckbox = () => $i(coPilotNewThreadAutoSubmitCheckboxId);
  1866.  
  1867. const coPilotRepeatLastAutoSubmitCheckboxId = 'coPilotRepeatLastAutoSubmit';
  1868. const getCoPilotRepeatLastAutoSubmitCheckbox = () => $i(coPilotRepeatLastAutoSubmitCheckboxId);
  1869.  
  1870. const hideSideMenuCheckboxId = 'hideSideMenu';
  1871. const getHideSideMenuCheckbox = () => $i(hideSideMenuCheckboxId);
  1872.  
  1873. const tagsTextAreaId = 'tagsText';
  1874. const getTagsTextArea = () => $i(tagsTextAreaId);
  1875.  
  1876. const tagColorPickerId = genCssName('tagColorPicker');
  1877. const getTagColorPicker = () => $i(tagColorPickerId);
  1878.  
  1879. const enableDebugCheckboxId = genCssName('enableDebug');
  1880. const getEnableDebugCheckbox = () => $i(enableDebugCheckboxId);
  1881.  
  1882. const enableTagsDebugCheckboxId = genCssName('enableTagsDebug');
  1883. const getEnableTagsDebugCheckbox = () => $i(enableTagsDebugCheckboxId);
  1884.  
  1885. const tagPaletteSelectId = genCssName('tagPaletteSelect');
  1886. const getTagPaletteSelect = () => $i(tagPaletteSelectId);
  1887.  
  1888. const tagFontSelectId = genCssName('tagFontSelect');
  1889. const getTagFontSelect = () => $i(tagFontSelectId);
  1890.  
  1891. const tagTweakNoBorderCheckboxId = genCssName('tagTweakNoBorder');
  1892. const getTagTweakNoBorderCheckbox = () => $i(tagTweakNoBorderCheckboxId);
  1893.  
  1894. const tagTweakSlimPaddingCheckboxId = genCssName('tagTweakSlimPadding');
  1895. const getTagTweakSlimPaddingCheckbox = () => $i(tagTweakSlimPaddingCheckboxId);
  1896.  
  1897. const tagTweakRichBorderColorCheckboxId = genCssName('tagTweakRichBorderColor');
  1898. const getTagTweakRichBorderColorCheckbox = () => $i(tagTweakRichBorderColorCheckboxId);
  1899.  
  1900. const tagTweakTextShadowCheckboxId = genCssName('tagTweakTextShadow');
  1901. const getTagTweakTextShadowCheckbox = () => $i(tagTweakTextShadowCheckboxId);
  1902.  
  1903. const tagHomePageLayoutSelectId = genCssName('tagHomePageLayout');
  1904. const getTagHomePageLayoutSelect = () => $i(tagHomePageLayoutSelectId);
  1905.  
  1906. const tagLuminanceThresholdInputId = genCssName('tagLuminanceThreshold');
  1907. const getTagLuminanceThresholdInput = () => $i(tagLuminanceThresholdInputId);
  1908.  
  1909. const tagBoldCheckboxId = genCssName('tagBold');
  1910. const getTagBoldCheckbox = () => $i(tagBoldCheckboxId);
  1911.  
  1912. const tagItalicCheckboxId = genCssName('tagItalic');  
  1913. const getTagItalicCheckbox = () => $i(tagItalicCheckboxId);
  1914.  
  1915. const tagFontSizeInputId = genCssName('tagFontSize');
  1916. const getTagFontSizeInput = () => $i(tagFontSizeInputId);
  1917.  
  1918. const tagIconSizeInputId = genCssName('tagIconSize');  
  1919. const getTagIconSizeInput = () => $i(tagIconSizeInputId);
  1920.  
  1921. const tagRoundnessInputId = genCssName('tagRoundness');
  1922. const getTagRoundnessInput = () => $i(tagRoundnessInputId);
  1923.  
  1924. const tagTextYOffsetInputId = genCssName('tagTextYOffset');
  1925. const getTagTextYOffsetInput = () => $i(tagTextYOffsetInputId);
  1926.  
  1927. const tagIconYOffsetInputId = genCssName('tagIconYOffset');
  1928. const getTagIconYOffsetInput = () => $i(tagIconYOffsetInputId);
  1929.  
  1930. const tagPaletteCustomTextAreaId = genCssName('tagPaletteCustomTextArea');
  1931. const getTagPaletteCustomTextArea = () => $i(tagPaletteCustomTextAreaId);
  1932.  
  1933. const replaceIconsInMenuId = genCssName('replaceIconsInMenu');
  1934. const getReplaceIconsInMenu = () => $i(replaceIconsInMenuId);
  1935.  
  1936. const slimLeftMenuCheckboxId = genCssName('slimLeftMenu');
  1937. const getSlimLeftMenuCheckbox = () => $i(slimLeftMenuCheckboxId);
  1938.  
  1939. const hideHomeWidgetsCheckboxId = genCssName('hideHomeWidgets');
  1940. const getHideHomeWidgetsCheckbox = () => $i(hideHomeWidgetsCheckboxId);
  1941.  
  1942. const hideDiscoverButtonCheckboxId = genCssName('hideDiscoverButton');
  1943. const getHideDiscoverButtonCheckbox = () => $i(hideDiscoverButtonCheckboxId);
  1944.  
  1945. const fixImageGenerationOverlayCheckboxId = genCssName('fixImageGenerationOverlay');
  1946. const getFixImageGenerationOverlayCheckbox = () => $i(fixImageGenerationOverlayCheckboxId);
  1947.  
  1948. const extraSpaceBellowLastAnswerCheckboxId = genCssName('extraSpaceBellowLastAnswer');
  1949. const getExtraSpaceBellowLastAnswerCheckbox = () => $i(extraSpaceBellowLastAnswerCheckboxId);
  1950.  
  1951. const modelLabelTextModeSelectId = genCssName('modelLabelTextModeSelect');
  1952. const getModelLabelTextModeSelect = () => $i(modelLabelTextModeSelectId);
  1953.  
  1954. const modelLabelStyleSelectId = genCssName('modelLabelStyleSelect');
  1955. const getModelLabelStyleSelect = () => $i(modelLabelStyleSelectId);
  1956.  
  1957. const modelLabelOverwriteCyanIconToGrayCheckboxId = genCssName('modelLabelOverwriteCyanIconToGray');
  1958. const getModelLabelOverwriteCyanIconToGrayCheckbox = () => $i(modelLabelOverwriteCyanIconToGrayCheckboxId);
  1959.  
  1960. const modelLabelUseIconForReasoningModelsCheckboxId = genCssName('modelLabelUseIconForReasoningModels');
  1961. const getModelLabelUseIconForReasoningModelsCheckbox = () => $i(modelLabelUseIconForReasoningModelsCheckboxId);
  1962.  
  1963. const modelLabelReasoningModelIconGoldCheckboxId = genCssName('modelLabelReasoningModelIconGold');
  1964. const getModelLabelReasoningModelIconGoldCheckbox = () => $i(modelLabelReasoningModelIconGoldCheckboxId);
  1965.  
  1966. const customModelPopoverCheckboxId = genCssName('customModelPopoverCheckbox');
  1967. const getCustomModelPopoverCheckbox = () => $i(customModelPopoverCheckboxId);
  1968.  
  1969. const mainCaptionHtmlTextAreaId = genCssName('mainCaptionHtmlTextArea');
  1970. const getMainCaptionHtmlTextArea = () => $i(mainCaptionHtmlTextAreaId);
  1971.  
  1972. const copyTextToClipboard = async text => {
  1973.   try {
  1974.     await navigator.clipboard.writeText(text);
  1975.     console.log('Text copied to clipboard', {text});
  1976.   } catch (err) {
  1977.     console.error('Failed to copy text: ', err);
  1978.   }
  1979. };
  1980.  
  1981. const genColorPart = color => `<color:${color}>`;
  1982.  
  1983. const loadCurrentConfigToSettingsForm = () => {
  1984.   const savedStatesRaw = JSON.parse(localStorage.getItem(storageKey));
  1985.   if (savedStatesRaw === null) { return; }
  1986.   const savedStates = {...defaultConfig, ...savedStatesRaw};
  1987.  
  1988.   getCoPilotNewThreadAutoSubmitCheckbox().prop('checked', savedStates.coPilotNewThreadAutoSubmit);
  1989.   getCoPilotRepeatLastAutoSubmitCheckbox().prop('checked', savedStates.coPilotRepeatLastAutoSubmit);
  1990.   getHideSideMenuCheckbox().prop('checked', savedStates.hideSideMenu);
  1991.   getTagsTextArea().val(savedStates.tagsText);
  1992.   getEnableDebugCheckbox().prop('checked', savedStates.enableDebug);
  1993.   getEnableTagsDebugCheckbox().prop('checked', savedStates.debugTagsMode);
  1994.   getTagPaletteSelect().val(savedStates.tagPalette);
  1995.   getTagFontSelect().val(savedStates.tagFont);
  1996.   getTagTweakNoBorderCheckbox().prop('checked', savedStates.tagTweakNoBorder);
  1997.   getTagTweakSlimPaddingCheckbox().prop('checked', savedStates.tagTweakSlimPadding);
  1998.   getTagTweakRichBorderColorCheckbox().prop('checked', savedStates.tagTweakRichBorderColor);
  1999.   getTagTweakTextShadowCheckbox().prop('checked', savedStates.tagTweakTextShadow);
  2000.   getTagHomePageLayoutSelect().val(savedStates.tagHomePageLayout);
  2001.   getTagLuminanceThresholdInput().val(savedStates.tagLuminanceThreshold);
  2002.   getTagBoldCheckbox().prop('checked', savedStates.tagBold);
  2003.   getTagItalicCheckbox().prop('checked', savedStates.tagItalic);
  2004.   getTagFontSizeInput().val(savedStates.tagFontSize);
  2005.   getTagIconSizeInput().val(savedStates.tagIconSize);
  2006.   getTagTextYOffsetInput().val(savedStates.tagTextYOffset);
  2007.   getTagIconYOffsetInput().val(savedStates.tagIconYOffset);
  2008.   getTagRoundnessInput().val(savedStates.tagRoundness);
  2009.   getReplaceIconsInMenu().val(savedStates.replaceIconsInMenu);
  2010.   getSlimLeftMenuCheckbox().prop('checked', savedStates.slimLeftMenu);
  2011.   getHideHomeWidgetsCheckbox().prop('checked', savedStates.hideHomeWidgets);
  2012.   getHideDiscoverButtonCheckbox().prop('checked', savedStates.hideDiscoverButton);
  2013.   getFixImageGenerationOverlayCheckbox().prop('checked', savedStates.fixImageGenerationOverlay);
  2014.   getExtraSpaceBellowLastAnswerCheckbox().prop('checked', savedStates.extraSpaceBellowLastAnswer);
  2015.   getModelLabelTextModeSelect().val(savedStates.modelLabelTextMode);
  2016.   getModelLabelStyleSelect().val(savedStates.modelLabelStyle);
  2017.   getModelLabelOverwriteCyanIconToGrayCheckbox().prop('checked', savedStates.modelLabelOverwriteCyanIconToGray);
  2018.   getModelLabelUseIconForReasoningModelsCheckbox().prop('checked', savedStates.modelLabelUseIconForReasoningModels);
  2019.   getModelLabelReasoningModelIconGoldCheckbox().prop('checked', savedStates.modelLabelReasoningModelIconGold);
  2020.   getCustomModelPopoverCheckbox().prop('checked', savedStates.customModelPopover);
  2021.   getTagPaletteCustomTextArea().val((savedStates.tagPaletteCustom || []).join(', '));
  2022.   getMainCaptionHtmlTextArea().val(savedStates.mainCaptionHtml);
  2023. }
  2024.  
  2025. function handleSettingsInit() {
  2026.   const modalExists = getPerplexityHelperModal().length > 0;
  2027.   const firstCheckboxExists = getCoPilotNewThreadAutoSubmitCheckbox().length > 0;
  2028.  
  2029.   if (!modalExists || firstCheckboxExists) { return; }
  2030.  
  2031.   const $tabButtons = $c(modalTabGroupTabsCls).addClass('flex gap-2 items-end');
  2032.  
  2033.   const setActiveTab = (tabName) => {
  2034.     $c(modalTabGroupTabsCls).find('> button').each((_, tab) => {
  2035.       const $tab = jq(tab);
  2036.       if ($tab.attr('data-tab') === tabName) {
  2037.         $tab.addClass(modalTabGroupActiveCls);
  2038.       } else {
  2039.         $tab.removeClass(modalTabGroupActiveCls);
  2040.       }
  2041.     });
  2042.     $c(modalTabGroupContentCls).each((_, tab) => {
  2043.       const $tab = jq(tab);
  2044.       if ($tab.attr('data-tab') === tabName) {
  2045.         $tab.show();
  2046.       } else {
  2047.         $tab.hide();
  2048.       }
  2049.     });
  2050.   }
  2051.  
  2052.   const createTabContent = (tabName, tabLabel) => {
  2053.     const $tabButton = jq('<button/>').text(tabLabel).attr('data-tab', tabName).on('click', () => setActiveTab(tabName));
  2054.     $tabButtons.append($tabButton);
  2055.     const $tabContent = jq('<div/>')
  2056.       .addClass(modalTabGroupContentCls)
  2057.       .attr('data-tab', tabName);
  2058.     getSettingsModalContent().append($tabContent);
  2059.     return $tabContent;
  2060.   };
  2061.  
  2062.   const insertSeparator = () => getSettingsLastTabGroupContent().append('<hr/>');
  2063.  
  2064.   // -------------------------------------------------------------------------------------------------------------------
  2065.   createTabContent('general', 'General');
  2066.  
  2067.   createCheckbox(coPilotNewThreadAutoSubmitCheckboxId, 'Auto Submit New Thread With CoPilot', saveConfigFromForm);
  2068.   createCheckbox(coPilotRepeatLastAutoSubmitCheckboxId, 'Auto Submit Repeat With CoPilot', saveConfigFromForm);
  2069.   createCheckbox(hideSideMenuCheckboxId, 'Hide Side Menu', saveConfigFromForm);
  2070.  
  2071.   createSelect(
  2072.     replaceIconsInMenuId,
  2073.     'Replace menu icons',
  2074.     Object.values(ICON_REPLACEMENT_MODE).map(value => ({value, label: value})),
  2075.     () => {
  2076.       saveConfigFromForm();
  2077.       replaceIconsInMenu();
  2078.     }
  2079.   );
  2080.  
  2081.   createCheckbox(slimLeftMenuCheckboxId, 'Slim Left Menu', saveConfigFromForm);
  2082.   createCheckbox(hideHomeWidgetsCheckboxId, 'Hide Home Page Widgets', saveConfigFromForm);
  2083.   createCheckbox(hideDiscoverButtonCheckboxId, 'Hide Discover Button', saveConfigFromForm);
  2084.   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);
  2085.   createCheckbox(extraSpaceBellowLastAnswerCheckboxId, 'Add extra space bellow last answer', saveConfigFromForm);
  2086.   createSelect(
  2087.     modelLabelStyleSelectId,
  2088.     'Model Label Style',
  2089.     Object.values(MODEL_LABEL_STYLE).map(value => ({ value, label: value })),
  2090.     saveConfigFromForm
  2091.   );
  2092.   createSelect(
  2093.     modelLabelTextModeSelectId,
  2094.     'Model Label Text',
  2095.     Object.values(MODEL_LABEL_TEXT_MODE).map(value => ({ value, label: value })),
  2096.     saveConfigFromForm
  2097.   );
  2098.   createCheckbox(modelLabelOverwriteCyanIconToGrayCheckboxId, 'Overwrite Model Icon: Cyan -> Gray', saveConfigFromForm);
  2099.   createCheckbox(modelLabelUseIconForReasoningModelsCheckboxId, 'Use icon for reasoning models', saveConfigFromForm);
  2100.   createCheckbox(modelLabelReasoningModelIconGoldCheckboxId, 'Use gold color for reasoning model icon', saveConfigFromForm);
  2101.   createCheckbox(customModelPopoverCheckboxId, 'Custom Model Popover (Experimental)', saveConfigFromForm);
  2102.   createTextArea(mainCaptionHtmlTextAreaId, 'Main Caption HTML', saveConfigFromForm);
  2103.   // -------------------------------------------------------------------------------------------------------------------
  2104.   createTabContent('tags', 'Tags');
  2105.   
  2106.   createTextArea(tagsTextAreaId, 'Tags', saveConfigFromForm, tagsHelpText, [
  2107.     {icon: 'l:images', tooltip: 'Lucide Icons', url: 'https://lucide.dev/icons'},
  2108.     {icon: 'td:image', tooltip: 'TDesign Icons', url: 'https://tdesign.tencent.com/design/icon-en#header-69'}
  2109.   ])
  2110.     .prop('rows', 12).css('min-width', '700px').prop('wrap', 'off');
  2111.  
  2112.   const paletteLegendContainer = jq('<div/>').attr('id', 'palette-legend-container');
  2113.   getSettingsLastTabGroupContent().append(paletteLegendContainer);
  2114.   
  2115.   const updatePaletteLegend = () => {
  2116.     paletteLegendContainer.empty().append(createPaletteLegend(loadConfig()?.tagPalette));
  2117.   };
  2118.   
  2119.   updatePaletteLegend();
  2120.  
  2121.   createSelect(
  2122.     tagPaletteSelectId,
  2123.     'Tag color palette',
  2124.     Object.keys(TAGS_PALETTES).map(key => ({value: key, label: key})),
  2125.     () => {
  2126.       saveConfigFromForm();
  2127.       updatePaletteLegend();
  2128.       refreshTags();
  2129.     }
  2130.   );
  2131.  
  2132.   createTextArea(
  2133.     tagPaletteCustomTextAreaId,
  2134.     'Custom Palette Colors (comma-separated):',
  2135.     () => {
  2136.       saveConfigFromForm();
  2137.       // Update legend and tags only if CUSTOM is the selected palette
  2138.       if (getTagPaletteSelect().val() === TAGS_PALETTES.CUSTOM) {
  2139.         updatePaletteLegend();
  2140.         refreshTags();
  2141.       }
  2142.     }
  2143.   ).prop('rows', 2); // Make it a bit smaller than the main tags text area
  2144.  
  2145.   createTagsPreview();
  2146.  
  2147.   const FONTS = Object.keys(fontUrls);
  2148.  
  2149.   createSelect(
  2150.     tagFontSelectId,
  2151.     'Tag font',
  2152.     FONTS.map(font => ({ value: font, label: font })),
  2153.     () => {
  2154.       saveConfigFromForm();
  2155.       loadFont(loadConfigOrDefault().tagFont);
  2156.       refreshTags({force: true});
  2157.     }
  2158.   );
  2159.   createColorInput(tagColorPickerId, 'Custom color - copy field for tag to clipboard', () => {
  2160.     const color = getTagColorPicker().val();
  2161.     debugLog('color', color);
  2162.     copyTextToClipboard(genColorPart(color));
  2163.   });
  2164.   const saveConfigFromFormAndForceRefreshTags = () => {
  2165.     saveConfigFromForm();
  2166.     refreshTags({force: true});
  2167.   };
  2168.  
  2169.   createCheckbox(tagBoldCheckboxId, 'Bold text', saveConfigFromFormAndForceRefreshTags);
  2170.   createCheckbox(tagItalicCheckboxId, 'Italic text', saveConfigFromFormAndForceRefreshTags);
  2171.   
  2172.   createNumberInput(
  2173.     tagFontSizeInputId,
  2174.     'Font size',
  2175.     saveConfigFromFormAndForceRefreshTags,
  2176.     { min: 4, max: 64 }  
  2177.   );
  2178.  
  2179.   createNumberInput(
  2180.     tagIconSizeInputId,  
  2181.     'Icon size',
  2182.     saveConfigFromFormAndForceRefreshTags,
  2183.     { min: 4, max: 64 }
  2184.   );
  2185.  
  2186.   createNumberInput(
  2187.     tagRoundnessInputId,
  2188.     'Tag Roundness (px)',
  2189.     saveConfigFromFormAndForceRefreshTags,
  2190.     { min: 0, max: 32 }
  2191.   );
  2192.  
  2193.   createNumberInput(
  2194.     tagTextYOffsetInputId,
  2195.     'Text Y offset',  
  2196.     saveConfigFromFormAndForceRefreshTags,
  2197.     { step: 1, min: -50, max: 50 }
  2198.   );
  2199.  
  2200.   createNumberInput(  
  2201.     tagIconYOffsetInputId,
  2202.     'Icon Y offset',
  2203.     saveConfigFromFormAndForceRefreshTags, 
  2204.     { step: 1, min: -50, max: 50 }
  2205.   );
  2206.  
  2207.   createCheckbox(tagTweakNoBorderCheckboxId, 'No border', saveConfigFromFormAndForceRefreshTags);
  2208.   createCheckbox(tagTweakSlimPaddingCheckboxId, 'Slim padding', saveConfigFromFormAndForceRefreshTags);
  2209.   createCheckbox(tagTweakRichBorderColorCheckboxId, 'Rich Border Color', saveConfigFromFormAndForceRefreshTags);
  2210.   createCheckbox(tagTweakTextShadowCheckboxId, 'Text shadow', saveConfigFromFormAndForceRefreshTags);
  2211.   createNumberInput(
  2212.     tagLuminanceThresholdInputId, 
  2213.     'Tag Luminance Threshold (determines if tag is light or dark)', 
  2214.     saveConfigFromFormAndForceRefreshTags,
  2215.     {step: 0.01, min: 0, max: 1}
  2216.   );
  2217.   createSelect(
  2218.     tagHomePageLayoutSelectId, 
  2219.     'Tag container layout on home page (requires page refresh)',
  2220.     Object.values(TAG_HOME_PAGE_LAYOUT).map(value => ({value, label: value})),
  2221.     saveConfigFromForm
  2222.   );
  2223.  
  2224.   const $modelsList = jq('<div/>').text('Model IDs: ');
  2225.   const modelIds = PP.modelDescriptors.map(md => md.ppModelId).join(', ');
  2226.   $modelsList.append(modelIds);
  2227.   getSettingsLastTabGroupContent().append($modelsList);
  2228.  
  2229.   // -------------------------------------------------------------------------------------------------------------------
  2230.   createTabContent('settings', 'Settings');
  2231.  
  2232.   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.'));
  2233.  
  2234.   const buttonsContainer = jq('<div/>').addClass('flex gap-2');
  2235.   getSettingsLastTabGroupContent().append(buttonsContainer);
  2236.  
  2237.   const createExportButton = () => {
  2238.     const exportButton = jq('<button>')
  2239.         .text('Export Settings')
  2240.         .on('click', () => {
  2241.             const settings = JSON.stringify(getSavedStates(), null, 2);
  2242.             const blob = new Blob([settings], { type: 'application/json' });
  2243.             const date = new Date().toISOString().replace(/[:]/g, '-').replace(/T/g, '--').split('.')[0]; // Format: YYYY-MM-DD--HH-MM-SS
  2244.             const filename = `perplexity-helper-settings_${date}.json`;
  2245.             const url = URL.createObjectURL(blob);
  2246.             const a = document.createElement('a');
  2247.             a.href = url;
  2248.             a.download = filename;
  2249.             document.body.appendChild(a);
  2250.             a.click();
  2251.             document.body.removeChild(a);
  2252.             URL.revokeObjectURL(url);
  2253.         });
  2254.     buttonsContainer.append(exportButton);
  2255.   };
  2256.  
  2257.   const createImportButton = () => {
  2258.     const importButton = jq('<button>')
  2259.       .text('Import Settings')
  2260.       .on('click', () => {
  2261.         const input = jq('<input type="file" accept=".json">');
  2262.         input.on('change', async (event) => {
  2263.           const file = event.target.files[0];
  2264.           if (file) {
  2265.             const confirmOverwrite = confirm('This will overwrite your current settings. Do you want to continue?');
  2266.             if (confirmOverwrite) {
  2267.               const reader = new FileReader();
  2268.               reader.onload = (e) => {
  2269.                 try {
  2270.                     const importedSettings = JSON.parse(e.target.result);
  2271.                     saveConfig(importedSettings);
  2272.                     loadCurrentConfigToSettingsForm();
  2273.                     alert('Settings imported successfully!');
  2274.                 } catch (error) {
  2275.                     console.error('Failed to import settings:', error);
  2276.                     alert('Failed to import settings. Please ensure the file is valid JSON.');
  2277.                 }
  2278.               };
  2279.               reader.readAsText(file);
  2280.             }
  2281.           }
  2282.         });
  2283.         input.click();
  2284.       });
  2285.     buttonsContainer.append(importButton);
  2286.   };
  2287.  
  2288.   createExportButton();
  2289.   createImportButton();
  2290.  
  2291.   // -------------------------------------------------------------------------------------------------------------------
  2292.   createTabContent('debug', 'Debug'); // debug options at the bottom (do NOT add more normal options bellow this!)
  2293.  
  2294.   createCheckbox(enableDebugCheckboxId, 'Enable Debug', saveConfigFromForm);
  2295.   createCheckbox(enableTagsDebugCheckboxId, 'Enable tags debug log', saveConfigFromForm);
  2296.  
  2297.   // -------------------------------------------------------------------------------------------------------------------
  2298.   setActiveTab('general');
  2299.   loadCurrentConfigToSettingsForm();
  2300. }
  2301.  
  2302. debugLog(jq.fn.jquery);
  2303. const getSavedStates = () => JSON.parse(localStorage.getItem(storageKey));
  2304.  
  2305. const getModal = () => jq("[data-testid='quick-search-modal'] > div");
  2306. const getCopilotToggleButton = textarea => textarea.parent().parent().find('[data-testid="copilot-toggle"]');
  2307. const upperControls = () => jq('svg[data-icon="lock"] ~ div:contains("Share")').nthParent(5).closest('.flex.justify-between:not(.grid-cols-3)');
  2308.  
  2309. const getControlsArea = () => jq('textarea[placeholder="Ask follow-up"]').parent().parent().children().last();
  2310.  
  2311. const getCopilotNewThreadButton = () => jq('#copilot_new_thread');
  2312. const getCopilotRepeatLastButton = () => jq('#copilot_repeat_last');
  2313. const getSelectAllButton = () => jq('#perplexity_helper_select_all');
  2314. const getSelectAllAndSubmitButton = () => jq('#perplexity_helper_select_all_and_submit');
  2315. const getCopyPlaceholder = () => jq('#perplexity_helper_copy_placeholder');
  2316. const getCopyAndFillInPlaceholder = () => jq('#perplexity_helper_copy_placeholder_and_fill_in');
  2317. const getTopSettingsButtonEl = () => $i(topSettingsButtonId);
  2318. const getLeftSettingsButtonEl = () => $i(leftSettingsButtonId);
  2319. const getSideMenu = () => jq('.min-h-\\[100vh\\]').children().first();
  2320. const getSettingsModalContent = () => getPerplexityHelperModal().find(`.modal-content`);
  2321. const getSettingsLastTabGroupContent = () => getSettingsModalContent().find(`.${modalTabGroupContentCls}`).last();
  2322.  
  2323. const getSubmitBtn0 = () => jq('svg[data-icon="arrow-up"]').last().parent().parent();
  2324. const getSubmitBtn1 = () => jq('svg[data-icon="arrow-right"]').last().parent().parent();
  2325. const getSubmitBtn2 = () => jq('svg[data-icon="code-fork"]').last().parent().parent();
  2326.  
  2327. const isStandardControlsAreaFc = () => !getControlsArea().hasClass('bottom-0');
  2328. const getCurrentControlsArea = () => isStandardControlsAreaFc() ? getControlsArea() : getControlsArea().find('.bottom-0');
  2329.  
  2330. const getDashedCheckboxButton = () => jq('svg[data-icon="square-dashed"]').parent().parent();
  2331. const getStarSVG = () => jq('svg[data-icon="star-christmas"]');
  2332. const getSpecifyQuestionBox = () => jq('svg[data-icon="star-christmas"]').parent().parent().parent().last();
  2333.  
  2334. const getNumberOfDashedSVGs = () => getSpecifyQuestionBox().find('svg[data-icon="square-dashed"]').length;
  2335. const getSpecifyQuestionControlsWrapper = () => getSpecifyQuestionBox().find('button:contains("Continue")').parent()
  2336. const getCopiedModal = () => jq('#copied-modal');
  2337. const getCopiedModal2 = () => jq('#copied-modal-2');
  2338. const getCopyPlaceholderInput = () => getSpecifyQuestionBox().find('textarea');
  2339.  
  2340. const getSubmitButton0or2 = () => getSubmitBtn0().length < 1 ? getSubmitBtn2() : getSubmitBtn0();
  2341.  
  2342. const questionBoxWithPlaceholderExists = () => getSpecifyQuestionBox().find('textarea')?.attr('placeholder')?.length > 0 ?? false;
  2343.  
  2344. // TODO: no longer used? was this for agentic questions?
  2345. const selectAllCheckboxes = () => {
  2346.   const currentCheckboxes = getDashedCheckboxButton();
  2347.   debugLog('checkboxes', currentCheckboxes);
  2348.  
  2349.   const removeLastObject = (arr) => {
  2350.     if (!_.isEmpty(arr)) {
  2351.       debugLog('arr', arr);
  2352.       const newArr = _.dropRight(arr, 1);
  2353.       debugLog("newArr", newArr);
  2354.       getDashedCheckboxButton().last().click();
  2355.  
  2356.       return setTimeout(() => {
  2357.         removeLastObject(newArr)
  2358.       }, 1)
  2359.  
  2360.     }
  2361.   };
  2362.  
  2363.   removeLastObject(currentCheckboxes);
  2364. }
  2365.  
  2366. const isCopilotOn = (el) => el.hasClass('text-super')
  2367.  
  2368. const toggleBtnDot = (btnDot, value) => {
  2369.   debugLog(' toggleBtnDot btnDot', btnDot);
  2370.  
  2371.   const btnDotInner = btnDot.find('.rounded-full');
  2372.  
  2373.   debugLog('btnDotInner', btnDotInner);
  2374.  
  2375.   if (!btnDotInner.hasClass('bg-super') && value === true) {
  2376.     btnDot.click();
  2377.   }
  2378. }
  2379.  
  2380. const checkForCopilotToggleState = (timer, checkCondition, submitWhenTrue, submitButtonVersion) => {
  2381.   debugLog("checkForCopilotToggleState run", timer, checkCondition(), submitWhenTrue, submitButtonVersion);
  2382.   if (checkCondition()) {
  2383.     clearInterval(timer);
  2384.     debugLog("checkForCopilotToggleState condition met, interval cleared");
  2385.     const submitBtn = submitButtonVersion === 0 ? getSubmitButton0or2() : getSubmitBtn1();
  2386.  
  2387.     debugLog('submitBtn', submitBtn);
  2388.     if (submitWhenTrue) {
  2389.       submitBtn.click();
  2390.     }
  2391.   }
  2392. }
  2393.  
  2394. const openNewThreadModal = (lastQuery) => {
  2395.   debugLog('openNewThreadModal', lastQuery)
  2396.  
  2397.   const newThreadText = jq(".sticky div").filter(function () {
  2398.     return /^New Thread$/i.test(jq(this).text());
  2399.   });
  2400.   if (!newThreadText.length) {
  2401.     debugLog('newThreadText.length should be 1', newThreadText.length);
  2402.     return;
  2403.   }
  2404.   debugLog('newThreadText', newThreadText);
  2405.  
  2406.   newThreadText.click();
  2407.   setTimeout(() => {
  2408.       debugLog('newThreadText.click()');
  2409.       const modal = getModal();
  2410.  
  2411.       if (modal.length > 0) {
  2412.         const textArea = modal.find('textarea');
  2413.         if (textArea.length !== 1) debugLog('textArea.length should be 1', textArea.length);
  2414.  
  2415.         const newTextArea = textArea.last();
  2416.         const textareaElement = newTextArea[0];
  2417.         debugLog('textareaElement', textareaElement);
  2418.         changeValueUsingEvent(textareaElement, lastQuery);
  2419.  
  2420.         const copilotButton = getCopilotToggleButton(newTextArea);
  2421.  
  2422.         toggleBtnDot(copilotButton, true);
  2423.         const isCopilotOnBtn = () => isCopilotOn(copilotButton);
  2424.  
  2425.         const coPilotNewThreadAutoSubmit =
  2426.           getSavedStates()
  2427.             ? getSavedStates().coPilotNewThreadAutoSubmit
  2428.             : getCoPilotNewThreadAutoSubmitCheckbox().prop('checked');
  2429.  
  2430.         const copilotCheck = () => {
  2431.           const ctx = {timer: null};
  2432.           ctx.timer = setInterval(() => checkForCopilotToggleState(ctx.timer, isCopilotOnBtn, coPilotNewThreadAutoSubmit, 1), 500);
  2433.         }
  2434.  
  2435.         copilotCheck();
  2436.       } else {
  2437.         debugLog('else of modal.length > 0');
  2438.       }
  2439.     },
  2440.     2000);
  2441. }
  2442.  
  2443. const getLastQuery = () => {
  2444.   // wrapper around prompt + response
  2445.   const lastQueryBox = jq('svg[data-icon="repeat"]').last().nthParent(7);
  2446.   if (lastQueryBox.length === 0) {
  2447.     debugLog('lastQueryBox not found');
  2448.   }
  2449.  
  2450.   const wasCopilotUsed = lastQueryBox.find('svg[data-icon="star-christmas"]').length > 0;
  2451.   const lastQueryBoxText = lastQueryBox.find('.whitespace-pre-line').text();
  2452.  
  2453.   debugLog('[getLastQuery]', {lastQueryBox, wasCopilotUsed, lastQueryBoxText});
  2454.   return lastQueryBoxText ?? null;
  2455. }
  2456.  
  2457. const saveConfigFromForm = () => {
  2458.   const checkBoxStates = {
  2459.     coPilotNewThreadAutoSubmit: getCoPilotNewThreadAutoSubmitCheckbox().prop('checked'),
  2460.     coPilotRepeatLastAutoSubmit: getCoPilotRepeatLastAutoSubmitCheckbox().prop('checked'),
  2461.     hideSideMenu: getHideSideMenuCheckbox().prop('checked'),
  2462.     tagsText: getTagsTextArea().val(),
  2463.     enableDebug: getEnableDebugCheckbox().prop('checked'),
  2464.     debugTagsMode: getEnableTagsDebugCheckbox().prop('checked'),
  2465.     tagPalette: getTagPaletteSelect().val(),
  2466.     tagFont: getTagFontSelect().val(),
  2467.     tagTweakNoBorder: getTagTweakNoBorderCheckbox().prop('checked'),
  2468.     tagTweakSlimPadding: getTagTweakSlimPaddingCheckbox().prop('checked'),
  2469.     tagTweakRichBorderColor: getTagTweakRichBorderColorCheckbox().prop('checked'),
  2470.     tagTweakTextShadow: getTagTweakTextShadowCheckbox().prop('checked'),
  2471.     tagHomePageLayout: getTagHomePageLayoutSelect().val(),
  2472.     tagLuminanceThreshold: parseFloat(getTagLuminanceThresholdInput().val()),
  2473.     tagBold: getTagBoldCheckbox().prop('checked'),
  2474.     tagItalic: getTagItalicCheckbox().prop('checked'),
  2475.     tagFontSize: parseInt(getTagFontSizeInput().val()),
  2476.     tagIconSize: parseInt(getTagIconSizeInput().val()),
  2477.     tagRoundness: parseInt(getTagRoundnessInput().val()),
  2478.     tagTextYOffset: parseInt(getTagTextYOffsetInput().val()),
  2479.     tagIconYOffset: parseInt(getTagIconYOffsetInput().val()),
  2480.     replaceIconsInMenu: getReplaceIconsInMenu().val(),
  2481.     slimLeftMenu: getSlimLeftMenuCheckbox().prop('checked'),
  2482.     hideHomeWidgets: getHideHomeWidgetsCheckbox().prop('checked'),
  2483.     hideDiscoverButton: getHideDiscoverButtonCheckbox().prop('checked'),
  2484.     fixImageGenerationOverlay: getFixImageGenerationOverlayCheckbox().prop('checked'),
  2485.     extraSpaceBellowLastAnswer: getExtraSpaceBellowLastAnswerCheckbox().prop('checked'),
  2486.     modelLabelTextMode: getModelLabelTextModeSelect().val(),
  2487.     modelLabelStyle: getModelLabelStyleSelect().val(),
  2488.     modelLabelOverwriteCyanIconToGray: getModelLabelOverwriteCyanIconToGrayCheckbox().prop('checked'),
  2489.     modelLabelUseIconForReasoningModels: getModelLabelUseIconForReasoningModelsCheckbox().prop('checked'),
  2490.     modelLabelReasoningModelIconGold: getModelLabelReasoningModelIconGoldCheckbox().prop('checked'),
  2491.     customModelPopover: getCustomModelPopoverCheckbox().prop('checked'),
  2492.     tagPaletteCustom: getTagPaletteCustomTextArea().val().split(',').map(s => s.trim()).filter(Boolean),
  2493.     mainCaptionHtml: getMainCaptionHtmlTextArea().val(),
  2494.   };
  2495.   saveConfig(checkBoxStates);
  2496. };
  2497.  
  2498. const showPerplexityHelperSettingsModal = () => {
  2499.   loadCurrentConfigToSettingsForm();
  2500.   getPerplexityHelperModal().show().css('display', 'flex');
  2501. }
  2502.  
  2503. const hidePerplexityHelperSettingsModal = () => {
  2504.   getPerplexityHelperModal().hide();
  2505. }
  2506.  
  2507. const handleTopSettingsButtonInsertion = () => {
  2508.   const copilotHelperSettings = getTopSettingsButtonEl();
  2509.   // TODO: no longer works
  2510.   // debugLog('upperControls().length > 0', upperControls().length, 'copilotHelperSettings.length', copilotHelperSettings.length, 'upperControls().children().length', upperControls().children().length);
  2511.   if (upperControls().length > 0 && copilotHelperSettings.length < 1 && upperControls().children().length >= 1) {
  2512.     debugLog('inserting settings button');
  2513.     upperControls().children().eq(0).children().eq(0).append(upperButton(topSettingsButtonId, cogIco, 'Perplexity Helper Settings'));
  2514.   }
  2515. };
  2516.  
  2517. const handleTopSettingsButtonSetup = () => {
  2518.   const settingsButtonEl = getTopSettingsButtonEl();
  2519.  
  2520.   if (settingsButtonEl.length === 1 && !settingsButtonEl.attr('data-has-custom-click-event')) {
  2521.     debugLog('handleTopSettingsButtonSetup: setting up the button');
  2522.     if (settingsButtonEl.length === 0) {
  2523.       debugLog('handleTopSettingsButtonSetup: settingsButtonEl.length === 0');
  2524.     }
  2525.  
  2526.     settingsButtonEl.on("click", () => {
  2527.       debugLog('perplexity_helper_settings open click');
  2528.       showPerplexityHelperSettingsModal();
  2529.     });
  2530.  
  2531.     settingsButtonEl.attr('data-has-custom-click-event', true);
  2532.   }
  2533. };
  2534.  
  2535. const applySideMenuHiding = () => {
  2536.   const sideMenu = getSideMenu();
  2537.   if (getSavedStates()) getSavedStates().hideSideMenu || getHideSideMenuCheckbox().prop('checked') ? sideMenu.hide() : sideMenu.show();
  2538. };
  2539.  
  2540. const handleModalCreation = () => {
  2541.   if (getPerplexityHelperModal().length > 0) return;
  2542.   debugLog('handleModalCreation: creating modal');
  2543.   jq("body").append(modalHTML);
  2544.  
  2545.   getPerplexityHelperModal().find('.close').on('click', () => {
  2546.     debugLog('perplexity_helper_settings close  click');
  2547.     hidePerplexityHelperSettingsModal();
  2548.   });
  2549. };
  2550.  
  2551. const lucideIconMappings = {
  2552.   LUCIDE1: leftPanelIconMappingsToLucide1,
  2553.   LUCIDE2: leftPanelIconMappingsToLucide2,
  2554. };
  2555.  
  2556. const findKeyByValue = (obj, value) => 
  2557.   Object.keys(obj).find(key => obj[key] === value);
  2558.  
  2559. const SUPPORTED_ICON_REPLACEMENT_MODES = [
  2560.   ICON_REPLACEMENT_MODE.LUCIDE1, 
  2561.   ICON_REPLACEMENT_MODE.LUCIDE2, 
  2562.   ICON_REPLACEMENT_MODE.LUCIDE3,
  2563.   ICON_REPLACEMENT_MODE.TDESIGN1,
  2564.   ICON_REPLACEMENT_MODE.TDESIGN2,
  2565.   ICON_REPLACEMENT_MODE.TDESIGN3,
  2566. ];
  2567.  
  2568. const replaceIconsInMenu = () => {
  2569.   const config = loadConfigOrDefault();
  2570.   const replacementMode = findKeyByValue(ICON_REPLACEMENT_MODE, config.replaceIconsInMenu);
  2571.  
  2572.   if (SUPPORTED_ICON_REPLACEMENT_MODES.includes(config.replaceIconsInMenu)) {
  2573.     const processedAttr = `data-${pplxHelperTag}-processed`;
  2574.     const iconMapping = iconMappings[replacementMode];
  2575.     if (!iconMapping) {
  2576.       console.error(logPrefix, '[replaceIconsInMenu] iconMapping not found', { config, iconMappings });
  2577.       return;
  2578.     }
  2579.  
  2580.     const svgEls = PP.getIconsInLeftPanel().find('svg[data-icon]');
  2581.     // debugLog('[replaceIconsInMenu] svgEls', svgEls);
  2582.     svgEls.each((_, svgEl) => {
  2583.       const $svg = jq(svgEl);
  2584.       const processed = $svg.attr(processedAttr);
  2585.       if (processed) return;
  2586.  
  2587.       const iconName = $svg.attr('data-icon');
  2588.       debugLog('[replaceIconsInMenu] iconName', iconName);
  2589.       const replacementIconName = iconMapping[iconName];
  2590.       debugLog('[replaceIconsInMenu] replacementIconName', replacementIconName);
  2591.  
  2592.       $svg.attr(processedAttr, true);
  2593.       
  2594.       if (replacementIconName) {
  2595.         const isTDesign = config.replaceIconsInMenu.startsWith('TDesign');
  2596.         const newIconUrl = (isTDesign ? getTDesignIconUrl : getLucideIconUrl)(replacementIconName);
  2597.  
  2598.         debugLog('[replaceIconsInMenu] replacing icon', { iconName, replacementIconName, svgEl, newIconUrl });
  2599.         $svg.hide();
  2600.         const newIconEl = jq('<img>').attr('src', newIconUrl).addClass('invert opacity-50');
  2601.         if (isTDesign) newIconEl.addClass('h-6');
  2602.         $svg.parent().addClass(lucideIconParentCls);
  2603.         $svg.after(newIconEl);
  2604.       } else {
  2605.         if (!['plus', 'thread'].includes(iconName)) {
  2606.           console.error('[replaceIconsInMenu] no replacement icon found', { iconName, replacementIconName });
  2607.         }
  2608.       }
  2609.     });
  2610.   }
  2611. };
  2612.  
  2613. const handleLeftSettingsButtonSetup = () => {
  2614.   const existingLeftSettingsButton = getLeftSettingsButtonEl();
  2615.   if (existingLeftSettingsButton.length === 1) {
  2616.     const wrapper = existingLeftSettingsButton.parent();
  2617.     if (!wrapper.is(':last-child')) {
  2618.       wrapper.appendTo(wrapper.parent());
  2619.     }
  2620.     return;
  2621.   }
  2622.  
  2623.   const leftPanel = PP.getIconsInLeftPanel();
  2624.  
  2625.   if (leftPanel.length === 0) {
  2626.     debugLog('handleLeftSettingsButtonSetup: leftPanel not found');
  2627.   }
  2628.  
  2629.   const wrapperEl = jq('<div>').attr('id', leftSettingsButtonWrapperId);
  2630.   const iconEl = jq(cogIco);
  2631.  
  2632.   const btnEl = jq('<button>')
  2633.     .attr('id', leftSettingsButtonId)
  2634.     .attr('title', 'Perplexity Helper Settings')
  2635.     .addClass('text-textOff dark:text-textOffDark font-sans text-xs flex items-center gap-x-sm')
  2636.     .addClass('md:hover:bg-offsetPlus text-textOff dark:text-textOffDark md:hover:text-textMain dark:md:hover:bg-offsetPlusDark  dark:md:hover:text-textMainDark 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-sm px-sm font-medium h-8')
  2637.     .append(iconEl)
  2638.     .append(jq('<span>').text('Perplexity Helper'))
  2639.   ;
  2640.   btnEl.on('click', () => {
  2641.     debugLog('left settings button clicked');
  2642.     showPerplexityHelperSettingsModal();
  2643.   });
  2644.   wrapperEl.append(btnEl);
  2645.   leftPanel.append(wrapperEl);
  2646. }
  2647.  
  2648. const handleSlimLeftMenu = () => {
  2649.   const config = loadConfigOrDefault();
  2650.   if (!config.slimLeftMenu) return;
  2651.  
  2652.   const leftPanel = PP.getLeftPanel();
  2653.   if (leftPanel.length === 0) {
  2654.     debugLog('handleSlimLeftMenu: leftPanel not found');
  2655.   }
  2656.   if (leftPanel.length !== 1) {
  2657.     console.warn(logPrefix, '[handleSlimLeftMenu] too many leftPanel found', leftPanel);
  2658.   }
  2659.  
  2660.   leftPanel.addClass(leftPanelSlimCls);
  2661. };
  2662.  
  2663. const handleHideHomeWidgets = () => {
  2664.   const config = loadConfigOrDefault();
  2665.   if (!config.hideHomeWidgets) return;
  2666.  
  2667.   const homeWidgets = PP.getHomeWidgets();
  2668.   if (homeWidgets.length === 0) {
  2669.     debugLog('handleHideHomeWidgets: homeWidgets not found');
  2670.     return;
  2671.   }
  2672.   if (homeWidgets.length > 1) {
  2673.     console.warn(logPrefix, '[handleHideHomeWidgets] too many homeWidgets found', homeWidgets);
  2674.   }
  2675.  
  2676.   homeWidgets.hide();
  2677. };
  2678.  
  2679. const handleFixImageGenerationOverlay = () => {
  2680.   const config = loadConfigOrDefault();
  2681.   if (!config.fixImageGenerationOverlay) return;
  2682.  
  2683.   const imageGenerationOverlay = PP.getImageGenerationOverlay();
  2684.   if (imageGenerationOverlay.length === 0) {
  2685.     // debugLog('handleFixImageGenerationOverlay: imageGenerationOverlay not found');
  2686.     return;
  2687.   }
  2688.  
  2689.   // only if wrench button is cyan (we are in custom prompt)
  2690.   if (!imageGenerationOverlay.find('button').hasClass('bg-super')) return;
  2691.  
  2692.   const transform = imageGenerationOverlay.css('transform');
  2693.   if (!transform) return;
  2694.   
  2695.   // Handle both matrix and translate formats
  2696.   const matrixMatch = transform.match(/matrix\(.*,\s*([\d.]+),\s*([\d.]+)\)/);
  2697.   const translateMatch = transform.match(/translate\(([\d.]+)px(?:,\s*([\d.]+)px)?\)/);
  2698.   
  2699.   const currentX = matrixMatch 
  2700.     ? matrixMatch[1]  // Matrix format: 5th value is X translation
  2701.     : translateMatch?.[1] || 0;  // Translate format: first value
  2702.   
  2703.   debugLog('[handleFixImageGenerationOverlay] currentX', currentX, 'transform', transform);
  2704.   imageGenerationOverlay.css({
  2705.     transform: `translate(${currentX}px, 0px)`
  2706.   });
  2707. };
  2708.  
  2709. const handleExtraSpaceBellowLastAnswer = () => {
  2710.   const config = loadConfigOrDefault();
  2711.   if (!config.extraSpaceBellowLastAnswer) return;
  2712.   jq('body')
  2713.     .find(`.erp-tab\\:rounded-none > .max-w-screen > .scrollable-container > .mx-auto > .mx-auto > .relative > div > div.bottom-mobileNavHeight`)
  2714.     .prev()
  2715.     .css({
  2716.       // backgroundColor: 'magenta',
  2717.       paddingBottom: '15em'
  2718.     })
  2719.   ;
  2720. };
  2721.  
  2722. const handleSearchPage = () => {
  2723.   const controlsArea = getCurrentControlsArea();
  2724.   controlsArea.addClass(controlsAreaCls);
  2725.   controlsArea.parent().find('textarea').first().addClass(textAreaCls);
  2726.   controlsArea.addClass(roundedMD);
  2727.   controlsArea.parent().addClass(roundedMD);
  2728.  
  2729.  
  2730.   if (controlsArea.length === 0) {
  2731.     debugLog('controlsArea not found', {
  2732.       controlsArea,
  2733.       currentControlsArea: getCurrentControlsArea(),
  2734.       isStandardControlsAreaFc: isStandardControlsAreaFc()
  2735.     });
  2736.   }
  2737.  
  2738.   const lastQueryBoxText = getLastQuery();
  2739.  
  2740.   const mainTextArea = isStandardControlsAreaFc() ? controlsArea.prev().prev() : controlsArea.parent().prev();
  2741.  
  2742.   if (mainTextArea.length === 0) {
  2743.     debugLog('mainTextArea not found', mainTextArea);
  2744.   }
  2745.  
  2746.  
  2747.   debugLog('lastQueryBoxText', { lastQueryBoxText });
  2748.   if (lastQueryBoxText) {
  2749.     const copilotNewThread = getCopilotNewThreadButton();
  2750.     const copilotRepeatLast = getCopilotRepeatLastButton();
  2751.  
  2752.     if (controlsArea.length > 0 && copilotNewThread.length < 1) {
  2753.       controlsArea.append(button('copilot_new_thread', robotIco, "Starts new thread for with last query text and Copilot ON", standardButtonCls));
  2754.     }
  2755.  
  2756.     // Due to updates in Perplexity, this is unnecessary for now
  2757.     // if (controlsArea.length > 0 && copilotRepeatLast.length < 1) {
  2758.     //   controlsArea.append(button('copilot_repeat_last', robotRepeatIco, "Repeats last query with Copilot ON"));
  2759.     // }
  2760.  
  2761.     if (!copilotNewThread.attr('data-has-custom-click-event')) {
  2762.       copilotNewThread.on("click", function () {
  2763.         debugLog('copilotNewThread Button clicked!');
  2764.         openNewThreadModal(getLastQuery());
  2765.       });
  2766.       copilotNewThread.attr('data-has-custom-click-event', true);
  2767.     }
  2768.  
  2769.     if (!copilotRepeatLast.attr('data-has-custom-click-event')) {
  2770.       copilotRepeatLast.on("click", function () {
  2771.         const controlsArea = getCurrentControlsArea();
  2772.         const textAreaElement = controlsArea.parent().find('textarea')[0];
  2773.  
  2774.         const coPilotRepeatLastAutoSubmit =
  2775.           getSavedStates()
  2776.             ? getSavedStates().coPilotRepeatLastAutoSubmit
  2777.             : getCoPilotRepeatLastAutoSubmitCheckbox().prop('checked');
  2778.  
  2779.         debugLog('coPilotRepeatLastAutoSubmit', coPilotRepeatLastAutoSubmit);
  2780.         changeValueUsingEvent(textAreaElement, getLastQuery());
  2781.         const copilotToggleButton = getCopilotToggleButton(mainTextArea);
  2782.         debugLog('mainTextArea', mainTextArea);
  2783.         debugLog('copilotToggleButton', copilotToggleButton);
  2784.  
  2785.         toggleBtnDot(copilotToggleButton, true);
  2786.         const isCopilotOnBtn = () => isCopilotOn(copilotToggleButton);
  2787.  
  2788.         const copilotCheck = () => {
  2789.           const ctx = { timer: null };
  2790.           ctx.timer = setInterval(() => checkForCopilotToggleState(ctx.timer, isCopilotOnBtn, coPilotRepeatLastAutoSubmit, 0), 500);
  2791.         };
  2792.  
  2793.         copilotCheck();
  2794.         debugLog('copilot_repeat_last Button clicked!');
  2795.       });
  2796.       copilotRepeatLast.attr('data-has-custom-click-event', true);
  2797.     }
  2798.   }
  2799.  
  2800.   if (getNumberOfDashedSVGs() > 0 && getNumberOfDashedSVGs() === getDashedCheckboxButton().length
  2801.     && getSelectAllButton().length < 1 && getSelectAllAndSubmitButton().length < 1) {
  2802.     debugLog('getNumberOfDashedSVGs() === getNumberOfDashedSVGs()', getNumberOfDashedSVGs());
  2803.     debugLog('getSpecifyQuestionBox', getSpecifyQuestionBox());
  2804.  
  2805.     const specifyQuestionControlsWrapper = getSpecifyQuestionControlsWrapper();
  2806.     debugLog('specifyQuestionControlsWrapper', specifyQuestionControlsWrapper);
  2807.     const selectAllButton = textButton('perplexity_helper_select_all', 'Select all', 'Selects all options');
  2808.     const selectAllAndSubmitButton = textButton('perplexity_helper_select_all_and_submit', 'Select all & submit', 'Selects all options and submits');
  2809.  
  2810.     specifyQuestionControlsWrapper.append(selectAllButton);
  2811.     specifyQuestionControlsWrapper.append(selectAllAndSubmitButton);
  2812.  
  2813.     getSelectAllButton().on("click", function () {
  2814.       selectAllCheckboxes();
  2815.     });
  2816.  
  2817.     getSelectAllAndSubmitButton().on("click", function () {
  2818.       selectAllCheckboxes();
  2819.       setTimeout(() => {
  2820.         getSpecifyQuestionControlsWrapper().find('button:contains("Continue")').click();
  2821.       }, 200);
  2822.     });
  2823.   }
  2824.  
  2825.   const constructClipBoard = (buttonId, buttonGetter, modalGetter, copiedModalId, elementGetter) => {
  2826.     const placeholderValue = getSpecifyQuestionBox().find('textarea').attr('placeholder');
  2827.  
  2828.     const clipboardInstance = new ClipboardJS(`#${buttonId}`, {
  2829.       text: () => placeholderValue
  2830.     });
  2831.  
  2832.     const copiedModal = `<span id="${copiedModalId}">Copied!</span>`;
  2833.     debugLog('copiedModalId', copiedModalId);
  2834.     debugLog('copiedModal', copiedModal);
  2835.  
  2836.     jq('main').append(copiedModal);
  2837.  
  2838.     clipboardInstance.on('success', _ => {
  2839.       var buttonPosition = buttonGetter().position();
  2840.       jq(`#${copiedModalId}`).css({
  2841.         top: buttonPosition.top - 30,
  2842.         left: buttonPosition.left + 50
  2843.       }).show();
  2844.  
  2845.       if (elementGetter !== undefined) {
  2846.         changeValueUsingEvent(elementGetter()[0], placeholderValue);
  2847.       }
  2848.  
  2849.       setTimeout(() => {
  2850.         modalGetter().hide();
  2851.       }, 5000);
  2852.     });
  2853.   };
  2854.  
  2855.   if (questionBoxWithPlaceholderExists() && getCopyPlaceholder().length < 1) {
  2856.     const copyPlaceholder = textButton('perplexity_helper_copy_placeholder', 'Copy placeholder', 'Copies placeholder value');
  2857.     const copyPlaceholderAndFillIn = textButton('perplexity_helper_copy_placeholder_and_fill_in', 'Copy placeholder and fill in',
  2858.       'Copies placeholder value and fills in input');
  2859.  
  2860.     const specifyQuestionControlsWrapper = getSpecifyQuestionControlsWrapper();
  2861.  
  2862.     specifyQuestionControlsWrapper.append(copyPlaceholder);
  2863.     specifyQuestionControlsWrapper.append(copyPlaceholderAndFillIn);
  2864.  
  2865.     constructClipBoard('perplexity_helper_copy_placeholder', getCopyPlaceholder, getCopiedModal, 'copied-modal');
  2866.     constructClipBoard('perplexity_helper_copy_placeholder_and_fill_in', getCopyAndFillInPlaceholder, getCopiedModal2, 'copied-modal-2', getCopyPlaceholderInput);
  2867.   }
  2868. }
  2869.  
  2870. const getLabelFromModelDescription = modelLabelStyle => modelLabelFromAriaLabel => modelDescription => {
  2871.   if (!modelDescription) return modelLabelFromAriaLabel;
  2872.   switch (modelLabelStyle) {
  2873.   case MODEL_LABEL_TEXT_MODE.FULL_NAME:
  2874.     return modelDescription.nameEn;
  2875.   case MODEL_LABEL_TEXT_MODE.SHORT_NAME:
  2876.     return modelDescription.nameEnShort ?? modelDescription.nameEn;
  2877.   case MODEL_LABEL_TEXT_MODE.PP_MODEL_ID:
  2878.     return modelDescription.ppModelId;
  2879.   case MODEL_LABEL_TEXT_MODE.OWN_NAME_VERSION_SHORT:
  2880.     const nameText = modelDescription.ownNameEn ?? modelDescription.nameEn;
  2881.     const versionText = modelDescription.ownVersionEnShort ?? modelDescription.ownVersionEn;
  2882.     return [nameText, versionText].filter(Boolean).join(modelDescription.ownNameVersionSeparator ?? ' ');
  2883.   default:
  2884.     throw new Error(`Unknown model label style: ${modelLabelStyle}`);
  2885.   }
  2886. }
  2887.  
  2888. const getExtraClassesFromModelLabelStyle = modelLabelStyle => {
  2889.   switch (modelLabelStyle) {
  2890.   case MODEL_LABEL_STYLE.BUTTON_SUBTLE:
  2891.     return modelLabelStyleButtonSubtleCls;
  2892.   case MODEL_LABEL_STYLE.BUTTON_WHITE:
  2893.     return modelLabelStyleButtonWhiteCls;
  2894.   case MODEL_LABEL_STYLE.BUTTON_CYAN:
  2895.     return modelLabelStyleButtonCyanCls;
  2896.   default:
  2897.     return '';
  2898.   }
  2899. }
  2900. const handleModelLabel = () => {
  2901.   const config = loadConfigOrDefault();
  2902.   if (!config.modelLabelStyle || config.modelLabelStyle === MODEL_LABEL_STYLE.OFF) return;
  2903.  
  2904.   const $modelIcons = PP.getAnyModelButton();
  2905.   $modelIcons.each((_, el) => {
  2906.     const $el = jq(el);
  2907.     if (!$el.find(`.${modelLabelCls}`).length) {
  2908.       $el.prepend(jq(`<span class="${modelLabelCls}"></span>`));
  2909.     }
  2910.     if (!$el.hasClass(modelIconButtonCls)) {
  2911.       $el.addClass(modelIconButtonCls);
  2912.     }
  2913.     const $label = $el.find(`.${modelLabelCls}`);
  2914.     const modelDescription = PP.getModelDescriptionFromModelButton($el);
  2915.     const modelLabelFromAriaLabel = $el.attr('aria-label');
  2916.     const modelLabel = getLabelFromModelDescription(config.modelLabelTextMode)(modelLabelFromAriaLabel)(modelDescription);
  2917.     if (!modelLabel) {
  2918.       console.error('[handleModelLabel] modelLabel is null', { modelDescription, modelLabelFromAriaLabel, $el });
  2919.       return;
  2920.     }
  2921.     const extraClasses = [
  2922.       getExtraClassesFromModelLabelStyle(config.modelLabelStyle),
  2923.       config.modelLabelOverwriteCyanIconToGray ? modelLabelOverwriteCyanIconToGrayCls : '',
  2924.     ].filter(Boolean).join(' ');
  2925.     $label.attr('data-extra-classes', extraClasses);
  2926.     if ($label.text() !== modelLabel) {
  2927.       $label.attr('data-model-description', JSON.stringify(modelDescription));
  2928.       $label.text(modelLabel);
  2929.       $label.addClass(extraClasses);
  2930.     }
  2931.     if (config.modelLabelUseIconForReasoningModels) {
  2932.       if ($el.find(`.${reasoningModelCls}`).length === 0) {
  2933.         const iconUrl = getLucideIconUrl('lightbulb');
  2934.         const $icon = jq(`<img src="${iconUrl}" alt="Reasoning model" class="${reasoningModelCls}" />`);
  2935.         if (config.modelLabelReasoningModelIconGold) {
  2936.           $icon.addClass(iconColorGoldCls);
  2937.         }
  2938.         $el.prepend($icon);
  2939.       }
  2940.       const $reasoningModelIcon = $el.find(`.${reasoningModelCls}`);
  2941.       const isReasoning = modelDescription?.modelType === 'reasoning';
  2942.       if (isReasoning) {
  2943.         $reasoningModelIcon.css({display: 'inline-block'});
  2944.         $label.css({padding:  '3px 8px 0 0'});
  2945.         if (config.modelLabelStyle === MODEL_LABEL_STYLE.JUST_TEXT) {
  2946.           $reasoningModelIcon.addClass(iconColorGrayCls);
  2947.         } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_CYAN) {
  2948.           $reasoningModelIcon.addClass(iconColorCyanCls);
  2949.         } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_SUBTLE) {
  2950.           $reasoningModelIcon.addClass(iconColorGrayCls);
  2951.         } else if (config.modelLabelStyle === MODEL_LABEL_STYLE.BUTTON_WHITE) {
  2952.           $reasoningModelIcon.addClass(iconColorWhiteCls);
  2953.         }
  2954.       } else {
  2955.         $reasoningModelIcon.remove();
  2956.         $label.css({padding:  '3px 6px 0 10px'});
  2957.       }
  2958.     }
  2959.   });
  2960. }
  2961.  
  2962. const handleHideDiscoverButton = () => {
  2963.   const config = loadConfigOrDefault();
  2964.   if (!config.hideDiscoverButton) return;
  2965.   const $iconsInLeftPanel = PP.getIconsInLeftPanel().find('div.space-y-xs.flex-1:has(a[href="/discover"])').children().eq(1);
  2966.   $iconsInLeftPanel.hide();
  2967. }
  2968.  
  2969. const handleCustomModelPopover = () => {
  2970.   const config = loadConfigOrDefault();
  2971.   if (!config.customModelPopover) return;
  2972.  
  2973.   const $modelSelectionList = PP.getModelSelectionList();
  2974.   if ($modelSelectionList.length === 0) return;
  2975.   const processedAttr = 'ph-processed-custom-model-popover';
  2976.   if ($modelSelectionList.attr(processedAttr)) return;
  2977.   $modelSelectionList.attr(processedAttr, true);
  2978.   $modelSelectionList.nthParent(2).css({maxHeight: 'initial'});
  2979.   $modelSelectionList.css({
  2980.     display: 'grid',
  2981.     gridTemplateColumns: '1fr 1fr',
  2982.     gap: '10px',
  2983.     'grid-auto-rows': 'min-content',
  2984.   });
  2985.  
  2986.   // Place items in first column
  2987.   $modelSelectionList.children(":nth-child(3)").css("grid-area", "1 / 1");
  2988.   $modelSelectionList.children(":nth-child(4)").css("grid-area", "2 / 1");
  2989.   $modelSelectionList.children(":nth-child(5)").css("grid-area", "3 / 1");
  2990.   $modelSelectionList.children(":nth-child(6)").css("grid-area", "4 / 1");
  2991.  
  2992.   // Place items in second column
  2993.   $modelSelectionList.children(":nth-child(8)").css("grid-area", "1 / 2");
  2994.   $modelSelectionList.children(":nth-child(9)").css("grid-area", "2 / 2");
  2995.   $modelSelectionList.children(":nth-child(10)").css("grid-area", "3 / 2");
  2996.   $modelSelectionList.children(":nth-child(11)").css("grid-area", "4 / 2");
  2997.   // $modelSelectionList.children(":nth-child(2)").css("grid-area", "5 / 2");
  2998.   $modelSelectionList.children(":nth-child(1)").css("grid-area", "5 / 2").css("border-top", "1px solid #343637");
  2999.  
  3000.   $modelSelectionList.children(":nth-child(2)").css("display", "none");
  3001. }
  3002.  
  3003. const mainCaptionAppliedCls = genCssName('mainCaptionApplied');
  3004. const handleMainCaptionHtml = () => {
  3005.   const config = loadConfigOrDefault();
  3006.   if (!config.mainCaptionHtml) return;
  3007.   if (PP.getMainCaption().hasClass(mainCaptionAppliedCls)) return;
  3008.   PP.setMainCaptionHtml(config.mainCaptionHtml);
  3009.   PP.getMainCaption().addClass(mainCaptionAppliedCls);
  3010. }
  3011.  
  3012. const work = () => {
  3013.   handleModalCreation();
  3014.   handleTopSettingsButtonInsertion();
  3015.   handleTopSettingsButtonSetup();
  3016.   handleSettingsInit();
  3017.   handleLeftSettingsButtonSetup();
  3018.   handleSlimLeftMenu();
  3019.   handleHideHomeWidgets();
  3020.   handleExtraSpaceBellowLastAnswer();
  3021.   applySideMenuHiding();
  3022.   replaceIconsInMenu();
  3023.   handleModelLabel();
  3024.   handleHideDiscoverButton();
  3025.   handleCustomModelPopover();
  3026.   handleMainCaptionHtml();
  3027.   const regex = /^https:\/\/www\.perplexity\.ai\/search\/?.*/;
  3028.   const currentUrl = jq(location).attr('href');
  3029.   const matchedCurrentUrlAsSearchPage = regex.test(currentUrl);
  3030.  
  3031.   // debugLog("currentUrl", currentUrl);
  3032.   // debugLog("matchedCurrentUrlAsSearchPage", matchedCurrentUrlAsSearchPage);
  3033.  
  3034.   if (matchedCurrentUrlAsSearchPage) {
  3035.     handleSearchPage();
  3036.   }
  3037. };
  3038.  
  3039. const fontUrls = {
  3040.   Roboto: 'https://fonts.cdnfonts.com/css/roboto',
  3041.   Montserrat: 'https://fonts.cdnfonts.com/css/montserrat',
  3042.   Lato: 'https://fonts.cdnfonts.com/css/lato',
  3043.   Oswald: 'https://fonts.cdnfonts.com/css/oswald-4',
  3044.   Raleway: 'https://fonts.cdnfonts.com/css/raleway-5',
  3045.   'Ubuntu Mono': 'https://fonts.cdnfonts.com/css/ubuntu-mono',
  3046.   Nunito: 'https://fonts.cdnfonts.com/css/nunito',
  3047.   Poppins: 'https://fonts.cdnfonts.com/css/poppins',
  3048.   'Playfair Display': 'https://fonts.cdnfonts.com/css/playfair-display',
  3049.   Merriweather: 'https://fonts.cdnfonts.com/css/merriweather',
  3050.   'Fira Sans': 'https://fonts.cdnfonts.com/css/fira-sans',
  3051.   Quicksand: 'https://fonts.cdnfonts.com/css/quicksand',
  3052.   Comfortaa: 'https://fonts.cdnfonts.com/css/comfortaa-3',
  3053.   'Almendra': 'https://fonts.cdnfonts.com/css/almendra',
  3054.   'Enchanted Land': 'https://fonts.cdnfonts.com/css/enchanted-land',
  3055.   'Cinzel Decorative': 'https://fonts.cdnfonts.com/css/cinzel-decorative',
  3056.   'Orbitron': 'https://fonts.cdnfonts.com/css/orbitron',
  3057.   'Exo 2': 'https://fonts.cdnfonts.com/css/exo-2',
  3058.   'Chakra Petch': 'https://fonts.cdnfonts.com/css/chakra-petch',
  3059.   'Open Sans Condensed': 'https://fonts.cdnfonts.com/css/open-sans-condensed',
  3060.   'Saira Condensed': 'https://fonts.cdnfonts.com/css/saira-condensed',
  3061.   Inter: 'https://cdn.jsdelivr.net/npm/@fontsource/inter@4.5.0/index.min.css',
  3062. };
  3063.  
  3064. const loadFont = (fontName) => {
  3065.   const fontUrl = fontUrls[fontName];
  3066.   debugLog('loadFont', { fontName, fontUrl });
  3067.   if (fontUrl) {
  3068.     const link = document.createElement('link');
  3069.     link.rel = 'stylesheet';
  3070.     link.href = fontUrl;
  3071.     document.head.appendChild(link);
  3072.   }
  3073. };
  3074.  
  3075. const setupFixImageGenerationOverlay = () => {
  3076.   const config = loadConfigOrDefault();
  3077.   if (config.fixImageGenerationOverlay) {
  3078.     setInterval(handleFixImageGenerationOverlay, 250);
  3079.   }
  3080. };
  3081.  
  3082. (function () {
  3083.   if (loadConfigOrDefault()?.enableDebug) {
  3084.     enableDebugMode();
  3085.   }
  3086.  
  3087.   debugLog('TAGS_PALETTES', TAGS_PALETTES);
  3088.   if (loadConfigOrDefault()?.debugTagsMode) {
  3089.     enableTagsDebugging();
  3090.   }
  3091.  
  3092.   'use strict';
  3093.   jq("head").append(`<style>${styles}</style>`);
  3094.  
  3095.   setupTags();
  3096.   setupFixImageGenerationOverlay();
  3097.  
  3098.   const mainInterval = setInterval(work, 1000);
  3099.   window.ph = {
  3100.     stopWork: () => { clearInterval(mainInterval); },
  3101.     work,
  3102.     jq,
  3103.     showPerplexityHelperSettingsModal,
  3104.     enableTagsDebugging: () => { debugTags = true; },
  3105.     disableTagsDebugging: () => { debugTags = false; },
  3106.   }
  3107.  
  3108.   loadFont(loadConfigOrDefault().tagFont);
  3109.  
  3110.   console.log(`%c${userscriptName}%c\n  %cTiartyos%c & %cmonnef%c\n ... loaded`,
  3111.     'color: #aaffaa; font-size: 1.5rem; background-color: rgba(0, 0, 0, 0.5); padding: 2px;', 
  3112.     '', 
  3113.     'color: #6b02ff; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); padding: 2px;', 
  3114.     '', 
  3115.     'color: #aa2cc3; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); padding: 2px;', 
  3116.     '',
  3117.     '');
  3118. }());

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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