@langgraph-js/sdk 4.3.0 → 4.3.2

package/dist/LangGraphClient.d.ts

@@ -13,6 +13,8 @@ export type RenderMessage = Message & {
     /** 工具入参 ，聚合而来*/
     tool_input?: string;
     additional_kwargs?: {
+        create_time: string;
+        update_time: string;
         done?: boolean;
         tool_calls?: {
             function: {
@@ -26,9 +28,6 @@ export type RenderMessage = Message & {
         output_tokens: number;
     };
     tool_call_id?: string;
-    response_metadata?: {
-        create_time: string;
-    };
     sub_messages?: RenderMessage[];
     /** 耗时 */
     spend_time?: number;
@@ -136,10 +135,7 @@ export declare class LangGraphClient<TStateType = unknown> extends EventEmitter<
     /** 代理 assistants 属性到内部 client */
     get assistants(): {
         search(query?: {
-            graphId? /**
-             * The maximum number of retries that can be made for a single call,
-             * with an exponential backoff between each attempt. Defaults to 6.
-             */: string;
+            graphId?: string;
             metadata?: import("@langchain/langgraph-sdk").Metadata;
             limit?: number;
             offset?: number;

package/dist/LangGraphClient.js

@@ -341,6 +341,7 @@ export class LangGraphClient extends EventEmitter {
         else if (chunk.event === "messages/partial" || chunk.event === "messages/complete") {
             for (const message of chunk.data) {
                 this.messageProcessor.updateStreamingMessage(message);
+                this.messageProcessor.spendTime.setSpendTime(message.id);
             }
             this.emit("message", chunk);
             return true;

package/dist/MessageProcessor.d.ts

@@ -1,5 +1,6 @@
 import { Message, AIMessage, ToolMessage } from "@langchain/langgraph-sdk";
 import { RenderMessage } from "./LangGraphClient.js";
+import { SpendTime } from "./SpendTime.js";
 /**
  * @zh StreamingMessageType 类用于判断消息的类型。
  * @en The StreamingMessageType class is used to determine the type of a message.
@@ -17,6 +18,7 @@ export declare class MessageProcessor {
     private streamingMessage;
     /** 图发过来的更新信息 */
     private graphMessages;
+    spendTime: SpendTime;
     constructor();
     /**
      * @zh 获取流式消息

package/dist/MessageProcessor.js

@@ -1,3 +1,5 @@
+import { SpendTime } from "./SpendTime.js";
+import { formatFullTime } from "./ui-store/createChatStore.js";
 /**
  * @zh StreamingMessageType 类用于判断消息的类型。
  * @en The StreamingMessageType class is used to determine the type of a message.
@@ -20,6 +22,7 @@ export class MessageProcessor {
     streamingMessage = [];
     /** 图发过来的更新信息 */
     graphMessages = [];
+    spendTime = new SpendTime();
     constructor() { }
     /**
      * @zh 获取流式消息
@@ -101,10 +104,13 @@ export class MessageProcessor {
         let lastMessage = null;
         const result = [...messages]; // 创建副本避免修改原数组
         for (const message of result) {
-            const createTime = message.response_metadata?.create_time || "";
+            const createTime = message.additional_kwargs?.create_time || formatFullTime(this.spendTime.getStartTime(message.id));
+            const updateTime = message.additional_kwargs?.update_time || formatFullTime(this.spendTime.getEndTime(message.id));
+            message.additional_kwargs.create_time = createTime;
+            message.additional_kwargs.update_time = updateTime;
             // 工具必须要使用 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();
+            message.spend_time = new Date(updateTime).getTime() - new Date(createTime).getTime();
             if (!message.usage_metadata && message.response_metadata?.usage) {
                 const usage = message.response_metadata.usage;
                 message.usage_metadata = {

package/dist/TestKit.d.ts

@@ -171,6 +171,8 @@ export declare class TestLangGraphChat {
         node_name?: string;
         tool_input?: string;
         additional_kwargs?: {
+            create_time: string;
+            update_time: string;
             done?: boolean;
             tool_calls?: {
                 function: {
@@ -184,9 +186,6 @@ export declare class TestLangGraphChat {
             output_tokens: number;
         };
         tool_call_id?: string;
-        response_metadata?: {
-            create_time: string;
-        };
         sub_messages?: RenderMessage[];
         spend_time?: number;
         unique_id?: string;
@@ -245,6 +244,8 @@ export declare class TestLangGraphChat {
         node_name?: string;
         tool_input?: string;
         additional_kwargs?: {
+            create_time: string;
+            update_time: string;
             done?: boolean;
             tool_calls?: {
                 function: {
@@ -258,9 +259,6 @@ export declare class TestLangGraphChat {
             output_tokens: number;
         };
         tool_call_id?: string;
-        response_metadata?: {
-            create_time: string;
-        };
         sub_messages?: RenderMessage[];
         spend_time?: number;
         unique_id?: string;
@@ -292,6 +290,8 @@ export declare class TestLangGraphChat {
         node_name?: string;
         tool_input?: string;
         additional_kwargs?: {
+            create_time: string;
+            update_time: string;
             done?: boolean;
             tool_calls?: {
                 function: {
@@ -305,9 +305,6 @@ export declare class TestLangGraphChat {
             output_tokens: number;
         };
         tool_call_id?: string;
-        response_metadata?: {
-            create_time: string;
-        };
         sub_messages?: RenderMessage[];
         spend_time?: number;
         unique_id?: string;

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

@@ -5,6 +5,7 @@ import { RevertChatToOptions } from "../time-travel/index.js";
 import { History, SessionInfo } from "../History.js";
 import { InterruptData } from "../humanInTheLoop.js";
 export declare const formatTime: (date: Date) => string;
+export declare const formatFullTime: (date: Date) => string;
 export declare const formatTokens: (tokens: number) => string;
 export declare const getMessageContent: (content: any) => string;
 export declare const getHistoryContent: (thread: Thread) => string | any[];

package/dist/ui-store/createChatStore.js

@@ -6,6 +6,16 @@ import { useArtifacts } from "../artifacts/index.js";
 import { History } from "../History.js";
 // ============ 工具函数 ============
 export const formatTime = (date) => date.toLocaleTimeString();
+export const formatFullTime = (date) => {
+    const pad = (n) => n.toString().padStart(2, "0");
+    const yyyy = date.getFullYear();
+    const mm = pad(date.getMonth() + 1);
+    const dd = pad(date.getDate());
+    const hh = pad(date.getHours());
+    const mi = pad(date.getMinutes());
+    const ss = pad(date.getSeconds());
+    return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
+};
 export const formatTokens = (tokens) => tokens.toLocaleString("en");
 export const getMessageContent = (content) => {
     if (typeof content === "string")
@@ -277,6 +287,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
             return;
         inChatError.set(null);
         try {
+            loading.set(true);
             await c.sendMessage(message || userInput.get(), extraData);
         }
         catch (e) {

package/package.json

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

package/src/LangGraphClient.ts

@@ -2,6 +2,7 @@ import type { Thread, Message, Assistant, HumanMessage, AIMessage, ToolMessage,
 import { EventEmitter } from "eventemitter3";
 import { ToolManager } from "./ToolManager.js";
 import { CallToolResult } from "./tool/createTool.js";
+import { SpendTime } from "./SpendTime.js";
 import { createActionRequestID, HumanInTheLoopDecision, HumanInTheLoopState, InterruptData } from "./humanInTheLoop.js";
 import { type ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
 import { MessageProcessor } from "./MessageProcessor.js";
@@ -16,6 +17,8 @@ export type RenderMessage = Message & {
     /** 工具入参 ，聚合而来*/
     tool_input?: string;
     additional_kwargs?: {
+        create_time: string;
+        update_time: string;
         done?: boolean;
         tool_calls?: {
             function: {
@@ -29,9 +32,6 @@ export type RenderMessage = Message & {
         output_tokens: number;
     };
     tool_call_id?: string;
-    response_metadata?: {
-        create_time: string;
-    };
     // 子消息
     sub_messages?: RenderMessage[];
     /** 耗时 */
@@ -105,6 +105,7 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
     private currentAssistant: Assistant | null = null;
     private currentThread: Thread<TStateType> | null = null;
     tools: ToolManager = new ToolManager();
+
     availableAssistants: Assistant[] = [];
     graphState: any = {};
     currentRun?: { run_id: string };
@@ -459,6 +460,7 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
         } else if (chunk.event === "messages/partial" || chunk.event === "messages/complete") {
             for (const message of chunk.data) {
                 this.messageProcessor.updateStreamingMessage(message);
+                this.messageProcessor.spendTime.setSpendTime(message.id!);
             }
             this.emit("message", chunk);
             return true;

package/src/MessageProcessor.ts

@@ -1,5 +1,7 @@
 import { Message, AIMessage, ToolMessage } from "@langchain/langgraph-sdk";
 import { RenderMessage } from "./LangGraphClient.js";
+import { SpendTime } from "./SpendTime.js";
+import { formatFullTime, formatTime } from "./ui-store/createChatStore.js";
 
 /**
  * @zh StreamingMessageType 类用于判断消息的类型。
@@ -25,7 +27,7 @@ export class MessageProcessor {
     private streamingMessage: RenderMessage[] = [];
     /** 图发过来的更新信息 */
     private graphMessages: RenderMessage[] = [];
-
+    public spendTime = new SpendTime();
     constructor() {}
 
     /**
@@ -117,11 +119,14 @@ export class MessageProcessor {
         const result = [...messages]; // 创建副本避免修改原数组
 
         for (const message of result) {
-            const createTime = message.response_metadata?.create_time || "";
+            const createTime = message.additional_kwargs?.create_time || formatFullTime(this.spendTime.getStartTime(message.id!));
+            const updateTime = message.additional_kwargs?.update_time || formatFullTime(this.spendTime.getEndTime(message.id!));
+            message.additional_kwargs!.create_time = createTime;
+            message.additional_kwargs!.update_time = updateTime;
             // 工具必须要使用 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();
+            message.spend_time = new Date(updateTime).getTime() - new Date(createTime).getTime();
             if (!message.usage_metadata && (message as AIMessage).response_metadata?.usage) {
                 const usage = (message as AIMessage).response_metadata!.usage as {
                     prompt_tokens: number;
@@ -170,7 +175,7 @@ export class MessageProcessor {
                         ...(parentMessage?.additional_kwargs || {}),
                         ...(message.additional_kwargs || {}),
                         done: isDone,
-                    };
+                    } as RenderMessage["additional_kwargs"];
                 }
                 if (parentMessage) {
                     message.usage_metadata = parentMessage.usage_metadata;

package/src/artifacts/README.md

@@ -0,0 +1,71 @@
+# ArtifactViewer 实现说明
+
+`ArtifactViewer` 组件主要负责与 `langgraph-js` SDK 的状态同步，并集成 `ai-artifacts` Web Component 来展示 AI 生成的内容。
+
+## 核心功能
+
+1.  **状态同步**: 监听 `useChat` hook 中的 `artifacts` 变化。
+2.  **沙箱渲染**: 使用 `<ai-artifacts>` Web Component 加载远程渲染引擎。
+3.  **交互反馈**: 通过 `eventCenter` 捕获沙箱内的 `sendBackToAI` 事件，支持 Human-in-the-loop 流程。
+
+## 核心实现步骤
+
+### 1. 同步 Artifacts 状态
+
+利用 `useEffect` 监听 SDK 的 `artifacts` 和 `loading` 状态。当数据更新且加载完成后，使用 `setArtifactStore` 将数据推送到 `ai-artifacts` 的全局存储中。
+
+```typescript
+useEffect(() => {
+    if (loading) return;
+    setArtifactStore({
+        artifacts: { default: artifacts as ArtifactType[] },
+    });
+}, [artifacts, loading]);
+```
+
+### 2. 集成渲染引擎 (Web Component)
+
+在 JSX 中使用 `ai-artifacts` 标签。需要提供 `src` (渲染引擎地址)、`store-id` (默认为 `default`) 以及当前选中的 `group-id` 和 `version-id`。
+
+```tsx
+<ai-artifacts src={artifactsUrl} store-id="default" group-id={currentArtifactId?.[0] || ""} version-id={currentArtifactId?.[1] || ""} className="w-full min-h-[400px]"></ai-artifacts>
+```
+
+### 3. 事件处理 (Human-in-the-loop)
+
+监听来自渲染沙箱的 `sendBackToAI` 事件。这通常发生在用户点击“修复”或“修改”按钮时，将相关的错误信息或修改建议传回给 AI。
+
+```typescript
+useEffect(() => {
+    const handleSendBackToAI = (data: any) => {
+        onSendBackToAI(data);
+    };
+    eventCenter.on("sendBackToAI", handleSendBackToAI);
+    return () => {
+        eventCenter.off("sendBackToAI", handleSendBackToAI);
+    };
+}, [onSendBackToAI]);
+```
+
+### 4. TypeScript 声明
+
+为了让 React 识别自定义的 Web Component 标签，需要添加类型声明：
+
+```typescript
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ai-artifacts": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                src?: string;
+                "store-id"?: string;
+                "group-id"?: string;
+                "version-id"?: string;
+            };
+        }
+    }
+}
+```
+
+## 配置项
+
+- `artifactsUrl`: 渲染沙箱的 URL 地址，建议通过 `localStorage` 或环境变量进行配置，以便灵活切换（例如：`https://langgraph-artifacts.netlify.app/`）。

package/src/ui-store/createChatStore.ts

@@ -13,6 +13,16 @@ import { InterruptData, InterruptResponse } from "../humanInTheLoop.js";
 // ============ 工具函数 ============
 
 export const formatTime = (date: Date) => date.toLocaleTimeString();
+export const formatFullTime = (date: Date) => {
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    const yyyy = date.getFullYear();
+    const mm = pad(date.getMonth() + 1);
+    const dd = pad(date.getDate());
+    const hh = pad(date.getHours());
+    const mi = pad(date.getMinutes());
+    const ss = pad(date.getSeconds());
+    return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
+};
 export const formatTokens = (tokens: number) => tokens.toLocaleString("en");
 
 export const getMessageContent = (content: any) => {
@@ -334,6 +344,7 @@ export const createChatStore = (initClientName: string, config: Partial<LangGrap
 
         inChatError.set(null);
         try {
+            loading.set(true);
             await c.sendMessage(message || userInput.get(), extraData);
         } catch (e) {
             const isThreadRunning = (e as Error).message.includes("422");