☰

c.ai Neo Panel Swipe Numbers

Adds swipe Numbers to the Swipes

// ==UserScript==
// @name        c.ai Neo Panel Swipe Numbers
// @namespace   c.ai Neo Panel Swipe Numbers
// @match       https://*.character.ai/chat*
// @grant       none
// @version     1.1
// @author      Vishanka
// @license      MIT
// @description Adds swipe Numbers to the Swipes
// @icon        https://i.imgur.com/iH2r80g.png


// ==/UserScript==
'use strict';
//
//------------------------------User settings------------------------------
//

const error500_persistent = true;
const NIGHT_label_glow = "darkgreen";

//------------------------------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);

//------------------------------Bookmarking glow style------------------------------
//
function applyBookmarkStyles() {
    if (window.location.href.includes('.character.ai/chat2')) {

var swipe_label_bookmaring_style = document.createElement('style');
swipe_label_bookmaring_style.classList.add('Reload_Autoscroll_script', 'swipe_label_bookmaring_style');
swipe_label_bookmaring_style.innerHTML = `
div[class="swiper-wrapper"]>div[class^="swiper-slide"] .swipe-number-wrapper {
    position: absolute;
    top: 70px;
    left: 0px; /* If you want it on the left */
    background-color: rgb(60, 133, 246);
    color: white;
    font-weight: 600;
    font-size: 12px;
    border-radius: 0.25rem;
    padding: 0px;
    text-align: center;
    width: 45px; /* Set the desired base width */

  }
  div[class="swiper-wrapper"]>div[class^=swiper-slide][RAs_bookmarked="true"] .swipe-number-wrapper {
    background-image: linear-gradient(${NIGHT_label_glow}, transparent);
    background-color: transparent;
    height: 50%;
  }
`;
document.body.appendChild(swipe_label_bookmaring_style);
    }
else {
var swipe_label_bookmaring_style = document.createElement('style');
swipe_label_bookmaring_style.classList.add('Reload_Autoscroll_script', 'swipe_label_bookmaring_style');
swipe_label_bookmaring_style.innerHTML = `
div[class="swiper-wrapper"]>div[class^="swiper-slide"] .swipe-number-wrapper {
    position: absolute;
    top: 28px;
    left: 0px; /* If you want it on the left */
    background-color: rgb(60, 133, 246);
    color: white;
    font-weight: 600;
    font-size: 12px;
    border-radius: 0.25rem;
    padding: 0px;
    text-align: center;
    width: 45px; /* Set the desired base width */

  }
  div[class="swiper-wrapper"]>div[class^=swiper-slide][RAs_bookmarked="true"] .swipe-number-wrapper {
    background-image: linear-gradient(${NIGHT_label_glow}, transparent);
    background-color: transparent;
    height: 50%;
  }
`;
document.body.appendChild(swipe_label_bookmaring_style);


}
}
applyBookmarkStyles();

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

//------------------------------500 Internal Server Error persistent notification------------------------------
//
  if (error500_persistent) {
    waitForElement('div[id="root"]>div[class="Toastify"]', 60000).then(function() {
      //console.log("Toastify observer SUCCESS");
      const error500_observer = new MutationObserver (function () {
        //console.log("error500_observer observer fired");
        if (document.querySelector('div[class*="Toastify__toast--error"]')) {
          console.log("500 Internal Server Error detected");
          document.querySelector('textarea[id="user-input"]').style.setProperty("background-color", "lightpink", "important");
          document.querySelector('textarea[id="user-input"]').setAttribute("placeholder", "   “500 Internal Server Error” was fired! Refresh the page!");
        };
      });
      error500_observer.observe(document.querySelector('div[id="root"]>div[class="Toastify"]'), {childList: true, subtree: true});
    }).catch(function() {
      console.log("Toastify observer ERROR");
    });
  };
//
//------------------------------Swipes numbering and bookmarking------------------------------
//

  function add_swipe_number() {
    var swipe_labels_text_NodeList = document.querySelectorAll('div[class="swiper-wrapper"]>div[class^="swiper-slide"]');
    for (let i = 0; i < swipe_labels_text_NodeList.length; i++) {
      if (!swipe_labels_text_NodeList[i].getAttribute('swipe_number_listener')) {
        const swipeNumberElement = document.createElement('span');
        swipeNumberElement.className = 'swipe-number';
        swipeNumberElement.textContent = i + 1;

        const swipeNumberWrapper = document.createElement('div');
        swipeNumberWrapper.className = 'swipe-number-wrapper';
        swipeNumberWrapper.appendChild(swipeNumberElement);

        swipe_labels_text_NodeList[i].appendChild(swipeNumberWrapper);

        swipe_labels_text_NodeList[i].setAttribute('swipe_number_listener', 'true');
        console.log(swipe_labels_text_NodeList[i].innerHTML);
      }
    }
  }

    function make_label_glow (arg1) {
      if (arg1.getAttribute('RAs_bookmarked')) {
        arg1.removeAttribute('RAs_bookmarked');
      } else if (!arg1.getAttribute('RAs_bookmarked')) {
        arg1.setAttribute('RAs_bookmarked', 'true');
      };
    };
function add_swipe_bookmark() {
  var swipe_labels_NodeList = document.querySelectorAll(
    'div[class="swiper-wrapper"]>div[class^="swiper-slide"]'
  );
  for (let i = 0; i < swipe_labels_NodeList.length; i++) {
    if (!swipe_labels_NodeList[i].getAttribute('swipe_bookmark_listener')) {
      const swipeNumberWrapper = swipe_labels_NodeList[i].querySelector('.swipe-number-wrapper');
      swipeNumberWrapper.addEventListener('click', function () {
        make_label_glow(swipe_labels_NodeList[i]);
      });
      swipe_labels_NodeList[i].setAttribute('swipe_bookmark_listener', 'true');
    }
  }
}


    waitForElement('div[class="swiper-wrapper"]', 60000).then(function () {
      //console.log("swiper-wrapper observer SUCCESS");
      add_swipe_number ();
      add_swipe_bookmark ();
      const new_replies_row_observer = new MutationObserver(function () {
        //console.log("new_replies_row_observer fired");
        add_swipe_number ();
        add_swipe_bookmark ();
      });
      new_replies_row_observer.observe(document.querySelector('div[class="swiper-wrapper"]'), {childList: true});
      const new_replies_column_observer = new MutationObserver(function () {
        //console.log("new_replies_column_observer fired");
        if (document.querySelector('div[class="swiper-wrapper"]')) {
          new_replies_row_observer.disconnect();
          new_replies_row_observer.observe(document.querySelector('div[class="swiper-wrapper"]'), {childList: true});
        };
      });
      new_replies_column_observer.observe(document.querySelector('div[class="infinite-scroll-component "]'), {childList: true});
    }).catch(function() {
      console.log("swiper-wrapper observer ERROR");
    });

//


}, false);   ///   window.addEventListener('load', function () { closes here <---   ///