ChatGPT Model Switcher: Toggle on/off 4o-mini Improved Version

Injects a button allowing you to toggle on/off 4o-mini during the chat
换行
// ==UserScript==
// @name         ChatGPT Model Switcher: Toggle on/off 4o-mini Improved Version
// @namespace    http://tampermonkey.net/
// @version      0.24.1
// @description  Injects a button allowing you to toggle on/off 4o-mini during the chat
// @match        *://chatgpt.com/*
// @author       d0gkiller87, improved UI by Aoshi Xu
// @license      MIT
// @grant        unsafeWindow
// @grant        GM.setValue
// @grant        GM.getValue
// @run-at       document-idle
// ==/UserScript==
 
(async function() {
  'use strict';
 
  class ModelSwitcher {
    constructor( useMini = true ) {
      this.useMini = useMini;
      this.containerSelector = '#composer-background div:nth-of-type(2) div:first-child';
    }
 
    hookFetch() {
      const originalFetch = unsafeWindow.fetch;
      unsafeWindow.fetch = async ( resource, config = {} ) => {
        if (
          resource === 'https://chatgpt.com/backend-api/conversation' &&
          config.method === 'POST' &&
          config.headers &&
          config.headers['Content-Type'] === 'application/json' &&
          config.body
        ) {
          if ( this.useMini ) {
            const body = JSON.parse( config.body );
            body.model = 'gpt-4o-mini';
            config.body = JSON.stringify( body );
          }
        }
        return originalFetch( resource, config );
      };
    }
 
    injectToggleButtonStyle() {
      // Credit: https://webdevworkshop.io/code/css-toggle-button/
      if ( !document.getElementById( 'toggleCss' ) ) {
        const styleNode = document.createElement( 'style' );
        styleNode.id = 'toggleCss';
        styleNode.type = 'text/css';
        styleNode.textContent = `.toggle {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.5rem;
  background-color: hsl(0deg 0% 40%);
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.2s ease-in;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 1.4rem;
  left: 0.1rem;
  height: calc(1.5rem - 2px);
  top: 1px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.2s ease-out;
}
.hide-me {
  opacity: 0;
  height: 0;
  width: 0;
}`;
        document.head.appendChild( styleNode );
      }
    }
 
    getContainer() {
      return document.querySelector( this.containerSelector );
    }
 
    injectToggleButton( container = null ) {
      console.log( 'inject' );
      if ( !container ) container = this.getContainer();
      if ( !container ) {
        console.error( 'container not found!' );
        return;
      }
      if ( container.querySelector( '#cb-toggle' ) ) {
        console.log( '#cb-toggle already exists' );
        return;
      }
      container.classList.add('items-center');
      
      const button = document.createElement('button');
      button.id = 'cb-toggle';
      button.className = 'flex h-8 min-w-8 items-center justify-center rounded-lg p-1 text-xs font-semibold hover:bg-black/10 focus-visible:outline-black dark:focus-visible:outline-white';
      button.setAttribute('aria-pressed', 'false');
      button.setAttribute('aria-label', 'Toggle GPT-4o Mini');
      button.innerHTML = `<svg width='24' height='24' viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'><path d='m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z'/></svg>`
      button.style.backgroundColor = this.useMini ? 'hsl(102, 58%, 39%)' : 'transparent';
      button.addEventListener('click', () => {
        this.useMini = !this.useMini;
        console.log( `useMini: ${this.useMini}` );
        GM.setValue('useMini', this.useMini);
        button.setAttribute('aria-pressed', this.useMini);
        button.title = `Using model: ${this.useMini ? 'GPT-4o mini' : 'original'}`;
        button.style.backgroundColor = this.useMini ? 'hsl(102, 58%, 39%)' : 'transparent';
        
      });
      container.appendChild(button);
    }
 
    monitorChild( nodeSelector, callback ) {
      const node = document.querySelector( nodeSelector );
      if ( !node ) {
        console.log( `${ nodeSelector } not found!` )
        return;
      }
      const observer = new MutationObserver( mutationsList => {
        for ( const mutation of mutationsList ) {
          console.log( nodeSelector );
          callback( observer, mutation );
          break;
        }
      });
      observer.observe( node, { childList: true } );
    }
 
    __tagAttributeRecursively(selector) {
      // Select the node using the provided selector
      const rootNode = document.querySelector(selector);
      if (!rootNode) {
        console.warn(`No element found for selector: ${selector}`);
        return;
      }
 
      // Recursive function to add the "xx" attribute to the node and its children
      function addAttribute(node) {
        node.setAttribute("xxx", ""); // Add the attribute to the current node
        Array.from(node.children).forEach(addAttribute); // Recurse for all child nodes
      }
 
      addAttribute(rootNode);
    }
 
 
    monitorNodesAndInject() {
      this.monitorChild( 'body main', () => {
        this.injectToggleButton();
 
        this.monitorChild( 'main div:first-child div:first-child', ( observer, mutation ) => {
          observer.disconnect();
          this.injectToggleButton();
        });
      });
 
      this.monitorChild( this.containerSelector, ( observer, mutation ) => {
        observer.disconnect();
        setTimeout( () => this.injectToggleButton(), 500 );
      });
      this.monitorChild( 'main div:first-child div:first-child', ( observer, mutation ) => {
        observer.disconnect();
        this.injectToggleButton();
      });
    }
  }
 
  const useMini = await GM.getValue( 'useMini', true );
  const switcher = new ModelSwitcher( useMini );
  switcher.hookFetch();
  switcher.injectToggleButtonStyle();
  switcher.monitorNodesAndInject();
})();