@langgraph-js/sdk 1.7.9 → 1.7.11

package/dist/LangGraphClient.d.ts

@@ -40,6 +40,7 @@ export type RenderMessage = Message & {
         input_tokens: number;
         output_tokens: number;
     };
+    tool_call_id?: string;
     response_metadata?: {
         create_time: string;
     };

package/dist/LangGraphClient.js

@@ -162,7 +162,7 @@ export class LangGraphClient extends Client {
         const closedToolCallIds = new Set();
         const result = [];
         const inputMessages = this.combineGraphMessagesWithStreamingMessages();
-        console.log(inputMessages);
+        // console.log(inputMessages);
         // 从后往前遍历，这样可以保证最新的消息在前面
         for (let i = inputMessages.length - 1; i >= 0; i--) {
             const message = this.cloneMessage(inputMessages[i]);
@@ -226,17 +226,13 @@ export class LangGraphClient extends Client {
         let lastMessage = null;
         for (const message of result) {
             const createTime = ((_a = message.response_metadata) === null || _a === void 0 ? void 0 : _a.create_time) || "";
-            try {
-                // 用长度作为渲染 id，长度变了就要重新渲染
-                message.unique_id = message.id + JSON.stringify(message.content).length;
-            }
-            catch (e) {
-                message.unique_id = message.id;
-            }
+            // 工具必须要使用 tool_call_id 来保证一致性
+            message.unique_id = message.tool_call_id || message.id;
             message.spend_time = new Date(createTime).getTime() - new Date(((_b = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.response_metadata) === null || _b === void 0 ? void 0 : _b.create_time) || createTime).getTime();
             if (!message.usage_metadata && ((_c = message.response_metadata) === null || _c === void 0 ? void 0 : _c.usage)) {
                 const usage = message.response_metadata.usage;
                 message.usage_metadata = {
+                    ...usage,
                     input_tokens: usage.prompt_tokens,
                     output_tokens: usage.completion_tokens,
                     total_tokens: usage.total_tokens,

package/dist/tool/ToolUI.d.ts

@@ -1,14 +1,18 @@
 import { RenderMessage } from "../LangGraphClient.js";
 import { LangGraphClient } from "../LangGraphClient.js";
-export declare class ToolRenderData<D> {
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export declare class ToolRenderData<I, D> {
     message: RenderMessage;
     client: LangGraphClient;
     constructor(message: RenderMessage, client: LangGraphClient);
-    get state(): "idle" | "done";
-    get input(): any;
+    get state(): "idle" | "done" | "loading";
+    get input(): I | null;
     get output(): string;
-    getJSONOutput(): any;
+    getJSONOutput(): D;
     /** 如果解析失败，则返回 null */
-    getJSONOutputSafe(): any;
+    getJSONOutputSafe(): D | null;
+    getInputRepaired(): DeepPartial<I>;
     response(data: D): void;
 }

package/dist/tool/ToolUI.js

@@ -1,4 +1,5 @@
 import { getMessageContent } from "../ui-store/createChatStore.js";
+import { jsonrepair } from "jsonrepair";
 export class ToolRenderData {
     constructor(message, client) {
         this.message = message;
@@ -9,6 +10,9 @@ export class ToolRenderData {
         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";
         }
+        if (this.message.tool_input) {
+            return "loading";
+        }
         return "idle";
     }
     get input() {
@@ -34,6 +38,14 @@ export class ToolRenderData {
             return null;
         }
     }
+    getInputRepaired() {
+        try {
+            return JSON.parse(jsonrepair(this.message.tool_input || ""));
+        }
+        catch (e) {
+            return {};
+        }
+    }
     response(data) {
         this.client.doneFEToolWaiting(this.message.id, JSON.stringify(data));
     }

package/dist/tool/createTool.d.ts

@@ -11,7 +11,7 @@ export interface UnionTool<Args extends ZodRawShape, Child extends Object = Obje
     execute: ToolCallback<Args>;
     /** 工具执行成功后触发的附加消息 */
     callbackMessage?: (result: CallToolResult) => Message[];
-    render?: <D>(tool: ToolRenderData<D>) => Child;
+    render?: <D>(tool: ToolRenderData<z.objectOutputType<Args, ZodTypeAny>, D>) => Child;
     onlyRender?: boolean;
     /** 只允许指定的 agent 使用该工具，如果未指定，则所有 agent 都可以使用 */
     allowAgent?: string[];
@@ -30,6 +30,7 @@ export declare const createTool: <Args extends ZodRawShape>(tool: UnionTool<Args
  */
 export declare const createFETool: <const T extends Parameter[], Args extends ZodRawShape>(tool: Action<T> & {
     allowAgent?: string[];
+    allowGraph?: string[];
 }) => UnionTool<Args>;
 export declare const createJSONDefineTool: <Args extends ZodRawShape>(tool: UnionTool<Args>) => {
     name: string;
@@ -56,10 +57,11 @@ export declare const createMCPTool: <Args extends ZodRawShape>(tool: UnionTool<A
 }>))[];
 export declare const createToolUI: <Args extends Parameter[] | [] = [], Child extends Object = {}>(tool: Action<Args> & {
     allowAgent?: string[];
-    render?: (tool: ToolRenderData<any>) => Child;
+    allowGraph?: string[];
+    render?: (tool: ToolRenderData<any, any>) => Child;
     onlyRender?: boolean;
 }) => {
-    render: ((tool: ToolRenderData<any>) => Child) | undefined;
+    render: ((tool: ToolRenderData<any, any>) => Child) | undefined;
     onlyRender: boolean | undefined;
     name: string;
     description: string;

package/dist/tool/createTool.js

@@ -16,6 +16,7 @@ export const createFETool = (tool) => {
         returnDirect: tool.returnDirect,
         callbackMessage: tool.callbackMessage,
         allowAgent: tool.allowAgent,
+        allowGraph: tool.allowGraph,
         async execute(args, context) {
             var _a;
             try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@langchain/langgraph-sdk": "^0.0.77",
+    "jsonrepair": "^3.12.0",
     "nanostores": "^1.0.1",
     "zod": "^3.25.17",
     "zod-to-json-schema": "^3.24.5"

package/src/LangGraphClient.ts

@@ -40,6 +40,7 @@ export type RenderMessage = Message & {
         input_tokens: number;
         output_tokens: number;
     };
+    tool_call_id?: string;
     response_metadata?: {
         create_time: string;
     };
@@ -231,7 +232,7 @@ export class LangGraphClient extends Client {
         const closedToolCallIds = new Set<string>();
         const result: Message[] = [];
         const inputMessages = this.combineGraphMessagesWithStreamingMessages();
-        console.log(inputMessages);
+        // console.log(inputMessages);
         // 从后往前遍历，这样可以保证最新的消息在前面
         for (let i = inputMessages.length - 1; i >= 0; i--) {
             const message = this.cloneMessage(inputMessages[i]);
@@ -295,12 +296,9 @@ export class LangGraphClient extends Client {
         let lastMessage: RenderMessage | null = null;
         for (const message of result) {
             const createTime = message.response_metadata?.create_time || "";
-            try {
-                // 用长度作为渲染 id，长度变了就要重新渲染
-                message.unique_id = message.id! + JSON.stringify(message.content).length;
-            } catch (e) {
-                message.unique_id = message.id!;
-            }
+            // 工具必须要使用 tool_call_id 来保证一致性
+            message.unique_id = message.tool_call_id! || message.id!;
+
             message.spend_time = new Date(createTime).getTime() - new Date(lastMessage?.response_metadata?.create_time || createTime).getTime();
             if (!message.usage_metadata && (message as AIMessage).response_metadata?.usage) {
                 const usage = (message as AIMessage).response_metadata!.usage as {
@@ -309,6 +307,7 @@ export class LangGraphClient extends Client {
                     total_tokens: number;
                 };
                 message.usage_metadata = {
+                    ...usage,
                     input_tokens: usage.prompt_tokens,
                     output_tokens: usage.completion_tokens,
                     total_tokens: usage.total_tokens,

package/src/tool/ToolUI.ts

@@ -2,8 +2,12 @@ import { RenderMessage } from "../LangGraphClient.js";
 
 import { LangGraphClient } from "../LangGraphClient.js";
 import { getMessageContent } from "../ui-store/createChatStore.js";
+import { jsonrepair } from "jsonrepair";
 
-export class ToolRenderData<D> {
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export class ToolRenderData<I, D> {
     constructor(
         public message: RenderMessage,
         public client: LangGraphClient
@@ -12,9 +16,12 @@ export class ToolRenderData<D> {
         if (this.message.type === "tool" && this.message?.additional_kwargs?.done) {
             return "done";
         }
+        if (this.message.tool_input) {
+            return "loading";
+        }
         return "idle";
     }
-    get input() {
+    get input(): I | null {
         try {
             return JSON.parse(this.message.tool_input!);
         } catch (e) {
@@ -24,17 +31,24 @@ export class ToolRenderData<D> {
     get output() {
         return getMessageContent(this.message.content);
     }
-    getJSONOutput() {
+    getJSONOutput(): D {
         return JSON.parse(this.output);
     }
     /** 如果解析失败，则返回 null */
-    getJSONOutputSafe() {
+    getJSONOutputSafe(): D | null {
         try {
             return JSON.parse(this.output);
         } catch (e) {
             return null;
         }
     }
+    getInputRepaired(): DeepPartial<I> {
+        try {
+            return JSON.parse(jsonrepair(this.message.tool_input || ""));
+        } catch (e) {
+            return {};
+        }
+    }
     response(data: D) {
         this.client.doneFEToolWaiting(this.message.id!, JSON.stringify(data));
     }

package/src/tool/createTool.ts

@@ -14,7 +14,7 @@ export interface UnionTool<Args extends ZodRawShape, Child extends Object = Obje
     execute: ToolCallback<Args>;
     /** 工具执行成功后触发的附加消息 */
     callbackMessage?: (result: CallToolResult) => Message[];
-    render?: <D>(tool: ToolRenderData<D>) => Child;
+    render?: <D>(tool: ToolRenderData<z.objectOutputType<Args, ZodTypeAny>, D>) => Child;
     onlyRender?: boolean;
     /** 只允许指定的 agent 使用该工具，如果未指定，则所有 agent 都可以使用 */
     allowAgent?: string[];
@@ -36,6 +36,7 @@ export const createTool = <Args extends ZodRawShape>(tool: UnionTool<Args>) => {
 export const createFETool = <const T extends Parameter[], Args extends ZodRawShape>(
     tool: Action<T> & {
         allowAgent?: string[];
+        allowGraph?: string[];
     }
 ): UnionTool<Args> => {
     return {
@@ -45,6 +46,7 @@ export const createFETool = <const T extends Parameter[], Args extends ZodRawSha
         returnDirect: tool.returnDirect,
         callbackMessage: tool.callbackMessage,
         allowAgent: tool.allowAgent,
+        allowGraph: tool.allowGraph,
         async execute(args, context) {
             try {
                 const result = await tool.handler?.(args, context);
@@ -92,7 +94,8 @@ export const createMCPTool = <Args extends ZodRawShape>(tool: UnionTool<Args>) =
 export const createToolUI = <Args extends Parameter[] | [] = [], Child extends Object = {}>(
     tool: Action<Args> & {
         allowAgent?: string[];
-        render?: (tool: ToolRenderData<any>) => Child;
+        allowGraph?: string[];
+        render?: (tool: ToolRenderData<any, any>) => Child;
         onlyRender?: boolean;
     }
 ) => {