@vegintech/langchain-react-agent 0.0.7 → 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

@@ -1,9 +1,18 @@
 import * as react from "react";
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { Components } from "streamdown";
 import { BaseNode, InsertPosition, NodeRender, SenderProps, SkillType, SlotConfigType } from "@ant-design/x/es/sender/interface.ts";
 
 //#region src/types.d.ts
+/** ToolCard 各部件的样式配置 */
+interface ToolCardStyles {
+  /** icon 容器的样式 */
+  icon?: CSSProperties;
+  /** prefix 文本的样式 */
+  prefix?: CSSProperties;
+  /** content 文本的样式 */
+  content?: CSSProperties;
+}
 /** ToolCard 组件 Props */
 interface ToolCardProps {
   /**
@@ -18,6 +27,14 @@ interface ToolCardProps {
    * 左侧图标
    */
   icon: ReactNode;
+  /**
+   * 根节点样式
+   */
+  style?: CSSProperties;
+  /**
+   * 各部件的样式配置，可分别设置 icon、prefix、content 的样式
+   */
+  styles?: ToolCardStyles;
 }
 /** Interrupt 事件数据结构 */
 interface InterruptEvent {
@@ -133,7 +150,7 @@ interface ChatMessage {
 interface ToolCallInput {
   id: string;
   name: string;
-  arguments: Record<string, unknown>;
+  args: Record<string, unknown>;
   /** 后端工具执行结果（来自 ToolMessage） */
   result?: unknown;
 }
@@ -143,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;
@@ -151,7 +168,7 @@ interface ToolExecutionRecord {
 /** 渲染函数的 props */
 interface ToolRenderProps<TArgs = Record<string, unknown>> {
   name: string;
-  arguments: TArgs;
+  args: TArgs;
   result?: unknown;
   status: ToolExecutionStatus;
   error?: string;
@@ -247,4 +264,4 @@ declare const AgentChat: react.ForwardRefExoticComponent<AgentChatProps & react.
  */
 declare const ToolCard: React.FC<ToolCardProps>;
 //#endregion
-export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type BackendTool, type ChatMessage, type ContextItem, type EmptyStateConfig, type FrontendTool, type InputConfig, type InterruptConfig, type InterruptEvent, type InterruptManagerProps, type InterruptRenderProps, type MessageConfig, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };
+export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type BackendTool, type ChatMessage, type ContextItem, type EmptyStateConfig, type FrontendTool, type InputConfig, type InterruptConfig, type InterruptEvent, type InterruptManagerProps, type InterruptRenderProps, type MessageConfig, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolCardStyles, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };

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", {
@@ -859,32 +937,39 @@ AgentChat.displayName = "AgentChat";
 * ToolCard 组件 - 用于展示工具调用结果
 * 样式：圆角矩形框，左侧 icon，label 分两行显示（prefix 小字体，content 默认字体）
 */
-const ToolCard = ({ prefix, content, icon }) => {
+const ToolCard = ({ prefix, content, icon, style, styles }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		style: {
 			display: "inline-flex",
 			alignItems: "center",
 			gap: 8,
 			borderRadius: 8,
-			fontSize: 13
+			fontSize: 13,
+			...style
 		},
 		children: [/* @__PURE__ */ jsx("span", {
 			style: {
 				display: "flex",
-				alignItems: "center"
+				alignItems: "center",
+				...styles?.icon
 			},
 			children: icon
 		}), /* @__PURE__ */ jsxs("span", {
 			style: {
 				display: "flex",
 				alignItems: "center",
-				gap: 4,
-				color: "rgba(0, 0, 0, 0.45)"
+				gap: 4
 			},
 			children: [/* @__PURE__ */ jsx("span", {
-				style: { fontSize: 12 },
+				style: {
+					fontSize: 12,
+					...styles?.prefix
+				},
 				children: prefix
-			}), /* @__PURE__ */ jsx("span", { children: content })]
+			}), /* @__PURE__ */ jsx("span", {
+				style: { ...styles?.content },
+				children: content
+			})]
 		})]
 	});
 };

package/package.json

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