@langgraph-js/sdk 3.7.0 → 3.7.1

package/dist/ui-store/createChatStore.js

@@ -45,9 +45,8 @@ export const getMessageContent = (content) => {
  * @en Gets the text representation of Thread content in history.
  */
 export const getHistoryContent = (thread) => {
-    var _a, _b, _c;
     /** @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);
+    const content = thread.title || thread.name || thread?.values?.messages?.[0]?.content;
     if (content && Array.isArray(content)) {
         return content.map((item) => {
             if (item.type === "text") {
@@ -67,14 +66,13 @@ export const getHistoryContent = (thread) => {
  * @en Creates a state manager (store) for the chat interface.
  */
 export const createChatStore = (initClientName, config, context = {}) => {
-    var _a, _b;
     const client = atom(null);
     const renderMessages = atom([]);
     const userInput = atom("");
     const loading = atom(false);
     const collapsedTools = atom([]);
     const inChatError = atom(null);
-    const showHistory = atom((_a = context.showHistory) !== null && _a !== void 0 ? _a : false);
+    const showHistory = atom(context.showHistory ?? false);
     const currentAgent = atom(initClientName);
     const currentChatId = atom(null);
     const currentNodeName = atom("__start__");
@@ -87,17 +85,16 @@ export const createChatStore = (initClientName, config, context = {}) => {
         c.tools.bindTools(tools.get());
     };
     // 显示 langgraph 可视化图
-    const showGraph = atom((_b = context.showGraph) !== null && _b !== void 0 ? _b : false);
+    const showGraph = atom(context.showGraph ?? false);
     const graphVisualize = atom(null);
     const refreshGraph = async () => {
-        var _a;
         if (showGraph.get())
-            graphVisualize.set((await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.graphVisualize())) || null);
+            graphVisualize.set((await client.get()?.graphVisualize()) || null);
     };
     const updateUI = debounce((newClient) => {
         const messages = newClient.renderMessage;
         const lastMessage = messages[messages.length - 1];
-        currentNodeName.set((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.node_name) || (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.name) || "__start__");
+        currentNodeName.set(lastMessage?.node_name || lastMessage?.name || "__start__");
         renderMessages.set(messages);
     }, 10);
     /**
@@ -105,12 +102,11 @@ export const createChatStore = (initClientName, config, context = {}) => {
      * @en Initializes the LangGraph client.
      */
     async function initClient() {
-        var _a, _b, _c;
         const newClient = new LangGraphClient({
             ...config,
-            client: (_a = config.client) !== null && _a !== void 0 ? _a : (await createLangGraphServerClient(config)),
+            client: config.client ?? (await createLangGraphServerClient(config)),
         });
-        await newClient.initAssistant(currentAgent.get(), { fallbackToAvailableAssistants: (_b = context.fallbackToAvailableAssistants) !== null && _b !== void 0 ? _b : false });
+        await newClient.initAssistant(currentAgent.get(), { fallbackToAvailableAssistants: context.fallbackToAvailableAssistants ?? false });
         currentAgent.set(newClient.getCurrentAssistant().graph_id);
         // 不再需要创建，sendMessage 会自动创建
         // await newClient.createThread();
@@ -121,8 +117,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
         });
         // 监听 Thread 创建和流完成事件
         newClient.on("thread", () => {
-            var _a;
-            currentChatId.set(((_a = newClient.getCurrentThread()) === null || _a === void 0 ? void 0 : _a.thread_id) || null);
+            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
             // 创建新流程时，默认为 __start__
             currentNodeName.set("__start__");
             // 创建新会话时，需要自动刷新历史面板
@@ -139,16 +134,14 @@ export const createChatStore = (initClientName, config, context = {}) => {
         });
         // 监听消息和值更新事件
         newClient.on("message", () => {
-            var _a;
-            currentChatId.set(((_a = newClient.getCurrentThread()) === null || _a === void 0 ? void 0 : _a.thread_id) || null);
+            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
             updateUI(newClient);
         });
         newClient.on("value", () => {
-            var _a;
-            currentChatId.set(((_a = newClient.getCurrentThread()) === null || _a === void 0 ? void 0 : _a.thread_id) || null);
+            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
             updateUI(newClient);
         });
-        (_c = context.onInit) === null || _c === void 0 ? void 0 : _c.call(context, newClient);
+        context.onInit?.(newClient);
         newClient.graphState = {};
         client.set(newClient);
         if (showGraph.get())
@@ -161,18 +154,17 @@ export const createChatStore = (initClientName, config, context = {}) => {
      * @en Sends a message.
      */
     const sendMessage = async (message, extraData, withoutCheck = false) => {
-        var _a, _b;
-        if ((!withoutCheck && !userInput.get().trim() && !(message === null || message === void 0 ? void 0 : message.length)) || loading.get() || !client.get())
+        if ((!withoutCheck && !userInput.get().trim() && !message?.length) || loading.get() || !client.get())
             return;
         loading.set(true);
         inChatError.set(null);
         try {
-            await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.sendMessage(message || userInput.get(), extraData));
+            await client.get()?.sendMessage(message || userInput.get(), extraData);
         }
         catch (e) {
             const isThreadRunning = e.message.includes("422");
             if (isThreadRunning) {
-                await ((_b = client.get()) === null || _b === void 0 ? void 0 : _b.resetStream());
+                await client.get()?.resetStream();
             }
             else {
                 throw e;
@@ -188,8 +180,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
      * @en Stops the current message generation.
      */
     const stopGeneration = () => {
-        var _a;
-        (_a = client.get()) === null || _a === void 0 ? void 0 : _a.cancelRun();
+        client.get()?.cancelRun();
     };
     /**
      * @zh 切换工具消息的折叠状态。
@@ -215,11 +206,10 @@ export const createChatStore = (initClientName, config, context = {}) => {
      * @en Refreshes the history list.
      */
     const refreshHistoryList = async () => {
-        var _a;
         if (!client.get() || !showHistory.get())
             return;
         try {
-            const response = await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.listThreads());
+            const response = await client.get()?.listThreads();
             historyList.set(response || []);
         }
         catch (error) {
@@ -235,9 +225,8 @@ export const createChatStore = (initClientName, config, context = {}) => {
         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;
+        const tool = toolsDefine.find((i) => i.name === tool_name)?.render;
         return tool ? (message) => tool(new ToolRenderData(message, client.get())) : null;
     };
     const artifactHook = useArtifacts(renderMessages, client);
@@ -266,8 +255,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
                 refreshTools();
             },
             isFELocking() {
-                var _a;
-                return (_a = client.get()) === null || _a === void 0 ? void 0 : _a.isFELocking(renderMessages.get());
+                return client.get()?.isFELocking(renderMessages.get());
             },
             getClient() {
                 return client.get();
@@ -284,8 +272,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
              * @en Reverts to the specified message.
              */
             async revertChatTo(messageId, resend = false, sendOptions) {
-                var _a;
-                await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.revertChatTo(messageId, sendOptions || {}));
+                await client.get()?.revertChatTo(messageId, sendOptions || {});
                 if (resend) {
                     return sendMessage([], sendOptions, true);
                 }
@@ -324,8 +311,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
              * @en Creates a new chat session.
              */
             createNewChat() {
-                var _a;
-                (_a = client.get()) === null || _a === void 0 ? void 0 : _a.reset();
+                client.get()?.reset();
                 inChatError.set(null);
                 loading.set(false);
             },
@@ -334,12 +320,11 @@ export const createChatStore = (initClientName, config, context = {}) => {
              * @en Switches to the specified historical chat session.
              */
             async toHistoryChat(thread) {
-                var _a, _b, _c;
                 inChatError.set(null);
                 loading.set(false);
-                const nowThread = await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.resetThread((_b = thread.metadata) === null || _b === void 0 ? void 0 : _b.graph_id, thread.thread_id));
+                const nowThread = await client.get()?.resetThread(thread.metadata?.graph_id, thread.thread_id);
                 if (nowThread) {
-                    (_c = client.get()) === null || _c === void 0 ? void 0 : _c.resetStream();
+                    client.get()?.resetStream();
                 }
                 return nowThread;
             },
@@ -348,8 +333,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
              * @en Deletes the specified historical chat session.
              */
             async deleteHistoryChat(thread) {
-                var _a;
-                await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.deleteThread(thread.thread_id));
+                await client.get()?.deleteThread(thread.thread_id);
                 await refreshHistoryList();
             },
             getToolUIRender,

package/dist/vue/ChatContext.d.ts

@@ -1,6 +1,7 @@
 import { type PropType, Ref } from "vue";
 import { createChatStore } from "../ui-store/index.js";
 import { PreinitializedWritableAtom, StoreValue } from "nanostores";
+import { ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
 /**
  * @zh UnionStore 类型用于合并 store 的 data 和 mutations，使其可以直接访问。
  * @en The UnionStore type is used to merge the data and mutations of a store, allowing direct access.
@@ -33,6 +34,8 @@ export interface ChatProviderProps {
     showGraph?: boolean;
     fallbackToAvailableAssistants?: boolean;
     onInitError?: (error: any, currentAgent: string) => void;
+    client?: ILangGraphClient;
+    legacyMode?: boolean;
 }
 /**
  * @zh Chat Provider Hook，用于在 setup 中直接使用

package/dist/vue/ChatContext.js

@@ -45,6 +45,8 @@ export const useChatProvider = (props) => {
             fetch: F,
             maxRetries: 1,
         },
+        client: props.client,
+        legacyMode: props.legacyMode,
     }, {
         showHistory: props.showHistory,
         showGraph: props.showGraph,
@@ -115,8 +117,7 @@ export const ChatProvider = defineComponent({
             unionStore,
         });
         return () => {
-            var _a;
-            return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
+            return slots.default?.();
         };
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",
@@ -45,6 +45,8 @@
   },
   "dependencies": {
     "@langchain/langgraph-sdk": "^1.0.0",
+    "camelcase-keys": "^10.0.1",
+    "change-case": "^5.4.4",
     "eventemitter3": "^5.0.1",
     "jsonrepair": "^3.12.0",
     "nanostores": "^1.0.1",

package/src/LangGraphClient.ts

@@ -5,7 +5,7 @@ import { CallToolResult } from "./tool/createTool.js";
 import { type ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
 import { MessageProcessor } from "./MessageProcessor.js";
 import { revertChatTo, RevertChatToOptions } from "./time-travel/index.js";
-
+import camelcaseKeys from "camelcase-keys";
 export type RenderMessage = Message & {
     /** 对于 AIMessage 来说是节点名称，对于工具节点来说是工具名称 */
     name?: string;
@@ -85,6 +85,8 @@ export interface LangGraphClientConfig {
     defaultHeaders?: Record<string, string | null | undefined>;
     /** 自定义客户端实现，如果不提供则使用官方 Client */
     client: ILangGraphClient<any>;
+    /** 是否使用 legacy 模式，默认 false */
+    legacyMode?: boolean;
 }
 
 // 定义事件数据类型
@@ -118,10 +120,11 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
     stopController: AbortController | null = null;
     /** Message 处理器 */
     private messageProcessor: MessageProcessor;
-
+    private legacyMode: boolean;
     constructor(config: LangGraphClientConfig) {
         super();
         this.client = config.client;
+        this.legacyMode = config.legacyMode ?? false;
         this.messageProcessor = new MessageProcessor();
     }
 
@@ -345,12 +348,26 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
                       content: input,
                   } as HumanMessage,
               ];
+
+        const streamRecord: any[] = [];
+        this.emit("start", {
+            event: "start",
+        });
         const createStreamResponse = async () => {
             if (_debug?.streamResponse) {
                 return _debug.streamResponse;
             }
+            const onCallback = this.legacyMode
+                ? (chunk: any) => {
+                      streamRecord.push(chunk);
+                      this.processStreamChunk(chunk, command);
+                  }
+                : undefined;
             if (joinRunId) {
-                return this.runs.joinStream(this.currentThread!.thread_id, joinRunId);
+                return this.runs.joinStream(this.currentThread!.thread_id, joinRunId, {
+                    /** @ts-ignore */
+                    onCallback,
+                });
             }
 
             return this.runs.stream(this.currentThread!.thread_id, this.currentAssistant!.assistant_id, {
@@ -364,51 +381,16 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
                 streamMode: ["messages", "values"],
                 streamSubgraphs: true,
                 command,
+                /** @ts-ignore 为兼容不支持 AsyncIterableFunction 的环境*/
+                onCallback,
             });
         };
         const streamResponse = await createStreamResponse();
-
-        const streamRecord: any[] = [];
-        this.emit("start", {
-            event: "start",
-        });
-
-        for await (const chunk of streamResponse) {
-            streamRecord.push(chunk);
-            if (chunk.event === "metadata") {
-                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" || chunk.event === "messages/complete") {
-                for (const message of chunk.data) {
-                    this.messageProcessor.updateStreamingMessage(message);
-                }
-                this.emit("message", chunk);
-                continue;
-            } else if (chunk.event === "values") {
-                const data = chunk.data as {
-                    __interrupt__?: InterruptData;
-                    messages: Message[];
-                };
-
-                if (data.__interrupt__) {
-                    this.humanInTheLoop = data.__interrupt__;
-                } else if (data.messages) {
-                    const isResume = !!command?.resume;
-                    const isLongerThanLocal = data.messages.length >= this.messageProcessor.getGraphMessages().length;
-                    // resume 情况下，长度低于前端 message 的统统不接受
-                    if (!isResume || (isResume && isLongerThanLocal)) {
-                        this.messageProcessor.setGraphMessages(data.messages as RenderMessage[]);
-                        this.emit("value", chunk);
-                    }
-                    this.graphState = chunk.data;
-                }
-                continue;
-            } else if (chunk.event.startsWith("values|")) {
-                this.graphPosition = chunk.event.split("|")[1];
+        if (!this.legacyMode) {
+            // 正常的 JS 环境都可以执行，但是部分环境不支持 AsyncGeneratorFunction（比如 sb 的微信小程序）
+            for await (const chunk of streamResponse) {
+                streamRecord.push(chunk);
+                this.processStreamChunk(chunk, command);
             }
         }
         const data = await this.runFETool();
@@ -436,6 +418,52 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
         return position[position.length - 1];
     }
 
+    /**
+     * @zh 处理流式响应的单个 chunk。
+     * @en Processes a single chunk from the stream response.
+     * @returns 是否需要跳过后续处理 (continue)
+     */
+    private processStreamChunk(chunk: any, command?: Command): boolean {
+        if (chunk.event === "metadata") {
+            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);
+            return true;
+        } else if (chunk.event === "messages/partial" || chunk.event === "messages/complete") {
+            for (const message of chunk.data) {
+                this.messageProcessor.updateStreamingMessage(message);
+            }
+            this.emit("message", chunk);
+            return true;
+        } else if (chunk.event === "values") {
+            const data = chunk.data as {
+                __interrupt__?: InterruptData;
+                messages: Message[];
+            };
+
+            if (data.__interrupt__) {
+                this.humanInTheLoop = camelcaseKeys(data.__interrupt__, {
+                    deep: true,
+                });
+            } else if (data.messages) {
+                const isResume = !!command?.resume;
+                const isLongerThanLocal = data.messages.length >= this.messageProcessor.getGraphMessages().length;
+                // resume 情况下，长度低于前端 message 的统统不接受
+                if (!isResume || (isResume && isLongerThanLocal)) {
+                    this.messageProcessor.setGraphMessages(data.messages as RenderMessage[]);
+                    this.emit("value", chunk);
+                }
+                this.graphState = chunk.data;
+            }
+            return true;
+        } else if (chunk.event.startsWith("values|")) {
+            this.graphPosition = chunk.event.split("|")[1];
+        }
+        return false;
+    }
+
     private runFETool() {
         const data = this.messageProcessor.getStreamingMessages(); // 需要保证不被清理
         const lastMessage = data[data.length - 1];

package/src/client/LanggraphServer.ts

@@ -1,7 +1,6 @@
 import { LangGraphClientConfig } from "../LangGraphClient.js";
 import { type ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
-
+import { Client } from "@langchain/langgraph-sdk";
 export const createLangGraphServerClient = async (config: LangGraphClientConfig): Promise<ILangGraphClient> => {
-    const { Client } = await import("@langchain/langgraph-sdk");
     return new Client(config) as ILangGraphClient;
 };

package/src/client/LowJSServer.ts

@@ -0,0 +1,80 @@
+import { BytesLineDecoder, SSEDecoder } from "./utils/sse.js";
+import { LangGraphClientConfig } from "../LangGraphClient.js";
+import { ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
+
+const REGEX_RUN_METADATA = /(\/threads\/(?<thread_id>.+))?\/runs\/(?<run_id>.+)/;
+function getRunMetadataFromResponse(response: Response) {
+    const contentLocation = response.headers.get("Content-Location");
+    if (!contentLocation) return void 0;
+    const match = REGEX_RUN_METADATA.exec(contentLocation);
+    if (!match?.groups?.run_id) return void 0;
+    return {
+        run_id: match.groups.run_id,
+        thread_id: match.groups.thread_id || void 0,
+    };
+}
+import { Client } from "@langchain/langgraph-sdk";
+
+export const createLowerJSClient = (config: Omit<LangGraphClientConfig, "client">): ILangGraphClient => {
+    const client = new Client(config);
+    /** @ts-ignore */
+    client.runs.joinStream = async function (this: any, threadId: string | null, runId: string, options: any) {
+        const opts = typeof options === "object" && options != null && options instanceof AbortSignal ? { signal: options } : options;
+        let [url, init] = this.prepareFetchOptions(threadId != null ? `/threads/${threadId}/runs/${runId}/stream` : `/runs/${runId}/stream`, {
+            method: "GET",
+            timeoutMs: null,
+            signal: opts?.signal,
+            headers: opts?.lastEventId ? { "Last-Event-ID": opts.lastEventId } : void 0,
+            params: {
+                cancel_on_disconnect: opts?.cancelOnDisconnect ? "1" : "0",
+                stream_mode: opts?.streamMode,
+            },
+        });
+        if (this.onRequest != null) init = await this.onRequest(url, init);
+        const response = await this.asyncCaller.fetch(url, init);
+        const stream: ReadableStream = (response.body || new ReadableStream({ start: (ctrl) => ctrl.close() })).pipeThrough(BytesLineDecoder()).pipeThrough(SSEDecoder());
+        return stream.pipeTo(new WritableStream({ write: (chunk) => options.onCallback?.(chunk) }));
+    }.bind(client.runs);
+    /** @ts-ignore */
+    client.runs.stream = async function (this: any, threadId: string | null, assistantId: string, payload?: any) {
+        const json = {
+            input: payload?.input,
+            command: payload?.command,
+            config: payload?.config,
+            context: payload?.context,
+            metadata: payload?.metadata,
+            stream_mode: payload?.streamMode,
+            stream_subgraphs: payload?.streamSubgraphs,
+            stream_resumable: payload?.streamResumable,
+            feedback_keys: payload?.feedbackKeys,
+            assistant_id: assistantId,
+            interrupt_before: payload?.interruptBefore,
+            interrupt_after: payload?.interruptAfter,
+            checkpoint: payload?.checkpoint,
+            checkpoint_id: payload?.checkpointId,
+            webhook: payload?.webhook,
+            multitask_strategy: payload?.multitaskStrategy,
+            on_completion: payload?.onCompletion,
+            on_disconnect: payload?.onDisconnect,
+            after_seconds: payload?.afterSeconds,
+            if_not_exists: payload?.ifNotExists,
+            checkpoint_during: payload?.checkpointDuring,
+            durability: payload?.durability,
+        };
+        const endpoint = threadId == null ? `/runs/stream` : `/threads/${threadId}/runs/stream`;
+        let [url, init] = this.prepareFetchOptions(endpoint, {
+            method: "POST",
+            json,
+            timeoutMs: null,
+            signal: payload?.signal,
+        });
+        if (this.onRequest != null) init = await this.onRequest(url, init);
+        const response = await this.asyncCaller.fetch(url, init);
+        const runMetadata = getRunMetadataFromResponse(response);
+        if (runMetadata) payload?.onRunCreated?.(runMetadata);
+        const stream: ReadableStream = (response.body || new ReadableStream({ start: (ctrl) => ctrl.close() })).pipeThrough(BytesLineDecoder()).pipeThrough(SSEDecoder());
+
+        return stream.pipeTo(new WritableStream({ write: (chunk) => payload.onCallback?.(chunk) }));
+    }.bind(client.runs);
+    return client as ILangGraphClient;
+};

package/src/client/index.ts

@@ -0,0 +1,2 @@
+export * from "./LanggraphServer.js";
+export * from "./LowJSServer.js";