src/components/panels/APIKeysConfig.js

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* src/components/panels/APIKeysConfig.tsx */
import { useLocalStorage } from "react-use";
import { useState } from "react";
import { toast } from "react-toastify";
function InputRow({ label, link, storageKey, placeholder, validator }) {
    const [value, setValue] = useLocalStorage(storageKey, "");
    const [error, setError] = useState(null);
    const onChange = (e) => {
        const newValue = e.target.value.trim();
        setValue(newValue);
        if (validator && newValue) {
            const isValid = validator(newValue);
            if (!isValid) {
                setError("Formato de chave inválido");
            }
            else {
                setError(null);
            }
        }
        else {
            setError(null);
        }
    };
    return (_jsxs("div", { className: "mb-4", children: [_jsxs("label", { className: "block font-semibold mb-1", children: [label, " ", _jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 underline", children: "obter chave" })] }), _jsx("input", { className: `w-full border ${error ? "border-red-500" : "border-gray-400"} px-2 py-1 text-sm`, placeholder: placeholder, type: "text", value: value ?? "", onChange: onChange }), error && _jsx("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
}
export default function APIKeysConfig() {
    const validateOpenAI = (key) => key.startsWith("sk-");
    const validateGemini = (key) => key.startsWith("AIza");
    const validateHF = (key) => key.startsWith("hf_");
    const testConnections = () => {
        toast.info("Testando conexões...");
        // Aqui poderíamos implementar um teste real de conexão
        setTimeout(() => toast.success("Chaves salvas com sucesso!"), 1000);
    };
    return (_jsxs("div", { className: "p-4", children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: "Configurar chaves de API" }), _jsx(InputRow, { label: "OpenAI (ChatGPT)", link: "https://platform.openai.com/account/api-keys", storageKey: "chatgptKey", placeholder: "sk-...", validator: validateOpenAI }), _jsx(InputRow, { label: "Google Gemini", link: "https://makersuite.google.com/app/apikey", storageKey: "geminiKey", placeholder: "AIzaSy...", validator: validateGemini }), _jsx(InputRow, { label: "Hugging Face Token", link: "https://huggingface.co/settings/tokens", storageKey: "hfToken", placeholder: "hf_...", validator: validateHF }), _jsx("button", { onClick: testConnections, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", children: "Salvar e Testar Conex\u00F5es" }), _jsxs("p", { className: "text-sm text-gray-600 mt-4", children: ["As chaves s\u00E3o salvas apenas no ", _jsx("i", { children: "localStorage" }), " do seu navegador e enviadas ao servidor somente quando voc\u00EA usa o respectivo modelo."] })] }));
}