@vegintech/langchain-react-agent 0.0.8 → 0.0.10

package/README.md

@@ -137,7 +137,7 @@ const searchTool: BackendTool = {
   render: (props) => (
     <div className="tool-search">
       {props.status === "pending" && "等待执行..."}
-      {props.status === "running" && `搜索: ${props.arguments.query}`}
+      {props.status === "running" && `搜索: ${props.args.query}`}
       {props.status === "success" && `找到 ${props.result?.count || 0} 条结果`}
     </div>
   ),

package/dist/index.d.mts

@@ -150,7 +150,7 @@ interface ChatMessage {
 interface ToolCallInput {
   id: string;
   name: string;
-  arguments: Record<string, unknown>;
+  args: Record<string, unknown>;
   /** 后端工具执行结果（来自 ToolMessage） */
   result?: unknown;
 }
@@ -160,7 +160,7 @@ type ToolExecutionStatus = "pending" | "running" | "success" | "error";
 interface ToolExecutionRecord {
   callId: string;
   name: string;
-  arguments: Record<string, unknown>;
+  args: Record<string, unknown>;
   status: ToolExecutionStatus;
   result?: unknown;
   error?: string;
@@ -168,7 +168,7 @@ interface ToolExecutionRecord {
 /** 渲染函数的 props */
 interface ToolRenderProps<TArgs = Record<string, unknown>> {
   name: string;
-  arguments: TArgs;
+  args: TArgs;
   result?: unknown;
   status: ToolExecutionStatus;
   error?: string;
@@ -241,6 +241,8 @@ interface AgentChatProps {
   agentState?: Record<string, unknown>;
   /** Agent 状态变化回调 */
   onAgentStateChange?: (state: Record<string, unknown>) => void;
+  /** 是否显示调试面板，默认 false。仅在开发环境生效 */
+  showDebug?: boolean;
 }
 /** AgentChat 组件对外暴露的方法 */
 interface AgentChatRef {

package/dist/index.mjs

@@ -65,7 +65,7 @@ const ToolCallRenderer = ({ tool, record }) => {
 		className: "tool-call-wrapper",
 		children: tool.render({
 			name: record.name,
-			arguments: record.arguments,
+			args: record.args,
 			result: record.result,
 			status: record.status,
 			error: record.error
@@ -226,7 +226,7 @@ const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExec
 				children: /* @__PURE__ */ jsx(ReasoningContent, { content: message.reasoningContent })
 			}),
 			message.content && /* @__PURE__ */ jsx("div", {
-				style: { marginTop: message.reasoningContent ? "8px" : 0 },
+				style: { marginTop: message.reasoningContent ? "8px" : "3px" },
 				children: /* @__PURE__ */ jsx(Streamdown, {
 					components: {
 						p: CustomParagraph,
@@ -262,16 +262,20 @@ const renderToolCalls = (toolCalls, tools, toolExecutions) => {
 	return toolCalls.map((call) => {
 		const tool = findTool(tools, call.name);
 		let record;
-		if (tool && isFrontendTool(tool)) record = toolExecutions.get(call.id) || {
-			callId: call.id,
-			name: call.name,
-			arguments: call.arguments,
-			status: "pending"
-		};
-		else record = {
+		if (tool && isFrontendTool(tool)) {
+			const execution = toolExecutions.get(call.id);
+			record = {
+				callId: call.id,
+				name: call.name,
+				args: call.args,
+				status: execution?.status || "pending",
+				result: execution?.result,
+				error: execution?.error
+			};
+		} else record = {
 			callId: call.id,
 			name: call.name,
-			arguments: call.arguments,
+			args: call.args,
 			status: call.result !== void 0 ? "success" : "pending",
 			result: call.result
 		};
@@ -373,6 +377,443 @@ 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: -400,
+		y: -300
+	});
+	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 "-";
+		return content;
+	};
+	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",
+		right: `${20 - dialogPos.x}px`,
+		bottom: `${80 - dialogPos.y}px`,
+		width: "800px",
+		maxWidth: "90vw",
+		height: "600px",
+		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",
+		userSelect: "none"
+	};
+	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 (",
+						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("th", {
+						style: {
+							...tableHeaderStyle,
+							width: "100px"
+						},
+						children: "ID"
+					})
+				] }) }), /* @__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: /* @__PURE__ */ jsx("div", {
+									style: {
+										color: "#333",
+										lineHeight: 1.5,
+										wordBreak: "break-all"
+									},
+									children: formatContent(message.content)
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								style: {
+									...tableCellStyle,
+									color: "#999",
+									fontSize: "12px"
+								},
+								children: message.id?.slice(-8) || "-"
+							})
+						]
+					}, index), isExpanded && /* @__PURE__ */ jsx("tr", {
+						style: expandedRowStyle,
+						children: /* @__PURE__ */ jsx("td", {
+							colSpan: 4,
+							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
@@ -426,12 +867,17 @@ function useInterrupt({ interrupt, config, onSubmit }) {
 * 1. 管理工具执行状态
 * 2. 自动执行前端工具（避免重复执行）
 * 3. 通知外部执行状态变化
+* 4. 支持批量提交工具结果
 */
-function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResult, completedToolResults }) {
+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 initializedRef = useRef(false);
+	const batchCallIdsRef = useRef(/* @__PURE__ */ new Set());
+	const batchResultsRef = useRef(/* @__PURE__ */ new Map());
+	const isProcessingRef = useRef(false);
+	const batchSubmittedRef = useRef(false);
 	useEffect(() => {
 		if (initializedRef.current || !completedToolResults || completedToolResults.size === 0) return;
 		initializedRef.current = true;
@@ -441,13 +887,26 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 			if (call) onExecutionChange?.({
 				callId,
 				name: call.name,
-				arguments: call.arguments,
+				args: call.args,
 				status: "success",
 				result
 			});
 		});
 	}, [completedToolResults]);
 	/**
+	* 检查批次是否完成并提交结果
+	*/
+	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) => {
@@ -456,38 +915,50 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 		onExecutionChange?.({
 			callId,
 			name: call.name,
-			arguments: call.arguments,
+			args: call.args,
 			status: "running"
 		});
 		try {
-			const result = await tool.execute(call.arguments);
+			const result = await tool.execute(call.args);
 			onExecutionChange?.({
 				callId,
 				name: call.name,
-				arguments: call.arguments,
+				args: call.args,
 				status: "success",
 				result
 			});
-			onToolResult?.(callId, call.name, 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,
-				arguments: call.arguments,
+				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, onToolResult]);
+	}, [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;
@@ -498,7 +969,7 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 					onExecutionChange?.({
 						callId,
 						name: call.name,
-						arguments: call.arguments,
+						args: call.args,
 						status: "pending"
 					});
 				}
@@ -508,19 +979,33 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 				onExecutionChange?.({
 					callId,
 					name: call.name,
-					arguments: call.arguments,
+					args: call.args,
 					status: "pending"
 				});
 				continue;
 			}
-			if (isFrontendTool(tool)) await executeFrontendTool(tool, call);
+			if (isFrontendTool(tool)) frontendCalls.push({
+				tool,
+				call
+			});
 			else onExecutionChange?.({
 				callId,
 				name: call.name,
-				arguments: call.arguments,
+				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,
@@ -543,7 +1028,7 @@ 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 || "",
-		arguments: typeof tc.function?.arguments === "string" ? JSON.parse(tc.function.arguments) : tc.args || {}
+		args: typeof tc.function?.args === "string" ? JSON.parse(tc.function.args) : tc.args || {}
 	}));
 }
 /**
@@ -632,10 +1117,33 @@ const styles = `
   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 th,
+.agent-message-list td {
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.agent-message-list th {
+  background-color: rgba(128, 128, 128, 0.12);
+  font-weight: 500;
+}
+
+.agent-message-list tr:nth-child(even) {
+  background-color: rgba(128, 128, 128, 0.06);
+}
+
 .agent-message-empty {
   color: #8b8d91;
   font-size: 14px;
@@ -715,7 +1223,7 @@ function injectStyles() {
 //#endregion
 //#region src/components/AgentChat.tsx
 injectStyles();
-const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError, interruptConfig, agentState, onAgentStateChange }, ref) => {
+const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError, interruptConfig, agentState, onAgentStateChange, showDebug }, ref) => {
 	const [internalThreadId, setInternalThreadId] = useState(externalThreadId);
 	useEffect(() => {
 		setInternalThreadId(externalThreadId);
@@ -774,7 +1282,9 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 				context: contexts
 			}
 		}, {
+			streamSubgraphs: true,
 			streamResumable: true,
+			config: { recursion_limit: 1e3 },
 			optimisticValues(prev) {
 				const newMessages = [...prev.messages ?? [], ...submitMessages];
 				return {
@@ -789,13 +1299,18 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 		contexts,
 		agentState
 	]);
-	const handleToolResult = useCallback((callId, name, result) => {
-		submitToStream([{
-			type: "tool",
-			content: typeof result === "string" ? result : JSON.stringify(result),
-			tool_call_id: callId,
-			name
-		}]);
+	const handleToolResultsBatch = useCallback((results) => {
+		const toolMessages = results.map(({ callId, name, result }) => {
+			return {
+				type: "tool",
+				content: typeof result === "string" ? result : JSON.stringify(result),
+				tool_call_id: callId,
+				name
+			};
+		});
+		setTimeout(() => {
+			submitToStream(toolMessages);
+		}, 100);
 	}, [submitToStream]);
 	const handleSend = useCallback(async (params) => {
 		let messages = [];
@@ -818,38 +1333,46 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 		toolCalls: allToolCalls,
 		isLoading: stream.isLoading,
 		onExecutionChange: handleExecutionChange,
-		onToolResult: handleToolResult,
+		onToolResultsBatch: handleToolResultsBatch,
 		completedToolResults: toolResults
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,
-		children: [/* @__PURE__ */ jsx(MessageList, {
-			messages,
-			isLoading: stream.isLoading,
-			className: "agent-chat-messages",
-			tools,
-			toolExecutions,
-			components: messageConfig?.components,
-			securityConfig: {
-				allowedTags: messageConfig?.allowedTags,
-				literalTagContent: messageConfig?.literalTagContent
-			},
-			loadingColor: messageConfig?.loadingColor,
-			interruptRender,
-			emptyState: messageConfig?.emptyState
-		}), /* @__PURE__ */ jsx(ChatInput, {
-			ref: chatInputRef,
-			onSend: handleSend,
-			onStop: handleStop,
-			isLoading: stream.isLoading,
-			className: "agent-chat-input",
-			footer,
-			skill,
-			slotConfig,
-			header,
-			prefix,
-			placeholder
-		})]
+		children: [
+			/* @__PURE__ */ jsx(MessageList, {
+				messages,
+				isLoading: stream.isLoading,
+				className: "agent-chat-messages",
+				tools,
+				toolExecutions,
+				components: messageConfig?.components,
+				securityConfig: {
+					allowedTags: messageConfig?.allowedTags,
+					literalTagContent: messageConfig?.literalTagContent
+				},
+				loadingColor: messageConfig?.loadingColor,
+				interruptRender,
+				emptyState: messageConfig?.emptyState
+			}),
+			/* @__PURE__ */ jsx(ChatInput, {
+				ref: chatInputRef,
+				onSend: handleSend,
+				onStop: handleStop,
+				isLoading: stream.isLoading,
+				className: "agent-chat-input",
+				footer,
+				skill,
+				slotConfig,
+				header,
+				prefix,
+				placeholder
+			}),
+			/* @__PURE__ */ jsx(DebugPanel, {
+				messages: stream.messages,
+				streamState: stream.values || {},
+				visible: showDebug
+			})
+		]
 	});
 });
 AgentChat.displayName = "AgentChat";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [
@@ -15,13 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch",
-    "test": "vp test",
-    "check": "vp check",
-    "prepublishOnly": "vp run build"
-  },
   "dependencies": {
     "@ant-design/x": "^2.4.0",
     "@langchain/core": "^1.1.36",
@@ -43,5 +36,11 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
   }
-}
+}