@langgraph-js/sdk 1.1.9 → 1.2.0

package/dist/LangGraphClient.d.ts

@@ -100,6 +100,7 @@ export declare class LangGraphClient extends Client {
     createThread({ threadId, }?: {
         threadId?: string;
     }): Promise<Thread<import("@langchain/langgraph-sdk").DefaultValues>>;
+    graphVisualize(): Promise<import("@langchain/langgraph-sdk").AssistantGraph>;
     /**
      * @zh 列出所有的 Thread。
      * @en Lists all Threads.

package/dist/LangGraphClient.js

@@ -90,6 +90,12 @@ export class LangGraphClient extends Client {
             throw error;
         }
     }
+    graphVisualize() {
+        var _a;
+        return this.assistants.getGraph((_a = this.currentAssistant) === null || _a === void 0 ? void 0 : _a.assistant_id, {
+            xray: true,
+        });
+    }
     /**
      * @zh 列出所有的 Thread。
      * @en Lists all Threads.

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

@@ -1,5 +1,5 @@
 import { LangGraphClient, LangGraphClientConfig, RenderMessage, SendMessageOptions } from "../LangGraphClient.js";
-import { Message, Thread } from "@langchain/langgraph-sdk";
+import { AssistantGraph, Message, Thread } from "@langchain/langgraph-sdk";
 /**
  * @zh 格式化日期对象为时间字符串。
  * @en Formats a Date object into a time string.
@@ -25,6 +25,8 @@ export declare const getHistoryContent: (thread: Thread) => string | any[];
  * @en Creates a state manager (store) for the chat interface.
  */
 export declare const createChatStore: (initClientName: string, config: LangGraphClientConfig, context?: {
+    showHistory?: boolean;
+    showGraph?: boolean;
     onInit?: (client: LangGraphClient) => void;
 }) => {
     data: {
@@ -40,9 +42,11 @@ export declare const createChatStore: (initClientName: string, config: LangGraph
             messages: Message[];
         }>[]> & object;
         currentChatId: import("nanostores").PreinitializedWritableAtom<string | null> & object;
+        showGraph: import("nanostores").PreinitializedWritableAtom<boolean> & object;
+        graphVisualize: import("nanostores").PreinitializedWritableAtom<AssistantGraph | null> & object;
     };
     mutations: {
-        initClient: () => Promise<void>;
+        initClient: () => Promise<LangGraphClient>;
         sendMessage: (message?: Message[], extraData?: SendMessageOptions) => Promise<void>;
         stopGeneration: () => void;
         toggleToolCollapse: (toolId: string) => void;
@@ -61,6 +65,8 @@ export declare const createChatStore: (initClientName: string, config: LangGraph
          * @en Sets the current Agent and reinitializes the client.
          */
         setCurrentAgent(agent: string): Promise<void>;
+        toggleGraphVisible(): void;
+        refreshGraph: () => Promise<void>;
         /**
          * @zh 创建一个新的聊天会话。
          * @en Creates a new chat session.

package/dist/ui-store/createChatStore.js

@@ -63,15 +63,24 @@ 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(true);
+    const showHistory = atom((_a = context.showHistory) !== null && _a !== void 0 ? _a : false);
     const currentAgent = atom(initClientName);
     const currentChatId = atom(null);
+    // 显示 langgraph 可视化图
+    const showGraph = atom((_b = context.showGraph) !== null && _b !== void 0 ? _b : 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);
+    };
     const updateUI = rafDebounce((newClient) => {
         renderMessages.set(newClient.renderMessage);
     });
@@ -103,6 +112,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
         (_a = context.onInit) === null || _a === void 0 ? void 0 : _a.call(context, newClient);
         newClient.graphState = {};
         client.set(newClient);
+        if (showGraph.get())
+            refreshGraph();
+        return newClient;
     }
     /**
      * @zh 发送消息。
@@ -140,6 +152,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
      */
     const toggleHistoryVisible = () => {
         showHistory.set(!showHistory.get());
+        if (showHistory.get()) {
+            refreshHistoryList();
+        }
     };
     const historyList = atom([]);
     /**
@@ -178,6 +193,8 @@ export const createChatStore = (initClientName, config, context = {}) => {
             showHistory,
             historyList,
             currentChatId,
+            showGraph,
+            graphVisualize,
         },
         mutations: {
             initClient,
@@ -204,8 +221,18 @@ export const createChatStore = (initClientName, config, context = {}) => {
                     if (showHistory.get()) {
                         refreshHistoryList();
                     }
+                    if (showGraph.get()) {
+                        refreshGraph();
+                    }
                 });
             },
+            toggleGraphVisible() {
+                showGraph.set(!showGraph.get());
+                if (showGraph.get()) {
+                    refreshGraph();
+                }
+            },
+            refreshGraph,
             /**
              * @zh 创建一个新的聊天会话。
              * @en Creates a new chat session.

package/package.json

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

@@ -154,6 +154,12 @@ export class LangGraphClient extends Client {
             throw error;
         }
     }
+
+    graphVisualize() {
+        return this.assistants.getGraph(this.currentAssistant?.assistant_id!, {
+            xray: true,
+        });
+    }
     /**
      * @zh 列出所有的 Thread。
      * @en Lists all Threads.

package/src/ui-store/createChatStore.ts

@@ -1,6 +1,6 @@
 import { atom } from "nanostores";
 import { LangGraphClient, LangGraphClientConfig, RenderMessage, SendMessageOptions } from "../LangGraphClient.js";
-import { Message, Thread } from "@langchain/langgraph-sdk";
+import { AssistantGraph, Message, Thread } from "@langchain/langgraph-sdk";
 import { rafDebounce } from "./rafDebounce.js";
 
 /**
@@ -65,6 +65,8 @@ export const createChatStore = (
     initClientName: string,
     config: LangGraphClientConfig,
     context: {
+        showHistory?: boolean;
+        showGraph?: boolean;
         onInit?: (client: LangGraphClient) => void;
     } = {}
 ) => {
@@ -74,10 +76,16 @@ export const createChatStore = (
     const loading = atom<boolean>(false);
     const collapsedTools = atom<string[]>([]);
     const inChatError = atom<string | null>(null);
-    const showHistory = atom<boolean>(true);
+    const showHistory = atom<boolean>(context.showHistory ?? false);
     const currentAgent = atom<string>(initClientName);
     const currentChatId = atom<string | null>(null);
 
+    // 显示 langgraph 可视化图
+    const showGraph = atom<boolean>(context.showGraph ?? false);
+    const graphVisualize = atom<AssistantGraph | null>(null);
+    const refreshGraph = async () => {
+        if (showGraph.get()) graphVisualize.set((await client.get()?.graphVisualize()) || null);
+    };
     const updateUI = rafDebounce((newClient: LangGraphClient) => {
         renderMessages.set(newClient.renderMessage);
     });
@@ -109,6 +117,8 @@ export const createChatStore = (
         context.onInit?.(newClient);
         newClient.graphState = {};
         client.set(newClient);
+        if (showGraph.get()) refreshGraph();
+        return newClient;
     }
 
     /**
@@ -150,6 +160,9 @@ export const createChatStore = (
      */
     const toggleHistoryVisible = () => {
         showHistory.set(!showHistory.get());
+        if (showHistory.get()) {
+            refreshHistoryList();
+        }
     };
 
     const historyList = atom<Thread<{ messages: Message[] }>[]>([]);
@@ -189,6 +202,8 @@ export const createChatStore = (
             showHistory,
             historyList,
             currentChatId,
+            showGraph,
+            graphVisualize,
         },
         mutations: {
             initClient,
@@ -215,8 +230,18 @@ export const createChatStore = (
                     if (showHistory.get()) {
                         refreshHistoryList();
                     }
+                    if (showGraph.get()) {
+                        refreshGraph();
+                    }
                 });
             },
+            toggleGraphVisible() {
+                showGraph.set(!showGraph.get());
+                if (showGraph.get()) {
+                    refreshGraph();
+                }
+            },
+            refreshGraph,
             /**
              * @zh 创建一个新的聊天会话。
              * @en Creates a new chat session.