@langgraph-js/sdk 1.1.6 → 1.1.8

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,7 +1,25 @@
 import { Client, Thread, Message, Assistant, HumanMessage, ToolMessage, Command } from "@langchain/langgraph-sdk";
-import { ToolManager } from "./ToolManager";
-import { CallToolResult } from "./tool";
-import { AsyncCallerParams } from "@langchain/langgraph-sdk/dist/utils/async_caller";
+import { ToolManager } from "./ToolManager.js";
+import { CallToolResult } from "./tool/createTool.js";
+interface AsyncCallerParams {
+    /**
+     * The maximum number of concurrent calls that can be made.
+     * Defaults to `Infinity`, which means no limit.
+     */
+    maxConcurrency?: number;
+    /**
+     * The maximum number of retries that can be made for a single call,
+     * with an exponential backoff between each attempt. Defaults to 6.
+     */
+    maxRetries?: number;
+    onFailedResponseHook?: any;
+    /**
+     * Specify a custom fetch implementation.
+     *
+     * By default we expect the `fetch` is available in the global scope.
+     */
+    fetch?: typeof fetch | ((...args: any[]) => any);
+}
 export type RenderMessage = Message & {
     /** 工具入参 ，聚合而来*/
     tool_input?: string;
@@ -40,6 +58,10 @@ export interface LangGraphClientConfig {
     timeoutMs?: number;
     defaultHeaders?: Record<string, string | null | undefined>;
 }
+/**
+ * @zh StreamingMessageType 类用于判断消息的类型。
+ * @en The StreamingMessageType class is used to determine the type of a message.
+ */
 export declare class StreamingMessageType {
     static isUser(m: Message): m is HumanMessage;
     static isTool(m: Message): m is ToolMessage;
@@ -51,6 +73,10 @@ type StreamingUpdateEvent = {
     data: any;
 };
 type StreamingUpdateCallback = (event: StreamingUpdateEvent) => void;
+/**
+ * @zh LangGraphClient 类是与 LangGraph 后端交互的主要客户端。
+ * @en The LangGraphClient class is the main client for interacting with the LangGraph backend.
+ */
 export declare class LangGraphClient extends Client {
     private currentAssistant;
     private currentThread;
@@ -60,43 +86,103 @@ export declare class LangGraphClient extends Client {
     constructor(config: LangGraphClientConfig);
     availableAssistants: Assistant[];
     private listAssistants;
+    /**
+     * @zh 初始化 Assistant。
+     * @en Initializes the Assistant.
+     */
     initAssistant(agentName: string): Promise<void>;
+    /**
+     * @zh 创建一个新的 Thread。
+     * @en Creates a new Thread.
+     */
     createThread({ threadId, }?: {
         threadId?: string;
     }): Promise<Thread<import("@langchain/langgraph-sdk").DefaultValues>>;
+    /**
+     * @zh 列出所有的 Thread。
+     * @en Lists all Threads.
+     */
     listThreads<T>(): Promise<Thread<T>[]>;
-    /** 从历史中恢复数据 */
+    /**
+     * @zh 从历史中恢复 Thread 数据。
+     * @en Resets the Thread data from history.
+     */
     resetThread(agent: string, threadId: string): Promise<void>;
     streamingMessage: RenderMessage[];
     /** 图发过来的更新信息 */
     graphMessages: RenderMessage[];
     cloneMessage(message: Message): Message;
     private replaceMessageWithValuesMessage;
-    /** 用于 UI 中的流式渲染中的消息 */
+    /**
+     * @zh 用于 UI 中的流式渲染中的消息。
+     * @en Messages used for streaming rendering in the UI.
+     */
     get renderMessage(): RenderMessage[];
-    attachInfoForMessage(result: RenderMessage[]): RenderMessage[];
-    composeToolMessages(messages: RenderMessage[]): RenderMessage[];
+    /**
+     * @zh 为消息附加额外的信息，如耗时、唯一 ID 等。
+     * @en Attaches additional information to messages, such as spend time, unique ID, etc.
+     */
+    private attachInfoForMessage;
+    /**
+     * @zh 组合工具消息，将 AI 的工具调用和工具的执行结果关联起来。
+     * @en Composes tool messages, associating AI tool calls with tool execution results.
+     */
+    private composeToolMessages;
+    /**
+     * @zh 获取 Token 计数器信息。
+     * @en Gets the Token counter information.
+     */
     get tokenCounter(): {
         total_tokens: number;
         input_tokens: number;
         output_tokens: number;
     };
+    /**
+     * @zh 注册流式更新的回调函数。
+     * @en Registers a callback function for streaming updates.
+     */
     onStreamingUpdate(callback: StreamingUpdateCallback): () => void;
     private emitStreamingUpdate;
     graphState: any;
     currentRun?: {
         run_id: string;
     };
+    /**
+     * @zh 取消当前的 Run。
+     * @en Cancels the current Run.
+     */
     cancelRun(): void;
+    /**
+     * @zh 发送消息到 LangGraph 后端。
+     * @en Sends a message to the LangGraph backend.
+     */
     sendMessage(input: string | Message[], { extraParams, _debug, command }?: SendMessageOptions): Promise<any[]>;
     private runFETool;
     private callFETool;
-    /** 恢复消息，当中断流时使用 */
+    /**
+     * @zh 继续被前端工具中断的流程。
+     * @en Resumes a process interrupted by a frontend tool.
+     */
     resume(result: CallToolResult): Promise<any[]>;
-    /** 完成工具等待 */
+    /**
+     * @zh 标记前端工具等待已完成。
+     * @en Marks the frontend tool waiting as completed.
+     */
     doneFEToolWaiting(id: string, result: CallToolResult): void;
+    /**
+     * @zh 获取当前的 Thread。
+     * @en Gets the current Thread.
+     */
     getCurrentThread(): Thread<import("@langchain/langgraph-sdk").DefaultValues> | null;
+    /**
+     * @zh 获取当前的 Assistant。
+     * @en Gets the current Assistant.
+     */
     getCurrentAssistant(): Assistant | null;
+    /**
+     * @zh 重置客户端状态。
+     * @en Resets the client state.
+     */
     reset(): Promise<void>;
 }
 export {};

package/dist/LangGraphClient.js

@@ -1,5 +1,9 @@
 import { Client } from "@langchain/langgraph-sdk";
-import { ToolManager } from "./ToolManager";
+import { ToolManager } from "./ToolManager.js";
+/**
+ * @zh StreamingMessageType 类用于判断消息的类型。
+ * @en The StreamingMessageType class is used to determine the type of a message.
+ */
 export class StreamingMessageType {
     static isUser(m) {
         return m.type === "human";
@@ -16,6 +20,10 @@ export class StreamingMessageType {
         return m.type === "ai" && (((_a = m.tool_calls) === null || _a === void 0 ? void 0 : _a.length) || ((_b = m.tool_call_chunks) === null || _b === void 0 ? void 0 : _b.length));
     }
 }
+/**
+ * @zh LangGraphClient 类是与 LangGraph 后端交互的主要客户端。
+ * @en The LangGraphClient class is the main client for interacting with the LangGraph backend.
+ */
 export class LangGraphClient extends Client {
     constructor(config) {
         super(config);
@@ -37,6 +45,10 @@ export class LangGraphClient extends Client {
             limit: 100,
         });
     }
+    /**
+     * @zh 初始化 Assistant。
+     * @en Initializes the Assistant.
+     */
     async initAssistant(agentName) {
         try {
             const assistants = await this.listAssistants();
@@ -56,6 +68,10 @@ export class LangGraphClient extends Client {
             throw error;
         }
     }
+    /**
+     * @zh 创建一个新的 Thread。
+     * @en Creates a new Thread.
+     */
     async createThread({ threadId, } = {}) {
         try {
             this.currentThread = await this.threads.create({
@@ -68,12 +84,19 @@ export class LangGraphClient extends Client {
             throw error;
         }
     }
+    /**
+     * @zh 列出所有的 Thread。
+     * @en Lists all Threads.
+     */
     async listThreads() {
         return this.threads.search({
             sortOrder: "desc",
         });
     }
-    /** 从历史中恢复数据 */
+    /**
+     * @zh 从历史中恢复 Thread 数据。
+     * @en Resets the Thread data from history.
+     */
     async resetThread(agent, threadId) {
         await this.initAssistant(agent);
         this.currentThread = await this.threads.get(threadId);
@@ -104,7 +127,10 @@ export class LangGraphClient extends Client {
         }
         return message;
     }
-    /** 用于 UI 中的流式渲染中的消息 */
+    /**
+     * @zh 用于 UI 中的流式渲染中的消息。
+     * @en Messages used for streaming rendering in the UI.
+     */
     get renderMessage() {
         var _a;
         const previousMessage = new Map();
@@ -157,6 +183,10 @@ export class LangGraphClient extends Client {
         }
         return this.attachInfoForMessage(this.composeToolMessages(result));
     }
+    /**
+     * @zh 为消息附加额外的信息，如耗时、唯一 ID 等。
+     * @en Attaches additional information to messages, such as spend time, unique ID, etc.
+     */
     attachInfoForMessage(result) {
         var _a, _b, _c;
         let lastMessage = null;
@@ -182,6 +212,10 @@ export class LangGraphClient extends Client {
         }
         return result;
     }
+    /**
+     * @zh 组合工具消息，将 AI 的工具调用和工具的执行结果关联起来。
+     * @en Composes tool messages, associating AI tool calls with tool execution results.
+     */
     composeToolMessages(messages) {
         var _a;
         const result = [];
@@ -219,6 +253,10 @@ export class LangGraphClient extends Client {
         }
         return result;
     }
+    /**
+     * @zh 获取 Token 计数器信息。
+     * @en Gets the Token counter information.
+     */
     get tokenCounter() {
         return this.graphMessages.reduce((acc, message) => {
             var _a, _b, _c, _d, _e;
@@ -240,6 +278,10 @@ export class LangGraphClient extends Client {
             output_tokens: 0,
         });
     }
+    /**
+     * @zh 注册流式更新的回调函数。
+     * @en Registers a callback function for streaming updates.
+     */
     onStreamingUpdate(callback) {
         this.streamingCallbacks.add(callback);
         return () => {
@@ -249,12 +291,20 @@ export class LangGraphClient extends Client {
     emitStreamingUpdate(event) {
         this.streamingCallbacks.forEach((callback) => callback(event));
     }
+    /**
+     * @zh 取消当前的 Run。
+     * @en Cancels the current Run.
+     */
     cancelRun() {
         var _a, _b;
         if (((_a = this.currentThread) === null || _a === void 0 ? void 0 : _a.thread_id) && ((_b = this.currentRun) === null || _b === void 0 ? void 0 : _b.run_id)) {
             this.runs.cancel(this.currentThread.thread_id, this.currentRun.run_id);
         }
     }
+    /**
+     * @zh 发送消息到 LangGraph 后端。
+     * @en Sends a message to the LangGraph backend.
+     */
     async sendMessage(input, { extraParams, _debug, command } = {}) {
         if (!this.currentAssistant) {
             throw new Error("Thread or Assistant not initialized");
@@ -366,7 +416,10 @@ export class LangGraphClient extends Client {
         const result = await this.tools.callTool(message.name, args, { client: that, message });
         return this.resume(result);
     }
-    /** 恢复消息，当中断流时使用 */
+    /**
+     * @zh 继续被前端工具中断的流程。
+     * @en Resumes a process interrupted by a frontend tool.
+     */
     resume(result) {
         return this.sendMessage([], {
             command: {
@@ -374,7 +427,10 @@ export class LangGraphClient extends Client {
             },
         });
     }
-    /** 完成工具等待 */
+    /**
+     * @zh 标记前端工具等待已完成。
+     * @en Marks the frontend tool waiting as completed.
+     */
     doneFEToolWaiting(id, result) {
         var _a;
         const done = this.tools.doneWaiting(id, result);
@@ -382,12 +438,24 @@ export class LangGraphClient extends Client {
             this.resume(result);
         }
     }
+    /**
+     * @zh 获取当前的 Thread。
+     * @en Gets the current Thread.
+     */
     getCurrentThread() {
         return this.currentThread;
     }
+    /**
+     * @zh 获取当前的 Assistant。
+     * @en Gets the current Assistant.
+     */
     getCurrentAssistant() {
         return this.currentAssistant;
     }
+    /**
+     * @zh 重置客户端状态。
+     * @en Resets the client state.
+     */
     async reset() {
         var _a;
         await this.initAssistant((_a = this.currentAssistant) === null || _a === void 0 ? void 0 : _a.name);