import { useT } from "@shared/i18n/context"; import { CopyButton } from "./CopyButton"; import { useCallback, useState, useEffect, useRef } from "preact/hooks"; import type { ModelFamily } from "@shared/hooks/use-status"; interface ApiConfigProps { baseUrl: string; apiKey: string; models: string[]; selectedModel: string; onModelChange: (model: string) => void; modelFamilies: ModelFamily[]; selectedEffort: string; onEffortChange: (effort: string) => void; selectedSpeed: string | null; onSpeedChange: (speed: string | null) => void; } const EFFORT_LABELS: Record = { none: "None", minimal: "Minimal", low: "Low", medium: "Medium", high: "High", xhigh: "XHigh", }; export function ApiConfig({ baseUrl, apiKey, models, selectedModel, onModelChange, modelFamilies, selectedEffort, onEffortChange, selectedSpeed, onSpeedChange, }: ApiConfigProps) { const t = useT(); const getBaseUrl = useCallback(() => baseUrl, [baseUrl]); const getApiKey = useCallback(() => apiKey, [apiKey]); const [open, setOpen] = useState(false); const dropdownRef = useRef(null); // Close dropdown on click outside useEffect(() => { if (!open) return; const handler = (e: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { setOpen(false); } }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); // When a family is selected, update model + snap effort to default if current effort is unsupported const handleFamilySelect = useCallback( (family: ModelFamily) => { onModelChange(family.id); setOpen(false); const supportedEfforts = family.efforts.map((e) => e.reasoningEffort); if (!supportedEfforts.includes(selectedEffort)) { onEffortChange(family.defaultEffort); } }, [onModelChange, onEffortChange, selectedEffort], ); // Find the currently selected family's supported efforts const currentFamily = modelFamilies.find((f) => f.id === selectedModel); const currentEfforts = currentFamily?.efforts ?? []; const showMatrix = modelFamilies.length > 0; return (

{t("apiConfig")}

{/* Base URL */}
{/* Model selector — matrix or flat fallback */}
{showMatrix ? (
{/* Trigger button */} {/* Dropdown list */} {open && (
{modelFamilies.map((f) => ( ))}
)} {/* Reasoning effort buttons — always visible */} {currentEfforts.length > 1 && (
{currentEfforts.map((e) => ( ))}
)} {/* Speed toggle — Standard / Fast */}
{t("speed")}
) : (
)}
{/* API Key */}

{t("apiKeyHint")}

); }