☰

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).

설치 방법

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

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

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

설치 방법

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

작성자
Bubble Be
일일 설치 수
1
총 설치 수
4
평점
0 0 0
버전
4.6.2
생성일
2025-12-15
갱신일
2025-12-17
크기
19.8KB
라이선스
MIT
적용 사이트

脚本名称 / 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.