When conducting long conversations in the DSH Web UI, quickly locating a specific user question often requires multiple scroll actions. The dsh-conversation-nav plugin generates a vertical “Question Navigation” bar on the right side of the conversation to solve this navigation pain point.

This is a DSH Web UI plugin maintained by Fiker1203. It generates a clearly numbered vertical bar on the right side of the conversation, listing every user question in the current session. Users can hover to preview content and click to smoothly jump to the target question.

Core Features

  1. Message Detection: Automatically identifies every user message in the current session ([data-chat-flow-kind="user"]).
  2. Right-Side Navigation: Generates a vertical question navigator on the right side of the conversation. Clear numbering is used, and the narrow bar does not obstruct the chat area.
  3. Preview and Navigation: Hovering or keyboard focus expands a preview card showing “Question N” and the question text; clicking a number smoothly scrolls to the target message and highlights it with a flash effect.
  4. Scroll Tracking: Automatically highlights the question currently being viewed when the page scrolls.
  5. Dynamic Rendering Compatibility: Responds to React dynamic rendering and supports automatic updates when loading earlier messages, switching sessions, or using virtual scrolling.
  6. Pin-to-Bottom Scrolling Compatibility: Compatible with the DSH chat area’s “pin-to-bottom scrolling” behavior.
  7. Theme Adaptation: Adapts to the maid theme (maid-atelier).
    • Light mode: Uses ivory white, navy blue, and gold outlines.
    • Dark mode (data-ds-dark-theme): Uses deep ocean night blue and champagne gold.
    • When the maid theme is not enabled, it automatically falls back to the official DSH design variables.

Installation and Enablement

dsh plugin --profile web add github:Fiker1203/dsh-conversation-nav

After installation, restart the Web UI and hard refresh the browser (Ctrl+Shift+R).

Typical Usage

  • Hover over a number → expand the preview card to view the question content.
  • Click a number → smoothly scroll to that question and highlight it.
  • Scroll up/down through the conversation → the navigation bar automatically highlights the current question.

Structure and Maintenance

The plugin mainly contains the following files:
- index.js: Host entry with no host behavior (browser-only).
- client.js: Browser entry that injects the right-side question navigation UI and jump/preview logic.
- cordis.patch.yml: Inserts the conversation-nav entry.
- package.json: Declares dsh.bundle and dsh.client.

Maintenance note: The user message selector is defined as USER_NODE_SELECTOR at the beginning of client.js. If DSH changes its user message DOM structure, update this selector accordingly.

Notes

  • The plugin only reads page DOM data and does not send any data.
  • It is recommended to review the source code and license (MIT) before installation.