Bing Copilot Chat Width Wizard (style)

Designed to optimize the width of the chat window, you can enjoy the best chat experience at any screen size. This plugin provides a more intuitive and comfortable chat interface by automatically adjusting and customizing element widths.|界面优化

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Bing Copilot Chat Width Wizard (style)
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Designed to optimize the width of the chat window, you can enjoy the best chat experience at any screen size. This plugin provides a more intuitive and comfortable chat interface by automatically adjusting and customizing element widths.|界面优化
// @author       Bela Proinsias
// @match        https://copilot.microsoft.com/chats/*
// @match        https://copilot.microsoft.com/*
// @icon         https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://microsoft.co&size=64
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to adjust the width of elements with specific classes
    function adjustWidth() {
        const windowWidth = window.innerWidth;
        const adjustedWidth = windowWidth * 0.85; // if you wanna change the width, eg. 0.8, 0.9, 0.95, etc.
        const elements = document.querySelectorAll('[data-content="conversation"]');
        elements.forEach(element => {
            element.style.maxWidth = adjustedWidth + 'px';
            element.style.width = adjustedWidth + 'px';
        });
    }

    // Function to observe DOM changes
    function observeDOMChanges() {
        const observer = new MutationObserver(adjustWidth);
        const config = { childList: true, subtree: true };

        // Start observing the document body for changes
        observer.observe(document.body, config);
    }

    // Adjust width on window load and start observing DOM changes
    window.addEventListener('load', () => {
        adjustWidth();
        observeDOMChanges();
    });

    // Adjust width on window resize
    window.addEventListener('resize', adjustWidth);
})();