@vegintech/langchain-react-agent 0.0.35 → 0.0.37

package/dist/index.d.mts

@@ -154,7 +154,7 @@ interface ToolCallInput {
   status?: "success" | "error";
 }
 /** 工具执行状态 */
-type ToolExecutionStatus = "pending" | "running" | "success" | "error";
+type ToolExecutionStatus = "pending" | "running" | "success" | "error" | "cancelled";
 /** 工具执行结果 */
 interface ToolExecutionRecord {
   callId: string;

package/dist/index.mjs

@@ -2,6 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import { Actions, Bubble, Sender, Think, ThoughtChain } from "@ant-design/x";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
 import { useStream } from "@langchain/langgraph-sdk/react";
 //#region src/components/ChatInput.tsx
 const slotConfig = [];
@@ -180,6 +181,7 @@ const ContentBlock = ({ block, index, components, securityConfig }) => {
 		},
 		allowedTags: securityConfig?.allowedTags,
 		literalTagContent: securityConfig?.literalTagContent,
+		plugins: { code },
 		controls: { table: {
 			copy: false,
 			download: false,
@@ -563,10 +565,16 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 	const batchResultsRef = useRef(/* @__PURE__ */ new Map());
 	const isProcessingRef = useRef(false);
 	const batchSubmittedRef = useRef(false);
+	const cancelledCallIdsRef = useRef(/* @__PURE__ */ new Set());
+	const cancelledExecutionsRef = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
 		if (!completedToolResults || completedToolResults.size === 0) return;
 		completedToolResults.forEach(({ result, status }, callId) => {
 			if (notifiedCompletedRef.current.has(callId)) return;
+			if (cancelledExecutionsRef.current.has(callId)) {
+				notifiedCompletedRef.current.add(callId);
+				return;
+			}
 			if (executedCallsRef.current.has(callId)) {
 				notifiedCompletedRef.current.add(callId);
 				return;
@@ -630,7 +638,12 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 			batchResultsRef.current.set(callId, createToolMessage(callId, call.name, null, "error", errorMessage));
 		} finally {
 			executingCallsRef.current.delete(callId);
-			executedCallsRef.current.add(callId);
+			if (cancelledCallIdsRef.current.has(callId)) {
+				cancelledCallIdsRef.current.delete(callId);
+				cancelledExecutionsRef.current.add(callId);
+				batchResultsRef.current.delete(callId);
+				batchCallIdsRef.current.delete(callId);
+			} else executedCallsRef.current.add(callId);
 			checkAndSubmitBatch();
 		}
 	}, [onExecutionChange, checkAndSubmitBatch]);
@@ -643,7 +656,7 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 		const frontendCalls = [];
 		for (const call of toolCalls) {
 			const callId = call.id;
-			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId)) continue;
+			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId) || cancelledExecutionsRef.current.has(callId)) continue;
 			const tool = findTool(tools, call.name);
 			if (isLoading) {
 				if (!pendingNotifiedRef.current.has(callId)) {
@@ -695,11 +708,36 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 		executeFrontendTool,
 		onExecutionChange
 	]);
+	/**
+	* 取消当前正在执行或待执行的前端工具
+	*
+	* 由于 JavaScript 无法真正中断异步执行，取消仅做标记：
+	* 1. 正在执行的工具完成后会被无视（不提交结果）
+	* 2. 尚未执行的工具被直接移除，不再执行
+	*/
+	const cancel = useCallback(() => {
+		const callIdsToCancel = new Set([...executingCallsRef.current, ...batchCallIdsRef.current]);
+		for (const callId of callIdsToCancel) {
+			cancelledCallIdsRef.current.add(callId);
+			if (!executingCallsRef.current.has(callId)) {
+				cancelledExecutionsRef.current.add(callId);
+				batchCallIdsRef.current.delete(callId);
+			}
+			const call = toolCalls.find((c) => c.id === callId);
+			if (call) onExecutionChange?.({
+				callId,
+				name: call.name,
+				args: call.args,
+				status: "cancelled"
+			});
+		}
+	}, [toolCalls, onExecutionChange]);
 	useEffect(() => {
 		processToolCalls();
 	}, [useMemo(() => {
-		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
+		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id) && !cancelledExecutionsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
 	}, [toolCalls]), isLoading]);
+	return { cancel };
 }
 //#endregion
 //#region src/utils/messageUtils.ts
@@ -951,7 +989,6 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 		onSubmit: stream.submit
 	});
 	const [toolExecutions, setToolExecutions] = useState(/* @__PURE__ */ new Map());
-	const isLoading = stream.isLoading;
 	const { messages, toolResults } = useMemo(() => {
 		return processMessages(stream.messages);
 	}, [stream.messages]);
@@ -968,6 +1005,12 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 	const frontendTools = useMemo(() => {
 		return tools?.filter(isFrontendTool) || [];
 	}, [tools]);
+	const frontendToolNames = useMemo(() => new Set(frontendTools.map((t) => t.name)), [frontendTools]);
+	const hasToolExecuting = useMemo(() => {
+		for (const record of toolExecutions.values()) if (frontendToolNames.has(record.name) && (record.status === "running" || record.status === "pending")) return true;
+		return false;
+	}, [toolExecutions, frontendToolNames]);
+	const isLoading = stream.isLoading || hasToolExecuting;
 	const submitToStream = useCallback(async (submitMessages) => {
 		await stream.submit({
 			...agentState,
@@ -1012,10 +1055,7 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 		if (messages.length === 0) return;
 		await submitToStream(messages);
 	}, [onPreSend, submitToStream]);
-	const handleStop = useCallback(async () => {
-		await stream.stop();
-	}, [stream]);
-	useToolExecution({
+	const { cancel: cancelToolExecution } = useToolExecution({
 		tools,
 		toolCalls: allToolCalls,
 		isLoading: stream.isLoading,
@@ -1023,6 +1063,10 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 		onToolResultsBatch: handleToolResultsBatch,
 		completedToolResults: toolResults
 	});
+	const handleStop = useCallback(async () => {
+		cancelToolExecution();
+		await stream.stop();
+	}, [stream, cancelToolExecution]);
 	const shouldRenderWelcome = messages.length === 0 && !isLoading && welcome;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [
@@ -25,6 +25,7 @@
   "dependencies": {
     "@ant-design/x": "^2.4.0",
     "@langchain/langgraph-sdk": "^1.8.7",
+    "@streamdown/code": "catalog:",
     "streamdown": "^2.5.0"
   },
   "devDependencies": {