i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-12 20:49:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(providers): one record per provider, one place for the key-and-URL decision (#988)

Browse Source 
Every fact about a provider lives in one record in lib/providers.ts (SDK kind,
credential kind, env var prefix, default URL, picker group, four-language
notes, and a short model list for the six providers that cannot list models).
The thirteen tables keyed by provider name are gone. resolveEndpoint decides
whose key a call uses and where it goes; usesServerCredentials reads its
answer instead of mirroring getAIModel's branches; serverCredentialError holds
the server credential check once. The UI, the connection test and the routes
read the record's credential and sdk fields instead of comparing provider
names (44 such checks before, 6 after, in the admin panel's fixed-variable
branches).

Intended behavior changes: providers that can list their models have no
hand-written list; the settings dialog fetches the live list in the background
once credentials are entered for a provider without models and offers it
behind "Browse models". Azure has no placeholder default URL (old entries that
hold it still count as unset); the base URL field of Azure and of the new
"custom" OpenAI-compatible preset (CUSTOM_API_KEY, CUSTOM_BASE_URL) is
labelled required. The connection test answers 400 for an unknown provider
name; prototype names are refused everywhere. Provider lists in error messages
and the admin "add provider" dropdown follow the picker's order.

Also fixed, from before the refactor: the redirect guard drops x-access-code
on cross-origin redirects, and edgeOneEndpoint accepts the Origin header only
when it matches Host or X-Forwarded-Host.

Verification: a behavior snapshot of getAIModel's SDK factory calls and the
quota functions over 25 providers, 22 client override shapes and 9 server
environments (5843 rows), recorded on the old code and unchanged apart from
the intended changes; 752 unit tests, 65 provider e2e tests, tsc, biome,
next build. Reviewed by five models from one brief; their findings and the
resulting fixes are recorded in docs/plans/2026-10-provider-refactor.md.
This commit is contained in:
Dayuan Jiang
2026-10-12 21:31:03 +09:00
committed by GitHub
parent 5b27d30194
commit 458d8050cc
40 changed files with 9272 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/model-config-dialog.tsx
+90 -27
View File
@@ -55,13 +55,13 @@ import { getApiEndpoint } from "@/lib/base-path"
import { formatMessage } from "@/lib/i18n/utils"
import type { ListedModel } from "@/lib/provider-models"
import { hasCredentials } from "@/lib/provider-setup"
import { PROVIDERS, publicDefaultUrl } from "@/lib/providers"
import { STORAGE_KEYS } from "@/lib/storage"
import type {
ModelConfig,
ProviderConfig,
ProviderName,
} from "@/lib/types/model-config"
import { PROVIDER_INFO, SUGGESTED_MODELS } from "@/lib/types/model-config"
import { cn } from "@/lib/utils"
import { useUiStore } from "@/stores/ui-store"
@@ -300,19 +300,36 @@ export function ModelConfigDialog({
const errorHints = (p: ProviderConfig): Record<string, string> => ({
...(dict.errors.llm as Record<string, string>),
invalid_api_key:
p.provider === "bedrock" && !p.apiKey
PROVIDERS[p.provider].credential === "aws" && !p.apiKey
? t.awsKeysRejected
: t.keyRejected,
model_not_found: t.modelNotFound,
})
const handleFetchModels = async () => {
// Requests in flight, by provider id: a second request for the same
// provider (the button clicked while the automatic fetch runs, or the
// reverse) is not sent
const inFlight = useRef(new Set<string>())
// The credentials each provider's automatic fetch ran with, or was
// overtaken by a click with: one automatic fetch per set of credentials
const autoFetched = useRef<Record<string, string>>({})
/**
* Fetch the shown provider's model list. A click opens the picker with
* the result and shows what went wrong; the automatic fetch after
* credentials were entered (auto) only fills the list, so it never
* takes the focus or flashes an error while the user is still typing.
*/
const handleFetchModels = async (auto = false) => {
if (!selectedProvider) return
const providerId = selectedProvider.id
if (inFlight.current.has(providerId)) return
const askedWith = credentialsOf(providerId)
autoFetched.current[providerId] = askedWith
const hints = errorHints(selectedProvider)
inFlight.current.add(providerId)
setFetchingFor((current) => [...current, providerId])
setFetchModelsError("")
if (!auto) setFetchModelsError("")
try {
const response = await fetch(
getApiEndpoint("/api/provider-models"),
@@ -339,11 +356,11 @@ export function ModelConfigDialog({
...current,
[providerId]: { askedWith, models: data.models },
}))
if (!stillShown) return
if (!stillShown || auto) return
if (data.models.length > 0) setModelPickerOpen(true)
else setFetchModelsError(t.noModelsReturned)
} else {
if (!stillShown) return
if (!stillShown || auto) return
setFetchModelsError(
[hints[data.code], data.error].filter(Boolean).join(" ") ||
formatMessage(t.requestFailed, {
@@ -353,12 +370,14 @@ export function ModelConfigDialog({
}
} catch {
if (
!auto &&
selectedProviderIdRef.current === providerId &&
credentialsOf(providerId) === askedWith
) {
setFetchModelsError(dict.errors.networkError)
}
} finally {
inFlight.current.delete(providerId)
setFetchingFor((current) =>
current.filter((id) => id !== providerId),
)
@@ -366,16 +385,18 @@ export function ModelConfigDialog({
}
// The provider's own list, if fetched with the credentials it has now,
// else the suggested models
// else the record's short list (only providers that cannot list models
// have one)
const fetched = selectedProvider
? fetchedModels[selectedProvider.id]
: undefined
const recordModels = selectedProvider
? (PROVIDERS[selectedProvider.provider].models ?? [])
: []
const suggestedModels: ListedModel[] = selectedProvider
? fetched && fetched.askedWith === credentialsOf(selectedProvider.id)
? fetched.models
: (SUGGESTED_MODELS[selectedProvider.provider] || []).map((id) => ({
id,
}))
: recordModels.map((id) => ({ id }))
: []
// The picker closes when there is nothing left to pick from, so it does
// not open by itself once there is again
@@ -398,20 +419,60 @@ export function ModelConfigDialog({
const availableSuggestions = suggestedModels.filter(
(model) => !existingModelIds.includes(model.id),
)
// A few suggested models to add with one click
const quickSuggestions = selectedProvider
? (SUGGESTED_MODELS[selectedProvider.provider] || [])
.filter((modelId) => !existingModelIds.includes(modelId))
.slice(0, 4)
: []
// A few of the record's models to add with one click
const quickSuggestions = recordModels
.filter((modelId) => !existingModelIds.includes(modelId))
.slice(0, 4)
// A provider that can list its models gets its list fetched by itself,
// once, for credentials entered on its page while it has no model yet,
// so "Browse models" offers the provider's own list instead of a
// hand-written one. Credentials a provider already had when its page
// opened fetch nothing (the button does), nor does a provider with
// models, nor a local example URL still in the field (SGLang's).
const shownWith = useRef<{ id: string; credentials: string } | null>(null)
useEffect(() => {
if (!open || !selectedProvider) {
// The baseline belongs to one visit of one provider's page
shownWith.current = null
return
}
const id = selectedProvider.id
const now = credentialsOf(id)
if (shownWith.current?.id !== id) {
shownWith.current = { id, credentials: now }
}
const def = PROVIDERS[selectedProvider.provider]
const localExample =
!!selectedProvider.baseUrl &&
selectedProvider.baseUrl === def.defaultBaseUrl &&
!publicDefaultUrl(selectedProvider.provider)
if (
!def.modelList ||
selectedProvider.models.length > 0 ||
!hasCredentials(selectedProvider) ||
localExample ||
now === shownWith.current.credentials ||
autoFetched.current[id] === now
) {
return
}
// Once the typing or pasting pauses
const timer = setTimeout(() => {
if (autoFetched.current[id] === now) return
void handleFetchModels(true)
}, 600)
return () => clearTimeout(timer)
}, [open, selectedProvider])
const openProvider = (providerId: string) => setModelsPage({ providerId })
// Handle adding a new provider
const handleAddProvider = (providerType: ProviderName) => {
const newProvider = addProvider(providerType)
// With the first suggested model picked, a key is all a test needs
const firstModel = SUGGESTED_MODELS[providerType]?.[0]
// A provider that cannot list its models starts with the first of
// the record's; the others fetch their list once the key is in
const firstModel = PROVIDERS[providerType].models?.[0]
if (firstModel) addModel(newProvider.id, firstModel)
openProvider(newProvider.id)
}
@@ -530,9 +591,9 @@ export function ModelConfigDialog({
const run = (latestTestRun.get(selectedProviderId) ?? 0) + 1
latestTestRun.set(selectedProviderId, run)
// For EdgeOne, construct baseUrl from current origin
// The site's own function (EdgeOne): its URL is this origin's
const baseUrl =
selectedProvider.provider === "edgeone"
PROVIDERS[selectedProvider.provider].credential === "none"
? `${window.location.origin}/api/edgeai`
: selectedProvider.baseUrl
const hints = errorHints(selectedProvider)
@@ -741,7 +802,7 @@ export function ModelConfigDialog({
}
const providerName = (p: ProviderConfig) =>
p.name || PROVIDER_INFO[p.provider].label
p.name || PROVIDERS[p.provider].label
const renderModelRow = (model: ModelConfig) => {
if (!selectedProvider) return null
@@ -922,11 +983,13 @@ export function ModelConfigDialog({
: undefined
const canTest = credentialsDone && models.length > 0
const testing = validationStatus === "validating"
const def = PROVIDERS[provider.provider]
// A key-only provider without a default URL (Azure) needs its URL too
const testBlocker = !credentialsDone
? provider.provider === "bedrock"
? def.credential === "aws"
? t.needAws
: provider.provider === "azure"
? t.needAzure
: def.credential === "apiKey" && !def.defaultBaseUrl
? t.needUrl
: t.needKey
: models.length === 0
? t.needModel
@@ -984,7 +1047,7 @@ export function ModelConfigDialog({
done={credentialsDone && !keyRejected}
title={t.stepConnect}
>
{provider.provider === "edgeone" ? (
{def.credential === "none" ? (
<p className="text-xs text-muted-foreground">
{t.edgeoneNoKey}
</p>
@@ -1027,10 +1090,10 @@ export function ModelConfigDialog({
done={models.length > 0}
title={t.stepModels}
action={
PROVIDER_INFO[provider.provider].modelList && (
def.modelList && (
<button
type="button"
onClick={handleFetchModels}
onClick={() => handleFetchModels()}
disabled={fetchingFor.includes(
provider.id,
)}
components/provider-credentials-fields.tsx
+26 -29
View File
@@ -2,6 +2,7 @@
import { ChevronRight, Key, Link2, Tag } from "lucide-react"
import { type ReactNode, useState } from "react"
import { useLocale } from "@/components/canvas/locale-context"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
@@ -13,13 +14,8 @@ import {
} from "@/components/ui/select"
import { useDictionary } from "@/hooks/use-dictionary"
import { formatMessage } from "@/lib/i18n/utils"
import { OPTIONS_OPEN } from "@/lib/provider-setup"
import {
chatRequestUrl,
normalizeBaseUrl,
PROVIDER_INFO,
type ProviderName,
} from "@/lib/types/model-config"
import { PROVIDERS, type ProviderName } from "@/lib/providers"
import { chatRequestUrl, normalizeBaseUrl } from "@/lib/types/model-config"
import { cn } from "@/lib/utils"
// Logical secret field. The caller owns the actual input — plaintext for the
@@ -94,10 +90,15 @@ export function ProviderCredentialsFields({
sessionTokenInput,
}: ProviderCredentialsFieldsProps) {
const dict = useDictionary()
const info = PROVIDER_INFO[provider]
const baseUrlLabel = formatMessage(dict.modelConfig.baseUrlWithExample, {
example: info.defaultBaseUrl || "https://api.example.com/v1",
})
const locale = useLocale()
const info = PROVIDERS[provider]
// A key-only provider without a default URL (Azure, custom) needs one
const baseUrlLabel =
info.credential === "apiKey" && !info.defaultBaseUrl
? dict.modelConfig.baseUrlRequired
: formatMessage(dict.modelConfig.baseUrlWithExample, {
example: info.defaultBaseUrl || "https://api.example.com/v1",
})
const requestUrl = baseUrl ? chatRequestUrl(provider, baseUrl) : null
// Open when it holds something the user set, or for a provider whose
// base URL usually needs changing or comes with a hint
@@ -105,7 +106,7 @@ export function ProviderCredentialsFields({
() =>
!!name ||
(!!baseUrl && baseUrl !== info.defaultBaseUrl) ||
OPTIONS_OPEN.includes(provider),
!!info.optionsOpen,
)
// Bedrock: the way that is filled in (an API key is used first when both
// are, as the server does), else the one shown last, so emptying the
@@ -199,7 +200,8 @@ export function ProviderCredentialsFields({
>
<Key className="h-3.5 w-3.5 text-muted-foreground" />
{dict.modelConfig.apiKey}
{provider === "ollama" && ` ${dict.modelConfig.optional}`}
{info.credential === "optionalKey" &&
` ${dict.modelConfig.optional}`}
</Label>
{info.apiKeyUrl && (
<a
@@ -248,26 +250,21 @@ export function ProviderCredentialsFields({
})}
</p>
)}
{provider === "minimax" && (
{info.baseUrlHint && (
<p className="text-xs text-muted-foreground">
{dict.modelConfig.minimaxBaseUrlHint}
</p>
)}
{provider === "mimo" && (
<p className="text-xs text-muted-foreground">
{dict.modelConfig.mimoBaseUrlHint}
{info.baseUrlHint[locale]}
</p>
)}
</div>
)
// EdgeOne needs no credentials
if (provider === "edgeone") return null
// A provider without credentials (EdgeOne) has no fields
if (info.credential === "none") return null
if (settingsLayout) {
return (
<div className="space-y-4">
{provider === "bedrock" ? (
{info.credential === "aws" ? (
<>
{/* Buttons, not radios: arrow keys would empty
secrets without a deliberate press */}
@@ -393,7 +390,7 @@ export function ProviderCredentialsFields({
)}
{regionField}
</>
) : provider === "vertexai" ? (
) : info.credential === "vertexKey" ? (
<div className="space-y-2">
<Label
htmlFor="vertex-api-key"
@@ -423,14 +420,14 @@ export function ProviderCredentialsFields({
optionsOpen && "rotate-90",
)}
/>
{provider === "bedrock"
{info.credential === "aws"
? dict.modelConfig.moreOptionsName
: dict.modelConfig.moreOptions}
</button>
{optionsOpen && (
<>
{provider !== "bedrock" &&
(provider === "vertexai"
{info.credential !== "aws" &&
(info.credential === "vertexKey"
? vertexBaseUrlField
: baseUrlField)}
{nameField}
@@ -445,7 +442,7 @@ export function ProviderCredentialsFields({
<div className="space-y-5">
{nameField}
{provider === "bedrock" ? (
{info.credential === "aws" ? (
<>
{/* AWS Access Key ID */}
<div className="space-y-2">
@@ -479,7 +476,7 @@ export function ProviderCredentialsFields({
{regionField}
</>
) : provider === "vertexai" ? (
) : info.credential === "vertexKey" ? (
<>
{/* Vertex AI API Key (Express Mode) */}
<div className="space-y-2">
components/provider-logo.tsx
+9 -13
View File
@@ -1,8 +1,10 @@
import { Cloud, Server, Sparkles } from "lucide-react"
import { PROVIDER_LOGO_MAP, type ProviderName } from "@/lib/types/model-config"
import { PROVIDERS, type ProviderName } from "@/lib/providers"
import { cn } from "@/lib/utils"
// Provider logo from models.dev, with Lucide fallbacks for providers
const ICONS = { cloud: Cloud, server: Server, sparkles: Sparkles }
// Provider logo from models.dev, or the record's Lucide icon for providers
// that have no logo there
export function ProviderLogo({
provider,
@@ -11,17 +13,11 @@ export function ProviderLogo({
provider: ProviderName
className?: string
}) {
if (provider === "bedrock") {
return <Cloud className={cn("size-4", className)} />
const { icon, logo } = PROVIDERS[provider]
if (icon) {
const Icon = ICONS[icon]
return <Icon className={cn("size-4", className)} />
}
if (provider === "sglang") {
return <Server className={cn("size-4", className)} />
}
if (provider === "doubao") {
return <Sparkles className={cn("size-4", className)} />
}
const logoName = PROVIDER_LOGO_MAP[provider] || provider
return (
// biome-ignore lint/performance/noImgElement: External URL from models.dev
<img
@@ -29,7 +25,7 @@ export function ProviderLogo({
aria-hidden="true"
className={cn("size-4 dark:invert", className)}
height={16}
src={`https://models.dev/logos/${logoName}.svg`}
src={`https://models.dev/logos/${logo ?? provider}.svg`}
width={16}
/>
)
components/settings/provider-picker.tsx
+7 -11
View File
@@ -1,11 +1,12 @@
import { ChevronRight, Search } from "lucide-react"
import { useState } from "react"
import { useLocale } from "@/components/canvas/locale-context"
import { ProviderLogo } from "@/components/provider-logo"
import { SettingsHeader } from "@/components/settings/settings-header"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useDictionary } from "@/hooks/use-dictionary"
import { filterProviderGroups, PROVIDER_NOTE_KEYS } from "@/lib/provider-setup"
import { PROVIDER_INFO, type ProviderName } from "@/lib/types/model-config"
import { filterProviderGroups } from "@/lib/provider-setup"
import { PROVIDERS, type ProviderName } from "@/lib/providers"
/** Every provider in groups, with a search; picking one adds it */
export function ProviderPicker({
@@ -20,6 +21,7 @@ export function ProviderPicker({
}) {
const dict = useDictionary()
const t = dict.modelConfig
const locale = useLocale()
const [query, setQuery] = useState("")
const groups = filterProviderGroups(query)
const groupLabels: Record<string, string> = {
@@ -28,8 +30,6 @@ export function ProviderPicker({
cloud: t.groupCloud,
selfHosted: t.groupSelfHosted,
}
const notes = t as Record<string, string>
return (
<div className="flex min-h-0 flex-1 flex-col">
<SettingsHeader>
@@ -93,9 +93,8 @@ export function ProviderPicker({
</h3>
<div className="grid grid-cols-[repeat(auto-fill,minmax(148px,1fr))] gap-2">
{group.providers.map((provider) => {
const noteKey = PROVIDER_NOTE_KEYS[provider]
const note = [
noteKey && notes[noteKey],
PROVIDERS[provider].note?.[locale],
added.includes(provider) && t.added,
]
.filter(Boolean)
@@ -116,14 +115,11 @@ export function ProviderPicker({
<span
className="block truncate text-[12.5px] font-medium"
title={
PROVIDER_INFO[provider]
PROVIDERS[provider]
.label
}
>
{
PROVIDER_INFO[provider]
.label
}
{PROVIDERS[provider].label}
</span>
{note && (
<span className="block truncate text-[11px] text-muted-foreground">
components/settings/providers-list.tsx
+8 -9
View File
@@ -16,11 +16,11 @@ import { ScrollArea } from "@/components/ui/scroll-area"
import { useDictionary } from "@/hooks/use-dictionary"
import { formatMessage } from "@/lib/i18n/utils"
import { POPULAR_PROVIDERS, providerStatus } from "@/lib/provider-setup"
import {
type FlattenedModel,
PROVIDER_INFO,
type ProviderConfig,
type ProviderName,
import { PROVIDERS } from "@/lib/providers"
import type {
FlattenedModel,
ProviderConfig,
ProviderName,
} from "@/lib/types/model-config"
import { cn } from "@/lib/utils"
@@ -169,7 +169,7 @@ export function ProvidersList({
/>
</span>
<span className="truncate">
{PROVIDER_INFO[provider].label}
{PROVIDERS[provider].label}
</span>
</button>
))}
@@ -180,8 +180,7 @@ export function ProvidersList({
className="flex items-center gap-1 text-[13px] font-medium hover:underline"
>
{formatMessage(t.viewAllProviders, {
count: Object.keys(PROVIDER_INFO)
.length,
count: Object.keys(PROVIDERS).length,
})}
<ChevronRight className="size-3.5" />
</button>
@@ -225,7 +224,7 @@ export function ProvidersList({
<span className="flex items-center gap-2 text-[13px] font-medium">
<span className="truncate">
{p.name ||
PROVIDER_INFO[
PROVIDERS[
p.provider
].label}
</span>