Character.AI - Widescreen Chat

Widens the Character.AI chat fields. Also slightly widens the search page.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Character.AI - Widescreen Chat
// @namespace    https://greasyfork.org/en/users/1628373-suihtil-cod
// @version      1.0.0
// @description  Widens the Character.AI chat fields. Also slightly widens the search page.
// @match        https://character.ai/*
// @icon         https://character.ai/favicon.ico
// @license      MIT
// @grant        none
// ==/UserScript==

// Inspired by "WideScreen Chat" userscript by Teleman Florentin.
// Development assisted by ChatGPT (OpenAI).

(function(){

    // Inject the custom stylesheet used by this userscript.
    function injectCustomStyles(){

        const style=document.createElement("style");

        // All rules are scoped under the "widechat" class so they
        // only take effect when that class is present on <body>.
        style.textContent=".widechat .max-w-xl,.widechat .max-w-3xl,.widechat .max-w-2xl{max-width:60rem!important;min-width:95%!important}.widechat .transition-width.w-7{width:0!important}.widechat .ml-7{margin-left:0!important}.widechat .chat-message{text-align:left!important}.widechat [data-testid='completed-message'],.widechat [data-testid='completed-message']>*{justify-content:flex-start!important;text-align:left!important}";

        document.head.appendChild(style);
    }

    // Enable the stylesheet by adding our namespace class.
    function addWideChatClass(){
        document.body.classList.add("widechat");
    }

    // Character AI frequently mutates the page, so make sure the
    // class remains present after any DOM changes.
    function observeBody(){
        new MutationObserver(()=>addWideChatClass()).observe(document.body,{childList:true,subtree:true});

        // Apply immediately.
        addWideChatClass();
    }

    // Initialize.
    injectCustomStyles();
    observeBody();
})();