@langgraph-js/sdk 3.7.1 → 3.8.0

package/dist/ui-store/createChatStore.js

@@ -1,27 +1,12 @@
 import { atom } from "nanostores";
-import { LangGraphClient } from "../LangGraphClient.js";
 import { debounce } from "ts-debounce";
 import { ToolRenderData } from "../tool/ToolUI.js";
 import { createLangGraphServerClient } from "../client/LanggraphServer.js";
 import { useArtifacts } from "../artifacts/index.js";
-/**
- * @zh 格式化日期对象为时间字符串。
- * @en Formats a Date object into a time string.
- */
-export const formatTime = (date) => {
-    return date.toLocaleTimeString();
-};
-/**
- * @zh 格式化数字为带千位分隔符的字符串。
- * @en Formats a number into a string with thousand separators.
- */
-export const formatTokens = (tokens) => {
-    return tokens.toLocaleString("en");
-};
-/**
- * @zh 获取消息内容的文本表示，处理不同类型的消息内容。
- * @en Gets the text representation of message content, handling different types of message content.
- */
+import { History } from "../History.js";
+// ============ 工具函数 ============
+export const formatTime = (date) => date.toLocaleTimeString();
+export const formatTokens = (tokens) => tokens.toLocaleString("en");
 export const getMessageContent = (content) => {
     if (typeof content === "string")
         return content;
@@ -40,43 +25,56 @@ export const getMessageContent = (content) => {
     }
     return JSON.stringify(content);
 };
-/**
- * @zh 获取历史记录中 Thread 内容的文本表示。
- * @en Gets the text representation of Thread content in history.
- */
 export const getHistoryContent = (thread) => {
     /** @ts-ignore */
     const content = thread.title || thread.name || thread?.values?.messages?.[0]?.content;
     if (content && Array.isArray(content)) {
-        return content.map((item) => {
-            if (item.type === "text") {
-                return item.text;
-            }
-        });
-    }
-    else if (typeof content === "string") {
-        return content;
-    }
-    else {
-        return "";
+        return content.map((item) => (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.
- */
+// ============ Store 创建函数 ============
 export const createChatStore = (initClientName, config, context = {}) => {
+    // ============ 状态原子 ============
+    // 会话管理
+    const history = atom(null);
+    const sessions = atom([]);
     const client = atom(null);
+    const historyList = atom([]);
+    // UI 状态
     const renderMessages = atom([]);
     const userInput = atom("");
-    const loading = atom(false);
-    const collapsedTools = atom([]);
     const inChatError = atom(null);
-    const showHistory = atom(context.showHistory ?? false);
     const currentAgent = atom(initClientName);
     const currentChatId = atom(null);
     const currentNodeName = atom("__start__");
+    // 工具和图表
     const tools = atom([]);
+    const collapsedTools = atom([]);
+    const showHistory = atom(context.showHistory ?? false);
+    const showGraph = atom(context.showGraph ?? false);
+    const graphVisualize = atom(null);
+    // ============ 内部状态 ============
+    let cleanupCurrentClient = null;
+    // ============ 计算属性 ============
+    /** 基于 client.status 的 loading 状态 */
+    const loading = atom(false);
+    const updateLoadingFromClientStatus = () => {
+        const c = client.get();
+        if (c) {
+            loading.set(c.status === "busy");
+        }
+    };
+    // ============ UI 更新逻辑 ============
+    const updateUI = debounce((newClient) => {
+        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)
@@ -84,87 +82,174 @@ export const createChatStore = (initClientName, config, context = {}) => {
         c.tools.clearTools();
         c.tools.bindTools(tools.get());
     };
-    // 显示 langgraph 可视化图
-    const showGraph = atom(context.showGraph ?? false);
-    const graphVisualize = atom(null);
     const refreshGraph = async () => {
-        if (showGraph.get())
+        if (showGraph.get()) {
             graphVisualize.set((await client.get()?.graphVisualize()) || null);
+        }
     };
-    const updateUI = debounce((newClient) => {
-        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)),
         });
-        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);
-        });
-        // 监听 Thread 创建和流完成事件
-        newClient.on("thread", () => {
-            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
-            // 创建新流程时，默认为 __start__
+        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.message);
+        }
+    }
+    // ============ 客户端事件监听器 ============
+    function setupClientListeners(newClient) {
+        const isActiveClient = () => client.get() === newClient;
+        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);
-        });
-        // 监听错误事件
-        newClient.on("error", (event) => {
-            loading.set(false);
-            inChatError.set(event.data);
-        });
-        // 监听消息和值更新事件
-        newClient.on("message", () => {
-            currentChatId.set(newClient.getCurrentThread()?.thread_id || null);
-            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 historyManager = history.get();
+            const activeSession = historyManager?.getActiveSession();
+            if (activeSession && thread) {
+                activeSession.thread = thread;
+            }
+            refreshSessionList();
+        };
+        const onDone = () => {
+            if (isActiveClient()) {
+                updateLoadingFromClientStatus();
+                updateUI(newClient);
+            }
+        };
+        const onError = (event) => {
+            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, extraData, withoutCheck = false) => {
-        if ((!withoutCheck && !userInput.get().trim() && !message?.length) || loading.get() || !client.get())
+    // ============ 会话激活逻辑 ============
+    async function activateSession(sessionId) {
+        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();
+                if (currentThread && (currentThread.status === "running" || currentThread.status === "pending")) {
+                    await activeClient.resetStream();
+                }
+            }
+        }
+        catch (error) {
+            console.error("Failed to activate session:", error);
+            inChatError.set(error.message);
+        }
+    }
+    // ============ 消息和交互逻辑 ============
+    async function sendMessage(message, extraData, 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.message.includes("422");
             if (isThreadRunning) {
-                await client.get()?.resetStream();
+                await c.resetStream();
             }
             else {
                 throw e;
@@ -172,105 +257,74 @@ export const createChatStore = (initClientName, config, context = {}) => {
         }
         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) => {
+    }
+    function toggleToolCollapse(toolId) {
         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();
-        }
-    };
-    const historyList = atom([]);
-    /**
-     * @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 || []);
+            refreshSessionList();
         }
-        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) => {
+    }
+    function addToHistory(thread) {
         const prev = historyList.get();
         historyList.set([thread, ...prev]);
-    };
-    const getToolUIRender = (tool_name) => {
-        const toolsDefine = client.get().tools.getAllTools();
+    }
+    function getToolUIRender(tool_name) {
+        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) => tool(new ToolRenderData(message, client.get())) : null;
-    };
+        return tool ? (message) => 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) {
-                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) => userInput.set(input),
             async revertChatTo(messageId, resend = false, sendOptions) {
                 await client.get()?.revertChatTo(messageId, sendOptions || {});
                 if (resend) {
@@ -280,63 +334,39 @@ export const createChatStore = (initClientName, config, context = {}) => {
                     updateUI(client.get());
                 }
             },
-            /**
-             * @zh 设置用户输入内容。
-             * @en Sets the user input content.
-             */
-            setUserInput(input) {
-                userInput.set(input);
-            },
-            /**
-             * @zh 设置当前的 Agent 并重新初始化客户端。
-             * @en Sets the current Agent and reinitializes the client.
-             */
-            setCurrentAgent(agent) {
-                currentAgent.set(agent);
-                return initClient().then(() => {
-                    if (showHistory.get()) {
-                        refreshHistoryList();
-                    }
-                });
+            // 工具操作
+            refreshTools,
+            setTools(new_tools) {
+                tools.set(new_tools);
+                refreshTools();
             },
+            toggleToolCollapse,
+            getToolUIRender,
+            isFELocking: () => client.get()?.isFELocking(renderMessages.get()),
+            // UI 切换
+            toggleHistoryVisible,
             toggleGraphVisible() {
                 showGraph.set(!showGraph.get());
-                if (showGraph.get()) {
+                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) {
-                inChatError.set(null);
-                loading.set(false);
-                const nowThread = await client.get()?.resetThread(thread.metadata?.graph_id, thread.thread_id);
-                if (nowThread) {
-                    client.get()?.resetStream();
-                }
-                return nowThread;
+            // Agent 切换
+            setCurrentAgent(agent) {
+                currentAgent.set(agent);
+                return initClient();
             },
-            /**
-             * @zh 删除指定的历史聊天会话。
-             * @en Deletes the specified historical chat session.
-             */
+            // 历史记录（兼容旧 API）
+            addToHistory,
+            createNewChat: createNewSession,
+            toHistoryChat: (thread) => activateSession(thread.thread_id),
             async deleteHistoryChat(thread) {
-                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,
         },
     };