Introduction

When using the dsh Web interface, expanding the “Think” component or a long-text collapsible item can often disrupt the reading experience: the scrolling viewport moves downward, causing the collapse button to leave the screen. To collapse it again, users must first manually scroll back, interrupting their reading position. dsh-ui-easyfold provides a browser-side solution to this interaction pain point.

What This Is

This is a client-side DSH plugin maintained by MrTrujay under the MIT license. It optimizes the reading and collapsing experience for long expanded content through two browser behaviors.

Core Features

The plugin mainly includes two capabilities:

  1. Sticky fold row
    When collapsible content is expanded, the fold row is fixed to the top of the conversation scrolling viewport. During reading, this row remains visible and clickable. After the entire content scrolls out of the viewport, the sticky behavior is automatically released without changing the layout.

  2. Collapse scroll compensation
    Collapsing an already fixed component (triggered by click, Enter, or Space) pulls the scrolling viewport back to the position originally occupied by the fold row. If the fold row is already within the viewport, its position remains unchanged.

Installation and Enabling

This plugin requires a dsh environment with the Web interface deployed. The installation command is as follows:

pnpm dsh plugin --profile web add @trujaycc/dsh-ui-easyfold

After installing, restart pnpm dsh web to load the new component row.

Development and Build

The plugin depends on React 18.2.0+. The local development and build steps are as follows:

pnpm install
pnpm run build

The build artifacts include lib/index.js and lib/client.js, which are processed by ModuleLoader. This package declares React as a platform dependency and has no other runtime dependencies.

Applicable Scenarios and Notes

  • Current support scope: Currently implemented only for the “Think” fold row; other long-content collapsible components are planned.
  • DOM contract coupling: The plugin mounts via stable DOM attributes (data-conversation-scroll, data-variant="think", data-open, data-disclosure-row). If the product DOM structure changes, the plugin behavior may fail silently.
  • Scroll viewport limitation: Scroll compensation only applies to the first data-conversation-scroll in the document. Split-screen conversation windows (subagent views) share the same behavior owner.
  • React commit patience: The plugin waits for React commits for up to 8 animation frames. Delayed commits outside this window will skip correction; this will not cause scroll misalignment, only the absence of corrective feedback.

Conclusion

This plugin uses client-side scripts to resolve interaction gaps after long content is expanded, and is suitable for developers who need to optimize the reading experience in the Web interface. For more details, refer to GitHub or DSH plugin directory.