@roaming-ai/dsh-group-chat 0.3.2 → 0.4.0

package/lib/client.js

@@ -122,6 +122,7 @@ window.__ModuleLoader__.load({
 			".dsgc-msg.mine{flex-direction:row-reverse}",
 			".dsgc-avatar{width:28px;height:28px;box-sizing:border-box;border:2px solid var(--dsw-alias-border-l3,rgba(128,128,128,.4));border-radius:50%;background:var(--dsw-alias-bg-module-platform,rgba(128,128,128,.12));color:var(--dsw-alias-label-primary,inherit);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none;margin-top:1px}",
 			".dsgc-avatar.mine{border-color:transparent;background:var(--dsw-alias-button-info-fill,#4f6ef7);color:var(--dsw-alias-label-primary-foreground,#fff)}",
+			".dsgc-avatar .dsgc-orb{display:block}",
 			".dsgc-msgbody{max-width:76%;min-width:0;display:flex;flex-direction:column;gap:5px}",
 			".dsgc-msg.mine .dsgc-msgbody{align-items:flex-end}",
 			".dsgc-msghead{display:flex;gap:6px;align-items:center;min-width:0;font-size:12px;color:var(--dsw-alias-label-secondary,inherit)}",
@@ -2125,6 +2126,167 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/components/SpeakerOrb.tsx
+		/**
+		* 发言人执行态点阵光球（live 行头像内容）：角色色单色点阵 Canvas 2D 动画。
+		* thinking（轨道热斑游走＝等待首字节/推理中）与 listening（向外涟漪＝正文
+		* 流出）两态间弹簧缩放 + 权重交叉淡入；裁掉参考实现 MatrixOrb 的 label、
+		* level 与 idle 态（本场景只有执行中一种挂载时机），尺寸钉死为头像内容盒。
+		* @module dsh-group-chat/client/SpeakerOrb
+		*/
+		const TAU = Math.PI * 2;
+		const STATES = ["thinking", "listening"];
+		/** 头像内容盒：28px 外框减 2px 描边 ×2；圆形轮廓由 d 截断近似。 */
+		const SIZE = 24;
+		const GRID = 7;
+		/** 点阵铺开比例：外圈点贴近描边又不被 border-radius 裁切。 */
+		const SPREAD = .86;
+		const SCALE = {
+			thinking: .94,
+			listening: 1
+		};
+		const DAMPING = 26;
+		const ATTACK = .22;
+		const RELEASE = .08;
+		/** thinking 态热斑轨道（点阵归一化坐标）。 */
+		const ORBITERS = [
+			{
+				radius: .62,
+				speed: 2.2,
+				phase: 0,
+				spread: .42
+			},
+			{
+				radius: .4,
+				speed: -1.7,
+				phase: 2.1,
+				spread: .36
+			},
+			{
+				radius: .8,
+				speed: 1.15,
+				phase: 4,
+				spread: .34
+			}
+		];
+		function envelope(t) {
+			const slow = .5 + .5 * Math.sin(t * .62 + .4);
+			const fast = .5 + .5 * Math.sin(t * 1.9 + 1.1);
+			return .22 + .78 * (.45 + .55 * slow) * fast;
+		}
+		function intensityOf(state, d, nx, ny, t, amplitude) {
+			if (state === "listening") return .32 + amplitude * (.34 + .38 * (.5 + .5 * Math.sin(d * 4.2 - t * 3)));
+			let heat = 0;
+			for (const o of ORBITERS) {
+				const a = t * o.speed + o.phase;
+				const dx = nx - Math.cos(a) * o.radius;
+				const dy = ny - Math.sin(a) * o.radius;
+				heat += Math.exp(-(dx * dx + dy * dy) / (o.spread * o.spread));
+			}
+			return .26 + .8 * Math.min(1, heat);
+		}
+		function subscribeToZoom(onChange) {
+			window.addEventListener("resize", onChange);
+			return () => window.removeEventListener("resize", onChange);
+		}
+		function useDevicePixelRatio() {
+			return (0, react.useSyncExternalStore)(subscribeToZoom, () => Math.min(window.devicePixelRatio || 1, 4), () => 1);
+		}
+		function SpeakerOrb(props) {
+			const { state, color } = props;
+			const canvasRef = (0, react.useRef)(null);
+			const stateRef = (0, react.useRef)(state);
+			const redrawRef = (0, react.useRef)(null);
+			const dpr = useDevicePixelRatio();
+			(0, react.useEffect)(() => {
+				stateRef.current = state;
+			}, [state]);
+			(0, react.useEffect)(() => {
+				const canvas = canvasRef.current;
+				const ctx = canvas?.getContext("2d");
+				if (!canvas || !ctx) return;
+				const buffer = Math.round(SIZE * dpr);
+				canvas.width = canvas.height = buffer;
+				ctx.scale(buffer / SIZE, buffer / SIZE);
+				ctx.fillStyle = color;
+				const half = 3;
+				const spacing = SIZE * SPREAD / 6;
+				const maxRadius = spacing * .6;
+				const center = SIZE / 2;
+				const weights = {
+					thinking: 0,
+					listening: 0
+				};
+				weights[stateRef.current] = 1;
+				const draw = (t, amplitude, scale) => {
+					ctx.clearRect(0, 0, SIZE, SIZE);
+					for (let iy = 0; iy < GRID; iy++) for (let ix = 0; ix < GRID; ix++) {
+						const nx = (ix - half) / half;
+						const ny = (iy - half) / half;
+						const d = Math.hypot(nx, ny);
+						if (d > 1.12) continue;
+						let blended = 0;
+						for (const s of STATES) {
+							if (weights[s] < .001) continue;
+							blended += weights[s] * intensityOf(s, d, nx, ny, t, amplitude);
+						}
+						const intensity = Math.min(1, Math.max(0, blended));
+						const radius = maxRadius * Math.exp(-d * d * 1.7) * intensity * scale;
+						if (radius * dpr < .5) continue;
+						ctx.beginPath();
+						ctx.arc(center + (ix - half) * spacing * scale, center + (iy - half) * spacing * scale, radius, 0, TAU);
+						ctx.fill();
+					}
+				};
+				if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+					redrawRef.current = () => {
+						const current = stateRef.current;
+						for (const s of STATES) weights[s] = s === current ? 1 : 0;
+						draw(0, envelope(0), SCALE[current]);
+					};
+					redrawRef.current();
+					return () => {
+						redrawRef.current = null;
+					};
+				}
+				let t = 0;
+				let amplitude = 0;
+				let scale = SCALE[stateRef.current];
+				let velocity = 0;
+				let last = performance.now();
+				let raf = 0;
+				const frame = (now) => {
+					const dt = Math.min((now - last) / 1e3, .05);
+					last = now;
+					t += dt;
+					const current = stateRef.current;
+					const target = envelope(t);
+					const rate = target > amplitude ? ATTACK : RELEASE;
+					amplitude += (target - amplitude) * (1 - Math.pow(1 - rate, dt * 60));
+					const step = 1 - Math.pow(.84, dt * 60);
+					for (const s of STATES) weights[s] += ((s === current ? 1 : 0) - weights[s]) * step;
+					velocity += (-180 * (scale - SCALE[current]) - DAMPING * velocity) * dt;
+					scale += velocity * dt;
+					draw(t, amplitude, scale);
+					raf = requestAnimationFrame(frame);
+				};
+				raf = requestAnimationFrame(frame);
+				return () => cancelAnimationFrame(raf);
+			}, [color, dpr]);
+			(0, react.useEffect)(() => {
+				redrawRef.current?.();
+			}, [state]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+				ref: canvasRef,
+				"aria-hidden": true,
+				className: "dsgc-orb",
+				style: {
+					width: SIZE,
+					height: SIZE
+				}
+			});
+		}
+		//#endregion
 		//#region src/client/components/MessageFlow.tsx
 		function MessageFlow(props) {
 			const { snap, sess, busyNow, msgById, action, onRetrySpeak } = props;
@@ -2133,15 +2295,20 @@ window.__ModuleLoader__.load({
 			const replaceMsg = replaceId ? msgById[replaceId] : null;
 			const liveRoleId = snap.run.currentRoleId || replaceMsg && (replaceMsg.failedRoleId || replaceMsg.speaker) || null;
 			const lr = busyNow && liveRoleId ? roleById(snap, liveRoleId) : null;
+			const liveColor = lr ? lr.color || "#888" : "#888";
+			const orbState = snap.run.partial ? "listening" : "thinking";
 			const live = lr ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsgc-msg live",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dsgc-avatar",
 					style: {
-						border: "2px solid " + (lr.color || "#888"),
-						"--role-color": lr.color || "#888"
+						border: "2px solid " + liveColor,
+						"--role-color": liveColor
 					},
-					children: lr.name.slice(0, 1)
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeakerOrb, {
+						state: orbState,
+						color: liveColor
+					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dsgc-msgbody",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {