Qwen Chat: One-Click Toggle Overview Button

One-Click Toggle Overview Button

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         Qwen Chat: One-Click Toggle Overview Button
// @name:ru      Qwen Chat: Кнопка для мгновенного включения/выключения обзора
// @namespace    http://tampermonkey.net/
// @description  One-Click Toggle Overview Button
// @description:ru Кнопка для мгновенного включения/выключения обзора
// @author       a114_you
// @version      1.2
// @match        https://chat.qwen.ai/*
// @grant        none
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const CONTEXT_BTN_ID       = 'chat-context-menu-button';
  const MENU_SELECTOR        = 'div[role="menu"][data-state="open"]';
  const OVERVIEW_ICON_CLASS  = 'icon-map-01';
  const BUTTON_ID            = 'direct-overview-btn';
  const CLOSE_ICON_CLASS     = 'icon-line-x-01'; 

  function isOverviewOpen() {
    return !!document.querySelector('[data-testid="svelte-flow__wrapper"]');
  }

  async function openOverviewIfNeeded() {
    if ( isOverviewOpen() ) return false;
    const trigger = document.getElementById(CONTEXT_BTN_ID);
    if (!trigger) return false;
    trigger.click();
    await new Promise(r => setTimeout(r, 100));
    const menu = document.querySelector(MENU_SELECTOR);
    if (!menu) return false;
    // find the item by its icon
    const icon = menu.querySelector(`.${OVERVIEW_ICON_CLASS}`);
    const item = icon?.closest('[role="menuitem"]');
    if (!item) return false;
    // use whatever text the menu item has
    const label = item.textContent.trim();
    const btn   = document.getElementById(BUTTON_ID);
    if (btn) btn.querySelector('span').textContent = label;
    item.click();
    // wait for panel
    for (let i=0; i<10 && !isOverviewOpen(); i++) {
      await new Promise(r => setTimeout(r, 100));
    }
    return isOverviewOpen();
  }

  function closeOverview() {
    const closeIcon = document.querySelector(`.${CLOSE_ICON_CLASS}`);
    const closeButton = closeIcon?.closest('button');

    if (closeButton) {
      closeButton.click();
      return true;
    }
    return false;
  }

  function insertButton() {
    const op = document.querySelector('.operationBtn');
    if (!op || document.getElementById(BUTTON_ID)) return;
    op.insertAdjacentHTML('beforeend', `
      <div id="${BUTTON_ID}"
           class="flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm
                  hover:bg-gray-50 dark:hover:bg-gray-800"
           title="Toggle Overview">
        <i class="iconfont leading-none ${OVERVIEW_ICON_CLASS}"></i>
        <span></span>
      </div>`);

    document.getElementById(BUTTON_ID)
      .addEventListener('click', async () => {
        if (isOverviewOpen()) {
          closeOverview();
        } else {
          await openOverviewIfNeeded();
        }
      });
  }

  insertButton();
  new MutationObserver(insertButton)
    .observe(document.body, { childList: true, subtree: true });

})();