d2c0b69243
* feat: improve model configuration workflows
Add model catalog browsing, provider registry with form validation,
model fetch/test dialogs, and enhanced model management UI.
- Add model catalog API and catalog-dialog component for browsing saved models
- Add provider-registry with auto-populated form fields per provider
- Add provider-combobox, fetch-models-dialog, test-model-dialog components
- Add model-validation for provider-aware model ID validation
- Add command and popover UI components
- Enhance edit-model-sheet with tool schema transform support
- Add anthropic to protocolMetaByName for correct default API base
- Apply NormalizeBaseURL to anthropic provider for consistent URL handling
- Add i18n keys for new model management features (en/zh)
* fix(web): prevent auto-fetch when API key is missing in fetch models dialog
When a provider requires an API key but none is set, the dialog now shows
the warning without triggering a doomed fetch attempt. Fetch is deferred
until the user provides a key.
* fix(web): add credential warning for catalog imports from remote providers
When importing models from a catalog entry whose provider requires an API
key, a yellow warning banner now informs users that credentials will need
to be configured after import.
* feat(web,api): test connection with real connectivity verification and unsaved form values
Add POST /api/models/test-inline endpoint that performs actual network
probes (GET /models) instead of just checking config. Frontend Test
Connection now uses current form values (not saved state) and is
available in both Add and Edit model flows.
* style(web): apply linter formatting across model config components
Normalize quote style, import ordering, and class name ordering as
reported by the project linter.
* fix(web,api): fix edit test connection false negative and gate fetch for unsupported providers
- handleTestInlineModel now accepts optional model_index to fall back to stored credentials when api_key is empty, fixing false negatives when testing edited models
- Add supportsFetch to provider registry and FETCHABLE_PROVIDER_KEYS derived set
- Gate Fetch Models button to only show for OpenAI-compatible and Ollama providers
- Add backend guard in handleFetchModels to reject unsupported providers with clear error
* fix: address review feedback on model config workflow
- Send explicit {} for empty extra_body/custom_headers fields so the
backend clears stored values instead of preserving them
- Merge backend provider_options with frontend PROVIDERS registry so
the provider picker reflects backend-supported providers and policy
fields (create_allowed, default_auth_method, auth_method_locked)
- Render provider combobox popover inside the sheet scroll container
to fix wheel events scrolling the sheet instead of the provider list
* feat(web,api): add provider selection, model form foundation, and validation
Split from PR #2752 (part 1 of 3).
Backend:
- CRUD model endpoints (list/add/update/delete/set-default)
- Provider metadata with default API bases and model provider options
- Model ID validation and normalization
- Anthropic default API base normalization
Frontend:
- Provider registry with metadata, labels, icons, and aliases
- Provider combobox with backend option merging
- Model field validation with provider-aware checks
- Redesigned add/edit model sheets with provider selection
- Dynamic imports for fetch/catalog/test dialogs (coming in PR2/PR3)
- i18n support for model configuration UI
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useMemo, useState } from "react"
|
|
|
|
import { PROVIDER_DOMAINS, PROVIDER_ICON_SLUGS } from "./provider-registry"
|
|
|
|
interface ProviderIconProps {
|
|
providerKey: string
|
|
providerLabel: string
|
|
}
|
|
|
|
export function ProviderIcon({
|
|
providerKey,
|
|
providerLabel,
|
|
}: ProviderIconProps) {
|
|
const [sourceIndex, setSourceIndex] = useState(0)
|
|
const [loadFailed, setLoadFailed] = useState(false)
|
|
const initial = providerLabel.trim().charAt(0).toUpperCase() || "?"
|
|
const iconUrls = useMemo(() => {
|
|
const slug = PROVIDER_ICON_SLUGS[providerKey]
|
|
const domain = PROVIDER_DOMAINS[providerKey]
|
|
const urls: string[] = []
|
|
if (slug) {
|
|
urls.push(`https://cdn.simpleicons.org/${slug}`)
|
|
}
|
|
if (domain) {
|
|
urls.push(`https://www.google.com/s2/favicons?domain=${domain}&sz=64`)
|
|
}
|
|
return urls
|
|
}, [providerKey])
|
|
|
|
const iconUrl = iconUrls[sourceIndex]
|
|
|
|
if (!iconUrl || loadFailed) {
|
|
return (
|
|
<span className="inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-black/10 bg-white text-[9px] font-semibold text-black/70 dark:border-white/20 dark:text-white/70">
|
|
{initial}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span className="inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-black/10 bg-white p-0.5 dark:border-white/20">
|
|
<img
|
|
src={iconUrl}
|
|
alt={`${providerLabel} logo`}
|
|
className="size-full object-contain"
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer"
|
|
onError={() => {
|
|
if (sourceIndex < iconUrls.length - 1) {
|
|
setSourceIndex((idx) => idx + 1)
|
|
return
|
|
}
|
|
setLoadFailed(true)
|
|
}}
|
|
/>
|
|
</span>
|
|
)
|
|
}
|