☰

Perplexity Scroll Buttons (AFU IT)

Adds Apple-style scroll buttons with auto-scroll enabled by default

  1. // ==UserScript==
  2. // @name         Perplexity Scroll Buttons (AFU IT)
  3. // @namespace    PerplexityTools
  4. // @version      1.1
  5. // @description  Adds Apple-style scroll buttons with auto-scroll enabled by default
  6. // @author       AFU IT
  7. // @match        https://*.perplexity.ai/*
  8. // @license      MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     
  15.     // Configuration
  16.     const buttonColor = '#20b8cd';
  17.     let autoScrollInterval = null;
  18.     let isAutoScrollEnabled = true; // Set to true by default
  19.     
  20.     // Create and add the scroll buttons
  21.     function addScrollButtons() {
  22.         // Remove existing buttons if any
  23.         const existingBottomButton = document.getElementById('scroll-bottom-btn');
  24.         const existingTopButton = document.getElementById('scroll-top-btn');
  25.         const existingAutoButton = document.getElementById('auto-scroll-btn');
  26.         
  27.         if (existingBottomButton) existingBottomButton.remove();
  28.         if (existingTopButton) existingTopButton.remove();
  29.         if (existingAutoButton) existingAutoButton.remove();
  30.         
  31.         // Create the bottom scroll button
  32.         const bottomButton = document.createElement('div');
  33.         bottomButton.id = 'scroll-bottom-btn';
  34.         bottomButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"></path></svg>';
  35.         bottomButton.title = 'Scroll to bottom';
  36.         
  37.         // Style the bottom button
  38.         bottomButton.style.cssText = `
  39.             position: fixed;
  40.             right: 20px;
  41.             bottom: 120px;
  42.             width: 32px;
  43.             height: 32px;
  44.             background: ${buttonColor};
  45.             color: white;
  46.             border-radius: 50%;
  47.             font-size: 18px;
  48.             display: flex;
  49.             align-items: center;
  50.             justify-content: center;
  51.             cursor: pointer;
  52.             z-index: 99999;
  53.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  54.             transition: transform 0.2s;
  55.         `;
  56.         
  57.         // Add hover effect
  58.         bottomButton.addEventListener('mouseover', function() {
  59.             this.style.transform = 'scale(1.1)';
  60.         });
  61.         
  62.         bottomButton.addEventListener('mouseout', function() {
  63.             this.style.transform = 'scale(1)';
  64.         });
  65.         
  66.         // Add click event for bottom button
  67.         bottomButton.addEventListener('click', function() {
  68.             const scrollContainer = document.querySelector('.scrollable-container.scrollbar');
  69.             if (scrollContainer) {
  70.                 scrollContainer.scrollTop = scrollContainer.scrollHeight;
  71.             }
  72.         });
  73.         
  74.         // Create the top scroll button
  75.         const topButton = document.createElement('div');
  76.         topButton.id = 'scroll-top-btn';
  77.         topButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"></path></svg>';
  78.         topButton.title = 'Scroll to top';
  79.         
  80.         // Style the top button
  81.         topButton.style.cssText = `
  82.             position: fixed;
  83.             right: 20px;
  84.             bottom: 162px;
  85.             width: 32px;
  86.             height: 32px;
  87.             background: ${buttonColor};
  88.             color: white;
  89.             border-radius: 50%;
  90.             font-size: 18px;
  91.             display: flex;
  92.             align-items: center;
  93.             justify-content: center;
  94.             cursor: pointer;
  95.             z-index: 99999;
  96.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  97.             transition: transform 0.2s;
  98.         `;
  99.         
  100.         // Add hover effect
  101.         topButton.addEventListener('mouseover', function() {
  102.             this.style.transform = 'scale(1.1)';
  103.         });
  104.         
  105.         topButton.addEventListener('mouseout', function() {
  106.             this.style.transform = 'scale(1)';
  107.         });
  108.         
  109.         // Add click event for top button
  110.         topButton.addEventListener('click', function() {
  111.             const scrollContainer = document.querySelector('.scrollable-container.scrollbar');
  112.             if (scrollContainer) {
  113.                 scrollContainer.scrollTop = 0;
  114.             }
  115.         });
  116.         
  117.         // Create the auto-scroll toggle button with mouse scroll wheel icon
  118.         const autoButton = document.createElement('div');
  119.         autoButton.id = 'auto-scroll-btn';
  120.         // Mouse scroll wheel SVG icon
  121.         autoButton.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="6" ry="6"></rect><line x1="12" y1="7" x2="12" y2="11"></line></svg>';
  122.         autoButton.title = 'Toggle auto-scroll';
  123.         
  124.         // Style the auto-scroll button - active by default
  125.         autoButton.style.cssText = `
  126.             position: fixed;
  127.             right: 20px;
  128.             bottom: 204px;
  129.             width: 32px;
  130.             height: 32px;
  131.             background: ${isAutoScrollEnabled ? buttonColor : '#888888'};
  132.             color: white;
  133.             border-radius: 50%;
  134.             font-size: 16px;
  135.             display: flex;
  136.             align-items: center;
  137.             justify-content: center;
  138.             cursor: pointer;
  139.             z-index: 99999;
  140.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  141.             transition: transform 0.2s, background-color 0.3s;
  142.         `;
  143.         
  144.         // Add hover effect
  145.         autoButton.addEventListener('mouseover', function() {
  146.             this.style.transform = 'scale(1.1)';
  147.         });
  148.         
  149.         autoButton.addEventListener('mouseout', function() {
  150.             this.style.transform = 'scale(1)';
  151.         });
  152.         
  153.         // Add click event for auto-scroll button
  154.         autoButton.addEventListener('click', function() {
  155.             toggleAutoScroll();
  156.             this.style.backgroundColor = isAutoScrollEnabled ? buttonColor : '#888888';
  157.         });
  158.         
  159.         // Add to document
  160.         document.body.appendChild(bottomButton);
  161.         document.body.appendChild(topButton);
  162.         document.body.appendChild(autoButton);
  163.     }
  164.     
  165.     // Function to check if Perplexity is generating content
  166.     function isGenerating() {
  167.         return !!document.querySelector('button[aria-label="Stop generating response"]');
  168.     }
  169.     
  170.     // Function to scroll to bottom
  171.     function scrollToBottom() {
  172.         const scrollContainer = document.querySelector('.scrollable-container.scrollbar');
  173.         if (scrollContainer) {
  174.             scrollContainer.scrollTop = scrollContainer.scrollHeight;
  175.         }
  176.     }
  177.     
  178.     // Toggle auto-scroll functionality
  179.     function toggleAutoScroll() {
  180.         isAutoScrollEnabled = !isAutoScrollEnabled;
  181.         
  182.         if (isAutoScrollEnabled) {
  183.             // Start auto-scrolling
  184.             startAutoScroll();
  185.         } else {
  186.             // Stop auto-scrolling
  187.             stopAutoScroll();
  188.         }
  189.     }
  190.     
  191.     // Start auto-scrolling
  192.     function startAutoScroll() {
  193.         if (!autoScrollInterval) {
  194.             autoScrollInterval = setInterval(() => {
  195.                 if (isGenerating()) {
  196.                     scrollToBottom();
  197.                 }
  198.             }, 300);
  199.         }
  200.     }
  201.     
  202.     // Stop auto-scrolling
  203.     function stopAutoScroll() {
  204.         if (autoScrollInterval) {
  205.             clearInterval(autoScrollInterval);
  206.             autoScrollInterval = null;
  207.         }
  208.     }
  209.     
  210.     // Initialize everything
  211.     function initialize() {
  212.         // Add the buttons
  213.         addScrollButtons();
  214.         
  215.         // Start auto-scroll by default
  216.         startAutoScroll();
  217.         
  218.         // Watch for URL changes
  219.         let lastUrl = location.href;
  220.         new MutationObserver(() => {
  221.             if (location.href !== lastUrl) {
  222.                 lastUrl = location.href;
  223.                 setTimeout(() => {
  224.                     addScrollButtons();
  225.                     if (isAutoScrollEnabled) {
  226.                         startAutoScroll();
  227.                     }
  228.                 }, 1000);
  229.             }
  230.         }).observe(document, {subtree: true, childList: true});
  231.         
  232.         // Make sure buttons are always present
  233.         setInterval(() => {
  234.             if (!document.getElementById('auto-scroll-btn')) {
  235.                 addScrollButtons();
  236.                 if (isAutoScrollEnabled) {
  237.                     startAutoScroll();
  238.                 }
  239.             }
  240.         }, 5000);
  241.     }
  242.     
  243.     // Start when the page is ready
  244.     if (document.readyState === 'complete') {
  245.         initialize();
  246.     } else {
  247.         window.addEventListener('load', initialize);
  248.     }
  249. })();