dsh-per-message-model 0.1.1 → 0.1.3

package/lib/client.js

@@ -110,6 +110,58 @@ window.__ModuleLoader__.load({
 			return modelBadge(entry, t);
 		}
 		//#endregion
+		//#region client footer
+		/**
+		* Composer-dock model button: shows the LAST model actually used by the
+		* session (the folded `current` entry, i.e. the latest assistant message's
+		* provider/model), not the composer's selected default. Hover keeps the
+		* existing chip behavior (color change + title); a single click rolls the
+		* model name out from left to right like a scroll (icon rotates by a random
+		* angle); clicking again rolls it back (icon rotates back).
+		*/
+		function FooterModelBadge({ useProjection, t }) {
+			const [open, setOpen] = React.useState(false);
+			const [rot, setRot] = React.useState(0);
+			const value = useProjection("perMessageModel");
+			const current = value === void 0 || value === null || typeof value !== "object" || value.current === void 0
+				? void 0
+				: value.current;
+			const known = current !== void 0 && typeof current === "object";
+			const provider = known && typeof current.provider === "string" ? current.provider : null;
+			const model = known && typeof current.model === "string" ? current.model : null;
+			const label = provider !== null && model !== null
+				? provider + " / " + model
+				: t("badge.unknown");
+			const toggle = () => {
+				if (open) {
+					setOpen(false);
+				} else {
+					setRot(Math.round(90 + Math.random() * 180));
+					setOpen(true);
+				}
+			};
+			return createElement("button", {
+				type: "button",
+				className: BADGE_PREFIX + "footer",
+				"data-dsh-per-message-model-footer": "true",
+				"aria-label": label,
+				title: label,
+				"aria-expanded": open ? "true" : "false",
+				onClick: toggle
+			}, [
+				createElement("span", {
+					key: "icon",
+					className: BADGE_PREFIX + "footer-icon",
+					style: { transform: open ? "rotate(" + rot + "deg)" : "rotate(0deg)" }
+				}, chipIcon()),
+				createElement("span", {
+					key: "label",
+					className: BADGE_PREFIX + "footer-label",
+					"data-open": open ? "true" : "false"
+				}, label)
+			]);
+		}
+		//#endregion
 		//#region client divider
 		/** Fixed Chinese copy for the model-switch divider (user-required). */
 		const SWITCH_COPY = "模型切换：";
@@ -160,77 +212,61 @@ window.__ModuleLoader__.load({
 			return div;
 		}
 		/**
-		* In-stream model-switch divider. Mounted on the turnTail chain seat (the
-		* only per-message-adjacent additive seat), but instead of rendering at the
-		* turn tail it inserts the divider DOM node directly AFTER the assistant
-		* message that PRECEDES the switch (fromTurn/fromStep → the official
-		* assistant-step chat 节点 key). The divider therefore lands at the exact
-		* mid-stream switch point, scrolls with the conversation, and is never
-		* fixed to the viewport. The component reads the live projection, so the
-		* inserted node appears once the new route's message arrives.
-		* @param turn - the current turn id (owner prop).
+		* In-stream model-switch divider. Session-scoped maintenance component
+		* (mounted on the always-alive session header seat, not a per-turn seat):
+		* it watches the live projection and keeps a divider node at EVERY switch
+		* boundary — strictly BETWEEN the last call of the previous model
+		* (fromTurn/fromStep anchor) and the first call of the new model
+		* (toTurn/toStep anchor). It prefers inserting after the from-step node;
+		* when that node is absent (windowed history) it falls back to inserting
+		* before the to-step node. A MutationObserver continuously repairs
+		* dividers lost to windowing/re-render, so they survive scrolling and
+		* turn lifecycle. Nodes are deduplicated by the switch's fromSeq.
 		*/
-		function ModelSwitchDivider({ turn, useProjection }) {
+		function ModelSwitchDivider({ useProjection }) {
 			const value = useProjection("perMessageModel");
 			const switches = value === void 0 || value === null || typeof value !== "object" || !Array.isArray(value.switches)
 				? []
 				: value.switches;
-			// The owner prop is the full turn location object; its numeric id is
-			// exposed as `.turn` (matches the projection's fromTurn/toTurn).
-			const turnId = turn !== null && typeof turn === "object" && Number.isSafeInteger(turn.turn) ? turn.turn : null;
 			React.useEffect(() => {
 				if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-				const inserted = [];
 				let observer = null;
-				const pending = switches.filter((sw) =>
-					sw.fromTurn === turnId &&
-					sw.fromStep !== void 0 && sw.fromStep !== null &&
-					sw.to !== null && typeof sw.to === "object" &&
-					typeof sw.to.provider === "string" && typeof sw.to.model === "string"
-				);
 				const tryInsert = () => {
-					let remaining = 0;
-					for (const sw of pending) {
-						const key = ASSISTANT_STEP_KEY_PREFIX + sw.fromTurn + ":" + sw.fromStep;
-						const anchor = document.querySelector('[data-chat-anchor-key="' + key + '"]');
-						if (anchor === null) { remaining += 1; continue; }
-						if (anchor.nextElementSibling !== null && anchor.nextElementSibling.hasAttribute("data-dsh-model-switch")) continue;
+					for (const sw of switches) {
+						if (sw.to === null || typeof sw.to !== "object" ||
+							typeof sw.to.provider !== "string" || typeof sw.to.model !== "string") continue;
+						if (sw.fromTurn === void 0 || sw.fromTurn === null ||
+							sw.fromStep === void 0 || sw.fromStep === null) continue;
+						const seqKey = Number.isSafeInteger(sw.fromSeq) ? sw.fromSeq : (sw.fromTurn + ":" + sw.fromStep);
+						const existing = document.querySelector('[data-dsh-model-switch][data-from-seq="' + seqKey + '"]');
+						if (existing !== null) continue;
+						const fromKey = ASSISTANT_STEP_KEY_PREFIX + sw.fromTurn + ":" + sw.fromStep;
+						const toKey = Number.isSafeInteger(sw.toTurn) && Number.isSafeInteger(sw.toStep)
+							? ASSISTANT_STEP_KEY_PREFIX + sw.toTurn + ":" + sw.toStep
+							: null;
+						const fromAnchor = document.querySelector('[data-chat-anchor-key="' + fromKey + '"]');
+						const toAnchor = toKey !== null ? document.querySelector('[data-chat-anchor-key="' + toKey + '"]') : null;
+						const anchor = fromAnchor !== null ? fromAnchor : toAnchor;
+						if (anchor === null) continue;
 						const node = buildDividerNode(sw);
-						anchor.insertAdjacentElement("afterend", node);
-						inserted.push(node);
+						node.setAttribute("data-from-seq", String(seqKey));
+						if (fromAnchor !== null) fromAnchor.insertAdjacentElement("afterend", node);
+						else toAnchor.insertAdjacentElement("beforebegin", node);
 					}
-					return remaining;
 				};
-				// First pass: the anchor nodes are usually already rendered. If any
-				// are still missing (windowed/historical rendering), watch the chat
-				// flow until they appear, then insert and stop watching.
-				let remaining = tryInsert();
-				if (remaining > 0 && inserted.length === 0) {
-					observer = new MutationObserver(() => {
-						const left = tryInsert();
-						if (left === 0) {
-							observer.disconnect();
-							observer = null;
-						}
-					});
-					observer.observe(document.body, { childList: true, subtree: true });
-				}
+				tryInsert();
+				// Keep repairing: windowed conversation rendering mounts/unmounts
+				// chat nodes while scrolling, so dividers must be re-inserted on
+				// any childList change. The callback is cheap (per-switch
+				// querySelector + dedupe) and exits immediately once all exist.
+				observer = new MutationObserver(() => tryInsert());
+				observer.observe(document.body, { childList: true, subtree: true });
 				return () => {
 					if (observer !== null) observer.disconnect();
-					for (const node of inserted) node.remove();
 				};
-			}, [switches, turnId]);
+			}, [switches]);
 			return null;
 		}
-		/**
-		* Chain selector: this occupant is the only turnTail registrant, so it is
-		* always elected; the component itself decides whether to insert anything
-		* (select cannot reach the projection store synchronously, so the reactive
-		* read lives in the component via useProjection).
-		*/
-		function selectModelSwitch() {
-			return true;
-		}
 		//#endregion
 		//#region client plugin
 		/** Required services for the additive seats. */
@@ -250,10 +286,16 @@ window.__ModuleLoader__.load({
 				`div[class*="actions"]:has([data-slot="conversation.chat.assistant-actions"]) [class*="timeEnd"]{order:4}`,
 				// In-stream divider: full-width block, embeds in the message flow.
 				// Label (模型切换：) and arrow are gray; model names are darker/bolder.
-				`[data-dsh-model-switch]{display:flex;align-items:center;gap:8px;margin:10px 0 16px;padding:10px 14px;border:1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.30));border-left:4px solid var(--dsw-alias-state-business-primary, #4f8cff);border-radius:10px;background:var(--dsw-alias-bg-module-platform, rgba(128,128,128,.16));box-shadow:0 1px 3px rgba(0,0,0,.08);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;user-select:none}`,
+				`[data-dsh-model-switch]{display:flex;align-items:center;gap:8px;margin:10px 0 16px;padding:10px 14px;border:1.5px solid var(--dsw-alias-state-business-primary, #4f8cff);border-radius:10px;background:var(--dsw-alias-state-business-tertiary, rgba(79,140,255,.12));box-shadow:0 1px 3px rgba(0,0,0,.10);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;user-select:none}`,
 				`[data-dsh-model-switch] [class*="-divider-label"]{flex:none;color:var(--dsw-alias-label-tertiary);font-weight:600}`,
 				`[data-dsh-model-switch] [class*="-divider-model"]{flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary);font-weight:700}`,
-				`[data-dsh-model-switch] [class*="-divider-arrow"]{flex:none;display:inline-flex;align-items:center;color:var(--dsw-alias-label-tertiary)}`
+				`[data-dsh-model-switch] [class*="-divider-arrow"]{flex:none;display:inline-flex;align-items:center;color:var(--dsw-alias-label-tertiary)}`,
+				// Composer-dock model button: chip icon + unfoldable label (scroll).
+				`[data-dsh-per-message-model-footer]{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));border-radius:8px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;max-width:100%;overflow:hidden}`,
+				`[data-dsh-per-message-model-footer]:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12))}`,
+				`[data-dsh-per-message-model-footer] [class*="-footer-icon"]{display:inline-flex;align-items:center;flex:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}`,
+				`[data-dsh-per-message-model-footer] [class*="-footer-label"]{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .35s ease;font-size:12px;line-height:16px;color:var(--dsw-alias-label-primary);font-weight:600}`,
+				`[data-dsh-per-message-model-footer] [class*="-footer-label"][data-open="true"]{max-width:360px;opacity:1}`
 			].join("\n");
 			document.head.appendChild(badgeStyle);
 			ctx.effect(() => () => badgeStyle.remove(), "per-message-model: css");
@@ -270,13 +312,18 @@ window.__ModuleLoader__.load({
 				locale: NS,
 				order: 40
 			}, PerMessageModelBadge));
-			ctx.slots.inject("conversation.chat.turnTail", () => ctx.slots.register({
-				name: "conversation.chat.turnTail",
+			ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
+				name: "conversation.session.header.actions",
 				id: "dsh-per-message-model-switch",
 				locale: NS,
-				order: 60,
-				select: selectModelSwitch
+				order: 90
 			}, ModelSwitchDivider));
+			ctx.slots.inject("conversation.input.dock", () => ctx.slots.register({
+				name: "conversation.input.dock",
+				id: "dsh-per-message-model-footer",
+				locale: NS,
+				order: 90
+			}, FooterModelBadge));
 		}
 		//#endregion
 		exports.apply = apply;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-per-message-model",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "在 DSH 主对话每条 assistant 回复旁展示该条回复实际使用的 provider / model 徽章（可选附带 reasoning effort）",
   "type": "module",
   "main": "./lib/index.js",