☰

c.ai Neo Panel Quickscroll

Adds Quickscroll Buttons and applies some visual fixes for chat2 like paragraphing and linebreak

// ==UserScript==
// @name        c.ai Neo Panel Quickscroll
// @namespace   c.ai Neo Panel Quickscroll
// @match       https://*.character.ai/chat*
// @grant       none
// @version     1.7
// @author      Vishanka
// @license      MIT
// @description Adds Quickscroll Buttons and applies some visual fixes for chat2 like paragraphing and linebreak
// @icon        https://i.imgur.com/iH2r80g.png

(function() {
// ==/UserScript==
'use strict';

//------------------------------Arrow right keypress for swiping------------------------------
//
function ArrowRightKeyDown () {
  document.body.dispatchEvent(
    new KeyboardEvent('keydown', {
      bubbles: true,
      key: 'ArrowRight',
    })
  );
  console.log("Arrow right pressed");
}

//------------------------------Arrow left keypress for swiping------------------------------
//
function ArrowLeftKeyDown () {
  document.body.dispatchEvent(
    new KeyboardEvent('keydown', {
      bubbles: true,
      key: 'ArrowLeft',
    })
  );
  console.log("Arrow left pressed");
}
//
//------------------------------Timed MutationObserver------------------------------
//
function waitForElement(querySelector, timeout) {
  return new Promise(function(resolve, reject) {
    var timer = false;
    if (document.querySelectorAll(querySelector).length) {
      return resolve();
    }
    const observer = new MutationObserver(function () {
      if (document.querySelectorAll(querySelector).length) {
        observer.disconnect();
        //console.log("Timed MutationObserver is disconnected");
        if (timer !== false) clearTimeout(timer);
        return resolve();
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
    if (timeout) {
      timer = setTimeout(function() {
        observer.disconnect();
        //console.log("Timed MutationObserver is disconnected");
        reject();
      }, timeout);
    }
  });
}
//
//------------------------------Data in localStorage is saved across browser sessions------------------------------
//
var localStorage_nativedark = localStorage.getItem ("darkMode");
console.log("Native dark mode switch status =", localStorage_nativedark);
const localStorage_authorization = JSON.parse(localStorage.getItem('char_token')).value;
console.log("Authorization token =", localStorage_authorization);
//
//------------------------------Quickscroll buttons style------------------------------
//
function applyQuickScrollStyles() {
    if (window.location.href.includes('.character.ai/chat2')) {
        var quickscroll_buttons_style = document.createElement('style');
        quickscroll_buttons_style.classList.add('Reload_Autoscroll_script', 'quickscroll_buttons_style');
        quickscroll_buttons_style.innerHTML = `
            div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"] {
                cursor: pointer;
                user-select: none;
                position: absolute;
                top: 45%;
                right: 0;
                color: black;
                font-weight: 700;
                z-index: 10;
                font-family: swiper-icons;
                margin-top: 3px;
                transform: scale(0.6, 1.5);
            }
            div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"]:hover {
                color: #3c85f6;
            }
            div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"]::after {
                content: "next" "next";
            }
            div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"] {
                cursor: pointer;
                user-select: none;
                position: absolute;
                top: 45%;
                left: 0;
                color: black;
                font-weight: 700;
                height: 30px;
                z-index: 10;
                justify-content: center;
                align-items: center;
                font-family: swiper-icons;
                margin-top: 3px;
                transform: scale(0.6, 1.5);
            }
            div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"]:hover {
                color: #3c85f6;
            }
            div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"]::after {
                content: "prev" "prev";
            }
        `;
        document.body.appendChild(quickscroll_buttons_style);
    }
    else {
        var quickscroll_buttons_style = document.createElement('style');
        quickscroll_buttons_style.classList.add('Reload_Autoscroll_script', 'quickscroll_buttons_style');
        quickscroll_buttons_style.innerHTML = `
            div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"] {
                cursor: pointer;
                user-select: none;
                position: absolute;
                top: 53px;
                right: 0;
                color: black;
                font-weight: 700;
                height: 30px;
                z-index: 10;
                justify-content: center;
                align-items: center;
                font-family: swiper-icons;
                margin-top: 0px;
                transform: scale(0.6, 1.5);
            }
            div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"]:hover {
                color: #3c85f6;
            }
            div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"]::after {
                content: "next" "next";
            }
            div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"] {
                cursor: pointer;
                user-select: none;
                position: absolute;
                top: 53px;
                left: 0;
                color: black;
                font-weight: 700;
                height: 30px;
                z-index: 10;
                justify-content: center;
                align-items: center;
                font-family: swiper-icons;
                margin-top: 0px;
                transform: scale(0.6, 1.5);
            }
            div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"]:hover {
                color: #3c85f6;
            }
            div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"]::after {
                content: "prev" "prev";
            }
        `;
        document.body.appendChild(quickscroll_buttons_style);

    }
}

applyQuickScrollStyles();

//
//------------------------------When the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images------------------------------
//
window.addEventListener('load', function () {
//

//------------------------------Quickscroll « and » buttons------------------------------
//

    var quickscroll_right_button = document.createElement('div');
    quickscroll_right_button.classList.add('Reload_Autoscroll_script', 'swiper-button-next-quickscroll');
    quickscroll_right_button.onclick = function (){
      event.stopPropagation();
      for (let step = 0; step < 10; step++) {
        ArrowRightKeyDown ();
      }
    };
    var quickscroll_left_button = document.createElement('div');
    quickscroll_left_button.classList.add('Reload_Autoscroll_script', 'swiper-button-prev-quickscroll');
    quickscroll_left_button.onclick = function (){
      event.stopPropagation();
      for (let step = 0; step < 10; step++) {
        ArrowLeftKeyDown ();
      }
    };
    function append_quickscroll_right_button () {
      if (document.querySelector('div[class="swiper-button-next"]')) {
        document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]').appendChild(quickscroll_right_button);
      } else if (document.querySelector('div[class="swiper-button-next swiper-button-disabled"]') && document.querySelector('div[class="Reload_Autoscroll_script swiper-button-next-quickscroll"]')) {
        document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]').removeChild(quickscroll_right_button);
      }
    }
    function append_quickscroll_left_button () {
      if (document.querySelector('div[class="swiper-button-prev"]')) {
        document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]').appendChild(quickscroll_left_button);
      } else if (document.querySelector('div[class="swiper-button-prev swiper-button-disabled"]') && document.querySelector('div[class="Reload_Autoscroll_script swiper-button-prev-quickscroll"]')) {
        document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]').removeChild(quickscroll_left_button);
      }
    }
    waitForElement('div[class="swiper-wrapper"]', 60000).then(function () {
      //console.log("swiper-wrapper observer SUCCESS");
      append_quickscroll_right_button ();
      append_quickscroll_left_button ();
      const swipe_buttons_row_observer = new MutationObserver(function () {
        //console.log("swipe_buttons_row_observer fired");
        append_quickscroll_right_button ();
        append_quickscroll_left_button ();
      });
      swipe_buttons_row_observer.observe(document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]>div:nth-of-type(3)'), {attributes: true, attributeFilter: ['class']});
      swipe_buttons_row_observer.observe(document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]>div:nth-of-type(2)'), {attributes: true, attributeFilter: ['class']});
      const swipe_buttons_intermediate_observer = new MutationObserver(function () {
        //console.log("swipe_buttons_intermediate_observer fired");
        swipe_buttons_intermediate_observer.disconnect();
        if (document.querySelector('div[class="swiper-wrapper"]')) {
          swipe_buttons_row_observer.disconnect();
          swipe_buttons_row_observer.observe(document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]>div:nth-of-type(3)'), {attributes: true, attributeFilter: ['class']});
          swipe_buttons_row_observer.observe(document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]>div:nth-of-type(2)'), {attributes: true, attributeFilter: ['class']});
        }
      });
      const swipe_buttons_column_observer = new MutationObserver(function () {
        //console.log("swipe_buttons_column_observer fired");
        if (document.querySelector('div[class="swiper-wrapper"]')) {
          swipe_buttons_intermediate_observer.observe(document.querySelector('div[class*="swiper swiper-initialized swiper-horizontal"]'), {childList: true});
        }
      });
      swipe_buttons_column_observer.observe(document.querySelector('div[class="infinite-scroll-component "]'), {childList: true});
    }).catch(function() {
      console.log("swiper-wrapper observer ERROR");
    });


//



}, false);


//Styles to fix formatting

    window.addEventListener('load', function() {
        // Remove the margin from the specified selectors
        var styleTag = document.createElement('style');
    // Check if the current URL includes '.character.ai/chat2'
    if (window.location.href.includes('.character.ai/chat2')) {
// Adjusts the position of the swiper button to the original position of chat
      styleTag.innerHTML = '.chat2 .swiper-button-next, .chat2 .swiper-button-prev { margin-top: 0px !important; top: 45%; }';
    } else {
      styleTag.innerHTML = '.swiper-button-next, .swiper-button-prev { margin-top: 0px !important; top: 50px; }';
    }

    // Append the style tag to the document's head
    document.head.appendChild(styleTag);
  });


var css = `


.chat2 > div:nth-child(1) > div:nth-child(2) {
  box-shadow: 0px 1px 0px rgb(68, 71, 71);
}


`;

  var head = document.getElementsByTagName("head")[0];
  var style = document.createElement("style");
  style.setAttribute("type", 'text/css');
  style.innerHTML = css;
  head.appendChild(style);
})();