byokay-kit/dist/ui/ByokayKeyProvider.js

Byokay Kit lets users bring their own AI API keys and store them securely in their browser. This eliminates the need for your app to manage sensitive credentials or maintain AI API backend infrastructure.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// src/ui/ByokayKeyProvider.tsx
import { useState, useCallback } from "react";
import { useMultiApiKeys } from "../hooks/useMultiApiKeys";
import { Modal } from "./components/Modal";
import { KeyManagerContent } from "./components/KeyManagerContent";
import { ensureStyles } from "./ensureStyles";
const defaultProviders = ["openai"];
export function ByokayKeyProvider({ providers = defaultProviders, children, }) {
    ensureStyles();
    const [showModal, setShowModal] = useState(false);
    const { keys, saved, validating, validated, validationMessages, isUnverifiedDueToCors, handleKeyChange, handleClear, handleClearAll, handleValidate, hasAnyKey, providerNames, } = useMultiApiKeys(providers);
    const openModal = useCallback(() => setShowModal(true), []);
    const closeModal = useCallback(() => {
        setShowModal(false);
    }, []);
    return (_jsxs(_Fragment, { children: [children(openModal, hasAnyKey), _jsx(Modal, { isOpen: showModal, onClose: closeModal, title: "Link your AI accounts", subtitle: "Keys are stored only in your browser. For your security, avoid using shared devices or clear keys after.", children: _jsx(KeyManagerContent, { providers: providers, providerNames: providerNames, keys: keys, saved: saved, validating: validating, validated: validated, validationMessages: validationMessages || {}, isUnverifiedDueToCors: isUnverifiedDueToCors || {}, onKeyChange: handleKeyChange, onValidate: handleValidate, onClear: handleClear, onClearAll: handleClearAll }) })] }));
}