@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/src/mainview/components/chat/ChatPanel.tsx

@@ -0,0 +1,219 @@
+/**
+ * ChatPanel — Agent 流式对话面板
+ *
+ * 对应 PRD §4.2-4.3：SSE 流式渲染、轮次展示、工具调用卡片
+ * 通过 RPC 事件订阅接收 Agent 的实时推送
+ */
+
+import { useEffect, useRef, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { MessageSquare } from "lucide-react";
+import { useChatStore } from "../../stores/use-chat-store";
+import { useSessionStore } from "../../stores/use-session-store";
+import { useConnectionStore } from "../../stores/use-connection-store";
+import { MessageBubble } from "./MessageBubble";
+import { CommandBar } from "./CommandBar";
+import { ToolPicker } from "./ToolPicker";
+import { useAgentChat } from "../../hooks/use-agent-chat";
+
+export function ChatPanel() {
+	const { t } = useTranslation();
+	const messages = useChatStore((s) => s.messages);
+	const setMessages = useChatStore((s) => s.setMessages);
+
+	const currentSessionId = useSessionStore((s) => s.currentSessionId);
+	const running = useSessionStore((s) => s.running);
+
+	const activePlugins = useConnectionStore((s) => s.activePlugins);
+
+	const inputRef = useRef<HTMLInputElement>(null);
+	const messagesEndRef = useRef<HTMLDivElement>(null);
+	const [selectedTools, setSelectedTools] = useState<string[]>([]);
+
+	const toggleTool = (toolId: string): void => {
+		setSelectedTools((prev) =>
+			prev.includes(toolId) ? prev.filter((t) => t !== toolId) : [...prev, toolId],
+		);
+	};
+
+	// 自动滚底
+	useEffect(() => {
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messages]);
+
+	const currentSession = useSessionStore((s) => s.currentSession);
+
+	// 从 currentSession 同步 messages
+	useEffect(() => {
+		if (currentSession?.messages) {
+			setMessages(currentSession.messages);
+		}
+	}, [currentSession?.messages?.length]);
+
+	const { chat } = useAgentChat();
+
+	const sendMessage = useCallback(async () => {
+		const input = inputRef.current;
+		if (!input || !input.value.trim() || running || !currentSessionId) return;
+
+		const text = input.value.trim();
+		input.value = "";
+
+		// 组合选中工具 + 用户文本
+		const tools = [...activePlugins, ...selectedTools];
+		const allPlugins = [...new Set(tools)]; // 去重
+		await chat(text, currentSessionId, allPlugins);
+		setSelectedTools([]);
+	}, [currentSessionId, running, activePlugins, selectedTools, chat]);
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			sendMessage();
+		}
+	};
+
+	const sessionAssets = currentSession?.assets || [];
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			{/* Header */}
+			<div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center gap-2 flex-shrink-0">
+				<MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
+				<h2 className="text-sm font-semibold">{t("chat.title")}</h2>
+				{messages.length > 0 && (
+					<span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+						{messages.length}
+					</span>
+				)}
+			</div>
+
+			{/* 直接命令栏（不经 Agent） */}
+			<CommandBar />
+
+			{/* 消息区 */}
+			<div className="flex-1 overflow-y-auto px-4 py-4" ref={messagesEndRef}>
+				{messages.length === 0 ? (
+					<div className="flex items-center justify-center h-full text-center">
+						<div>
+							<div className="text-4xl mb-4">◈</div>
+							<div className="text-lg font-semibold mb-2">
+								开始你的第一次采集
+							</div>
+							<div className="text-sm text-[var(--color-text-tertiary)] max-w-md">
+								在下方输入需求，或点击侧栏的技能快速开始。
+							</div>
+						</div>
+					</div>
+				) : (
+					<>
+						{messages.map((m) => (
+							<MessageBubble key={m.id} message={m} />
+						))}
+
+						{/* 内嵌资源 */}
+						{sessionAssets.length > 0 && (
+							<div style={{ marginTop: 16 }}>
+								<InlineAssets assets={sessionAssets} />
+							</div>
+						)}
+					</>
+				)}
+			</div>
+
+			{/* 输入区 */}
+			<div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex-shrink-0">
+				<div className="flex gap-2">
+					<input
+						ref={inputRef}
+						type="text"
+						placeholder={
+							running
+								? "Agent 执行中..."
+								: "输入需求，如：打开百度、搜索美妆、采集小红书"
+						}
+						disabled={running || !currentSessionId}
+						onKeyDown={handleKeyDown}
+						className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none disabled:opacity-50"
+					/>
+					<button
+						onClick={sendMessage}
+						disabled={running || !currentSessionId}
+						className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors disabled:opacity-50"
+					>
+						{running ? "⏳" : t("chat.send")}
+					</button>
+				</div>
+
+				{/* 工具/插件选择 + 快捷输入 */}
+				<ToolPicker
+					selectedTools={selectedTools}
+					onToggle={toggleTool}
+					onClear={() => setSelectedTools([])}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function InlineAssets({ assets }: { assets: any[] }) {
+	return (
+		<div className="space-y-3">
+			{assets
+				.filter((a) => a.kind === "screenshot")
+				.slice(0, 1)
+				.map((s) => (
+					<img
+						key={s.id}
+						src={s.dataUrl || `/api/assets/${s.id}/download`}
+						alt="screenshot"
+						className="rounded-lg border border-[var(--color-border-primary)] max-w-full"
+					/>
+				))}
+
+			{assets.filter((a) => a.kind === "image" && a.path).length > 0 && (
+				<div className="grid grid-cols-4 gap-1">
+					{assets
+						.filter((a) => a.kind === "image" && a.path)
+						.slice(0, 8)
+						.map((img) => (
+							<img
+								key={img.id}
+								src={`/api/assets/${img.id}/download`}
+								alt={img.name}
+								className="rounded aspect-square object-cover border border-[var(--color-border-primary)]"
+							/>
+						))}
+				</div>
+			)}
+
+			{assets.filter((a) => ["csv", "json", "report"].includes(a.kind))
+				.length > 0 && (
+				<div className="space-y-1">
+					{assets
+						.filter((a) => ["csv", "json", "report"].includes(a.kind))
+						.map((f) => (
+							<a
+								key={f.id}
+								href={`/api/assets/${f.id}/download`}
+								download={f.name}
+								className="flex items-center gap-2 px-3 py-2 rounded hover:bg-[var(--color-bg-hover)] text-sm"
+							>
+								<span>
+									{f.kind === "csv"
+										? "📊"
+										: f.kind === "json"
+											? "📋"
+											: "📄"}
+								</span>
+								<span className="flex-1 truncate">{f.name}</span>
+								<span className="text-xs text-[var(--color-text-tertiary)]">
+									⬇
+								</span>
+							</a>
+						))}
+				</div>
+			)}
+		</div>
+	);
+}

package/templates/browser-agent/src/mainview/components/chat/CommandBar.tsx

@@ -0,0 +1,184 @@
+/**
+ * Command Bar — 直接执行 xbrowser 命令（不经 Agent）
+ *
+ * 用户可以输入 scrape/crawl/map/goto/title 等命令，直接调用
+ * browser.execXbrowser 执行。选中了标签页时自动注入 --tab 参数。
+ */
+
+import { useState, useRef } from "react";
+import { Terminal, Play, Loader2, AlertCircle, CheckCircle } from "lucide-react";
+import { apiClient } from "../../lib/api-client";
+import { useConnectionStore } from "../../stores/use-connection-store";
+import { networkBus } from "../../lib/network-bus";
+
+const QUICK_COMMANDS = [
+	{ label: "title", cmd: "title", desc: "页面标题" },
+	{ label: "url", cmd: "url", desc: "当前 URL" },
+	{ label: "screenshot", cmd: "screenshot", desc: "截图" },
+	{ label: "scrape", cmd: "scrape", desc: "采集页面" },
+	{ label: "map", cmd: "map", desc: "网站结构" },
+	{ label: "tab list", cmd: "tab list", desc: "标签页列表" },
+];
+
+interface CommandResult {
+	success: boolean;
+	data: unknown;
+	raw: string;
+	elapsed: number;
+}
+
+export function CommandBar() {
+	const [input, setInput] = useState("");
+	const [running, setRunning] = useState(false);
+	const [result, setResult] = useState<CommandResult | null>(null);
+	const [showResult, setShowResult] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const browserStatus = useConnectionStore((s) => s.browserStatus);
+	const selectedTabIndex = useConnectionStore((s) => s.selectedTabIndex);
+	const activeTabIndex = useConnectionStore((s) => s.activeTabIndex);
+
+	const isOnline = browserStatus === "online";
+	const effectiveTab = selectedTabIndex ?? activeTabIndex;
+
+	const execute = async (command: string): Promise<void> => {
+		const cmd = command.trim();
+		if (!cmd || running) return;
+
+		setRunning(true);
+		setShowResult(true);
+		setResult(null);
+		networkBus.emitRequest("browser.execXbrowser", { command: cmd, tabIndex: effectiveTab });
+
+		const t0 = performance.now();
+		try {
+			const res = await apiClient.call("browser.execXbrowser", {
+				command: cmd,
+				tabIndex: selectedTabIndex ?? undefined,
+			});
+			const elapsed = Math.round(performance.now() - t0);
+
+			const resultData = res.data;
+			const raw = JSON.stringify(resultData, null, 2);
+			setResult({
+				success: res.success,
+				data: resultData,
+				raw,
+				elapsed,
+			});
+			networkBus.emitResponse("browser.execXbrowser", elapsed);
+		} catch (err) {
+			const elapsed = Math.round(performance.now() - t0);
+			const errMsg = err instanceof Error ? err.message : String(err);
+			setResult({
+				success: false,
+				data: { error: errMsg },
+				raw: errMsg,
+				elapsed,
+			});
+			networkBus.emitResponse("browser.execXbrowser", elapsed);
+		} finally {
+			setRunning(false);
+		}
+	};
+
+	const handleSubmit = (e: React.FormEvent): void => {
+		e.preventDefault();
+		execute(input);
+	};
+
+	const handleQuickCmd = (cmd: string): void => {
+		setInput(cmd);
+		execute(cmd);
+	};
+
+	return (
+		<div className="border-b border-[var(--color-border-primary)] bg-[var(--color-bg-tertiary)]">
+			{/* 命令输入行 */}
+			<form onSubmit={handleSubmit} className="flex items-center gap-2 px-4 py-2">
+				<Terminal className="w-4 h-4 text-[var(--color-text-accent)] flex-shrink-0" />
+				<span className="text-[var(--color-text-tertiary)] text-xs font-mono flex-shrink-0">
+					xbrowser&gt;
+				</span>
+				<input
+					ref={inputRef}
+					type="text"
+					value={input}
+					onChange={(e) => setInput(e.target.value)}
+					placeholder={
+						isOnline
+							? `输入命令，如: scrape https://example.com${
+									selectedTabIndex !== null ? ` (作用于 #${selectedTabIndex})` : ""
+								}`
+							: "浏览器未连接，先连接 Chrome"
+					}
+					disabled={!isOnline || running}
+					className="flex-1 px-2 py-1.5 text-xs font-mono bg-[var(--color-bg-secondary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none disabled:opacity-50"
+				/>
+				{selectedTabIndex !== null && (
+					<span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-accent)]/20 text-[var(--color-text-accent)] flex-shrink-0">
+						--tab {selectedTabIndex}
+					</span>
+				)}
+				<button
+					type="submit"
+					disabled={!isOnline || running || !input.trim()}
+					className="px-3 py-1.5 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors disabled:opacity-50 flex items-center gap-1 flex-shrink-0"
+				>
+					{running ? (
+						<Loader2 className="w-3 h-3 animate-spin" />
+					) : (
+						<Play className="w-3 h-3" />
+					)}
+					执行
+				</button>
+			</form>
+
+			{/* 快捷命令 */}
+			<div className="flex gap-1 px-4 pb-2 flex-wrap">
+				{QUICK_COMMANDS.map((qc) => (
+					<button
+						key={qc.label}
+						onClick={() => handleQuickCmd(qc.cmd)}
+						disabled={!isOnline || running}
+						title={qc.desc}
+						className="px-2 py-0.5 text-[10px] font-mono bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded hover:border-[var(--color-accent)] hover:text-[var(--color-text-accent)] transition-colors disabled:opacity-50"
+					>
+						{qc.label}
+					</button>
+				))}
+			</div>
+
+			{/* 结果展示 */}
+			{showResult && result && (
+				<div className="px-4 pb-2">
+					<div className="rounded border border-[var(--color-border-secondary)] bg-[var(--color-bg-sidebar)] overflow-hidden">
+						{/* 结果头部 */}
+						<div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--color-border-secondary)] bg-[var(--color-bg-secondary)]">
+							<div className="flex items-center gap-2 text-xs">
+								{result.success ? (
+									<CheckCircle className="w-3 h-3 text-[var(--color-text-success)]" />
+								) : (
+									<AlertCircle className="w-3 h-3 text-[var(--color-text-error)]" />
+								)}
+								<span className={result.success ? "text-[var(--color-text-success)]" : "text-[var(--color-text-error)]"}>
+									{result.success ? "成功" : "失败"} · {result.elapsed}ms
+								</span>
+							</div>
+							<button
+								onClick={() => setShowResult(false)}
+								className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] text-xs"
+							>
+								关闭
+							</button>
+						</div>
+						{/* 结果内容 */}
+						<pre className="px-3 py-2 text-xs font-mono overflow-auto max-h-48 text-[var(--color-text-secondary)]">
+							{result.raw}
+						</pre>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

package/templates/browser-agent/src/mainview/components/chat/MessageBubble.tsx

@@ -0,0 +1,249 @@
+/**
+ * 消息气泡 — 用户消息右对齐，Agent 消息左对齐含轮次/工具/步骤
+ *
+ * 对应 PRD §4.3 流式渲染 + §5.2 消息气泡
+ */
+
+import type { AgentMessage, ToolCall, Turn } from "../../stores/use-chat-store";
+
+// ===== 工具元数据 =====
+const TOOL_META: Record<string, { icon: string; label: string }> = {
+	xbrowser: { icon: "🌐", label: "xbrowser" },
+	web_search: { icon: "🔎", label: "搜索" },
+	fetch_content: { icon: "📄", label: "抓取" },
+	bash: { icon: "⚡", label: "命令" },
+	todo: { icon: "📝", label: "规划" },
+};
+
+function describeCommand(input: string): string {
+	try {
+		const parsed = JSON.parse(input);
+		const cmd = parsed.command || "";
+		const firstWord = cmd.split(/\s+/)[0];
+		const cmdMeta: Record<string, string> = {
+			goto: "🧭 打开",
+			open: "🧭 打开",
+			scrape: "📡 采集",
+			crawl: "🕷️ 爬取",
+			screenshot: "📸 截图",
+			eval: "⚙️ 执行JS",
+			click: "👆 点击",
+			fill: "⌨️ 输入",
+			scroll: "⬇️ 滚动",
+			tab: "📋 标签页",
+			search: "🔍 搜索",
+		};
+		return cmdMeta[firstWord] || firstWord;
+	} catch {
+		return "";
+	}
+}
+
+function ToolCallCard({ call }: { call: ToolCall }) {
+	const meta = TOOL_META[call.tool] || { icon: "🔧", label: call.tool };
+	const isRunning = call.status === "running";
+
+	let displayLabel = meta.label;
+	let displayInput = call.input;
+	if (call.tool === "xbrowser") {
+		const desc = describeCommand(call.input);
+		if (desc) displayLabel = desc;
+		try {
+			displayInput = JSON.parse(call.input).command || "";
+		} catch {}
+	}
+
+	return (
+		<div
+			className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg mb-1 text-sm ${
+				isRunning ? "bg-[var(--color-bg-active)]" : "bg-[var(--color-bg-tertiary)]"
+			}`}
+		>
+			<span>{meta.icon}</span>
+			<span className="font-medium">{displayLabel}</span>
+			<span className="text-[var(--color-text-tertiary)] text-xs">
+				{call.tool}
+			</span>
+			{displayInput && (
+				<span className="text-[var(--color-text-tertiary)] text-xs flex-1 truncate">
+					{displayInput.slice(0, 80)}
+				</span>
+			)}
+			<span className="ml-auto">{isRunning ? "⏳" : "✓"}</span>
+		</div>
+	);
+}
+
+function TurnBlock({ turn }: { turn: Turn }) {
+	const isRunning = !turn.done;
+	const toolCount = (turn.toolCalls || []).length;
+	const hasText = !!(turn.text && turn.text.trim());
+
+	return (
+		<details
+			open={isRunning}
+			className="mb-2 rounded-lg border border-[var(--color-border-primary)] overflow-hidden"
+		>
+			<summary
+				className={`px-2.5 py-1.5 cursor-pointer text-xs font-medium flex items-center gap-1.5 ${
+					isRunning
+						? "bg-[var(--color-bg-active)]"
+						: "bg-[var(--color-bg-secondary)]"
+				}`}
+			>
+				<span>{isRunning ? "⚡" : "✓"}</span>
+				<span>第 {turn.turn} 轮</span>
+				{toolCount > 0 && (
+					<span className="text-[var(--color-text-tertiary)]">
+						· {toolCount} 个操作
+					</span>
+				)}
+				{hasText && (
+					<span className="text-[var(--color-text-tertiary)] ml-auto truncate max-w-[200px]">
+						{turn.text.slice(0, 40)}
+					</span>
+				)}
+			</summary>
+			<div className="p-2.5">
+				{turn.toolCalls.map((tc) => (
+					<ToolCallCard key={tc.id} call={tc} />
+				))}
+				{hasText && (
+					<div className="mt-1 text-sm whitespace-pre-wrap">
+						{turn.text}
+					</div>
+				)}
+			</div>
+		</details>
+	);
+}
+
+function stepIcon(status: string): string {
+	switch (status) {
+		case "done":
+			return "✅";
+		case "running":
+			return "⏳";
+		case "error":
+			return "❌";
+		default:
+			return "⏸️";
+	}
+}
+
+export function MessageBubble({
+	message,
+}: {
+	message: AgentMessage | { id: string; role: "user"; text: string; at: number };
+}) {
+	if (message.role === "user") {
+		return (
+			<div className="flex justify-end mb-4">
+				<div
+					className="max-w-[70%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed"
+					style={{
+						background: "linear-gradient(135deg, #8b5cf6, #3b82f6)",
+						color: "#fff",
+					}}
+				>
+					{message.text}
+				</div>
+			</div>
+		);
+	}
+
+	const m = message as AgentMessage;
+
+	return (
+		<div className="mb-4">
+			<div className="flex items-center gap-2 mb-2">
+				<span
+					className="w-7 h-7 rounded-full flex items-center justify-center text-sm text-white"
+					style={{ background: "var(--color-accent)" }}
+				>
+					◈
+				</span>
+				<span className="font-semibold text-sm">Agent</span>
+			</div>
+
+			{/* 思考过程（默认折叠） */}
+			{m.thinking && (
+				<details className="mb-2 text-xs text-[var(--color-text-tertiary)]">
+					<summary className="cursor-pointer mb-1">💭 思考过程</summary>
+					<div className="p-2 bg-[var(--color-bg-tertiary)] rounded-lg whitespace-pre-wrap text-xs leading-relaxed">
+						{m.thinking.slice(-800)}
+					</div>
+				</details>
+			)}
+
+			{/* 轮次展示 */}
+			{m.turns?.map((turn) => (
+				<TurnBlock key={turn.turn} turn={turn} />
+			))}
+
+			{/* 步骤清单 */}
+			{m.steps && m.steps.length > 0 && (
+				<div className="mb-2 p-2 bg-[var(--color-bg-tertiary)] rounded-lg text-xs">
+					{m.steps.map((step, i) => (
+						<div key={i} className="flex items-center gap-1.5 py-0.5">
+							<span>{stepIcon(step.status)}</span>
+							<span>{step.label}</span>
+							{step.detail && (
+								<span className="text-[var(--color-text-tertiary)]">
+									{step.detail}
+								</span>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+
+			{/* 摘要卡 */}
+			{m.summary && (
+				<div className="mb-2 p-3 rounded-lg border border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)]">
+					<div className="font-semibold text-sm mb-2">✅ 采集完成摘要</div>
+					<div className="grid grid-cols-2 gap-2 text-xs">
+						<div>
+							<div className="text-lg font-bold">{m.summary.noteCount}</div>
+							<div className="text-[var(--color-text-tertiary)]">笔记</div>
+						</div>
+						<div>
+							<div className="text-lg font-bold">{m.summary.imageCount}</div>
+							<div className="text-[var(--color-text-tertiary)]">图片</div>
+						</div>
+						<div>
+							<div className="text-lg font-bold">{m.summary.successRate}</div>
+							<div className="text-[var(--color-text-tertiary)]">成功率</div>
+						</div>
+						<div>
+							<div className="text-lg font-bold">
+								{fmtDuration(m.summary.durationMs)}
+							</div>
+							<div className="text-[var(--color-text-tertiary)]">耗时</div>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* 最终文本 */}
+			{m.text && (
+				<div className="text-sm leading-relaxed whitespace-pre-wrap">
+					{m.text}
+				</div>
+			)}
+
+			{/* 错误 */}
+			{m.error && (
+				<div className="p-2 rounded-lg text-sm bg-red-500/10 text-[var(--color-text-error)]">
+					❌ {m.error}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function fmtDuration(ms: number): string {
+	if (ms < 1000) return `${ms}ms`;
+	if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+	return `${Math.floor(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
+}