☰

Greasy Fork is available in English.

Manual Message Numbering

Numbers each message in chat and allows clearing the counter

// ==UserScript==
// @name         Manual Message Numbering
// @namespace    -
// @version      1.4
// @description  Numbers each message in chat and allows clearing the counter
// @author       Clawberry
// @match        https://character.ai/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let isCleared = false; // Tracks whether numbers are cleared or not

    // Function to number messages
    const numberMessage = (message, index) => {
        let numberSpan = message.querySelector('.message-number');
        if (!numberSpan) {
            numberSpan = document.createElement('span');
            numberSpan.classList.add('message-number');
            numberSpan.style.cssText = 'font-weight: bold; margin-right: 5px; color: #595959;';
            message.prepend(numberSpan);
        }
        numberSpan.textContent = `${index + 1}. `;
    };

    // Function to number all messages
    const numberAllMessages = () => {
        const messages = Array.from(document.querySelectorAll('.m-0:not(.swiper .m-0)'));
        messages.forEach(numberMessage);
    };

    // Function to clear message numbers
    const clearAllMessages = () => {
        const messages = Array.from(document.querySelectorAll('.message-number'));
        messages.forEach(span => {
            span.textContent = '';
        });
    };

    // Create the button and add event listeners
    const createButton = () => {
        const button = document.createElement('button');
        button.textContent = 'Update Message Counter';
        button.style.cssText = `
            position: fixed;
            bottom: 5px;
            right: 10px;
            z-index: 9999;
            padding: 5px 5px;
            background-color: #000;
            color: #FFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.7em;
        `;

        // Toggle between updating and clearing message numbers on button click
        button.addEventListener('click', () => {
            if (isCleared) {
                numberAllMessages(); // Add numbers back
                button.textContent = 'Clear Message Counter'; // Update button text
            } else {
                clearAllMessages(); // Clear numbers
                button.textContent = 'Update Message Counter'; // Update button text
            }
            isCleared = !isCleared; // Toggle state
        });

        document.body.appendChild(button);
    };

    // Observe the chat for new messages
    const observeChat = () => {
        const observer = new MutationObserver(numberAllMessages);
        const chatContainer = document.querySelector('.chat-container');
        if (chatContainer) {
            observer.observe(chatContainer, { childList: true, subtree: true });
        }
    };

    createButton();
    setTimeout(() => {
        numberAllMessages();
        observeChat();
    }, 1000);
})();