import { useState, useMemo, useCallback } from "react"; import { useNavigate } from "react-router"; import { Button } from "#/components/ui/Button"; import { Input } from "#/components/ui/Input"; import { Nav } from "#/components/ui/Nav"; import { Footer } from "#/components/ui/Footer"; import ApiKeysService, { PROVIDER_METADATA, } from "#/api/api-keys-service/api-keys-service.api"; const PREFIX_MAP: [string, string][] = [ ["sk-ant-", "anthropic"], ["sk-or-", "openrouter"], ["gsk_", "groq"], ["pplx-", "perplexity"], ["AIza", "google"], ["sk-", "openai"], ]; function detectProvider(key: string): string | null { const trimmed = key.trim(); if (!trimmed) return null; for (const [prefix, provider] of PREFIX_MAP) { if (trimmed.startsWith(prefix)) return provider; } return "openai"; } export default function ApiKeySetup() { const navigate = useNavigate(); const [apiKey, setApiKey] = useState(""); const [saved, setSaved] = useState(false); const existingProviders = useMemo(() => ApiKeysService.getAll(), []); const detectedProvider = useMemo(() => { if (!apiKey.trim()) return null; return detectProvider(apiKey); }, [apiKey]); const detectedMeta = detectedProvider ? PROVIDER_METADATA[detectedProvider] : null; const isValid = apiKey.trim().length >= 8; const handleSave = useCallback(() => { const provider = detectedProvider || "openai"; ApiKeysService.save({ provider, model: PROVIDER_METADATA[provider]?.models?.[0] || "gpt-4o", apiKey: apiKey.trim(), }); setSaved(true); setTimeout(() => { navigate("/conversations/new", { replace: true }); }, 1200); }, [apiKey, detectedProvider, navigate]); if (saved) { return (
); } return (
); }