mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-13 04:59:51 +08:00
dayuan.jiang
f811242568
Step 5 of the provider refactor plan. Provider names gave way to the record's credential and sdk fields in: hasCredentials (one rule per credential kind), the connection test (an Object.hasOwn check first, then a credential switch; EdgeOne's site endpoint and cookie forwarding follow credential none), the chat route (the on-site function and the single-system rule for the OpenAI SDK), the credentials form (which fields to show, the optional-key label, the base URL hint from the record), the picker (the note from the record), the logo (icon and logo fields), the settings dialog (test blocker, error hints, EdgeOne origin), the admin panel (fixedCredentials), chatRequestUrl (sdk), the model list (sdk aihubmix) and the zod schema (Object.hasOwn instead of 'in'). The eight provider-specific dictionary entries moved into the record as four-language objects; needAzure became a generic needUrl. Two intended behavior changes: the connection test answers 400 'Invalid provider' for an unknown name whether or not a key is sent (before: 400 'API key is required' without a key, 200 with an error text with one); and Azure has no placeholder default URL any more, so a new Azure entry starts with an empty URL and the generic 'needs a URL' rule applies. The e2e Azure test seeds no URL and expects the new wording. Out-of-layer provider-name checks: 44 before, 6 after (the admin panel's fixed-variable branches for Bedrock, Vertex AI and Ollama, kept on purpose). Behavior snapshot unchanged.
503 lines
21 KiB
TypeScript
503 lines
21 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]
|
|
const baseUrlLabel = 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>
|
|
)
|
|
}
|