@langgraph-js/sdk 1.5.5 → 1.6.1

package/README.md

@@ -1,163 +1,163 @@
-# @langgraph-js/sdk
-
-![npm version](https://img.shields.io/npm/v/@langgraph-js/sdk)
-![license](https://img.shields.io/npm/l/@langgraph-js/sdk)
-
-> The missing UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces
-
-## Why @langgraph-js/sdk?
-
-Building AI agent applications is complex, especially when you need to bridge the gap between LangGraph agents and interactive user interfaces. This SDK solves the critical challenges of frontend integration:
-
-- **Provides a complete UI integration layer** - no more complex custom code to handle tools, streaming, and state management
-- **Simplifies human-in-the-loop interactions** - easily incorporate user feedback within agent workflows
-- **Handles edge cases automatically** - interruptions, errors, token management and more
-- **Offers a rich set of UI components** - ready-to-use elements to display agent interactions
-
-[DOCS](https://langgraph-js.netlify.app)
-
-## Installation
-
-```bash
-# Using npm
-npm install @langgraph-js/sdk
-
-# Using yarn
-yarn add @langgraph-js/sdk
-
-# Using pnpm
-pnpm add @langgraph-js/sdk
-```
-
-## Key Features
-
-### Generative UI
-
-- ✅ Custom Tool Messages
-- ✅ Token Counter
-- ✅ Stop Graph Progress
-- ✅ Interrupt Handling
-- ✅ Error Handling
-- ✅ Spend Time Tracking
-- ✅ Time Persistence
-
-### Frontend Actions
-
-- ✅ Definition of Union Tools
-- ✅ Frontend Functions As Tools
-- ✅ Human-in-the-Loop Interaction
-- ✅ Interrupt Mode
-
-### Authorization
-
-- ✅ Cookie-Based Authentication
-- ✅ Custom Token Authentication
-
-### Persistence
-
-- ✅ Read History from LangGraph
-
-## Advanced Usage
-
-### Creating a Chat Store
-
-You can easily create a reactive store for your LangGraph client:
-
-```typescript
-import { createChatStore } from "@langgraph-js/sdk";
-
-export const globalChatStore = createChatStore(
-    "agent",
-    {
-        // Custom LangGraph backend interaction
-        apiUrl: "http://localhost:8123",
-        // Custom headers for authentication
-        defaultHeaders: JSON.parse(localStorage.getItem("code") || "{}"),
-        callerOptions: {
-            // Example for including cookies
-            // fetch(url: string, options: RequestInit) {
-            //     options.credentials = "include";
-            //     return fetch(url, options);
-            // },
-        },
-    },
-    {
-        onInit(client) {
-            client.tools.bindTools([]);
-        },
-    }
-);
-```
-
-### React Integration
-
-First, install the nanostores React integration:
-
-```bash
-pnpm i @nanostores/react
-```
-
-Then create a context provider for your chat:
-
-```tsx
-import React, { createContext, useContext, useEffect } from "react";
-import { globalChatStore } from "../store"; // Import your store
-import { UnionStore, useUnionStore } from "@langgraph-js/sdk";
-import { useStore } from "@nanostores/react";
-
-type ChatContextType = UnionStore<typeof globalChatStore>;
-
-const ChatContext = createContext<ChatContextType | undefined>(undefined);
-
-export const useChat = () => {
-    const context = useContext(ChatContext);
-    if (!context) {
-        throw new Error("useChat must be used within a ChatProvider");
-    }
-    return context;
-};
-
-export const ChatProvider = ({ children }) => {
-    // Use store to ensure React gets reactive state updates
-    const store = useUnionStore(globalChatStore, useStore);
-    
-    useEffect(() => {
-        // Initialize client
-        store.initClient().then(() => {
-            // Initialize conversation history
-            store.refreshHistoryList();
-        });
-    }, [store.currentAgent]);
-
-    return <ChatContext.Provider value={store}>{children}</ChatContext.Provider>;
-};
-```
-
-Use it in your components:
-
-```tsx
-export const MyChat = () => {
-    return (
-        <ChatProvider>
-            <ChatComp></ChatComp>
-        </ChatProvider>
-    );
-};
-
-function ChatComp() {
-    const chat = useChat();
-    // Use chat store methods and state here
-}
-```
-
-## Documentation
-
-For complete documentation, visit our [official docs](https://langgraph-js.netlify.app).
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## License
-
-This project is licensed under the Apache-2.0 License.
+# @langgraph-js/sdk
+
+![npm version](https://img.shields.io/npm/v/@langgraph-js/sdk)
+![license](https://img.shields.io/npm/l/@langgraph-js/sdk)
+
+> The missing UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces
+
+## Why @langgraph-js/sdk?
+
+Building AI agent applications is complex, especially when you need to bridge the gap between LangGraph agents and interactive user interfaces. This SDK solves the critical challenges of frontend integration:
+
+- **Provides a complete UI integration layer** - no more complex custom code to handle tools, streaming, and state management
+- **Simplifies human-in-the-loop interactions** - easily incorporate user feedback within agent workflows
+- **Handles edge cases automatically** - interruptions, errors, token management and more
+- **Offers a rich set of UI components** - ready-to-use elements to display agent interactions
+
+[DOCS](https://langgraph-js.netlify.app)
+
+## Installation
+
+```bash
+# Using npm
+npm install @langgraph-js/sdk
+
+# Using yarn
+yarn add @langgraph-js/sdk
+
+# Using pnpm
+pnpm add @langgraph-js/sdk
+```
+
+## Key Features
+
+### Generative UI
+
+- ✅ Custom Tool Messages
+- ✅ Token Counter
+- ✅ Stop Graph Progress
+- ✅ Interrupt Handling
+- ✅ Error Handling
+- ✅ Spend Time Tracking
+- ✅ Time Persistence
+
+### Frontend Actions
+
+- ✅ Definition of Union Tools
+- ✅ Frontend Functions As Tools
+- ✅ Human-in-the-Loop Interaction
+- ✅ Interrupt Mode
+
+### Authorization
+
+- ✅ Cookie-Based Authentication
+- ✅ Custom Token Authentication
+
+### Persistence
+
+- ✅ Read History from LangGraph
+
+## Advanced Usage
+
+### Creating a Chat Store
+
+You can easily create a reactive store for your LangGraph client:
+
+```typescript
+import { createChatStore } from "@langgraph-js/sdk";
+
+export const globalChatStore = createChatStore(
+    "agent",
+    {
+        // Custom LangGraph backend interaction
+        apiUrl: "http://localhost:8123",
+        // Custom headers for authentication
+        defaultHeaders: JSON.parse(localStorage.getItem("code") || "{}"),
+        callerOptions: {
+            // Example for including cookies
+            // fetch(url: string, options: RequestInit) {
+            //     options.credentials = "include";
+            //     return fetch(url, options);
+            // },
+        },
+    },
+    {
+        onInit(client) {
+            client.tools.bindTools([]);
+        },
+    }
+);
+```
+
+### React Integration
+
+First, install the nanostores React integration:
+
+```bash
+pnpm i @nanostores/react
+```
+
+Then create a context provider for your chat:
+
+```tsx
+import React, { createContext, useContext, useEffect } from "react";
+import { globalChatStore } from "../store"; // Import your store
+import { UnionStore, useUnionStore } from "@langgraph-js/sdk";
+import { useStore } from "@nanostores/react";
+
+type ChatContextType = UnionStore<typeof globalChatStore>;
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+export const useChat = () => {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+
+export const ChatProvider = ({ children }) => {
+    // Use store to ensure React gets reactive state updates
+    const store = useUnionStore(globalChatStore, useStore);
+    
+    useEffect(() => {
+        // Initialize client
+        store.initClient().then(() => {
+            // Initialize conversation history
+            store.refreshHistoryList();
+        });
+    }, [store.currentAgent]);
+
+    return <ChatContext.Provider value={store}>{children}</ChatContext.Provider>;
+};
+```
+
+Use it in your components:
+
+```tsx
+export const MyChat = () => {
+    return (
+        <ChatProvider>
+            <ChatComp></ChatComp>
+        </ChatProvider>
+    );
+};
+
+function ChatComp() {
+    const chat = useChat();
+    // Use chat store methods and state here
+}
+```
+
+## Documentation
+
+For complete documentation, visit our [official docs](https://langgraph-js.netlify.app).
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the Apache-2.0 License.

package/dist/LangGraphClient.d.ts

@@ -1,4 +1,4 @@
-import { Client, Thread, Message, Assistant, HumanMessage, ToolMessage, Command } from "@langchain/langgraph-sdk";
+import { Client, Thread, Message, Assistant, HumanMessage, AIMessage, ToolMessage, Command } from "@langchain/langgraph-sdk";
 import { ToolManager } from "./ToolManager.js";
 import { CallToolResult } from "./tool/createTool.js";
 interface AsyncCallerParams {
@@ -71,8 +71,8 @@ export interface LangGraphClientConfig {
 export declare class StreamingMessageType {
     static isUser(m: Message): m is HumanMessage;
     static isTool(m: Message): m is ToolMessage;
-    static isAssistant(m: Message): boolean;
-    static isToolAssistant(m: Message): any;
+    static isAssistant(m: Message): m is AIMessage;
+    static isToolAssistant(m: Message): m is AIMessage;
 }
 type StreamingUpdateEvent = {
     type: "message" | "value" | "update" | "error" | "thread" | "done" | "start";
@@ -120,7 +120,8 @@ export declare class LangGraphClient extends Client {
     graphMessages: RenderMessage[];
     cloneMessage(message: Message): Message;
     private updateStreamingMessage;
-    private replaceMessageWithValuesMessage;
+    /** 将 graphMessages 和 streamingMessage 合并，并返回新的消息数组 */
+    private combineGraphMessagesWithStreamingMessages;
     /**
      * @zh 用于 UI 中的流式渲染中的消息。
      * @en Messages used for streaming rendering in the UI.
@@ -165,6 +166,16 @@ export declare class LangGraphClient extends Client {
      * @en Sends a message to the LangGraph backend.
      */
     sendMessage(input: string | Message[], { extraParams, _debug, command }?: SendMessageOptions): Promise<any[]>;
+    /** 当前子图位置，但是依赖 stream，不太适合稳定使用*/
+    private graphPosition;
+    getGraphPosition(): {
+        id: string;
+        name: string;
+    }[];
+    getGraphNodeNow(): {
+        id: string;
+        name: string;
+    };
     /** 子图的数据需要通过 merge 的方式重新进行合并更新 */
     private mergeSubGraphMessagesToStreamingMessages;
     private runFETool;

package/dist/LangGraphClient.js

@@ -37,6 +37,8 @@ export class LangGraphClient extends Client {
         /** 图发过来的更新信息 */
         this.graphMessages = [];
         this.graphState = {};
+        /** 当前子图位置，但是依赖 stream，不太适合稳定使用*/
+        this.graphPosition = "";
     }
     listAssistants() {
         return this.assistants.search({
@@ -134,17 +136,20 @@ export class LangGraphClient extends Client {
         }
         this.streamingMessage[this.streamingMessage.length - 1] = message;
     }
-    replaceMessageWithValuesMessage(message, isTool = false) {
-        const key = (isTool ? "tool_call_id" : "id");
-        const valuesMessage = this.graphMessages.find((i) => i[key] === message[key]);
-        if (valuesMessage) {
-            return {
-                ...valuesMessage,
-                /** @ts-ignore */
-                tool_input: message.tool_input,
-            };
-        }
-        return message;
+    /** 将 graphMessages 和 streamingMessage 合并，并返回新的消息数组 */
+    combineGraphMessagesWithStreamingMessages() {
+        const idMap = new Map(this.streamingMessage.map((i) => [i.id, i]));
+        return [
+            ...this.graphMessages.map((i) => {
+                if (idMap.has(i.id)) {
+                    const newValue = idMap.get(i.id);
+                    idMap.delete(i.id);
+                    return newValue;
+                }
+                return i;
+            }),
+            ...idMap.values(),
+        ];
     }
     /**
      * @zh 用于 UI 中的流式渲染中的消息。
@@ -155,7 +160,7 @@ export class LangGraphClient extends Client {
         const previousMessage = new Map();
         const closedToolCallIds = new Set();
         const result = [];
-        const inputMessages = [...this.graphMessages, ...this.streamingMessage];
+        const inputMessages = this.combineGraphMessagesWithStreamingMessages();
         console.log(inputMessages);
         // 从后往前遍历，这样可以保证最新的消息在前面
         for (let i = inputMessages.length - 1; i >= 0; i--) {
@@ -164,12 +169,13 @@ export class LangGraphClient extends Client {
                 result.unshift(message);
                 continue;
             }
-            // 如果已经处理过这个 id 的消息，跳过
-            if (previousMessage.has(message.id)) {
-                continue;
+            if (message.type === "ai") {
+                /** @ts-ignore */
+                if (!message.name)
+                    message.name = this.getGraphNodeNow().name;
             }
             if (StreamingMessageType.isToolAssistant(message)) {
-                const m = this.replaceMessageWithValuesMessage(message);
+                const m = message;
                 // 记录这个 id 的消息，并添加到结果中
                 previousMessage.set(message.id, m);
                 /** @ts-ignore */
@@ -180,7 +186,7 @@ export class LangGraphClient extends Client {
                 })
                     .map((tool, index) => {
                     var _a, _b, _c, _d;
-                    return this.replaceMessageWithValuesMessage({
+                    return {
                         type: "tool",
                         additional_kwargs: {},
                         /** @ts-ignore */
@@ -189,7 +195,8 @@ export class LangGraphClient extends Client {
                         name: tool.name,
                         response_metadata: {},
                         tool_call_id: tool.id,
-                    }, true);
+                        content: "",
+                    };
                 });
                 for (const tool of new_tool_calls) {
                     if (!previousMessage.has(tool.id)) {
@@ -203,10 +210,8 @@ export class LangGraphClient extends Client {
                 if (message.type === "tool" && message.tool_call_id) {
                     closedToolCallIds.add(message.tool_call_id);
                 }
-                // 记录这个 id 的消息，并添加到结果中
-                const m = this.replaceMessageWithValuesMessage(message);
-                previousMessage.set(message.id, m);
-                result.unshift(m);
+                previousMessage.set(message.id, message);
+                result.unshift(message);
             }
         }
         return this.attachInfoForMessage(this.composeToolMessages(result));
@@ -245,7 +250,7 @@ export class LangGraphClient extends Client {
      * @en Composes tool messages, associating AI tool calls with tool execution results.
      */
     composeToolMessages(messages) {
-        var _a;
+        var _a, _b;
         const result = [];
         const assistantToolMessages = new Map();
         const toolParentMessage = new Map();
@@ -278,8 +283,11 @@ export class LangGraphClient extends Client {
                 if (parentMessage) {
                     message.usage_metadata = parentMessage.usage_metadata;
                     message.node_name = parentMessage.name;
+                    // 修补特殊情况下，tool name 丢失的问题
+                    if (!message.name) {
+                        message.name = (_b = parentMessage.tool_calls.find((i) => i.id === message.tool_call_id)) === null || _b === void 0 ? void 0 : _b.name;
+                    }
                 }
-                message.id = message.tool_call_id;
             }
             result.push(message);
         }
@@ -418,6 +426,7 @@ export class LangGraphClient extends Client {
                 if (chunk.data.messages) {
                     this.mergeSubGraphMessagesToStreamingMessages(chunk.data.messages);
                 }
+                this.graphPosition = chunk.event.split("|")[1];
             }
         }
         const data = await this.runFETool();
@@ -432,6 +441,19 @@ export class LangGraphClient extends Client {
         this.streamingMessage = [];
         return streamRecord;
     }
+    getGraphPosition() {
+        return this.graphPosition.split("|").map((i) => {
+            const [name, id] = i.split(":");
+            return {
+                id,
+                name,
+            };
+        });
+    }
+    getGraphNodeNow() {
+        const position = this.getGraphPosition();
+        return position[position.length - 1];
+    }
     /** 子图的数据需要通过 merge 的方式重新进行合并更新 */
     mergeSubGraphMessagesToStreamingMessages(messages) {
         const map = new Map(messages.filter((i) => i.id).map((i) => [i.id, i]));

package/dist/ui-store/createChatStore.js

@@ -102,9 +102,8 @@ export const createChatStore = (initClientName, config, context = {}) => {
         // await newClient.createThread();
         inChatError.set(null);
         newClient.onStreamingUpdate((event) => {
-            if (event.type === "start") {
+            if (event.type === "start")
                 loading.set(true);
-            }
             if (event.type === "thread" || event.type === "done") {
                 // console.log(event.data);
                 // 创建新流程时，默认为 __start__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "1.5.5",
+  "version": "1.6.1",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",