@langgraph-js/sdk 1.3.2 → 1.5.0

package/dist/LangGraphClient.d.ts

@@ -119,6 +119,7 @@ export declare class LangGraphClient extends Client {
     /** 图发过来的更新信息 */
     graphMessages: RenderMessage[];
     cloneMessage(message: Message): Message;
+    private updateStreamingMessage;
     private replaceMessageWithValuesMessage;
     /**
      * @zh 用于 UI 中的流式渲染中的消息。
@@ -164,6 +165,8 @@ export declare class LangGraphClient extends Client {
      * @en Sends a message to the LangGraph backend.
      */
     sendMessage(input: string | Message[], { extraParams, _debug, command }?: SendMessageOptions): Promise<any[]>;
+    /** 子图的数据需要通过 merge 的方式重新进行合并更新 */
+    private mergeSubGraphMessagesToStreamingMessages;
     private runFETool;
     private callFETool;
     /**

package/dist/LangGraphClient.js

@@ -126,6 +126,14 @@ export class LangGraphClient extends Client {
     cloneMessage(message) {
         return JSON.parse(JSON.stringify(message));
     }
+    updateStreamingMessage(message) {
+        const lastMessage = this.streamingMessage[this.streamingMessage.length - 1];
+        if (!(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.id) || message.id !== lastMessage.id) {
+            this.streamingMessage.push(message);
+            return;
+        }
+        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]);
@@ -145,8 +153,10 @@ export class LangGraphClient extends Client {
     get renderMessage() {
         var _a;
         const previousMessage = new Map();
+        const closedToolCallIds = new Set();
         const result = [];
         const inputMessages = [...this.graphMessages, ...this.streamingMessage];
+        console.log(inputMessages);
         // 从后往前遍历，这样可以保证最新的消息在前面
         for (let i = inputMessages.length - 1; i >= 0; i--) {
             const message = this.cloneMessage(inputMessages[i]);
@@ -164,7 +174,11 @@ export class LangGraphClient extends Client {
                 previousMessage.set(message.id, m);
                 /** @ts-ignore */
                 const tool_calls = ((_a = m.tool_calls) === null || _a === void 0 ? void 0 : _a.length) ? m.tool_calls : m.tool_call_chunks;
-                const new_tool_calls = tool_calls.map((tool, index) => {
+                const new_tool_calls = tool_calls
+                    .filter((i) => {
+                    return !closedToolCallIds.has(i.id);
+                })
+                    .map((tool, index) => {
                     var _a, _b, _c, _d;
                     return this.replaceMessageWithValuesMessage({
                         type: "tool",
@@ -186,6 +200,9 @@ export class LangGraphClient extends Client {
                 result.unshift(m);
             }
             else {
+                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);
@@ -364,7 +381,7 @@ export class LangGraphClient extends Client {
             }
             else if (chunk.event === "messages/partial") {
                 for (const message of chunk.data) {
-                    this.streamingMessage.push(message);
+                    this.updateStreamingMessage(message);
                 }
                 this.emitStreamingUpdate({
                     type: "message",
@@ -372,7 +389,7 @@ export class LangGraphClient extends Client {
                 });
                 continue;
             }
-            else if (chunk.event.startsWith("values")) {
+            else if (chunk.event === "values") {
                 const data = chunk.data;
                 if (data.messages) {
                     const isResume = !!(command === null || command === void 0 ? void 0 : command.resume);
@@ -390,6 +407,12 @@ export class LangGraphClient extends Client {
                 this.streamingMessage = [];
                 continue;
             }
+            else if (chunk.event.startsWith("values|")) {
+                // 这个 values 必然是子 values
+                if (chunk.data.messages) {
+                    this.mergeSubGraphMessagesToStreamingMessages(chunk.data.messages);
+                }
+            }
         }
         this.streamingMessage = [];
         const data = await this.runFETool();
@@ -403,6 +426,23 @@ export class LangGraphClient extends Client {
         });
         return streamRecord;
     }
+    /** 子图的数据需要通过 merge 的方式重新进行合并更新 */
+    mergeSubGraphMessagesToStreamingMessages(messages) {
+        const map = new Map(messages.filter((i) => i.id).map((i) => [i.id, i]));
+        this.streamingMessage.forEach((i) => {
+            if (map.has(i.id)) {
+                const newValue = map.get(i.id);
+                Object.assign(i, newValue);
+                map.delete(i.id);
+            }
+        });
+        // 剩余的 message 一定不在 streamMessage 中
+        map.forEach((i) => {
+            if (i.type === "tool" && i.tool_call_id) {
+                this.streamingMessage.push(i);
+            }
+        });
+    }
     runFETool() {
         var _a;
         const data = this.graphMessages;

package/dist/tool/ToolUI.d.ts

@@ -0,0 +1,10 @@
+import { RenderMessage } from "../LangGraphClient.js";
+import { LangGraphClient } from "../LangGraphClient.js";
+export declare class ToolRenderData<D> {
+    message: RenderMessage;
+    client: LangGraphClient;
+    constructor(message: RenderMessage, client: LangGraphClient);
+    get state(): "done" | "idle";
+    get input(): any;
+    response(data: D): void;
+}

package/dist/tool/ToolUI.js

@@ -0,0 +1,24 @@
+export class ToolRenderData {
+    constructor(message, client) {
+        this.message = message;
+        this.client = client;
+    }
+    get state() {
+        var _a, _b;
+        if (this.message.type === "tool" && ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.additional_kwargs) === null || _b === void 0 ? void 0 : _b.done)) {
+            return "done";
+        }
+        return "idle";
+    }
+    get input() {
+        try {
+            return JSON.parse(this.message.tool_input);
+        }
+        catch (e) {
+            return null;
+        }
+    }
+    response(data) {
+        this.client.doneFEToolWaiting(this.message.id, JSON.stringify(data));
+    }
+}

package/dist/tool/createTool.d.ts

@@ -1,7 +1,8 @@
 import { z, ZodRawShape, ZodTypeAny } from "zod";
 import { Action, Parameter } from "./copilotkit-actions.js";
 import { Message } from "@langchain/langgraph-sdk";
-export interface UnionTool<Args extends ZodRawShape> {
+import { ToolRenderData } from "./ToolUI.js";
+export interface UnionTool<Args extends ZodRawShape, Child extends Object = Object> {
     name: string;
     description: string;
     parameters: Args;
@@ -10,6 +11,8 @@ export interface UnionTool<Args extends ZodRawShape> {
     execute: ToolCallback<Args>;
     /** 工具执行成功后触发的附加消息 */
     callbackMessage?: (result: CallToolResult) => Message[];
+    render?: <D>(tool: ToolRenderData<D>) => Child;
+    onlyRender?: boolean;
 }
 export type ToolCallback<Args extends ZodRawShape> = (args: z.objectOutputType<Args, ZodTypeAny>, context?: any) => CallToolResult | Promise<CallToolResult>;
 export type CallToolResult = string | {
@@ -17,7 +20,7 @@ export type CallToolResult = string | {
     text: string;
 }[];
 /** 用于格式校验 */
-export declare const createTool: <Args extends ZodRawShape>(tool: UnionTool<Args>) => UnionTool<Args>;
+export declare const createTool: <Args extends ZodRawShape>(tool: UnionTool<Args>) => UnionTool<Args, Object>;
 /** 提供一种兼容 copilotkit 的定义方式，简化定义形式
  * 来自 copilotkit 的 frontend action
  */
@@ -45,3 +48,18 @@ export declare const createMCPTool: <Args extends ZodRawShape>(tool: UnionTool<A
     }[];
     isError: boolean;
 }>))[];
+export declare const createToolUI: <Args extends Parameter[] | [] = [], Child extends Object = {}>(tool: Action<Args> & {
+    render?: (tool: ToolRenderData<any>) => Child;
+    onlyRender?: boolean;
+}) => {
+    render: ((tool: ToolRenderData<any>) => Child) | undefined;
+    onlyRender: boolean | undefined;
+    name: string;
+    description: string;
+    parameters: z.ZodRawShape;
+    /** 是否直接返回工具结果，而不是通过消息返回 */
+    returnDirect?: boolean;
+    execute: ToolCallback<z.ZodRawShape>;
+    /** 工具执行成功后触发的附加消息 */
+    callbackMessage?: (result: CallToolResult) => Message[];
+};

package/dist/tool/createTool.js

@@ -59,3 +59,10 @@ export const createMCPTool = (tool) => {
         },
     ];
 };
+export const createToolUI = (tool) => {
+    return {
+        ...createFETool(tool),
+        render: tool.render,
+        onlyRender: tool.onlyRender,
+    };
+};

package/dist/tool/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./createTool.js";
 export * from "./copilotkit-actions.js";
+export * from "./ToolUI.js";

package/dist/tool/index.js

@@ -1,2 +1,3 @@
 export * from "./createTool.js";
 export * from "./copilotkit-actions.js";
+export * from "./ToolUI.js";

package/dist/ui-store/createChatStore.d.ts

@@ -87,5 +87,6 @@ export declare const createChatStore: (initClientName: string, config: LangGraph
         deleteHistoryChat(thread: Thread<{
             messages: Message[];
         }>): Promise<void>;
+        getToolUIRender: (tool_name: string) => ((message: RenderMessage) => Object) | null;
     };
 };

package/dist/ui-store/createChatStore.js

@@ -1,6 +1,7 @@
 import { atom } from "nanostores";
 import { LangGraphClient } from "../LangGraphClient.js";
 import { rafDebounce } from "./rafDebounce.js";
+import { ToolRenderData } from "../tool/ToolUI.js";
 /**
  * @zh 格式化日期对象为时间字符串。
  * @en Formats a Date object into a time string.
@@ -189,6 +190,12 @@ export const createChatStore = (initClientName, config, context = {}) => {
         const prev = historyList.get();
         historyList.set([thread, ...prev]);
     };
+    const getToolUIRender = (tool_name) => {
+        var _a;
+        const toolsDefine = client.get().tools.getAllTools();
+        const tool = (_a = toolsDefine.find((i) => i.name === tool_name)) === null || _a === void 0 ? void 0 : _a.render;
+        return tool ? (message) => tool(new ToolRenderData(message, client.get())) : null;
+    };
     return {
         data: {
             client,
@@ -271,6 +278,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
                 await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.threads.delete(thread.thread_id));
                 await refreshHistoryList();
             },
+            getToolUIRender,
         },
     };
 };

package/package.json

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

package/src/LangGraphClient.ts

@@ -172,6 +172,7 @@ export class LangGraphClient extends Client {
             sortOrder: "desc",
         });
     }
+
     /**
      * @zh 从历史中恢复 Thread 数据。
      * @en Resets the Thread data from history.
@@ -198,6 +199,14 @@ export class LangGraphClient extends Client {
     cloneMessage(message: Message): Message {
         return JSON.parse(JSON.stringify(message));
     }
+    private updateStreamingMessage(message: RenderMessage) {
+        const lastMessage = this.streamingMessage[this.streamingMessage.length - 1];
+        if (!lastMessage?.id || message.id !== lastMessage.id) {
+            this.streamingMessage.push(message);
+            return;
+        }
+        this.streamingMessage[this.streamingMessage.length - 1] = message;
+    }
     private replaceMessageWithValuesMessage(message: AIMessage | ToolMessage, isTool = false): Message {
         const key = (isTool ? "tool_call_id" : "id") as any as "id";
         const valuesMessage = this.graphMessages.find((i) => i[key] === message[key]);
@@ -217,9 +226,10 @@ export class LangGraphClient extends Client {
      */
     get renderMessage() {
         const previousMessage = new Map<string, Message>();
+        const closedToolCallIds = new Set<string>();
         const result: Message[] = [];
         const inputMessages = [...this.graphMessages, ...this.streamingMessage];
-
+        console.log(inputMessages);
         // 从后往前遍历，这样可以保证最新的消息在前面
         for (let i = inputMessages.length - 1; i >= 0; i--) {
             const message = this.cloneMessage(inputMessages[i]);
@@ -241,21 +251,25 @@ export class LangGraphClient extends Client {
 
                 /** @ts-ignore */
                 const tool_calls: NonNullable<AIMessage["tool_calls"]> = (m as AIMessage).tool_calls?.length ? (m as AIMessage).tool_calls : (m as RenderMessage).tool_call_chunks;
-                const new_tool_calls = tool_calls!.map((tool, index) => {
-                    return this.replaceMessageWithValuesMessage(
-                        {
-                            type: "tool",
-                            additional_kwargs: {},
-                            /** @ts-ignore */
-                            tool_input: m.additional_kwargs?.tool_calls?.[index]?.function?.arguments,
-                            id: tool.id,
-                            name: tool.name,
-                            response_metadata: {},
-                            tool_call_id: tool.id!,
-                        },
-                        true
-                    );
-                });
+                const new_tool_calls = tool_calls
+                    .filter((i) => {
+                        return !closedToolCallIds.has(i.id!);
+                    })!
+                    .map((tool, index) => {
+                        return this.replaceMessageWithValuesMessage(
+                            {
+                                type: "tool",
+                                additional_kwargs: {},
+                                /** @ts-ignore */
+                                tool_input: m.additional_kwargs?.tool_calls?.[index]?.function?.arguments,
+                                id: tool.id,
+                                name: tool.name,
+                                response_metadata: {},
+                                tool_call_id: tool.id!,
+                            },
+                            true
+                        );
+                    });
                 for (const tool of new_tool_calls) {
                     if (!previousMessage.has(tool.id!)) {
                         result.unshift(tool);
@@ -264,6 +278,9 @@ export class LangGraphClient extends Client {
                 }
                 result.unshift(m);
             } else {
+                if (message.type === "tool" && message.tool_call_id) {
+                    closedToolCallIds.add(message.tool_call_id);
+                }
                 // 记录这个 id 的消息，并添加到结果中
                 const m = this.replaceMessageWithValuesMessage(message as AIMessage);
                 previousMessage.set(message.id, m);
@@ -450,14 +467,14 @@ export class LangGraphClient extends Client {
                 });
             } else if (chunk.event === "messages/partial") {
                 for (const message of chunk.data) {
-                    this.streamingMessage.push(message);
+                    this.updateStreamingMessage(message);
                 }
                 this.emitStreamingUpdate({
                     type: "message",
                     data: chunk,
                 });
                 continue;
-            } else if (chunk.event.startsWith("values")) {
+            } else if (chunk.event === "values") {
                 const data = chunk.data as { messages: Message[] };
 
                 if (data.messages) {
@@ -475,6 +492,11 @@ export class LangGraphClient extends Client {
                 this.graphState = chunk.data;
                 this.streamingMessage = [];
                 continue;
+            } else if (chunk.event.startsWith("values|")) {
+                // 这个 values 必然是子 values
+                if (chunk.data.messages) {
+                    this.mergeSubGraphMessagesToStreamingMessages(chunk.data.messages);
+                }
             }
         }
         this.streamingMessage = [];
@@ -488,6 +510,23 @@ export class LangGraphClient extends Client {
         });
         return streamRecord;
     }
+    /** 子图的数据需要通过 merge 的方式重新进行合并更新 */
+    private mergeSubGraphMessagesToStreamingMessages(messages: Message[]) {
+        const map = new Map(messages.filter((i) => i.id).map((i) => [i.id!, i]));
+        this.streamingMessage.forEach((i) => {
+            if (map.has(i.id!)) {
+                const newValue = map.get(i.id!)!;
+                Object.assign(i, newValue);
+                map.delete(i.id!);
+            }
+        });
+        // 剩余的 message 一定不在 streamMessage 中
+        map.forEach((i) => {
+            if (i.type === "tool" && i.tool_call_id) {
+                this.streamingMessage.push(i as RenderMessage);
+            }
+        });
+    }
     private runFETool() {
         const data = this.graphMessages;
         const lastMessage = data[data.length - 1];

package/src/tool/ToolUI.ts

@@ -0,0 +1,26 @@
+import { RenderMessage } from "../LangGraphClient.js";
+
+import { LangGraphClient } from "../LangGraphClient.js";
+
+export class ToolRenderData<D> {
+    constructor(
+        public message: RenderMessage,
+        public client: LangGraphClient
+    ) {}
+    get state() {
+        if (this.message.type === "tool" && this.message?.additional_kwargs?.done) {
+            return "done";
+        }
+        return "idle";
+    }
+    get input() {
+        try {
+            return JSON.parse(this.message.tool_input!);
+        } catch (e) {
+            return null;
+        }
+    }
+    response(data: D) {
+        this.client.doneFEToolWaiting(this.message.id!, JSON.stringify(data));
+    }
+}

package/src/tool/createTool.ts

@@ -3,8 +3,9 @@ import { z, ZodRawShape, ZodTypeAny } from "zod";
 import { Action, Parameter } from "./copilotkit-actions.js";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import { Message } from "@langchain/langgraph-sdk";
+import { ToolRenderData } from "./ToolUI.js";
 
-export interface UnionTool<Args extends ZodRawShape> {
+export interface UnionTool<Args extends ZodRawShape, Child extends Object = Object> {
     name: string;
     description: string;
     parameters: Args;
@@ -13,6 +14,8 @@ export interface UnionTool<Args extends ZodRawShape> {
     execute: ToolCallback<Args>;
     /** 工具执行成功后触发的附加消息 */
     callbackMessage?: (result: CallToolResult) => Message[];
+    render?: <D>(tool: ToolRenderData<D>) => Child;
+    onlyRender?: boolean;
 }
 export type ToolCallback<Args extends ZodRawShape> = (args: z.objectOutputType<Args, ZodTypeAny>, context?: any) => CallToolResult | Promise<CallToolResult>;
 
@@ -76,3 +79,11 @@ export const createMCPTool = <Args extends ZodRawShape>(tool: UnionTool<Args>) =
         },
     ];
 };
+
+export const createToolUI = <Args extends Parameter[] | [] = [], Child extends Object = {}>(tool: Action<Args> & { render?: (tool: ToolRenderData<any>) => Child; onlyRender?: boolean }) => {
+    return {
+        ...createFETool(tool),
+        render: tool.render,
+        onlyRender: tool.onlyRender,
+    };
+};

package/src/tool/index.ts

@@ -1,2 +1,3 @@
 export * from "./createTool.js";
 export * from "./copilotkit-actions.js";
+export * from "./ToolUI.js";

package/src/ui-store/createChatStore.ts

@@ -2,6 +2,7 @@ import { atom } from "nanostores";
 import { LangGraphClient, LangGraphClientConfig, RenderMessage, SendMessageOptions } from "../LangGraphClient.js";
 import { AssistantGraph, Message, Thread } from "@langchain/langgraph-sdk";
 import { rafDebounce } from "./rafDebounce.js";
+import { ToolRenderData } from "../tool/ToolUI.js";
 
 /**
  * @zh 格式化日期对象为时间字符串。
@@ -198,7 +199,11 @@ export const createChatStore = (
         const prev = historyList.get();
         historyList.set([thread, ...prev]);
     };
-
+    const getToolUIRender = (tool_name: string) => {
+        const toolsDefine = client.get()!.tools.getAllTools();
+        const tool = toolsDefine.find((i) => i.name === tool_name!)?.render;
+        return tool ? (message: RenderMessage) => tool(new ToolRenderData(message, client.get()!)) : null;
+    };
     return {
         data: {
             client,
@@ -282,6 +287,7 @@ export const createChatStore = (
                 await client.get()?.threads.delete(thread.thread_id);
                 await refreshHistoryList();
             },
+            getToolUIRender,
         },
     };
 };