@langgraph-js/sdk 2.2.0 → 3.0.0

package/dist/vue/ChatContext.d.ts

@@ -0,0 +1,161 @@
+import { type PropType, Ref } from "vue";
+import { createChatStore } from "../ui-store/index.js";
+import { PreinitializedWritableAtom, StoreValue } from "nanostores";
+/**
+ * @zh UnionStore 类型用于合并 store 的 data 和 mutations，使其可以直接访问。
+ * @en The UnionStore type is used to merge the data and mutations of a store, allowing direct access.
+ */
+export type UnionStoreVue<T extends {
+    data: Record<string, PreinitializedWritableAtom<any>>;
+    mutations: Record<string, any>;
+}> = {
+    [k in keyof T["data"]]: Readonly<Ref<StoreValue<T["data"][k]>>>;
+} & T["mutations"];
+/**
+ * @zh useUnionStore Hook 用于将 nanostores 的 store 结构转换为更易于在 UI 组件中使用的扁平结构。
+ * @en The useUnionStore Hook is used to transform the nanostores store structure into a flatter structure that is easier to use in UI components.
+ */
+export declare const useUnionStoreVue: <T extends {
+    data: Record<string, any>;
+    mutations: Record<string, any>;
+}>(store: T, useStore: (store: PreinitializedWritableAtom<any>) => Readonly<Ref<any>>) => UnionStoreVue<T>;
+/**
+ * 使用 Chat Store 的组合式函数
+ * @throws {Error} 如果在 ChatProvider 外部使用会抛出错误
+ */
+export declare const useChat: () => UnionStoreVue<ReturnType<typeof createChatStore>>;
+export interface ChatProviderProps {
+    defaultAgent?: string;
+    apiUrl?: string;
+    defaultHeaders?: Record<string, string>;
+    withCredentials?: boolean;
+    showHistory?: boolean;
+    showGraph?: boolean;
+    onInitError?: (error: any, currentAgent: string) => void;
+}
+/**
+ * @zh Chat Provider Hook，用于在 setup 中直接使用
+ * @en Chat Provider Hook, used directly in setup
+ */
+export declare const useChatProvider: (props: ChatProviderProps) => {
+    unionStore: UnionStoreVue<{
+        data: {
+            client: PreinitializedWritableAtom<import("../LangGraphClient.js").LangGraphClient<unknown> | null> & object;
+            renderMessages: PreinitializedWritableAtom<import("../LangGraphClient.js").RenderMessage[]> & object;
+            userInput: PreinitializedWritableAtom<string> & object;
+            loading: PreinitializedWritableAtom<boolean> & object;
+            inChatError: PreinitializedWritableAtom<string | null> & object;
+            currentAgent: PreinitializedWritableAtom<string> & object;
+            collapsedTools: PreinitializedWritableAtom<string[]> & object;
+            showHistory: PreinitializedWritableAtom<boolean> & object;
+            historyList: PreinitializedWritableAtom<import("@langchain/langgraph-sdk").Thread<{
+                messages: import("@langchain/langgraph-sdk").Message[];
+            }>[]> & object;
+            currentChatId: PreinitializedWritableAtom<string | null> & object;
+            showGraph: PreinitializedWritableAtom<boolean> & object;
+            graphVisualize: PreinitializedWritableAtom<import("@langchain/langgraph-sdk").AssistantGraph | null> & object;
+            currentNodeName: PreinitializedWritableAtom<string> & object;
+            tools: PreinitializedWritableAtom<import("../index.js").UnionTool<any, Object, any>[]> & object;
+        };
+        mutations: {
+            refreshTools: () => Promise<void>;
+            setTools(new_tools: import("../index.js").UnionTool<any>[]): void;
+            isFELocking(): boolean | undefined;
+            initClient: () => Promise<import("../LangGraphClient.js").LangGraphClient<unknown>>;
+            sendMessage: (message?: import("@langchain/langgraph-sdk").Message[], extraData?: import("../LangGraphClient.js").SendMessageOptions, withoutCheck?: boolean) => Promise<void>;
+            stopGeneration: () => void;
+            toggleToolCollapse: (toolId: string) => void;
+            toggleHistoryVisible: () => void;
+            refreshHistoryList: () => Promise<void>;
+            addToHistory: (thread: import("@langchain/langgraph-sdk").Thread<{
+                messages: import("@langchain/langgraph-sdk").Message[];
+            }>) => void;
+            revertChatTo(messageId: string, resend?: boolean, sendOptions?: import("../LangGraphClient.js").SendMessageOptions): Promise<void>;
+            setUserInput(input: string): void;
+            setCurrentAgent(agent: string): Promise<void>;
+            toggleGraphVisible(): void;
+            refreshGraph: () => Promise<void>;
+            createNewChat(): void;
+            toHistoryChat(thread: import("@langchain/langgraph-sdk").Thread<{
+                messages: import("@langchain/langgraph-sdk").Message[];
+            }>): Promise<import("@langchain/langgraph-sdk").Thread<unknown> | undefined>;
+            deleteHistoryChat(thread: import("@langchain/langgraph-sdk").Thread<{
+                messages: import("@langchain/langgraph-sdk").Message[];
+            }>): Promise<void>;
+            getToolUIRender: (tool_name: string) => ((message: import("../LangGraphClient.js").RenderMessage) => Object) | null;
+        };
+    }>;
+};
+/**
+ * Chat Provider 组件
+ * 提供 Chat Store 的上下文
+ */
+export declare const ChatProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    defaultAgent: {
+        type: PropType<string>;
+        default: string;
+    };
+    apiUrl: {
+        type: PropType<string>;
+        default: string;
+    };
+    defaultHeaders: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    withCredentials: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showHistory: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showGraph: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    onInitError: {
+        type: PropType<(error: any, currentAgent: string) => void>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    defaultAgent: {
+        type: PropType<string>;
+        default: string;
+    };
+    apiUrl: {
+        type: PropType<string>;
+        default: string;
+    };
+    defaultHeaders: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    withCredentials: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showHistory: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showGraph: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    onInitError: {
+        type: PropType<(error: any, currentAgent: string) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    apiUrl: string;
+    defaultHeaders: Record<string, string>;
+    showHistory: boolean;
+    showGraph: boolean;
+    defaultAgent: string;
+    withCredentials: boolean;
+    onInitError: (error: any, currentAgent: string) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/vue/ChatContext.js

@@ -0,0 +1,121 @@
+import { defineComponent, inject, provide, onMounted } from "vue";
+import { createChatStore } from "../ui-store/index.js";
+import { useStore } from "@nanostores/vue";
+/**
+ * @zh useUnionStore Hook 用于将 nanostores 的 store 结构转换为更易于在 UI 组件中使用的扁平结构。
+ * @en The useUnionStore Hook is used to transform the nanostores store structure into a flatter structure that is easier to use in UI components.
+ */
+export const useUnionStoreVue = (store, useStore) => {
+    const data = Object.fromEntries(Object.entries(store.data).map(([key, value]) => {
+        return [key, useStore(value)];
+    }));
+    return {
+        ...data,
+        ...store.mutations,
+    };
+};
+// 定义注入的 key，提供完整类型
+const ChatContextKey = Symbol("ChatContext");
+/**
+ * 使用 Chat Store 的组合式函数
+ * @throws {Error} 如果在 ChatProvider 外部使用会抛出错误
+ */
+export const useChat = () => {
+    const context = inject(ChatContextKey);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+/**
+ * @zh Chat Provider Hook，用于在 setup 中直接使用
+ * @en Chat Provider Hook, used directly in setup
+ */
+export const useChatProvider = (props) => {
+    const F = props.withCredentials
+        ? (url, options) => {
+            options.credentials = "include";
+            return fetch(url, options);
+        }
+        : fetch;
+    const store = createChatStore(props.defaultAgent || "", {
+        apiUrl: props.apiUrl,
+        defaultHeaders: props.defaultHeaders,
+        callerOptions: {
+            fetch: F,
+            maxRetries: 1,
+        },
+    }, {
+        showHistory: props.showHistory,
+        showGraph: props.showGraph,
+    });
+    const unionStore = useUnionStoreVue(store, useStore);
+    // 提供 store 给子组件
+    provide(ChatContextKey, unionStore);
+    // 初始化客户端
+    onMounted(() => {
+        unionStore
+            .initClient()
+            .then(() => {
+            if (unionStore.showHistory) {
+                unionStore.refreshHistoryList();
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+            if (props.onInitError) {
+                props.onInitError(err, unionStore.currentAgent.value);
+            }
+        });
+    });
+    return {
+        unionStore,
+    };
+};
+/**
+ * Chat Provider 组件
+ * 提供 Chat Store 的上下文
+ */
+export const ChatProvider = defineComponent({
+    name: "ChatProvider",
+    props: {
+        defaultAgent: {
+            type: String,
+            default: "",
+        },
+        apiUrl: {
+            type: String,
+            default: "http://localhost:8123",
+        },
+        defaultHeaders: {
+            type: Object,
+            default: () => ({}),
+        },
+        withCredentials: {
+            type: Boolean,
+            default: false,
+        },
+        showHistory: {
+            type: Boolean,
+            default: false,
+        },
+        showGraph: {
+            type: Boolean,
+            default: false,
+        },
+        onInitError: {
+            type: Function,
+            default: undefined,
+        },
+    },
+    setup(props, { slots }) {
+        const { unionStore } = useChatProvider(props);
+        defineExpose({
+            unionStore,
+        });
+        return () => {
+            var _a;
+            return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
+        };
+    },
+});

package/dist/vue/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/dist/vue/index.js

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",
@@ -8,6 +8,20 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "exports": {
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue/index.js",
+      "types": "./dist/vue/index.d.ts"
+    },
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "keywords": [
     "langgraph",
     "ui",
@@ -16,7 +30,8 @@
     "ai",
     "agents",
     "langchain",
-    "react"
+    "react",
+    "vue"
   ],
   "author": "LangGraph Team",
   "license": "Apache-2.0",
@@ -29,7 +44,8 @@
     "url": "https://github.com/KonghaYao/YaoAgent/issues"
   },
   "dependencies": {
-    "@langchain/langgraph-sdk": "^0.0.77",
+    "@langchain/langgraph-sdk": "^0.1.10",
+    "@langgraph-js/pure-graph": "^1.5.2",
     "eventemitter3": "^5.0.1",
     "jsonrepair": "^3.12.0",
     "nanostores": "^1.0.1",
@@ -37,6 +53,30 @@
     "zod": "^3.25.17",
     "zod-to-json-schema": "^3.24.5"
   },
+  "peerDependencies": {
+    "@nanostores/react": "^1.0.0",
+    "@nanostores/vue": "^1.0.0",
+    "react": "^19||^18",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@nanostores/react": {
+      "optional": true
+    },
+    "@nanostores/vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "vue": "^3.5.14"
+  },
   "scripts": {
     "build": "tsc",
     "prepublish": "pnpm build"

package/src/LangGraphClient.ts

@@ -2,7 +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 { ILangGraphClient } from "./types.js";
+import { type ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
 import { MessageProcessor } from "./MessageProcessor.js";
 import { revertChatTo } from "./time-travel/index.js";
 
@@ -69,7 +69,7 @@ export interface LangGraphClientConfig {
     timeoutMs?: number;
     defaultHeaders?: Record<string, string | null | undefined>;
     /** 自定义客户端实现，如果不提供则使用官方 Client */
-    client: ILangGraphClient<any, any>;
+    client: ILangGraphClient<any>;
 }
 
 // 定义事件数据类型
@@ -92,8 +92,8 @@ export interface LangGraphEvents {
  * @zh LangGraphClient 类是与 LangGraph 后端交互的主要客户端。
  * @en The LangGraphClient class is the main client for interacting with the LangGraph backend.
  */
-export class LangGraphClient<TStateType = unknown, TUpdateType = TStateType> extends EventEmitter<LangGraphEvents> {
-    private client: ILangGraphClient<TStateType, TUpdateType>;
+export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGraphEvents> {
+    private client: ILangGraphClient<TStateType>;
     private currentAssistant: Assistant | null = null;
     private currentThread: Thread<TStateType> | null = null;
     tools: ToolManager = new ToolManager();
@@ -123,7 +123,7 @@ export class LangGraphClient<TStateType = unknown, TUpdateType = TStateType> ext
     }
 
     /** 代理 runs 属性到内部 client */
-    get runs() {
+    get runs(): ILangGraphClient["runs"] {
         return this.client.runs;
     }
     private listAssistants() {
@@ -163,13 +163,7 @@ export class LangGraphClient<TStateType = unknown, TUpdateType = TStateType> ext
      * @zh 创建一个新的 Thread。
      * @en Creates a new Thread.
      */
-    async createThread({
-        threadId,
-        graphId,
-    }: {
-        threadId?: string;
-        graphId?: string;
-    } = {}) {
+    async createThread({ threadId, graphId }: { threadId?: string; graphId?: string } = {}) {
         try {
             this.currentThread = await this.threads.create({
                 threadId,
@@ -308,7 +302,7 @@ export class LangGraphClient<TStateType = unknown, TUpdateType = TStateType> ext
             throw new Error("Thread or Assistant not initialized");
         }
         if (!this.currentThread) {
-            await this.createThread({ graphId: this.currentAssistant!.graph_id });
+            await this.createThread({ graphId: this.currentAssistant!.graph_id!, threadId: this.currentThread!.thread_id! });
             this.emit("thread", {
                 event: "thread/create",
                 data: {
@@ -356,7 +350,7 @@ export class LangGraphClient<TStateType = unknown, TUpdateType = TStateType> ext
             streamRecord.push(chunk);
             if (chunk.event === "metadata") {
                 this.currentRun = chunk.data;
-            } else if (chunk.event === "error") {
+            } else if (chunk.event === "error" || chunk.event === "Error" || chunk.event === "__stream_error__") {
                 this.emit("error", chunk);
             } else if (chunk.event === "messages/partial") {
                 for (const message of chunk.data) {

package/src/client/LanggraphServer.ts

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

package/src/index.ts

@@ -1,6 +1,5 @@
 export * from "./LangGraphClient.js";
 export * from "./MessageProcessor.js";
-export * from "./types.js";
 export * from "./tool/index.js";
 export * from "@langchain/langgraph-sdk";
 export * from "./ui-store/index.js";

package/src/react/ChatContext.ts

@@ -0,0 +1,81 @@
+import { createElement, createContext, useContext, useMemo, ReactNode, useEffect } from "react";
+
+import { createChatStore, UnionStore, useUnionStore } from "../ui-store/index.js";
+import { useStore } from "@nanostores/react";
+
+const ChatContext = createContext<UnionStore<ReturnType<typeof createChatStore>> | undefined>(undefined);
+
+export const useChat = () => {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+
+interface ChatProviderProps {
+    children: ReactNode;
+    defaultAgent?: string;
+    apiUrl?: string;
+    defaultHeaders?: Record<string, string>;
+    withCredentials?: boolean;
+    showHistory?: boolean;
+    showGraph?: boolean;
+    onInitError?: (error: any, currentAgent: string) => void;
+}
+
+export const ChatProvider: React.FC<ChatProviderProps> = ({
+    children,
+    defaultAgent = "",
+    apiUrl = "http://localhost:8123",
+    defaultHeaders = {},
+    withCredentials = false,
+    showHistory = false,
+    showGraph = false,
+    onInitError,
+}) => {
+    const store = useMemo(() => {
+        const F = withCredentials
+            ? (url: string, options: RequestInit) => {
+                  options.credentials = "include";
+                  return fetch(url, options);
+              }
+            : fetch;
+
+        return createChatStore(
+            defaultAgent,
+            {
+                apiUrl,
+                defaultHeaders,
+                callerOptions: {
+                    fetch: F,
+                    maxRetries: 1,
+                },
+            },
+            {
+                showHistory,
+                showGraph,
+            }
+        );
+    }, [defaultAgent, apiUrl, defaultHeaders, withCredentials, showHistory, showGraph]);
+
+    const unionStore = useUnionStore(store, useStore);
+
+    useEffect(() => {
+        unionStore
+            .initClient()
+            .then((res) => {
+                if (unionStore.showHistory) {
+                    unionStore.refreshHistoryList();
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+                if (onInitError) {
+                    onInitError(err, unionStore.currentAgent);
+                }
+            });
+    }, [unionStore, onInitError]);
+
+    return createElement(ChatContext.Provider, { value: unionStore }, children);
+};

package/src/react/index.ts

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/src/time-travel/index.ts

@@ -1,4 +1,3 @@
-import { RemoveMessage } from "@langchain/core/messages";
 import { Client, Message } from "@langchain/langgraph-sdk";
 
 export async function revertChatTo(client: Client<{ messages: Message[] }, { messages: Message[] }, unknown>, threadId: string, messageId: string) {

package/src/ui-store/createChatStore.ts

@@ -178,6 +178,8 @@ export const createChatStore = (
             const isThreadRunning = (e as Error).message.includes("422");
             if (isThreadRunning) {
                 await client.get()?.resetStream();
+            } else {
+                throw e;
             }
         } finally {
             userInput.set("");