import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { useTranslation } from "react-i18next"; import { Button } from "@/shared/ui/button"; import { Skeleton } from "@/shared/ui/skeleton"; import { Spinner } from "@/shared/ui/spinner"; import { getProviderIcon, formatProviderLabel, } from "@/shared/ui/icons/ProviderIcons"; import { IconCheck } from "@tabler/icons-react"; import { authenticateModelProvider, onModelSetupOutput, } from "@/features/providers/api/modelSetup"; import type { ProviderDisplayInfo, ProviderField, ProviderFieldValue, } from "@/shared/types/providers"; import { MAX_SETUP_OUTPUT_LINES, type SetupOutputLine, resolveFieldValue, createDraftValues, getSetupMessage, getNativeConnectDescription, getFieldSetupDescription, renderSetupMessage, } from "./modelProviderHelpers"; import { ConnectedFieldsPanel, InventorySyncMessage, SetupFieldsPanel, } from "./ModelProviderPanels"; interface ProviderFieldSaveInput { key: string; value: string; isSecret: boolean; } interface ModelProviderRowProps { provider: ProviderDisplayInfo; onGetConfig: (providerId: string) => Promise; onSaveFields: (fields: ProviderFieldSaveInput[]) => Promise; onRemoveConfig?: () => Promise; onCompleteNativeSetup: (providerId: string) => Promise; saving?: boolean; inventorySyncing?: boolean; inventoryWarning?: string | null; } export function ModelProviderRow({ provider, onGetConfig, onSaveFields, onRemoveConfig, onCompleteNativeSetup, saving = false, inventorySyncing = false, inventoryWarning = null, }: ModelProviderRowProps) { const { t } = useTranslation("settings"); const [expanded, setExpanded] = useState(false); const [configValues, setConfigValues] = useState([]); const [draftValues, setDraftValues] = useState>({}); const [editingKey, setEditingKey] = useState(null); const [loadingConfig, setLoadingConfig] = useState(false); const [error, setError] = useState(""); const [authenticating, setAuthenticating] = useState(false); const [setupOutput, setSetupOutput] = useState([]); const [setupError, setSetupError] = useState(""); const [showSavedState, setShowSavedState] = useState(false); const setupLineCounter = useRef(0); const hasLoadedConfig = useRef(false); const shouldRestorePanelFocus = useRef(false); const panelRef = useRef(null); const icon = getProviderIcon(provider.id, "size-4"); const fields = provider.fields ?? []; const hasFields = fields.length > 0; const supportsNativeConnect = !!provider.nativeConnectQuery; const isConnected = provider.status === "connected" || provider.status === "built_in"; const fieldValueMap = useMemo( () => new Map(configValues.map((value) => [value.key, value])), [configValues], ); const loadConfig = useCallback( async ({ showSkeleton = false }: { showSkeleton?: boolean } = {}) => { if (!hasFields) return; if (showSkeleton) { setLoadingConfig(true); } try { const nextValues = await onGetConfig(provider.id); hasLoadedConfig.current = true; setConfigValues(nextValues); setDraftValues(createDraftValues(fields, nextValues)); setError(""); } catch (nextError) { setError( nextError instanceof Error ? nextError.message : "Failed to load provider settings", ); } finally { if (showSkeleton) { setLoadingConfig(false); } } }, [fields, hasFields, onGetConfig, provider.id], ); useEffect(() => { if (expanded && hasFields) { void loadConfig({ showSkeleton: !hasLoadedConfig.current }); } }, [expanded, hasFields, loadConfig]); useEffect(() => { if (isConnected) { setAuthenticating(false); setSetupError(""); } }, [isConnected]); useLayoutEffect(() => { if (!shouldRestorePanelFocus.current) { return; } shouldRestorePanelFocus.current = false; panelRef.current?.focus({ preventScroll: true }); }); function appendSetupOutput(line: string) { setupLineCounter.current += 1; setSetupOutput((current) => [ ...current, { id: setupLineCounter.current, text: line, }, ].slice(-MAX_SETUP_OUTPUT_LINES), ); } async function runNativeConnect() { if (!provider.nativeConnectQuery) { return; } setExpanded(true); setAuthenticating(true); setSetupError(""); setSetupOutput([]); setupLineCounter.current = 0; setEditingKey(null); setError(""); setShowSavedState(false); const unlisten = await onModelSetupOutput(provider.id, appendSetupOutput); try { // The native connector exits after writing credentials; only then do we // ask the credentials hook to refresh ACP inventory for this provider. await authenticateModelProvider(provider.id, provider.nativeConnectQuery); await onCompleteNativeSetup(provider.id); } catch (nextError) { setSetupError( nextError instanceof Error ? nextError.message : "Failed to complete sign-in", ); } finally { unlisten(); setAuthenticating(false); } } function handleToggle() { setExpanded((current) => { if (current) { setShowSavedState(false); } return !current; }); setEditingKey(null); setError(""); setSetupError(""); } function handleStartEdit(key: string) { setEditingKey(key); setError(""); setShowSavedState(false); } function handleCancelEdit(field: ProviderField) { setDraftValues((current) => ({ ...current, [field.key]: field.secret ? "" : (resolveFieldValue(field, fieldValueMap).value ?? ""), })); setEditingKey(null); setError(""); } function handleDraftChange(key: string, value: string) { setShowSavedState(false); setDraftValues((current) => ({ ...current, [key]: value })); } async function handleSaveField(field: ProviderField) { const nextValue = draftValues[field.key]?.trim() ?? ""; if (!nextValue) { setError(`Enter a value for ${field.label}`); return; } setError(""); try { shouldRestorePanelFocus.current = true; await onSaveFields([ { key: field.key, value: nextValue, isSecret: field.secret }, ]); await loadConfig(); setEditingKey(null); setShowSavedState(true); } catch (nextError) { setError( nextError instanceof Error ? nextError.message : "Failed to save", ); } } async function handleSaveSetup() { const missingLabels = fields .filter((field) => { if (!field.required) { return false; } const currentValue = resolveFieldValue(field, fieldValueMap); const nextValue = draftValues[field.key]?.trim() ?? ""; return !currentValue.isSet && !nextValue; }) .map((field) => field.label); if (missingLabels.length > 0) { setError(`Fill in ${missingLabels.join(", ")}`); return; } const fieldsToSave = fields.filter((field) => { const currentValue = resolveFieldValue(field, fieldValueMap); const nextValue = draftValues[field.key]?.trim() ?? ""; if (!nextValue) { return false; } if (field.secret) { return true; } return nextValue !== (currentValue.value ?? ""); }); if (fieldsToSave.length === 0) { setError(""); return; } setError(""); try { await onSaveFields( fieldsToSave.map((field) => ({ key: field.key, value: draftValues[field.key]?.trim() ?? "", isSecret: field.secret, })), ); await loadConfig(); setShowSavedState(false); } catch (nextError) { setError( nextError instanceof Error ? nextError.message : "Failed to save", ); } } async function handleRemove() { try { shouldRestorePanelFocus.current = true; await onRemoveConfig?.(); await loadConfig(); setEditingKey(null); setError(""); setShowSavedState(false); } catch (nextError) { setError( nextError instanceof Error ? nextError.message : "Failed to remove", ); } } function renderExpandedContent() { if (!expanded) return null; const setupMessage = getSetupMessage( provider.setupMethod, isConnected, supportsNativeConnect, t, ); const nativeConnectDescription = getNativeConnectDescription( provider.setupMethod, t, ); const fieldSetupDescription = getFieldSetupDescription( provider.setupMethod, t, provider.fields, ); if (loadingConfig && hasFields) { return (

); } if (supportsNativeConnect && !hasFields) { return (

{!isConnected && nativeConnectDescription ? (

{nativeConnectDescription}

) : ( renderSetupMessage(setupMessage) )} {authenticating ? (

{t("providers.waitingForSignIn")}

) : null} {setupOutput.length > 0 ? (

{setupOutput.map((line) => (

{line.text}

))}

) : null} {setupError ? (

{setupError}

) : null}

); } if (hasFields && isConnected) { return ( void handleSaveField(field)} onRemove={() => void handleRemove()} /> ); } if (hasFields) { return ( void handleSaveSetup()} /> ); } return (

{renderSetupMessage(setupMessage)}

); } return (

{renderExpandedContent()}

); }