@langgraph-js/sdk/dist/vue/ChatContext.js

The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces

import { defineComponent, inject, provide, onMounted, defineExpose } from "vue";
import { createChatStore } from "../ui-store/index.js";
import { useStore } from "@nanostores/vue";
/**
 * @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 = (store, useStore) => {
    const data = Object.fromEntries(Object.entries(store.data).map(([key, value]) => {
        return [key, useStore(value)];
    }));
    return {
        ...data,
        ...store.mutations,
    };
};
// 定义注入的 key，提供完整类型
const ChatContextKey = Symbol("ChatContext");
/**
 * 使用 Chat Store 的组合式函数
 * @throws {Error} 如果在 ChatProvider 外部使用会抛出错误
 */
export const useChat = () => {
    const context = inject(ChatContextKey);
    if (!context) {
        throw new Error("useChat must be used within a ChatProvider");
    }
    return context;
};
/**
 * @zh Chat Provider Hook，用于在 setup 中直接使用
 * @en Chat Provider Hook, used directly in setup
 */
export const useChatProvider = (props) => {
    const baseFetch = props.fetch || globalThis.fetch;
    const F = props.withCredentials
        ? (url, options) => {
            options.credentials = "include";
            return baseFetch(url, options);
        }
        : baseFetch;
    const store = createChatStore(props.defaultAgent || "", {
        apiUrl: props.apiUrl,
        defaultHeaders: props.defaultHeaders,
        callerOptions: {
            fetch: F,
            maxRetries: 1,
        },
        client: props.client,
        legacyMode: props.legacyMode,
    }, {
        showHistory: props.showHistory,
        showGraph: props.showGraph,
        fallbackToAvailableAssistants: props.fallbackToAvailableAssistants,
        autoRestoreLastSession: props.autoRestoreLastSession,
    });
    const unionStore = useUnionStoreVue(store, useStore);
    // 提供 store 给子组件
    provide(ChatContextKey, unionStore);
    // 初始化客户端
    onMounted(() => {
        unionStore.initClient().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,
            default: "",
        },
        apiUrl: {
            type: String,
            default: "http://localhost:8123",
        },
        defaultHeaders: {
            type: Object,
            default: () => ({}),
        },
        withCredentials: {
            type: Boolean,
            default: false,
        },
        fetch: {
            type: Function,
            default: undefined,
        },
        showHistory: {
            type: Boolean,
            default: false,
        },
        showGraph: {
            type: Boolean,
            default: false,
        },
        autoRestoreLastSession: {
            type: Boolean,
            default: false,
        },
        onInitError: {
            type: Function,
            default: undefined,
        },
    },
    setup(props, { slots }) {
        const { unionStore } = useChatProvider(props);
        defineExpose({
            unionStore,
        });
        return () => {
            return slots.default?.();
        };
    },
});