@botharness/ui 1.2.0 → 1.2.1

package/lib/client.js

@@ -11164,6 +11164,10 @@ window.__ModuleLoader__.load({
 			"message.code.copy": "复制代码",
 			"message.code.copied": "已复制",
 			"message.footnotes": "脚注",
+			"message.audio.play": "播放音频",
+			"message.audio.pause": "暂停音频",
+			"message.audio.player": "音频播放器",
+			"message.audio.seek": "拖动以快进或后退",
 			"message.locate": "定位这条消息",
 			"message.reply": "回复",
 			"message.replyingTo": "回复 {author}",
@@ -13446,6 +13450,10 @@ My relationship with you, established lore and topics to avoid: [fill in].
 			"message.code.copy": "Copy code",
 			"message.code.copied": "Copied",
 			"message.footnotes": "Footnotes",
+			"message.audio.play": "Play audio",
+			"message.audio.pause": "Pause audio",
+			"message.audio.player": "Audio player",
+			"message.audio.seek": "Seek",
 			"message.locate": "Locate message",
 			"message.reply": "Reply",
 			"message.replyingTo": "Replying to {author}",
@@ -17272,6 +17280,49 @@ My relationship with you, established lore and topics to avoid: [fill in].
 			});
 		}
 		//#endregion
+		//#region packages/client/src/client/group-avatar-stack.tsx
+		const MAX_STACKED_FACES = 4;
+		const FACE_SCALE = [
+			.64,
+			.6,
+			.43
+		];
+		function groupAvatarStackBots(members, bots) {
+			const faces = [];
+			for (const slug of members) {
+				const bot = bots.get(slug);
+				if (bot !== void 0) faces.push(bot);
+				if (faces.length === MAX_STACKED_FACES) break;
+			}
+			return faces;
+		}
+		function GroupChannelIcon({ channel, bots, className, groupClassName, size, hashSize, t }) {
+			const faces = channel.avatar ? [] : groupAvatarStackBots(channel.members, bots);
+			const tile = channel.avatar !== void 0 || faces.length > 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: tile ? `${className} ${groupClassName}` : className,
+				"aria-hidden": "true",
+				children: channel.avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					className: "bh-group-avatar-image",
+					src: channel.avatar,
+					alt: ""
+				}) : faces.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashIcon, { size: hashSize }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "bh-group-avatar-stack",
+					"data-count": faces.length,
+					children: faces.map((bot) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PersonaBotAvatar, {
+						t,
+						personaBotId: bot.slug,
+						name: bot.displayName,
+						src: bot.avatar,
+						appearance: bot.appearance,
+						size: Math.round(size * FACE_SCALE[Math.min(faces.length, 3) - 1]),
+						indicator: false,
+						still: true
+					}, bot.slug))
+				})
+			});
+		}
+		//#endregion
 		//#region packages/client/src/client/inbox-icon.tsx
 		function InboxIcon({ size = 18 }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -20448,7 +20499,7 @@ My relationship with you, established lore and topics to avoid: [fill in].
 				})
 			});
 		}
-		function ChannelRow({ channel, preview, selected, multiSelected, onActivate, shortcut, showShortcutHints, drag, onMenu, onPinDragStart, onPinDragEnd, t }) {
+		function ChannelRow({ channel, bots, preview, selected, multiSelected, onActivate, shortcut, showShortcutHints, drag, onMenu, onPinDragStart, onPinDragEnd, t }) {
 			const marker = drag?.marker ?? null;
 			const markerClass = marker === "before" ? " bh-drop-before" : marker === "after" ? " bh-drop-after" : "";
 			const sourceClass = drag?.source === true ? " bh-drag-source" : "";
@@ -20502,14 +20553,14 @@ My relationship with you, established lore and topics to avoid: [fill in].
 					});
 				},
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `bh-channel-slot${channel.avatar ? " bh-group-channel-slot" : ""}`,
-						"aria-hidden": "true",
-						children: channel.avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							className: "bh-group-avatar-image",
-							src: channel.avatar,
-							alt: ""
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashIcon, { size: 18 })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupChannelIcon, {
+						channel,
+						bots,
+						className: "bh-channel-slot",
+						groupClassName: "bh-group-channel-slot",
+						size: 34,
+						hashSize: 18,
+						t
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "bh-body",
@@ -20532,7 +20583,7 @@ My relationship with you, established lore and topics to avoid: [fill in].
 				]
 			});
 		}
-		function RailChannel({ channel, bot, activity, selected, shortcut, showShortcutHints, summary, actions, t }) {
+		function RailChannel({ channel, bots, bot, activity, selected, shortcut, showShortcutHints, summary, actions, t }) {
 			const title = bot?.displayName ?? channel.name;
 			const open = () => {
 				bot === void 0 ? actions.openChannel(channel.id) : actions.openBot(bot.slug);
@@ -20550,14 +20601,14 @@ My relationship with you, established lore and topics to avoid: [fill in].
 					"aria-current": selected ? "page" : void 0,
 					"aria-keyshortcuts": shortcut,
 					onClick: open,
-					children: [bot === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `bh-rail-channel-icon${channel.avatar ? " bh-group-channel-icon" : ""}`,
-						"aria-hidden": "true",
-						children: channel.avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							className: "bh-group-avatar-image",
-							src: channel.avatar,
-							alt: ""
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashIcon, { size: 18 })
+					children: [bot === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupChannelIcon, {
+						channel,
+						bots,
+						className: "bh-rail-channel-icon",
+						groupClassName: "bh-group-channel-icon",
+						size: 32,
+						hashSize: 18,
+						t
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PersonaBotAvatar, {
 						t,
 						personaBotId: bot.slug,
@@ -20579,14 +20630,14 @@ My relationship with you, established lore and topics to avoid: [fill in].
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "bh-rail-preview-head",
-							children: [bot === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `bh-rail-preview-icon${channel.avatar ? " bh-group-channel-icon" : ""}`,
-								"aria-hidden": "true",
-								children: channel.avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-									className: "bh-group-avatar-image",
-									src: channel.avatar,
-									alt: ""
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashIcon, { size: 16 })
+							children: [bot === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupChannelIcon, {
+								channel,
+								bots,
+								className: "bh-rail-preview-icon",
+								groupClassName: "bh-group-channel-icon",
+								size: 24,
+								hashSize: 16,
+								t
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PersonaBotAvatar, {
 								t,
 								personaBotId: bot.slug,
@@ -21159,6 +21210,7 @@ My relationship with you, established lore and topics to avoid: [fill in].
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelRow, {
 					t,
 					channel,
+					bots: botBySlug,
 					preview,
 					selected: selectedChannel === channel.id,
 					multiSelected: selectedChannelSet.has(channel.id),
@@ -21176,6 +21228,7 @@ My relationship with you, established lore and topics to avoid: [fill in].
 					const bot = channel.botSlug === void 0 ? void 0 : botBySlug.get(channel.botSlug);
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RailChannel, {
 						channel,
+						bots: botBySlug,
 						bot,
 						activity: bot === void 0 ? void 0 : personaBotActivity(state, bot),
 						selected: selectedChannel === channel.id || bot !== void 0 && selectedBot === bot.slug,
@@ -21548,14 +21601,14 @@ My relationship with you, established lore and topics to avoid: [fill in].
 											});
 										},
 										children: [
-											bot === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: `bh-pinned-channel-icon${channel.avatar ? " bh-group-pinned-channel-icon" : ""}`,
-												"aria-hidden": "true",
-												children: channel.avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-													className: "bh-group-avatar-image",
-													src: channel.avatar,
-													alt: ""
-												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HashIcon, { size: 24 })
+											bot === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupChannelIcon, {
+												channel,
+												bots: botBySlug,
+												className: "bh-pinned-channel-icon",
+												groupClassName: "bh-group-pinned-channel-icon",
+												size: 54,
+												hashSize: 24,
+												t
 											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PersonaBotAvatar, {
 												t,
 												personaBotId: bot.slug,
@@ -29571,6 +29624,47 @@ My relationship with you, established lore and topics to avoid: [fill in].
 			}
 		};
 		//#endregion
+		//#region packages/client/src/client/group-channel-header.tsx
+		function GroupChannelHeader({ channel, title, bots, expanded, t, onOpenActivity, onToggleProfile }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "bh-channel-island bh-group-channel-header",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+					label: t("groupProfile.liveActivity"),
+					side: "bottom",
+					portal: true,
+					delayMs: 350,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "bh-group-channel-avatar",
+						"aria-label": t("groupProfile.liveActivity"),
+						"aria-haspopup": "dialog",
+						"aria-expanded": expanded,
+						onClick: onOpenActivity,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupChannelIcon, {
+							channel,
+							bots,
+							className: "bh-channel-slot",
+							groupClassName: "bh-group-channel-slot",
+							size: 34,
+							hashSize: 18,
+							t
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "bh-group-channel-name",
+					"aria-haspopup": "dialog",
+					"aria-expanded": expanded,
+					"aria-label": t("groupProfile.openAvatar", { name: channel.name }),
+					onClick: onToggleProfile,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "bh-title",
+						children: title
+					})
+				})]
+			});
+		}
+		//#endregion
 		//#region packages/client/src/client/companion-motion.ts
 		var CompanionMotion = class {
 			point = {
@@ -30403,68 +30497,6 @@ My relationship with you, established lore and topics to avoid: [fill in].
 			}, `${state.capacity.layers}:${state.capacity.retention}`);
 		}
 		//#endregion
-		//#region packages/client/src/client/group-channel-header.tsx
-		function GroupChannelHeader({ channel, title, members, expanded, t, onOpenActivity, onToggleProfile, companion }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "bh-channel-island bh-group-channel-header",
-				children: [
-					channel.avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-						className: "bh-group-avatar-image bh-group-avatar-topbar",
-						src: channel.avatar,
-						alt: ""
-					}) : members.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "bh-channel-mark bh-channel-mark-sm",
-						"aria-hidden": "true",
-						children: "#"
-					}) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PersonaBotFacepile, {
-						items: members,
-						indicator: false,
-						size: 22,
-						t,
-						renderAvatar: (item, avatar) => {
-							const label = item.name + " · " + personaBotPresentationSummary(item.state ?? "idle", item.activity, item.attention, t);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "bh-companion-chip",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
-									label,
-									side: "bottom",
-									portal: true,
-									delayMs: 350,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "bh-avatar-facepile-button",
-										"aria-label": label,
-										"aria-haspopup": "dialog",
-										"aria-expanded": expanded,
-										onClick: onOpenActivity,
-										children: avatar
-									})
-								}), companion ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompanionPin, {
-									companion,
-									botId: item.personaBotId,
-									name: item.name,
-									t
-								}) : null]
-							}, item.personaBotId);
-						}
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "bh-group-channel-name",
-						"aria-haspopup": "dialog",
-						"aria-expanded": expanded,
-						"aria-label": t("groupProfile.openAvatar", { name: channel.name }),
-						onClick: onToggleProfile,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "bh-title",
-							children: title
-						})
-					})
-				]
-			});
-		}
-		//#endregion
 		//#region packages/client/src/client/group-activity-rows.tsx
 		function GroupActivityRows({ items, t }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: items.map((item) => {
@@ -32004,6 +32036,183 @@ My relationship with you, established lore and topics to avoid: [fill in].
 			}) });
 		}
 		//#endregion
+		//#region packages/client/src/client/message-audio.tsx
+		const PLAY_EVENT = "bh-message-audio-play";
+		const SPECTRUM_BARS = 48;
+		function formatAudioTime(seconds) {
+			if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+			const total = Math.floor(seconds);
+			return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+		}
+		function spectrumBars(name, size) {
+			let seed = 2166136261;
+			const key = `${name}:${size}`;
+			for (let index = 0; index < key.length; index += 1) {
+				seed ^= key.charCodeAt(index);
+				seed = Math.imul(seed, 16777619);
+			}
+			const bars = [];
+			let state = seed >>> 0;
+			for (let index = 0; index < SPECTRUM_BARS; index += 1) {
+				state = Math.imul(state, 1664525) + 1013904223 >>> 0;
+				bars.push(.2 + state % 100 / 100 * .8);
+			}
+			return bars;
+		}
+		function MessageAudio({ name, size, url, t }) {
+			const instanceId = (0, react.useId)();
+			const audioRef = (0, react.useRef)(null);
+			const spectrumRef = (0, react.useRef)(null);
+			const [playing, setPlaying] = (0, react.useState)(false);
+			const [current, setCurrent] = (0, react.useState)(0);
+			const [duration, setDuration] = (0, react.useState)();
+			const bars = (0, react.useMemo)(() => spectrumBars(name, size), [name, size]);
+			const pauseMount = useMountedResource((node) => {
+				const pauseOthers = (event) => {
+					if (node.isConnected && event.detail !== instanceId) audioRef.current?.pause();
+				};
+				window.addEventListener(PLAY_EVENT, pauseOthers);
+				return () => window.removeEventListener(PLAY_EVENT, pauseOthers);
+			}, [instanceId]);
+			const toggle = () => {
+				const audio = audioRef.current;
+				if (audio === null || url === void 0) return;
+				if (audio.paused) {
+					window.dispatchEvent(new CustomEvent(PLAY_EVENT, { detail: instanceId }));
+					audio.play().catch(() => setPlaying(false));
+				} else audio.pause();
+			};
+			const seek = (value) => {
+				const audio = audioRef.current;
+				if (audio === null || !Number.isFinite(value)) return;
+				audio.currentTime = value;
+				setCurrent(value);
+			};
+			const ready = url !== void 0 && duration !== void 0 && duration > 0;
+			const seekFromClientX = (clientX) => {
+				const strip = spectrumRef.current;
+				if (strip === null || !ready) return;
+				const rect = strip.getBoundingClientRect();
+				if (rect.width <= 0) return;
+				const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+				seek(ratio * (duration ?? 0));
+			};
+			const stepSeek = (delta) => {
+				if (!ready) return;
+				seek(Math.min(duration ?? 0, Math.max(0, current + delta)));
+			};
+			const progress = ready ? current / (duration ?? 1) : 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bh-message-audio",
+				ref: pauseMount,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "bh-message-audio-play",
+						"aria-label": `${playing ? t("message.audio.pause") : t("message.audio.play")}: ${name}`,
+						"aria-pressed": playing,
+						disabled: url === void 0,
+						onClick: toggle,
+						children: playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPauseOutlineRegular, { size: 16 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconPlayOutlineRegular, { size: 16 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "bh-message-file-copy",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "bh-message-file-name",
+								title: name,
+								children: name
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "bh-message-audio-meta",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+										formatAudioTime(current),
+										" /",
+										" ",
+										duration === void 0 ? "--:--" : formatAudioTime(duration)
+									] }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": "true",
+										children: "·"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: (0, _deepseek_ai_dsh_client_ui_primitives.fileSizeText)(size) })
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								ref: spectrumRef,
+								className: "bh-message-audio-spectrum",
+								role: "slider",
+								tabIndex: ready ? 0 : -1,
+								"aria-label": `${t("message.audio.seek")}: ${name}`,
+								"aria-valuemin": 0,
+								"aria-valuemax": Math.round(duration ?? 0),
+								"aria-valuenow": Math.round(current),
+								"aria-valuetext": `${formatAudioTime(current)} / ${duration === void 0 ? "--:--" : formatAudioTime(duration)}`,
+								"aria-disabled": !ready,
+								onPointerDown: (event) => {
+									if (!ready) return;
+									event.currentTarget.setPointerCapture(event.pointerId);
+									seekFromClientX(event.clientX);
+								},
+								onPointerMove: (event) => {
+									if (event.buttons === 1) seekFromClientX(event.clientX);
+								},
+								onKeyDown: (event) => {
+									if (event.key === "ArrowLeft") {
+										event.preventDefault();
+										stepSeek(-5);
+									} else if (event.key === "ArrowRight") {
+										event.preventDefault();
+										stepSeek(5);
+									} else if (event.key === "Home") {
+										event.preventDefault();
+										seek(0);
+									} else if (event.key === "End") {
+										event.preventDefault();
+										if (duration !== void 0) seek(duration);
+									}
+								},
+								children: bars.map((height, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "bh-message-audio-bar",
+									...index / bars.length <= progress ? { "data-played": true } : {},
+									style: { height: `${Math.round(height * 100)}%` }
+								}, index))
+							})
+						]
+					}),
+					url === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "bh-message-file-divider",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+						label: t("fileAction.download"),
+						side: "bottom",
+						delayMs: 500,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "bh-message-file-download",
+							href: url,
+							download: name,
+							"aria-label": `${t("fileAction.download")}: ${name}`,
+							onClick: (event) => event.stopPropagation(),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutlineRegular, { size: 16 })
+						})
+					})] }),
+					url === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+						ref: audioRef,
+						className: "bh-message-audio-element",
+						src: url,
+						preload: "metadata",
+						"aria-label": `${t("message.audio.player")}: ${name}`,
+						onLoadedMetadata: (event) => setDuration(event.currentTarget.duration),
+						onTimeUpdate: (event) => setCurrent(event.currentTarget.currentTime),
+						onPlay: () => setPlaying(true),
+						onPause: () => setPlaying(false),
+						onEnded: () => setPlaying(false)
+					})
+				]
+			});
+		}
+		//#endregion
 		//#region packages/client/src/client/message-attachment.tsx
 		function MessageAttachment({ attachment: ref, channelId, messageId, actions, t }) {
 			const commands = (0, react.useMemo)(() => actions === void 0 ? void 0 : {
@@ -32024,6 +32233,21 @@ My relationship with you, established lore and topics to avoid: [fill in].
 				"image/gif",
 				"image/webp"
 			].includes(ref.mime);
+			if (ref.mime.startsWith("audio/")) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bh-message-attachment",
+				onContextMenu: id === void 0 ? void 0 : (event) => menu.open(id, event),
+				onKeyDown: id === void 0 ? void 0 : (event) => menu.onKey(id, event),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageAudio, {
+						name: ref.name,
+						size: ref.size,
+						url,
+						t
+					}),
+					menu.menu,
+					menu.feedback
+				]
+			});
 			const contents = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "bh-message-file-icon",
 				"aria-hidden": "true",
@@ -32037,59 +32261,77 @@ My relationship with you, established lore and topics to avoid: [fill in].
 					className: "bh-message-file-name",
 					title: ref.name,
 					children: ref.name
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "bh-message-file-size",
-					children: [
-						"· ",
-						Math.max(1, Math.round(ref.size / 1024)),
-						" KB"
-					]
+					children: (0, _deepseek_ai_dsh_client_ui_primitives.fileSizeText)(ref.size)
 				})]
 			})] });
+			const downloadAction = url === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "bh-message-file-divider",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+				label: t("fileAction.download"),
+				side: "bottom",
+				delayMs: 500,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					className: "bh-message-file-download",
+					href: url,
+					download: ref.name,
+					"aria-label": `${t("fileAction.download")}: ${ref.name}`,
+					onClick: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutlineRegular, { size: 16 })
+				})
+			})] });
+			const hostMenuButton = id === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+				label: t("fileAction.menu"),
+				side: "bottom",
+				delayMs: 500,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "bh-memory-view-icon-button bh-message-file-more",
+					"aria-label": t("fileAction.menu") + ": " + ref.name,
+					"aria-haspopup": "menu",
+					"aria-expanded": menu.isOpen,
+					disabled: channelId === void 0 || commands === void 0,
+					onClick: (event) => menu.open(id, event),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconEllipsisOutlineRegular, { size: 16 })
+				})
+			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "bh-message-attachment",
 				onContextMenu: id === void 0 ? void 0 : (event) => menu.open(id, event),
 				onKeyDown: id === void 0 ? void 0 : (event) => menu.onKey(id, event),
 				children: [
-					image ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						className: "bh-message-image-link",
-						href: url,
-						target: "_blank",
-						rel: "noopener noreferrer",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							className: "bh-message-image",
-							src: url,
-							alt: ref.name,
-							loading: "lazy"
-						})
-					}) : id === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						className: "bh-message-file",
-						href: url,
-						download: ref.name,
-						children: contents
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
+					image ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "bh-message-image-row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "bh-message-image-link",
+							href: url,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								className: "bh-message-image",
+								src: url,
+								alt: ref.name,
+								loading: "lazy"
+							})
+						}), hostMenuButton]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "bh-message-file",
-						"aria-haspopup": "menu",
-						"aria-expanded": menu.isOpen,
-						disabled: channelId === void 0 || commands === void 0,
-						onClick: (event) => menu.open(id, event),
-						children: contents
-					}),
-					id === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
-						label: t("fileAction.menu"),
-						side: "bottom",
-						delayMs: 500,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						children: [id === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "bh-message-file-main",
+							href: url,
+							download: ref.name,
+							children: contents
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
-							className: "bh-memory-view-icon-button bh-message-file-more",
-							"aria-label": t("fileAction.menu") + ": " + ref.name,
+							className: "bh-message-file-main",
 							"aria-haspopup": "menu",
 							"aria-expanded": menu.isOpen,
 							disabled: channelId === void 0 || commands === void 0,
 							onClick: (event) => menu.open(id, event),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconEllipsisOutlineRegular, { size: 16 })
-						})
+							children: contents
+						}), downloadAction]
 					}),
 					menu.menu,
 					menu.feedback
@@ -48061,8 +48303,7 @@ My relationship with you, established lore and topics to avoid: [fill in].
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupChannelHeader, {
 											channel,
 											title,
-											members: channelFacepile,
-											companion,
+											bots: new Map(state.bots.map((member) => [member.slug, member])),
 											expanded: profilePopoverOpen,
 											t,
 											onOpenActivity: () => setProfilePopoverOpen(true),
@@ -56646,6 +56887,8 @@ html[data-botharness-motion='full'] .bh-skeleton-line {
 }
 .bh-group-channel-name { display: inline-flex; align-items: center; flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 4px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
 .bh-group-channel-name:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 2px; }
+.bh-group-channel-avatar { display: inline-flex; flex-shrink: 0; padding: 0; border: 0; border-radius: 7px; color: inherit; background: transparent; cursor: pointer; }
+.bh-group-channel-avatar:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 2px; }
 .bh-group-live-activity { container-type: inline-size; min-width: 0; }
 .bh-group-live-activity-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
 .bh-group-activity-chip { display: inline-flex; min-width: 0; max-width: 100%; border-radius: 999px; }
@@ -57791,6 +58034,9 @@ button.bh-profile-heat-cell:focus-visible {
 .bh-message-group-me .bh-bubble-author {
   margin: 0 2px 0 0;
 }
+.bh-message-group-me .bh-message-identity {
+  flex-direction: row-reverse;
+}
 .bh-bubble-wrap {
   position: relative;
   display: flex;
@@ -57927,25 +58173,38 @@ button.bh-profile-heat-cell:focus-visible {
 
 /* Files stay part of the same message grouping as their text. */
 .bh-bubble-content { min-width: 0; }
-.bh-message-attachment { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
+.bh-message-attachment { position: relative; min-width: 0; }
 .bh-message-file-more { flex: none; color: inherit; }
-button.bh-message-file { font: inherit; text-align: left; cursor: pointer; }
-.bh-message-file:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
-.bh-message-attachments { display: grid; gap: 6px; margin-top: 6px; }
+.bh-message-attachments { display: grid; gap: 8px; margin-top: 8px; }
 .bh-bridge-media-content { white-space: pre-wrap; }
-.bh-bridge-image { max-width: min(100%, 360px); }
+.bh-bridge-image { max-width: min(100%, 320px); }
 .bh-bridge-image-button { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: 12px; }
 .bh-bridge-image-button:focus-visible { outline: 2px solid var(--bh-bridge-media-focus); outline-offset: 2px; }
 .bh-bridge-image-state { display: flex; align-items: center; gap: 8px; min-height: 96px; color: var(--bh-bridge-media-muted); }
 .bh-bridge-image-expanded { display: block; max-width: 100%; max-height: 75vh; margin: auto; object-fit: contain; }
-.bh-message-image-link { display: block; max-width: min(100%, 360px); }
+.bh-message-image-link { display: block; width: fit-content; max-width: 320px; min-width: 0; }
+.bh-message-image-row { display: flex; align-items: flex-start; gap: 4px; width: fit-content; max-width: 100%; min-width: 0; }
 .bh-message-image { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; object-fit: contain; }
-.bh-message-file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; width: fit-content; max-width: min(100%, 320px); min-height: 42px; padding: 5px 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; text-decoration: none; }
-.bh-bubble-me .bh-message-file { border-color: color-mix(in srgb, currentColor 35%, transparent); }
+.bh-message-file, .bh-message-audio { display: flex; align-items: center; gap: 10px; min-width: 0; width: fit-content; max-width: min(100%, 320px); min-height: 52px; padding: 8px 8px 8px 12px; border: 0; border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; }
+.bh-message-file-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; }
+button.bh-message-file-main { cursor: pointer; }
+.bh-message-file-main:focus-visible, .bh-message-file-download:focus-visible, .bh-message-audio-play:focus-visible, .bh-message-audio-spectrum:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
 .bh-message-file-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; }
-.bh-message-file-copy { display: flex; align-items: baseline; flex: 1; gap: 4px; min-width: 0; }
-.bh-message-file-name { display: block; overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
-.bh-message-file-size { flex: none; color: color-mix(in srgb, currentColor 72%, transparent); font-size: 11px; white-space: nowrap; }
+.bh-message-file-copy { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }
+.bh-message-file-name { display: block; overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; line-height: 18px; }
+.bh-message-file-size { color: color-mix(in srgb, currentColor 72%, transparent); font-size: 11px; line-height: 14px; white-space: nowrap; }
+.bh-message-file-divider { flex: none; align-self: stretch; width: 1px; margin-block: 2px; background: var(--dsw-alias-border-l2); }
+.bh-message-file-download { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: inherit; text-decoration: none; }
+a.bh-message-file-download:hover, button.bh-message-file-download:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+.bh-message-audio-play { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--dsw-alias-border-l2); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
+.bh-message-audio-play:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
+.bh-message-audio-play:disabled { opacity: 0.5; cursor: default; }
+.bh-message-audio-meta { display: flex; align-items: center; gap: 4px; color: color-mix(in srgb, currentColor 72%, transparent); font-size: 11px; line-height: 14px; white-space: nowrap; }
+.bh-message-audio-spectrum { display: flex; align-items: center; gap: 2px; width: 100%; min-width: 0; height: 28px; margin-top: 4px; padding: 0; border-radius: 4px; cursor: pointer; touch-action: none; }
+.bh-message-audio-spectrum[aria-disabled='true'] { cursor: default; }
+.bh-message-audio-bar { flex: 1 1 0; min-width: 2px; max-width: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 28%, transparent); }
+.bh-message-audio-bar[data-played] { background: var(--dsw-alias-state-business-primary); }
+.bh-message-audio-element { display: none; }
 .bh-bubble-body {
   white-space: pre-wrap;
   word-break: break-word;
@@ -59580,7 +59839,31 @@ html[data-botharness-motion='reduce'] .bh-session-workspace-heading svg {
   border-radius: inherit;
   object-fit: cover;
 }
-.bh-group-avatar-topbar { width: 22px; height: 22px; border-radius: 7px; }
+.bh-group-avatar-stack {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--dsw-alias-button-elevated-fill);
+}
+.bh-group-avatar-stack > .bh-persona-avatar {
+  position: absolute;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 28%;
+  pointer-events: none;
+}
+.bh-group-avatar-stack[data-count='1'] > .bh-persona-avatar { top: 50%; left: 50%; translate: -50% -50%; }
+.bh-group-avatar-stack[data-count='2'] > .bh-persona-avatar { border: 1.5px solid var(--dsw-alias-button-elevated-fill); }
+.bh-group-avatar-stack[data-count='2'] > :nth-child(1) { top: 8%; left: 8%; }
+.bh-group-avatar-stack[data-count='2'] > :nth-child(2) { right: 8%; bottom: 8%; }
+.bh-group-avatar-stack[data-count='3'] > :nth-child(1),
+.bh-group-avatar-stack[data-count='4'] > :nth-child(1) { top: 5%; left: 5%; }
+.bh-group-avatar-stack[data-count='3'] > :nth-child(2),
+.bh-group-avatar-stack[data-count='4'] > :nth-child(2) { top: 5%; right: 5%; }
+.bh-group-avatar-stack[data-count='3'] > :nth-child(3) { bottom: 5%; left: 50%; translate: -50% 0; }
+.bh-group-avatar-stack[data-count='4'] > :nth-child(3) { bottom: 5%; left: 5%; }
+.bh-group-avatar-stack[data-count='4'] > :nth-child(4) { right: 5%; bottom: 5%; }
 .bh-group-profile-avatar {
   display: inline-flex;
   align-items: center;