byokay-kit
Version:
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.
45 lines (44 loc) • 4.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
export function ProviderActions({ hasKey, isValidated, isSaved, isValidating, isUnverified, onValidate, onClear, }) {
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
const handleStartDelete = () => setIsConfirmingDelete(true);
const handleCancelDelete = () => setIsConfirmingDelete(false);
const handleConfirmDelete = () => {
onClear();
setIsConfirmingDelete(false);
};
if (isSaved) {
return (_jsx("span", { className: "text-green-700 text-xs bg-green-50 py-1 px-2 rounded-full font-medium", children: "Saved!" }));
}
if (isValidating) {
return (_jsx("span", { className: "text-blue-700 text-xs bg-blue-50 py-1 px-2 rounded-full w-16 text-center animate-pulse font-medium", children: "Validating" }));
}
if (isConfirmingDelete) {
return (_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("button", { onClick: handleConfirmDelete, className: "p-1 rounded text-red-700 bg-red-50 hover:bg-red-100 hover:text-red-800 transition-all", title: "Confirm delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx("button", { onClick: handleCancelDelete, className: "p-1 rounded text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-800 transition-all", title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
}
let validateButtonTitle = "Validate and save key";
let validateButtonIcon = // Default checkmark
(_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 stroke-2 text-gray-500 group-hover:text-blue-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }));
let validateButtonClasses = "text-gray-600 hover:text-blue-700 hover:bg-blue-50 focus-visible:ring-blue-500";
if (isValidated) {
validateButtonClasses =
"text-green-700 bg-green-50 hover:bg-green-100 focus-visible:ring-green-500";
validateButtonIcon = (
/* Green Check */
_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 stroke-green-600 stroke-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }));
validateButtonTitle = "Key is validated and saved";
/* Key saved but unverified (CORS) → grey, disabled check */
validateButtonClasses = "text-gray-400 cursor-default";
validateButtonIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 stroke-[2]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }));
validateButtonTitle = "Key saved. Browser verification not possible.";
}
else if (!hasKey) {
validateButtonClasses = "text-gray-400 cursor-not-allowed";
validateButtonTitle = "Enter a key to validate";
}
// If there's a validationMessage and it's not a CORS issue, it's a hard fail.
// The button might show an X, or revert to the default check to allow re-try.
// Current logic: if !isValidated and !isUnverified and hasKey, it's the default validate state.
return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: onValidate, disabled: !hasKey || isValidating || isUnverified, className: `p-1.5 rounded transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 ${validateButtonClasses}`, title: validateButtonTitle, children: validateButtonIcon }), hasKey && (_jsx("button", { onClick: handleStartDelete, className: "p-1.5 rounded text-gray-500 hover:text-red-700 bg-gray-50 hover:bg-red-50 transition-all hover:scale-110 hover:shadow-sm", title: "Remove key", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) }))] }));
}