feat(langgraph): automatically cancel tool calls if user sends a new …

…message (#821)

.changeset/proud-waves-fail.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-langgraph": patch
+---
+
+feat: automatically cancel tool calls if user sends a new message

packages/react-langgraph/src/useLangGraphRuntime.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { LangChainMessage } from "./types";
+import { LangChainMessage, LangChainToolCall } from "./types";
 import {
   useExternalMessageConverter,
   useExternalStoreRuntime,
@@ -8,6 +8,22 @@ import { convertLangchainMessages } from "./convertLangchainMessages";
 import { useLangGraphMessages } from "./useLangGraphMessages";
 import { ExternalStoreRuntime } from "@assistant-ui/react";
 
+const getPendingToolCalls = (messages: LangChainMessage[]) => {
+  const pendingToolCalls = new Map<string, LangChainToolCall>();
+  for (const message of messages) {
+    if (message.type === "ai") {
+      for (const toolCall of message.tool_calls ?? []) {
+        pendingToolCalls.set(toolCall.id, toolCall);
+      }
+    }
+    if (message.type === "tool") {
+      pendingToolCalls.delete(message.tool_call_id);
+    }
+  }
+
+  return [...pendingToolCalls.values()];
+};
+
 export const useLangGraphRuntime = ({
   threadId,
   stream,
@@ -49,7 +65,18 @@ export const useLangGraphRuntime = ({
     onNew: (msg) => {
       if (msg.content.length !== 1 || msg.content[0]?.type !== "text")
         throw new Error("Only text messages are supported");
+
+      const cancellations = getPendingToolCalls(messages).map(
+        (t) =>
+          ({
+            type: "tool",
+            name: t.name,
+            tool_call_id: t.id,
+            content: JSON.stringify({ cancelled: true }),
+          }) satisfies LangChainMessage & { type: "tool" },
+      );
       return handleSendMessage([
+        ...cancellations,
         {
           type: "human",
           content: msg.content[0].text,