Function ModelProviderCombobox

ui/src/components/ModelProviderCombobox.tsx:44–206

({
    providers,
    models,
    value,
    onChange,
    disabled = false,
    loading = false,
    error = null,
    filterFunctionCalling = false,
    placeholder = "Select model...",
    loadingPlaceholder = "Loading models...",
    errorPlaceholder = "Error loading models",
    emptyPlaceholder = "No models available"
}: ModelProviderComboboxProps)

}

export function ModelProviderCombobox({
    providers,
    models,
    value,
    onChange,
    disabled = false,
    loading = false,
    error = null,
    filterFunctionCalling = false,
    placeholder = "Select model...",
    loadingPlaceholder = "Loading models...",
    errorPlaceholder = "Error loading models",
    emptyPlaceholder = "No models available"
}: ModelProviderComboboxProps) {
    const [comboboxOpen, setComboboxOpen] = useState(false);

    const getProviderIcon = useCallback((providerKey: ModelProviderKey | undefined): React.ReactNode | null => {
        const PROVIDER_ICONS: Record<ModelProviderKey, React.ComponentType<{ className?: string }>> = {
            'OpenAI': OpenAI,
            'Anthropic': Anthropic,
            'Ollama': Ollama,
            'AzureOpenAI': Azure,
            'Gemini': Gemini,
            'GeminiVertexAI': Gemini,
            'AnthropicVertexAI': Anthropic,
            'Bedrock': Bedrock,
            'SAPAICore': SAPAICore,
        };
        if (!providerKey || !PROVIDER_ICONS[providerKey]) {
            return null;
        }
        const IconComponent = PROVIDER_ICONS[providerKey];
        return <IconComponent className="h-4 w-4 mr-2 shrink-0" />;
    }, []);

    const groupedProviderModelOptions = useMemo(() => {
        if (!providers || !models || providers.length === 0 || Object.keys(models).length === 0) {
            return {};
        }

        const groups: { [groupName: string]: ComboboxOption[] } = {};
        providers.forEach(provider => {
            let providerFormKey: ModelProviderKey;
            if (isValidProviderInfoKey(provider.name)) {
                providerFormKey = provider.name;
            } else {
                console.warn(`Unsupported provider name found: ${provider.name}`);
                return;
            }

            if (!isValidProviderInfoKey(providerFormKey)) return;

            let providerModels: ProviderModel[] = [];

            if (models[providerFormKey]) {
                providerModels = models[providerFormKey]
                    .filter(m => filterFunctionCalling ? m.function_calling === true : true);
            }