import { useState, useEffect } from 'react'; import { Button } from '../../../../ui/button'; import { Search, ExternalLink, Check } from 'lucide-react'; import { Input } from '../../../../ui/input'; import { Select } from '../../../../ui/Select'; import { getProviderCatalog, getProviderCatalogTemplate, type ProviderCatalogEntry, type ProviderTemplate, } from '../../../../../api'; import { defineMessages, useIntl } from '../../../../../i18n'; const i18n = defineMessages({ chooseProvider: { id: 'providerCatalogPicker.chooseProvider', defaultMessage: 'Choose Provider', }, selectFormatDescription: { id: 'providerCatalogPicker.selectFormatDescription', defaultMessage: "Select an API format and provider. We'll auto-fill the configuration for you.", }, apiFormat: { id: 'providerCatalogPicker.apiFormat', defaultMessage: 'API Format', }, openaiCompatible: { id: 'providerCatalogPicker.openaiCompatible', defaultMessage: 'OpenAI Compatible', }, anthropicCompatible: { id: 'providerCatalogPicker.anthropicCompatible', defaultMessage: 'Anthropic Compatible', }, searchProviders: { id: 'providerCatalogPicker.searchProviders', defaultMessage: 'Search providers...', }, loadingProviders: { id: 'providerCatalogPicker.loadingProviders', defaultMessage: 'Loading providers...', }, errorPrefix: { id: 'providerCatalogPicker.errorPrefix', defaultMessage: 'Error: {error}', }, noProvidersFound: { id: 'providerCatalogPicker.noProvidersFound', defaultMessage: 'No providers found for "{query}"', }, noProvidersAvailable: { id: 'providerCatalogPicker.noProvidersAvailable', defaultMessage: 'No providers available', }, modelsAvailable: { id: 'providerCatalogPicker.modelsAvailable', defaultMessage: '{count} models available', }, requiresEnvVar: { id: 'providerCatalogPicker.requiresEnvVar', defaultMessage: ' • Requires {envVar}', }, cancel: { id: 'providerCatalogPicker.cancel', defaultMessage: 'Cancel', }, }); interface ProviderCatalogPickerProps { onSelect: (template: ProviderTemplate) => void; onCancel: () => void; embedded?: boolean; } export default function ProviderCatalogPicker({ onSelect, onCancel, embedded, }: ProviderCatalogPickerProps) { const intl = useIntl(); const [selectedFormat, setSelectedFormat] = useState('openai'); const [providers, setProviders] = useState([]); const [filteredProviders, setFilteredProviders] = useState([]); const [searchQuery, setSearchQuery] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const formatOptions = [ { value: 'openai', label: intl.formatMessage(i18n.openaiCompatible) }, { value: 'anthropic', label: intl.formatMessage(i18n.anthropicCompatible) }, ]; // Fetch providers when format changes useEffect(() => { fetchProviders(selectedFormat); }, [selectedFormat]); // Filter providers based on search query useEffect(() => { if (searchQuery.trim() === '') { setFilteredProviders(providers); } else { const query = searchQuery.toLowerCase(); setFilteredProviders( providers.filter( (p) => p.name.toLowerCase().includes(query) || p.id.toLowerCase().includes(query) ) ); } }, [searchQuery, providers]); const fetchProviders = async (format: string) => { setLoading(true); setError(null); try { const { data } = await getProviderCatalog({ query: { format }, throwOnError: true, }); setProviders(data || []); setFilteredProviders(data || []); } catch (err) { setError(err instanceof Error ? err.message : 'Unknown error'); } finally { setLoading(false); } }; const handleProviderSelect = async (providerId: string) => { setLoading(true); setError(null); try { const { data: template } = await getProviderCatalogTemplate({ path: { id: providerId }, throwOnError: true, }); if (template) { onSelect(template); } } catch (err) { setError(err instanceof Error ? err.message : 'Unknown error'); } finally { setLoading(false); } }; return (

{/* Header */}

{intl.formatMessage(i18n.chooseProvider)}

{intl.formatMessage(i18n.selectFormatDescription)}

{/* Format Selection */}

{intl.formatMessage(i18n.apiFormat)} setSearchQuery(e.target.value)} className="pl-10" />

{/* Loading/Error */} {loading &&

{intl.formatMessage(i18n.loadingProviders)}

} {error &&

{intl.formatMessage(i18n.errorPrefix, { error })}

} {/* Provider List */} {!loading && !error && (

{filteredProviders.length === 0 ? (

{searchQuery ? intl.formatMessage(i18n.noProvidersFound, { query: searchQuery }) : intl.formatMessage(i18n.noProvidersAvailable)}

) : ( filteredProviders.map((provider) => ( )) )}

)} {/* Actions */} {!embedded && (

)}

); }