import { useEffect, useState, useCallback, useRef, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { ScrollArea } from '../../ui/scroll-area'; import BackButton from '../../ui/BackButton'; import ProviderGrid from './ProviderGrid'; import { useConfig } from '../../ConfigContext'; import { ProviderDetails } from '../../../api'; import { createNavigationHandler } from '../../../utils/navigationUtils'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ otherProviders: { id: 'providerSettings.otherProviders', defaultMessage: 'Other providers', }, configurationSettings: { id: 'providerSettings.configurationSettings', defaultMessage: 'Provider Configuration Settings', }, onboardingDescription: { id: 'providerSettings.onboardingDescription', defaultMessage: "Select an AI model provider to get started with goose. You'll need to use API keys generated by each provider which will be encrypted and stored locally. You can change your provider at any time in settings.", }, loadingProviders: { id: 'providerSettings.loadingProviders', defaultMessage: 'Loading providers...', }, }); interface ProviderSettingsProps { onClose: () => void; isOnboarding: boolean; onProviderLaunched?: (model?: string) => void; } export default function ProviderSettings({ onClose, isOnboarding, onProviderLaunched, }: ProviderSettingsProps) { const intl = useIntl(); const { getProviders } = useConfig(); const navigate = useNavigate(); const [loading, setLoading] = useState(true); const [providers, setProviders] = useState([]); const initialLoadDone = useRef(false); const setView = useMemo(() => createNavigationHandler(navigate), [navigate]); // Create a function to load providers that can be called multiple times const loadProviders = useCallback(async () => { setLoading(true); try { // Only force refresh when explicitly requested, not on initial load const result = await getProviders(!initialLoadDone.current); if (result) { setProviders(result); initialLoadDone.current = true; } } catch (error) { console.error('Failed to load providers:', error); } finally { setLoading(false); } }, [getProviders]); // Load providers only once when component mounts useEffect(() => { loadProviders(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Intentionally not including loadProviders in deps to prevent reloading // This function will be passed to ProviderGrid for manual refreshes after config changes const refreshProviders = useCallback(async () => { if (initialLoadDone.current) { const result = await getProviders(true); if (result) setProviders(result); } }, [getProviders]); return (

{/* Consistent header pattern with back button */}

{isOnboarding ? intl.formatMessage(i18n.otherProviders) : intl.formatMessage(i18n.configurationSettings)}

{isOnboarding && (

{intl.formatMessage(i18n.onboardingDescription)}

)}

{/* Content Area */}

{loading ? (

{intl.formatMessage(i18n.loadingProviders)}

) : ( )}

); }