☰

Manual Message Numbering

Numbers each message in chat and allows clearing the counter

  1. // ==UserScript==
  2. // @name         Manual Message Numbering
  3. // @namespace    -
  4. // @version      1.4
  5. // @description  Numbers each message in chat and allows clearing the counter
  6. // @author       Clawberry
  7. // @match        https://character.ai/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     let isCleared = false; // Tracks whether numbers are cleared or not
  16.  
  17.     // Function to number messages
  18.     const numberMessage = (message, index) => {
  19.         let numberSpan = message.querySelector('.message-number');
  20.         if (!numberSpan) {
  21.             numberSpan = document.createElement('span');
  22.             numberSpan.classList.add('message-number');
  23.             numberSpan.style.cssText = 'font-weight: bold; margin-right: 5px; color: #595959;';
  24.             message.prepend(numberSpan);
  25.         }
  26.         numberSpan.textContent = `${index + 1}. `;
  27.     };
  28.  
  29.     // Function to number all messages
  30.     const numberAllMessages = () => {
  31.         const messages = Array.from(document.querySelectorAll('.m-0:not(.swiper .m-0)'));
  32.         messages.forEach(numberMessage);
  33.     };
  34.  
  35.     // Function to clear message numbers
  36.     const clearAllMessages = () => {
  37.         const messages = Array.from(document.querySelectorAll('.message-number'));
  38.         messages.forEach(span => {
  39.             span.textContent = '';
  40.         });
  41.     };
  42.  
  43.     // Create the button and add event listeners
  44.     const createButton = () => {
  45.         const button = document.createElement('button');
  46.         button.textContent = 'Update Message Counter';
  47.         button.style.cssText = `
  48.             position: fixed;
  49.             bottom: 5px;
  50.             right: 10px;
  51.             z-index: 9999;
  52.             padding: 5px 5px;
  53.             background-color: #000;
  54.             color: #FFF;
  55.             border: none;
  56.             border-radius: 5px;
  57.             cursor: pointer;
  58.             font-size: 0.7em;
  59.         `;
  60.  
  61.         // Toggle between updating and clearing message numbers on button click
  62.         button.addEventListener('click', () => {
  63.             if (isCleared) {
  64.                 numberAllMessages(); // Add numbers back
  65.                 button.textContent = 'Clear Message Counter'; // Update button text
  66.             } else {
  67.                 clearAllMessages(); // Clear numbers
  68.                 button.textContent = 'Update Message Counter'; // Update button text
  69.             }
  70.             isCleared = !isCleared; // Toggle state
  71.         });
  72.  
  73.         document.body.appendChild(button);
  74.     };
  75.  
  76.     // Observe the chat for new messages
  77.     const observeChat = () => {
  78.         const observer = new MutationObserver(numberAllMessages);
  79.         const chatContainer = document.querySelector('.chat-container');
  80.         if (chatContainer) {
  81.             observer.observe(chatContainer, { childList: true, subtree: true });
  82.         }
  83.     };
  84.  
  85.     createButton();
  86.     setTimeout(() => {
  87.         numberAllMessages();
  88.         observeChat();
  89.     }, 1000);
  90. })();