☰

lmsys chat only

When you open the site https://chat.lmsys.org/ goes to the "Direct Chat" tab makes the model selection blocks, the chat window and the query input block fixed above all other elements.

当前为 2024-03-08 提交的版本，查看 最新版本。

// ==UserScript==
// @name         lmsys chat only
// @namespace    Apache-2.0
// @version      1.1.1
// @description  When you open the site https://chat.lmsys.org/ goes to the "Direct Chat" tab makes the model selection blocks, the chat window and the query input block fixed above all other elements.
// @author       Tony 0tis
// @license      Apache-2.0
// @match        *://chat.lmsys.org
// @icon         https://chat.lmsys.org/favicon.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    class lmsysChat {
        constructor(){
            this.button = null;
            this.tab = null;

            console.log('start check');
            this.setCss();
            this.setMeta();
            this.setObserver();
        }

        setMeta(){
            const meta = document.createElement('meta');
            meta.name = 'viewport';
            meta.content = 'width=device-width, initial-scale=1';
            document.head.appendChild(meta);
        }

        setCss(){
            const css = document.createElement('style');
            css.innerHTML = `
html{
    overflow: hidden;
}
.directChat{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1000;
}
.directChat .directChatBg{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 300;
    background: rgb(11, 15, 25);
}
.directChat #model_selector_row{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 600;

    left: 50%;
    transform: translate(-50%);
    max-width: 900px;
}
.directChat .directChatInput{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 7px;
    z-index: 600;
    background: rgb(11, 15, 25);

    left: 50%;
    transform: translate(-50%);
    max-width: 900px;
    width: 100%;
}
.directChat .directChatSend{
    min-width: 90px !important;
}
.directChat #input_box{
    padding: 0;
}
.directChat .directChatVotes{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 600;
    height: 40px;
    flex-wrap: initial;
    overflow: hidden;

    left: 50%;
    transform: translate(-50%);
    max-width: 900px;
}
.directChat .directChatVotes>button{
    min-width: auto;
    padding: 0;
    line-height: 1;
}
.directChat #chatbot{
	position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 108px;
    height: auto !important;
    z-index: 500;

    left: 50%;
    transform: translate(-50%);
    max-width: 900px;
}
.chatModeSwitcher {
    padding: 8px !important;
    border-radius: 3px !important;
    background: #f36812 !important;
    margin: -6px 0 !important;
    margin-left: -12px !important;
    width: 55px !important;
    margin-right: 10px !important;
}
.chatModeSwitcher:hover{
    opacity: 0.8;
}
`;
            document.head.appendChild(css);
        }

        setObserver(){
            const observer = new MutationObserver((mutationsList, observer)=>{
                for (const mutation of mutationsList) {
                    for(const node of mutation.addedNodes){
                        if(node.nodeName === 'BUTTON' && node.innerText.includes('Direct Chat')){
                            console.log('select chat');
                            this.riseChat(node);
                        }
                    }
                }
            });
            observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
            document.addEventListener('beforeunload', ()=>{
                observer.disconnect();
            });
        }

        async riseChat(button){
            if(!button.classList.contains('selected')){
                this.button = button;
                button.dispatchEvent(new Event('click'));
                await this._timeout(200);
            }

            const tab = this._find(document, '.tabitem', el=>el.style.display === 'block');
            if(!tab) return;
            this.tab = tab;

            if(tab.classList.contains('directChat')) return;

            tab.classList.add('directChat');

            if(!document.querySelector('.directChatBg')){
                const bg = document.createElement('div');
                bg.classList.add('directChatBg');
                tab.appendChild(bg);
            }

            const inputComponent = this._find(tab, '[id="input_box"]', el=>el, el=>el.id?.includes('component'));
            if(inputComponent && !inputComponent.classList.contains('directChatInput')){
                inputComponent.classList.add('directChatInput');
                const button = inputComponent.querySelector('button');
                if(button && !button.classList.contains('directChatSend')){
                    button.classList.add('directChatSend');
                }
            }

            const upvoteComponent = this._find(tab, 'button', el=>el.innerText.includes('Upvote'), el=>el.id?.includes('component'));
            if(upvoteComponent && !upvoteComponent.classList.contains('directChatVotes')){
                upvoteComponent.classList.add('directChatVotes');
            }

            const selector = tab.querySelector('[role="listbox"]');
            if(selector && !tab.querySelector('.chatModeSwitcher')){
                const button = document.createElement('button');
                button.classList.add('chatModeSwitcher');
                button.addEventListener('click', e=>this._switchChatMode(e));
                button.innerHTML = '🪟';
                button.title = 'Switch fullscreen/tabs';
                selector.parentNode.insertBefore(button, selector);
            }
        }

        _switchChatMode(e){
            if(!this.tab) return;
            if(this.tab.classList.contains('directChat')){
                this.tab.classList.remove('directChat');
                document.querySelector('html').style.overflow = 'auto'
            }
            else{
                this.tab.classList.add('directChat');
                document.querySelector('html').style.overflow = 'hidden';
            }
        }

        _find(doc, where, filter, parents){
            let el = [...doc.querySelectorAll(where)].filter(filter)[0];
            if(parents){
                let s = el.parentNode;
                while(s){
                    if(parents(s)){
                        break;
                    }

                    s = s.parentNode;
                }
                if(s) el = s;
            }
            return el;
        }

        _timeout(timeout = 200){
            clearTimeout(this.timeout);

            return new Promise(resolve=>{
                this.timeout = setTimeout(resolve, timeout);
            });
        }
    }

    new lmsysChat();
})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址