Greasy Fork is available in English.
Displays a list of user and assistant responses in ChatGPT conversations for quick navigation.
// ==UserScript==
// @name ChatGPT Message Navigator
// @namespace https://violentmonkey.github.io/
// @version 1.1
// @description Displays a list of user and assistant responses in ChatGPT conversations for quick navigation.
// @author Bui Quoc Dung
// @match https://chatgpt.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function () {
"use strict";
// If panel already exists, do nothing
if (document.getElementById("toc-panel") || document.getElementById("toc-handle")) {
return;
}
// --- Insert CSS with dark mode support ---
const css = document.createElement("style");
css.textContent =
/* Panel */
`#toc-panel { position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: #fafafa; box-shadow: -4px 0 8px rgba(0,0,0,0.1); font-family: sans-serif; font-size: 0.8rem; border-left: 1px solid #ddd; display: flex; flex-direction: column; z-index: 9998; visibility: hidden; }
#toc-panel.visible { visibility: visible; }
#toc-header { padding: 6px 10px; background: #ddd; border-bottom: 1px solid #ccc; font-weight: bold; flex-shrink: 0; }
#toc-list { list-style: none; flex: 1; overflow-y: auto; margin: 0; padding: 6px; }
#toc-list li { padding: 4px; cursor: pointer; border-radius: 3px; transition: background-color 0.2s; }
#toc-list li:hover { background: #f0f0f0; }
#toc-handle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); width: 30px; height: 80px; background: #ccc; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; cursor: pointer; font-weight: bold; user-select: none; z-index: 9999; transition: background 0.2s; }
#toc-handle:hover { background: #bbb; }
@keyframes highlightFade { 0% { background-color: #fffa99; } 100% { background-color: transparent; } }
.toc-highlight { animation: highlightFade 1.5s forwards; }
@media (prefers-color-scheme: dark) {
#toc-panel { background: #333; border-left: 1px solid #555; box-shadow: -4px 0 8px rgba(0,0,0,0.7); }
#toc-header { background: #555; border-bottom: 1px solid #666; color: #eee; }
#toc-list li:hover { background: #444; }
#toc-list { color: #eee; }
#toc-handle { background: #555; color: #ddd; }
#toc-handle:hover { background: #666; }
}`;
document.head.appendChild(css);
// --- Create panel & handle ---
const panel = document.createElement("div");
panel.id = "toc-panel";
panel.innerHTML = `
<div id="toc-header">Conversation TOC</div>
<ul id="toc-list"></ul>
`;
document.body.appendChild(panel);
const handle = document.createElement("div");
handle.id = "toc-handle";
handle.textContent = "TOC";
document.body.appendChild(handle);
// Observed container, observer, etc.
let chatContainer = null;
let observer = null;
let isScheduled = false;
let timerId = null;
// Debounce the TOC build to avoid high CPU usage on rapid changes
function debounceBuildTOC() {
if (isScheduled) return;
isScheduled = true;
timerId = setTimeout(function () {
buildTOC();
isScheduled = false;
}, 300);
}
// Build/refresh the TOC
function buildTOC() {
const list = document.getElementById("toc-list");
if (!list) return;
list.innerHTML = "";
// Find conversation turns
const articles = (chatContainer || document).querySelectorAll("article[data-testid^='conversation-turn-']");
if (!articles || articles.length === 0) {
list.innerHTML = '<li style="opacity:0.7;font-style:italic;">Empty chat</li>';
return;
}
// Loop over turns
for (let i = 0; i < articles.length; i++) {
const art = articles[i];
const li = document.createElement("li");
// Check if AI (assistant)
const sr = art.querySelector("h6.sr-only");
let isAI = false;
if (sr && sr.textContent.includes("ChatGPT said:")) {
isAI = true;
li.textContent = "ChatGPT:";
// Get the assistant message
const assistantMsg = art.querySelector('div[data-message-author-role="assistant"]');
const assistantText = assistantMsg?.textContent?.trim();
if (assistantText) {
li.innerHTML = "<strong>ChatGPT: </strong>" + assistantText.slice(0, 100) + (assistantText.length > 100 ? "..." : "");
}
} else {
// Get the user message
const userMsg = art.querySelector('div[data-message-author-role="user"]');
const userText = userMsg?.textContent?.trim();
if (userText) {
const preview = userText.slice(0, 100);
li.innerHTML = "<strong>You: </strong>" + preview + (userText.length > 100 ? "..." : "");
} else {
li.textContent = "";
}
}
// On click: scroll to turn
(function (turnElem) {
li.addEventListener("click", function () {
turnElem.scrollIntoView({behavior: "smooth", block: "start"});
});
})(art);
list.appendChild(li);
}
}
// Attach observer to new container if needed
function attachObserver() {
const c = document.querySelector("main#main") || document.querySelector(".chat-container") || null;
if (c !== chatContainer) {
chatContainer = c;
if (observer) {
observer.disconnect();
observer = null;
}
if (chatContainer) {
observer = new MutationObserver(function () {
debounceBuildTOC();
});
observer.observe(chatContainer, {childList: true, subtree: true});
buildTOC();
}
}
}
// Attempt to attach on load
attachObserver();
// Re-check every 2s in case container changes
const reAttachInterval = setInterval(attachObserver, 2000);
// Panel toggle
handle.addEventListener("click", function () {
panel.classList.toggle("visible");
});
})();