AI Conversation Navigator

Floating navigator for your prompts in ChatGPT, Gemini, NotebookLM, Grok, Claude, Deepseek, Kimi, Qwen, GLM, Mistral, Perplexity, Poe, Paperfigureqa (allen) conversations.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         AI Conversation Navigator
// @namespace    https://greasyfork.org
// @version      3.6
// @description  Floating navigator for your prompts in ChatGPT, Gemini, NotebookLM, Grok, Claude, Deepseek, Kimi, Qwen, GLM, Mistral, Perplexity, Poe, Paperfigureqa (allen) conversations.
// @author       Bui Quoc Dung
// @match        https://chatgpt.com/*
// @match        https://gemini.google.com/*
// @match        https://notebooklm.google.com/*
// @match        https://grok.com/*
// @match        https://claude.ai/*
// @match        https://www.kimi.com/*
// @match        https://chat.deepseek.com/*
// @match        https://chat.qwen.ai/*
// @match        https://chat.z.ai/*
// @match        https://chat.mistral.ai/*
// @match        https://www.perplexity.ai/*
// @match        https://poe.com/*
// @match        https://paperfigureqa.allen.ai/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    const NAV_WIDTH = 250;
    const NAV_COLLAPSED_WIDTH = 80;
    let activeMessageIndex = -1;

    const BASE_CONTAINER_CSS = `
        right: 0px; width: ${NAV_WIDTH}px; max-height: 90vh; overflow-y: auto;
        z-index: 9999;
        transition: width 0.3s, padding 0.3s, opacity 0.3s, transform 0.3s;
        font-family: Calibri, sans-serif; font-size: 15px; color: CanvasText; position: fixed;
    `;

    const getShiftStyle = (width, selector = '') => `
        body.navigator-expanded ${selector} {
            margin-left: 0 !important;
            margin-right: ${width}px !important;
            max-width: calc(100% - ${width}px) !important;
            transition: margin-right 0.3s ease;
        }
    `;

    GM_addStyle(`
        .nav-list-item {
            font-weight: normal;
            transition: font-weight 0.1s ease;
        }
        .nav-list-item.active {
            font-weight: bold !important;
            background-color: rgba(0, 0, 0, 0.05);
        }
    `);

    const SITE_CONFIG = {
        chatgpt: {
            match: /chatgpt\.com/,
            msgSelector: 'div[data-message-author-role="user"]',
            top: '55px',
            bgClass: "text-token-text-primary bg-token-main-surface-primary rounded-lg shadow-lg"
        },
        gemini: {
            match: /gemini\.google\.com/,
            msgSelector: '.query-text',
            top: '55px'
        },
        notebooklm: {
            match: /notebooklm\.google\.com/,
            msgSelector: 'chat-message .from-user-container',
            top: '55px',
        },
        grok: {
            match: /grok\.com/,
            msgSelector: '.relative.group.flex.flex-col.justify-center.items-end',
            top: '55px'
        },
        claude: {
            match: /claude\.ai/,
            msgSelector: 'div.group.relative.inline-flex',
            top: '55px',
        },
        deepseek: {
            match: /chat\.deepseek\.com/,
            msgSelector: '#root > div > div > div:nth-child(2) > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(odd)',
            top: '55px',
            shiftTarget: '#root > div > div > div:nth-child(2) > div:nth-child(3) > div > div:nth-child(2) > div'
        },
        kimi: {
            match: /www\.kimi\.com/,
            msgSelector: '.user-content',
            top: '55px'
        },
        glm: {
            match: /chat\.z\.ai/,
            msgSelector: '.chat-user',
            top: '55px'
        },
        qwen: {
            match: /chat\.qwen\.ai/,
            msgSelector: '.chat-user-message',
            top: '55px'
        },
        mistral: {
            match: /chat\.mistral\.ai/,
            msgSelector: 'div[data-message-author-role="user"]',
            top: '55px',
            shiftTarget: 'main.bg-sidebar-subtle'
        },
        perplexity: {
            match: /perplexity\.ai/,
            msgSelector: 'div.group\\/title',
            top: '55px'
        },
        poe: {
            match: /poe\.com/,
            msgSelector: '[class*="ChatMessagesView_tupleGroupContainer"] > div > div:first-child',
            top: '55px',
            shiftTarget: '[class*="CanvasSidebarLayout_chat-column"]'
        },
        paperfigure: {
            match: /paperfigureqa\.allen\.ai/,
            msgSelector: '#chat-scroll-container > div > div:nth-of-type(odd) .MuiPaper-root',
            top: '55px'
        },

    };

    const site = Object.values(SITE_CONFIG).find(s => s.match.test(location.hostname));
    if (!site) return;

    const currentWidth = site.width || NAV_WIDTH;
    GM_addStyle(getShiftStyle(currentWidth, site.shiftTarget || ''));

    let conversationObserver = null;
    let isCollapsed = false;
    window.navigatorUpdateTimeout = null;

    function updateBodyClassForLayout() {
        const container = document.getElementById('message-nav');
        const content = document.getElementById('message-nav-content');
        if (container && content && content.style.display !== 'none') {
            document.body.classList.add('navigator-expanded');
        } else {
            document.body.classList.remove('navigator-expanded');
        }
    }

    function createContainer() {
        let container = document.getElementById('message-nav');
        if (!container) {
            container = document.createElement('div');
            container.id = 'message-nav';
            container.className = site.bgClass || '';
            container.style.cssText = `top: ${site.top}; ${BASE_CONTAINER_CSS}`;

            const header = document.createElement('div');
            Object.assign(header.style, {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                fontWeight: 'bold'
            });

            const toggleBtn = document.createElement('button');
            Object.assign(toggleBtn.style, {
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                fontSize: '18px',
                color: 'inherit'
            });
            toggleBtn.textContent = 'Close';
            header.appendChild(toggleBtn);

            const content = document.createElement('div');
            content.id = 'message-nav-content';
            content.style.padding = '5px';

            container.appendChild(header);
            container.appendChild(content);
            document.body.appendChild(container);

            if (isCollapsed) {
                content.style.display = 'none';
                container.style.width = `${NAV_COLLAPSED_WIDTH}px`;
                toggleBtn.textContent = 'Open';
            }

            const toggleHandler = (e) => {
                e.stopPropagation();
                isCollapsed = !isCollapsed;

                if (!isCollapsed) {
                    content.style.display = 'block';
                    container.style.width = `${currentWidth}px`;
                    toggleBtn.textContent = 'Close';
                } else {
                    content.style.display = 'none';
                    container.style.width = `${NAV_COLLAPSED_WIDTH}px`;
                    toggleBtn.textContent = 'Open';
                }
                updateBodyClassForLayout();
            };

            toggleBtn.addEventListener('click', toggleHandler);
            updateBodyClassForLayout();
        }
        return container;
    }

    function findUserPrompts() {
        const prompts = [];
        const elements = document.querySelectorAll(site.msgSelector);

        elements.forEach((element) => {
            const text = element.textContent.trim();
            if (text) prompts.push({ element, text });
        });

        return prompts;
    }
    function createListItem(prompt, index) {
        const listItem = document.createElement('li');
        const preview = prompt.text.length > 80 ? prompt.text.slice(0, 80) + '...' : prompt.text;
        listItem.textContent = `${index}. ${preview}`;
        Object.assign(listItem.style, {
            cursor: 'pointer',
            padding: '5px 0px 5px 5px'
        });
        listItem.classList.add('nav-list-item');
        if (index === activeMessageIndex) {
            listItem.classList.add('active');
        }

        listItem.addEventListener('click', () => {
            listItem.parentElement.querySelectorAll('.nav-list-item').forEach(li => li.classList.remove('active'));
            listItem.classList.add('active');
            activeMessageIndex = index;

            prompt.element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });

        return listItem;
    }

    function updateMessageList() {
        const container = createContainer();
        const content = document.getElementById('message-nav-content');
        if (!content) return;

        let list = content.querySelector('ul');
        if (!list) {
            list = document.createElement('ul');
            list.style.cssText = 'padding: 0; margin: 0; list-style: none;';
            content.appendChild(list);
        }

        const prompts = findUserPrompts();

        while (list.firstChild) {
            list.removeChild(list.firstChild);
        }

        if (prompts.length === 0) {
            activeMessageIndex = -1;
            const noContent = document.createElement('div');
            noContent.textContent = 'Loading';
            noContent.style.cssText = 'color: #999; font-style: italic; text-align: center; padding: 15px 0;';
            list.appendChild(noContent);
            return;
        }

        prompts.forEach((prompt, index) => {
            const listItem = createListItem(prompt, index + 1);
            list.appendChild(listItem);
        });
    }

    function observeConversation() {
        if (conversationObserver) conversationObserver.disconnect();

        conversationObserver = new MutationObserver(() => {
            clearTimeout(window.navigatorUpdateTimeout);
            window.navigatorUpdateTimeout = setTimeout(() => {
                updateMessageList();
            }, 500);
        });

        conversationObserver.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    setTimeout(() => updateMessageList(), 1000);
    observeConversation();

})();