@vegintech/langchain-react-agent 0.0.25 → 0.0.26

package/dist/index.mjs

@@ -456,803 +456,336 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 	});
 };
 //#endregion
-//#region src/components/DebugPanel.tsx
-const isDevelopment = () => {
-	if (typeof process !== "undefined" && process.env) return process.env.NODE_ENV === "development";
-	const viteEnv = import.meta.env;
-	if (typeof import.meta !== "undefined" && viteEnv) return viteEnv.DEV === true || viteEnv.MODE === "development";
-	return false;
-};
-function DebugPanel({ messages, streamState, visible = true }) {
-	if (!isDevelopment() || !visible) return null;
-	const [isOpen, setIsOpen] = useState(false);
-	const [activeTab, setActiveTab] = useState("messages");
-	const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
-	const [buttonPos, setButtonPos] = useState({
-		x: 0,
-		y: 0
-	});
-	const [isDraggingButton, setIsDraggingButton] = useState(false);
-	const buttonDragRef = useRef(null);
-	const [dialogPos, setDialogPos] = useState({
-		x: 0,
-		y: 0
-	});
-	const [isDraggingDialog, setIsDraggingDialog] = useState(false);
-	const dialogDragRef = useRef(null);
-	const handleButtonMouseDown = useCallback((e) => {
-		e.preventDefault();
-		buttonDragRef.current = {
-			startX: e.clientX,
-			startY: e.clientY,
-			initialX: buttonPos.x,
-			initialY: buttonPos.y
-		};
-		setIsDraggingButton(true);
-	}, [buttonPos]);
-	const handleDialogMouseDown = useCallback((e) => {
-		if (!e.target.closest(".debug-panel-header")) return;
-		e.preventDefault();
-		dialogDragRef.current = {
-			startX: e.clientX,
-			startY: e.clientY,
-			initialX: dialogPos.x,
-			initialY: dialogPos.y
-		};
-		setIsDraggingDialog(true);
-	}, [dialogPos]);
+//#region src/hooks/useInterrupt.tsx
+/**
+* InterruptManager - 管理 Interrupt 状态的 Hook
+*
+* 封装 Interrupt 状态管理和处理逻辑，避免在 AgentChat 组件中臃肿
+*/
+function useInterrupt({ interrupt, config, onSubmit }) {
+	const [activeInterrupt, setActiveInterrupt] = useState(null);
+	const processedInterruptIdRef = useRef(null);
 	useEffect(() => {
-		const handleMouseMove = (e) => {
-			if (isDraggingButton && buttonDragRef.current) {
-				const dx = e.clientX - buttonDragRef.current.startX;
-				const dy = e.clientY - buttonDragRef.current.startY;
-				setButtonPos({
-					x: buttonDragRef.current.initialX + dx,
-					y: buttonDragRef.current.initialY + dy
-				});
-			}
-			if (isDraggingDialog && dialogDragRef.current) {
-				const dx = e.clientX - dialogDragRef.current.startX;
-				const dy = e.clientY - dialogDragRef.current.startY;
-				setDialogPos({
-					x: dialogDragRef.current.initialX + dx,
-					y: dialogDragRef.current.initialY + dy
-				});
+		if (interrupt) {
+			const interruptEvent = interrupt;
+			if (interruptEvent.id !== processedInterruptIdRef.current) {
+				processedInterruptIdRef.current = interruptEvent.id;
+				setActiveInterrupt(interruptEvent);
 			}
-		};
-		const handleMouseUp = () => {
-			setIsDraggingButton(false);
-			setIsDraggingDialog(false);
-			buttonDragRef.current = null;
-			dialogDragRef.current = null;
-		};
-		if (isDraggingButton || isDraggingDialog) {
-			document.addEventListener("mousemove", handleMouseMove);
-			document.addEventListener("mouseup", handleMouseUp);
-		}
-		return () => {
-			document.removeEventListener("mousemove", handleMouseMove);
-			document.removeEventListener("mouseup", handleMouseUp);
-		};
-	}, [isDraggingButton, isDraggingDialog]);
-	const formatJson = (data) => {
-		try {
-			return JSON.stringify(data, null, 2);
-		} catch {
-			return String(data);
+		} else {
+			processedInterruptIdRef.current = null;
+			setActiveInterrupt(null);
 		}
+	}, [interrupt?.id]);
+	const handleResolveInterrupt = useCallback((response) => {
+		onSubmit(null, { command: { resume: response } });
+		setActiveInterrupt(null);
+	}, [onSubmit]);
+	return {
+		activeInterrupt,
+		handleResolveInterrupt,
+		renderInterrupt: useCallback(() => {
+			if (!activeInterrupt || !config?.render) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: "agent-chat-interrupt",
+				children: config.render({
+					event: activeInterrupt,
+					resolve: handleResolveInterrupt
+				})
+			});
+		}, [
+			activeInterrupt,
+			config,
+			handleResolveInterrupt
+		])
 	};
-	const toggleRow = (index) => {
-		setExpandedRows((prev) => {
-			const next = new Set(prev);
-			if (next.has(index)) next.delete(index);
-			else next.add(index);
-			return next;
-		});
-	};
-	const getTypeTagStyle = (type) => {
-		const color = {
-			human: {
-				bg: "#e6f4ff",
-				color: "#0958d9"
-			},
-			ai: {
-				bg: "#f6ffed",
-				color: "#389e0d"
-			},
-			tool: {
-				bg: "#fff7e6",
-				color: "#d46b08"
-			},
-			system: {
-				bg: "#f9f0ff",
-				color: "#722ed1"
-			},
-			function: {
-				bg: "#fff2f0",
-				color: "#cf1322"
-			}
-		}[type || ""] || {
-			bg: "#f5f5f5",
-			color: "#666"
-		};
-		return {
-			display: "inline-block",
-			padding: "2px 8px",
-			borderRadius: "4px",
-			fontSize: "12px",
-			fontWeight: 500,
-			background: color.bg,
-			color: color.color
-		};
-	};
-	const formatContent = (content) => {
-		if (!content) return "";
-		if (Array.isArray(content)) return content.map((item) => typeof item === "string" ? item : JSON.stringify(item)).join("");
-		return String(content);
-	};
-	const renderMessageContent = (message) => {
-		const hasToolCalls = message.tool_calls && Array.isArray(message.tool_calls) && message.tool_calls.length > 0;
-		return /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				gap: "8px"
-			},
-			children: [message.content && /* @__PURE__ */ jsx("div", {
-				style: {
-					color: "#333",
-					lineHeight: 1.5,
-					wordBreak: "break-all"
-				},
-				children: formatContent(message.content)
-			}), hasToolCalls && /* @__PURE__ */ jsxs("div", {
-				style: {
-					marginTop: "4px",
-					padding: "8px",
-					background: "#f6ffed",
-					border: "1px solid #b7eb8f",
-					borderRadius: "6px"
-				},
-				children: [/* @__PURE__ */ jsxs("div", {
-					style: {
-						fontSize: "11px",
-						fontWeight: 600,
-						color: "#389e0d",
-						marginBottom: "6px",
-						display: "flex",
-						alignItems: "center",
-						gap: "4px"
-					},
-					children: [/* @__PURE__ */ jsx("span", { children: "🔧" }), /* @__PURE__ */ jsxs("span", { children: [
-						"Tool Calls (",
-						message.tool_calls.length,
-						")"
-					] })]
-				}), /* @__PURE__ */ jsx("pre", {
-					style: {
-						...preStyle,
-						background: "#fff",
-						border: "1px solid #d9f7be",
-						maxHeight: "200px",
-						fontSize: "11px"
-					},
-					children: formatJson(message.tool_calls)
-				})]
-			})]
+}
+//#endregion
+//#region src/hooks/useToolExecution.ts
+/**
+* useToolExecution - 管理前端工具执行的 Hook
+*
+* 职责：
+* 1. 管理工具执行状态
+* 2. 自动执行前端工具（避免重复执行）
+* 3. 通知外部执行状态变化
+* 4. 支持批量提交工具结果
+*/
+function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResultsBatch, completedToolResults }) {
+	const executedCallsRef = useRef(/* @__PURE__ */ new Set());
+	const executingCallsRef = useRef(/* @__PURE__ */ new Set());
+	const pendingNotifiedRef = useRef(/* @__PURE__ */ new Set());
+	const notifiedCompletedRef = useRef(/* @__PURE__ */ new Set());
+	const batchCallIdsRef = useRef(/* @__PURE__ */ new Set());
+	const batchResultsRef = useRef(/* @__PURE__ */ new Map());
+	const isProcessingRef = useRef(false);
+	const batchSubmittedRef = useRef(false);
+	useEffect(() => {
+		if (!completedToolResults || completedToolResults.size === 0) return;
+		completedToolResults.forEach((result, callId) => {
+			if (notifiedCompletedRef.current.has(callId)) return;
+			notifiedCompletedRef.current.add(callId);
+			executedCallsRef.current.add(callId);
+			const call = toolCalls.find((c) => c.id === callId);
+			if (call) onExecutionChange?.({
+				callId,
+				name: call.name,
+				args: call.args,
+				status: "success",
+				result
+			});
 		});
+	}, [completedToolResults, toolCalls]);
+	/**
+	* 检查批次是否完成并提交结果
+	*/
+	const checkAndSubmitBatch = useCallback(() => {
+		if (batchSubmittedRef.current) return;
+		if (Array.from(batchCallIdsRef.current).every((callId) => executedCallsRef.current.has(callId)) && batchCallIdsRef.current.size > 0) {
+			batchSubmittedRef.current = true;
+			const results = Array.from(batchResultsRef.current.values());
+			if (results.length > 0) onToolResultsBatch?.(results);
+			batchCallIdsRef.current.clear();
+			batchResultsRef.current.clear();
+		}
+	}, [onToolResultsBatch]);
+	/**
+	* 执行单个前端工具
+	*/
+	const executeFrontendTool = useCallback(async (tool, call) => {
+		const callId = call.id;
+		executingCallsRef.current.add(callId);
+		onExecutionChange?.({
+			callId,
+			name: call.name,
+			args: call.args,
+			status: "running"
+		});
+		try {
+			const result = await tool.execute(call.args);
+			onExecutionChange?.({
+				callId,
+				name: call.name,
+				args: call.args,
+				status: "success",
+				result
+			});
+			batchResultsRef.current.set(callId, {
+				callId,
+				name: call.name,
+				result
+			});
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			onExecutionChange?.({
+				callId,
+				name: call.name,
+				args: call.args,
+				status: "error",
+				error: errorMessage
+			});
+			batchResultsRef.current.set(callId, {
+				callId,
+				name: call.name,
+				result: { error: errorMessage }
+			});
+		} finally {
+			executingCallsRef.current.delete(callId);
+			executedCallsRef.current.add(callId);
+			checkAndSubmitBatch();
+		}
+	}, [onExecutionChange, checkAndSubmitBatch]);
+	/**
+	* 处理工具调用
+	*/
+	const processToolCalls = useCallback(async () => {
+		if (!tools) return;
+		if (isProcessingRef.current) return;
+		const frontendCalls = [];
+		for (const call of toolCalls) {
+			const callId = call.id;
+			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId)) continue;
+			const tool = findTool(tools, call.name);
+			if (isLoading) {
+				if (!pendingNotifiedRef.current.has(callId)) {
+					pendingNotifiedRef.current.add(callId);
+					onExecutionChange?.({
+						callId,
+						name: call.name,
+						args: call.args,
+						status: "pending"
+					});
+				}
+				continue;
+			}
+			if (!tool) {
+				onExecutionChange?.({
+					callId,
+					name: call.name,
+					args: call.args,
+					status: "pending"
+				});
+				continue;
+			}
+			if (isFrontendTool(tool)) frontendCalls.push({
+				tool,
+				call
+			});
+			else onExecutionChange?.({
+				callId,
+				name: call.name,
+				args: call.args,
+				status: "pending"
+			});
+		}
+		if (frontendCalls.length > 0) {
+			batchSubmittedRef.current = false;
+			isProcessingRef.current = true;
+			batchCallIdsRef.current = new Set(frontendCalls.map(({ call }) => call.id));
+			batchResultsRef.current = /* @__PURE__ */ new Map();
+			try {
+				await Promise.all(frontendCalls.map(({ tool, call }) => executeFrontendTool(tool, call)));
+			} finally {
+				isProcessingRef.current = false;
+			}
+		}
+	}, [
+		tools,
+		toolCalls,
+		isLoading,
+		executeFrontendTool,
+		onExecutionChange
+	]);
+	useEffect(() => {
+		processToolCalls();
+	}, [useMemo(() => {
+		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
+	}, [toolCalls]), isLoading]);
+}
+//#endregion
+//#region src/utils/messageUtils.ts
+/**
+* 从 BaseMessage 中提取 tool_calls
+*/
+function extractToolCalls(message) {
+	if ("tool_calls" in message && Array.isArray(message.tool_calls)) return message.tool_calls.map((tc) => ({
+		id: tc.id || crypto.randomUUID(),
+		name: tc.name || tc.function?.name || "",
+		args: typeof tc.function?.args === "string" ? JSON.parse(tc.function.args) : tc.args || {}
+	}));
+}
+/**
+* 从 BaseMessage 中提取原始内容
+* 保留原始结构：字符串或内容块数组
+*/
+function extractContent(message) {
+	if (typeof message.content === "string") return message.content;
+	if (Array.isArray(message.content)) return message.content.map((c) => {
+		if (typeof c === "object" && c !== null) return c;
+		return {
+			type: "text",
+			text: String(c)
+		};
+	});
+	return "";
+}
+/**
+* 从 MessageContent 中提取纯文本内容（用于渲染）
+*/
+function extractTextFromContent(content) {
+	if (typeof content === "string") return content;
+	return content.map((block) => {
+		if (block.type === "text") return block.text;
+		return "";
+	}).join("");
+}
+/**
+* 将 BaseMessage 转换为 ChatMessage
+*/
+function toChatMessage(message, toolResults) {
+	const additionalKwargs = message.additional_kwargs || {};
+	if (message.type === "tool") return null;
+	if (message.type === "system") return null;
+	let msgType = "ai";
+	if (message.type === "human") msgType = "human";
+	const toolCalls = extractToolCalls(message);
+	let toolCallsWithResult = toolCalls;
+	if (toolCalls) toolCallsWithResult = toolCalls.map((tc) => ({
+		...tc,
+		result: toolResults.get(tc.id)
+	}));
+	const reasoningContent = additionalKwargs.reasoning_content;
+	return {
+		id: message.id || crypto.randomUUID(),
+		type: msgType,
+		content: extractContent(message),
+		name: message.name,
+		additional_kwargs: additionalKwargs,
+		reasoningContent,
+		toolCalls: toolCallsWithResult
 	};
-	const buttonStyle = {
-		position: "fixed",
-		right: `${20 - buttonPos.x}px`,
-		bottom: `${20 - buttonPos.y}px`,
-		width: "48px",
-		height: "48px",
-		borderRadius: "50%",
-		background: "#1677ff",
-		color: "#fff",
-		border: "none",
-		cursor: isDraggingButton ? "grabbing" : "grab",
-		boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: "20px",
-		zIndex: 9998,
-		transition: isDraggingButton ? "none" : "box-shadow 0.2s",
-		userSelect: "none"
-	};
-	const dialogStyle = {
-		position: "fixed",
-		left: "50%",
-		top: "50%",
-		transform: `translate(calc(-50% + ${dialogPos.x}px), calc(-50% + ${dialogPos.y}px))`,
-		width: "1000px",
-		maxWidth: "90vw",
-		height: "650px",
-		maxHeight: "85vh",
-		background: "#fff",
-		borderRadius: "12px",
-		boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
-		zIndex: 9999,
-		display: "flex",
-		flexDirection: "column",
-		overflow: "hidden",
-		cursor: isDraggingDialog ? "grabbing" : "default"
-	};
-	const headerStyle = {
-		padding: "12px 16px",
-		background: "#f5f5f5",
-		borderBottom: "1px solid #e8e8e8",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "space-between",
-		cursor: isDraggingDialog ? "grabbing" : "grab"
+}
+/**
+* 预处理消息列表：建立 tool_call_id -> result 映射，并过滤 ToolMessage
+*/
+function processMessages(rawMessages) {
+	const toolResults = /* @__PURE__ */ new Map();
+	for (const message of rawMessages) if (message.type === "tool") {
+		const toolCallId = message.tool_call_id || message.additional_kwargs?.tool_call_id;
+		if (toolCallId) {
+			const textContent = extractTextFromContent(extractContent(message));
+			try {
+				toolResults.set(toolCallId, JSON.parse(textContent));
+			} catch {
+				toolResults.set(toolCallId, textContent);
+			}
+		}
+	}
+	const messages = [];
+	for (const message of rawMessages) {
+		const chatMessage = toChatMessage(message, toolResults);
+		if (chatMessage) messages.push(chatMessage);
+	}
+	return {
+		messages,
+		toolResults
 	};
-	const tabContainerStyle = {
-		display: "flex",
-		gap: "8px"
-	};
-	const getTabStyle = (isActive) => ({
-		padding: "6px 16px",
-		borderRadius: "6px",
-		border: "none",
-		background: isActive ? "#1677ff" : "transparent",
-		color: isActive ? "#fff" : "#666",
-		cursor: "pointer",
-		fontSize: "14px",
-		transition: "all 0.2s"
-	});
-	const closeButtonStyle = {
-		width: "28px",
-		height: "28px",
-		borderRadius: "50%",
-		border: "none",
-		background: "#ff4d4f",
-		color: "#fff",
-		cursor: "pointer",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: "16px",
-		transition: "background 0.2s"
-	};
-	const contentStyle = {
-		flex: 1,
-		overflow: "auto",
-		padding: "16px",
-		background: "#fafafa"
-	};
-	const preStyle = {
-		margin: 0,
-		padding: "12px",
-		background: "#f8f9fa",
-		color: "#333",
-		borderRadius: "8px",
-		fontSize: "12px",
-		fontFamily: "\"Fira Code\", \"Monaco\", \"Consolas\", monospace",
-		lineHeight: 1.5,
-		overflow: "auto",
-		whiteSpace: "pre-wrap",
-		wordBreak: "break-word",
-		border: "1px solid #e8e8e8"
-	};
-	const statsStyle = {
-		padding: "8px 12px",
-		background: "#e6f4ff",
-		borderRadius: "6px",
-		marginBottom: "12px",
-		fontSize: "13px",
-		color: "#0958d9"
-	};
-	const tableStyle = {
-		width: "100%",
-		borderCollapse: "collapse",
-		fontSize: "13px",
-		background: "#fff",
-		borderRadius: "8px",
-		overflow: "hidden",
-		boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
-	};
-	const tableHeaderStyle = {
-		background: "#f5f5f5",
-		fontWeight: 600,
-		color: "#333",
-		textAlign: "left",
-		padding: "10px 12px",
-		borderBottom: "1px solid #e8e8e8",
-		whiteSpace: "nowrap"
-	};
-	const tableCellStyle = {
-		padding: "10px 12px",
-		borderBottom: "1px solid #f0f0f0",
-		verticalAlign: "top"
-	};
-	const expandButtonStyle = {
-		width: "20px",
-		height: "20px",
-		border: "none",
-		background: "transparent",
-		cursor: "pointer",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: "12px",
-		color: "#666",
-		borderRadius: "4px",
-		transition: "background 0.2s"
-	};
-	const expandedRowStyle = { background: "#fafafa" };
-	const jsonContainerStyle = {
-		padding: "12px",
-		background: "#fff",
-		borderRadius: "6px",
-		margin: "8px 0",
-		border: "1px solid #e8e8e8"
-	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-		style: buttonStyle,
-		onMouseDown: handleButtonMouseDown,
-		onClick: () => !isDraggingButton && setIsOpen(true),
-		title: "打开调试面板",
-		children: "🐛"
-	}), isOpen && /* @__PURE__ */ jsxs("div", {
-		style: dialogStyle,
-		onMouseDown: handleDialogMouseDown,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "debug-panel-header",
-			style: headerStyle,
-			children: [/* @__PURE__ */ jsxs("div", {
-				style: tabContainerStyle,
-				children: [/* @__PURE__ */ jsxs("button", {
-					style: getTabStyle(activeTab === "messages"),
-					onClick: () => setActiveTab("messages"),
-					children: [
-						"Messages (",
-						messages.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx("button", {
-					style: getTabStyle(activeTab === "state"),
-					onClick: () => setActiveTab("state"),
-					children: "State"
-				})]
-			}), /* @__PURE__ */ jsx("button", {
-				style: closeButtonStyle,
-				onClick: () => setIsOpen(false),
-				title: "关闭",
-				children: "×"
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			style: contentStyle,
-			children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-				style: statsStyle,
-				children: [
-					"共 ",
-					messages.length,
-					" 条消息"
-				]
-			}), /* @__PURE__ */ jsxs("table", {
-				style: tableStyle,
-				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", { style: {
-						...tableHeaderStyle,
-						width: "30px"
-					} }),
-					/* @__PURE__ */ jsx("th", {
-						style: {
-							...tableHeaderStyle,
-							width: "60px"
-						},
-						children: "类型"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						style: tableHeaderStyle,
-						children: "内容"
-					})
-				] }) }), /* @__PURE__ */ jsx("tbody", { children: messages.map((msg, index) => {
-					const message = msg;
-					const isExpanded = expandedRows.has(index);
-					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
-						style: {
-							cursor: "pointer",
-							transition: "background 0.2s"
-						},
-						onClick: () => toggleRow(index),
-						onMouseEnter: (e) => {
-							e.currentTarget.style.background = "#f5f5f5";
-						},
-						onMouseLeave: (e) => {
-							e.currentTarget.style.background = "transparent";
-						},
-						children: [
-							/* @__PURE__ */ jsx("td", {
-								style: tableCellStyle,
-								children: /* @__PURE__ */ jsx("button", {
-									style: expandButtonStyle,
-									onClick: (e) => {
-										e.stopPropagation();
-										toggleRow(index);
-									},
-									children: isExpanded ? "▼" : "▶"
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								style: tableCellStyle,
-								children: /* @__PURE__ */ jsx("span", {
-									style: getTypeTagStyle(message.type),
-									children: message.type || "unknown"
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								style: tableCellStyle,
-								children: renderMessageContent(message)
-							})
-						]
-					}, index), isExpanded && /* @__PURE__ */ jsx("tr", {
-						style: expandedRowStyle,
-						children: /* @__PURE__ */ jsx("td", {
-							colSpan: 3,
-							style: {
-								padding: 0,
-								borderBottom: "1px solid #e8e8e8"
-							},
-							children: /* @__PURE__ */ jsx("div", {
-								style: jsonContainerStyle,
-								children: /* @__PURE__ */ jsx("pre", {
-									style: {
-										...preStyle,
-										margin: 0,
-										maxHeight: "300px",
-										overflow: "auto"
-									},
-									children: formatJson(message)
-								})
-							})
-						})
-					})] });
-				}) })]
-			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-				style: statsStyle,
-				children: ["State 键数量: ", Object.keys(streamState).length]
-			}), /* @__PURE__ */ jsx("pre", {
-				style: preStyle,
-				children: formatJson(streamState)
-			})] })
-		})]
-	})] });
 }
 //#endregion
-//#region src/hooks/useInterrupt.tsx
-/**
-* InterruptManager - 管理 Interrupt 状态的 Hook
-*
-* 封装 Interrupt 状态管理和处理逻辑，避免在 AgentChat 组件中臃肿
-*/
-function useInterrupt({ interrupt, config, onSubmit }) {
-	const [activeInterrupt, setActiveInterrupt] = useState(null);
-	const processedInterruptIdRef = useRef(null);
-	useEffect(() => {
-		if (interrupt) {
-			const interruptEvent = interrupt;
-			if (interruptEvent.id !== processedInterruptIdRef.current) {
-				processedInterruptIdRef.current = interruptEvent.id;
-				setActiveInterrupt(interruptEvent);
-			}
-		} else {
-			processedInterruptIdRef.current = null;
-			setActiveInterrupt(null);
-		}
-	}, [interrupt?.id]);
-	const handleResolveInterrupt = useCallback((response) => {
-		onSubmit(null, { command: { resume: response } });
-		setActiveInterrupt(null);
-	}, [onSubmit]);
-	return {
-		activeInterrupt,
-		handleResolveInterrupt,
-		renderInterrupt: useCallback(() => {
-			if (!activeInterrupt || !config?.render) return null;
-			return /* @__PURE__ */ jsx("div", {
-				className: "agent-chat-interrupt",
-				children: config.render({
-					event: activeInterrupt,
-					resolve: handleResolveInterrupt
-				})
-			});
-		}, [
-			activeInterrupt,
-			config,
-			handleResolveInterrupt
-		])
-	};
+//#region src/utils/injectStyles.ts
+const styles = `
+/* Agent Chat Container */
+.agent-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: transparent;
+  overflow: hidden;
 }
-//#endregion
-//#region src/hooks/useToolExecution.ts
-/**
-* useToolExecution - 管理前端工具执行的 Hook
-*
-* 职责：
-* 1. 管理工具执行状态
-* 2. 自动执行前端工具（避免重复执行）
-* 3. 通知外部执行状态变化
-* 4. 支持批量提交工具结果
-*/
-function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResultsBatch, completedToolResults }) {
-	const executedCallsRef = useRef(/* @__PURE__ */ new Set());
-	const executingCallsRef = useRef(/* @__PURE__ */ new Set());
-	const pendingNotifiedRef = useRef(/* @__PURE__ */ new Set());
-	const notifiedCompletedRef = useRef(/* @__PURE__ */ new Set());
-	const batchCallIdsRef = useRef(/* @__PURE__ */ new Set());
-	const batchResultsRef = useRef(/* @__PURE__ */ new Map());
-	const isProcessingRef = useRef(false);
-	const batchSubmittedRef = useRef(false);
-	useEffect(() => {
-		if (!completedToolResults || completedToolResults.size === 0) return;
-		completedToolResults.forEach((result, callId) => {
-			if (notifiedCompletedRef.current.has(callId)) return;
-			notifiedCompletedRef.current.add(callId);
-			executedCallsRef.current.add(callId);
-			const call = toolCalls.find((c) => c.id === callId);
-			if (call) onExecutionChange?.({
-				callId,
-				name: call.name,
-				args: call.args,
-				status: "success",
-				result
-			});
-		});
-	}, [completedToolResults, toolCalls]);
-	/**
-	* 检查批次是否完成并提交结果
-	*/
-	const checkAndSubmitBatch = useCallback(() => {
-		if (batchSubmittedRef.current) return;
-		if (Array.from(batchCallIdsRef.current).every((callId) => executedCallsRef.current.has(callId)) && batchCallIdsRef.current.size > 0) {
-			batchSubmittedRef.current = true;
-			const results = Array.from(batchResultsRef.current.values());
-			if (results.length > 0) onToolResultsBatch?.(results);
-			batchCallIdsRef.current.clear();
-			batchResultsRef.current.clear();
-		}
-	}, [onToolResultsBatch]);
-	/**
-	* 执行单个前端工具
-	*/
-	const executeFrontendTool = useCallback(async (tool, call) => {
-		const callId = call.id;
-		executingCallsRef.current.add(callId);
-		onExecutionChange?.({
-			callId,
-			name: call.name,
-			args: call.args,
-			status: "running"
-		});
-		try {
-			const result = await tool.execute(call.args);
-			onExecutionChange?.({
-				callId,
-				name: call.name,
-				args: call.args,
-				status: "success",
-				result
-			});
-			batchResultsRef.current.set(callId, {
-				callId,
-				name: call.name,
-				result
-			});
-		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : String(error);
-			onExecutionChange?.({
-				callId,
-				name: call.name,
-				args: call.args,
-				status: "error",
-				error: errorMessage
-			});
-			batchResultsRef.current.set(callId, {
-				callId,
-				name: call.name,
-				result: { error: errorMessage }
-			});
-		} finally {
-			executingCallsRef.current.delete(callId);
-			executedCallsRef.current.add(callId);
-			checkAndSubmitBatch();
-		}
-	}, [onExecutionChange, checkAndSubmitBatch]);
-	/**
-	* 处理工具调用
-	*/
-	const processToolCalls = useCallback(async () => {
-		if (!tools) return;
-		if (isProcessingRef.current) return;
-		const frontendCalls = [];
-		for (const call of toolCalls) {
-			const callId = call.id;
-			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId)) continue;
-			const tool = findTool(tools, call.name);
-			if (isLoading) {
-				if (!pendingNotifiedRef.current.has(callId)) {
-					pendingNotifiedRef.current.add(callId);
-					onExecutionChange?.({
-						callId,
-						name: call.name,
-						args: call.args,
-						status: "pending"
-					});
-				}
-				continue;
-			}
-			if (!tool) {
-				onExecutionChange?.({
-					callId,
-					name: call.name,
-					args: call.args,
-					status: "pending"
-				});
-				continue;
-			}
-			if (isFrontendTool(tool)) frontendCalls.push({
-				tool,
-				call
-			});
-			else onExecutionChange?.({
-				callId,
-				name: call.name,
-				args: call.args,
-				status: "pending"
-			});
-		}
-		if (frontendCalls.length > 0) {
-			batchSubmittedRef.current = false;
-			isProcessingRef.current = true;
-			batchCallIdsRef.current = new Set(frontendCalls.map(({ call }) => call.id));
-			batchResultsRef.current = /* @__PURE__ */ new Map();
-			try {
-				await Promise.all(frontendCalls.map(({ tool, call }) => executeFrontendTool(tool, call)));
-			} finally {
-				isProcessingRef.current = false;
-			}
-		}
-	}, [
-		tools,
-		toolCalls,
-		isLoading,
-		executeFrontendTool,
-		onExecutionChange
-	]);
-	useEffect(() => {
-		processToolCalls();
-	}, [useMemo(() => {
-		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
-	}, [toolCalls]), isLoading]);
+
+/* Message List */
+.agent-message-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
-//#endregion
-//#region src/utils/messageUtils.ts
-/**
-* 从 BaseMessage 中提取 tool_calls
-*/
-function extractToolCalls(message) {
-	if ("tool_calls" in message && Array.isArray(message.tool_calls)) return message.tool_calls.map((tc) => ({
-		id: tc.id || crypto.randomUUID(),
-		name: tc.name || tc.function?.name || "",
-		args: typeof tc.function?.args === "string" ? JSON.parse(tc.function.args) : tc.args || {}
-	}));
+
+.agent-message-list .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-/**
-* 从 BaseMessage 中提取原始内容
-* 保留原始结构：字符串或内容块数组
-*/
-function extractContent(message) {
-	if (typeof message.content === "string") return message.content;
-	if (Array.isArray(message.content)) return message.content.map((c) => {
-		if (typeof c === "object" && c !== null) return c;
-		return {
-			type: "text",
-			text: String(c)
-		};
-	});
-	return "";
+
+
+
+.agent-message-list .ant-think-status-text {
+  font-size: 13px;
 }
-/**
-* 从 MessageContent 中提取纯文本内容（用于渲染）
-*/
-function extractTextFromContent(content) {
-	if (typeof content === "string") return content;
-	return content.map((block) => {
-		if (block.type === "text") return block.text;
-		return "";
-	}).join("");
-}
-/**
-* 将 BaseMessage 转换为 ChatMessage
-*/
-function toChatMessage(message, toolResults) {
-	const additionalKwargs = message.additional_kwargs || {};
-	if (message.type === "tool") return null;
-	if (message.type === "system") return null;
-	let msgType = "ai";
-	if (message.type === "human") msgType = "human";
-	const toolCalls = extractToolCalls(message);
-	let toolCallsWithResult = toolCalls;
-	if (toolCalls) toolCallsWithResult = toolCalls.map((tc) => ({
-		...tc,
-		result: toolResults.get(tc.id)
-	}));
-	const reasoningContent = additionalKwargs.reasoning_content;
-	return {
-		id: message.id || crypto.randomUUID(),
-		type: msgType,
-		content: extractContent(message),
-		name: message.name,
-		additional_kwargs: additionalKwargs,
-		reasoningContent,
-		toolCalls: toolCallsWithResult
-	};
-}
-/**
-* 预处理消息列表：建立 tool_call_id -> result 映射，并过滤 ToolMessage
-*/
-function processMessages(rawMessages) {
-	const toolResults = /* @__PURE__ */ new Map();
-	for (const message of rawMessages) if (message.type === "tool") {
-		const toolCallId = message.tool_call_id || message.additional_kwargs?.tool_call_id;
-		if (toolCallId) {
-			const textContent = extractTextFromContent(extractContent(message));
-			try {
-				toolResults.set(toolCallId, JSON.parse(textContent));
-			} catch {
-				toolResults.set(toolCallId, textContent);
-			}
-		}
-	}
-	const messages = [];
-	for (const message of rawMessages) {
-		const chatMessage = toChatMessage(message, toolResults);
-		if (chatMessage) messages.push(chatMessage);
-	}
-	return {
-		messages,
-		toolResults
-	};
-}
-//#endregion
-//#region src/utils/injectStyles.ts
-const styles = `
-/* Agent Chat Container */
-.agent-chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-/* Message List */
-.agent-message-list {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.agent-message-list .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
-
-.agent-message-list .ant-think-status-text {
-  font-size: 13px;
-}
-
-.agent-message-list table {
-  border-collapse: collapse;
-  width: 100%;
+
+.agent-message-list table {
+  border-collapse: collapse;
+  width: 100%;
 }
 
 .agent-message-list th,
@@ -1349,7 +882,7 @@ function injectStyles() {
 //#endregion
 //#region src/components/AgentChat.tsx
 injectStyles();
-const AgentChat = forwardRef(({ stream, className = "", tools, contexts, messageConfig, inputConfig, interruptConfig, agentState, showDebug, welcome }, ref) => {
+const AgentChat = forwardRef(({ stream, className = "", tools, contexts, messageConfig, inputConfig, interruptConfig, agentState, welcome }, ref) => {
 	const { onPreSend, ...chatInputConfig } = inputConfig || {};
 	const chatInputRef = useRef(null);
 	useImperativeHandle(ref, () => ({
@@ -1358,8 +891,12 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 		clearInput: () => chatInputRef.current?.clear?.(),
 		focusInput: () => chatInputRef.current?.focus?.()
 	}));
+	const interruptEvent = stream.interrupt;
 	const { renderInterrupt: interruptRender } = useInterrupt({
-		interrupt: stream.interrupt,
+		interrupt: interruptEvent ? {
+			value: interruptEvent.value,
+			id: interruptEvent.id
+		} : null,
 		config: interruptConfig,
 		onSubmit: stream.submit
 	});
@@ -1451,37 +988,29 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 	const shouldRenderWelcome = messages.length === 0 && !isLoading && welcome;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,
-		children: [
-			shouldRenderWelcome ? /* @__PURE__ */ jsx("div", {
-				className: "agent-message-list agent-chat-welcome",
-				children: welcome
-			}) : /* @__PURE__ */ jsx(MessageList, {
-				messages,
-				isLoading: stream.isLoading,
-				tools,
-				toolExecutions,
-				components: messageConfig?.components,
-				securityConfig: {
-					allowedTags: messageConfig?.allowedTags,
-					literalTagContent: messageConfig?.literalTagContent
-				},
-				loadingColor: messageConfig?.loadingColor,
-				interruptRender
-			}),
-			/* @__PURE__ */ jsx(ChatInput, {
-				ref: chatInputRef,
-				onSend: handleSend,
-				onStop: handleStop,
-				isLoading,
-				className: "agent-chat-input",
-				...chatInputConfig
-			}),
-			/* @__PURE__ */ jsx(DebugPanel, {
-				messages: stream.messages,
-				streamState: stream.values || {},
-				visible: showDebug
-			})
-		]
+		children: [shouldRenderWelcome ? /* @__PURE__ */ jsx("div", {
+			className: "agent-message-list agent-chat-welcome",
+			children: welcome
+		}) : /* @__PURE__ */ jsx(MessageList, {
+			messages,
+			isLoading: stream.isLoading,
+			tools,
+			toolExecutions,
+			components: messageConfig?.components,
+			securityConfig: {
+				allowedTags: messageConfig?.allowedTags,
+				literalTagContent: messageConfig?.literalTagContent
+			},
+			loadingColor: messageConfig?.loadingColor,
+			interruptRender
+		}), /* @__PURE__ */ jsx(ChatInput, {
+			ref: chatInputRef,
+			onSend: handleSend,
+			onStop: handleStop,
+			isLoading,
+			className: "agent-chat-input",
+			...chatInputConfig
+		})]
 	});
 });
 AgentChat.displayName = "AgentChat";
@@ -1502,6 +1031,474 @@ const ToolCard = ({ children, style, ...rest }) => {
 	}), children] });
 };
 //#endregion
+//#region src/components/DebugPanel.tsx
+const isDevelopment = () => {
+	if (typeof process !== "undefined" && process.env) return process.env.NODE_ENV === "development";
+	const viteEnv = import.meta.env;
+	if (typeof import.meta !== "undefined" && viteEnv) return viteEnv.DEV === true || viteEnv.MODE === "development";
+	return false;
+};
+function DebugPanel({ streamState, visible = true }) {
+	if (!isDevelopment() || !visible) return null;
+	const streamMessages = streamState.messages || [];
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeTab, setActiveTab] = useState("messages");
+	const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+	const [buttonPos, setButtonPos] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isDraggingButton, setIsDraggingButton] = useState(false);
+	const buttonDragRef = useRef(null);
+	const [dialogPos, setDialogPos] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isDraggingDialog, setIsDraggingDialog] = useState(false);
+	const dialogDragRef = useRef(null);
+	const handleButtonMouseDown = useCallback((e) => {
+		e.preventDefault();
+		buttonDragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			initialX: buttonPos.x,
+			initialY: buttonPos.y
+		};
+		setIsDraggingButton(true);
+	}, [buttonPos]);
+	const handleDialogMouseDown = useCallback((e) => {
+		if (!e.target.closest(".debug-panel-header")) return;
+		e.preventDefault();
+		dialogDragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			initialX: dialogPos.x,
+			initialY: dialogPos.y
+		};
+		setIsDraggingDialog(true);
+	}, [dialogPos]);
+	useEffect(() => {
+		const handleMouseMove = (e) => {
+			if (isDraggingButton && buttonDragRef.current) {
+				const dx = e.clientX - buttonDragRef.current.startX;
+				const dy = e.clientY - buttonDragRef.current.startY;
+				setButtonPos({
+					x: buttonDragRef.current.initialX + dx,
+					y: buttonDragRef.current.initialY + dy
+				});
+			}
+			if (isDraggingDialog && dialogDragRef.current) {
+				const dx = e.clientX - dialogDragRef.current.startX;
+				const dy = e.clientY - dialogDragRef.current.startY;
+				setDialogPos({
+					x: dialogDragRef.current.initialX + dx,
+					y: dialogDragRef.current.initialY + dy
+				});
+			}
+		};
+		const handleMouseUp = () => {
+			setIsDraggingButton(false);
+			setIsDraggingDialog(false);
+			buttonDragRef.current = null;
+			dialogDragRef.current = null;
+		};
+		if (isDraggingButton || isDraggingDialog) {
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+		}
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isDraggingButton, isDraggingDialog]);
+	const formatJson = (data) => {
+		try {
+			return JSON.stringify(data, null, 2);
+		} catch {
+			return String(data);
+		}
+	};
+	const toggleRow = (index) => {
+		setExpandedRows((prev) => {
+			const next = new Set(prev);
+			if (next.has(index)) next.delete(index);
+			else next.add(index);
+			return next;
+		});
+	};
+	const getTypeTagStyle = (type) => {
+		const color = {
+			human: {
+				bg: "#e6f4ff",
+				color: "#0958d9"
+			},
+			ai: {
+				bg: "#f6ffed",
+				color: "#389e0d"
+			},
+			tool: {
+				bg: "#fff7e6",
+				color: "#d46b08"
+			},
+			system: {
+				bg: "#f9f0ff",
+				color: "#722ed1"
+			},
+			function: {
+				bg: "#fff2f0",
+				color: "#cf1322"
+			}
+		}[type || ""] || {
+			bg: "#f5f5f5",
+			color: "#666"
+		};
+		return {
+			display: "inline-block",
+			padding: "2px 8px",
+			borderRadius: "4px",
+			fontSize: "12px",
+			fontWeight: 500,
+			background: color.bg,
+			color: color.color
+		};
+	};
+	const formatContent = (content) => {
+		if (!content) return "";
+		if (Array.isArray(content)) return content.map((item) => typeof item === "string" ? item : JSON.stringify(item)).join("");
+		return String(content);
+	};
+	const renderMessageContent = (message) => {
+		const hasToolCalls = message.tool_calls && Array.isArray(message.tool_calls) && message.tool_calls.length > 0;
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "8px"
+			},
+			children: [message.content && /* @__PURE__ */ jsx("div", {
+				style: {
+					color: "#333",
+					lineHeight: 1.5,
+					wordBreak: "break-all"
+				},
+				children: formatContent(message.content)
+			}), hasToolCalls && /* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: "4px",
+					padding: "8px",
+					background: "#f6ffed",
+					border: "1px solid #b7eb8f",
+					borderRadius: "6px"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: "11px",
+						fontWeight: 600,
+						color: "#389e0d",
+						marginBottom: "6px",
+						display: "flex",
+						alignItems: "center",
+						gap: "4px"
+					},
+					children: [/* @__PURE__ */ jsx("span", { children: "🔧" }), /* @__PURE__ */ jsxs("span", { children: [
+						"Tool Calls (",
+						message.tool_calls.length,
+						")"
+					] })]
+				}), /* @__PURE__ */ jsx("pre", {
+					style: {
+						...preStyle,
+						background: "#fff",
+						border: "1px solid #d9f7be",
+						maxHeight: "200px",
+						fontSize: "11px"
+					},
+					children: formatJson(message.tool_calls)
+				})]
+			})]
+		});
+	};
+	const buttonStyle = {
+		position: "fixed",
+		right: `${20 - buttonPos.x}px`,
+		bottom: `${20 - buttonPos.y}px`,
+		width: "48px",
+		height: "48px",
+		borderRadius: "50%",
+		background: "#1677ff",
+		color: "#fff",
+		border: "none",
+		cursor: isDraggingButton ? "grabbing" : "grab",
+		boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "20px",
+		zIndex: 9998,
+		transition: isDraggingButton ? "none" : "box-shadow 0.2s",
+		userSelect: "none"
+	};
+	const dialogStyle = {
+		position: "fixed",
+		left: "50%",
+		top: "50%",
+		transform: `translate(calc(-50% + ${dialogPos.x}px), calc(-50% + ${dialogPos.y}px))`,
+		width: "1000px",
+		maxWidth: "90vw",
+		height: "650px",
+		maxHeight: "85vh",
+		background: "#fff",
+		borderRadius: "12px",
+		boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+		zIndex: 9999,
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		cursor: isDraggingDialog ? "grabbing" : "default"
+	};
+	const headerStyle = {
+		padding: "12px 16px",
+		background: "#f5f5f5",
+		borderBottom: "1px solid #e8e8e8",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		cursor: isDraggingDialog ? "grabbing" : "grab"
+	};
+	const tabContainerStyle = {
+		display: "flex",
+		gap: "8px"
+	};
+	const getTabStyle = (isActive) => ({
+		padding: "6px 16px",
+		borderRadius: "6px",
+		border: "none",
+		background: isActive ? "#1677ff" : "transparent",
+		color: isActive ? "#fff" : "#666",
+		cursor: "pointer",
+		fontSize: "14px",
+		transition: "all 0.2s"
+	});
+	const closeButtonStyle = {
+		width: "28px",
+		height: "28px",
+		borderRadius: "50%",
+		border: "none",
+		background: "#ff4d4f",
+		color: "#fff",
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "16px",
+		transition: "background 0.2s"
+	};
+	const contentStyle = {
+		flex: 1,
+		overflow: "auto",
+		padding: "16px",
+		background: "#fafafa"
+	};
+	const preStyle = {
+		margin: 0,
+		padding: "12px",
+		background: "#f8f9fa",
+		color: "#333",
+		borderRadius: "8px",
+		fontSize: "12px",
+		fontFamily: "\"Fira Code\", \"Monaco\", \"Consolas\", monospace",
+		lineHeight: 1.5,
+		overflow: "auto",
+		whiteSpace: "pre-wrap",
+		wordBreak: "break-word",
+		border: "1px solid #e8e8e8"
+	};
+	const statsStyle = {
+		padding: "8px 12px",
+		background: "#e6f4ff",
+		borderRadius: "6px",
+		marginBottom: "12px",
+		fontSize: "13px",
+		color: "#0958d9"
+	};
+	const tableStyle = {
+		width: "100%",
+		borderCollapse: "collapse",
+		fontSize: "13px",
+		background: "#fff",
+		borderRadius: "8px",
+		overflow: "hidden",
+		boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+	};
+	const tableHeaderStyle = {
+		background: "#f5f5f5",
+		fontWeight: 600,
+		color: "#333",
+		textAlign: "left",
+		padding: "10px 12px",
+		borderBottom: "1px solid #e8e8e8",
+		whiteSpace: "nowrap"
+	};
+	const tableCellStyle = {
+		padding: "10px 12px",
+		borderBottom: "1px solid #f0f0f0",
+		verticalAlign: "top"
+	};
+	const expandButtonStyle = {
+		width: "20px",
+		height: "20px",
+		border: "none",
+		background: "transparent",
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "12px",
+		color: "#666",
+		borderRadius: "4px",
+		transition: "background 0.2s"
+	};
+	const expandedRowStyle = { background: "#fafafa" };
+	const jsonContainerStyle = {
+		padding: "12px",
+		background: "#fff",
+		borderRadius: "6px",
+		margin: "8px 0",
+		border: "1px solid #e8e8e8"
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		style: buttonStyle,
+		onMouseDown: handleButtonMouseDown,
+		onClick: () => !isDraggingButton && setIsOpen(true),
+		title: "打开调试面板",
+		children: "🐛"
+	}), isOpen && /* @__PURE__ */ jsxs("div", {
+		style: dialogStyle,
+		onMouseDown: handleDialogMouseDown,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "debug-panel-header",
+			style: headerStyle,
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: tabContainerStyle,
+				children: [/* @__PURE__ */ jsxs("button", {
+					style: getTabStyle(activeTab === "messages"),
+					onClick: () => setActiveTab("messages"),
+					children: [
+						"Messages (",
+						streamMessages.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					style: getTabStyle(activeTab === "state"),
+					onClick: () => setActiveTab("state"),
+					children: "State"
+				})]
+			}), /* @__PURE__ */ jsx("button", {
+				style: closeButtonStyle,
+				onClick: () => setIsOpen(false),
+				title: "关闭",
+				children: "×"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: contentStyle,
+			children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				style: statsStyle,
+				children: [
+					"共 ",
+					streamMessages.length,
+					" 条消息"
+				]
+			}), /* @__PURE__ */ jsxs("table", {
+				style: tableStyle,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", { style: {
+						...tableHeaderStyle,
+						width: "30px"
+					} }),
+					/* @__PURE__ */ jsx("th", {
+						style: {
+							...tableHeaderStyle,
+							width: "60px"
+						},
+						children: "类型"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						style: tableHeaderStyle,
+						children: "内容"
+					})
+				] }) }), /* @__PURE__ */ jsx("tbody", { children: streamMessages.map((msg, index) => {
+					const message = msg;
+					const isExpanded = expandedRows.has(index);
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+						style: {
+							cursor: "pointer",
+							transition: "background 0.2s"
+						},
+						onClick: () => toggleRow(index),
+						onMouseEnter: (e) => {
+							e.currentTarget.style.background = "#f5f5f5";
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.background = "transparent";
+						},
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								style: tableCellStyle,
+								children: /* @__PURE__ */ jsx("button", {
+									style: expandButtonStyle,
+									onClick: (e) => {
+										e.stopPropagation();
+										toggleRow(index);
+									},
+									children: isExpanded ? "▼" : "▶"
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								style: tableCellStyle,
+								children: /* @__PURE__ */ jsx("span", {
+									style: getTypeTagStyle(message.type),
+									children: message.type || "unknown"
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								style: tableCellStyle,
+								children: renderMessageContent(message)
+							})
+						]
+					}, index), isExpanded && /* @__PURE__ */ jsx("tr", {
+						style: expandedRowStyle,
+						children: /* @__PURE__ */ jsx("td", {
+							colSpan: 3,
+							style: {
+								padding: 0,
+								borderBottom: "1px solid #e8e8e8"
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								style: jsonContainerStyle,
+								children: /* @__PURE__ */ jsx("pre", {
+									style: {
+										...preStyle,
+										margin: 0,
+										maxHeight: "300px",
+										overflow: "auto"
+									},
+									children: formatJson(message)
+								})
+							})
+						})
+					})] });
+				}) })]
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				style: statsStyle,
+				children: ["State 键数量: ", Object.keys(streamState).length]
+			}), /* @__PURE__ */ jsx("pre", {
+				style: preStyle,
+				children: formatJson(streamState)
+			})] })
+		})]
+	})] });
+}
+//#endregion
 //#region src/hooks/useAgentStream.ts
 /**
 * 包装 useStream hook，为 AgentChat 提供统一的 stream 实例创建方式
@@ -1520,4 +1517,4 @@ function useAgentStream(options) {
 	return useStream(options);
 }
 //#endregion
-export { AgentChat, MessageContentRenderer, ToolCard, useAgentStream };
+export { AgentChat, DebugPanel, MessageContentRenderer, ToolCard, useAgentStream };