dsh-scroll-piano 0.2.1 → 0.3.1

package/README.md

@@ -1,30 +1,35 @@
 # dsh-scroll-piano · 滚动钢琴
 
-鼠标滑过 DSH 界面**右侧边缘的竖条区域**（聊天区滚动条/把手那一条）时，按鼠标的**纵向位置**发出钢琴音：**越靠上音越高、越靠下音越低**（特雷门琴式）。
+鼠标滑过 DSH **聊天区右边缘的竖条**（滚动条/把手那一条）时，按鼠标的**纵向位置**发出钢琴音：**越靠上音越高、越靠下音越低**（特雷门琴式）。
 
 ## 效果
 
-- 右侧边缘一条细彩色竖条（开启时淡淡发光），鼠标进入该区间即触发。
+- 聊天区右边缘一条细彩色竖条（开启时淡淡发光），鼠标进入该区间即触发。
 - 鼠标纵向移动 = 连续刮奏；竖条上有个白点跟随鼠标位置。
-- 鼠标旁浮出**该位置的消息预览气泡**（类似滚动条的预览 tooltip）：角色标签（`你` / `AI`）+ 当前音名（如 `♪ C4 · 60`）+ 该高度那条消息的正文（最多 3 行）。
+- **气泡只在鼠标正落在「你发的某条消息」上时出现**，内容就是那条消息的正文（最多 3 行）+「点击跳转」提示；**其余位置整个不显示**（不显示音名、不显示 MIDI 数字）。
+- **点击气泡** → 平滑滚动，把那条消息滚到视口中央。
 - 左下角一枚 `🎵 滚动钢琴 ON/OFF` 胶囊：点开关切换、右侧滑块调音量（设置存 `localStorage`）。
 - 默认音域 C3–C6（3 个八度），只按半音触发（同音不重复触发）。
 
+> 预览**只显示用户自己发的消息**，且**不做「取最近一条」兜底**：滑到 AI 回复 / 工具调用 / 过程块上时气泡整个收起，避免同一条消息在整片区域里被反复显示。声音与预览**彼此独立**——任何位置滑动都照常出声，只有预览挑消息。
+
 ## 消息预览怎么定位
 
 聊天流的稳定锚点是 **`[data-chat-flow]`**：它的**直接子元素**一条消息一个，key 形如：
 
 | key 前缀 | 含义 |
 |---|---|
-| `13:input-message<uuid>` | 用户消息 → 角色显示「你」 |
-| `14:assistant-stepN:M` | AI 消息 → 角色显示「AI」 |
-| `12:turn-processN` / `["process",…]` / `9:turn-tailN` | 过程 / 工具调用 / 轮次尾，**跳过**（此时显示离鼠标最近的那条消息，不弹占位文案） |
+| `13:input-message<uuid>` | 用户消息 → **预览这条**（角色显示「你」） |
+| `14:assistant-stepN:M` | AI 消息 → 跳过 |
+| `12:turn-processN` / `["process",…]` / `9:turn-tailN` | 过程 / 工具调用 / 轮次尾 → 跳过 |
+
+滑动时按鼠标纵坐标 y 找**纵坐标落在其 `getBoundingClientRect()` 内**的那条用户消息，`innerText` 取正文（去掉末尾 `HH:MM` 时间戳）；点击时对该元素 `scrollIntoView({ block: "center" })`。**只认这些 `data-*` 属性**——容器类名（`icaHSq_flowItem`、`ST7X_W_scrollBody`）都带 hash，不碰。
 
-滑动时按鼠标纵坐标 y 找**包含 y 的那条**（落在过程/工具块上则取**距离最近的那条**消息），`getBoundingClientRect()` 实时判定、`innerText` 取正文（去掉末尾 `HH:MM` 时间戳），显示在气泡里。**只认这些 `data-*` 属性**——容器类名（`icaHSq_flowItem`、`ST7X_W_scrollBody`）都带 hash，不碰。
+## 触发区：聊天区右边缘，不是窗口右边缘
 
-## 触发区为什么按坐标而不是抓 DOM
+滚动条本身是浏览器**原生滚动条**（不在 DOM 里、类名带 hash），所以触发用全局 `pointermove` + `clientX` 判定。但**判定基准是聊天区滚动容器的右边缘**（从 `[data-chat-flow]` 往上找第一个 `overflow-y:auto` 的祖先），不是窗口右边缘——否则右侧栏（文件预览等）打开时会在面板上触发、气泡还会盖住面板。
 
-那根滚动条本身是浏览器**原生滚动条**——不在 DOM 里，周围容器类名还带 hash，抓不到也没法定制。所以插件用全局 `pointermove` + `clientX` 判定「是否落在窗口右侧竖条区间」、`clientY` 映射音高；只有**取消息预览**时才去读 `[data-chat-flow]` 的 `data-*` 稳定属性。
+竖条 / 圆点 / 气泡的位置也跟着这个右边缘走，用 `ResizeObserver`（容器变宽）+ `MutationObserver`（面板开合是 DOM 增删）双重兜底重算。
 
 ## 可调参数
 

package/lib/client.js

@@ -37,7 +37,7 @@ window.__ModuleLoader__.load({
 			".dshscp_prevTop{display:flex;align-items:center;gap:8px;margin-bottom:4px}",
 			".dshscp_prevRole{flex:none;padding:1px 5px;border-radius:4px;background:rgba(91,141,239,.3);color:#bcd4ff;font-size:10px;line-height:14px}",
 			".dshscp_prevRoleAI{background:rgba(160,120,240,.28);color:#d6c4ff}",
-			".dshscp_prevNote{flex:none;color:#9aa2b1;font-size:10px;line-height:14px;font-variant-numeric:tabular-nums}",
+			".dshscp_prevHint{margin-left:auto;flex:none;color:#9aa2b1;font-size:10px;line-height:14px}",
 			".dshscp_prevText{font-size:12px;line-height:17px;color:#e6e8ee;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}"
 		].join("");
 		const tagId = "dsh-scroll-piano/scroll-piano.css";
@@ -150,44 +150,55 @@ window.__ModuleLoader__.load({
 			noise.start(now);
 		}
 
-		//#region note naming
-		const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
-		function noteLabel(midi) {
-			return NOTE_NAMES[((midi % 12) + 12) % 12] + (Math.floor(midi / 12) - 1);
+		//#region chat anchors
+		/** 聊天区的滚动容器（从 `[data-chat-flow]` 往上找第一个可纵向滚动的祖先）。 */
+		function findChatScroller() {
+			const flow = document.querySelector("[data-chat-flow]");
+			if (!flow) return null;
+			let sc = flow.parentElement;
+			while (sc && sc !== document.body) {
+				const cs = getComputedStyle(sc);
+				if (/(auto|scroll)/.test(cs.overflowY) && sc.clientHeight > 120) break;
+				sc = sc.parentElement;
+			}
+			return sc && sc !== document.body ? sc : flow;
+		}
+
+		/**
+		 * 聊天区滚动容器的视口矩形——把触发区钉在**聊天区右边缘**，
+		 * 而不是窗口右边缘：右侧栏（文件预览等）打开时，窗口右边是面板，
+		 * 不该在面板上触发、更不该让气泡盖住面板。
+		 */
+		function chatViewport() {
+			const el = findChatScroller();
+			if (!el) return null;
+			const r = el.getBoundingClientRect();
+			return { right: Math.round(r.right), top: Math.round(r.top), bottom: Math.round(r.bottom) };
 		}
 
 		/**
-		 * 取当前视口里、纵坐标 y 处的那条消息（给右侧竖条滑动时做预览）。
+		 * 取**纵坐标 y 落在其范围内**的那条**用户消息**——只预览「我输入的」，
+		 * 不预览 AI 的。稳定锚点是 `[data-chat-flow]` 的直接子元素，key 形如
+		 * `13:input-message<uuid>`（用户）/ `14:assistant-stepN:M`（AI）/
+		 * `12:turn-processN`（过程块），类名带 hash 所以只认 data 属性。
 		 *
-		 * 稳定锚点是 DSH 聊天流的 `[data-chat-flow]`：它的直接子元素每条消息一个，
-		 * key 形如 `13:input-message<uuid>`（用户）或 `14:assistant-stepN:M`（AI），
-		 * 还有 process / tool-call / turn-tail 这类非消息项。类名都带 hash（如
-		 * `icaHSq_flowItem`），所以这里**只认 data 属性，不碰 hash 类名**。
+		 * 刻意**不做「取最近一条」兜底**：滑到 AI / 过程块上就返回 null（预览收起），
+		 * 否则同一条用户消息会在整片区域里被反复显示（就是「重复显示」）。
 		 */
-		function messageAtY(y) {
+		function userMessageAtY(y) {
 			const flow = document.querySelector("[data-chat-flow]");
 			if (!flow) return null;
-			let best = null;
-			let bestDist = Infinity;
 			for (const el of flow.children) {
 				const key = String(el.getAttribute("data-chat-flow-key") || el.getAttribute("data-chat-node-key") || "");
-				let role = null;
-				if (/input-message/.test(key)) role = "user";
-				else if (/assistant/.test(key)) role = "ai";
-				if (!role) continue; // process / tool / tail 之类不是消息，跳过
+				if (!/input-message/.test(key)) continue;
 				const r = el.getBoundingClientRect();
-				if (r.height <= 0) continue;
-				// 落在本条内 dist=0；否则取离鼠标最近的一条——滑到工具/过程块上时
-				// 显示的仍是它所属的那条消息，而不是弹一句「不是消息」
-				const dist = y < r.top ? r.top - y : (y > r.bottom ? y - r.bottom : 0);
-				if (dist >= bestDist) continue;
-				// innerText 会把渲染出来的 Markdown 正文抓全；末尾的 HH:MM 是消息时间戳，去掉
+				if (r.height <= 0 || y < r.top || y > r.bottom) continue;
+				// innerText 抓渲染后的正文；末尾的 HH:MM 是消息时间戳，去掉
 				const text = (el.innerText || "").replace(/\s+/g, " ").trim().replace(/\s*\d{1,2}:\d{2}$/, "").trim();
 				if (!text) continue;
-				bestDist = dist;
-				best = { role, text };
+				return { text, el };
 			}
-			return best;
+			return null;
 		}
 
 		//#region settings
@@ -207,7 +218,6 @@ window.__ModuleLoader__.load({
 		//#region component
 		function ScrollPiano() {
 			const [settings, setSettings] = useState(loadSettings);
-			const [label, setLabel] = useState("");
 			const settingsRef = useRef(settings);
 			settingsRef.current = settings;
 			const lastMidiRef = useRef(null);
@@ -216,8 +226,9 @@ window.__ModuleLoader__.load({
 			const markerRef = useRef(null);
 			const prevRef = useRef(null);
 			const roleRef = useRef(null);
-			const noteRef = useRef(null);
 			const textRef = useRef(null);
+			const bubbleHoverRef = useRef(false);
+			const activeMsgRef = useRef(null);
 
 			const setOn = useCallback((on) => {
 				setSettings((s) => {
@@ -236,48 +247,92 @@ window.__ModuleLoader__.load({
 			}, []);
 
 			useEffect(() => {
+				let ro = null;
+				let roEl = null;
+				let mo = null;
+				let moTimer = 0;
+				/** 把竖条 / 圆点 / 气泡钉到聊天区右边缘（右侧面板打开时跟着左移）。 */
+				const placeAtChatEdge = () => {
+					const view = chatViewport();
+					const rightPx = view ? Math.max(0, window.innerWidth - view.right) : 0;
+					if (stripRef.current) stripRef.current.style.right = rightPx + "px";
+					if (markerRef.current) markerRef.current.style.right = rightPx + "px";
+					if (prevRef.current) prevRef.current.style.right = rightPx + 18 + "px";
+					// 面板开合 / 窗口缩放会改聊天容器宽度 → 挂 ResizeObserver 跟着走
+					const sc = findChatScroller();
+					if (ro && sc && sc !== roEl) {
+						if (roEl) ro.unobserve(roEl);
+						ro.observe(sc);
+						roEl = sc;
+					}
+					return view;
+				};
+				if (typeof ResizeObserver !== "undefined") ro = new ResizeObserver(() => placeAtChatEdge());
+				// 右侧面板开合是 DOM 增删（不一定触发 resize）→ 用 MutationObserver 兜底，
+				// 只监听 childList（不监听 attributes，避免自己写 style 造成回环）。
+				if (typeof MutationObserver !== "undefined") {
+					mo = new MutationObserver(() => {
+						if (moTimer) return;
+						moTimer = window.setTimeout(() => { moTimer = 0; placeAtChatEdge(); }, 200);
+					});
+					mo.observe(document.body, { childList: true, subtree: true });
+				}
 				const showMarker = (y) => {
 					const m = markerRef.current;
 					if (m) m.style.top = Math.round(y - 3.5) + "px";
 				};
-				const showPreview = (y, noteText, msg) => {
+				/**
+				 * 气泡**只在鼠标压在某条「用户消息」上时出现**，内容只有那条消息的正文。
+				 * 其余位置（AI 回复 / 工具块 / 空白）整个收起——不放音名、不放 MIDI 数字。
+				 */
+				const showPreview = (y, msg) => {
 					const el = prevRef.current;
 					if (!el) return;
-					if (noteRef.current) noteRef.current.textContent = "♪ " + noteText;
-					if (roleRef.current) {
-						// 没有消息（空会话）时只留音名，不显示占位标签/文案
-						roleRef.current.style.display = msg ? "" : "none";
-						if (msg) {
-							roleRef.current.textContent = msg.role === "user" ? "你" : "AI";
-							roleRef.current.className = "dshscp_prevRole" + (msg.role === "ai" ? " dshscp_prevRoleAI" : "");
-						}
+					if (!msg) {
+						activeMsgRef.current = null;
+						el.classList.remove("dshscp_prevOn");
+						el.style.pointerEvents = "none";
+						return;
 					}
-					if (textRef.current) textRef.current.textContent = msg ? msg.text : "";
+					activeMsgRef.current = msg;
+					if (textRef.current) textRef.current.textContent = msg.text;
+					el.style.pointerEvents = "auto";
+					el.style.cursor = "pointer";
 					// 竖直居中于鼠标，并夹在视口内
-					const h = el.offsetHeight || 56;
+					const h = el.offsetHeight || 40;
 					const top = Math.max(8, Math.min(window.innerHeight - h - 8, y - h / 2));
 					el.style.top = Math.round(top) + "px";
+					el.classList.add("dshscp_prevOn");
+				};
+				const hidePreview = () => {
+					activeMsgRef.current = null;
+					if (prevRef.current) {
+						prevRef.current.classList.remove("dshscp_prevOn");
+						prevRef.current.style.pointerEvents = "none";
+					}
+					if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
 				};
 
 				const onMove = (e) => {
 					const s = settingsRef.current;
 					if (!s.on) return;
-					const W = window.innerWidth;
-					const H = window.innerHeight;
-					if (e.clientX < W - s.stripWidth) {
+					if (bubbleHoverRef.current) return; // 鼠标停在气泡上（正要点击），别把它收掉
+					const view = placeAtChatEdge();
+					if (!view) return;
+					// 触发区 = 聊天区右边缘那一条；落在右侧面板上一律不响应
+					if (e.clientX < view.right - s.stripWidth || e.clientX > view.right + 2) {
 						lastMidiRef.current = null;
-						if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
-						if (prevRef.current) prevRef.current.classList.remove("dshscp_prevOn");
+						hidePreview();
 						return;
 					}
-					const span = Math.max(1, H - s.inset * 2);
+					const span = Math.max(1, window.innerHeight - s.inset * 2);
 					const t = Math.min(1, Math.max(0, (e.clientY - s.inset) / span));
 					// t=0（顶部）→ highNote；t=1（底部）→ lowNote
 					const midi = Math.round(s.highNote - t * (s.highNote - s.lowNote));
 					showMarker(e.clientY);
-					showPreview(e.clientY, noteLabel(midi) + " · " + midi, messageAtY(e.clientY));
+					// 预览只看用户消息；没有就整个收起（不显示音名/MIDI）
+					showPreview(e.clientY, userMessageAtY(e.clientY));
 					if (markerRef.current) markerRef.current.classList.add("dshscp_markerOn");
-					if (prevRef.current) prevRef.current.classList.add("dshscp_prevOn");
 					if (midi !== lastMidiRef.current) {
 						lastMidiRef.current = midi;
 						// 限速：滑太快时不要瞬间堆几十个音（会糊成一片杂音）
@@ -286,32 +341,56 @@ window.__ModuleLoader__.load({
 							lastPlayRef.current = nowMs;
 							playNote(midi, s.volume);
 						}
-						setLabel(noteLabel(midi));
 					}
 				};
 				const onLeave = () => {
 					lastMidiRef.current = null;
-					if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
-					if (prevRef.current) prevRef.current.classList.remove("dshscp_prevOn");
+					bubbleHoverRef.current = false;
+					hidePreview();
 				};
 				document.addEventListener("pointermove", onMove, { passive: true });
 				document.addEventListener("pointerleave", onLeave);
 				window.addEventListener("blur", onLeave);
+				window.addEventListener("resize", placeAtChatEdge);
+				placeAtChatEdge();
 				return () => {
 					document.removeEventListener("pointermove", onMove);
 					document.removeEventListener("pointerleave", onLeave);
 					window.removeEventListener("blur", onLeave);
+					window.removeEventListener("resize", placeAtChatEdge);
+					if (ro) ro.disconnect();
+					if (mo) mo.disconnect();
+					if (moTimer) window.clearTimeout(moTimer);
 				};
 			}, []);
 
-			// 竖条指示 + 位置圆点 + 「该位置消息预览」气泡（纯视觉，不拦事件）
+			// 竖条 + 位置圆点 + 「我的消息」预览气泡（气泡可点，点了跳过去）
 			return h(React.Fragment, null,
 				h("div", { ref: stripRef, className: "dshscp_strip" + (settings.on ? " dshscp_stripOn" : "") }),
 				h("div", { ref: markerRef, className: "dshscp_marker" }),
-				h("div", { ref: prevRef, className: "dshscp_prev" },
+				h("div", {
+					ref: prevRef,
+					className: "dshscp_prev",
+					// 鼠标移进气泡时别被 pointermove 收掉（要能点它跳转）
+					onMouseEnter: () => { bubbleHoverRef.current = true; },
+					onMouseLeave: () => { bubbleHoverRef.current = false; },
+					onClick: () => {
+						const m = activeMsgRef.current;
+						if (!m || !m.el) return;
+						try { m.el.scrollIntoView({ behavior: "smooth", block: "center" }); }
+						catch { try { m.el.scrollIntoView(); } catch {} }
+						bubbleHoverRef.current = false;
+						activeMsgRef.current = null;
+						if (prevRef.current) {
+							prevRef.current.classList.remove("dshscp_prevOn");
+							prevRef.current.style.pointerEvents = "none";
+						}
+						if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
+					}
+				},
 					h("div", { className: "dshscp_prevTop" },
-						h("span", { ref: roleRef, className: "dshscp_prevRole" }, "—"),
-						h("span", { ref: noteRef, className: "dshscp_prevNote" }, "♪")
+						h("span", { ref: roleRef, className: "dshscp_prevRole" }, "你"),
+						h("span", { className: "dshscp_prevHint" }, "点击跳转")
 					),
 					h("div", { ref: textRef, className: "dshscp_prevText" })
 				),
@@ -332,8 +411,7 @@ window.__ModuleLoader__.load({
 						value: settings.volume,
 						onChange: (e) => setVolume(parseFloat(e.target.value)),
 						title: "音量"
-					}),
-					label ? h("span", { style: { opacity: 0.75, minWidth: "26px" } }, label) : null
+					})
 				)
 			);
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-scroll-piano",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "滚动钢琴：鼠标滑过 DSH 右侧边缘的滚动条竖条时，按纵向位置发出钢琴音（越高音越高，特雷门琴式）。",
   "type": "module",
   "license": "MIT",