src/components/settings/settings.js

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect } from "react";
import classNames from "classnames";
import { PiGearSixFill } from "react-icons/pi";
// @ts-expect-error not needed
import { PROVIDERS } from "./../../../utils/providers";
function Settings({ open, onClose, provider, error, onChange, }) {
    const [geminiKey, setGeminiKey] = useState(localStorage.getItem("geminiKey") || "");
    const [chatgptKey, setChatgptKey] = useState(localStorage.getItem("chatgptKey") || "");
    useEffect(() => {
        localStorage.setItem("geminiKey", geminiKey);
    }, [geminiKey]);
    useEffect(() => {
        localStorage.setItem("chatgptKey", chatgptKey);
    }, [chatgptKey]);
    return (_jsxs("div", { children: [_jsx("button", { className: "relative overflow-hidden cursor-pointer flex-none flex items-center justify-center rounded-full text-base font-semibold size-8 text-center bg-gray-800 hover:bg-gray-700 text-gray-100 shadow-sm dark:shadow-highlight/20", onClick: () => onClose((prev) => !prev), children: _jsx(PiGearSixFill, {}) }), _jsx("div", { className: classNames("h-screen w-screen bg-black/20 fixed left-0 top-0 z-40", { "opacity-0 pointer-events-none": !open }), onClick: () => onClose(false) }), _jsxs("div", { className: classNames("absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden", { "opacity-0 pointer-events-none": !open }), children: [_jsxs("header", { className: "flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700", children: [_jsx("span", { className: "text-xs bg-blue-500/10 text-blue-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5", children: "Provider" }), "Customize Settings"] }), _jsxs("main", { className: "px-4 pt-3 pb-4 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-gray-800 text-sm font-medium mb-1", children: "Gemini API Key" }), _jsx("input", { type: "password", value: geminiKey, onChange: (e) => setGeminiKey(e.target.value), placeholder: "Insira sua Gemini API Key", className: "w-full rounded border border-gray-200 px-2 py-1 text-sm mb-1" }), _jsx("a", { href: "https://console.cloud.google.com/apis/credentials", target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500", children: "Onde obter" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-gray-800 text-sm font-medium mb-1", children: "ChatGPT API Key" }), _jsx("input", { type: "password", value: chatgptKey, onChange: (e) => setChatgptKey(e.target.value), placeholder: "Insira sua OpenAI API Key", className: "w-full rounded border border-gray-200 px-2 py-1 text-sm mb-1" }), _jsx("a", { href: "https://platform.openai.com/account/api-keys", target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500", children: "Onde obter" })] }), _jsxs("div", { children: [_jsxs("a", { href: "https://huggingface.co/spaces/enzostvs/deepsite/discussions/74", target: "_blank", className: "w-full flex items-center justify-between text-gray-600 bg-gray-50 border border-gray-100 px-2 py-2 rounded-lg mb-3 text-sm font-medium hover:brightness-95", children: ["How to use it locally?", _jsx("button", { className: "bg-black text-white rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer", children: "See the guide" })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-gray-800 text-sm font-medium", children: "Use auto-provider" }), _jsx("div", { className: classNames("bg-gray-200 rounded-full w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200", { "!bg-blue-500": provider === "auto" }), onClick: () => onChange(provider === "auto" ? "fireworks-ai" : "auto"), children: _jsx("div", { className: classNames("w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-white", { "translate-x-4": provider === "auto" }) }) })] }), _jsx("p", { className: "text-xs text-gray-500 mt-2", children: "We'll automatically select the best provider for you based on your prompt." })] }), error && (_jsx("p", { className: "text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md", children: error })), _jsxs("label", { className: "block", children: [_jsx("p", { className: "text-gray-800 text-sm font-medium mb-2", children: "Inference Provider" }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: Object.keys(PROVIDERS).map((id) => (_jsxs("div", { className: classNames("text-gray-600 text-sm font-medium cursor-pointer border p-2 rounded-md flex items-center gap-2", {
                                                "bg-blue-500/10 border-blue-500/15 text-blue-500": id === provider,
                                                "hover:bg-gray-100 border-gray-100": id !== provider,
                                            }), onClick: () => onChange(id), children: [_jsx("img", { src: `/providers/${id}.svg`, alt: PROVIDERS[id].name, className: "size-5" }), PROVIDERS[id].name] }, id))) })] })] })] })] }));
}
export default Settings;