☰

Greasy Fork is available in English.

ChatGPT Message Graph (SVG Icons v4.6.2)

v4.6.2: Replaced text-based toggle icons with consistent SVG icons for a cleaner, professional UI. Retains all previous features (Horizontal Scroll, Priority Render).

Cómo instalar

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Cómo instalar

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

Autor
Bubble Be
Instalaciones diarias
1
Instalaciones totales
4
Calificaciones
0 0 0
Versión
4.6.2
Creado
15/12/2025
Actualizado
17/12/2025
Tamaño
19.8 KB
Licencia
MIT
Funciona en

脚本名称 / Script Name

中文: ChatGPT 消息树形导航 (ChatGPT Message Graph) English: ChatGPT Message Graph (Tree Layout)

简短描述 / Short Description

中文: 在屏幕右侧显示对话的树形结构图。支持“主干优先”渲染（自动折叠长列表）、Markdown 标题提取、点击跳转、以及面板折叠功能。基于 React Fiber 实时解析，无缓存 Bug。 English: Shows a graphical tree of the conversation history on the right side. Features "Main-First" priority rendering (smart collapsing), Markdown header extraction, click-to-navigate, and a collapsible panel. Powered by React Fiber for real-time accuracy.

详细描述 / Detailed Description

🇨🇳 中文介绍

ChatGPT Message Graph 是一个旨在提升 ChatGPT 长对话体验的效率工具。它在页面右侧生成一个可视化的“消息树”，帮助你快速理解对话结构、分支关系，并在长篇大论中快速定位关键节点。

✨ 核心功能：

  1. 🌳 树形结构可视化：

    • 直观展示 User（提问）和 Assistant（回答）之间的引用关系。
    • 通过贝塞尔曲线连接，清晰展示对话流向。
    • 支持并行对话（Branching）和划词引用（Quote Reply）的自动识别。

  2. 📑 智能大纲提取 (Smart Outline)：

    • 不再显示无意义的 "Assistant" 标签。
    • 脚本会自动解析回答中的 Markdown 语法，提取 H1~H6 标题 和 首段总结。
    • 如果是列表内容，会自动提取序号（如 1. 方案一）。

  3. 🧠 主干优先渲染 (Priority Rendering)：

    • 独家算法：当回答内容过长（超过 12 行）时，脚本不会简单截断，而是优先保留主标题（H1/H2）和核心总结。
    • 自动折叠次要层级（H3/H4），确保你在有限的面板空间内也能看到完整的“大纲骨架”。

  4. ⚡ 纯净稳健 (Lightweight & Stable)：

    • React Fiber 驱动：直接从 ChatGPT 的 React 内部组件读取消息 ID 关系，比单纯的 DOM 猜测更准确。
    • 无状态设计：v4.4.0 移除了复杂的缓存机制，完全基于当前页面 DOM 实时构建。切换会话、重新生成回答时，图表会自动刷新，彻底告别“缓存过期”或“内容错乱”的 Bug。
    • 文本修复：使用 textContent 替代 innerText，即使在元素被隐藏或样式特殊时也能准确抓取标题。

  5. 🎨 现代交互设计：

    • 可折叠面板：点击右上角的 ➖ 按钮可将面板最小化，避免遮挡正文。
    • 点击跳转：点击图表中的节点，页面会自动平滑滚动到对应的消息位置。
    • 调试支持：提供 JSON 导出功能，方便开发者分析结构。

🇺🇸 English Introduction

ChatGPT Message Graph is a productivity tool designed to enhance the experience of long conversations in ChatGPT. It generates a visual "message tree" on the right side of the screen, helping you quickly understand the conversation structure, branch relationships, and navigate through long threads.

✨ Key Features:

  1. 🌳 Visual Tree Layout:

    • Intuitively displays the citation relationship between User (questions) and Assistant (answers).
    • Connects nodes with Bezier curves for a clear flow.
    • Automatically detects parallel conversations (Branching) and quote replies.

  2. 📑 Smart Outline Extraction:

    • Instead of generic "Assistant" labels, the script parses Markdown syntax within answers.
    • It extracts H1~H6 headers and the Summary paragraph to create a readable Table of Contents for each node.

  3. 🧠 Priority Rendering Algorithm:

    • Smart Collapsing: When an answer's outline is too long (e.g., >12 lines), the script doesn't just truncate it.
    • It prioritizes showing Main Headers (H1/H2) and Summaries, while collapsing sub-headers (H3/H4) first. This ensures the "skeleton" of the answer is always visible.

  4. ⚡ Lightweight & Robust:

    • React Fiber Powered: Reads message relationships directly from ChatGPT's internal React components for 100% accuracy.
    • Stateless Design: v4.4.0 removes complex caching strategies. The graph rebuilds in real-time based on the current DOM. Switching conversations or regenerating answers triggers an instant, bug-free refresh.
    • Text Content Fix: Uses textContent to ensure headers are captured even in complex DOM structures.

  5. 🎨 Modern UI:

    • Collapsible Panel: Click the ➖ button to minimize the graph so it doesn't block the chat content.
    • Click to Scroll: Clicking any node smoothly scrolls the page to that specific message.
    • Export: Includes a JSON export button for debugging.

版本历史 / Version History (Recent)

  • v4.4.0:
    • 🔄 Removed complex session caching logic to prevent synchronization bugs. Now strictly DOM-based and stateless.
    • 🛠 Re-verified syntax stability.
  • v4.3.0:
    • ➕ Added Minimize/Expand toggle button.
    • 🎨 Improved UI transitions.
  • v4.0.0:
    • 🚀 Introduced "Main-First" Priority Rendering.
    • 🐛 Fixed empty text issues by switching to textContent.
  • v3.x:
    • ✨ Introduced React Fiber integration for accurate relationship detection.
    • 📑 Added Markdown header extraction.