378 lines
14 KiB
TypeScript
378 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useState } from 'react'
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { KeyRound, Loader2, Shield, Trash2 } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type PublicKey = {
|
|
provider: string
|
|
alias: string
|
|
model: string | null
|
|
isActive: boolean
|
|
lastUsedAt: string | null
|
|
}
|
|
|
|
async function fetchByokKeys(): Promise<{
|
|
keys: PublicKey[]
|
|
allowedProviders: string[]
|
|
}> {
|
|
const res = await fetch('/api/user/api-keys')
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}))
|
|
throw new Error(body.message || body.error || 'Failed to load keys')
|
|
}
|
|
return res.json()
|
|
}
|
|
|
|
function providerLabel(t: (key: string) => string, provider: string): string {
|
|
const key = `byokSettings.providers.${provider}`
|
|
const translated = t(key)
|
|
return translated === key ? provider : translated
|
|
}
|
|
|
|
const PROVIDER_MODEL_SUGGESTIONS: Record<string, string[]> = {
|
|
openai: ['gpt-4o-mini', 'gpt-4o', 'gpt-3.5-turbo'],
|
|
anthropic: ['claude-3-5-sonnet-latest', 'claude-3-5-haiku-latest', 'claude-3-opus-latest'],
|
|
google: ['gemini-1.5-flash', 'gemini-1.5-pro', 'gemini-2.0-flash-exp'],
|
|
deepseek: ['deepseek-chat', 'deepseek-coder'],
|
|
minimax: ['abab6.5-chat', 'abab6.5s-chat'],
|
|
mistral: ['mistral-small-latest', 'mistral-medium-latest', 'mistral-large-latest'],
|
|
glm: ['glm-4', 'glm-4-flash'],
|
|
openrouter: ['openai/gpt-4o-mini', 'anthropic/claude-3.5-sonnet', 'deepseek/deepseek-chat'],
|
|
custom: [],
|
|
}
|
|
|
|
export function ByokSettingsPanel() {
|
|
const { t } = useLanguage()
|
|
const queryClient = useQueryClient()
|
|
const [provider, setProvider] = useState('')
|
|
const [apiKey, setApiKey] = useState('')
|
|
const [alias, setAlias] = useState('')
|
|
const [model, setModel] = useState('')
|
|
const [customModel, setCustomModel] = useState('')
|
|
const [isCustomModel, setIsCustomModel] = useState(false)
|
|
|
|
const handleProviderChange = (p: string) => {
|
|
setProvider(p)
|
|
const sug = PROVIDER_MODEL_SUGGESTIONS[p] || []
|
|
if (sug.length > 0) {
|
|
setModel(sug[0])
|
|
setIsCustomModel(false)
|
|
} else {
|
|
setModel('')
|
|
setCustomModel('')
|
|
setIsCustomModel(true)
|
|
}
|
|
}
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ['user', 'api-keys'],
|
|
queryFn: fetchByokKeys,
|
|
})
|
|
|
|
const invalidate = useCallback(() => {
|
|
queryClient.invalidateQueries({ queryKey: ['user', 'api-keys'] })
|
|
queryClient.invalidateQueries({ queryKey: ['usage', 'current'] })
|
|
}, [queryClient])
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: async () => {
|
|
const resolvedModel = isCustomModel ? customModel : model
|
|
const res = await fetch('/api/user/api-keys', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
provider,
|
|
apiKey,
|
|
alias: alias || undefined,
|
|
model: resolvedModel || undefined,
|
|
}),
|
|
})
|
|
const body = await res.json().catch(() => ({}))
|
|
if (!res.ok) {
|
|
throw new Error(body.message || body.error || 'Save failed')
|
|
}
|
|
return body
|
|
},
|
|
onSuccess: () => {
|
|
toast.success(t('byokSettings.saved'))
|
|
setApiKey('')
|
|
setAlias('')
|
|
setProvider('')
|
|
setModel('')
|
|
setCustomModel('')
|
|
setIsCustomModel(false)
|
|
invalidate()
|
|
},
|
|
onError: (err: Error) => {
|
|
toast.error(err.message || t('byokSettings.error'))
|
|
},
|
|
})
|
|
|
|
const toggleMutation = useMutation({
|
|
mutationFn: async ({
|
|
provider: p,
|
|
isActive,
|
|
}: {
|
|
provider: string
|
|
isActive: boolean
|
|
}) => {
|
|
const res = await fetch(`/api/user/api-keys/${encodeURIComponent(p)}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ isActive }),
|
|
})
|
|
if (!res.ok) throw new Error('Update failed')
|
|
},
|
|
onSuccess: invalidate,
|
|
onError: () => toast.error(t('byokSettings.error')),
|
|
})
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: async (p: string) => {
|
|
const res = await fetch(`/api/user/api-keys/${encodeURIComponent(p)}`, {
|
|
method: 'DELETE',
|
|
})
|
|
if (!res.ok) throw new Error('Delete failed')
|
|
},
|
|
onSuccess: () => {
|
|
toast.success(t('byokSettings.deleted'))
|
|
invalidate()
|
|
},
|
|
onError: () => toast.error(t('byokSettings.error')),
|
|
})
|
|
|
|
const allowed = data?.allowedProviders ?? []
|
|
const keys = data?.keys ?? []
|
|
const hasActiveByok = keys.some((k) => k.isActive)
|
|
const tierBlocked = !isLoading && allowed.length === 0
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground p-5">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
{t('byokSettings.loading')}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<p className="text-sm text-destructive p-5">{t('byokSettings.loadError')}</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
id="byok"
|
|
className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 scroll-mt-6 space-y-6"
|
|
>
|
|
<div className="flex items-start gap-5">
|
|
<div className="p-3 bg-violet-500/10 rounded-2xl text-violet-500 border border-violet-500/20">
|
|
<KeyRound size={18} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h3 className="text-[13px] font-bold text-ink flex items-center gap-2 flex-wrap">
|
|
{t('byokSettings.title')}
|
|
{hasActiveByok && (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 text-[10px] font-medium">
|
|
<Shield size={10} />
|
|
{t('byokSettings.badgeActive')}
|
|
</span>
|
|
)}
|
|
</h3>
|
|
<p className="text-[10px] text-concrete leading-relaxed">{t('byokSettings.description')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{tierBlocked ? (
|
|
<p className="text-[11px] text-amber-600 dark:text-amber-400 bg-amber-500/10 rounded-xl px-4 py-3">
|
|
{t('byokSettings.tierRequired')}
|
|
</p>
|
|
) : (
|
|
<div className="space-y-4 border border-border/60 rounded-2xl p-6">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="byok-provider" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.provider')}</Label>
|
|
<Select
|
|
value={provider}
|
|
onValueChange={handleProviderChange}
|
|
disabled={saveMutation.isPending}
|
|
>
|
|
<SelectTrigger id="byok-provider">
|
|
<SelectValue placeholder={t('byokSettings.providerPlaceholder')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{allowed.map((p) => (
|
|
<SelectItem key={p} value={p}>
|
|
{providerLabel(t, p)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="byok-alias" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.alias')}</Label>
|
|
<Input
|
|
id="byok-alias"
|
|
value={alias}
|
|
onChange={(e) => setAlias(e.target.value)}
|
|
placeholder={t('byokSettings.aliasPlaceholder')}
|
|
disabled={saveMutation.isPending}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Model Selection Row */}
|
|
{provider && (
|
|
<div className="grid gap-4 sm:grid-cols-2 pt-2 border-t border-border/40">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="byok-model-select" className="text-[10px] font-bold uppercase tracking-widest text-concrete">Modèle de l'IA (Optionnel)</Label>
|
|
{PROVIDER_MODEL_SUGGESTIONS[provider] && PROVIDER_MODEL_SUGGESTIONS[provider].length > 0 ? (
|
|
<Select
|
|
value={isCustomModel ? 'custom' : model}
|
|
onValueChange={(val) => {
|
|
if (val === 'custom') {
|
|
setIsCustomModel(true)
|
|
} else {
|
|
setIsCustomModel(false)
|
|
setModel(val)
|
|
}
|
|
}}
|
|
disabled={saveMutation.isPending}
|
|
>
|
|
<SelectTrigger id="byok-model-select">
|
|
<SelectValue placeholder="Choisir un modèle..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{PROVIDER_MODEL_SUGGESTIONS[provider].map((m) => (
|
|
<SelectItem key={m} value={m}>
|
|
{m}
|
|
</SelectItem>
|
|
))}
|
|
<SelectItem value="custom">Autre / Modèle personnalisé...</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<div className="text-xs text-concrete py-2 italic">
|
|
Spécifiez le modèle ci-contre si besoin.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{(isCustomModel || !(PROVIDER_MODEL_SUGGESTIONS[provider] && PROVIDER_MODEL_SUGGESTIONS[provider].length > 0)) && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="byok-model-custom" className="text-[10px] font-bold uppercase tracking-widest text-concrete">Saisir le nom du modèle</Label>
|
|
<Input
|
|
id="byok-model-custom"
|
|
value={isCustomModel ? customModel : model}
|
|
onChange={(e) => {
|
|
if (isCustomModel) {
|
|
setCustomModel(e.target.value)
|
|
} else {
|
|
setModel(e.target.value)
|
|
}
|
|
}}
|
|
placeholder="ex. deepseek-reasoner, minimax-abab6.5"
|
|
disabled={saveMutation.isPending}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="byok-key" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.apiKey')}</Label>
|
|
<Input
|
|
id="byok-key"
|
|
type="password"
|
|
autoComplete="off"
|
|
value={apiKey}
|
|
onChange={(e) => setApiKey(e.target.value)}
|
|
placeholder={t('byokSettings.apiKeyPlaceholder')}
|
|
disabled={saveMutation.isPending}
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
disabled={!provider || apiKey.length < 8 || saveMutation.isPending}
|
|
onClick={() => saveMutation.mutate()}
|
|
className={cn(
|
|
'px-6 py-3 rounded-2xl text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-300',
|
|
'bg-ink text-paper shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95',
|
|
'disabled:opacity-40 disabled:pointer-events-none disabled:shadow-none'
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
{saveMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
|
{t('byokSettings.save')}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{keys.length > 0 && (
|
|
<ul className="space-y-3">
|
|
{keys.map((key) => (
|
|
<li
|
|
key={key.provider}
|
|
className="flex items-center justify-between gap-3 rounded-2xl border border-border/60 px-4 py-3"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="text-[13px] font-bold text-ink">{providerLabel(t, key.provider)}</div>
|
|
<div className="flex flex-col gap-0.5 mt-0.5">
|
|
{key.alias ? (
|
|
<p className="text-[10px] text-concrete truncate">{key.alias}</p>
|
|
) : null}
|
|
{key.model ? (
|
|
<p className="text-[9px] text-brand-accent font-mono truncate">Modèle : {key.model}</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="sr-only peer"
|
|
checked={key.isActive}
|
|
onChange={(e) => toggleMutation.mutate({ provider: key.provider, isActive: e.target.checked })}
|
|
disabled={toggleMutation.isPending}
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-brand-accent" />
|
|
</label>
|
|
<button
|
|
type="button"
|
|
className="h-8 w-8 rounded-lg flex items-center justify-center text-destructive/60 hover:text-destructive hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors"
|
|
disabled={deleteMutation.isPending}
|
|
onClick={() => {
|
|
if (confirm(t('byokSettings.confirmDelete'))) {
|
|
deleteMutation.mutate(key.provider)
|
|
}
|
|
}}
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{!tierBlocked && keys.length === 0 && (
|
|
<p className="text-[11px] text-concrete">{t('byokSettings.empty')}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|