☰

AI对话窗口增强专业版

为主流AI平台优化对话窗口体验：支持ChatGPT、Claude、Kimi、通义千问、智谱GLM、天工、Deepseek、Gemini

  1. // ==UserScript==
  2. // @name         AI Chat Window Enhancer Pro
  3. // @name:zh-CN   AI对话窗口增强专业版
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.3.4
  6. // @description  Enhanced chat window for various AI platforms: ChatGPT, Claude, Kimi, Tongyi, ChatGLM, Tiangong, Deepseek, Gemini
  7. // @description:zh-CN  为主流AI平台优化对话窗口体验：支持ChatGPT、Claude、Kimi、通义千问、智谱GLM、天工、Deepseek、Gemini
  8. // @author       Claude
  9. // @match        *://chatgpt.com/*
  10. // @match        *://new.oaifree.com/*
  11. // @match        *://shared.oaifree.com/*
  12. // @match        *://www.aicnn.cn/oaifree/*
  13. // @match        *://chat.aicnn.xyz/*
  14. // @match        *://plus.aivvm.com/*
  15. // @match        *://kimi.moonshot.cn/*
  16. // @match        *://tongyi.aliyun.com/qianwen*
  17. // @match        *://www.tiangong.cn/*
  18. // @match        *://chatglm.cn/*
  19. // @match        *://claude.ai/*
  20. // @match        *://chat.deepseek.com/*
  21. // @include      *://*claude*/*
  22. // @match        *://chat.kelaode.ai/*
  23. // @match        *://gemini.google.com/*
  24. // @icon         data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSIgcnk9IjUiIGZpbGw9IiM2YmIiLz4KICA8cGF0aCBkPSJtMTcgMTMuNyA0LTQtNC00bS0xMCA4LTQtNCA0LTRtMTMuOTk5IDMuODI1SDMuMjE1Ii8+CiAgPHBhdGggZD0iTTE5IDE2aC0yLjVhLjk5LjkgMCAwIDAtLjc3NS4zNzVsLTIuOSAzLjY1Yy0uNC41LTEuMTYyLjUtMS41NjMgMGwtMi45MjUtMy42NUEuOTkuOSAwIDAgMCA3LjUgMTZINWMtMS42NjMgMC0zLTEuMzM4LTMtM1Y2YzAtMS42NjIgMS4zNS0zIDMtM2gxNGEzIDMgMCAwIDEgMyAzdjdjMCAxLjY2Mi0xLjM1IDMtMyAzWiIgZmlsbC1vcGFjaXR5PSIuMTYiIHN0cm9rZT0iI0VFRSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L3N2Zz4K
  25. // @license      AGPL-3.0
  26. // @grant        GM_addStyle
  27. // @noframes
  28. // ==/UserScript==
  29.  
  30. (function() {
  31.     'use strict';
  32.  
  33.     // 统一的样式配置
  34.     const STYLE_CONFIG = {
  35.         maxWidth: '95%',
  36.         maxViewportWidth: '90vw',
  37.         scrollbarWidth: 'thin',
  38.         scrollbarThumbColor: '#aaaa',
  39.         scrollbarTrackColor: '#1111',
  40.         codeBlockScrollbarHeight: '8px',
  41.         codeBlockScrollbarThumbColor: '#666',
  42.         codeBlockScrollbarTrackColor: '#f1f1f1',
  43.         // 代码块选中样式
  44.         codeSelectionBgColor: 'rgba(70, 130, 180, 0.5)',     // 深色主题选中背景色
  45.         codeSelectionTextColor: 'white',                     // 深色主题选中文本色
  46.         lightCodeSelectionBgColor: 'rgba(0, 120, 215, 0.3)', // 浅色主题选中背景色
  47.         lightCodeSelectionTextColor: 'black'                 // 浅色主题选中文本色
  48.     };
  49.  
  50.     // 通用代码块样式
  51.     const CODE_BLOCK_STYLES = `
  52.         /* 代码块样式优化 */
  53.         pre > div.rounded-md,
  54.         .code-block__code {
  55.             min-height: 1.5em;
  56.             height: auto !important;
  57.         }
  58.         /* 保持代码块的水平滚动，移除纵向限制 */
  59.         pre > div.rounded-md > div.overflow-y-auto,
  60.         .code-block__code {
  61.             max-height: none !important;
  62.             height: auto !important;
  63.             overflow-y: visible !important;
  64.             overflow-x: auto !important;
  65.         }
  66.         /* 移除代码块的折叠按钮 */
  67.         button[class*="code-block-collapse-button"],
  68.         div[class*="code-block-collapse"] {
  69.             display: none !important;
  70.         }
  71.         /* 确保代码块始终展开 */
  72.         div[class*="code-block-wrapper"].collapsed {
  73.             max-height: none !important;
  74.             height: auto !important;
  75.         }
  76.         /* 优化代码块滚动条样式 */
  77.         pre > div.rounded-md > div.overflow-y-auto::-webkit-scrollbar,
  78.         .code-block__code::-webkit-scrollbar {
  79.             height: ${STYLE_CONFIG.codeBlockScrollbarHeight};
  80.             width: ${STYLE_CONFIG.codeBlockScrollbarHeight};
  81.         }
  82.         pre > div.rounded-md > div.overflow-y-auto::-webkit-scrollbar-thumb,
  83.         .code-block__code::-webkit-scrollbar-thumb {
  84.             background: ${STYLE_CONFIG.codeBlockScrollbarThumbColor};
  85.             border-radius: 4px;
  86.         }
  87.         pre > div.rounded-md > div.overflow-y-auto::-webkit-scrollbar-track,
  88.         .code-block__code::-webkit-scrollbar-track {
  89.             background: ${STYLE_CONFIG.codeBlockScrollbarTrackColor};
  90.         }
  91.  
  92.         /* 代码块文本选中样式 - 适用于深色背景 */
  93.         pre code::selection,
  94.         .code-block__code code::selection,
  95.         pre div::selection,
  96.         .code-block__code div::selection,
  97.         pre span::selection,
  98.         .code-block__code span::selection,
  99.         div[class*="codeBlockContainer"] *::selection,
  100.         div[class*="code-block"] *::selection {
  101.             background-color: ${STYLE_CONFIG.codeSelectionBgColor} !important;
  102.             color: ${STYLE_CONFIG.codeSelectionTextColor} !important;
  103.         }
  104.  
  105.         /* 浅色背景代码块的选中样式 */
  106.         pre.bg-white code::selection,
  107.         pre.bg-gray-50 code::selection,
  108.         pre.bg-slate-50 code::selection,
  109.         .light-theme pre code::selection,
  110.         .light pre code::selection {
  111.             background-color: ${STYLE_CONFIG.lightCodeSelectionBgColor} !important;
  112.             color: ${STYLE_CONFIG.lightCodeSelectionTextColor} !important;
  113.         }
  114.  
  115.         /* 提升代码块hover时的可识别性 */
  116.         pre:hover,
  117.         .code-block__code:hover,
  118.         div[class*="codeBlockContainer"]:hover,
  119.         div[class*="code-block"]:hover {
  120.             box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  121.             transition: box-shadow 0.2s ease-in-out;
  122.         }
  123.     `;
  124.  
  125.     // 平台特定的样式定义
  126.     const PLATFORM_STYLES = {
  127.         kimi: `
  128.             div[data-testid] div[data-index] div.MuiBox-root {
  129.                 max-width: 100% !important;
  130.             }
  131.             div[class^=mainContent] div.MuiBox-root > div[class^=chatBottom_] {
  132.                 max-width: calc(100% - 100px);
  133.             }
  134.             div[class^=mainContent] div[class^=chatInput_] div[class^=inputInner_] div[class^=editor] {
  135.                 max-height: 360px;
  136.             }
  137.             #scroll-list div[class^=chatItemBox_].MuiBox-root {
  138.                 max-width: 100%;
  139.             }
  140.             div.MuiBox-root[class^=homepage] div[class^=mainContent] div[class^=chatInput_] div[class^=inputInner_] div[class^=editor] {
  141.                 max-height: 600px;
  142.             }
  143.             #root > div > div[class*=mainContent] > div[class*=layoutContent] > div.MuiBox-root > div.MuiBox-root[class*=homepage] > div.MuiContainer-root.MuiContainer-maxWidthMd {
  144.                 max-width: calc(100% - 100px);
  145.             }
  146.             ${CODE_BLOCK_STYLES}
  147.         `,
  148.         deepseek: `
  149.             div:has(> #latest-context-divider) {
  150.                 width: ${STYLE_CONFIG.maxWidth} !important;
  151.             }
  152.             div:has(> div > #chat-input) {
  153.                 width: ${STYLE_CONFIG.maxWidth} !important;
  154.                 max-width: ${STYLE_CONFIG.maxViewportWidth};
  155.             }
  156.             ${CODE_BLOCK_STYLES}
  157.         `,
  158.         tongyi: `
  159.             div[class^=mainContent] div[class^=questionItem--],
  160.             div[class^=mainContent] div[class^=answerItem--] {
  161.                 width: 90% !important;
  162.                 max-width: ${STYLE_CONFIG.maxViewportWidth};
  163.             }
  164.             ${CODE_BLOCK_STYLES}
  165.         `,
  166.         tiangong: `
  167.             #app > div > div > main > div.overflow-y-scroll.w-full > div.search-content.relative.flex.w-full.flex-row.justify-center,
  168.             #app > div > div > main > div.overflow-y-scroll.w-full > div.search-content.relative.flex.w-full.flex-row.justify-center > label.w-full.cursor-default.select-auto,
  169.             label.w-full {
  170.                 max-width: calc(100% - 100px);
  171.                 --search-max-width: calc(100% - 100px);
  172.             }
  173.             :root {
  174.                 --search-max-width: calc(100% - 100px);
  175.             }
  176.             ${CODE_BLOCK_STYLES}
  177.         `,
  178.         chatglm: `
  179.             div.conversation-inner.dialogue > div.conversation-list.detail > div.item.conversation-item,
  180.             .markdown-body.md-body {
  181.                 max-width: ${STYLE_CONFIG.maxViewportWidth} !important;
  182.             }
  183.             ${CODE_BLOCK_STYLES}
  184.         `,
  185.         gemini: `
  186.             #chat-history > infinite-scroller > div,
  187.             #app-root > main > side-navigation-v2 > bard-sidenav-container > bard-sidenav-content > div > div > div.content-container > chat-window > div.chat-container.ng-star-inserted > div.bottom-container.response-optimization.ng-star-inserted,
  188.             #app-root > main > side-navigation-v2 > bard-sidenav-container > bard-sidenav-content > div > div > div.content-container > chat-window > div.chat-container.ng-star-inserted > div.bottom-container.response-optimization.ng-star-inserted > div.input-area-container.ng-star-inserted {
  189.                 max-width: calc(100% - 20px);
  190.             }
  191.             ${CODE_BLOCK_STYLES}
  192.         `,
  193.         default: `
  194.             .xl\\:max-w-\\[48rem\\] {
  195.                 width: ${STYLE_CONFIG.maxWidth} !important;
  196.                 max-width: 96% !important;
  197.             }
  198.             div.mx-auto.md\\:max-w-3xl,
  199.             div.mx-auto.flex {
  200.                 max-width: calc(100% - 10px);
  201.             }
  202.             ${CODE_BLOCK_STYLES}
  203.             .ProseMirror.break-words.ProseMirror-focused {
  204.                 max-width: 100%;
  205.             }
  206.             body > div.flex.min-h-screen.w-full div.flex.flex-col div.flex.gap-2 div.mt-1.max-h-96.w-full.overflow-y-auto.break-words > div.ProseMirror.break-words {
  207.                 max-width: 90%;
  208.             }
  209.             main > div.composer-parent article > div.text-base > div.mx-auto,
  210.             main article > div.text-base > div.mx-auto {
  211.                 max-width: ${STYLE_CONFIG.maxWidth};
  212.             }
  213.             body > div.flex.min-h-screen.w-full > div > main > div.top-5.z-10.mx-auto.w-full.max-w-2xl.md,
  214.             body > div.flex.min-h-screen.w-full > div > main > div.mx-auto.w-full.max-w-2xl.px-1.md {
  215.                 max-width: 100%;
  216.             }
  217.             body > div.flex.min-h-screen.w-full > div > main.max-w-7xl {
  218.                 max-width: 90rem;
  219.             }
  220.         `
  221.     };
  222.  
  223.     // 平台映射配置
  224.     const PLATFORM_MAP = {
  225.         'kimi.moonshot.cn': 'kimi',
  226.         'chat.deepseek.com': 'deepseek',
  227.         'tongyi.aliyun.com': 'tongyi',
  228.         'tiangong.cn': 'tiangong',
  229.         'chatglm.cn': 'chatglm',
  230.         'gemini.google.com': 'gemini'
  231.     };
  232.  
  233.     // 检测当前平台并应用相应样式
  234.     function applyPlatformStyles() {
  235.         try {
  236.             const host = window.location.hostname;
  237.             let platformKey = 'default';
  238.             
  239.             // 使用平台映射检测当前平台
  240.             for (const [domain, key] of Object.entries(PLATFORM_MAP)) {
  241.                 if (host.includes(domain)) {
  242.                     platformKey = key;
  243.                     break;
  244.                 }
  245.             }
  246.             
  247.             // 应用对应平台的样式
  248.             const styleToApply = PLATFORM_STYLES[platformKey] || PLATFORM_STYLES.default;
  249.             GM_addStyle(styleToApply);
  250.             
  251.             console.log(`[AI Chat Enhancer] Applied styles for platform: ${platformKey}`);
  252.         } catch (error) {
  253.             console.error('[AI Chat Enhancer] Error applying styles:', error);
  254.         }
  255.     }
  256.  
  257.     // 优化链接处理
  258.     function enhanceLinks() {
  259.         // 使用防抖避免频繁调用
  260.         if (enhanceLinks.timer) {
  261.             clearTimeout(enhanceLinks.timer);
  262.         }
  263.         
  264.         try {
  265.             const links = document.querySelectorAll('div[data-message-id] a[rel="noreferrer"]');
  266.             
  267.             if (links.length > 0) {
  268.                 links.forEach(link => {
  269.                     if (!link.href && link.innerText && link.innerText.trim()) {
  270.                         const linkText = link.innerText.trim();
  271.                         // 仅处理有效链接文本
  272.                         if (linkText.startsWith('http') || linkText.includes('www.')) {
  273.                             link.href = linkText;
  274.                             link.target = "_blank";
  275.                             link.rel = "noopener noreferrer";
  276.                         }
  277.                     }
  278.                 });
  279.             }
  280.         } catch (error) {
  281.             console.error('[AI Chat Enhancer] Error enhancing links:', error);
  282.         }
  283.         
  284.         // 使用MutationObserver替代递归调用，降低性能消耗
  285.         enhanceLinks.timer = setTimeout(() => {
  286.             if (!enhanceLinks.observer) {
  287.                 // 创建观察器，监听DOM变化
  288.                 enhanceLinks.observer = new MutationObserver((mutations) => {
  289.                     const shouldProcess = mutations.some(mutation => 
  290.                         mutation.addedNodes.length > 0 || 
  291.                         (mutation.type === 'attributes' && mutation.attributeName === 'href')
  292.                     );
  293.                     
  294.                     if (shouldProcess) {
  295.                         enhanceLinks();
  296.                     }
  297.                 });
  298.                 
  299.                 // 开始观察文档变化
  300.                 enhanceLinks.observer.observe(document.body, {
  301.                     childList: true,
  302.                     subtree: true,
  303.                     attributes: true,
  304.                     attributeFilter: ['href']
  305.                 });
  306.             }
  307.         }, 2000);
  308.     }
  309.  
  310.     // 初始化
  311.     function init() {
  312.         // 在DOMContentLoaded后执行
  313.         if (document.readyState === 'loading') {
  314.             document.addEventListener('DOMContentLoaded', () => {
  315.                 applyPlatformStyles();
  316.                 enhanceLinks();
  317.             });
  318.         } else {
  319.             // 文档已经加载完成
  320.             applyPlatformStyles();
  321.             enhanceLinks();
  322.         }
  323.         
  324.         // 监听页面变化，适应单页应用
  325.         window.addEventListener('popstate', applyPlatformStyles);
  326.         window.addEventListener('pushstate', applyPlatformStyles);
  327.         window.addEventListener('replacestate', applyPlatformStyles);
  328.     }
  329.  
  330.     // 启动脚本
  331.     init();
  332. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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