77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import { ExternalLink, KeyRound } from "lucide-react";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { PROVIDER_KEY_LABELS, type ProviderId } from "@/lib/ai/keys";
|
||
|
||
const PROVIDER_ORDER: ProviderId[] = [
|
||
"opencode-go",
|
||
"xai",
|
||
"openai",
|
||
"anthropic",
|
||
"google",
|
||
];
|
||
|
||
interface ApiKeysFormProps {
|
||
values: Partial<Record<ProviderId, string>>;
|
||
configured: Partial<Record<ProviderId, boolean>>;
|
||
onChange: (provider: ProviderId, value: string) => void;
|
||
}
|
||
|
||
export function ApiKeysForm({ values, configured, onChange }: ApiKeysFormProps) {
|
||
return (
|
||
<div className="space-y-4">
|
||
{PROVIDER_ORDER.map((provider) => {
|
||
const meta = PROVIDER_KEY_LABELS[provider];
|
||
const isConfigured = configured[provider];
|
||
|
||
return (
|
||
<div
|
||
key={provider}
|
||
className="rounded-lg border border-border bg-muted p-4"
|
||
>
|
||
<div className="mb-3 flex items-center justify-between gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<KeyRound className="h-4 w-4 text-muted-foreground" />
|
||
<Label className="normal-case text-sm font-semibold text-foreground">
|
||
{meta.label}
|
||
</Label>
|
||
</div>
|
||
<Badge variant={isConfigured ? "success" : "secondary"}>
|
||
{isConfigured ? "已設定" : "未設定"}
|
||
</Badge>
|
||
</div>
|
||
|
||
<p className="mb-3 text-xs leading-relaxed text-muted-foreground">{meta.hint}</p>
|
||
|
||
<Input
|
||
type="password"
|
||
value={values[provider] ?? ""}
|
||
onChange={(e) => onChange(provider, e.target.value)}
|
||
placeholder={isConfigured ? "留空則保留現有 key" : "貼上 API key"}
|
||
autoComplete="off"
|
||
/>
|
||
|
||
{meta.docsUrl && (
|
||
<a
|
||
href={meta.docsUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="mt-2 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline"
|
||
>
|
||
<ExternalLink className="h-3 w-3" />
|
||
取得 {meta.label} API key
|
||
</a>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||
AI Key 綁定你登入巡樓的帳號，所有 Threads 經營帳號共用。只存在本機資料庫；也可在 `.env` 設定環境變數作為備援。
|
||
</p>
|
||
</div>
|
||
);
|
||
} |