@@ -1404,28 +1492,63 @@ export default function SettingModels() {
}}
/>
{/* Model Type Setting */}
-
{
- const v = e.target.value;
- setForm((f) =>
- f.map((fi, i) => (i === idx ? { ...fi, model_type: v } : fi))
- );
- setErrors((errs) =>
- errs.map((er, i) =>
- i === idx ? { ...er, model_type: '' } : er
- )
- );
- }}
- />
+ {item.modelsEndpoint ? (
+
{
+ setForm((f) =>
+ f.map((fi, i) =>
+ i === idx ? { ...fi, model_type: v } : fi
+ )
+ );
+ setErrors((errs) =>
+ errs.map((er, i) =>
+ i === idx ? { ...er, model_type: '' } : er
+ )
+ );
+ }}
+ groups={cloudModelsState[item.id]?.groups || []}
+ loading={cloudModelsState[item.id]?.loading || false}
+ error={
+ cloudModelsState[item.id]?.error ??
+ errors[idx]?.model_type ??
+ null
+ }
+ disabled={!form[idx].apiKey}
+ disabledReason="Enter API Key first."
+ onRefresh={() => void fetchCloudProviderModels(idx)}
+ triggerPlaceholder={`${t('setting.enter-your-model-type')} ${
+ item.name
+ } ${t('setting.model-type')}`}
+ />
+ ) : (
+ (
+ initialActiveProvider
+ );
+
+ // Keep activeProvider sane if `groups` changes (e.g. after a refresh).
+ useEffect(() => {
+ if (!activeProvider && initialActiveProvider) {
+ setActiveProvider(initialActiveProvider);
+ } else if (
+ activeProvider &&
+ groups.length > 0 &&
+ !groups.some((g) => g.provider === activeProvider)
+ ) {
+ setActiveProvider(initialActiveProvider);
+ }
+ }, [groups, activeProvider, initialActiveProvider]);
+
+ // Saved value not present in any group — surface a one-row "Current" section.
+ const orphanValue = useMemo(() => {
+ if (!value) return null;
+ const known = groups.some((g) => g.models.some((m) => m.id === value));
+ return known ? null : value;
+ }, [value, groups]);
+
+ // Models for the right column: active provider's models filtered by query.
+ const activeModels = useMemo(() => {
+ const group = groups.find((g) => g.provider === activeProvider);
+ if (!group) return [];
+ const q = query.trim().toLowerCase();
+ if (!q) return group.models;
+ return group.models.filter((m) => m.id.toLowerCase().includes(q));
+ }, [groups, activeProvider, query]);
+
+ const hasAnyModels = groups.some((g) => g.models.length > 0);
+
+ return (
+
+ {title ? (
+
+ {title}
+
+ ) : null}
+
+
+
+
+
+
+ {value || triggerPlaceholder || 'Select model'}
+
+
+
+
+
+
+ {loading
+ ? 'Loading...'
+ : disabled
+ ? disabledReason ?? 'Enter API Key first.'
+ : 'Click the refresh button to load models.'}
+
+ ) : (
+
+ {/* Left column: provider list */}
+
+ {orphanValue ? (
+ setActiveProvider('__orphan__')}
+ className={cn(
+ 'flex w-full items-center px-3 py-1.5 text-left text-xs text-text-label transition-colors',
+ activeProvider === '__orphan__'
+ ? 'bg-button-transparent-fill-hover text-text-heading'
+ : 'hover:bg-button-transparent-fill-hover'
+ )}
+ >
+ Current
+
+ ) : null}
+ {groups.map((g) => (
+ setActiveProvider(g.provider)}
+ className={cn(
+ 'flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors',
+ activeProvider === g.provider
+ ? 'bg-button-transparent-fill-hover text-text-heading'
+ : 'text-text-label hover:bg-button-transparent-fill-hover'
+ )}
+ >
+ {g.provider}
+
+ {g.models.length}
+
+
+ ))}
+
+
+ {/* Right column: models for active provider */}
+
+ {activeProvider === '__orphan__' && orphanValue ? (
+ {
+ onChange(orphanValue);
+ setOpen(false);
+ }}
+ >
+ {orphanValue}
+
+ ) : activeModels.length > 0 ? (
+ activeModels.map((m) => {
+ const [, modelName] = splitPrefix(m.id);
+ return (
+ {
+ onChange(m.id);
+ setOpen(false);
+ }}
+ className={cn(
+ value === m.id && 'bg-button-transparent-fill-hover'
+ )}
+ >
+ {modelName}
+
+ );
+ })
+ ) : (
+
+ {query.trim() ? 'No matches.' : 'No models.'}
+
+ )}
+
+
+
+
+
+
+ {loading ? (
+
+
+
+ {error ? (
+
{error}
+ ) : null}
+