@langchain/langgraph-sdk 0.1.5 → 0.1.6

package/dist/react/stream.custom.cjs

@@ -0,0 +1,148 @@
+"use strict";
+/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */
+"use client";
+/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FetchStreamTransport = void 0;
+exports.useStreamCustom = useStreamCustom;
+const react_1 = require("react");
+const manager_js_1 = require("./manager.cjs");
+const messages_js_1 = require("./messages.cjs");
+const sse_js_1 = require("../utils/sse.cjs");
+const stream_js_1 = require("../utils/stream.cjs");
+const thread_js_1 = require("./thread.cjs");
+class FetchStreamTransport {
+    constructor(options) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+    }
+    async stream(payload) {
+        const { signal, ...body } = payload;
+        let requestInit = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                ...this.options.defaultHeaders,
+            },
+            body: JSON.stringify(body),
+            signal,
+        };
+        if (this.options.onRequest) {
+            requestInit = await this.options.onRequest(this.options.apiUrl, requestInit);
+        }
+        const fetchFn = this.options.fetch ?? fetch;
+        const response = await fetchFn(this.options.apiUrl, requestInit);
+        if (!response.ok) {
+            throw new Error(`Failed to stream: ${response.statusText}`);
+        }
+        const stream = (response.body || new ReadableStream({ start: (ctrl) => ctrl.close() }))
+            .pipeThrough((0, sse_js_1.BytesLineDecoder)())
+            .pipeThrough((0, sse_js_1.SSEDecoder)());
+        return stream_js_1.IterableReadableStream.fromReadableStream(stream);
+    }
+}
+exports.FetchStreamTransport = FetchStreamTransport;
+function useStreamCustom(options) {
+    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] = (0, thread_js_1.useControllableThreadId)(options);
+    const threadIdRef = (0, react_1.useRef)(threadId);
+    // Cancel the stream if thread ID has changed
+    (0, react_1.useEffect)(() => {
+        if (threadIdRef.current !== threadId) {
+            threadIdRef.current = threadId;
+            stream.clear();
+        }
+    }, [threadId, stream]);
+    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 historyValues = options.initialValues ?? {};
+    const stop = () => stream.stop(historyValues, { onStop: options.onStop });
+    const submit = async (values, submitOptions) => {
+        let callbackMeta;
+        let usableThreadId = threadId;
+        stream.setStreamValues(() => {
+            if (submitOptions?.optimisticValues != null) {
+                return {
+                    ...historyValues,
+                    ...(typeof submitOptions.optimisticValues === "function"
+                        ? submitOptions.optimisticValues(historyValues)
+                        : submitOptions.optimisticValues),
+                };
+            }
+            return { ...historyValues };
+        });
+        await stream.start(async (signal) => {
+            if (!usableThreadId) {
+                // generate random thread id
+                usableThreadId = crypto.randomUUID();
+                threadIdRef.current = usableThreadId;
+                onThreadId(usableThreadId);
+            }
+            if (!usableThreadId) {
+                throw new Error("Failed to obtain valid thread ID.");
+            }
+            return options.transport.stream({
+                input: values,
+                context: submitOptions?.context,
+                command: submitOptions?.command,
+                signal,
+                config: {
+                    ...submitOptions?.config,
+                    configurable: {
+                        thread_id: usableThreadId,
+                        ...submitOptions?.config?.configurable,
+                    },
+                },
+            });
+        }, {
+            getMessages,
+            setMessages,
+            initialValues: {},
+            callbacks: options,
+            onSuccess: () => undefined,
+            onError(error) {
+                options.onError?.(error, callbackMeta);
+            },
+        });
+    };
+    return {
+        get values() {
+            return stream.values ?? {};
+        },
+        error: stream.error,
+        isLoading: stream.isLoading,
+        stop,
+        submit,
+        get interrupt() {
+            if (stream.values != null &&
+                "__interrupt__" in stream.values &&
+                Array.isArray(stream.values.__interrupt__)) {
+                const valueInterrupts = stream.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;
+            }
+            return undefined;
+        },
+        get messages() {
+            if (!stream.values)
+                return [];
+            return getMessages(stream.values);
+        },
+    };
+}

package/dist/react/stream.custom.d.ts

@@ -0,0 +1,41 @@
+import type { BagTemplate, GetUpdateType, GetConfigurableType, UseStreamCustomOptions, UseStreamCustom, UseStreamTransport } from "./types.js";
+import { Command } from "../types.js";
+interface FetchStreamTransportOptions {
+    /**
+     * The URL of the API to use.
+     */
+    apiUrl: string;
+    /**
+     * Default headers to send with requests.
+     */
+    defaultHeaders?: HeadersInit;
+    /**
+     * Specify a custom fetch implementation.
+     */
+    fetch?: typeof fetch | ((...args: any[]) => any);
+    /**
+     * Callback that is called before the request is made.
+     */
+    onRequest?: (url: string, init: RequestInit) => Promise<RequestInit> | RequestInit;
+}
+export declare class FetchStreamTransport<StateType extends Record<string, unknown> = Record<string, unknown>, Bag extends BagTemplate = BagTemplate> implements UseStreamTransport<StateType, Bag> {
+    private readonly options;
+    constructor(options: FetchStreamTransportOptions);
+    stream(payload: {
+        input: GetUpdateType<Bag, StateType> | null | undefined;
+        context: GetConfigurableType<Bag> | undefined;
+        command: Command | undefined;
+        signal: AbortSignal;
+    }): Promise<AsyncGenerator<{
+        id?: string;
+        event: string;
+        data: unknown;
+    }>>;
+}
+export declare function useStreamCustom<StateType extends Record<string, unknown> = Record<string, unknown>, Bag extends {
+    ConfigurableType?: Record<string, unknown>;
+    InterruptType?: unknown;
+    CustomEventType?: unknown;
+    UpdateType?: unknown;
+} = BagTemplate>(options: UseStreamCustomOptions<StateType, Bag>): UseStreamCustom<StateType, Bag>;
+export {};

package/dist/react/stream.custom.js

@@ -0,0 +1,142 @@
+/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */
+"use client";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { StreamManager } from "./manager.js";
+import { MessageTupleManager } from "./messages.js";
+import { BytesLineDecoder, SSEDecoder } from "../utils/sse.js";
+import { IterableReadableStream } from "../utils/stream.js";
+import { useControllableThreadId } from "./thread.js";
+export class FetchStreamTransport {
+    constructor(options) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+    }
+    async stream(payload) {
+        const { signal, ...body } = payload;
+        let requestInit = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                ...this.options.defaultHeaders,
+            },
+            body: JSON.stringify(body),
+            signal,
+        };
+        if (this.options.onRequest) {
+            requestInit = await this.options.onRequest(this.options.apiUrl, requestInit);
+        }
+        const fetchFn = this.options.fetch ?? fetch;
+        const response = await fetchFn(this.options.apiUrl, requestInit);
+        if (!response.ok) {
+            throw new Error(`Failed to stream: ${response.statusText}`);
+        }
+        const stream = (response.body || new ReadableStream({ start: (ctrl) => ctrl.close() }))
+            .pipeThrough(BytesLineDecoder())
+            .pipeThrough(SSEDecoder());
+        return IterableReadableStream.fromReadableStream(stream);
+    }
+}
+export function useStreamCustom(options) {
+    const [messageManager] = useState(() => new MessageTupleManager());
+    const [stream] = useState(() => new StreamManager(messageManager));
+    useSyncExternalStore(stream.subscribe, stream.getSnapshot, stream.getSnapshot);
+    const [threadId, onThreadId] = useControllableThreadId(options);
+    const threadIdRef = useRef(threadId);
+    // Cancel the stream if thread ID has changed
+    useEffect(() => {
+        if (threadIdRef.current !== threadId) {
+            threadIdRef.current = threadId;
+            stream.clear();
+        }
+    }, [threadId, stream]);
+    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 historyValues = options.initialValues ?? {};
+    const stop = () => stream.stop(historyValues, { onStop: options.onStop });
+    const submit = async (values, submitOptions) => {
+        let callbackMeta;
+        let usableThreadId = threadId;
+        stream.setStreamValues(() => {
+            if (submitOptions?.optimisticValues != null) {
+                return {
+                    ...historyValues,
+                    ...(typeof submitOptions.optimisticValues === "function"
+                        ? submitOptions.optimisticValues(historyValues)
+                        : submitOptions.optimisticValues),
+                };
+            }
+            return { ...historyValues };
+        });
+        await stream.start(async (signal) => {
+            if (!usableThreadId) {
+                // generate random thread id
+                usableThreadId = crypto.randomUUID();
+                threadIdRef.current = usableThreadId;
+                onThreadId(usableThreadId);
+            }
+            if (!usableThreadId) {
+                throw new Error("Failed to obtain valid thread ID.");
+            }
+            return options.transport.stream({
+                input: values,
+                context: submitOptions?.context,
+                command: submitOptions?.command,
+                signal,
+                config: {
+                    ...submitOptions?.config,
+                    configurable: {
+                        thread_id: usableThreadId,
+                        ...submitOptions?.config?.configurable,
+                    },
+                },
+            });
+        }, {
+            getMessages,
+            setMessages,
+            initialValues: {},
+            callbacks: options,
+            onSuccess: () => undefined,
+            onError(error) {
+                options.onError?.(error, callbackMeta);
+            },
+        });
+    };
+    return {
+        get values() {
+            return stream.values ?? {};
+        },
+        error: stream.error,
+        isLoading: stream.isLoading,
+        stop,
+        submit,
+        get interrupt() {
+            if (stream.values != null &&
+                "__interrupt__" in stream.values &&
+                Array.isArray(stream.values.__interrupt__)) {
+                const valueInterrupts = stream.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;
+            }
+            return undefined;
+        },
+        get messages() {
+            if (!stream.values)
+                return [];
+            return getMessages(stream.values);
+        },
+    };
+}

package/dist/react/stream.d.ts

@@ -1,4 +1,64 @@
-import type { BagTemplate, UseStreamOptions, UseStream } from "./types.js";
+import { BagTemplate, UseStream, UseStreamCustom, UseStreamCustomOptions, UseStreamOptions } from "./types.js";
+/**
+ * A React hook that provides seamless integration with LangGraph streaming capabilities.
+ *
+ * The `useStream` hook handles all the complexities of streaming, state management, and branching logic,
+ * letting you focus on building great chat experiences. It provides automatic state management for
+ * messages, interrupts, loading states, and errors.
+ *
+ * @template StateType The type of the thread state (default: `Record<string, unknown>`)
+ * @template Bag Type configuration bag containing:
+ *   - `ConfigurableType`: Type for the `config.configurable` property
+ *   - `InterruptType`: Type for interrupt values
+ *   - `CustomEventType`: Type for custom events
+ *   - `UpdateType`: Type for the submit function updates
+ *
+ * @see {@link https://docs.langchain.com/langgraph-platform/use-stream-react | LangGraph React Integration Guide}
+ */
+export declare function useStream<StateType extends Record<string, unknown> = Record<string, unknown>, Bag extends {
+    ConfigurableType?: Record<string, unknown>;
+    InterruptType?: unknown;
+    CustomEventType?: unknown;
+    UpdateType?: unknown;
+} = BagTemplate>(options: UseStreamOptions<StateType, Bag>): UseStream<StateType, Bag>;
+/**
+ * A React hook that provides seamless integration with LangGraph streaming capabilities.
+ *
+ * The `useStream` hook handles all the complexities of streaming, state management, and branching logic,
+ * letting you focus on building great chat experiences. It provides automatic state management for
+ * messages, interrupts, loading states, and errors.
+ *
+ * @template StateType The type of the thread state (default: `Record<string, unknown>`)
+ * @template Bag Type configuration bag containing:
+ *   - `ConfigurableType`: Type for the `config.configurable` property
+ *   - `InterruptType`: Type for interrupt values
+ *   - `CustomEventType`: Type for custom events
+ *   - `UpdateType`: Type for the submit function updates
+ *
+ * @see {@link https://docs.langchain.com/langgraph-platform/use-stream-react | LangGraph React Integration Guide}
+ */
+export declare function useStream<StateType extends Record<string, unknown> = Record<string, unknown>, Bag extends {
+    ConfigurableType?: Record<string, unknown>;
+    InterruptType?: unknown;
+    CustomEventType?: unknown;
+    UpdateType?: unknown;
+} = BagTemplate>(options: UseStreamCustomOptions<StateType, Bag>): UseStreamCustom<StateType, Bag>;
+/**
+ * A React hook that provides seamless integration with LangGraph streaming capabilities.
+ *
+ * The `useStream` hook handles all the complexities of streaming, state management, and branching logic,
+ * letting you focus on building great chat experiences. It provides automatic state management for
+ * messages, interrupts, loading states, and errors.
+ *
+ * @template StateType The type of the thread state (default: `Record<string, unknown>`)
+ * @template Bag Type configuration bag containing:
+ *   - `ConfigurableType`: Type for the `config.configurable` property
+ *   - `InterruptType`: Type for interrupt values
+ *   - `CustomEventType`: Type for custom events
+ *   - `UpdateType`: Type for the submit function updates
+ *
+ * @see {@link https://docs.langchain.com/langgraph-platform/use-stream-react | LangGraph React Integration Guide}
+ */
 export declare function useStream<StateType extends Record<string, unknown> = Record<string, unknown>, Bag extends {
     ConfigurableType?: Record<string, unknown>;
     InterruptType?: unknown;