@rexvane/piweb 0.3.21 → 0.3.23

package/src/components/composer/ComposerImages.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+/**
+ * 输入卡里待发送的图片。
+ * - 不超过 COLLAPSE_AT 张：平铺缩略图（不裁切），右上角删除。
+ * - 更多时折叠成牌堆：正面那张在最上，后面最多露 4 层 4px 的右边缘；点「展开 N」沿一条向上拱的弧线扇开。
+ *   两种状态是同一批卡片换 transform，所以有从牌堆扇开 / 收拢的动画；扇形按容器实测宽度铺开。
+ *   层级始终是左压右（和牌堆同一个顺序，展开时不会闪一下换层），每张露出来的是右侧那条，
+ *   删除按钮就在那条的右上角——不用悬停也点得到，触屏同样能删；张数多、条带窄到按钮会挤成一排时，
+ *   只在悬停 / 聚焦的那张上显示（触屏点开预览里删）。悬停 / 聚焦的那张抬起来、整张露出。
+ *   牌堆里后面几张只露空白的卡边（不露图），看起来是一叠；扇开时图再淡入。
+ * - 点任意一张进预览：大图、← → 切换、删除当前张（删完自动看下一张）；Esc / 点背景 / 关闭按钮退出，焦点回到原处。
+ *   预览挂到 body 上（祖先的 backdrop-filter 会让 fixed 只盖住输入卡），按键在捕获阶段拦下，不会再关掉页面上的其它面板。
+ */
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useI18n } from "@/i18n";
+import type { ImageAttachment } from "@/lib/types";
+
+/** 超过这个数量就折叠（引用 chip 用同一个阈值） */
+export const COLLAPSE_AT = 4;
+/** 牌堆 / 扇形里卡片的边长 */
+const CARD = 96;
+/** 牌堆里后面每层露出的右边缘、最多露几层（再多的叠在最后一层下面、不显示） */
+const DECK_PEEK = 4;
+const DECK_LAYERS = 4;
+/** 扇形所在圆弧的半径（越大弧越平）、相邻两张中心的最大间距（再大就散成一排，不像一手牌了） */
+const FAN_RADIUS = 520;
+const FAN_GAP_MAX = 76;
+/** 悬停 / 聚焦时那张往上抬多少；左右给旋转后探出去的角留的余量 */
+const FAN_LIFT = 12;
+const FAN_SIDE = 8;
+/** 量不到宽度时（首帧、测试环境）按这个宽度排扇形 */
+const FALLBACK_WIDTH = 360;
+
+export interface CardPose {
+	x: number;
+	y: number;
+	angle: number;
+	/** 牌堆里压在最后一层下面、看不见的 */
+	hidden?: boolean;
+}
+
+interface Layout {
+	cards: CardPose[];
+	width: number;
+	height: number;
+	/** 相邻两张露出来的宽度；太窄时删除按钮会挤成一排，只在悬停 / 聚焦那张上显示 */
+	gap: number;
+}
+
+/** 露出的条带至少这么宽，每张的删除按钮才常驻（按钮 22px + 一点间隔） */
+const ROOMY_GAP = 30;
+
+const round = (value: number) => Math.round(value * 10) / 10;
+
+/** 牌堆：只做横向错位，最多露 DECK_LAYERS 层 */
+export function deckLayout(count: number): Layout {
+	const cards = Array.from({ length: count }, (_, i) => ({ x: Math.min(i, DECK_LAYERS) * DECK_PEEK, y: 0, angle: 0, hidden: i > DECK_LAYERS }));
+	return { cards, width: CARD + Math.min(Math.max(count - 1, 0), DECK_LAYERS) * DECK_PEEK, height: CARD, gap: DECK_PEEK };
+}
+
+/**
+ * 扇形：卡片中心落在一段圆弧上（中间最高、两侧顺着弧下垂），每张转到切线方向；
+ * 间距按可用宽度均分、不超过 FAN_GAP_MAX，从左边开始铺（离牌堆原来的位置最近）。
+ */
+export function fanLayout(count: number, width: number): Layout {
+	const gap = count > 1 ? Math.min(FAN_GAP_MAX, Math.max(8, (width - CARD - FAN_SIDE * 2) / (count - 1))) : 0;
+	const step = gap / FAN_RADIUS;
+	const mid = (count - 1) / 2;
+	const edge = -mid * step;
+	// 正方形转过 θ 后比原来高出（也宽出）的那一截，最外侧两张最大
+	const corner = (CARD / 2) * (Math.abs(Math.sin(edge)) + Math.cos(edge) - 1);
+	const top = FAN_LIFT + corner;
+	const cards = Array.from({ length: count }, (_, i) => {
+		const theta = (i - mid) * step;
+		return {
+			x: round(FAN_SIDE + FAN_RADIUS * (Math.sin(theta) - Math.sin(edge))),
+			y: round(top + FAN_RADIUS * (1 - Math.cos(theta))),
+			angle: round((theta * 180) / Math.PI),
+		};
+	});
+	const span = cards.length ? cards[cards.length - 1].x + CARD + FAN_SIDE : 0;
+	return { cards, width: Math.ceil(span), height: Math.ceil(top + FAN_RADIUS * (1 - Math.cos(edge)) + CARD + corner), gap: round(gap) };
+}
+
+/** 每张图一个稳定的 key：前几位 base64 对同格式的图几乎都一样（PNG 都是 iVBORw0KGgo…），不能拿来当 key */
+const imageKeys = new WeakMap<ImageAttachment, string>();
+let nextImageKey = 0;
+function keyOf(image: ImageAttachment): string {
+	let key = imageKeys.get(image);
+	if (!key) {
+		nextImageKey += 1;
+		key = `image-${nextImageKey}`;
+		imageKeys.set(image, key);
+	}
+	return key;
+}
+
+const srcOf = (image: ImageAttachment) => `data:${image.mimeType};base64,${image.data}`;
+
+export function ComposerImages({ images, disabled, onRemove, onClear }: { images: ImageAttachment[]; disabled?: boolean; onRemove: (index: number) => void; onClear?: () => void }) {
+	const { t } = useI18n();
+	const collapsible = images.length > COLLAPSE_AT;
+	const [expanded, setExpanded] = useState(false);
+	const fanned = collapsible && expanded;
+	/** 扇形里悬停 / 聚焦的那张：抬起来、放到最上层 */
+	const [lifted, setLifted] = useState<number | null>(null);
+	const [preview, setPreview] = useState<number | null>(null);
+	const railRef = useRef<HTMLDivElement>(null);
+	const [railWidth, setRailWidth] = useState(0);
+
+	useEffect(() => {
+		const rail = railRef.current;
+		if (!rail || !collapsible) return;
+		// 量的是整条附件轨的内容宽度（去掉左右 4px 内边距）：扇形展开后占满这一行
+		const measure = () => setRailWidth(Math.max(0, rail.clientWidth - 8));
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(rail);
+		return () => observer.disconnect();
+	}, [collapsible]);
+
+	const remove = (index: number) => {
+		onRemove(index);
+		setLifted(null);
+		// 预览里删的：还有图就接着看下一张（删的是最后一张就看前一张）
+		setPreview((current) => (current === null ? null : images.length <= 1 ? null : Math.min(current, images.length - 2)));
+	};
+
+	const deleteButton = (index: number) => (
+		<button type="button" className="pw-image-delete" disabled={disabled} aria-label={`${t.delete} ${index + 1}`} onClick={() => remove(index)}>
+			✕
+		</button>
+	);
+
+	const layout = fanned ? fanLayout(images.length, railWidth || FALLBACK_WIDTH) : deckLayout(images.length);
+	const shown = preview !== null && images[preview] ? preview : null;
+
+	return (
+		<>
+			<div ref={railRef} className="pointer-events-auto flex flex-wrap items-center gap-2 px-1" data-testid="composer-images">
+				{collapsible ? (
+					<div
+						className="pw-image-fan"
+						data-testid="image-fan"
+						data-expanded={fanned}
+						data-crowded={fanned && layout.gap < ROOMY_GAP ? true : undefined}
+						// 容器（composer-attachments）已经浮在输入卡上方、不占布局高度，这里不用再抬
+						style={{
+							position: "relative",
+							width: fanned ? "100%" : layout.width,
+							height: layout.height,
+						}}
+					>
+						{images.map((image, i) => {
+							const pose = layout.cards[i];
+							const up = fanned && lifted === i;
+							// 牌堆里只有正面那张能点、能删；后面那几张只是露个边，不进 Tab 顺序
+							const reachable = fanned || i === 0;
+							// 展开从左往右依次扇出，收起反过来；错开的总时长封顶，张数多也不拖沓
+							const delay = Math.min(fanned ? i * 14 : (images.length - 1 - i) * 10, 140);
+							return (
+								<div
+									key={keyOf(image)}
+									className="pw-image-card"
+									data-hidden={pose.hidden || undefined}
+									data-lifted={up || undefined}
+									style={{
+										zIndex: up ? images.length + 1 : images.length - i,
+										transform: `translate(${pose.x}px, ${pose.y - (up ? FAN_LIFT : 0)}px) rotate(${pose.angle}deg)`,
+										transitionDelay: up || lifted !== null ? "0ms" : `${delay}ms`,
+									}}
+									onMouseEnter={() => fanned && setLifted(i)}
+									onMouseLeave={() => setLifted((current) => (current === i ? null : current))}
+									onFocus={() => fanned && setLifted(i)}
+									onBlur={(event) => {
+										// 焦点从图片挪到同一张的删除按钮不算离开
+										if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setLifted((current) => (current === i ? null : current));
+									}}
+								>
+									<button
+										type="button"
+										className="pw-image-face"
+										tabIndex={reachable ? undefined : -1}
+										aria-hidden={reachable ? undefined : true}
+										title={t.imagePreview}
+										aria-label={t.imagePreview}
+										onClick={() => setPreview(i)}
+									>
+										<img src={srcOf(image)} alt="" className="h-full w-full object-contain" draggable={false} />
+									</button>
+									{reachable ? deleteButton(i) : null}
+								</div>
+							);
+						})}
+					</div>
+				) : (
+					images.map((image, i) => (
+						<div key={keyOf(image)} className="pw-image-thumb">
+							<button type="button" className="block" title={t.imagePreview} aria-label={t.imagePreview} onClick={() => setPreview(i)}>
+								<img src={srcOf(image)} alt="" className="max-h-24 max-w-32 rounded-[10px] object-contain" draggable={false} />
+							</button>
+							{deleteButton(i)}
+						</div>
+					))
+				)}
+				{images.length > 1 && onClear ? (
+					<button
+						type="button"
+						className="pw-chip"
+						data-testid="images-clear"
+						disabled={disabled}
+						onClick={() => {
+							onClear();
+							setLifted(null);
+							setPreview(null);
+						}}
+					>
+						{t.imageClearAll}
+					</button>
+				) : null}
+				{collapsible ? (
+					<button
+						type="button"
+						className="pw-chip"
+						data-testid="images-toggle"
+						aria-expanded={fanned}
+						onClick={() => {
+							setExpanded((open) => !open);
+							setLifted(null);
+						}}
+					>
+						{fanned ? t.chipCollapse : t.chipExpandMore.replace("{n}", String(images.length - 1))}
+					</button>
+				) : null}
+			</div>
+			{shown !== null
+				? createPortal(
+					<ImageViewer images={images} index={shown} disabled={disabled} onIndex={setPreview} onRemove={remove} onClose={() => setPreview(null)} />,
+					document.body,
+				)
+				: null}
+		</>
+	);
+}
+
+/** 放大预览：手机上没法用本机程序打开图片，应用内看最实在 */
+function ImageViewer({
+	images,
+	index,
+	disabled,
+	onIndex,
+	onRemove,
+	onClose,
+}: {
+	images: ImageAttachment[];
+	index: number;
+	disabled?: boolean;
+	onIndex: (index: number) => void;
+	onRemove: (index: number) => void;
+	onClose: () => void;
+}) {
+	const { t } = useI18n();
+	const dialogRef = useRef<HTMLDivElement>(null);
+	const closeRef = useRef<HTMLButtonElement>(null);
+	const count = images.length;
+	const go = (delta: number) => onIndex((index + delta + count) % count);
+
+	// 打开时把焦点移进来，关掉时还给原来那个元素（还在页面上的话）
+	useEffect(() => {
+		const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		closeRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
+	}, []);
+
+	// 捕获阶段处理：Esc / 方向键不再传给页面上其它监听 document 的面板；Tab 只在预览里转
+	useEffect(() => {
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onClose();
+			else if (event.key === "ArrowLeft" && count > 1) go(-1);
+			else if (event.key === "ArrowRight" && count > 1) go(1);
+			else if (event.key === "Tab") {
+				const focusable = [...(dialogRef.current?.querySelectorAll<HTMLElement>("button:not(:disabled)") ?? [])];
+				if (!focusable.length) return;
+				const at = focusable.indexOf(document.activeElement as HTMLElement);
+				const next = event.shiftKey ? (at <= 0 ? focusable.length - 1 : at - 1) : at === focusable.length - 1 ? 0 : at + 1;
+				focusable[next].focus();
+			} else return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		document.addEventListener("keydown", onKey, true);
+		return () => document.removeEventListener("keydown", onKey, true);
+		// onClose / onIndex 来自父组件的 setState 包装，语义不变；只随张数和当前张重绑
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [count, index]);
+
+	return (
+		<div ref={dialogRef} className="pw-lightbox" role="dialog" aria-modal="true" aria-label={t.imageViewer} onClick={onClose}>
+			<div className="pw-lightbox-bar" onClick={(event) => event.stopPropagation()}>
+				<span className="pw-lightbox-count">{count > 1 ? `${index + 1} / ${count}` : ""}</span>
+				<button type="button" className="pw-lightbox-btn" disabled={disabled} onClick={() => onRemove(index)}>
+					{t.delete}
+				</button>
+				<button ref={closeRef} type="button" className="pw-lightbox-btn" aria-label={t.close} onClick={onClose}>
+					✕
+				</button>
+			</div>
+			<img src={srcOf(images[index])} alt="" className="pw-lightbox-image" onClick={(event) => event.stopPropagation()} />
+			{count > 1 ? (
+				<>
+					<button type="button" className="pw-lightbox-nav" data-side="prev" aria-label={t.imagePrev} onClick={(event) => { event.stopPropagation(); go(-1); }}>
+						‹
+					</button>
+					<button type="button" className="pw-lightbox-nav" data-side="next" aria-label={t.imageNext} onClick={(event) => { event.stopPropagation(); go(1); }}>
+						›
+					</button>
+				</>
+			) : null}
+		</div>
+	);
+}

package/src/components/side-chat/SideChatPanel.module.css

@@ -0,0 +1,131 @@
+.panel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	min-width: 0;
+}
+.header {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 10px 14px;
+	border-bottom: 0.5px solid var(--dsw-border-l2);
+}
+.header button { width: 28px; height: 28px; flex-shrink: 0; }
+.title { flex: 1; font-size: 13.5px; font-weight: 600; }
+/* 历史记录：按钮 + 浮层菜单（原生 select 不跟深色主题） */
+.history { position: relative; padding: 8px 14px 0; }
+.historyButton {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	width: 100%;
+	min-width: 0;
+	height: 30px;
+	padding: 0 8px;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 8px;
+	background: var(--dsw-hover);
+	color: var(--dsw-label-primary);
+	font-size: 12px;
+	text-align: left;
+	transition: background var(--ds-duration-fast) var(--ds-ease-in-out), border-color var(--ds-duration-fast) var(--ds-ease-in-out);
+}
+.historyButton:hover { background: var(--dsw-selector); }
+.historyButton[aria-expanded="true"] { border-color: var(--dsw-border-l3); background: var(--dsw-selector); }
+.historyMenu {
+	position: absolute;
+	left: 14px;
+	right: 14px;
+	top: calc(100% + 4px);
+	z-index: 30;
+	max-height: 260px;
+	overflow-y: auto;
+	padding: 4px;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 10px;
+	background: var(--dsw-glass-popover);
+	box-shadow: var(--dsw-elevation-soft);
+}
+.historyItem {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	width: 100%;
+	padding: 6px 8px;
+	border-radius: 7px;
+	font-size: 12px;
+	color: var(--dsw-label-secondary);
+	text-align: left;
+}
+.historyItem:hover { background: var(--dsw-hover); color: var(--dsw-label-primary); }
+.historyItem[aria-checked="true"] { background: var(--dsw-accent-soft); color: var(--dsw-accent); }
+.historyMeta { flex: none; font-size: 11px; color: var(--dsw-label-caption); }
+.messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.messageContent { display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; }
+.empty { margin: 36px 8px; color: var(--dsw-label-secondary); text-align: center; line-height: 1.8; }
+.empty p { margin: 0 0 8px; font-size: 14px; }
+.empty span { font-size: 12px; color: var(--dsw-label-tertiary); }
+.question {
+	align-self: flex-end;
+	max-width: 94%;
+	padding: 9px 12px;
+	border-radius: 14px 14px 4px 14px;
+	background: var(--dsw-accent-soft);
+	font-size: var(--piweb-chat-font-size, var(--dsh-content-font-size));
+	line-height: 1.65;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+.answer { min-width: 0; font-size: var(--piweb-chat-font-size, var(--dsh-content-font-size)); line-height: 1.75; overflow-wrap: anywhere; }
+.answer :global(.md) { font-size: inherit; }
+.answer :global(.md pre), .answer :global(.md table) { max-width: 100%; }
+.notice, .waiting { font-size: 12px; line-height: 1.7; color: var(--dsw-label-tertiary); }
+.notice { margin: 4px 0 10px; }
+.error, .storageError { font-size: 12px; line-height: 1.7; color: var(--dsw-danger); overflow-wrap: anywhere; }
+.error button { margin-left: 10px; text-decoration: underline; }
+.storageError { margin: 0; padding: 4px 14px; }
+.composer {
+	margin: 10px 12px 12px;
+	padding: 11px 12px 9px;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 14px;
+	background: var(--dsw-bg-base);
+	flex-shrink: 0;
+}
+.composer:focus-within { border-color: var(--dsw-border-l3); }
+.composer textarea {
+	display: block;
+	width: 100%;
+	min-height: 64px;
+	max-height: 180px;
+	resize: none;
+	border: 0;
+	outline: none;
+	background: transparent;
+	color: inherit;
+	font-family: inherit;
+	font-size: var(--piweb-chat-font-size, var(--dsh-content-font-size));
+	line-height: 1.65;
+}
+.composer textarea::placeholder { color: var(--dsw-label-tertiary); }
+.actions { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding-top: 5px; }
+.model { flex: 1; min-width: 0; }
+/* 右下角的上下文环：夹在模型选择器与发送键之间 */
+.meter { display: flex; align-items: center; flex: none; }
+.model :global(.chip) { max-width: 100%; font-size: 12px; }
+.model :global(.chip:disabled) { opacity: 0.6; }
+.model :global([role="menu"]) { left: 0; right: auto; width: min(312px, calc(100% + 38px)); }
+.send {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	flex-shrink: 0;
+	border-radius: 50%;
+	background: var(--dsw-label-primary);
+	color: var(--dsw-bg-base);
+}
+.send:disabled { opacity: 0.3; cursor: default; }

package/src/components/side-chat/SideChatPanel.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import dynamic from "next/dynamic";
+import { IconChevronDown14, IconCloseOutline14, IconNewChatOutline16, IconSendArrowUp14, IconStopFill16 } from "@/components/icons";
+import { ContextMeter } from "@/components/ContextMeter";
+import { ModelSelector, type ModelChoice } from "@/components/ModelSelector";
+import { useI18n } from "@/i18n";
+import { EMPTY_SIDE_CHAT, sideChatStore, type SideChatStore } from "./store";
+import styles from "./SideChatPanel.module.css";
+
+const Markdown = dynamic(() => import("@/components/MarkdownBlock").then((module) => module.MarkdownBlock));
+const StreamingMarkdown = dynamic(() => import("@/components/MarkdownBlock").then((module) => module.StreamingMarkdownBlock));
+
+export function SideChatPanel({ sessionId, ready = true, mainModel, models = [], providerNames = {}, authByProvider = {}, onClose, store = sideChatStore }: {
+	sessionId: string | null;
+	ready?: boolean;
+	mainModel?: { provider: string; id: string; name: string };
+	models?: ModelChoice[];
+	providerNames?: Record<string, string>;
+	authByProvider?: Record<string, boolean>;
+	onClose: () => void;
+	store?: SideChatStore;
+}) {
+	const { t } = useI18n();
+	const subscribe = useCallback((listener: () => void) => store.subscribe(sessionId, listener), [sessionId, store]);
+	const getSnapshot = useCallback(() => store.get(sessionId), [sessionId, store]);
+	const state = useSyncExternalStore(subscribe, getSnapshot, () => EMPTY_SIDE_CHAT);
+	const thread = state.threads.find((item) => item.id === state.currentThreadId);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const pinned = useRef(true);
+	const lastTop = useRef(0);
+	const busy = Boolean(thread?.request);
+	const threadId = thread?.id;
+	/** 历史记录菜单是否展开 */
+	const [historyOpen, setHistoryOpen] = useState(false);
+	const historyRef = useRef<HTMLDivElement>(null);
+	const selectedModel = thread?.model
+		? models.find((model) => model.provider === thread.model!.provider && model.id === thread.model!.id) ?? { ...thread.model, name: thread.model.id }
+		: mainModel;
+	const canSend = Boolean(sessionId && ready && selectedModel);
+
+	useEffect(() => {
+		pinned.current = true;
+		lastTop.current = 0;
+		if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+	}, [sessionId, threadId]);
+	useEffect(() => {
+		const node = scrollRef.current;
+		if (!node) return;
+		const pin = () => { if (pinned.current) node.scrollTop = node.scrollHeight; };
+		const observer = new ResizeObserver(pin);
+		if (node.firstElementChild) observer.observe(node.firstElementChild);
+		pin();
+		return () => observer.disconnect();
+	}, [thread?.messages]);
+	useEffect(() => {
+		const textarea = textareaRef.current;
+		if (!textarea) return;
+		textarea.style.height = "auto";
+		textarea.style.height = `${Math.min(180, Math.max(64, textarea.scrollHeight))}px`;
+	}, [thread?.draft, threadId]);
+
+	// 历史记录菜单：点外部或 Esc 关掉（与圆环弹窗同一套做法）
+	useEffect(() => {
+		if (!historyOpen) return;
+		const onDown = (event: MouseEvent) => {
+			if (!historyRef.current?.contains(event.target as Node)) setHistoryOpen(false);
+		};
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") setHistoryOpen(false);
+		};
+		document.addEventListener("mousedown", onDown);
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("mousedown", onDown);
+			document.removeEventListener("keydown", onKey);
+		};
+	}, [historyOpen]);
+
+	// 上下文：这次问出去的真实 prompt（input + 缓存读写）对上该模型的窗口。
+	// 没有真实用量就一律 null —— 圆环显示「用量未知」，不编数字。
+	const usage = thread?.usage;
+	const contextTokens = usage ? usage.input + usage.cacheRead + usage.cacheWrite : null;
+	const contextWindow = thread?.contextWindow ?? null;
+	const contextPercent = contextTokens !== null && contextWindow ? (contextTokens / contextWindow) * 100 : null;
+
+	const send = () => {
+		if (!sessionId || !canSend || busy || !thread?.draft.trim()) return;
+		pinned.current = true;
+		store.send(sessionId);
+		textareaRef.current?.focus({ preventScroll: true });
+	};
+
+	return (
+		<section className={styles.panel} aria-label={t.sideChat} data-testid="side-chat-panel">
+			<header className={styles.header}>
+				<span className={styles.title}>{t.sideChat}</span>
+				<button type="button" className="icon-btn" aria-label={t.sideChatNew} title={t.sideChatNew} disabled={!sessionId} onClick={() => sessionId && store.createThread(sessionId)}>
+					<IconNewChatOutline16 size={16} />
+				</button>
+				<button type="button" className="icon-btn" aria-label={t.close} title={t.close} onClick={onClose}><IconCloseOutline14 size={14} /></button>
+			</header>
+			{state.threads.length > 1 && (
+				// 原生 select 在深色界面里是系统白底菜单（又丑又不跟主题），改用与模型选择器一致的浮层菜单
+				<div className={styles.history} ref={historyRef}>
+					<button type="button" className={styles.historyButton} aria-label={t.sideChatHistory} aria-haspopup="menu" aria-expanded={historyOpen} onClick={() => setHistoryOpen((open) => !open)}>
+						<span className="truncate">{thread ? `${thread.title || t.sideChatNew}${thread.request ? " · …" : ""}` : t.sideChatHistory}</span>
+						<IconChevronDown14 size={12} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
+					</button>
+					{historyOpen && (
+						<div className={styles.historyMenu} role="menu" aria-label={t.sideChatHistory}>
+							{[...state.threads].reverse().map((item) => (
+								<button key={item.id} type="button" role="menuitemradio" aria-checked={item.id === threadId} className={styles.historyItem}
+									onClick={() => { if (sessionId) store.selectThread(sessionId, item.id); setHistoryOpen(false); }}>
+									<span className="truncate">{item.title || t.sideChatNew}</span>
+									{item.request ? <span className={styles.historyMeta}>…</span> : null}
+								</button>
+							))}
+						</div>
+					)}
+				</div>
+			)}
+			<div className={styles.messages} ref={scrollRef} role="log" aria-label={t.sideChatMessages} aria-live="polite" aria-relevant="additions" onScroll={(event) => {
+				const node = event.currentTarget;
+				const distance = node.scrollHeight - node.scrollTop - node.clientHeight;
+				const movedUp = node.scrollTop < lastTop.current - 1 && distance > 2;
+				pinned.current = !movedUp && distance < 48;
+				lastTop.current = node.scrollTop;
+			}}>
+				<div className={styles.messageContent}>
+					{!thread?.messages.length ? (
+						<div className={styles.empty}>
+							<p>{sessionId ? t.sideChatEmpty : t.sideChatPickSession}</p>
+							{sessionId && <span>{t.sideChatHint}</span>}
+						</div>
+					) : thread.messages.map((message) => (
+						<div key={message.id} className={message.role === "user" ? styles.question : styles.answer} data-role={message.role}>
+							{message.role === "user" ? message.text : <>
+								{message.contextTruncated && <p className={styles.notice}>{t.sideChatContextTruncated}</p>}
+								{message.text && (message.status === "pending" ? <StreamingMarkdown text={message.text} /> : <Markdown text={message.text} />)}
+								{message.status === "pending" && !message.text && <span className={styles.waiting} role="status">{thread.connectionLost ? t.reconnecting : t.sideChatAnswering}</span>}
+								{message.error && <div className={styles.error} role="alert">{message.error}{message.status === "error" && message === thread.messages.at(-1) && <button type="button" disabled={busy} onClick={() => sessionId && store.send(sessionId, true)}>{t.retry}</button>}</div>}
+								{message.status === "aborted" && <p className={styles.notice}>{t.turnAborted}</p>}
+								{message.lengthLimited && <p className={styles.notice}>{t.sideChatLengthLimited}</p>}
+							</>}
+						</div>
+					))}
+				</div>
+			</div>
+			{state.storageFailed && <p className={styles.storageError} role="alert">{t.sideChatStorageFailed}</p>}
+			<form className={styles.composer} onSubmit={(event) => { event.preventDefault(); send(); }}>
+				<textarea ref={textareaRef} aria-label={t.sideChatQuestion} placeholder={sessionId ? t.sideChatPlaceholder : t.sideChatPickSession} value={thread?.draft ?? ""} disabled={!canSend}
+					onChange={(event) => sessionId && store.setDraft(sessionId, event.target.value)}
+					onKeyDown={(event) => {
+						if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229) { event.preventDefault(); send(); }
+					}} />
+				<div className={styles.actions}>
+					<div className={styles.model} role="group" aria-label={t.sideChatModel}>
+						<ModelSelector model={selectedModel} models={models} providerNames={providerNames} authByProvider={authByProvider}
+							modelOnly disabled={!sessionId} thinkingLevels={[]} onSelectLevel={() => {}}
+							defaultOption={{ label: t.sideChatFollowMain, selected: !thread?.model, onSelect: () => sessionId && store.setModel(sessionId) }}
+							onSelectModel={(provider, id) => sessionId && store.setModel(sessionId, { provider, id })} />
+					</div>
+					<div className={styles.meter}>
+						<ContextMeter
+							percent={contextPercent}
+							tokens={contextTokens}
+							contextWindow={contextWindow}
+							label={t.contextMeasured}
+							source={thread?.characters ? {
+								systemChars: 0,
+								messages: thread.messages.map((message) => ({ role: message.role, content: [{ type: "text", text: message.text }] })),
+								breakdown: {
+									characters: { systemPrompt: thread.characters.systemPrompt, background: thread.characters.background, systemTools: 0, customTools: 0, memory: 0, skills: 0, compacted: 0 },
+									systemPrompt: 0, systemTools: 0, customTools: 0, memory: 0, skills: 0, compacted: 0, autoCompactBuffer: 0,
+								},
+							} : undefined}
+							model={selectedModel ? { provider: selectedModel.provider, id: selectedModel.id } : null}
+						/>
+					</div>
+					{busy ? <button type="button" className={styles.send} title={t.stop} aria-label={t.stop} onClick={() => sessionId && store.stop(sessionId)}><IconStopFill16 size={15} /></button>
+						: <button type="submit" className={styles.send} title={t.send} aria-label={t.send} disabled={!canSend || !thread?.draft.trim()}><IconSendArrowUp14 size={16} /></button>}
+				</div>
+			</form>
+		</section>
+	);
+}

package/src/components/side-chat/icons.tsx

@@ -0,0 +1,8 @@
+import type { SVGProps } from "react";
+
+export function SideChatIcon({ size = 16, ...props }: SVGProps<SVGSVGElement> & { size?: number }) {
+	return <svg width={size} height={size} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
+		<path d="M12.5 11.5H6l-3.5 2V4.5A2 2 0 0 1 4.5 2.5h8a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2Z" />
+		<path d="M7.5 14.5h6.5l3.5 2V7.5a2 2 0 0 0-1-1.73" />
+	</svg>;
+}