YuanBao Chat Width Optimized

Optimized chat width with breathing space and minimal toggle
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         YuanBao Chat Width Optimized
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Optimized chat width with breathing space and minimal toggle
// @author       Bela Proinsias
// @match        https://yuanbao.tencent.com/chat/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tencent.com
// @grant        GM_addStyle
// @grant        GM.registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @license      MIT
// ==/UserScript==

(function () {
    "use strict";

    const STORAGE_KEY = "yuanbao-chat-width";
    const CSS_VARS = `
        :root {
            --chat-container-width: 85%;
            --toggle-size: 32px;
            --toggle-color: #FF7EB6;
            --toggle-bg: linear-gradient(145deg, #FFDEE9, #FFB3D9);
            --bubble-bg: rgba(255, 222, 233, 0.95);
        }
    `;

    let currentWidth = GM_getValue(STORAGE_KEY, 85);
    let styleElement;
    let toggle;

    function applyOptimizedStyles() {
        const dynamicStyles = `
            ${CSS_VARS}

            .agent-chat__list__item__content {
                max-width: var(--chat-container-width) !important;
                margin: 0 auto !important;
                transition: max-width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            #widthToggle {
                width: var(--toggle-size);
                height: var(--toggle-size);
                border-radius: 12px;
                background: var(--toggle-bg);
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                bottom: 24px;
                right: 24px;
                z-index: 9999;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
            }

            #widthToggle:hover {
                transform: scale(1.1) rotate(12deg);
                box-shadow: 0 6px 16px rgba(0,0,0,0.2);
            }

            #widthToggle:active {
                transform: scale(0.95);
            }

            #widthToggle::before {
                content: attr(data-percent);
                position: absolute;
                right: calc(100% + 10px);
                top: 50%;
                transform: translateY(-50%);
                background: var(--bubble-bg);
                color: #E83F6F;
                font-size: 12px;
                padding: 6px 12px;
                border-radius: 8px;
                font-family: 'Microsoft Yahei', sans-serif;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                transition: all 0.3s ease;
                border: 2px solid #FFB3D9;
            }

            #widthToggle::after {
                content: '➤';
                position: absolute;
                right: 100%;
                top: 50%;
                transform: translate(40%, -50%) rotate(-90deg);
                color: var(--bubble-bg);
                font-size: 16px;
                opacity: 0;
                transition: all 0.3s ease;
            }

            #widthToggle:hover::before,
            #widthToggle:hover::after {
                opacity: 1;
                transform: translate(0, -50%) rotate(0deg);
            }

            #widthToggle span {
                width: 60%;
                height: 60%;
                background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23E83F6F" xmlns="http://www.w3.org/2000/svg"><path d="M18 12h-4V8h-4v4H6l6 6 6-6z"/></svg>');
                background-size: contain;
                transition: transform 0.3s ease;
            }
        `;

        if (!styleElement) {
            styleElement = document.createElement("style");
            document.head.appendChild(styleElement);
        }
        styleElement.textContent = dynamicStyles;
    }

    function createFloatingToggle() {
        toggle = document.createElement("button");
        toggle.id = "widthToggle";
        toggle.title = "reset width";
        toggle.innerHTML = "<span></span>";
        toggle.setAttribute("data-percent", `${currentWidth}%`);

        toggle.addEventListener("click", () => {
            currentWidth = 85;
            updateWidth();

            toggle.style.background = "linear-gradient(145deg, #FFB3D9, #FF8CC6)";
            setTimeout(() => {
                toggle.style.background = CSS_VARS.match(/--toggle-bg: (.*?);/)[1];
            }, 200);
        });

        toggle.addEventListener("wheel", (e) => {
            e.preventDefault();
            currentWidth += e.deltaY > 0 ? -1 : 1;
            currentWidth = Math.min(120, Math.max(60, currentWidth));
            updateWidth();
        });

        document.body.appendChild(toggle);
    }

    function updateWidth() {
        GM_setValue(STORAGE_KEY, currentWidth);
        document.documentElement.style.setProperty(
            "--chat-container-width",
            `${currentWidth}%`
        );
        toggle.setAttribute("data-percent", `${currentWidth}%`);

        document
            .querySelectorAll(".agent-chat__list__item__content")
            .forEach((el) => {
                el.style.transform = "scale(0.98)";
                setTimeout(() => (el.style.transform = "scale(1)"), 200);
            });
    }

    function init() {
        applyOptimizedStyles();
        createFloatingToggle();
        updateWidth();
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();