dsh-scroll-piano 0.1.0 → 0.2.0

package/README.md

@@ -6,13 +6,25 @@
 
 - 右侧边缘一条细彩色竖条（开启时淡淡发光），鼠标进入该区间即触发。
 - 鼠标纵向移动 = 连续刮奏；竖条上有个白点跟随鼠标位置。
-- 鼠标旁显示当前音名（如 `C4 · 60`）。
+- 鼠标旁浮出**该位置的消息预览气泡**（类似滚动条的预览 tooltip）：角色标签（`你` / `AI`）+ 当前音名（如 `♪ C4 · 60`）+ 该高度那条消息的正文（最多 3 行）。
 - 左下角一枚 `🎵 滚动钢琴 ON/OFF` 胶囊：点开关切换、右侧滑块调音量（设置存 `localStorage`）。
 - 默认音域 C3–C6（3 个八度），只按半音触发（同音不重复触发）。
 
-## 为什么按坐标而不是抓 DOM
+## 消息预览怎么定位
 
-那根滚动条是浏览器**原生滚动条**——不在 DOM 里，且周围容器类名带 hash（`ST7X_W_scrollBody` 这类），抓不到也没法定制。所以插件用全局 `pointermove` + `clientX` 判定「是否落在窗口右侧竖条区间」、`clientY` 映射音高，稳且不依赖任何内部类名。
+聊天流的稳定锚点是 **`[data-chat-flow]`**：它的**直接子元素**一条消息一个，key 形如：
+
+| key 前缀 | 含义 |
+|---|---|
+| `13:input-message<uuid>` | 用户消息 → 角色显示「你」 |
+| `14:assistant-stepN:M` | AI 消息 → 角色显示「AI」 |
+| `12:turn-processN` / `["process",…]` / `9:turn-tailN` | 过程 / 工具调用 / 轮次尾，**不预览** |
+
+滑动时取鼠标纵坐标 y 落在哪条子元素的 `getBoundingClientRect()` 里，`innerText` 取正文（去掉末尾 `HH:MM` 时间戳），显示在气泡里。**只认这些 `data-*` 属性**——容器类名（`icaHSq_flowItem`、`ST7X_W_scrollBody`）都带 hash，不碰。
+
+## 触发区为什么按坐标而不是抓 DOM
+
+那根滚动条本身是浏览器**原生滚动条**——不在 DOM 里，周围容器类名还带 hash，抓不到也没法定制。所以插件用全局 `pointermove` + `clientX` 判定「是否落在窗口右侧竖条区间」、`clientY` 映射音高；只有**取消息预览**时才去读 `[data-chat-flow]` 的 `data-*` 稳定属性。
 
 ## 可调参数
 

package/lib/client.js

@@ -32,8 +32,13 @@ window.__ModuleLoader__.load({
 			".dshscp_stripOn{opacity:.55}",
 			".dshscp_marker{position:fixed;right:0;width:7px;height:7px;border-radius:50%;z-index:2147482001;pointer-events:none;background:#fff;box-shadow:0 0 8px rgba(160,120,240,.95);opacity:0;transition:opacity .1s ease}",
 			".dshscp_markerOn{opacity:1}",
-			".dshscp_hud{position:fixed;z-index:2147482002;pointer-events:none;padding:2px 7px;border-radius:6px;background:rgba(20,24,32,.92);color:#e6e8ee;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .1s ease;white-space:nowrap}",
-			".dshscp_hudOn{opacity:1}"
+			".dshscp_prev{position:fixed;right:18px;z-index:2147482002;pointer-events:none;max-width:min(320px,42vw);padding:7px 10px;border-radius:9px;background:rgba(20,24,32,.95);color:#e6e8ee;box-shadow:0 6px 22px rgba(0,0,0,.45);opacity:0;transition:opacity .1s ease}",
+			".dshscp_prevOn{opacity:1}",
+			".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_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";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
@@ -151,6 +156,40 @@ window.__ModuleLoader__.load({
 			return NOTE_NAMES[((midi % 12) + 12) % 12] + (Math.floor(midi / 12) - 1);
 		}
 
+		/**
+		 * 取当前视口里、纵坐标 y 处的那条消息（给右侧竖条滑动时做预览）。
+		 *
+		 * 稳定锚点是 DSH 聊天流的 `[data-chat-flow]`：它的直接子元素每条消息一个，
+		 * key 形如 `13:input-message<uuid>`（用户）或 `14:assistant-stepN:M`（AI），
+		 * 还有 process / tool-call / turn-tail 这类非消息项。类名都带 hash（如
+		 * `icaHSq_flowItem`），所以这里**只认 data 属性，不碰 hash 类名**。
+		 */
+		function messageAtY(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 之类不是消息，跳过
+				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 是消息时间戳，去掉
+				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 best;
+		}
+
 		//#region settings
 		const LS_KEY = "dsh-scroll-piano:settings";
 		const DEFAULTS = { on: true, volume: 0.25, stripWidth: 30, lowNote: 48, highNote: 84, inset: 56 };
@@ -175,7 +214,10 @@ window.__ModuleLoader__.load({
 			const lastPlayRef = useRef(0);
 			const stripRef = useRef(null);
 			const markerRef = useRef(null);
-			const hudRef = useRef(null);
+			const prevRef = useRef(null);
+			const roleRef = useRef(null);
+			const noteRef = useRef(null);
+			const textRef = useRef(null);
 
 			const setOn = useCallback((on) => {
 				setSettings((s) => {
@@ -198,12 +240,23 @@ window.__ModuleLoader__.load({
 					const m = markerRef.current;
 					if (m) m.style.top = Math.round(y - 3.5) + "px";
 				};
-				const showHud = (y, text) => {
-					const el = hudRef.current;
+				const showPreview = (y, noteText, msg) => {
+					const el = prevRef.current;
 					if (!el) return;
-					el.style.top = Math.round(y - 10) + "px";
-					el.style.right = "16px";
-					el.textContent = text;
+					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 (textRef.current) textRef.current.textContent = msg ? msg.text : "";
+					// 竖直居中于鼠标，并夹在视口内
+					const h = el.offsetHeight || 56;
+					const top = Math.max(8, Math.min(window.innerHeight - h - 8, y - h / 2));
+					el.style.top = Math.round(top) + "px";
 				};
 
 				const onMove = (e) => {
@@ -214,7 +267,7 @@ window.__ModuleLoader__.load({
 					if (e.clientX < W - s.stripWidth) {
 						lastMidiRef.current = null;
 						if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
-						if (hudRef.current) hudRef.current.classList.remove("dshscp_hudOn");
+						if (prevRef.current) prevRef.current.classList.remove("dshscp_prevOn");
 						return;
 					}
 					const span = Math.max(1, H - s.inset * 2);
@@ -222,9 +275,9 @@ window.__ModuleLoader__.load({
 					// t=0（顶部）→ highNote；t=1（底部）→ lowNote
 					const midi = Math.round(s.highNote - t * (s.highNote - s.lowNote));
 					showMarker(e.clientY);
-					showHud(e.clientY, noteLabel(midi) + "  ·  " + midi);
+					showPreview(e.clientY, noteLabel(midi) + " · " + midi, messageAtY(e.clientY));
 					if (markerRef.current) markerRef.current.classList.add("dshscp_markerOn");
-					if (hudRef.current) hudRef.current.classList.add("dshscp_hudOn");
+					if (prevRef.current) prevRef.current.classList.add("dshscp_prevOn");
 					if (midi !== lastMidiRef.current) {
 						lastMidiRef.current = midi;
 						// 限速：滑太快时不要瞬间堆几十个音（会糊成一片杂音）
@@ -239,7 +292,7 @@ window.__ModuleLoader__.load({
 				const onLeave = () => {
 					lastMidiRef.current = null;
 					if (markerRef.current) markerRef.current.classList.remove("dshscp_markerOn");
-					if (hudRef.current) hudRef.current.classList.remove("dshscp_hudOn");
+					if (prevRef.current) prevRef.current.classList.remove("dshscp_prevOn");
 				};
 				document.addEventListener("pointermove", onMove, { passive: true });
 				document.addEventListener("pointerleave", onLeave);
@@ -251,11 +304,17 @@ window.__ModuleLoader__.load({
 				};
 			}, []);
 
-			// 竖条指示 + 位置圆点 + 音符 HUD（纯视觉，不拦事件）
+			// 竖条指示 + 位置圆点 + 「该位置消息预览」气泡（纯视觉，不拦事件）
 			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: hudRef, className: "dshscp_hud" }),
+				h("div", { ref: prevRef, className: "dshscp_prev" },
+					h("div", { className: "dshscp_prevTop" },
+						h("span", { ref: roleRef, className: "dshscp_prevRole" }, "—"),
+						h("span", { ref: noteRef, className: "dshscp_prevNote" }, "♪")
+					),
+					h("div", { ref: textRef, className: "dshscp_prevText" })
+				),
 				h("div", { className: "dshscp_pill" },
 					h("button", {
 						onClick: () => setOn(!settings.on),

package/package.json

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