mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-12 20:49:53 +08:00
Dayuan Jiang
458d8050cc
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.
271 lines
13 KiB
TypeScript
271 lines
13 KiB
TypeScript
import {
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
ChevronRight,
|
|
CircleDashed,
|
|
CircleDotDashed,
|
|
Lock,
|
|
Plus,
|
|
Server,
|
|
} from "lucide-react"
|
|
import { shortModelName } from "@/components/model-selector"
|
|
import { ProviderLogo } from "@/components/provider-logo"
|
|
import { SettingsHeader } from "@/components/settings/settings-header"
|
|
import { Button } from "@/components/ui/button"
|
|
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 { PROVIDERS } from "@/lib/providers"
|
|
import type {
|
|
FlattenedModel,
|
|
ProviderConfig,
|
|
ProviderName,
|
|
} from "@/lib/types/model-config"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function InUse() {
|
|
const dict = useDictionary()
|
|
return (
|
|
<span className="rounded bg-primary px-1.5 py-0.5 text-[11px] font-medium text-primary-foreground">
|
|
{dict.modelConfig.inUse}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/** The models tab's first page: the user's providers and the server's models */
|
|
export function ProvidersList({
|
|
providers,
|
|
serverModels,
|
|
selectedModelId,
|
|
onOpen,
|
|
onAdd,
|
|
onBrowse,
|
|
}: {
|
|
providers: ProviderConfig[]
|
|
serverModels: FlattenedModel[]
|
|
selectedModelId: string | undefined
|
|
onOpen: (providerId: string) => void
|
|
onAdd: (provider: ProviderName) => void
|
|
/** Shows every provider to pick from */
|
|
onBrowse: () => void
|
|
}) {
|
|
const dict = useDictionary()
|
|
const t = dict.modelConfig
|
|
const userProviderInUse = providers.find((p) =>
|
|
p.models.some((m) => m.id === selectedModelId),
|
|
)
|
|
// No model chosen is the server's default model
|
|
const serverInUse =
|
|
!selectedModelId || serverModels.some((m) => m.id === selectedModelId)
|
|
|
|
const names = serverModels
|
|
.slice(0, 3)
|
|
.map((m) => shortModelName(m.modelId))
|
|
.join(t.listSeparator)
|
|
const serverCard = (serverModels.length > 0 || serverInUse) && (
|
|
<div className="flex items-center gap-3 rounded-xl border border-border-subtle bg-surface-1 px-4 py-3">
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-surface-0">
|
|
<Server className="size-4 text-muted-foreground" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 text-[13px] font-medium">
|
|
{t.serverModelsTitle}
|
|
{serverInUse && <InUse />}
|
|
</div>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{serverModels.length > 0
|
|
? formatMessage(
|
|
serverModels.length === 1
|
|
? t.serverModelsSummaryOne
|
|
: t.serverModelsSummaryOther,
|
|
{
|
|
count: serverModels.length,
|
|
names:
|
|
serverModels.length > 3
|
|
? `${names}…`
|
|
: names,
|
|
},
|
|
)
|
|
: t.serverDefaultSummary}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
const statusText = (p: ProviderConfig) => {
|
|
const status = providerStatus(p)
|
|
switch (status.kind) {
|
|
case "error":
|
|
return (
|
|
<span className="flex items-center gap-1 text-destructive">
|
|
<AlertCircle className="size-3.5" />
|
|
{formatMessage(t.statusError, { count: status.count })}
|
|
</span>
|
|
)
|
|
case "incomplete":
|
|
return (
|
|
<span className="flex items-center gap-1 text-amber-700 dark:text-amber-400">
|
|
<CircleDotDashed className="size-3.5" />
|
|
{t.statusIncomplete}
|
|
</span>
|
|
)
|
|
case "untested":
|
|
return (
|
|
<span className="flex items-center gap-1 text-muted-foreground">
|
|
<CircleDashed className="size-3.5" />
|
|
{formatMessage(t.statusUntested, {
|
|
count: status.count,
|
|
})}
|
|
</span>
|
|
)
|
|
case "ok":
|
|
return (
|
|
<span className="flex items-center gap-1 text-success">
|
|
<CheckCircle2 className="size-3.5" />
|
|
{formatMessage(t.statusOk, { count: status.count })}
|
|
</span>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-0 flex-1 flex-col">
|
|
<SettingsHeader>
|
|
<h2
|
|
className="font-semibold outline-none"
|
|
tabIndex={-1}
|
|
data-page-title
|
|
>
|
|
{t.models}
|
|
</h2>
|
|
</SettingsHeader>
|
|
<ScrollArea className="min-h-0 flex-1">
|
|
<div className="space-y-6 px-6 pb-6">
|
|
{providers.length === 0 ? (
|
|
<>
|
|
{serverCard}
|
|
<section className="space-y-3">
|
|
<div>
|
|
<h3 className="text-[13px] font-semibold">
|
|
{t.useOwnKey}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t.useOwnKeyHint}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-[repeat(auto-fill,minmax(170px,1fr))] gap-2.5">
|
|
{POPULAR_PROVIDERS.map((provider) => (
|
|
<button
|
|
key={provider}
|
|
type="button"
|
|
onClick={() => onAdd(provider)}
|
|
data-testid={`pick-provider-${provider}`}
|
|
className="flex h-14 items-center gap-3 rounded-xl border border-border px-4 text-left text-[13px] font-medium transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-surface-2">
|
|
<ProviderLogo
|
|
provider={provider}
|
|
/>
|
|
</span>
|
|
<span className="truncate">
|
|
{PROVIDERS[provider].label}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onBrowse}
|
|
className="flex items-center gap-1 text-[13px] font-medium hover:underline"
|
|
>
|
|
{formatMessage(t.viewAllProviders, {
|
|
count: Object.keys(PROVIDERS).length,
|
|
})}
|
|
<ChevronRight className="size-3.5" />
|
|
</button>
|
|
</section>
|
|
</>
|
|
) : (
|
|
<>
|
|
<section className="space-y-2.5">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-[13px] font-semibold">
|
|
{t.myProviders}
|
|
</h3>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onBrowse}
|
|
className="h-8 gap-1.5 rounded-lg text-xs"
|
|
>
|
|
<Plus className="size-3.5" />
|
|
{t.addProvider}
|
|
</Button>
|
|
</div>
|
|
<div className="divide-y divide-border-subtle rounded-xl border border-border">
|
|
{providers.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
onClick={() => onOpen(p.id)}
|
|
data-testid={`provider-row-${p.id}`}
|
|
className={cn(
|
|
"flex min-h-[60px] w-full items-center gap-3 px-4 py-2.5 text-left transition-colors first:rounded-t-xl last:rounded-b-xl",
|
|
"hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
)}
|
|
>
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-surface-2">
|
|
<ProviderLogo
|
|
provider={p.provider}
|
|
/>
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="flex items-center gap-2 text-[13px] font-medium">
|
|
<span className="truncate">
|
|
{p.name ||
|
|
PROVIDERS[
|
|
p.provider
|
|
].label}
|
|
</span>
|
|
{userProviderInUse?.id ===
|
|
p.id && <InUse />}
|
|
</span>
|
|
<span className="block truncate font-mono text-xs text-muted-foreground">
|
|
{p.models.length > 0 ? (
|
|
p.models
|
|
.map(
|
|
(m) =>
|
|
m.modelId,
|
|
)
|
|
.join(
|
|
t.listSeparator,
|
|
)
|
|
) : (
|
|
<span className="font-sans">
|
|
{t.noModelsYet}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</span>
|
|
<span className="shrink-0 text-xs">
|
|
{statusText(p)}
|
|
</span>
|
|
<ChevronRight className="size-4 shrink-0 text-muted-foreground/60" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
{serverCard}
|
|
</>
|
|
)}
|
|
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<Lock className="size-3.5 shrink-0" />
|
|
{t.keysStayLocal}
|
|
</p>
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
)
|
|
}
|