@vegintech/langchain-react-agent 0.0.8 → 0.0.9

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;

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
@@ -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
 		};
@@ -426,12 +430,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 +450,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 +478,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 +532,7 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 					onExecutionChange?.({
 						callId,
 						name: call.name,
-						arguments: call.arguments,
+						args: call.args,
 						status: "pending"
 					});
 				}
@@ -508,19 +542,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 +591,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 +680,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;
@@ -774,7 +845,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 +862,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,7 +896,7 @@ 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", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [