Greasy Fork is available in English.

AI Chat Message Row Max-Width

Adjust Content Max-Width

// ==UserScript==
// @name         AI Chat Message Row Max-Width
// @namespace    http://tampermonkey.net/
// @version      0.9
// @description  Adjust Content Max-Width
// @author       shawn-wxn
// @match        https://claude.ai/*
// @match        https://poe.com/*
// @match        https://*.geeksmonkey.com/*
// @match        https://*.perplexity.ai/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=claude.ai
// @grant        GM_addStyle
// @grant        GM_log
// @license      GPL-2.0-only
// ==/UserScript==

(function () {
    // 获取当前的 URL
    var currentURL = window.location.href;

    // 根据当前 URL 进行 if-else 逻辑判断
    if (currentURL.includes("poe.com")) {
        var inputFooter = document.querySelector("div[class^='ChatPageMainFooter_footerInner__']");
        var inputFooterClass = null;
        for (var className of inputFooter.classList){
            if (className.indexOf('ChatPageMainFooter_footerInner__') !== -1) {
                inputFooterClass = className;
                break;
            }
        }
        if (!inputFooterClass) {
            GM_log("ERROR: not found inputFooterClass.");
        }

        var chatPageMainDiv = document.querySelector("div[class^='InfiniteScroll_container__']");
        var chatPageMainDivClass = null;
        for (className of chatPageMainDiv.classList){
            if (className.indexOf('InfiniteScroll_container__') !== -1) {
                chatPageMainDivClass = className;
                break;
            }
        }
        if (!chatPageMainDivClass) {
            GM_log("ERROR: not found chatPageMainDivClass.");
        }

        var humanMessageDiv = document.querySelector("div[class^='Message_humanMessageBubble__']");
        var humanMessageDivClass = null;
        for (className of humanMessageDiv.classList){
            if (className.indexOf('Message_humanMessageBubble__') !== -1) {
                humanMessageDivClass = className;
                break;
            }
        }
        if (!humanMessageDivClass) {
            GM_log("ERROR: not found humanMessageDivClass.");
        }

        var botMessageDiv = document.querySelector("div[class^='Message_botMessageBubble__']");
        var botMessageDivClass = null;
        for (className of botMessageDiv.classList){
            if (className.indexOf('Message_botMessageBubble__') !== -1) {
                botMessageDivClass = className;
                break;
            }
        }
        if (!botMessageDivClass) {
            GM_log("ERROR: not found botMessageDivClass.");
        }

        GM_addStyle(`
    .${inputFooterClass} {
    --desktop-reading-column-max-width: ${Math.floor(window.innerWidth * 0.048)}rem;
    }
    .${chatPageMainDivClass} {
    --desktop-reading-column-max-width: ${Math.floor(window.innerWidth * 0.048)}rem;
    }
    .${humanMessageDivClass} {
    max-width: ${Math.floor(window.innerWidth * 0.078)}ch;
    }
    .${botMessageDivClass} {
    max-width: ${Math.floor(window.innerWidth * 0.078)}ch;
    }`
    )
    } else if (currentURL.includes("claude.ai")) {
        // 创建一个<style>标签
        var styleTag = document.createElement('style');

        // 将 CSS 样式添加到<style>标签中
        var cssStyles = `
            /* 在这里添加您的 CSS 样式 */
            .max-w-3xl {
              max-width: ${Math.floor(window.innerWidth * 0.05)}rem;
            }
            .max-w-\\[75ch\\] {
              max-width: ${Math.floor(window.innerWidth * 0.1)}ch;
            }
            .max-w-\\[60ch\\] {
              max-width: ${Math.floor(window.innerWidth * 0.1)}ch;
            }
        `;

        // 设置<style>标签的内容为 CSS 样式
        styleTag.innerHTML = cssStyles;

        // 将<style>标签添加到<head>标签中
        document.head.appendChild(styleTag);
    } else if (currentURL.includes("geeksmonkey.com")){
        // 选择目标节点
        const targetNode = document.getElementById('app');

        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(function(mutations) {
            // 遍历所有的变动记录
            mutations.forEach(function(mutation) {
                // 检查是否有子节点被移除
                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
                    // 遍历所有被移除的节点
                    for (let i = 0; i < mutation.removedNodes.length; i++) {
                        // 检查这个节点是否是我们关注的节点（具有class=load-wrapper）
                        const node = mutation.removedNodes[i];
                        if (node.nodeType === Node.ELEMENT_NODE){
                            if (node.classList.contains('loading-wrap')) {
                                // 动画结束，load-wrapper元素被移除
                                // 在这里执行你想要进行的操作
                                var imageWraperDiv = document.getElementById("image-wrapper");
                                var imageWraperDivClass = null;
                                for (className of imageWraperDiv.classList) {
                                    if (className.indexOf('max-w-screen-xl') !== -1) {
                                        imageWraperDivClass = className;
                                        break;
                                    }
                                }
                                if (!imageWraperDivClass) {
                                    GM_log("ERROR: not found imageWraperDivClass.");
                                }

                                GM_addStyle(`
                                 .${imageWraperDivClass} {
                                   max-width: ${Math.floor(window.innerWidth * 0.83)}px;
                                 }`
                            )

                                // 一旦检测到load-wrapper元素被移除，就断开观察器
                                observer.disconnect();
                                return; // 退出循环和回调函数
                            }
                        }
                    }
                }
            });
        });

        // 配置观察选项:
        const config = { attributes: false, childList: true, subtree: true };

        // 传入目标节点和观察选项开始观察
        observer.observe(targetNode, config);


    } else if (currentURL.includes("perplexity.ai")){
        // 创建一个<style>标签
        var styleTag = document.createElement('style');

        // 将 CSS 样式添加到<style>标签中
        var cssStyles = `
            /* 在这里添加您的 CSS 样式 */
            .max-w-threadWidth {
              max-width: ${Math.floor(window.innerWidth * 0.85)}px;
            }
        `;

        // 设置<style>标签的内容为 CSS 样式
        styleTag.innerHTML = cssStyles;

        // 将<style>标签添加到<head>标签中
        document.head.appendChild(styleTag);
    } else {
        // 如果以上条件都不满足
        console.log("当前 URL 不符合预期");
    }
})();