// ==UserScript==
// @name         DeepSeek折叠魔法棒
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  折叠DeepSeek聊天界面，包括侧边栏宽度调整、用户对话字体大小切换、深度思考文本折叠、代码块折叠及底部输入框高度扩展
// @author       beibeibeibei
// @license      MIT
// @match        https://chat.deepseek.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // 尝试获取元素的函数
    function getElementAsync(selector, delay = 100) {
        return new Promise((resolve) => {
            const interval = setInterval(() => {
                const element = document.querySelector(selector);
                if (element) {
                    clearInterval(interval);
                    resolve(element);
                }
            }, delay);
        });
    }

    function main() {
        const css = `
#beibeibeibei-magic-size-control-panel {
	.toggleBtn {
		cursor: pointer;
	}
}
.beibeibeibei-magic-size-control-panel--magic-icon {
    display: none;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    will-change: transform;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
    z-index: 2000;
    width: fit-content;
    transition: 0.5s;
}

.beibeibeibei-sidebar--widened {
	width: 400px;
	max-width: 400px;
	left: 0;
}

.beibeibeibei-userchat-font--small {
	font-size: 12px;
	line-height: 12px;
}

.beibeibeibei-deep-think-texts--fold {
	height: 50px;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 20px;
		background: linear-gradient(to bottom,
				rgba(24, 26, 27, 0),
				rgba(24, 26, 27, 1));
		pointer-events: none;
	}
}

.beibeibeibei-textarea--expanded {
	max-height: calc(85vh - 100px) !important;
	height: calc(85vh - 100px) !important;
}

.beibeibeibei-pre--fold {
	height: 50px;
}

/*用户对话二次修改时的输入框的最大高度*/
.ds-textarea {
	max-height: calc(75vh - 100px) !important;
}
        `;
        GM_addStyle(css);

        const setTimeout_delay = 50;
        setTimeout(() => {
            // 找到侧边栏
            // const sidebar = document.querySelector("#root > div > div > div > div > div");
            // 侧边栏中的footer(总是选不到, 用getElementAsync异步选择)
            // const sidebar_footer = document.querySelector("#root > div > div > div > div > div > div:last-child");
            getElementAsync("#root > div > div > div > div > div > div:last-child").then((sidebar_footer) => {
                const sidebar = document.querySelector("#root > div > div > div > div > div");

                // 向侧边栏footer添加一个控制台
                const controlPanel = document.createElement('div');
                controlPanel.id = "beibeibeibei-magic-size-control-panel";
                controlPanel.innerHTML = `
                <div class="beibeibeibei-icon" style="margin-right: 8px;display: flex;">
                    <svg viewBox="0 0 20 20" width="20" height="20">
                        <path
                         fill="none"
                         stroke="currentColor"
                         d="M12.9404 13.2071l-2.0777 4.3658a0.563 0.563 0 0 1-0.9173 0.1455L6.6198 14.2079a0.563 0.563 0 0 0-0.3352-0.1709L1.4898 13.4099a0.563 0.563 0 0 1-0.4216-0.8272L3.3797 8.3351a0.563 0.563 0 0 0 0.0582-0.3718L2.5526 3.2097a0.563 0.563 0 0 1 0.6572-0.6572L7.9634 3.4379a0.563 0.563 0 0 0 0.3718 0.0582L12.5827 1.0681a0.563 0.563 0 0 1 0.8272 0.4225l0.6272 4.794a0.563 0.563 0 0 0 0.1708 0.3352L17.7184 9.9454a0.563 0.563 0 0 1-0.1455 0.9173l-4.3658 2.0777a0.563 0.563 0 0 0-0.2667 0.2667z" />
                        <path fill="currentColor" d="M13.688725,15.016283 l1.327571,-1.327576L19,17.671478 17.671483,19Z" />
                    </svg>
                </div>
                <button class="toggleBtn">使用魔法棒</button>
                `;
                controlPanel.setAttribute("style", "width: 100%;padding: 9px 12px;margin-bottom: 8px;border: 1px solid white;box-sizing: border-box;border-radius: 12px;display: flex;align-items: center;");
                sidebar_footer.insertBefore(controlPanel, sidebar_footer.children[0]);
                // 向body添加悬浮图标
                const magicIcon = document.createElement('div');
                magicIcon.className = "beibeibeibei-magic-size-control-panel--magic-icon";
                magicIcon.innerHTML = `
                    <svg viewBox="0 0 20 20" width="20" height="20">
                        <path stroke="#2196F3" d="m 12.940417,13.207056 -2.077749,4.365839 a 0.56333207,0.56333401 0 0 1 -0.9172847,0.14552 L 6.6198316,14.20792 A 0.56333207,0.56333401 0 0 0 6.284649,14.037028 L 1.4897689,13.409857 A 0.56333207,0.56333401 0 0 1 1.068194,12.58268 L 3.379748,8.335141 A 0.56333207,0.56333401 0 0 0 3.437952,7.9633406 L 2.552574,3.2097478 A 0.56333207,0.56333401 0 0 1 3.2098021,2.5525175 L 7.9633786,3.4378981 A 0.56333207,0.56333401 0 0 0 8.3351778,3.3796942 L 12.582702,1.0681324 a 0.56333207,0.56333401 0 0 1 0.827173,0.4225005 l 0.62717,4.7939724 a 0.56333207,0.56333401 0 0 0 0.17087,0.3351837 L 17.71842,9.9453521 A 0.56333207,0.56333401 0 0 1 17.572899,10.86264 l -4.365823,2.077757 a 0.56333207,0.56333401 0 0 0 -0.266659,0.266659 z" />
                        <path fill="#2196F3" d="M13.688725,15.016283 l1.327571,-1.327576L19,17.671478 17.671483,19Z" />
                    </svg>
                `;
                document.body.append(magicIcon);

                const toggleBtn = document.querySelector('#beibeibeibei-magic-size-control-panel .toggleBtn');
                let isFollowing = false;
                // 按钮点击事件
                toggleBtn.addEventListener('click', (e) => {
                    isFollowing = !isFollowing;

                    e.target.textContent = isFollowing ? '停用魔法棒' : '使用魔法棒';

                    magicIcon.style.display = isFollowing ? 'block' : 'none';
                    document[isFollowing ? 'addEventListener' : 'removeEventListener']('mousemove', followMouse);

                    if (isFollowing) {followMouse(e)}; /*主动触发一次跟随*/
                });
                // 鼠标跟随函数
                function followMouse(e) {
                    requestAnimationFrame(() => {
                        magicIcon.style.transform = `translate( ${e.clientX + 20}px, ${e.clientY}px )`;
                    });
                }
                // 侧边栏点击事件
                document.addEventListener('click', (event) => {
                    // console.log(event.target);
                    // 点到了按钮自己
                    if (event.target === toggleBtn) {
                        return;
                    } else if (isFollowing) {
                        // 点到了侧边栏
                        if (sidebar.contains(event.target)) {
                            const excludeSelectors = ".ds-icon-button:has(rect[id*='边栏']), rect[id*='边栏'], #root > div > div > div > div > div > div.scrollable > div > div > div > div[tabindex='0'], #root > div > div > div > div > div > div.scrollable > div > div > div > div[tabindex='0'] svg";
                            if (!Array.from(document.querySelectorAll(excludeSelectors)).includes(event.target)) { /*排除侧边栏的折叠按钮, 排除会话名字旁边的更多按钮*/
                                sidebar.classList.toggle('beibeibeibei-sidebar--widened');
                            }
                            return;
                        }
                        // 点到了用户对话
                        const user_chats = document.querySelectorAll("#root > div > div > div > div:nth-child(3) > div > div:nth-child(2) > div.scrollable > div > div:nth-child(1) > div:nth-child(odd)");
                        for (const c of user_chats) {
                            if (c.contains(event.target)) {
                                if (!event.target.classList.contains("ds-textarea__textarea")) { /* 排除用户正在修改已发出的对话时的输入框 */
                                    event.target.classList.toggle('beibeibeibei-userchat-font--small');
                                }
                                return;
                            }
                        }
                        // 点到了deepseek的深度思考文本
                        const deep_think_texts = document.querySelectorAll("#root > div > div > div > div:nth-child(3) > div > div:nth-child(2) > div.scrollable > div > div:nth-child(1) > div:nth-child(even) > div:nth-child(2) > div:nth-child(2)");
                        for (const t of deep_think_texts) {
                            if (t.contains(event.target)) {
                                if (event.target.tagName === "P") {
                                    event.target.parentElement.classList.toggle('beibeibeibei-deep-think-texts--fold');
                                } else {
                                    event.target.classList.toggle('beibeibeibei-deep-think-texts--fold');
                                }
                                return;
                            }
                        }
                        // 点到了底部textarea
                        const chat_input = document.querySelector("#chat-input");
                        if (event.target === chat_input) {
                            chat_input.parentElement.classList.toggle('beibeibeibei-textarea--expanded');
                            return;
                        }
                        // 点到了pre代码区
                        if (event.target.tagName === "PRE") {
                            event.target.classList.toggle('beibeibeibei-pre--fold');
                            return;
                        }
                        // 点到了pre的上一个兄弟节点
                        const code_block_banners = document.querySelectorAll("div:has(+pre)");
                        for (const t of code_block_banners) {
                            if (t.contains(event.target)) {
                                t.nextElementSibling.classList.toggle('beibeibeibei-pre--fold');
                                return;
                            }
                        }
                        // 点到了pre内部
                        if (event.target.closest("pre") !== null) {
                            event.target.closest("pre").classList.toggle('beibeibeibei-pre--fold');
                            return;
                        }
                    }
                });
            });
        }, setTimeout_delay);
    }

    function runWhenDocumentReady(...funcs) {
        const validFuncs = [...new Set(funcs)].filter(item => typeof item === 'function');

        if (document.readyState === 'loading') {
            validFuncs.forEach(func =>
                               document.addEventListener('DOMContentLoaded', func)
                              );
        } else {
            validFuncs.forEach(func => func());
        }
    }
    // DOM加载完成后运行这些func
    runWhenDocumentReady(main);
})();