@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/ChatInput.tsx

@@ -9,6 +9,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
 	IconAtOutline16,
+	IconCloseOutline14,
 	IconFileOutline16,
 	IconFolderClose16,
 	IconSendArrowUp14,
@@ -17,12 +18,14 @@ import {
 } from "@/components/icons";
 import { ContextMeter } from "@/components/ContextMeter";
 import { COLLAPSE_AT, ComposerImages } from "@/components/composer/ComposerImages";
+import { ComposerFiles } from "@/components/composer/ComposerFiles";
 import { ModelSelector, type ModelChoice } from "@/components/ModelSelector";
 import { useI18n } from "@/i18n";
 import { useWorkspaceFiles } from "@/hooks/useWorkspaceFiles";
 import { fmtBytes } from "@/lib/format";
 import { otherBehavior, useEnterBehavior } from "@/lib/enter-behavior";
 import { atToken, candidateText, suggestPaths, type PathCandidate } from "@/lib/workspace-index";
+import { slashCommandToken } from "@/lib/slash-command-token";
 import type { ImageAttachment } from "@/lib/types";
 
 export interface SlashCommand {
@@ -86,6 +89,7 @@ export function ChatInput({
 	pendingUploadCount = 0,
 	pendingSend = false,
 	onSendPendingChange,
+	attachmentLayout = "overlay",
 }: {
 	disabled?: boolean;
 	isStreaming: boolean;
@@ -131,6 +135,8 @@ export function ChatInput({
 	pendingUploadCount?: number;
 	pendingSend?: boolean;
 	onSendPendingChange?: (pending: boolean) => void;
+	/** Hero 在输入卡上方预留空间；聊天中仍让附件悬浮、不占布局高度 */
+	attachmentLayout?: "overlay" | "flow";
 }) {
 	const [localDraft, setLocalDraft] = useState<ChatDraft>(initialDraft ?? EMPTY_CHAT_DRAFT);
 	const currentDraft = draft ?? localDraft;
@@ -159,12 +165,11 @@ export function ChatInput({
 	const [dragActive, setDragActive] = useState(false);
 	/** 引用 chip 超过 COLLAPSE_AT 就先折叠：手机上折行会把输入框顶掉（图片的折叠在 ComposerImages 里） */
 	const [refsExpanded, setRefsExpanded] = useState(false);
-	/** 上传文件超过 4 个时的展开状态（与引用同一套折叠规则） */
-	const [uploadsExpanded, setUploadsExpanded] = useState(false);
 	const dragDepth = useRef(0);
 	const [modelOpen, setModelOpen] = useState(false);
 	const [cmdIdx, setCmdIdx] = useState(0);
 	const [cmdDismissed, setCmdDismissed] = useState(false);
+	const [commandCaret, setCommandCaret] = useState<number | null>(currentDraft.text.length);
 	// @ 引用：打字触发候选，选中后落成引用 chip（发送时统一拼成 `@路径` 行）
 	const [mention, setMention] = useState<{ query: string; start: number; tokenEnd: number } | null>(null);
 	const [mentionIdx, setMentionIdx] = useState(0);
@@ -190,11 +195,11 @@ export function ChatInput({
 		autoSize();
 	}, [text]);
 
-	// 斜杠命令模式：文本以 / 开头且未输入参数空格
-	const slash = text.startsWith("/") ? text.slice(1) : "";
-	const hasArgs = slash.includes(" ");
-	const typedCommandMode = !!commands?.length && text.startsWith("/") && !cmdDismissed && !hasArgs;
-	const filteredCommands = (commands ?? []).filter((c) => c.name.toLowerCase().startsWith(slash.split(" ")[0].toLowerCase()));
+	// 补全光标处的 token，而不是只看草稿的第一个字符
+	const commandToken = slashCommandToken(text, commandCaret);
+	const slash = commandToken?.query ?? "";
+	const typedCommandMode = !adopted && !!commands?.length && !!commandToken && !cmdDismissed;
+	const filteredCommands = (commands ?? []).filter((c) => c.name.toLowerCase().startsWith(slash.toLowerCase()));
 	const visibleCommands = filteredCommands;
 	const commandMode = typedCommandMode;
 
@@ -278,7 +283,67 @@ export function ChatInput({
 	}, [cmdIdx, visibleCommands.length]);
 	const effectiveIdx = Math.min(cmdIdx, Math.max(0, visibleCommands.length - 1));
 
+	const withoutCommandToken = () => commandToken ? text.slice(0, commandToken.start) + text.slice(commandToken.tokenEnd) : text;
+	const adoptCommand = (entry: SlashCommand) => {
+		// SDK 只展开开头的一个命令：已经采纳时不再覆盖（先 Backspace 摘掉）
+		if (draftRef.current.adopted) return;
+		const remaining = withoutCommandToken();
+		const caret = commandToken?.start ?? remaining.length;
+		setAdopted(entry);
+		setText(remaining);
+		setCommandCaret(caret);
+		setCmdDismissed(true);
+		setCmdIdx(0);
+		requestAnimationFrame(() => {
+			autoSize();
+			taRef.current?.focus();
+			taRef.current?.setSelectionRange(caret, caret);
+		});
+	};
+
+	// 行内扩展命令（如 /fast）自己执行：不能为了切换它把周围的草稿、图片或引用一起发出去
+	const runInlineExtension = async (entry: SlashCommand) => {
+		if (disabled || isBlocked || sendingRef.current || pendingSend || uploadBusy) return;
+		const original = text;
+		const remaining = withoutCommandToken();
+		sendingRef.current = true;
+		setSending(true);
+		onSendPendingChange?.(true);
+		setText(remaining);
+		setCommandCaret(remaining.length);
+		setCmdDismissed(true);
+		try {
+			const result = await onSend(`/${entry.name}`, []);
+			if (!result?.success) throw new Error(result?.error || "Command failed");
+		} catch (error) {
+			setText((previous) => previous === remaining ? original : previous);
+			if (mountedRef.current) {
+				setCommandCaret(commandToken?.tokenEnd ?? original.length);
+				setCmdDismissed(false);
+				setAttachmentError(error instanceof Error ? error.message : String(error));
+			}
+		} finally {
+			sendingRef.current = false;
+			if (mountedRef.current) setSending(false);
+			onSendPendingChange?.(false);
+		}
+	};
+
 	const runEntry = (entry: SlashCommand) => {
+		if (draftRef.current.adopted) return;
+		// 命令出现在正文中间：只替换这一段 token，前后文字原样保留
+		if (commandToken && (commandToken.start > 0 || commandToken.tokenEnd < text.length)) {
+			if (entry.kind === "builtin") {
+				if (entry.name === "model") setModelOpen(true);
+				else onCommand?.(entry.name, "");
+				const remaining = withoutCommandToken();
+				setText(remaining);
+				setCommandCaret(remaining.length);
+				setCmdDismissed(true);
+			} else if (entry.kind === "extension") void runInlineExtension(entry);
+			else adoptCommand(entry);
+			return;
+		}
 		const args = slash.slice(entry.name.length).trim();
 		if (entry.kind === "builtin" && entry.name === "model") {
 			setModelOpen(true);
@@ -506,28 +571,50 @@ export function ChatInput({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const hasDraft = text.trim().length > 0 || images.length > 0 || uploads.length > 0 || references.length > 0;
+	const hasDraft = adopted !== null || text.trim().length > 0 || images.length > 0 || uploads.length > 0 || references.length > 0;
 
 	return (
 		<div ref={wrapRef} className="relative w-full" data-testid="composer">
-			{/* 排队中的消息（Claude Code 同款：列在输入卡上方；↑ 取回编辑，或直接丢弃） */}
+			{/* 排队中的消息（高质感浮动拟态胶囊 dock：左侧消息与彩色药丸徽标，右侧快捷键微胶囊按钮） */}
 			{queuedCount > 0 && (
-				<div className="pw-queue">
-					{queue.steering.map((q, i) => (
-						<div key={`s${i}`} className="pw-queue-row" title={q}>
-							<span className="pw-queue-tag">{t.modeSteer}</span>
-							<span className="pw-queue-text">{q}</span>
-						</div>
-					))}
-					{queue.followUp.map((q, i) => (
-						<div key={`f${i}`} className="pw-queue-row" title={q}>
-							<span className="pw-queue-tag">{t.modeQueue}</span>
-							<span className="pw-queue-text">{q}</span>
-						</div>
-					))}
+				<div className="pw-queue" role="status" aria-live="polite">
+					<div className="pw-queue-list">
+						{queue.steering.map((q, i) => (
+							<div key={`s${i}`} className="pw-queue-row" title={q}>
+								<span className="pw-queue-tag pw-queue-tag-steer">
+									<span className="pw-queue-dot" />
+									{t.modeSteer}
+								</span>
+								<span className="pw-queue-text">{q}</span>
+							</div>
+						))}
+						{queue.followUp.map((q, i) => (
+							<div key={`f${i}`} className="pw-queue-row" title={q}>
+								<span className="pw-queue-tag pw-queue-tag-queue">
+									<span className="pw-queue-dot" />
+									{t.modeQueue}
+								</span>
+								<span className="pw-queue-text">{q}</span>
+							</div>
+						))}
+					</div>
 					<div className="pw-queue-foot">
-						<button type="button" onClick={() => void pullQueue()}>{t.queueEdit}</button>
-						<button type="button" onClick={() => void onClearQueue?.()}>{t.queueDrop}</button>
+						<button
+							type="button"
+							className="pw-queue-btn pw-queue-btn-pull"
+							onClick={() => void pullQueue()}
+							title="↑"
+						>
+							<span className="pw-queue-kbd">↑</span>
+							<span>{t.queueEdit.replace(/^[↑\s]+/, "") || t.queueEdit}</span>
+						</button>
+						<button
+							type="button"
+							className="pw-queue-btn pw-queue-btn-drop"
+							onClick={() => void onClearQueue?.()}
+						>
+							{t.queueDrop}
+						</button>
 					</div>
 				</div>
 			)}
@@ -541,7 +628,7 @@ export function ChatInput({
 				<div
 					ref={mentionMenuRef}
 					data-testid="mention-menu"
-					className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-y-auto py-1.5"
+					className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-x-hidden overflow-y-auto py-1.5"
 					role="listbox"
 					aria-label={t.mentionFiles}
 					style={{ overflowY: "auto" }}
@@ -568,23 +655,25 @@ export function ChatInput({
 							type="button"
 							role="option"
 							aria-selected={i === effectiveMentionIdx}
-							className="flex w-full items-center gap-2 px-4 py-1.5 text-left transition-colors"
-							style={{ background: i === effectiveMentionIdx ? "var(--dsw-hover)" : "transparent" }}
+							data-active={i === effectiveMentionIdx ? "true" : undefined}
+							className="isx-menu-item mx-1.5 flex w-[calc(100%-12px)] items-center gap-2 px-3 py-1.5 text-left"
 							onMouseEnter={() => setMentionIdx(i)}
 							onClick={() => applyMention(candidate)}
 							title={candidateText(candidate)}
 						>
-							{candidate.dir ? (
-								<IconFolderClose16 size={13} style={{ flex: "none", color: "var(--dsw-warn)" }} />
-							) : (
-								<IconFileOutline16 size={13} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
-							)}
+							<span className="isx-menu-icon" style={{ display: "inline-flex", flex: "none" }}>
+								{candidate.dir ? (
+									<IconFolderClose16 size={13} style={{ flex: "none", color: "var(--dsw-warn)" }} />
+								) : (
+									<IconFileOutline16 size={13} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
+								)}
+							</span>
 							{/* 和 pi 终端一样：名字在前，路径在后；根目录下的条目两者相同，不重复显示 */}
-							<span className="flex-none truncate" style={{ maxWidth: "55%", fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-primary)" }}>
+							<span className="isx-menu-shift flex-none truncate" style={{ maxWidth: "55%", fontSize: 12.5, fontFamily: "var(--font-mono)" }}>
 								{label}
 							</span>
 							{description.replace(/\/$/, "") !== label.replace(/\/$/, "") && (
-								<span className="min-w-0 flex-1 truncate" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)" }}>
+								<span className="isx-menu-sub min-w-0 flex-1 truncate pr-2" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)" }}>
 									{description}
 								</span>
 							)}
@@ -595,7 +684,7 @@ export function ChatInput({
 
 			{/* 斜杠命令菜单（dsh：悬浮于输入卡上方，同宽） */}
 			{commandMode && visibleCommands.length > 0 && (
-				<div ref={cmdMenuRef} className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-y-auto py-1.5" role="listbox" aria-label={t.slashCatalog} style={{ overflowY: "auto" }}>
+				<div ref={cmdMenuRef} className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-x-hidden overflow-y-auto py-1.5" role="listbox" aria-label={t.slashCatalog} style={{ overflowY: "auto" }}>
 					<div className="px-4 pb-1 pt-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 						{t.slashCatalog}
 					</div>
@@ -604,21 +693,21 @@ export function ChatInput({
 							key={`${c.kind}:${c.name}`}
 							role="option"
 							aria-selected={i === effectiveIdx}
-							className="flex w-full items-baseline gap-3 px-4 py-2 text-left transition-colors"
-							style={{ background: i === effectiveIdx ? "var(--dsw-hover)" : "transparent" }}
+							data-active={i === effectiveIdx ? "true" : undefined}
+							className="isx-menu-item mx-1.5 flex w-[calc(100%-12px)] items-baseline gap-3 px-3 py-2 text-left"
 							onMouseEnter={() => setCmdIdx(i)}
 							onClick={() => runEntry(c)}
 						>
-							<span style={{ fontSize: 14, fontWeight: 500, color: "var(--dsw-label-primary)", flex: "none" }}>{c.name}</span>
+							<span className="isx-menu-shift" style={{ fontSize: 14, fontWeight: 500, flex: "none" }}>{c.name}</span>
 							{c.kind !== "builtin" && (
-								<span className="rounded px-1.5 py-0.5" style={{ fontSize: 10.5, color: "var(--dsw-label-caption)", background: "var(--dsw-selector)", flex: "none" }}>
+								<span className="isx-menu-sub rounded px-1.5 py-0.5" style={{ fontSize: 10.5, color: "var(--dsw-label-caption)", background: "var(--dsw-selector)", flex: "none" }}>
 									{c.kind === "skill" ? t.skillType : c.kind === "template" ? t.promptType : t.extensionCmdType}
 								</span>
 							)}
 							{c.argumentHint && (
-								<span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)", flex: "none" }}>{c.argumentHint}</span>
+								<span className="isx-menu-sub" style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)", flex: "none" }}>{c.argumentHint}</span>
 							)}
-							<span className="truncate" style={{ fontSize: 13, color: "var(--dsw-label-tertiary)" }}>
+							<span className="isx-menu-sub truncate pr-2" style={{ fontSize: 13, color: "var(--dsw-label-tertiary)" }}>
 								{c.desc}
 							</span>
 						</button>
@@ -627,11 +716,12 @@ export function ChatInput({
 			)}
 
 			{/*
-			 * 附件轨（图片 / 引用 / 上传文件）：绝对定位浮在输入卡上方，**不占布局高度** ——
+			 * 附件轨（图片 / 引用 / 上传文件）：聊天中悬浮于输入卡上方，不占布局高度 ——
 			 * 输入框位置不动，多出来的附件直接盖住后面的聊天记录（用户要的就是这个）。
+			 * 新对话页用 flow 占位，避免 @ 引用和图片盖住上方的工作区选择器。
 			 * 外层 pointer-events-none，只有附件本身接收点击，免得挡住聊天区的交互。
 			 */}
-			<div className="pointer-events-none absolute inset-x-0 bottom-full z-20 flex flex-col gap-1.5 pb-2" data-testid="composer-attachments">
+			{(images.length > 0 || references.length > 0 || uploads.length > 0) && <div className={`pointer-events-none z-20 flex flex-col gap-1.5 pb-2 ${attachmentLayout === "flow" ? "relative" : "absolute inset-x-0 bottom-full"}`} data-testid="composer-attachments">
 			{/* 附件轨：图片（超过 4 张折叠成牌堆，展开沿弧线扇开；点开可放大、切换、删除） */}
 			{images.length > 0 && (
 				<ComposerImages
@@ -681,51 +771,28 @@ export function ChatInput({
 				</div>
 			)}
 
-			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用）；超过 4 个折叠 */}
+			{/* 附件轨：上传的普通文件（超过 4 个折叠成牌堆，展开沿竖直向上弧度展开） */}
 			{uploads.length > 0 && (
-				<div className="pointer-events-auto flex flex-wrap items-center gap-1 px-1" data-testid="composer-uploads">
-					{(uploadsExpanded ? uploads : uploads.slice(0, COLLAPSE_AT)).map((f, i) => (
-						<span key={f.path} className="pw-ref-chip group/ref" title={f.path}>
-							<IconFileOutline16 size={12} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
-							<span className="max-w-[180px] truncate">{f.name}</span>
-							<span style={{ flex: "none", fontSize: 11, color: "var(--dsw-label-caption)" }}>{fmtUploadSize(f.size)}</span>
-							<button
-								type="button"
-								className="pw-ref-close"
-								disabled={sendBusy}
-								onClick={() => changeDraft((previous) => ({ ...previous, uploads: previous.uploads.filter((_, index) => index !== i) }))}
-								aria-label={`${t.delete} ${f.name}`}
-							>
-								✕
-							</button>
-						</span>
-					))}
-					{uploads.length > COLLAPSE_AT ? (
-						<button type="button" className="pw-chip" data-testid="uploads-toggle" onClick={() => setUploadsExpanded((open) => !open)}>
-							{uploadsExpanded ? t.chipCollapse : t.chipExpandMore.replace("{n}", String(uploads.length - COLLAPSE_AT))}
-						</button>
-					) : null}
-				</div>
+				<ComposerFiles
+					files={uploads}
+					disabled={sendBusy}
+					onRemove={(index) => changeDraft((previous) => ({ ...previous, uploads: previous.uploads.filter((_, at) => at !== index) }))}
+					onClear={() => changeDraft((previous) => ({ ...previous, uploads: [] }))}
+				/>
 			)}
 
-			</div>
+			</div>}
 
-			{/* 卡片（玻璃态）—— 拖放由 document 级监听统一接管 */}
-			<div
-				className="relative w-full"
-				style={{
-					borderRadius: 22,
-					background: "var(--dsw-input-major)",
-					boxShadow: "var(--dsw-elevation-soft)",
-					border: "0.5px solid var(--dsw-border-l1)",
-				}}
-			>
-				<div className="px-4 pt-3 flex items-start gap-1.5">
+			{/* 卡片（Iconsax .isx-composer：24px 圆角 + 聚焦高对比描边 + 底部流光短横条）—— 拖放由 document 级监听统一接管 */}
+			<div className="isx-composer relative w-full">
+				<div className="px-4 pt-3 flex flex-col items-stretch gap-1.5">
 					{adopted && (
 						<button
 							type="button"
-							className="flex-none flex items-center gap-1 self-start"
-							title={`${t.delete} (Backspace)`}
+							className="flex-none flex max-w-full items-center gap-1 self-start"
+							disabled={disabled || sendBusy}
+							aria-label={`${t.delete} /${adopted.name}`}
+							title={`${t.delete} /${adopted.name} (Backspace)`}
 							style={{
 								fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))",
 								lineHeight: "var(--piweb-chat-line-height, 1.55)",
@@ -740,7 +807,8 @@ export function ChatInput({
 							}}
 						>
 							<IconTerminalOutline14 size={14} style={{ color: "var(--dsw-accent)", flex: "none" }} />
-							<span style={{ color: "var(--dsw-accent)", fontWeight: 600 }}>/{adopted.name}</span>
+							<span className="min-w-0 truncate" style={{ color: "var(--dsw-accent)", fontWeight: 600 }}>/{adopted.name}</span>
+							<IconCloseOutline14 size={12} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
 						</button>
 					)}
 					<textarea
@@ -750,11 +818,12 @@ export function ChatInput({
 						rows={1}
 						placeholder={adopted ? (adopted.argumentHint ?? t.inputPlaceholder) : !disabled && isBlocked ? t.blockedComposer : t.inputPlaceholder}
 						suppressHydrationWarning
-						className="min-w-0 flex-1 resize-none"
+						className="min-w-0 w-full resize-none"
 						style={{ fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))", lineHeight: 1.55 }}
 						onChange={(e) => {
 							const value = e.target.value;
 							setText(value);
+							setCommandCaret(e.target.selectionStart);
 							setCmdDismissed(false);
 							setCmdIdx(0);
 							syncMention(value, e.target.selectionStart);
@@ -763,7 +832,10 @@ export function ChatInput({
 						onSelect={(e) => {
 							// 选中了一段文字时不弹：那时 Enter / Tab 应该照常工作
 							const ta = e.target as HTMLTextAreaElement;
-							syncMention(ta.value, ta.selectionStart === ta.selectionEnd ? ta.selectionStart : null);
+							const caret = ta.selectionStart === ta.selectionEnd ? ta.selectionStart : null;
+							setCommandCaret(caret);
+							if (slashCommandToken(ta.value, caret)?.start !== commandToken?.start) setCmdDismissed(false);
+							syncMention(ta.value, caret);
 						}}
 						onPaste={(e) => {
 							const files = Array.from(e.clipboardData.files);
@@ -801,13 +873,16 @@ export function ChatInput({
 									}
 								}
 							}
-							if (adopted && text === "" && (e.key === "Backspace" || e.key === "Escape")) {
-								// 空参数时退格/Esc：摘掉命令胶囊
+							if (adopted && !e.nativeEvent.isComposing && (
+								(e.key === "Backspace" && e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0) ||
+								(e.key === "Escape" && text === "")
+							)) {
+								// 光标在开头时退格 / 空参数时 Esc：只摘掉命令标记，不碰任何正文
 								e.preventDefault();
 								setAdopted(null);
 								return;
 							}
-							if (commandMode && visibleCommands.length > 0) {
+							if (commandMode && visibleCommands.length > 0 && !e.nativeEvent.isComposing) {
 								if (e.key === "ArrowDown") {
 									e.preventDefault();
 									setCmdIdx((i) => Math.min(i + 1, visibleCommands.length - 1));
@@ -820,10 +895,10 @@ export function ChatInput({
 								}
 								if (e.key === "Escape") {
 									e.preventDefault();
-										setCmdDismissed(true);
+									setCmdDismissed(true);
 									return;
 								}
-								if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+								if (e.key === "Enter") {
 									e.preventDefault();
 									runEntry(visibleCommands[effectiveIdx]);
 									return;
@@ -833,13 +908,7 @@ export function ChatInput({
 									e.preventDefault();
 									const entry = visibleCommands[effectiveIdx];
 									if (!entry) return;
-									setAdopted(entry);
-									setText("");
-									setCmdIdx(0);
-									requestAnimationFrame(() => {
-										autoSize();
-										taRef.current?.focus();
-									});
+									adoptCommand(entry);
 									return;
 								}
 							}
@@ -900,13 +969,23 @@ export function ChatInput({
 
 					{/* 停止 / 发送圆钮：运行中没草稿 → 停止；运行中有草稿 → 幽灵停止钮 + 发送（发送即按设置插话 / 排队） */}
 					{isStreaming && !hasDraft ? (
-						<button className="btn-primary-circle" title={t.stop} onClick={() => void stopAndRestore()}>
+						<button
+							className="btn-primary-circle isx-btn-stop"
+							data-streaming="true"
+							title={t.stop}
+							onClick={() => void stopAndRestore()}
+						>
 							<IconStopFill16 size={16} />
 						</button>
 					) : (
 						<>
 							{isStreaming && (
-								<button className="btn-ghost-circle" title={t.stop} onClick={() => void stopAndRestore()}>
+								<button
+									className="btn-ghost-circle isx-btn-stop"
+									data-streaming="true"
+									title={t.stop}
+									onClick={() => void stopAndRestore()}
+								>
 									<IconStopFill16 size={14} />
 								</button>
 							)}