@langchain/langgraph-sdk 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @langchain/langgraph-sdk
 
+## 0.1.6
+
+### Patch Changes
+
+- 5603276: Fix `useStream()` keeping stale thread history when switching threads mid-stream (#1632)
+- b65c80b: Add `transport` option to useStream, allowing custom endpoints, that emit compatible Server-Sent Events to be used with `useStream`.
+- 5603276: Fix `stop()` behavior when cancelling a resumable stream via `useStream()` (#1610)
+
+## 0.1.5
+
+### Patch Changes
+
+- f21fd04: Fix mutate function in `onCustomEvent` and in `onUpdateEvent` receiving incorrect previous value
+
 ## 0.1.4
 
 ### Patch Changes

package/dist/react/index.cjs

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStream = void 0;
+exports.FetchStreamTransport = exports.useStream = void 0;
 var stream_js_1 = require("./stream.cjs");
 Object.defineProperty(exports, "useStream", { enumerable: true, get: function () { return stream_js_1.useStream; } });
+var stream_custom_js_1 = require("./stream.custom.cjs");
+Object.defineProperty(exports, "FetchStreamTransport", { enumerable: true, get: function () { return stream_custom_js_1.FetchStreamTransport; } });

package/dist/react/index.d.ts

@@ -1,2 +1,3 @@
 export { useStream } from "./stream.js";
-export type { MessageMetadata, UseStream, UseStreamOptions } from "./types.js";
+export { FetchStreamTransport } from "./stream.custom.js";
+export type { MessageMetadata, UseStream, UseStreamOptions, UseStreamCustom, UseStreamCustomOptions, UseStreamTransport, } from "./types.js";

package/dist/react/index.js

@@ -1 +1,2 @@
 export { useStream } from "./stream.js";
+export { FetchStreamTransport } from "./stream.custom.js";

package/dist/react/manager.cjs

@@ -83,7 +83,10 @@ class StreamManager {
             writable: true,
             value: (kind, historyValues) => {
                 return (update) => {
-                    const prev = { ...historyValues, ...this.state.values };
+                    const prev = {
+                        ...historyValues,
+                        ...(this.state.values ?? [null, "stream"])[0],
+                    };
                     const next = typeof update === "function" ? update(prev) : update;
                     this.setStreamValues({ ...prev, ...next }, kind);
                 };
@@ -186,6 +189,7 @@ class StreamManager {
                 finally {
                     this.setState({ isLoading: false });
                     this.abortRef = new AbortController();
+                    options.onFinish?.();
                 }
             }
         });
@@ -194,10 +198,8 @@ class StreamManager {
             configurable: true,
             writable: true,
             value: async (historyValues, options) => {
-                if (this.abortRef) {
-                    this.abortRef.abort();
-                    this.abortRef = new AbortController();
-                }
+                this.abortRef.abort();
+                this.abortRef = new AbortController();
                 options.onStop?.({ mutate: this.getMutateFn("stop", historyValues) });
             }
         });
@@ -206,7 +208,12 @@ class StreamManager {
             configurable: true,
             writable: true,
             value: () => {
+                // Cancel any running streams
+                this.abortRef.abort();
+                this.abortRef = new AbortController();
+                // Set the stream state to null
                 this.setState({ error: undefined, values: null });
+                // Clear any pending messages
                 this.messages.clear();
             }
         });

package/dist/react/manager.d.ts

@@ -75,6 +75,7 @@ export declare class StreamManager<StateType extends Record<string, unknown>, Ba
         callbacks: StreamManagerEventCallbacks<StateType, Bag>;
         onSuccess: () => StateType | null | undefined | void | Promise<StateType | null | undefined | void>;
         onError: (error: unknown) => void | Promise<void>;
+        onFinish?: () => void;
     }) => Promise<void>;
     stop: (historyValues: StateType, options: {
         onStop?: (options: {

package/dist/react/manager.js

@@ -80,7 +80,10 @@ export class StreamManager {
             writable: true,
             value: (kind, historyValues) => {
                 return (update) => {
-                    const prev = { ...historyValues, ...this.state.values };
+                    const prev = {
+                        ...historyValues,
+                        ...(this.state.values ?? [null, "stream"])[0],
+                    };
                     const next = typeof update === "function" ? update(prev) : update;
                     this.setStreamValues({ ...prev, ...next }, kind);
                 };
@@ -183,6 +186,7 @@ export class StreamManager {
                 finally {
                     this.setState({ isLoading: false });
                     this.abortRef = new AbortController();
+                    options.onFinish?.();
                 }
             }
         });
@@ -191,10 +195,8 @@ export class StreamManager {
             configurable: true,
             writable: true,
             value: async (historyValues, options) => {
-                if (this.abortRef) {
-                    this.abortRef.abort();
-                    this.abortRef = new AbortController();
-                }
+                this.abortRef.abort();
+                this.abortRef = new AbortController();
                 options.onStop?.({ mutate: this.getMutateFn("stop", historyValues) });
             }
         });
@@ -203,7 +205,12 @@ export class StreamManager {
             configurable: true,
             writable: true,
             value: () => {
+                // Cancel any running streams
+                this.abortRef.abort();
+                this.abortRef = new AbortController();
+                // Set the stream state to null
                 this.setState({ error: undefined, values: null });
+                // Clear any pending messages
                 this.messages.clear();
             }
         });

package/dist/react/stream.cjs

@@ -1,467 +1,19 @@
 "use strict";
-/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */
-"use client";
-/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStream = useStream;
 const react_1 = require("react");
-const utils_js_1 = require("./utils.cjs");
-const errors_js_1 = require("./errors.cjs");
-const branching_js_1 = require("./branching.cjs");
-const manager_js_1 = require("./manager.cjs");
-const client_js_1 = require("../client.cjs");
-const messages_js_1 = require("./messages.cjs");
-function fetchHistory(client, threadId, options) {
-    if (options?.limit === false) {
-        return client.threads.getState(threadId).then((state) => {
-            if (state.checkpoint == null)
-                return [];
-            return [state];
-        });
-    }
-    const limit = typeof options?.limit === "number" ? options.limit : 10;
-    return client.threads.getHistory(threadId, { limit });
-}
-function useThreadHistory(threadId, client, limit, clearCallbackRef, submittingRef, onErrorRef) {
-    const [history, setHistory] = (0, react_1.useState)(undefined);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(() => {
-        if (threadId == null)
-            return false;
-        return true;
-    });
-    const [error, setError] = (0, react_1.useState)(undefined);
-    const clientHash = (0, client_js_1.getClientConfigHash)(client);
-    const clientRef = (0, react_1.useRef)(client);
-    clientRef.current = client;
-    const fetcher = (0, react_1.useCallback)((threadId) => {
-        if (threadId != null) {
-            const client = clientRef.current;
-            setIsLoading(true);
-            return fetchHistory(client, threadId, {
-                limit,
-            })
-                .then((history) => {
-                setHistory(history);
-                return history;
-            }, (error) => {
-                setError(error);
-                onErrorRef.current?.(error);
-                return Promise.reject(error);
-            })
-                .finally(() => {
-                setIsLoading(false);
-            });
-        }
-        setHistory(undefined);
-        setError(undefined);
-        setIsLoading(false);
-        clearCallbackRef.current?.();
-        return Promise.resolve([]);
-    }, [clearCallbackRef, onErrorRef, limit]);
-    (0, react_1.useEffect)(() => {
-        if (submittingRef.current)
-            return;
-        void fetcher(threadId);
-    }, [fetcher, submittingRef, clientHash, limit, threadId]);
-    return {
-        data: history,
-        isLoading,
-        error,
-        mutate: (mutateId) => fetcher(mutateId ?? threadId),
-    };
+const stream_lgp_js_1 = require("./stream.lgp.cjs");
+const stream_custom_js_1 = require("./stream.custom.cjs");
+function isCustomOptions(options) {
+    return "transport" in options;
 }
-const useControllableThreadId = (options) => {
-    const [localThreadId, _setLocalThreadId] = (0, react_1.useState)(options?.threadId ?? null);
-    const onThreadIdRef = (0, react_1.useRef)(options?.onThreadId);
-    onThreadIdRef.current = options?.onThreadId;
-    const onThreadId = (0, react_1.useCallback)((threadId) => {
-        _setLocalThreadId(threadId);
-        onThreadIdRef.current?.(threadId);
-    }, []);
-    if (!options || !("threadId" in options)) {
-        return [localThreadId, onThreadId];
-    }
-    return [options.threadId ?? null, onThreadId];
-};
 function useStream(options) {
-    const reconnectOnMountRef = (0, react_1.useRef)(options.reconnectOnMount);
-    const runMetadataStorage = (0, react_1.useMemo)(() => {
-        if (typeof window === "undefined")
-            return null;
-        const storage = reconnectOnMountRef.current;
-        if (storage === true)
-            return window.sessionStorage;
-        if (typeof storage === "function")
-            return storage();
-        return null;
-    }, []);
-    const client = (0, react_1.useMemo)(() => options.client ??
-        new client_js_1.Client({
-            apiUrl: options.apiUrl,
-            apiKey: options.apiKey,
-            callerOptions: options.callerOptions,
-            defaultHeaders: options.defaultHeaders,
-        }), [
-        options.client,
-        options.apiKey,
-        options.apiUrl,
-        options.callerOptions,
-        options.defaultHeaders,
-    ]);
-    const [messageManager] = (0, react_1.useState)(() => new messages_js_1.MessageTupleManager());
-    const [stream] = (0, react_1.useState)(() => new manager_js_1.StreamManager(messageManager));
-    (0, react_1.useSyncExternalStore)(stream.subscribe, stream.getSnapshot, stream.getSnapshot);
-    const [threadId, onThreadId] = useControllableThreadId(options);
-    const trackStreamModeRef = (0, react_1.useRef)([]);
-    const trackStreamMode = (0, react_1.useCallback)((...mode) => {
-        const ref = trackStreamModeRef.current;
-        for (const m of mode) {
-            if (!ref.includes(m))
-                ref.push(m);
-        }
-    }, []);
-    const hasUpdateListener = options.onUpdateEvent != null;
-    const hasCustomListener = options.onCustomEvent != null;
-    const hasLangChainListener = options.onLangChainEvent != null;
-    const hasDebugListener = options.onDebugEvent != null;
-    const hasCheckpointListener = options.onCheckpointEvent != null;
-    const hasTaskListener = options.onTaskEvent != null;
-    const callbackStreamMode = (0, react_1.useMemo)(() => {
-        const modes = [];
-        if (hasUpdateListener)
-            modes.push("updates");
-        if (hasCustomListener)
-            modes.push("custom");
-        if (hasLangChainListener)
-            modes.push("events");
-        if (hasDebugListener)
-            modes.push("debug");
-        if (hasCheckpointListener)
-            modes.push("checkpoints");
-        if (hasTaskListener)
-            modes.push("tasks");
-        return modes;
-    }, [
-        hasUpdateListener,
-        hasCustomListener,
-        hasLangChainListener,
-        hasDebugListener,
-        hasCheckpointListener,
-        hasTaskListener,
-    ]);
-    const clearCallbackRef = (0, react_1.useRef)(null);
-    clearCallbackRef.current = stream.clear;
-    const submittingRef = (0, react_1.useRef)(false);
-    submittingRef.current = stream.isLoading;
-    const onErrorRef = (0, react_1.useRef)(undefined);
-    onErrorRef.current = options.onError;
-    const historyLimit = typeof options.fetchStateHistory === "object" &&
-        options.fetchStateHistory != null
-        ? options.fetchStateHistory.limit ?? false
-        : options.fetchStateHistory ?? false;
-    const history = useThreadHistory(threadId, client, historyLimit, clearCallbackRef, submittingRef, onErrorRef);
-    const getMessages = (value) => {
-        const messagesKey = options.messagesKey ?? "messages";
-        return Array.isArray(value[messagesKey]) ? value[messagesKey] : [];
-    };
-    const setMessages = (current, messages) => {
-        const messagesKey = options.messagesKey ?? "messages";
-        return { ...current, [messagesKey]: messages };
-    };
-    const [branch, setBranch] = (0, react_1.useState)("");
-    const branchContext = (0, branching_js_1.getBranchContext)(branch, history.data);
-    const historyValues = branchContext.threadHead?.values ??
-        options.initialValues ??
-        {};
-    const historyError = (() => {
-        const error = branchContext.threadHead?.tasks?.at(-1)?.error;
-        if (error == null)
-            return undefined;
-        try {
-            const parsed = JSON.parse(error);
-            if (errors_js_1.StreamError.isStructuredError(parsed))
-                return new errors_js_1.StreamError(parsed);
-            return parsed;
-        }
-        catch {
-            // do nothing
-        }
-        return error;
-    })();
-    const messageMetadata = (() => {
-        const alreadyShown = new Set();
-        return getMessages(historyValues).map((message, idx) => {
-            const messageId = message.id ?? idx;
-            // Find the first checkpoint where the message was seen
-            const firstSeenState = (0, utils_js_1.findLast)(history.data ?? [], (state) => getMessages(state.values)
-                .map((m, idx) => m.id ?? idx)
-                .includes(messageId));
-            const checkpointId = firstSeenState?.checkpoint?.checkpoint_id;
-            let branch = checkpointId != null
-                ? branchContext.branchByCheckpoint[checkpointId]
-                : undefined;
-            if (!branch?.branch?.length)
-                branch = undefined;
-            // serialize branches
-            const optionsShown = branch?.branchOptions?.flat(2).join(",");
-            if (optionsShown) {
-                if (alreadyShown.has(optionsShown))
-                    branch = undefined;
-                alreadyShown.add(optionsShown);
-            }
-            return {
-                messageId: messageId.toString(),
-                firstSeenState,
-                branch: branch?.branch,
-                branchOptions: branch?.branchOptions,
-            };
-        });
-    })();
-    const stop = () => stream.stop(historyValues, { onStop: options.onStop });
-    // --- TRANSPORT ---
-    const submit = async (values, submitOptions) => {
-        // Unbranch things
-        const checkpointId = submitOptions?.checkpoint?.checkpoint_id;
-        setBranch(checkpointId != null
-            ? branchContext.branchByCheckpoint[checkpointId]?.branch ?? ""
-            : "");
-        stream.setStreamValues(() => {
-            if (submitOptions?.optimisticValues != null) {
-                return {
-                    ...historyValues,
-                    ...(typeof submitOptions.optimisticValues === "function"
-                        ? submitOptions.optimisticValues(historyValues)
-                        : submitOptions.optimisticValues),
-                };
-            }
-            return { ...historyValues };
-        });
-        // When `fetchStateHistory` is requested, thus we assume that branching
-        // is enabled. We then need to include the implicit branch.
-        const includeImplicitBranch = historyLimit === true || typeof historyLimit === "number";
-        let callbackMeta;
-        let rejoinKey;
-        let usableThreadId = threadId;
-        await stream.start(async (signal) => {
-            if (!usableThreadId) {
-                const thread = await client.threads.create({
-                    threadId: submitOptions?.threadId,
-                    metadata: submitOptions?.metadata,
-                });
-                onThreadId(thread.thread_id);
-                usableThreadId = thread.thread_id;
-            }
-            if (!usableThreadId) {
-                throw new Error("Failed to obtain valid thread ID.");
-            }
-            const streamMode = (0, utils_js_1.unique)([
-                ...(submitOptions?.streamMode ?? []),
-                ...trackStreamModeRef.current,
-                ...callbackStreamMode,
-            ]);
-            let checkpoint = submitOptions?.checkpoint ??
-                (includeImplicitBranch
-                    ? branchContext.threadHead?.checkpoint
-                    : undefined) ??
-                undefined;
-            // Avoid specifying a checkpoint if user explicitly set it to null
-            if (submitOptions?.checkpoint === null)
-                checkpoint = undefined;
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            if (checkpoint != null)
-                delete checkpoint.thread_id;
-            const streamResumable = submitOptions?.streamResumable ?? !!runMetadataStorage;
-            return client.runs.stream(usableThreadId, options.assistantId, {
-                input: values,
-                config: submitOptions?.config,
-                context: submitOptions?.context,
-                command: submitOptions?.command,
-                interruptBefore: submitOptions?.interruptBefore,
-                interruptAfter: submitOptions?.interruptAfter,
-                metadata: submitOptions?.metadata,
-                multitaskStrategy: submitOptions?.multitaskStrategy,
-                onCompletion: submitOptions?.onCompletion,
-                onDisconnect: submitOptions?.onDisconnect ??
-                    (streamResumable ? "continue" : "cancel"),
-                signal,
-                checkpoint,
-                streamMode,
-                streamSubgraphs: submitOptions?.streamSubgraphs,
-                streamResumable,
-                durability: submitOptions?.durability,
-                onRunCreated(params) {
-                    callbackMeta = {
-                        run_id: params.run_id,
-                        thread_id: params.thread_id ?? usableThreadId,
-                    };
-                    if (runMetadataStorage) {
-                        rejoinKey = `lg:stream:${usableThreadId}`;
-                        runMetadataStorage.setItem(rejoinKey, callbackMeta.run_id);
-                    }
-                    options.onCreated?.(callbackMeta);
-                },
-            });
-        }, {
-            getMessages,
-            setMessages,
-            initialValues: historyValues,
-            callbacks: options,
-            async onSuccess() {
-                if (rejoinKey)
-                    runMetadataStorage?.removeItem(rejoinKey);
-                const shouldRefetch = 
-                // We're expecting the whole thread state in onFinish
-                options.onFinish != null ||
-                    // We're fetching history, thus we need the latest checkpoint
-                    // to ensure we're not accidentally submitting to a wrong branch
-                    includeImplicitBranch;
-                if (shouldRefetch) {
-                    const newHistory = await history.mutate(usableThreadId);
-                    const lastHead = newHistory.at(0);
-                    if (lastHead) {
-                        // We now have the latest update from /history
-                        // Thus we can clear the local stream state
-                        options.onFinish?.(lastHead, callbackMeta);
-                        return null;
-                    }
-                }
-                return undefined;
-            },
-            onError(error) {
-                options.onError?.(error, callbackMeta);
-            },
-        });
-    };
-    const joinStream = async (runId, lastEventId, joinOptions) => {
-        // eslint-disable-next-line no-param-reassign
-        lastEventId ??= "-1";
-        if (!threadId)
-            return;
-        const callbackMeta = {
-            thread_id: threadId,
-            run_id: runId,
-        };
-        await stream.start(async (signal) => {
-            return client.runs.joinStream(threadId, runId, {
-                signal,
-                lastEventId,
-                streamMode: joinOptions?.streamMode,
-            });
-        }, {
-            getMessages,
-            setMessages,
-            initialValues: historyValues,
-            callbacks: options,
-            async onSuccess() {
-                runMetadataStorage?.removeItem(`lg:stream:${threadId}`);
-                const newHistory = await history.mutate(threadId);
-                const lastHead = newHistory.at(0);
-                if (lastHead)
-                    options.onFinish?.(lastHead, callbackMeta);
-            },
-            onError(error) {
-                options.onError?.(error, callbackMeta);
-            },
-        });
-    };
-    const reconnectKey = (0, react_1.useMemo)(() => {
-        if (!runMetadataStorage || stream.isLoading)
-            return undefined;
-        if (typeof window === "undefined")
-            return undefined;
-        const runId = runMetadataStorage?.getItem(`lg:stream:${threadId}`);
-        if (!runId)
-            return undefined;
-        return { runId, threadId };
-    }, [runMetadataStorage, stream.isLoading, threadId]);
-    const shouldReconnect = !!runMetadataStorage;
-    const reconnectRef = (0, react_1.useRef)({ threadId, shouldReconnect });
-    const joinStreamRef = (0, react_1.useRef)(joinStream);
-    joinStreamRef.current = joinStream;
-    (0, react_1.useEffect)(() => {
-        // reset shouldReconnect when switching threads
-        if (reconnectRef.current.threadId !== threadId) {
-            reconnectRef.current = { threadId, shouldReconnect };
-        }
-    }, [threadId, shouldReconnect]);
-    (0, react_1.useEffect)(() => {
-        if (reconnectKey && reconnectRef.current.shouldReconnect) {
-            reconnectRef.current.shouldReconnect = false;
-            void joinStreamRef.current?.(reconnectKey.runId);
-        }
-    }, [reconnectKey]);
-    // --- END TRANSPORT ---
-    const error = stream.error ?? historyError ?? history.error;
-    const values = stream.values ?? historyValues;
-    return {
-        get values() {
-            trackStreamMode("values");
-            return values;
-        },
-        client,
-        assistantId: options.assistantId,
-        error,
-        isLoading: stream.isLoading,
-        stop,
-        submit,
-        joinStream,
-        branch,
-        setBranch,
-        get history() {
-            if (historyLimit === false) {
-                throw new Error("`fetchStateHistory` must be set to `true` to use `history`");
-            }
-            return branchContext.flatHistory;
-        },
-        isThreadLoading: history.isLoading && history.data == null,
-        get experimental_branchTree() {
-            if (historyLimit === false) {
-                throw new Error("`fetchStateHistory` must be set to `true` to use `experimental_branchTree`");
-            }
-            return branchContext.branchTree;
-        },
-        get interrupt() {
-            if (values != null &&
-                "__interrupt__" in values &&
-                Array.isArray(values.__interrupt__)) {
-                const valueInterrupts = values.__interrupt__;
-                if (valueInterrupts.length === 0)
-                    return { when: "breakpoint" };
-                if (valueInterrupts.length === 1)
-                    return valueInterrupts[0];
-                // TODO: fix the typing of interrupts if multiple interrupts are returned
-                return valueInterrupts;
-            }
-            // If we're deferring to old interrupt detection logic, don't show the interrupt if the stream is loading
-            if (stream.isLoading)
-                return undefined;
-            const interrupts = branchContext.threadHead?.tasks?.at(-1)?.interrupts;
-            if (interrupts == null || interrupts.length === 0) {
-                // check if there's a next task present
-                const next = branchContext.threadHead?.next ?? [];
-                if (!next.length || error != null)
-                    return undefined;
-                return { when: "breakpoint" };
-            }
-            // Return only the current interrupt
-            return interrupts.at(-1);
-        },
-        get messages() {
-            trackStreamMode("messages-tuple", "values");
-            return getMessages(values);
-        },
-        getMessagesMetadata(message, index) {
-            trackStreamMode("values");
-            const streamMetadata = messageManager.get(message.id)?.metadata;
-            const historyMetadata = messageMetadata?.find((m) => m.messageId === (message.id ?? index));
-            if (streamMetadata != null || historyMetadata != null) {
-                return {
-                    ...historyMetadata,
-                    streamMetadata,
-                };
-            }
-            return undefined;
-        },
-    };
+    // Store this in useState to make sure we're not changing the implementation in re-renders
+    const [isCustom] = (0, react_1.useState)(isCustomOptions(options));
+    if (isCustom) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return (0, stream_custom_js_1.useStreamCustom)(options);
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return (0, stream_lgp_js_1.useStreamLGP)(options);
 }