@langgraph-js/sdk 3.7.1 → 3.8.0

package/src/ui-store/createChatStore.ts

@@ -7,27 +7,13 @@ import { UnionTool } from "../tool/createTool.js";
 import { createLangGraphServerClient } from "../client/LanggraphServer.js";
 import { useArtifacts } from "../artifacts/index.js";
 import { RevertChatToOptions } from "../time-travel/index.js";
+import { History, SessionInfo } from "../History.js";
 
-/**
- * @zh 格式化日期对象为时间字符串。
- * @en Formats a Date object into a time string.
- */
-export const formatTime = (date: Date) => {
-    return date.toLocaleTimeString();
-};
+// ============ 工具函数 ============
 
-/**
- * @zh 格式化数字为带千位分隔符的字符串。
- * @en Formats a number into a string with thousand separators.
- */
-export const formatTokens = (tokens: number) => {
-    return tokens.toLocaleString("en");
-};
+export const formatTime = (date: Date) => date.toLocaleTimeString();
+export const formatTokens = (tokens: number) => tokens.toLocaleString("en");
 
-/**
- * @zh 获取消息内容的文本表示，处理不同类型的消息内容。
- * @en Gets the text representation of message content, handling different types of message content.
- */
 export const getMessageContent = (content: any) => {
     if (typeof content === "string") return content;
     if (Array.isArray(content)) {
@@ -43,52 +29,81 @@ export const getMessageContent = (content: any) => {
     return JSON.stringify(content);
 };
 
-/**
- * @zh 获取历史记录中 Thread 内容的文本表示。
- * @en Gets the text representation of Thread content in history.
- */
 export const getHistoryContent = (thread: Thread) => {
     /** @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") {
-                return item.text;
-            }
-        });
-    } else if (typeof content === "string") {
-        return content;
-    } else {
-        return "";
+        return content.map((item: any) => (item.type === "text" ? item.text : undefined)).filter(Boolean);
     }
+    return typeof content === "string" ? content : "";
 };
 
-/**
- * @zh 创建一个用于聊天界面的状态管理器 (store)。
- * @en Creates a state manager (store) for the chat interface.
- */
-export const createChatStore = (
-    initClientName: string,
-    config: Partial<LangGraphClientConfig>,
-    context: {
-        showHistory?: boolean;
-        showGraph?: boolean;
-        fallbackToAvailableAssistants?: boolean;
-        onInit?: (client: LangGraphClient) => void;
-    } = {}
-) => {
+// ============ 类型定义 ============
+
+interface ChatStoreContext {
+    showHistory?: boolean;
+    showGraph?: boolean;
+    fallbackToAvailableAssistants?: boolean;
+    onInit?: (client: LangGraphClient) => void;
+    /** 初始化时是否自动激活最近的历史会话（默认 false，创建新会话） */
+    autoRestoreLastSession?: boolean;
+}
+
+// ============ Store 创建函数 ============
+
+export const createChatStore = (initClientName: string, config: Partial<LangGraphClientConfig>, context: ChatStoreContext = {}) => {
+    // ============ 状态原子 ============
+
+    // 会话管理
+    const history = atom<History | null>(null);
+    const sessions = atom<SessionInfo[]>([]);
     const client = atom<LangGraphClient | null>(null);
+    const historyList = atom<Thread<{ messages: Message[] }>[]>([]);
+
+    // UI 状态
     const renderMessages = atom<RenderMessage[]>([]);
     const userInput = atom<string>("");
-    const loading = atom<boolean>(false);
-    const collapsedTools = atom<string[]>([]);
     const inChatError = atom<string | null>(null);
-    const showHistory = atom<boolean>(context.showHistory ?? false);
     const currentAgent = atom<string>(initClientName);
     const currentChatId = atom<string | null>(null);
     const currentNodeName = atom<string>("__start__");
 
+    // 工具和图表
     const tools = atom<UnionTool<any>[]>([]);
+    const collapsedTools = atom<string[]>([]);
+    const showHistory = atom<boolean>(context.showHistory ?? false);
+    const showGraph = atom<boolean>(context.showGraph ?? false);
+    const graphVisualize = atom<AssistantGraph | null>(null);
+
+    // ============ 内部状态 ============
+
+    let cleanupCurrentClient: (() => void) | null = null;
+
+    // ============ 计算属性 ============
+
+    /** 基于 client.status 的 loading 状态 */
+    const loading = atom<boolean>(false);
+
+    const updateLoadingFromClientStatus = () => {
+        const c = client.get();
+        if (c) {
+            loading.set(c.status === "busy");
+        }
+    };
+
+    // ============ UI 更新逻辑 ============
+
+    const updateUI = debounce((newClient: LangGraphClient) => {
+        if (client.get() !== newClient) return;
+
+        const messages = newClient.renderMessage;
+        const lastMessage = messages[messages.length - 1];
+
+        currentNodeName.set(lastMessage?.node_name || lastMessage?.name || "__start__");
+        renderMessages.set(messages);
+    }, 10);
+    // ============ 工具和图表辅助函数 ============
+
     const refreshTools = async () => {
         const c = client.get();
         if (!c) return;
@@ -96,201 +111,284 @@ export const createChatStore = (
         c.tools.bindTools(tools.get());
     };
 
-    // 显示 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);
+        if (showGraph.get()) {
+            graphVisualize.set((await client.get()?.graphVisualize()) || null);
+        }
     };
-    const updateUI = debounce((newClient: LangGraphClient) => {
-        const messages = newClient.renderMessage;
-        const lastMessage = messages[messages.length - 1];
 
-        currentNodeName.set(lastMessage?.node_name || lastMessage?.name || "__start__");
+    // ============ 会话管理核心逻辑 ============
 
-        renderMessages.set(messages);
-    }, 10);
-    /**
-     * @zh 初始化 LangGraph 客户端。
-     * @en Initializes the LangGraph client.
-     */
     async function initClient() {
-        const newClient = new LangGraphClient({
+        const historyManager = new History({
             ...config,
             client: config.client ?? (await createLangGraphServerClient(config as LangGraphClientConfig)),
         });
-        await newClient.initAssistant(currentAgent.get(), { fallbackToAvailableAssistants: context.fallbackToAvailableAssistants ?? false });
-        currentAgent.set(newClient.getCurrentAssistant()!.graph_id);
-        // 不再需要创建，sendMessage 会自动创建
-        // await newClient.createThread();
-        inChatError.set(null);
-        // 监听流开始事件
-        newClient.on("start", () => {
-            loading.set(true);
-        });
+        await historyManager.init(currentAgent.get());
+        history.set(historyManager);
+
+        // 同步远程会话列表
+        await refreshSessionList();
+
+        // 根据配置决定初始化行为
+        const syncedSessions = sessions.get();
+        if (context.autoRestoreLastSession && syncedSessions.length > 0) {
+            // 自动激活最近的历史会话
+            await activateSession(syncedSessions[0].sessionId);
+        } else {
+            // 创建新会话
+            await createNewSession();
+        }
+
+        return historyManager;
+    }
+
+    async function refreshSessionList() {
+        const historyManager = history.get();
+        if (!historyManager) return;
+
+        try {
+            const syncedSessions = await historyManager.syncFromRemote({ limit: 100 });
+            sessions.set(syncedSessions);
+            historyList.set(syncedSessions.filter((s) => s.thread).map((s) => s.thread!));
+        } catch (error) {
+            console.error("Failed to sync sessions:", error);
+        }
+    }
+
+    async function createNewSession() {
+        const historyManager = history.get();
+        if (!historyManager) return;
+
+        try {
+            const session = await historyManager.createSession();
+            await refreshSessionList();
+            await activateSession(session.sessionId);
+        } catch (error) {
+            console.error("Failed to create new session:", error);
+            inChatError.set((error as Error).message);
+        }
+    }
+
+    // ============ 客户端事件监听器 ============
+
+    function setupClientListeners(newClient: LangGraphClient) {
+        const isActiveClient = () => client.get() === newClient;
 
-        // 监听 Thread 创建和流完成事件
-        newClient.on("thread", () => {
-            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
-            // 创建新流程时，默认为 __start__
+        const onStart = () => {
+            if (isActiveClient()) updateLoadingFromClientStatus();
+        };
+
+        const onThread = () => {
+            if (!isActiveClient()) return;
+
+            const thread = newClient.getCurrentThread();
+            currentChatId.set(thread?.thread_id || null);
             currentNodeName.set("__start__");
-            // 创建新会话时，需要自动刷新历史面板
-            refreshHistoryList();
-        });
 
-        newClient.on("done", () => {
-            loading.set(false);
-            updateUI(newClient);
-        });
+            const historyManager = history.get();
+            const activeSession = historyManager?.getActiveSession();
+            if (activeSession && thread) {
+                activeSession.thread = thread;
+            }
 
-        // 监听错误事件
-        newClient.on("error", (event) => {
-            loading.set(false);
-            inChatError.set(event.data);
-        });
+            refreshSessionList();
+        };
 
-        // 监听消息和值更新事件
-        newClient.on("message", () => {
-            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
-            updateUI(newClient);
-        });
+        const onDone = () => {
+            if (isActiveClient()) {
+                updateLoadingFromClientStatus();
+                updateUI(newClient);
+            }
+        };
 
-        newClient.on("value", () => {
-            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
-            updateUI(newClient);
-        });
-        context.onInit?.(newClient);
-        newClient.graphState = {};
-        client.set(newClient);
-        if (showGraph.get()) refreshGraph();
-        refreshTools();
-        return newClient;
+        const onError = (event: any) => {
+            if (isActiveClient()) {
+                updateLoadingFromClientStatus();
+                inChatError.set(event.data);
+            }
+        };
+
+        const onMessage = () => {
+            if (isActiveClient()) {
+                currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
+                updateLoadingFromClientStatus();
+                updateUI(newClient);
+            }
+        };
+
+        const onValue = () => {
+            if (isActiveClient()) {
+                currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
+                updateLoadingFromClientStatus();
+                updateUI(newClient);
+            }
+        };
+
+        newClient.on("start", onStart);
+        newClient.on("thread", onThread);
+        newClient.on("done", onDone);
+        newClient.on("error", onError);
+        newClient.on("message", onMessage);
+        newClient.on("value", onValue);
+
+        return () => {
+            newClient.off("start", onStart);
+            newClient.off("thread", onThread);
+            newClient.off("done", onDone);
+            newClient.off("error", onError);
+            newClient.off("message", onMessage);
+            newClient.off("value", onValue);
+        };
     }
 
-    /**
-     * @zh 发送消息。
-     * @en Sends a message.
-     */
-    const sendMessage = async (message?: Message[], extraData?: SendMessageOptions, withoutCheck = false) => {
-        if ((!withoutCheck && !userInput.get().trim() && !message?.length) || loading.get() || !client.get()) return;
+    // ============ 会话激活逻辑 ============
+
+    async function activateSession(sessionId: string) {
+        const historyManager = history.get();
+        if (!historyManager) return;
+
+        try {
+            if (cleanupCurrentClient) {
+                cleanupCurrentClient();
+                cleanupCurrentClient = null;
+            }
+
+            inChatError.set(null);
+
+            const session = await historyManager.activateSession(sessionId);
+            const activeClient = session.client;
+
+            if (activeClient) {
+                cleanupCurrentClient = setupClientListeners(activeClient);
+                context.onInit?.(activeClient);
+                client.set(activeClient);
+                currentChatId.set(sessionId);
+
+                const messages = activeClient.renderMessage;
+                renderMessages.set(messages);
+
+                const lastMessage = messages[messages.length - 1];
+                currentNodeName.set(lastMessage?.node_name || lastMessage?.name || "__start__");
+
+                updateLoadingFromClientStatus();
+
+                if (showGraph.get()) refreshGraph();
+                refreshTools();
+
+                const currentThread = activeClient.getCurrentThread() as any;
+                if (currentThread && (currentThread.status === "running" || currentThread.status === "pending")) {
+                    await activeClient.resetStream();
+                }
+            }
+        } catch (error) {
+            console.error("Failed to activate session:", error);
+            inChatError.set((error as Error).message);
+        }
+    }
+
+    // ============ 消息和交互逻辑 ============
+
+    async function sendMessage(message?: Message[], extraData?: SendMessageOptions, withoutCheck = false) {
+        const c = client.get();
+        if ((!withoutCheck && !userInput.get().trim() && !message?.length) || !c) return;
+
+        // 使用 client.status 判断是否正在加载
+        if (c.status === "busy") return;
 
-        loading.set(true);
         inChatError.set(null);
         try {
-            await client.get()?.sendMessage(message || userInput.get(), extraData);
+            await c.sendMessage(message || userInput.get(), extraData);
         } catch (e) {
             const isThreadRunning = (e as Error).message.includes("422");
             if (isThreadRunning) {
-                await client.get()?.resetStream();
+                await c.resetStream();
             } else {
                 throw e;
             }
         } finally {
             userInput.set("");
-            loading.set(false);
+            updateLoadingFromClientStatus();
         }
-    };
+    }
 
-    /**
-     * @zh 停止当前的消息生成。
-     * @en Stops the current message generation.
-     */
-    const stopGeneration = () => {
+    function stopGeneration() {
         client.get()?.cancelRun();
-    };
+    }
 
-    /**
-     * @zh 切换工具消息的折叠状态。
-     * @en Toggles the collapsed state of a tool message.
-     */
-    const toggleToolCollapse = (toolId: string) => {
+    function toggleToolCollapse(toolId: string) {
         const prev = collapsedTools.get();
         collapsedTools.set(prev.includes(toolId) ? prev.filter((id) => id !== toolId) : [...prev, toolId]);
-    };
+    }
 
-    /**
-     * @zh 切换历史记录面板的可见性。
-     * @en Toggles the visibility of the history panel.
-     */
-    const toggleHistoryVisible = () => {
+    function toggleHistoryVisible() {
         showHistory.set(!showHistory.get());
         if (showHistory.get()) {
-            refreshHistoryList();
+            refreshSessionList();
         }
-    };
-
-    const historyList = atom<Thread<{ messages: Message[] }>[]>([]);
-
-    /**
-     * @zh 刷新历史记录列表。
-     * @en Refreshes the history list.
-     */
-    const refreshHistoryList = async () => {
-        if (!client.get() || !showHistory.get()) return;
-        try {
-            const response = await client.get()?.listThreads();
-            historyList.set((response as Thread<{ messages: Message[] }>[]) || []);
-        } catch (error) {
-            console.error("Failed to fetch threads:", error);
-        }
-    };
+    }
 
-    /**
-     * @zh 将一个 Thread 添加到历史记录列表的开头。
-     * @en Adds a Thread to the beginning of the history list.
-     */
-    const addToHistory = (thread: Thread<{ messages: Message[] }>) => {
+    function addToHistory(thread: Thread<{ messages: Message[] }>) {
         const prev = historyList.get();
         historyList.set([thread, ...prev]);
-    };
-    const getToolUIRender = (tool_name: string) => {
-        const toolsDefine = client.get()!.tools.getAllTools();
+    }
+
+    function getToolUIRender(tool_name: string) {
+        const c = client.get();
+        if (!c) return null;
+        const toolsDefine = c.tools.getAllTools();
         const tool = toolsDefine.find((i) => i.name === tool_name!)?.render;
-        return tool ? (message: RenderMessage) => tool(new ToolRenderData(message, client.get()!)) : null;
-    };
+        return tool ? (message: RenderMessage) => tool(new ToolRenderData(message, c)) : null;
+    }
+
+    // ============ 返回 Store API ============
 
     const artifactHook = useArtifacts(renderMessages, client);
+
     return {
         data: {
+            // 核心客户端
             client,
+            history,
+            sessions,
+
+            // UI 状态
             renderMessages,
             userInput,
             loading,
             inChatError,
             currentAgent,
-            collapsedTools,
-            showHistory,
-            historyList,
             currentChatId,
-            showGraph,
-            graphVisualize,
             currentNodeName,
+
+            // 工具和图表
             tools,
+            collapsedTools,
+            showGraph,
+            graphVisualize,
+
+            // 历史记录
+            showHistory,
+            historyList,
+
             ...artifactHook.data,
         },
         mutations: {
-            refreshTools,
-            setTools(new_tools: UnionTool<any>[]) {
-                tools.set(new_tools);
-                refreshTools();
-            },
-            isFELocking() {
-                return client.get()?.isFELocking(renderMessages.get());
-            },
-            getClient() {
-                return client.get();
-            },
+            // 初始化
             initClient,
+            getClient: () => client.get(),
+            getHistory: () => history.get(),
+
+            // 会话管理
+            activateSession,
+            createNewSession,
+            refreshSessionList,
+            refreshHistoryList: refreshSessionList, // 向后兼容
+
+            // 消息操作
             sendMessage,
             stopGeneration,
-            toggleToolCollapse,
-            toggleHistoryVisible,
-            refreshHistoryList,
-            addToHistory,
-            /**
-             * @zh 回滚到指定的消息。
-             * @en Reverts to the specified message.
-             */
+            setUserInput: (input: string) => userInput.set(input),
             async revertChatTo(messageId: string, resend = false, sendOptions?: SendMessageOptions & RevertChatToOptions) {
                 await client.get()?.revertChatTo(messageId, sendOptions || {});
                 if (resend) {
@@ -299,67 +397,43 @@ export const createChatStore = (
                     updateUI(client.get()!);
                 }
             },
-            /**
-             * @zh 设置用户输入内容。
-             * @en Sets the user input content.
-             */
-            setUserInput(input: string) {
-                userInput.set(input);
-            },
-            /**
-             * @zh 设置当前的 Agent 并重新初始化客户端。
-             * @en Sets the current Agent and reinitializes the client.
-             */
-            setCurrentAgent(agent: string) {
-                currentAgent.set(agent);
-                return initClient().then(() => {
-                    if (showHistory.get()) {
-                        refreshHistoryList();
-                    }
-                });
+
+            // 工具操作
+            refreshTools,
+            setTools(new_tools: UnionTool<any>[]) {
+                tools.set(new_tools);
+                refreshTools();
             },
+            toggleToolCollapse,
+            getToolUIRender,
+            isFELocking: () => client.get()?.isFELocking(renderMessages.get()),
+
+            // UI 切换
+            toggleHistoryVisible,
             toggleGraphVisible() {
                 showGraph.set(!showGraph.get());
-                if (showGraph.get()) {
-                    refreshGraph();
-                }
+                if (showGraph.get()) refreshGraph();
             },
             refreshGraph,
-            /**
-             * @zh 创建一个新的聊天会话。
-             * @en Creates a new chat session.
-             */
-            createNewChat() {
-                client.get()?.reset();
-                inChatError.set(null);
-                loading.set(false);
-            },
-            /**
-             * @zh 切换到指定的历史聊天会话。
-             * @en Switches to the specified historical chat session.
-             */
-            async toHistoryChat(
-                thread: Thread<{
-                    messages: Message[];
-                }>
-            ) {
-                inChatError.set(null);
-                loading.set(false);
-                const nowThread = await client.get()?.resetThread(thread.metadata?.graph_id as string, thread.thread_id);
-                if (nowThread) {
-                    client.get()?.resetStream();
-                }
-                return nowThread;
+
+            // Agent 切换
+            setCurrentAgent(agent: string) {
+                currentAgent.set(agent);
+                return initClient();
             },
-            /**
-             * @zh 删除指定的历史聊天会话。
-             * @en Deletes the specified historical chat session.
-             */
+
+            // 历史记录（兼容旧 API）
+            addToHistory,
+            createNewChat: createNewSession,
+            toHistoryChat: (thread: Thread<{ messages: Message[] }>) => activateSession(thread.thread_id),
             async deleteHistoryChat(thread: Thread<{ messages: Message[] }>) {
-                await client.get()?.deleteThread(thread.thread_id);
-                await refreshHistoryList();
+                const historyManager = history.get();
+                if (historyManager) {
+                    await historyManager.deleteSession(thread.thread_id);
+                    await refreshSessionList();
+                }
             },
-            getToolUIRender,
+
             ...artifactHook.mutation,
         },
     };

package/src/vue/ChatContext.ts

@@ -55,6 +55,8 @@ export interface ChatProviderProps {
     showHistory?: boolean;
     showGraph?: boolean;
     fallbackToAvailableAssistants?: boolean;
+    /** 初始化时是否自动激活最近的历史会话（默认 false，创建新会话） */
+    autoRestoreLastSession?: boolean;
     onInitError?: (error: any, currentAgent: string) => void;
     client?: ILangGraphClient;
     legacyMode?: boolean;
@@ -88,6 +90,7 @@ export const useChatProvider = (props: ChatProviderProps) => {
             showHistory: props.showHistory,
             showGraph: props.showGraph,
             fallbackToAvailableAssistants: props.fallbackToAvailableAssistants,
+            autoRestoreLastSession: props.autoRestoreLastSession,
         }
     );
 
@@ -149,6 +152,10 @@ export const ChatProvider = defineComponent({
             type: Boolean as PropType<boolean>,
             default: false,
         },
+        autoRestoreLastSession: {
+            type: Boolean as PropType<boolean>,
+            default: false,
+        },
         onInitError: {
             type: Function as PropType<(error: any, currentAgent: string) => void>,
             default: undefined,