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.
507 lines
22 KiB
TypeScript
507 lines
22 KiB
TypeScript
"use client"
|
|
|
|
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 {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { useDictionary } from "@/hooks/use-dictionary"
|
|
import { formatMessage } from "@/lib/i18n/utils"
|
|
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
|
|
// user dialog, write-only masked for the admin panel — supplied via
|
|
// renderSecret. That (and the optional test action) are the only genuine
|
|
// differences between the two screens; the field structure is shared here.
|
|
export type SecretField =
|
|
| "apiKey"
|
|
| "awsAccessKeyId"
|
|
| "awsSecretAccessKey"
|
|
| "vertexApiKey"
|
|
|
|
/** Bedrock signs in with an API key or with an access key pair */
|
|
export type BedrockAuth = "apiKey" | "accessKey"
|
|
|
|
// AWS regions offered for Bedrock (shared by both screens)
|
|
export const AWS_REGIONS: Array<[string, string]> = [
|
|
["us-east-1", "N. Virginia"],
|
|
["us-east-2", "Ohio"],
|
|
["us-west-2", "Oregon"],
|
|
["eu-west-1", "Ireland"],
|
|
["eu-west-2", "London"],
|
|
["eu-west-3", "Paris"],
|
|
["eu-central-1", "Frankfurt"],
|
|
["ap-south-1", "Mumbai"],
|
|
["ap-northeast-1", "Tokyo"],
|
|
["ap-northeast-2", "Seoul"],
|
|
["ap-southeast-1", "Singapore"],
|
|
["ap-southeast-2", "Sydney"],
|
|
["sa-east-1", "São Paulo"],
|
|
]
|
|
|
|
interface ProviderCredentialsFieldsProps {
|
|
provider: ProviderName
|
|
// Plain (non-secret) field values — secrets are owned by renderSecret
|
|
name?: string
|
|
baseUrl?: string
|
|
awsRegion?: string
|
|
disabled?: boolean
|
|
// Update a plain text field
|
|
onChange: (field: "name" | "baseUrl" | "awsRegion", value: string) => void
|
|
// Render the control for a secret field. The caller may include trailing
|
|
// UI (e.g. the user dialog's inline Test button + validation error); the
|
|
// shared component only supplies the label above it.
|
|
renderSecret: (opts: { field: SecretField; id: string }) => ReactNode
|
|
// The user's settings page: the secrets come first, the display name and
|
|
// base URL fold under "More options", and Bedrock shows only the way of
|
|
// signing in that is chosen. Switching it empties the other way's
|
|
// secrets (clearSecrets), so a request carries one kind of credential.
|
|
settingsLayout?: boolean
|
|
clearSecrets?: (fields: SecretField[]) => void
|
|
// Bedrock credentials filled in, to choose the way of signing in shown
|
|
bedrockFilled?: { apiKey: boolean; accessKey: boolean }
|
|
// Bedrock's optional session token input, for temporary access keys
|
|
// (the admin panel has none)
|
|
sessionTokenInput?: ReactNode
|
|
}
|
|
|
|
// Display name + per-provider credential inputs, shared by the user
|
|
// ModelConfigDialog and the admin Models panel.
|
|
export function ProviderCredentialsFields({
|
|
provider,
|
|
name,
|
|
baseUrl,
|
|
awsRegion,
|
|
disabled,
|
|
onChange,
|
|
renderSecret,
|
|
settingsLayout,
|
|
clearSecrets,
|
|
bedrockFilled,
|
|
sessionTokenInput,
|
|
}: ProviderCredentialsFieldsProps) {
|
|
const dict = useDictionary()
|
|
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
|
|
const [optionsOpen, setOptionsOpen] = useState(
|
|
() =>
|
|
!!name ||
|
|
(!!baseUrl && baseUrl !== info.defaultBaseUrl) ||
|
|
!!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
|
|
// fields to type new keys keeps them on screen
|
|
const filledAuth: BedrockAuth | null = bedrockFilled?.apiKey
|
|
? "apiKey"
|
|
: bedrockFilled?.accessKey
|
|
? "accessKey"
|
|
: null
|
|
const [chosenAuth, setChosenAuth] = useState<BedrockAuth>(
|
|
filledAuth ?? "apiKey",
|
|
)
|
|
if (filledAuth && filledAuth !== chosenAuth) setChosenAuth(filledAuth)
|
|
const bedrockAuth: BedrockAuth = filledAuth ?? chosenAuth
|
|
|
|
const nameField = (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="provider-name"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Tag className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.displayName}
|
|
</Label>
|
|
<Input
|
|
id="provider-name"
|
|
value={name ?? ""}
|
|
disabled={disabled}
|
|
onChange={(e) => onChange("name", e.target.value)}
|
|
placeholder={info.label}
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
)
|
|
const regionField = (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="aws-region"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.awsRegion}
|
|
</Label>
|
|
<Select
|
|
value={awsRegion || ""}
|
|
disabled={disabled}
|
|
onValueChange={(v) => onChange("awsRegion", v)}
|
|
>
|
|
<SelectTrigger
|
|
id="aws-region"
|
|
className="h-9 font-mono text-xs hover:bg-accent"
|
|
>
|
|
<SelectValue placeholder={dict.modelConfig.selectRegion} />
|
|
</SelectTrigger>
|
|
<SelectContent className="max-h-64">
|
|
{AWS_REGIONS.map(([region, label]) => (
|
|
<SelectItem key={region} value={region}>
|
|
{region} ({label})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)
|
|
const vertexBaseUrlField = (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="vertex-base-url"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{baseUrlLabel}
|
|
</Label>
|
|
<Input
|
|
id="vertex-base-url"
|
|
value={baseUrl ?? ""}
|
|
disabled={disabled}
|
|
onChange={(e) => onChange("baseUrl", e.target.value)}
|
|
placeholder={dict.modelConfig.customEndpoint}
|
|
className="h-9 font-mono text-xs"
|
|
/>
|
|
</div>
|
|
)
|
|
// API key, with a link to where the provider issues keys
|
|
const apiKeyField = (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label
|
|
htmlFor="api-key"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.apiKey}
|
|
{info.credential === "optionalKey" &&
|
|
` ${dict.modelConfig.optional}`}
|
|
</Label>
|
|
{info.apiKeyUrl && (
|
|
<a
|
|
href={info.apiKeyUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-primary hover:underline"
|
|
>
|
|
{dict.modelConfig.getApiKey}
|
|
</a>
|
|
)}
|
|
</div>
|
|
{renderSecret({ field: "apiKey", id: "api-key" })}
|
|
</div>
|
|
)
|
|
const baseUrlField = (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="base-url"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{baseUrlLabel}
|
|
</Label>
|
|
<Input
|
|
id="base-url"
|
|
value={baseUrl ?? ""}
|
|
disabled={disabled}
|
|
onChange={(e) => onChange("baseUrl", e.target.value)}
|
|
// Drop a pasted endpoint path such as /chat/completions
|
|
onBlur={(e) => {
|
|
const normalized = normalizeBaseUrl(e.target.value)
|
|
if (normalized !== e.target.value) {
|
|
onChange("baseUrl", normalized)
|
|
}
|
|
}}
|
|
placeholder={
|
|
info.defaultBaseUrl || dict.modelConfig.customEndpoint
|
|
}
|
|
className="h-9 rounded-xl font-mono text-xs"
|
|
/>
|
|
{requestUrl && (
|
|
<p className="text-xs text-muted-foreground font-mono break-all">
|
|
{formatMessage(dict.modelConfig.requestUrl, {
|
|
url: requestUrl,
|
|
})}
|
|
</p>
|
|
)}
|
|
{info.baseUrlHint && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{info.baseUrlHint[locale]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
// A provider without credentials (EdgeOne) has no fields
|
|
if (info.credential === "none") return null
|
|
|
|
if (settingsLayout) {
|
|
return (
|
|
<div className="space-y-4">
|
|
{info.credential === "aws" ? (
|
|
<>
|
|
{/* Buttons, not radios: arrow keys would empty
|
|
secrets without a deliberate press */}
|
|
<fieldset
|
|
aria-label={dict.modelConfig.awsCredentials}
|
|
className="inline-flex rounded-lg bg-muted p-0.5"
|
|
>
|
|
{(["apiKey", "accessKey"] as const).map((auth) => (
|
|
<button
|
|
key={auth}
|
|
type="button"
|
|
aria-pressed={bedrockAuth === auth}
|
|
disabled={disabled}
|
|
onClick={() => {
|
|
if (bedrockAuth === auth) return
|
|
setChosenAuth(auth)
|
|
clearSecrets?.(
|
|
auth === "apiKey"
|
|
? [
|
|
"awsAccessKeyId",
|
|
"awsSecretAccessKey",
|
|
]
|
|
: ["apiKey"],
|
|
)
|
|
}}
|
|
className={cn(
|
|
"inline-flex h-7 items-center rounded-md px-2.5 text-xs text-muted-foreground transition-colors",
|
|
bedrockAuth === auth &&
|
|
"bg-card font-medium text-foreground shadow-float",
|
|
)}
|
|
>
|
|
{auth === "apiKey"
|
|
? dict.modelConfig.bedrockAuthApiKey
|
|
: dict.modelConfig.bedrockAuthAccessKey}
|
|
</button>
|
|
))}
|
|
</fieldset>
|
|
{/* Both kinds kept (saved before the choice): the
|
|
access keys sit unused behind the API key */}
|
|
{bedrockFilled?.apiKey && bedrockFilled.accessKey && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{dict.modelConfig.bedrockBothSaved}{" "}
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => {
|
|
clearSecrets?.([
|
|
"awsAccessKeyId",
|
|
"awsSecretAccessKey",
|
|
])
|
|
// This note goes away with the keys
|
|
document
|
|
.getElementById("bedrock-api-key")
|
|
?.focus()
|
|
}}
|
|
className="font-medium text-foreground underline underline-offset-2"
|
|
>
|
|
{dict.modelConfig.removeAccessKeys}
|
|
</button>
|
|
</p>
|
|
)}
|
|
{bedrockAuth === "apiKey" ? (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="bedrock-api-key"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.bedrockApiKey}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "apiKey",
|
|
id: "bedrock-api-key",
|
|
})}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="aws-access-key-id"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.awsAccessKeyId}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "awsAccessKeyId",
|
|
id: "aws-access-key-id",
|
|
})}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="aws-secret-access-key"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.awsSecretAccessKey}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "awsSecretAccessKey",
|
|
id: "aws-secret-access-key",
|
|
})}
|
|
</div>
|
|
{sessionTokenInput && (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="aws-session-token"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.awsSessionToken}
|
|
</Label>
|
|
{sessionTokenInput}
|
|
<p className="text-xs text-muted-foreground">
|
|
{
|
|
dict.modelConfig
|
|
.awsSessionTokenHint
|
|
}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{regionField}
|
|
</>
|
|
) : info.credential === "vertexKey" ? (
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="vertex-api-key"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.apiKey}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "vertexApiKey",
|
|
id: "vertex-api-key",
|
|
})}
|
|
</div>
|
|
) : (
|
|
apiKeyField
|
|
)}
|
|
<div className="space-y-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOptionsOpen(!optionsOpen)}
|
|
aria-expanded={optionsOpen}
|
|
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
<ChevronRight
|
|
className={cn(
|
|
"size-3.5 transition-transform",
|
|
optionsOpen && "rotate-90",
|
|
)}
|
|
/>
|
|
{info.credential === "aws"
|
|
? dict.modelConfig.moreOptionsName
|
|
: dict.modelConfig.moreOptions}
|
|
</button>
|
|
{optionsOpen && (
|
|
<>
|
|
{info.credential !== "aws" &&
|
|
(info.credential === "vertexKey"
|
|
? vertexBaseUrlField
|
|
: baseUrlField)}
|
|
{nameField}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
{nameField}
|
|
|
|
{info.credential === "aws" ? (
|
|
<>
|
|
{/* AWS Access Key ID */}
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="aws-access-key-id"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.awsAccessKeyId}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "awsAccessKeyId",
|
|
id: "aws-access-key-id",
|
|
})}
|
|
</div>
|
|
|
|
{/* AWS Secret Access Key */}
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="aws-secret-access-key"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.awsSecretAccessKey}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "awsSecretAccessKey",
|
|
id: "aws-secret-access-key",
|
|
})}
|
|
</div>
|
|
|
|
{regionField}
|
|
</>
|
|
) : info.credential === "vertexKey" ? (
|
|
<>
|
|
{/* Vertex AI API Key (Express Mode) */}
|
|
<div className="space-y-2">
|
|
<Label
|
|
htmlFor="vertex-api-key"
|
|
className="text-xs font-medium flex items-center gap-1.5"
|
|
>
|
|
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{dict.modelConfig.apiKey}
|
|
</Label>
|
|
{renderSecret({
|
|
field: "vertexApiKey",
|
|
id: "vertex-api-key",
|
|
})}
|
|
</div>
|
|
|
|
{vertexBaseUrlField}
|
|
</>
|
|
) : (
|
|
<>
|
|
{apiKeyField}
|
|
{baseUrlField}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|