byokay-kit/dist/ui/ByokaiKeyConnector.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, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { KeyManager } from "../core/KeyManager";
const manager = new KeyManager();
// Button to connect/manage API key
const ConnectionButton = ({ hasKey, onClick, }) => (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 text-blue-600 bg-blue-50 hover:bg-blue-100 px-3 py-2 rounded-full text-sm font-medium transition-colors", children: [_jsx("span", { className: "text-base", children: hasKey ? "🔒" : "🔑" }), hasKey ? "Manage API Key" : "Connect AI"] }));
// Close button for the form
const CloseButton = ({ onClick }) => (_jsx("button", { onClick: onClick, className: "text-gray-500 hover:text-gray-700 rounded-full p-1 hover:bg-gray-100 transition-colors", "aria-label": "Close", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }));
// Success message component
const SavedMessage = () => (_jsxs("div", { className: "flex items-center gap-2 text-green-600 bg-green-50 p-2 rounded-lg text-sm", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }), "API key saved successfully"] }));
// Key input form
const KeyInputForm = ({ provider, label, keyValue, onKeyChange, onClose, onSave, onClear, showSaved, }) => (_jsxs("div", { className: "bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200 max-w-md animate-fade-in transition-all", children: [_jsxs("div", { className: "bg-blue-50 px-4 py-3 flex justify-between items-center border-b border-gray-200", children: [_jsx("h3", { className: "font-medium text-gray-800", children: label ||
                        `${provider.charAt(0).toUpperCase() + provider.slice(1)} API Key` }), _jsx(CloseButton, { onClick: onClose })] }), _jsxs("div", { className: "p-4 space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { htmlFor: "api-key-input", className: "block text-sm text-gray-700", children: ["Enter your ", provider, " API key"] }), _jsx("div", { className: "relative", children: _jsx("input", { id: "api-key-input", type: "password", value: keyValue, onChange: (e) => onKeyChange(e.target.value), placeholder: `Enter ${provider} key`, className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none text-sm" }) })] }), showSaved && _jsx(SavedMessage, {}), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx("button", { onClick: onSave, className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex-1", children: "Save" }), _jsx("button", { onClick: onClear, className: "border border-gray-300 bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex-1", children: "Clear" })] })] })] }));
export function ByokaiKeyConnector({ provider, label, className }) {
    const [key, setKey] = useState("");
    const [saved, setSaved] = useState(false);
    const [showInput, setShowInput] = useState(false);
    useEffect(() => {
        const stored = manager.getKey(provider);
        if (stored)
            setKey(stored);
    }, [provider]);
    const handleSave = () => {
        manager.setKey(provider, key);
        setSaved(true);
        setTimeout(() => setSaved(false), 1500);
    };
    const handleClear = () => {
        manager.removeKey(provider);
        setKey("");
        setSaved(false);
    };
    return (_jsx("div", { className: className, children: !showInput ? (_jsx(ConnectionButton, { hasKey: !!key, onClick: () => setShowInput(true) })) : (_jsx(KeyInputForm, { provider: provider, label: label, keyValue: key, onKeyChange: setKey, onClose: () => setShowInput(false), onSave: handleSave, onClear: handleClear, showSaved: saved })) }));
}
// For backward compatibility
export const KeyInput = ByokaiKeyConnector;