')
.addClass(promptAreaKeyListenerIndicatorCls)
.attr('title', 'Toggle tags active - Press Enter to submit');
$textarea.after($indicator);
// Force a reflow then add visible class for animation
$indicator[0].offsetHeight; // Force reflow
$indicator.addClass('visible');
}
} else {
// Remove the class with transition for fade out
if (currentlyHasClass) {
$textarea.removeClass(promptAreaKeyListenerCls);
}
// For indicator, first make it invisible with transition, then remove from DOM
if (currentlyHasIndicator) {
const $indicator = $textarea.siblings(`.${promptAreaKeyListenerIndicatorCls}`);
$indicator.removeClass('visible');
// Remove from DOM after transition completes
setTimeout(() => {
if ($indicator.length) $indicator.remove();
}, 500); // Match the transition duration in CSS
}
}
}
};
const updateToggleIndicators = () => {
const config = loadConfigOrDefault();
// Track state changes with this object for debugging
const debugStateChanges = {
totalButtons: 0,
unchanged: 0,
titleChanged: 0,
activeStateChanged: 0,
stateChanges: []
};
// Update all enhanced submit buttons individually
jq(`.${enhancedSubmitButtonCls}`).each((idx, btn) => {
const $btn = jq(btn);
const $originalBtn = $btn.parent();
const btnId = $btn.attr('id') || `btn-${idx}`;
debugStateChanges.totalButtons++;
// Find the proper prompt area wrapper, going up to queryBox class first
const $queryBox = $originalBtn.closest(`.${queryBoxCls}`);
const $wrapper = $queryBox.length
? $queryBox.parent()
: $originalBtn.closest('.flex').parent().parent().parent();
// DEBUGGING - Track button's wrapper
const wrapperId = $wrapper && $wrapper.length ? ($wrapper.attr('id') || 'wrapper-' + Math.random().toString(36).substring(2, 9)) : 'no-wrapper';
if (loadConfigOrDefault().debugTagsMode) {
debugLogTags(`updateToggleIndicators - Button ${btnId} in wrapper ${wrapperId}`);
}
const hasActiveInContext = hasActiveToggledTagsForCurrentContext($wrapper);
const activeTagLabels = getActiveToggledTagLabels($wrapper);
const title = activeTagLabels
? `Submit with toggled tags applied (${activeTagLabels})`
: 'Submit with toggled tags applied';
// Get current state to avoid unnecessary DOM updates
// ISSUE: using hard-coded 'active' class instead of generated enhancedSubmitButtonActiveCls
const isCurrentlyActive = $btn.hasClass('active');
const shouldBeActive = hasActiveInContext && config.tagToggleModeIndicators;
// DEBUG - Log the class mismatch
if (loadConfigOrDefault().debugTagsMode) {
const hasGeneratedClass = $btn.hasClass(enhancedSubmitButtonActiveCls);
if (isCurrentlyActive !== hasGeneratedClass) {
debugLogTags(`Class mismatch detected for ${btnId}: 'active'=${isCurrentlyActive}, '${enhancedSubmitButtonActiveCls}'=${hasGeneratedClass}`);
}
}
const currentTitle = $btn.attr('title');
// DEBUGGING - Track state for this button
const stateChange = {
btnId,
wrapperId,
isCurrentlyActive,
shouldBeActive,
stateChanged: isCurrentlyActive !== shouldBeActive,
titleChanged: currentTitle !== title
};
debugStateChanges.stateChanges.push(stateChange);
// Only update DOM elements if state has actually changed
if (isCurrentlyActive !== shouldBeActive || currentTitle !== title) {
// Update title if changed
if (currentTitle !== title) {
debugStateChanges.titleChanged++;
$btn.attr('title', title);
}
// Toggle active class with transition effect if state has changed
if (isCurrentlyActive !== shouldBeActive) {
debugStateChanges.activeStateChanged++;
// ISSUE: We're using literal 'active' here instead of enhancedSubmitButtonActiveCls
// This should be fixed to use the generated class, but we're just logging for now
// No additional class manipulation needed - CSS transitions handle the animation
$btn.toggleClass('active', shouldBeActive);
if (loadConfigOrDefault().debugTagsMode) {
debugLogTags(`Class toggle for ${btnId}: 'active' changed to ${shouldBeActive}, from ${isCurrentlyActive}`);
}
// If transitioning to active, ensure we have proper z-index to show over other elements
if (shouldBeActive) {
$originalBtn.css('z-index', '5');
} else {
// Reset z-index after transition
setTimeout(() => $originalBtn.css('z-index', ''), 500);
}
}
// Update outline only if debugging state requires it
$btn.css({ outline: config.debugTagsSuppressSubmit ? '5px solid red' : 'none' });
} else {
debugStateChanges.unchanged++;
}
});
// Log state change stats
if (loadConfigOrDefault().debugTagsMode) {
if (debugStateChanges.activeStateChanged > 0) {
debugLogTags(`updateToggleIndicators - SUMMARY: total=${debugStateChanges.totalButtons}, unchanged=${debugStateChanges.unchanged}, titleChanged=${debugStateChanges.titleChanged}, activeStateChanged=${debugStateChanges.activeStateChanged}`);
debugLogTags('updateToggleIndicators - State changes:', debugStateChanges.stateChanges.filter(sc => sc.stateChanged));
}
}
// Also update all textarea indicators when toggle mode hooks are enabled
if (config.toggleModeHooks) {
// Get all prompt areas with keypress listeners (both textarea and contenteditable divs)
const promptAreas = jq('textarea[data-toggle-keypress-listener="true"], div[contenteditable][data-toggle-keypress-listener="true"]');
if (promptAreas.length) {
promptAreas.each((_, promptArea) => {
updateTextareaIndicator(jq(promptArea));
});
}
}
};
// Function to reset all toggle states (both in-memory and saved if tagToggleSave is enabled)
const resetAllToggleStates = () => {
// Reset in-memory state
window._phTagToggleState = {};
// Reset saved state if tagToggleSave is enabled
const config = loadConfigOrDefault();
if (config.tagToggleSave && config.tagToggledStates) {
const updatedConfig = {
...config,
tagToggledStates: {}
};
saveConfig(updatedConfig);
}
// Update existing toggle tags directly in the DOM if possible
const existingToggledTags = jq(`.${tagCls}[data-toggled="true"]`);
if (existingToggledTags.length > 0) {
existingToggledTags.each((_, el) => {
const $el = jq(el);
const tagData = JSON.parse($el.attr('data-tag') || '{}');
if (tagData) {
// Reset visual state back to untoggled
updateToggleTagState($el, tagData, false);
}
});
} else {
// If we couldn't find any toggled tags in the DOM (perhaps they were added after),
// fall back to a full refresh
refreshTags({ force: true });
}
// Update indicators
updateToggleIndicators();
};
// Function to generate a consistent ID for toggle tags
const generateToggleTagId = tag => {
if (!tag.toggleMode) return null;
return `toggle:${(tag.label || '') + ':' + (tag.position || '') + ':' + (tag.color || '')}:${tag.originalIndex || 0}`;
};
const work = () => {
handleModalCreation();
handleTopSettingsButtonInsertion();
handleTopSettingsButtonSetup();
handleSettingsInit();
handleLeftSettingsButtonSetup();
handleExtraSpaceBellowLastAnswer();
handleHideDiscoverButton();
handleHideSideMenuLabels();
handleRemoveWhiteSpaceOnLeftOfThreadContent();
updateToggleIndicators();
patchSubmitButtonsForToggledTags();
handleQuickProfileButton();
handleRemoveAllUploadedFilesButton();
const regex = /^https:\/\/www\.perplexity\.ai\/search\/?.*/;
const currentUrl = jq(location).attr('href');
const matchedCurrentUrlAsSearchPage = regex.test(currentUrl);
// debugLog("currentUrl", currentUrl);
// debugLog("matchedCurrentUrlAsSearchPage", matchedCurrentUrlAsSearchPage);
if (matchedCurrentUrlAsSearchPage) {
handleSearchPage();
}
};
const fastWork = () => {
handleCustomModelPopover();
handleModelSelectionListItemsMax();
handleSlimLeftMenu();
handleHideHomeWidgets();
handleHideRelated();
handleHideUpgradeToMaxAds();
applySideMenuHiding();
handleReplaceIconsInMenu();
handleModelLabel();
handleMainCaptionHtml();
handleCustomJs();
handleCustomCss();
handleCustomWidgetsHtml();
};
// TODO: clean up, feels overly complex
const getFileBarScroller = ($context) => {
const hasClassToken = ($el, token) => {
const cls = ($el.attr('class') || '').toString();
// strict token check first
if (cls.split(/\s+/).includes(token)) return true;
// fallback contains check for utility classes like overflow-x-auto
return cls.includes(token);
};
const looksLikeScroller = ($el) => (
hasClassToken($el, 'flex') &&
(hasClassToken($el, 'overflow-x-auto') || hasClassToken($el, 'scroll-mx-md')) &&
(hasClassToken($el, 'snap-x') || $el.find('> div.snap-start').length > 0)
);
// Strategy A: derive from a known remove button
const $removeBtn = $context.find('button[data-testid="remove-uploaded-file"]').first();
if ($removeBtn.length) {
let $p = $removeBtn.parent();
for (let i = 0; i < 8 && $p && $p.length; i += 1) {
if (looksLikeScroller($p)) return $p;
$p = $p.parent();
}
}
// Strategy B: derive from a known file icon
const $icon = $context.find('[data-testid="file-type-icon"]').first();
if ($icon.length) {
let $p = $icon.parent();
for (let i = 0; i < 8 && $p && $p.length; i += 1) {
if (looksLikeScroller($p)) return $p;
$p = $p.parent();
}
}
// Strategy C: search ancestors
const $scope = $context.add($context.parents());
const $removeBtn2 = $scope.find('button[data-testid="remove-uploaded-file"]').first();
if ($removeBtn2.length) {
const $chip = $removeBtn2.closest('div.snap-start');
if ($chip.length) {
const $scroller = $chip.parent();
if ($scroller.length) return $scroller;
}
}
const $icon2 = $scope.find('[data-testid="file-type-icon"]').first();
if ($icon2.length) {
const $chip = $icon2.closest('div.snap-start');
if ($chip.length) {
const $scroller = $chip.parent();
if ($scroller.length) return $scroller;
}
}
// Strategy D: global fallback with class heuristics
const candidates = jq('div.flex, div.grid');
const filtered = candidates.filter((_, el) => {
const $el = jq(el);
if (!looksLikeScroller($el)) return false;
const hasChips = $el.find('div.snap-start [data-testid="file-type-icon"]').length > 0;
return hasChips;
});
if (filtered.length) return jq(filtered.get(0));
// Strategy E: global remove button/icon derivation
const $globalRemove = jq('button[data-testid="remove-uploaded-file"]').first();
if ($globalRemove.length) {
let $p = $globalRemove.parent();
for (let i = 0; i < 10 && $p && $p.length; i += 1) {
if (looksLikeScroller($p)) return $p;
$p = $p.parent();
}
}
const $globalIcon = jq('[data-testid="file-type-icon"]').first();
if ($globalIcon.length) {
let $p = $globalIcon.parent();
for (let i = 0; i < 10 && $p && $p.length; i += 1) {
if (looksLikeScroller($p)) return $p;
$p = $p.parent();
}
}
return jq();
};
const removeAllUploadedFilesInCurrentPromptArea = () => {
const $wrapper = PP.getAnyPromptAreaWrapper();
if (!$wrapper.length) return;
const $allRemoveButtons = $wrapper.find('button[data-testid="remove-uploaded-file"]');
// Click each existing remove button
$allRemoveButtons.each((_, el) => {
const $btn = jq(el);
// Attempt to click via DOM API to avoid jQuery preventing default
const dom = $btn.get(0);
if (dom) dom.click();
});
};
const ensureRemoveAllButtonIn = ($scroller) => {
console.log('ensureRemoveAllButtonIn', $scroller);
// If already wrapped and button exists, do nothing
if ($scroller.parent().find(`.${removeUploadedFilesAllButtonCls}`).length > 0) return;
const iconUrl = getLucideIconUrl('trash-2');
const $btn = jq('
')
.addClass(removeUploadedFilesAllButtonCls)
.attr('type', 'button')
.attr('title', 'Remove all uploaded files')
.append(jq('
![]()
').attr('src', iconUrl).css({ width: '14px', height: '14px', filter: 'invert(70%)' }));
$btn.on('click', (e) => {
e.preventDefault();
e.stopPropagation();
removeAllUploadedFilesInCurrentPromptArea();
});
const $wrapper = jq('
').addClass(removeUploadedFilesAllButtonWrapperCls);
$wrapper.append($btn);
$scroller.before($wrapper);
};
const DEBUG_REMOVE_ALL_UPLOADED_FILES_BUTTON = false;
const handleRemoveAllUploadedFilesButton = () => {
const logT = DEBUG_REMOVE_ALL_UPLOADED_FILES_BUTTON ? debugLogThrottled : () => {};
const config = loadConfigOrDefault();
logT('config', { showRemoveAllUploadedFilesButton: config.showRemoveAllUploadedFilesButton });
if (!config.showRemoveAllUploadedFilesButton) return;
const $area = PP.getAnyPromptArea();
logT('handleRemoveAllUploadedFilesButton', { $area });
if (!$area.length) return;
const $wrapper = PP.getAnyPromptAreaWrapper($area);
let $scroller = getFileBarScroller($wrapper);
if (!$scroller.length) {
$scroller = getFileBarScroller(jq('body'));
}
logT('handleRemoveAllUploadedFilesButton', { $scroller });
if (!$scroller || !$scroller.length) return;
ensureRemoveAllButtonIn($scroller);
};
const fontUrls = {
Roboto: 'https://fonts.cdnfonts.com/css/roboto',
Montserrat: 'https://fonts.cdnfonts.com/css/montserrat',
Lato: 'https://fonts.cdnfonts.com/css/lato',
Oswald: 'https://fonts.cdnfonts.com/css/oswald-4',
Raleway: 'https://fonts.cdnfonts.com/css/raleway-5',
'Ubuntu Mono': 'https://fonts.cdnfonts.com/css/ubuntu-mono',
Nunito: 'https://fonts.cdnfonts.com/css/nunito',
Poppins: 'https://fonts.cdnfonts.com/css/poppins',
'Playfair Display': 'https://fonts.cdnfonts.com/css/playfair-display',
Merriweather: 'https://fonts.cdnfonts.com/css/merriweather',
'Fira Sans': 'https://fonts.cdnfonts.com/css/fira-sans',
Quicksand: 'https://fonts.cdnfonts.com/css/quicksand',
Comfortaa: 'https://fonts.cdnfonts.com/css/comfortaa-3',
'Almendra': 'https://fonts.cdnfonts.com/css/almendra',
'Enchanted Land': 'https://fonts.cdnfonts.com/css/enchanted-land',
'Cinzel Decorative': 'https://fonts.cdnfonts.com/css/cinzel-decorative',
'Orbitron': 'https://fonts.cdnfonts.com/css/orbitron',
'Exo 2': 'https://fonts.cdnfonts.com/css/exo-2',
'Chakra Petch': 'https://fonts.cdnfonts.com/css/chakra-petch',
'Open Sans Condensed': 'https://fonts.cdnfonts.com/css/open-sans-condensed',
'Saira Condensed': 'https://fonts.cdnfonts.com/css/saira-condensed',
Inter: 'https://cdn.jsdelivr.net/npm/@fontsource/inter@4.5.0/index.min.css',
'JetBrains Mono': 'https://fonts.cdnfonts.com/css/jetbrains-mono',
};
const loadFont = (fontName) => {
const fontUrl = fontUrls[fontName];
debugLog('loadFont', { fontName, fontUrl });
if (fontUrl) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = fontUrl;
document.head.appendChild(link);
}
};
const setupFixImageGenerationOverlay = () => {
const config = loadConfigOrDefault();
if (config.fixImageGenerationOverlay) {
setInterval(handleFixImageGenerationOverlay, 250);
}
};
(function () {
if (loadConfigOrDefault()?.debugMode) {
enableDebugMode();
}
debugLog('TAGS_PALETTES', TAGS_PALETTES);
if (loadConfigOrDefault()?.debugTagsMode) {
enableTagsDebugging();
}
// Initialize in-memory toggle state from saved state if tagToggleSave is enabled
const config = loadConfigOrDefault();
if (config.tagToggleSave && config.tagToggledStates) {
window._phTagToggleState = { ...config.tagToggledStates };
debugLog('Initialized in-memory toggle state from saved state', window._phTagToggleState);
} else {
window._phTagToggleState = {};
}
'use strict';
jq("head").append(``);
setupTags();
setupFixImageGenerationOverlay();
initializePerplexityHelperHandlers();
const mainInterval = setInterval(work, 1000);
// This interval is too fast (100ms) which causes frequent DOM updates
// and leads to the class toggling issue with 'active' vs enhancedSubmitButtonActiveCls
const fastInterval = setInterval(fastWork, 100);
window.ph = {
stopWork: () => { clearInterval(mainInterval); clearInterval(fastInterval); },
work,
fastWork,
jq,
showPerplexityHelperSettingsModal,
removeAllUploadedFiles: () => removeAllUploadedFilesInCurrentPromptArea(),
enableTagsDebugging: () => { debugTags = true; },
disableTagsDebugging: () => { debugTags = false; },
leftMarginOfThreadContent: {
enable: () => {
leftMarginOfThreadContentOverride = true;
handleRemoveWhiteSpaceOnLeftOfThreadContent();
},
disable: () => {
leftMarginOfThreadContentOverride = false;
handleRemoveWhiteSpaceOnLeftOfThreadContent();
},
toggle: () => {
leftMarginOfThreadContentOverride = !leftMarginOfThreadContentOverride;
handleRemoveWhiteSpaceOnLeftOfThreadContent();
},
},
};
loadFont(loadConfigOrDefault().tagFont);
loadFont('JetBrains Mono');
// Auto open settings if enabled
if (loadConfigOrDefault()?.autoOpenSettings) {
// Use setTimeout to ensure the DOM is ready
setTimeout(() => {
showPerplexityHelperSettingsModal();
}, 1000);
}
console.log(`%c${userscriptName}%c\n %cTiartyos%c & %cmonnef%c\n ... loaded`,
'color: #aaffaa; font-size: 1.5rem; background-color: rgba(0, 0, 0, 0.5); padding: 2px;',
'',
'color: #6b02ff; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); padding: 2px;',
'',
'color: #aa2cc3; font-weight: bold; background-color: rgba(0, 0, 0, 0.5); padding: 2px;',
'',
'');
console.log('to show settings use:\nph.showPerplexityHelperSettingsModal()');
}());