☰

LMArena Purifier

优化UI，主要是为了大家在LMARENA和匿名模型玩的时候被另外一个弱智模型影响，作者discord skuhrasr0plus1

// ==UserScript==
// @name         LMArena Purifier
// @namespace    http://tampermonkey.net/
// @version      004
// @description  优化UI，主要是为了大家在LMARENA和匿名模型玩的时候被另外一个弱智模型影响，作者discord skuhrasr0plus1
// @author       skuhrasr0plus1
// @match        https://lmarena.ai/*
// @grant        GM_addStyle
// @license MIT// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    let purifiedContainer = null;
    let purifiedChatArea = null;
    let observer = null;
    let selectedMode = null; // 'A' or 'B'

GM_addStyle(`
        /* --- Variables & Theme (Elegant Dark) --- */
        :root {
            --purify-bg-primary: #121212; /* Deep Black for background */
            --purify-bg-secondary: #1e1e1e; /* Slightly lighter for panels/AI bubbles */
            --purify-accent: #007acc; /* Sophisticated Blue Accent (for User bubble/buttons) */
            --purify-accent-hover: #005f99;
            --purify-text-primary: #f0f0f0;
            --purify-text-secondary: #b0b0b0;
            --purify-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            --purify-radius: 12px; /* Softer corners */
        }

        /* --- Button Styling (Floating Selector) --- */
        #purify-selector-buttons {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            display: flex;
            gap: 15px;
        }
        .purify-btn {
            background-color: var(--purify-bg-secondary);
            color: var(--purify-text-primary);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            cursor: pointer;
            border-radius: var(--purify-radius);
            font-weight: 600;
            box-shadow: var(--purify-shadow);
            transition: transform 0.2s ease, background-color 0.2s ease;
        }
        .purify-btn:hover {
            background-color: var(--purify-accent);
            transform: translateY(-2px); /* Slight lift effect */
        }

        /* --- Main Purified Container --- */
        #purified-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--purify-bg-primary);
            color: var(--purify-text-primary);
            z-index: 2000;
            display: flex;
            font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
        }

        /* --- Top Control Panel (Sleek) --- */
        #purified-control-panel {
            padding: 15px 30px;
            background-color: var(--purify-bg-secondary);
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            display: flex;
            justify-content: space-between; /* Space out elements */
            align-items: center;
        }
        .control-group {
            display: flex;
            gap: 10px;
        }

        /* --- Chat Area (Readability Focused) --- */
        #purified-chat-area {
            flex-grow: 1;
            overflow-y: auto;
            padding: 30px 15px;
            display: flex;
            flex-direction: column-reverse;
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }

        /* --- Custom Scrollbar (Thin and subtle) --- */
        #purified-chat-area::-webkit-scrollbar {
            width: 6px;
        }
        #purified-chat-area::-webkit-scrollbar-track {
            background: var(--purify-bg-primary);
        }
        #purified-chat-area::-webkit-scrollbar-thumb {
            background-color: var(--purify-bg-secondary);
            border-radius: 3px;
        }

        /* --- Input Area (Integrated) --- */
        #purified-input-area {
            padding: 20px 15px;
            background-color: var(--purify-bg-primary);
            /* Subtle border instead of heavy background change */
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 2001;
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }
         #purified-input-area textarea {
             background-color: var(--purify-bg-secondary) !important;
             color: var(--purify-text-primary) !important;
             border-radius: var(--purify-radius) !important;
             border: 1px solid rgba(255, 255, 255, 0.1) !important;
         }

        /* --- Message Bubbles (Modern Chat UI) --- */
        .cloned-message {
            margin-bottom: 20px;
            padding: 12px 18px;
            border-radius: 18px; /* Highly rounded */
            line-height: 1.5;
            display: block !important;
            flex: none !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        /* User Message Bubble (Accent Color) */
        .cloned-user {
            background-color: var(--purify-bg-secondary);
            color: var(--purify-text-primary);
            align-self: flex-end;
            max-width: 80%;
            border-bottom-right-radius: 4px;
        }

        /* AI Message Bubble (Secondary Color) */
        .cloned-ai {
            background-color: var(--purify-bg-secondary);
            color: var(--purify-text-primary);
            align-self: flex-start;
            max-width: 80%;
            border-bottom-left-radius: 4px;
        }

         /* Ensure links inside messages are visible */
        .cloned-message a {
            color: #63b3ed !important;
            text-decoration: none !important;
        }
        .cloned-message a:hover {
            text-decoration: underline !important;
        }
        .cloned-message p, .cloned-message ol, .cloned-message ul {
             margin-top: 0.5em !important;
             margin-bottom: 0.5em !important;
        }


        /* --- Control Panel Buttons --- */
        .control-btn {
            background-color: transparent;
            color: var(--purify-text-secondary);
            border: 1px solid var(--purify-text-secondary);
            padding: 6px 15px;
            cursor: pointer;
            border-radius: 50px; /* Pill shape */
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .control-btn:hover {
            background-color: var(--purify-text-secondary);
            color: var(--purify-bg-primary);
        }
        .control-btn.exit {
           /* No specific color needed, keep it subtle */
        }
        .control-btn.end-chat {
            border-color: #e53e3e;
            color: #e53e3e;
        }
        .control-btn.end-chat:hover {
            background-color: #e53e3e;
            color: white;
        }

        /* --- Retry Button Styling (Subtle integration) --- */
        .retry-btn {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--purify-text-secondary);
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: var(--purify-radius);
            font-size: 12px;
            font-weight: bold;
            margin-top: 8px;
            transition: background-color 0.2s;
        }
        .retry-btn:hover {
            background-color: var(--purify-accent);
            color: white;
        }
    `);

    function findChatList() {
        return document.querySelector('main ol[class*="flex-col-reverse"]');
    }

    function findChatInputBar() {
        const main = document.querySelector('main');
        if (!main) return null;
        const textarea = main.querySelector('textarea');
        if (textarea) {
             return textarea.closest('main > div:last-child > div:last-child');
        }
        return document.querySelector('main > div:nth-child(2) > div:nth-child(3)');
    }

    function exitPurifiedMode() {
        if (purifiedContainer) {
            purifiedContainer.remove();
            purifiedContainer = null;
            purifiedChatArea = null;
        }

        if (observer) {
            observer.disconnect();
            observer = null;
        }
        if (window.purifyInputWatchdog) {
            clearInterval(window.purifyInputWatchdog);
            window.purifyInputWatchdog = null;
        }

        selectedMode = null;
        const buttons = document.getElementById('purify-selector-buttons');
        if (buttons) {
            buttons.style.display = 'flex';
        }

        console.log('Exited purified mode');
    }
    function ensureInputBarPosition() {
        if (!purifiedContainer || !purifiedChatArea) return;

        const purifiedInputArea = document.getElementById('purified-input-area');
        if (!purifiedInputArea) return;

        if (purifiedInputArea.children.length === 0 || !document.body.contains(purifiedInputArea.children[0])) {
            const chatInputBar = findChatInputBar();
            if (chatInputBar) {
                console.log("Purifier: 输入框丢失，重新捕获。");
                purifiedInputArea.innerHTML = '';
                purifiedInputArea.appendChild(chatInputBar);
            }
        }
    }
    function findEndChatButton() {
        let xpathPath;
        if (selectedMode === 'A') {
            xpathPath = '/html/body/div[1]/div[2]/div[2]/div/div[2]/main/div[2]/div[1]/div[2]/button[1]';
        } else if (selectedMode === 'B') {
            xpathPath = '/html/body/div[1]/div[2]/div[2]/div/div[2]/main/div[2]/div[1]/div[2]/button[4]';
        } else {
            console.error('No mode selected');
            return null;
        }
        const endChatButton = document.evaluate(
            xpathPath,
            document,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null
        ).singleNodeValue;

        return endChatButton;
    }

    function createControlPanel() {
        const controlPanel = document.createElement('div');
        controlPanel.id = 'purified-control-panel';
        const modeLabel = document.createElement('span');
        modeLabel.textContent = `Model: ${selectedMode}`;
        modeLabel.style.color = '#e2e8f0';
        modeLabel.style.fontWeight = 'bold';
        const exitBtn = document.createElement('button');
        exitBtn.textContent = 'Exit Purified Mode';
        exitBtn.className = 'control-btn exit';
        exitBtn.onclick = exitPurifiedMode;
        const endChatBtn = document.createElement('button');
        endChatBtn.textContent = 'openBox';
        endChatBtn.className = 'control-btn end-chat';
        endChatBtn.onclick = function() {
            const originalEndChatButton = findEndChatButton();
            if (originalEndChatButton) {
                originalEndChatButton.click();
                console.log(`End chat button clicked for mode ${selectedMode}`);
            } else {
                console.error(`Could not find end chat button for mode ${selectedMode}`);
            }
        };

        controlPanel.appendChild(modeLabel);
        controlPanel.appendChild(exitBtn);
        controlPanel.appendChild(endChatBtn);

        return controlPanel;
    }

    function setupPurifiedInterface() {
        if (!purifiedContainer) {
            purifiedContainer = document.createElement('div');
            purifiedContainer.id = 'purified-container';
            const controlPanel = createControlPanel();
            purifiedContainer.appendChild(controlPanel);

            purifiedChatArea = document.createElement('div');
            purifiedChatArea.id = 'purified-chat-area';

            const purifiedInputArea = document.createElement('div');
            purifiedInputArea.id = 'purified-input-area';

            purifiedContainer.appendChild(purifiedChatArea);
            purifiedContainer.appendChild(purifiedInputArea);
            document.body.appendChild(purifiedContainer);

            ensureInputBarPosition();
            if (!window.purifyInputWatchdog) {
                window.purifyInputWatchdog = setInterval(ensureInputBarPosition, 500);
            }
            const chatInputBar = findChatInputBar();
            if (chatInputBar) {
                purifiedInputArea.appendChild(chatInputBar);
            } else {
                console.warn("Purifier: Could not find the chat input bar.");
            }
        }
    }

    function findRetryButton() {
        let xpathPath;
        if (selectedMode === 'A') {
            xpathPath = '/html/body/div[1]/div[2]/div[2]/div/div[2]/main/div[1]/div/div/ol/div[2]/div[1]/div[1]/div[1]/div[2]/div[3]/button[1]';
        } else if (selectedMode === 'B') {
            xpathPath = '/html/body/div[1]/div[2]/div[2]/div/div[2]/main/div[1]/div/div/ol/div[2]/div[2]/div[1]/div[1]/div[2]/div[3]/button[1]';
        } else {
            console.error('No mode selected');
            return null;
        }
        const retryButton = document.evaluate(
            xpathPath,
            document,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null
        ).singleNodeValue;

        if (retryButton) {
            return retryButton;
        }

        const chatList = findChatList();
        if (!chatList) return null;

        const lastAIMessageBlock = chatList.querySelector('div[data-sentry-component="AIMessage"]:last-of-type');
        if (lastAIMessageBlock) {
            const abChildren = lastAIMessageBlock.querySelectorAll('div[class*="relative flex-1"]');
            if (abChildren.length >= 2) {
                const targetChild = selectedMode === 'A' ? abChildren[0] : abChildren[1];
                return targetChild.querySelector('button[aria-label*="retry"], button[title*="retry"], button:has(svg)');
            }
        }

        return null;
    }

    function createRetryButton() {
        const retryBtn = document.createElement('button');
        retryBtn.textContent = `Retry ${selectedMode}`;
        retryBtn.className = 'retry-btn';
        retryBtn.onclick = function() {
            const originalRetryButton = findRetryButton();
            if (originalRetryButton) {
                originalRetryButton.click();
                console.log(`Retry button ${selectedMode} clicked`);
            } else {
                console.error(`Could not find original retry button for mode ${selectedMode}`);
            }
        };
        return retryBtn;
    }

    function syncChatContent() {
        const chatList = findChatList();
        if (!chatList || !purifiedChatArea) return;

        purifiedChatArea.innerHTML = '';

        const messages = Array.from(chatList.children);

        messages.forEach((message, index) => {
            if (message.className.includes('h-[')) {
                 return;
            }

            let elementToClone = null;
            let cloneType = 'cloned-history';

            const isUserMessage = message.getAttribute('data-sentry-component') === 'UserMessage';
            const potentialABChildren = message.querySelectorAll('div[class*="relative flex-1"]');
            const isABBlock = potentialABChildren.length === 2;

            if (isUserMessage) {
                 elementToClone = message;
                 cloneType = 'cloned-user';
            } else if (isABBlock) {
                if (selectedMode === 'A') {
                    elementToClone = potentialABChildren[0];
                } else if (selectedMode === 'B') {
                    elementToClone = potentialABChildren[1];
                }
                cloneType = 'cloned-ai';

            } else if (potentialABChildren.length >= 1 || message.querySelector('div[class*="flex-col w-full"]')) {
                 elementToClone = message;
                 cloneType = 'cloned-ai';
            }


            if (elementToClone) {
                const clonedElement = elementToClone.cloneNode(true);
                clonedElement.classList.remove('flex-1', 'min-w-0', 'w-full', 'flex', 'flex-col', 'relative');
                clonedElement.style.width = 'auto';
                clonedElement.classList.add('cloned-message', cloneType);
                if (cloneType === 'cloned-ai') {
                    const retryBtn = createRetryButton();
                    clonedElement.appendChild(retryBtn);
                }

                purifiedChatArea.appendChild(clonedElement);
            }
        });
    }

    function startPurification(mode) {
        selectedMode = mode;
        console.log(`Starting purification mode: ${mode}`);

        const buttons = document.getElementById('purify-selector-buttons');
        if (buttons) buttons.style.display = 'none';

        setupPurifiedInterface();

        const chatList = findChatList();
        if (!chatList) {
            console.error("Purifier: Could not find the main chat list (<ol>).");
            return;
        }

        syncChatContent();

        if (observer) observer.disconnect();

        observer = new MutationObserver((mutations) => {
            if (window.syncTimeout) clearTimeout(window.syncTimeout);
            window.syncTimeout = setTimeout(syncChatContent, 50);
        });

        observer.observe(chatList, {
            childList: true,
            subtree: true,
            characterData: true,
            attributes: false
        });
    }

    function createButtons() {
        if (document.getElementById('purify-selector-buttons')) return;

        const buttonContainer = document.createElement('div');
        buttonContainer.id = 'purify-selector-buttons';

        const buttonA = document.createElement('button');
        buttonA.textContent = 'Purify A (Left)';
        buttonA.className = 'purify-btn';
        buttonA.onclick = () => startPurification('A');

        const buttonB = document.createElement('button');
        buttonB.textContent = 'Purify B (Right)';
        buttonB.className = 'purify-btn';
        buttonB.onclick = () => startPurification('B');

        buttonContainer.appendChild(buttonA);
        buttonContainer.appendChild(buttonB);
        document.body.appendChild(buttonContainer);
    }

    const waitForLoad = setInterval(() => {
        if (findChatList() && findChatInputBar()) {
            if (!document.getElementById('purify-selector-buttons')){
                 createButtons();
            }
            if (purifiedContainer && purifiedContainer.style.display !== 'none') {
            } else {
                 const buttons = document.getElementById('purify-selector-buttons');
                 if (buttons) buttons.style.display = 'flex';
            }
        }
    }, 1000);

})();