Function ModelConfigStep

ui/src/components/onboarding/steps/ModelConfigStep.tsx:64–540

({
    existingModels,
    loadingExistingModels,
    errorExistingModels,
    onNext,
}: ModelConfigStepProps)

}

export function ModelConfigStep({
    existingModels,
    loadingExistingModels,
    errorExistingModels,
    onNext,
}: ModelConfigStepProps) {
    const [isLoading, setIsLoading] = useState(false);
    const [configMode, setConfigMode] = useState<'create' | 'select'>('create');
    const [providerModelsData, setProviderModelsData] = useState<ProviderModelsResponse | null>(null);
    const [providerModelsLoading, setProviderModelsLoading] = useState<boolean>(true);
    const [providerModelsError, setProviderModelsError] = useState<string | null>(null);
    const [supportedProviders, setSupportedProviders] = useState<Provider[]>([]);
    const [providersLoading, setProvidersLoading] = useState<boolean>(true);
    const [providersError, setProvidersError] = useState<string | null>(null);
    const [isOllama, setIsOllama] = useState(false);
    const [lastAutoGenName, setLastAutoGenName] = useState<string>("");

    useEffect(() => {
        if (!loadingExistingModels && existingModels && existingModels.length > 0) {
            setConfigMode('select');
        } else if (!loadingExistingModels) {
            setConfigMode('create');
        }
    }, [loadingExistingModels, existingModels]);

    useEffect(() => {
        const fetchProviderModels = async () => {
            setProviderModelsLoading(true);
            setProviderModelsError(null);
            try {
                const result = await getModels();
                if (!result.error && result.data) {
                    setProviderModelsData(result.data);
                } else {
                    throw new Error(result.error || 'Failed to fetch available models.');
                }
            } catch (error) {
                setProviderModelsError(error instanceof Error ? error.message : String(error));
                setProviderModelsData(null);
            } finally {
                setProviderModelsLoading(false);
            }
        };
        fetchProviderModels();
    }, []);

    useEffect(() => {
        const fetchProviders = async () => {
            setProvidersLoading(true);
            setProvidersError(null);
            try {
                const result = await getSupportedModelProviders();
                if (!result.error && result.data) {
                    setSupportedProviders(result.data);
                } else {
                    throw new Error(result.error || 'Failed to fetch supported providers.');
                }
            } catch (error) {