@langgraph-js/sdk 2.2.0 → 3.0.0

package/src/vue/ChatContext.ts

@@ -0,0 +1,161 @@
+import { defineComponent, inject, provide, onMounted, h, type InjectionKey, type PropType, Ref } from "vue";
+import { createChatStore } from "../ui-store/index.js";
+import { useStore } from "@nanostores/vue";
+import { PreinitializedWritableAtom, StoreValue } from "nanostores";
+
+/**
+ * @zh UnionStore 类型用于合并 store 的 data 和 mutations，使其可以直接访问。
+ * @en The UnionStore type is used to merge the data and mutations of a store, allowing direct access.
+ */
+export type UnionStoreVue<T extends { data: Record<string, PreinitializedWritableAtom<any>>; mutations: Record<string, any> }> = {
+    [k in keyof T["data"]]: Readonly<Ref<StoreValue<T["data"][k]>>>;
+} & T["mutations"];
+
+/**
+ * @zh useUnionStore Hook 用于将 nanostores 的 store 结构转换为更易于在 UI 组件中使用的扁平结构。
+ * @en The useUnionStore Hook is used to transform the nanostores store structure into a flatter structure that is easier to use in UI components.
+ */
+export const useUnionStoreVue = <T extends { data: Record<string, any>; mutations: Record<string, any> }>(
+    store: T,
+    useStore: (store: PreinitializedWritableAtom<any>) => Readonly<Ref<any>>
+): UnionStoreVue<T> => {
+    const data: any = Object.fromEntries(
+        Object.entries(store.data as any).map(([key, value]) => {
+            return [key, useStore(value as any)];
+        })
+    );
+
+    return {
+        ...data,
+        ...store.mutations,
+    };
+};
+
+// 定义注入的 key，提供完整类型
+const ChatContextKey: InjectionKey<UnionStoreVue<ReturnType<typeof createChatStore>>> = Symbol("ChatContext");
+
+/**
+ * 使用 Chat Store 的组合式函数
+ * @throws {Error} 如果在 ChatProvider 外部使用会抛出错误
+ */
+export const useChat = (): UnionStoreVue<ReturnType<typeof createChatStore>> => {
+    const context = inject(ChatContextKey);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+
+export interface ChatProviderProps {
+    defaultAgent?: string;
+    apiUrl?: string;
+    defaultHeaders?: Record<string, string>;
+    withCredentials?: boolean;
+    showHistory?: boolean;
+    showGraph?: boolean;
+    onInitError?: (error: any, currentAgent: string) => void;
+}
+
+/**
+ * @zh Chat Provider Hook，用于在 setup 中直接使用
+ * @en Chat Provider Hook, used directly in setup
+ */
+export const useChatProvider = (props: ChatProviderProps) => {
+    const F = props.withCredentials
+        ? (url: string, options: RequestInit) => {
+              options.credentials = "include";
+              return fetch(url, options);
+          }
+        : fetch;
+
+    const store = createChatStore(
+        props.defaultAgent || "",
+        {
+            apiUrl: props.apiUrl,
+            defaultHeaders: props.defaultHeaders,
+            callerOptions: {
+                fetch: F,
+                maxRetries: 1,
+            },
+        },
+        {
+            showHistory: props.showHistory,
+            showGraph: props.showGraph,
+        }
+    );
+
+    const unionStore = useUnionStoreVue(store, useStore);
+
+    // 提供 store 给子组件
+    provide(ChatContextKey, unionStore);
+
+    // 初始化客户端
+    onMounted(() => {
+        unionStore
+            .initClient()
+            .then(() => {
+                if (unionStore.showHistory) {
+                    unionStore.refreshHistoryList();
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+                if (props.onInitError) {
+                    props.onInitError(err, unionStore.currentAgent.value);
+                }
+            });
+    });
+
+    return {
+        unionStore,
+    };
+};
+
+/**
+ * Chat Provider 组件
+ * 提供 Chat Store 的上下文
+ */
+export const ChatProvider = defineComponent({
+    name: "ChatProvider",
+    props: {
+        defaultAgent: {
+            type: String as PropType<string>,
+            default: "",
+        },
+        apiUrl: {
+            type: String as PropType<string>,
+            default: "http://localhost:8123",
+        },
+        defaultHeaders: {
+            type: Object as PropType<Record<string, string>>,
+            default: () => ({}),
+        },
+        withCredentials: {
+            type: Boolean as PropType<boolean>,
+            default: false,
+        },
+        showHistory: {
+            type: Boolean as PropType<boolean>,
+            default: false,
+        },
+        showGraph: {
+            type: Boolean as PropType<boolean>,
+            default: false,
+        },
+        onInitError: {
+            type: Function as PropType<(error: any, currentAgent: string) => void>,
+            default: undefined,
+        },
+    },
+    setup(props, { slots }) {
+        const { unionStore } = useChatProvider(props);
+
+        defineExpose({
+            unionStore,
+        });
+
+        return () => {
+            return slots.default?.();
+        };
+    },
+});

package/src/vue/index.ts

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/src/types.ts

@@ -1,129 +0,0 @@
-import {
-    Thread,
-    Assistant,
-    Run,
-    StreamMode,
-    Command,
-    Metadata,
-    AssistantGraph,
-    OnConflictBehavior,
-    ThreadStatus,
-    ValuesStreamEvent,
-    UpdatesStreamEvent,
-    DebugStreamEvent,
-    MessagesStreamEvent,
-    MessagesTupleStreamEvent,
-    CustomStreamEvent,
-    EventsStreamEvent,
-    ErrorStreamEvent,
-    MetadataStreamEvent,
-    FeedbackStreamEvent,
-    Config,
-    Checkpoint,
-} from "@langchain/langgraph-sdk";
-import { StreamEvent } from "@langchain/core/tracers/log_stream";
-
-// 基础类型定义
-export type AssistantSortBy = "assistant_id" | "graph_id" | "name" | "created_at" | "updated_at";
-export type ThreadSortBy = "thread_id" | "status" | "created_at" | "updated_at";
-export type SortOrder = "asc" | "desc";
-export type RunStatus = "pending" | "running" | "error" | "success" | "timeout" | "interrupted";
-export type MultitaskStrategy = "reject" | "interrupt" | "rollback" | "enqueue";
-export type DisconnectMode = "cancel" | "continue";
-export type OnCompletionBehavior = "complete" | "continue";
-export type CancelAction = "interrupt" | "rollback";
-
-// 流式异步生成器类型
-export type TypedAsyncGenerator<TStateType = unknown, TUpdateType = TStateType, TCustomType = unknown> = AsyncGenerator<
-    | {
-          values: ValuesStreamEvent<TStateType>;
-          updates: UpdatesStreamEvent<TUpdateType>;
-          custom: CustomStreamEvent<TCustomType>;
-          debug: DebugStreamEvent;
-          messages: MessagesStreamEvent;
-          "messages-tuple": MessagesTupleStreamEvent;
-          events: EventsStreamEvent;
-      }[StreamMode]
-    | ErrorStreamEvent
-    | MetadataStreamEvent
-    | FeedbackStreamEvent
->;
-
-/**
- * 兼容 LangGraph SDK 的接口定义，方便进行无侵入式的扩展
- */
-export interface ILangGraphClient<TStateType = {}, TUpdateType = TStateType> {
-    assistants: {
-        search(query?: { graphId?: string; metadata?: Metadata; limit?: number; offset?: number; sortBy?: AssistantSortBy; sortOrder?: SortOrder }): Promise<Assistant[]>;
-        getGraph(assistantId: string, options?: { xray?: boolean | number }): Promise<AssistantGraph>;
-    };
-    threads: {
-        create(payload?: {
-            metadata?: Metadata;
-            threadId?: string;
-            ifExists?: OnConflictBehavior;
-            graphId?: string;
-            supersteps?: Array<{
-                updates: Array<{
-                    values: unknown;
-                    command?: Command;
-                    asNode: string;
-                }>;
-            }>;
-        }): Promise<Thread<TStateType>>;
-        search(query?: { metadata?: Metadata; limit?: number; offset?: number; status?: ThreadStatus; sortBy?: ThreadSortBy; sortOrder?: SortOrder }): Promise<Thread<TStateType>[]>;
-        get(threadId: string): Promise<Thread<TStateType>>;
-        delete(threadId: string): Promise<void>;
-    };
-    runs: {
-        list(
-            threadId: string,
-            options?: {
-                limit?: number;
-                offset?: number;
-                status?: RunStatus;
-            }
-        ): Promise<Run[]>;
-
-        stream<TSubgraphs extends boolean = false>(
-            threadId: string,
-            assistantId: string,
-            payload?: {
-                input?: Record<string, unknown> | null;
-                metadata?: Metadata;
-                config?: Config;
-                checkpointId?: string;
-                checkpoint?: Omit<Checkpoint, "thread_id">;
-                checkpointDuring?: boolean;
-                interruptBefore?: "*" | string[];
-                interruptAfter?: "*" | string[];
-                multitaskStrategy?: MultitaskStrategy;
-                onCompletion?: OnCompletionBehavior;
-                signal?: AbortController["signal"];
-                webhook?: string;
-                onDisconnect?: DisconnectMode;
-                afterSeconds?: number;
-                ifNotExists?: "create" | "reject";
-                command?: Command;
-                onRunCreated?: (params: { run_id: string; thread_id?: string }) => void;
-                streamMode?: StreamMode[];
-                streamSubgraphs?: TSubgraphs;
-                streamResumable?: boolean;
-                feedbackKeys?: string[];
-            }
-        ): TypedAsyncGenerator<TSubgraphs, TStateType, TUpdateType>;
-        joinStream(
-            threadId: string,
-            runId: string,
-            options?:
-                | {
-                      signal?: AbortSignal;
-                      cancelOnDisconnect?: boolean;
-                      lastEventId?: string;
-                      streamMode?: StreamMode | StreamMode[];
-                  }
-                | AbortSignal
-        ): AsyncGenerator<{ id?: string; event: StreamEvent; data: any }>;
-        cancel(threadId: string, runId: string, wait?: boolean, action?: CancelAction): Promise<void>;
-    };
-}