@langgraph-js/sdk 3.3.0 → 3.4.0

package/dist/LangGraphClient.d.ts

@@ -222,6 +222,7 @@ export declare class LangGraphClient<TStateType = unknown> extends EventEmitter<
     revertChatTo(messageId: string): Promise<{
         messages: Message[];
     }>;
+    messagesMetadata: {};
     /**
      * @zh 发送消息到 LangGraph 后端。
      * @en Sends a message to the LangGraph backend.

package/dist/LangGraphClient.js

@@ -17,6 +17,7 @@ export class LangGraphClient extends EventEmitter {
         this.stopController = null;
         /** 用于存储 subAgent 状态数据的键 */
         this.subAgentsKey = "task_store";
+        this.messagesMetadata = {};
         /** 当前子图位置，但是依赖 stream，不太适合稳定使用*/
         this.graphPosition = "";
         this.extraParams = {};
@@ -146,7 +147,7 @@ export class LangGraphClient extends EventEmitter {
      * @en Messages used for streaming rendering in the UI.
      */
     get renderMessage() {
-        return this.messageProcessor.renderMessages(this.graphState, () => this.getGraphNodeNow());
+        return this.messageProcessor.renderMessages(this.graphState, () => this.getGraphNodeNow(), this.messagesMetadata);
     }
     /**
      * @zh 获取 Token 计数器信息。
@@ -245,7 +246,7 @@ export class LangGraphClient extends EventEmitter {
                     messages: messagesToSend,
                     fe_tools: await this.tools.toJSON(this.currentAssistant.graph_id),
                 },
-                streamMode: ["messages", "values", "updates"],
+                streamMode: ["messages", "values"],
                 streamSubgraphs: true,
                 command,
             });
@@ -263,6 +264,10 @@ export class LangGraphClient extends EventEmitter {
             else if (chunk.event === "error" || chunk.event === "Error" || chunk.event === "__stream_error__") {
                 this.emit("error", chunk);
             }
+            else if (chunk.event === "messages/metadata") {
+                Object.assign(this.messagesMetadata, chunk.data);
+                continue;
+            }
             else if (chunk.event === "messages/partial") {
                 for (const message of chunk.data) {
                     this.messageProcessor.updateStreamingMessage(message);

package/dist/MessageProcessor.d.ts

@@ -78,17 +78,23 @@ export declare class MessageProcessor {
      * @zh 转换 subAgent 消息为工具的子消息
      * @en Convert subAgent messages to tool sub-messages
      */
-    convertSubAgentMessages(messages: RenderMessage[], graphState: any): RenderMessage[];
+    convertSubAgentMessages(messages: RenderMessage[], graphState: any, messagesMetadata: Record<string, {
+        subagent_id?: string;
+    }>): RenderMessage[];
     /**
      * @zh 生成用于 UI 中的流式渲染的消息
      * @en Generate messages used for streaming rendering in the UI
      */
     renderMessages(graphState: any, getGraphNodeNow: () => {
         name: string;
-    }): RenderMessage[];
+    }, messagesMetadata: Record<string, {
+        subagent_id?: string;
+    }>): RenderMessage[];
     /**
      * @zh 统一的消息处理入口，按顺序执行所有处理步骤
      * @en Unified message processing entry point, executing all processing steps in order
      */
-    processMessages(messages: RenderMessage[], graphState?: any): RenderMessage[];
+    processMessages(messages: RenderMessage[], graphState: any, messagesMetadata: Record<string, {
+        subagent_id?: string;
+    }>): RenderMessage[];
 }

package/dist/MessageProcessor.js

@@ -194,7 +194,7 @@ export class MessageProcessor {
      * @zh 转换 subAgent 消息为工具的子消息
      * @en Convert subAgent messages to tool sub-messages
      */
-    convertSubAgentMessages(messages, graphState) {
+    convertSubAgentMessages(messages, graphState, messagesMetadata) {
         const origin_task_store = graphState[this.subAgentsKey];
         if (!origin_task_store)
             return messages;
@@ -202,11 +202,12 @@ export class MessageProcessor {
         /** 获取 subAgent 消息的 id，用于流式过程中对数据进行标记 */
         messages
             .filter((i) => {
-            var _a;
-            return (_a = i.node_name) === null || _a === void 0 ? void 0 : _a.startsWith("subagent_");
+            var _a, _b;
+            return ((_a = messagesMetadata[i.id]) === null || _a === void 0 ? void 0 : _a.subagent_id) || ((_b = i.node_name) === null || _b === void 0 ? void 0 : _b.startsWith("subagent_"));
         })
             .forEach((i) => {
-            const tool_call_id = i.node_name.replace("subagent_", "");
+            var _a;
+            const tool_call_id = ((_a = messagesMetadata[i.id]) === null || _a === void 0 ? void 0 : _a.subagent_id) || i.node_name.replace("subagent_", "");
             const store = task_store[tool_call_id];
             if (store) {
                 // 根据 id 进行去重
@@ -233,7 +234,7 @@ export class MessageProcessor {
                 const task = task_store[message.tool_call_id];
                 if (task) {
                     // 递归处理子消息，但避免重复处理
-                    message.sub_agent_messages = this.processMessages(task.messages);
+                    message.sub_agent_messages = this.processMessages(task.messages, task, messagesMetadata);
                 }
             }
             if (message.id && ignoreIds.has(message.id))
@@ -246,7 +247,7 @@ export class MessageProcessor {
      * @zh 生成用于 UI 中的流式渲染的消息
      * @en Generate messages used for streaming rendering in the UI
      */
-    renderMessages(graphState, getGraphNodeNow) {
+    renderMessages(graphState, getGraphNodeNow, messagesMetadata) {
         var _a;
         const previousMessage = new Map();
         const closedToolCallIds = new Set();
@@ -304,20 +305,20 @@ export class MessageProcessor {
                 result.unshift(message);
             }
         }
-        return this.processMessages(result, graphState);
+        return this.processMessages(result, graphState, messagesMetadata);
     }
     /**
      * @zh 统一的消息处理入口，按顺序执行所有处理步骤
      * @en Unified message processing entry point, executing all processing steps in order
      */
-    processMessages(messages, graphState) {
+    processMessages(messages, graphState, messagesMetadata) {
         // 1. 组合工具消息
         const composedMessages = this.composeToolMessages(messages);
         // 2. 附加信息
         const messagesWithInfo = this.attachInfoForMessage(composedMessages);
         // 3. 转换子代理消息（如果提供了 graphState）
         if (graphState) {
-            return this.convertSubAgentMessages(messagesWithInfo, graphState);
+            return this.convertSubAgentMessages(messagesWithInfo, graphState, messagesMetadata);
         }
         return messagesWithInfo;
     }

package/dist/ui-store/createChatStore.js

@@ -9,7 +9,7 @@ import { useArtifacts } from "../artifacts/index.js";
  * @en Formats a Date object into a time string.
  */
 export const formatTime = (date) => {
-    return date.toLocaleTimeString("en-US");
+    return date.toLocaleTimeString();
 };
 /**
  * @zh 格式化数字为带千位分隔符的字符串。
@@ -46,7 +46,8 @@ export const getMessageContent = (content) => {
  */
 export const getHistoryContent = (thread) => {
     var _a, _b, _c;
-    const content = (_c = (_b = (_a = thread === null || thread === void 0 ? void 0 : thread.values) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.content;
+    /** @ts-ignore */
+    const content = thread.title || thread.name || ((_c = (_b = (_a = thread === null || thread === void 0 ? void 0 : thread.values) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.content);
     if (content && Array.isArray(content)) {
         return content.map((item) => {
             if (item.type === "text") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "3.3.0",
+  "version": "3.4.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

@@ -240,7 +240,7 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
      * @en Messages used for streaming rendering in the UI.
      */
     get renderMessage() {
-        return this.messageProcessor.renderMessages(this.graphState, () => this.getGraphNodeNow());
+        return this.messageProcessor.renderMessages(this.graphState, () => this.getGraphNodeNow(), this.messagesMetadata);
     }
     /**
      * @zh 获取 Token 计数器信息。
@@ -304,6 +304,7 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
         this.messageProcessor.setGraphMessages(state.messages! as RenderMessage[]);
         return state;
     }
+    public messagesMetadata = {};
     /**
      * @zh 发送消息到 LangGraph 后端。
      * @en Sends a message to the LangGraph backend.
@@ -346,7 +347,7 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
                     messages: messagesToSend,
                     fe_tools: await this.tools.toJSON(this.currentAssistant!.graph_id),
                 },
-                streamMode: ["messages", "values", "updates"],
+                streamMode: ["messages", "values"],
                 streamSubgraphs: true,
                 command,
             });
@@ -363,6 +364,9 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
                 this.currentRun = chunk.data;
             } else if (chunk.event === "error" || chunk.event === "Error" || chunk.event === "__stream_error__") {
                 this.emit("error", chunk);
+            } else if (chunk.event === "messages/metadata") {
+                Object.assign(this.messagesMetadata, chunk.data);
+                continue;
             } else if (chunk.event === "messages/partial") {
                 for (const message of chunk.data) {
                     this.messageProcessor.updateStreamingMessage(message);

package/src/MessageProcessor.ts

@@ -216,7 +216,16 @@ export class MessageProcessor {
      * @zh 转换 subAgent 消息为工具的子消息
      * @en Convert subAgent messages to tool sub-messages
      */
-    convertSubAgentMessages(messages: RenderMessage[], graphState: any): RenderMessage[] {
+    convertSubAgentMessages(
+        messages: RenderMessage[],
+        graphState: any,
+        messagesMetadata: Record<
+            string,
+            {
+                subagent_id?: string;
+            }
+        >
+    ): RenderMessage[] {
         const origin_task_store = graphState[this.subAgentsKey];
         if (!origin_task_store) return messages;
 
@@ -225,10 +234,10 @@ export class MessageProcessor {
         /** 获取 subAgent 消息的 id，用于流式过程中对数据进行标记 */
         messages
             .filter((i) => {
-                return i.node_name?.startsWith("subagent_");
+                return messagesMetadata[i.id!]?.subagent_id || i.node_name?.startsWith("subagent_");
             })
             .forEach((i) => {
-                const tool_call_id = i.node_name!.replace("subagent_", "");
+                const tool_call_id = messagesMetadata[i.id!]?.subagent_id || i.node_name!.replace("subagent_", "");
                 const store = task_store[tool_call_id];
                 if (store) {
                     // 根据 id 进行去重
@@ -256,7 +265,7 @@ export class MessageProcessor {
                 const task = task_store[message.tool_call_id];
                 if (task) {
                     // 递归处理子消息，但避免重复处理
-                    message.sub_agent_messages = this.processMessages(task.messages);
+                    message.sub_agent_messages = this.processMessages(task.messages, task, messagesMetadata);
                 }
             }
             if (message.id && ignoreIds.has(message.id)) continue;
@@ -269,7 +278,16 @@ export class MessageProcessor {
      * @zh 生成用于 UI 中的流式渲染的消息
      * @en Generate messages used for streaming rendering in the UI
      */
-    renderMessages(graphState: any, getGraphNodeNow: () => { name: string }): RenderMessage[] {
+    renderMessages(
+        graphState: any,
+        getGraphNodeNow: () => { name: string },
+        messagesMetadata: Record<
+            string,
+            {
+                subagent_id?: string;
+            }
+        >
+    ): RenderMessage[] {
         const previousMessage = new Map<string, Message>();
         const closedToolCallIds = new Set<string>();
         const result: Message[] = [];
@@ -328,14 +346,23 @@ export class MessageProcessor {
             }
         }
 
-        return this.processMessages(result as RenderMessage[], graphState);
+        return this.processMessages(result as RenderMessage[], graphState, messagesMetadata);
     }
 
     /**
      * @zh 统一的消息处理入口，按顺序执行所有处理步骤
      * @en Unified message processing entry point, executing all processing steps in order
      */
-    processMessages(messages: RenderMessage[], graphState?: any): RenderMessage[] {
+    processMessages(
+        messages: RenderMessage[],
+        graphState: any,
+        messagesMetadata: Record<
+            string,
+            {
+                subagent_id?: string;
+            }
+        >
+    ): RenderMessage[] {
         // 1. 组合工具消息
         const composedMessages = this.composeToolMessages(messages);
 
@@ -344,7 +371,7 @@ export class MessageProcessor {
 
         // 3. 转换子代理消息（如果提供了 graphState）
         if (graphState) {
-            return this.convertSubAgentMessages(messagesWithInfo, graphState);
+            return this.convertSubAgentMessages(messagesWithInfo, graphState, messagesMetadata);
         }
 
         return messagesWithInfo;

package/src/ui-store/createChatStore.ts

@@ -12,7 +12,7 @@ import { useArtifacts } from "../artifacts/index.js";
  * @en Formats a Date object into a time string.
  */
 export const formatTime = (date: Date) => {
-    return date.toLocaleTimeString("en-US");
+    return date.toLocaleTimeString();
 };
 
 /**
@@ -47,7 +47,8 @@ export const getMessageContent = (content: any) => {
  * @en Gets the text representation of Thread content in history.
  */
 export const getHistoryContent = (thread: Thread) => {
-    const content = (thread?.values as any)?.messages?.[0]?.content;
+    /** @ts-ignore */
+    const content: string | any[] = thread.title || thread.name || (thread?.values as any)?.messages?.[0]?.content;
     if (content && Array.isArray(content)) {
         return content.map((item: any) => {
             if (item.type === "text") {