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.
15 lines (14 loc) • 1.91 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ProviderStatus } from "./ProviderStatus";
import { KeyInputField } from "./KeyInputField";
import { ProviderActions } from "./ProviderActions";
export function ProviderRow({ provider, providerDisplayName, currentKey, isSaved, isValidating, isValidated, isUnverifiedDueToCors, validationMessage, onKeyChange, onValidate, onClear, }) {
const hasKey = Boolean(currentKey);
const isTrulyInvalid = !!validationMessage &&
!isUnverifiedDueToCors &&
!isValidated &&
!isValidating;
// Create a dynamic placeholder that includes the provider name
const placeholder = `${providerDisplayName} API key...`;
return (_jsxs("div", { className: "grid grid-cols-12 gap-x-2 gap-y-1 items-start py-3 px-1 md:px-2 rounded-md transition-colors hover:bg-gray-50/70", children: [_jsx("div", { className: "col-span-full md:col-span-3 flex items-center min-h-[40px]", children: _jsx(ProviderStatus, { name: providerDisplayName, isValidated: isValidated, hasKey: hasKey, isUnverified: isUnverifiedDueToCors, unverifiedMessage: isUnverifiedDueToCors ? validationMessage : null }) }), _jsxs("div", { className: "col-span-full md:col-span-7 relative", children: [_jsx(KeyInputField, { value: currentKey, onChange: onKeyChange, placeholder: placeholder, isInvalid: isTrulyInvalid, isUnverified: isUnverifiedDueToCors, feedbackMessage: validationMessage || undefined }), isTrulyInvalid && validationMessage && (_jsx("p", { className: "text-xs text-red-600 mt-1 px-1", children: validationMessage }))] }), _jsx("div", { className: "col-span-full md:col-span-2 flex items-center justify-end space-x-1 min-h-[40px]", children: _jsx(ProviderActions, { hasKey: hasKey, isValidated: isValidated, isSaved: isSaved, isValidating: isValidating, isUnverified: isUnverifiedDueToCors, onValidate: onValidate, onClear: onClear }) })] }));
}