中 / EN：DSH Web 消息宽度调节插件 —— AI 回复的消息列固定宽度、屏幕再宽也是左右留白，本插件让你拖动即可调整展示宽度。 A DSH Web plugin for adjusting the message column width: AI replies render in a fixed-width centered column with empty gutters on wide screens — drag to resize.


_{项目概览 / Project Overview}	_{插件介绍 / Plugin Introduction}

简介 / Introduction

中：dsh-chat-width 是 DSH Web 的一个客户端插件（纯浏览器侧），解决 AI 回复消息列固定宽度导致"表格要左右滑动、一屏信息量少、不便截图"的痛点——让用户拖动即可调整消息展示宽度。

EN: dsh-chat-width is a client-side plugin (browser-only) for DSH Web. It solves the pain of a fixed-width message column — wide tables need horizontal scrolling, one screen shows too little information, and screenshots are hard to compose — by letting you drag to resize the message column.

原本的痛点 / The Original Pain Points

中文	English
很多表格需要左右滑动才能看到完整信息	Many tables need horizontal scrolling to show their full content
一个屏幕下显示的信息量不够多，不方便截图	A single screen shows too little information to fit into one screenshot

用法 / Usage

中：鼠标移到输入框左右边缘（出现竖线），按住左右拖动即可调宽——手柄虽在输入框两侧，但调整的是正文消息的宽度，正文会同步变宽/变窄。双击恢复默认。

EN: Move the mouse to either edge of the input box (a vertical line appears), press and drag left/right to resize — the grips sit on the input box, but they resize the message column, so the conversation content follows. Double-click to restore the default.

核心功能 / Core Features

功能 / Feature	说明 / Description
拖动手柄调宽 / Drag grips	输入框左右边缘出现手柄，拖动即调整正文消息列宽度（手柄在输入框两侧，调的却是消息列） Grips appear on the input box edges; dragging resizes the message column (the grips sit on the input box, but resize the column)
双击恢复默认 / Double-click reset	双击手柄恢复官方默认宽度 Double-click a grip to restore the official default width
设置页预设 / Presets in settings	紧凑 640 / 宽 960 / 超宽 1280 三个预设（8px 步进，320–2560px 范围） Three presets: Compact 640 / Wide 960 / Ultra 1280 (8px step, 320–2560px range)
自定义输入 / Custom input	设置页可手动输入任意像素值，非法输入自动钳制/拒绝 Type any pixel value in the settings page; invalid input is clamped or rejected
持久化 / Persistence	localStorage 持久化；拖动时 300ms 节流写入，操作结束立即写入 Persisted via localStorage; writes are throttled at 300ms while dragging and flushed immediately on release
会话内即时生效 / Live effect	宽度实时作用于文档样式表，无需刷新页面 Width applies to the live stylesheets instantly — no page refresh needed

安装 / Installation

方式一：npm 包（官方通道，正式分发形态）

中：通过 npm 安装后，在 ~/.dsh/config.yaml 的 Loader 树加一行即可。

EN: Install via npm, then add one entry to the Loader tree in ~/.dsh/config.yaml.

npm install dsh-chat-width    # 在 DSH 安装目录执行 / run inside the DSH installation

# ~/.dsh/config.yaml
- insert:
    - id: dsh-chat-width
      name: 'dsh-chat-width'

方式二：源码 link（开发 / 未发布阶段）

中：npm 包发布前，用一键安装脚本把本地克隆 link 进 DSH 并写入配置。

EN: Before the npm release, a one-command install script links a local clone into DSH and writes the config.

git clone https://github.com/dsh-external/chat-width.git
sh chat-width/install.sh   # 自动 link 进 DSH 并写入配置 / links into DSH and writes the config

重启 dsh web 生效。 / Restart dsh web to activate.

中：私有仓库，仅限 dsh-external 组织成员使用。 EN: Private repository, for dsh-external org members only.

技术实现要点 / Technical Highlights

要点 / Highlight	说明 / Description
零核心改动 / Zero core changes	不动 DSH 内核，仅操作文档样式表 + 插槽注册，配置即安装 No DSH core changes — only live stylesheets + slot registration; config is the install
手柄定位"实测不假设" / Measured, not assumed	手柄钉在输入卡（`[data-composer-seat]`）边缘，通过 `--dsh-composer-card-max-width` 的 live var() probe 实测宽度；无卡片时回退到滚动区中心公式并钳制 Grips pin to the composer card edges via a live `var()` probe; fall back to the scroll-area center formula with clamping when no card exists
可见性声明式 / Declarative visibility	`body:has([data-conversation-scroll])` + hover 透明度：仅聊天渲染时存在手柄、悬停才显示，页面上无永久竖线 `body:has(...)` + hover opacity: grips exist only while a chat renders and show only under the pointer — no permanent vertical lines
布局漂移跟随 / Layout drift tracking	window resize + MutationObserver（rAF 合并）重定位手柄，覆盖切会话/折叠侧栏等场景 window resize + MutationObserver (rAF-coalesced) re-pins the grips across session switches, sidebar collapses, etc.
Cordis 语义正确 / Correct Cordis semantics	`ctx.effect` 返回 disposer 闭包，保证手柄生命周期与插件一致、卸载时正确清理 `ctx.effect` returns a disposer closure so handle lifetime matches the plugin and cleanup is correct on unload
单源数据流 / Single source of truth	所有宽度写入经同一处理器 → 持久化 + 引擎 + store，store 是设置行的唯一渲染源 All width writes flow through one handler → persistence + engine + store; the store is the only render source

工程脚本与状态 / Scripts & Status

项 / Item	内容 / Content
`pnpm run build`	tsdown 构建 lib/ 两个产物（node half + client bundle）/ builds both lib/ artifacts (node half + client bundle)
`pnpm run typecheck`	tsc 类型检查 / TypeScript type check
`pnpm run test`	vitest 全量单测 / full unit test suite (vitest)
Git	15 个提交，最新：`rename to dsh-chat-width`；工作区干净 / 15 commits, latest: `rename to dsh-chat-width`; clean worktree
依赖 / Dependencies	peer 对齐 deepseek-ai 官方生态：dsh-client-runtime / locale / ui-slots + cordis + react 18（dev 依赖 link 到 `~/.dsh/source/current` 快照） peers aligned with the official deepseek-ai ecosystem: dsh-client-runtime / locale / ui-slots + cordis + react 18 (dev deps link to the `~/.dsh/source/current` snapshot)

一句话总结 / One-line Summary

中：这是一个"配置即安装、零内核改动"的 DSH Web 前端体验增强插件，用拖动手柄 + 设置页预设/自定义 + localStorage 持久化，解决消息列过窄的阅读与截图痛点，以 npm 包（官方 dsh.client 通道）形式分发。

EN: A "config-is-install, zero core changes" DSH Web UX-enhancement plugin that fixes the narrow-column reading and screenshot pain points via drag grips + settings presets/custom input + localStorage persistence, distributed as an npm package through the official dsh.client channel.

FAQs

What is dsh-chat-width?

Is dsh-chat-width well maintained?

Package last updated on 13 Aug 2026

dsh-chat-width