Perplexity.ai Limits Overlay (Dark Mode, Draggable)

Overlays various limit values on Perplexity.ai main and search pages, updates on submit

Verzia zo dňa 17.02.2025. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name         Perplexity.ai Limits Overlay (Dark Mode, Draggable)
// @namespace    http://tampermonkey.net/
// @version      2.3
// @description  Overlays various limit values on Perplexity.ai main and search pages, updates on submit
// @match        https://www.perplexity.ai/
// @match        https://www.perplexity.ai/search*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    // Create and style the limits box
    const limitsBox = document.createElement('div');
    limitsBox.id = 'limits-box';
    limitsBox.style.cssText = `
        position: fixed;
        right: 20px;
        top: 20px;
        background-color: rgba(30, 30, 30, 0.9);
        color: #ffffff;
        border: 1px solid #444;
        border-radius: 5px;
        padding: 10px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        z-index: 9999;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        cursor: move;
        user-select: none;
    `;

    // Function to fetch and display the limits
    async function displayLimits() {
        try {
            const response = await fetch('https://www.perplexity.ai/rest/user/settings');
            const data = await response.json();

            const limits = [
                { label: "Messages Limit:", value: data.gpt4_limit },
                { label: "Document Upload Limit:", value: data.upload_limit },
                { label: "Image Upload Limit:", value: data.article_image_upload_limit },
                { label: "Image Generation Limit:", value: data.create_limit },
                { label: "Page Creation Limit:", value: data.pages_limit }
            ];

            const table = document.createElement('table');
            table.style.borderCollapse = 'collapse';
            table.style.width = '100%';

            limits.forEach(limit => {
                const row = table.insertRow();
                const labelCell = row.insertCell(0);
                const valueCell = row.insertCell(1);

                labelCell.textContent = limit.label;
                labelCell.style.textAlign = 'left';
                labelCell.style.paddingRight = '10px';

                valueCell.textContent = limit.value;
                valueCell.style.textAlign = 'right';
            });

            limitsBox.innerHTML = '';
            limitsBox.appendChild(table);
        } catch (error) {
            console.error('Error fetching limits:', error);
        }
    }

    // Add the limits box to the page
    document.body.appendChild(limitsBox);

    // Initial update
    displayLimits();

    // Make the box vertically draggable
    let isDragging = false;
    let currentY, initialY;
    let yOffset = GM_getValue('yOffset', 0);

    function setPosition() {
        const maxY = window.innerHeight - limitsBox.offsetHeight;
        yOffset = Math.max(0, Math.min(yOffset, maxY));
        limitsBox.style.transform = `translateY(${yOffset}px)`;
        GM_setValue('yOffset', yOffset);
    }

    function dragStart(e) {
        initialY = e.clientY - yOffset;
        isDragging = true;
    }

    function dragEnd() {
        isDragging = false;
        setPosition();
    }

    function drag(e) {
        if (isDragging) {
            e.preventDefault();
            currentY = e.clientY - initialY;
            yOffset = currentY;
            setPosition();
        }
    }

    // Set initial position
    setPosition();

    limitsBox.addEventListener('mousedown', dragStart);
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', dragEnd);

    // Function to update limits on submit
    function updateOnSubmit() {
        console.log('Update triggered');
        // Add a 2-second delay before fetching updated limits
        setTimeout(() => {
            displayLimits();
        }, 3000);
    }

    // Listen for Enter key press
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            updateOnSubmit();
        }
    });

    // Function to add listener to submit button
    function addSubmitListener() {
        const submitButton = document.querySelector('button[aria-label="Submit"]');
        if (submitButton) {
            submitButton.addEventListener('click', updateOnSubmit);
            console.log('Submit button listener added');
        } else {
            // If button not found, try again after a short delay
            setTimeout(addSubmitListener, 1000);
        }
    }

    // Call this function when the page loads
    addSubmitListener();

    // Also add a MutationObserver to watch for dynamically added submit buttons
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                for (let node of mutation.addedNodes) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        const submitButton = node.querySelector('button[aria-label="Submit"]');
                        if (submitButton) {
                            submitButton.addEventListener('click', updateOnSubmit);
                            console.log('Submit button listener added to dynamically created button');
                        }
                    }
                }
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();