feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
This commit is contained in:
Antigravity
277
memento-note/components/ai/byok-settings-panel.tsx
Normal file
277
memento-note/components/ai/byok-settings-panel.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
'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
|
||||
}
|
||||
|
||||
export function ByokSettingsPanel() {
|
||||
const { t } = useLanguage()
|
||||
const queryClient = useQueryClient()
|
||||
const [provider, setProvider] = useState('')
|
||||
const [apiKey, setApiKey] = useState('')
|
||||
const [alias, setAlias] = useState('')
|
||||
|
||||
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 res = await fetch('/api/user/api-keys', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ provider, apiKey, alias: alias || 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('')
|
||||
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={setProvider}
|
||||
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>
|
||||
<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>
|
||||
{key.alias ? (
|
||||
<p className="text-[10px] text-concrete truncate">{key.alias}</p>
|
||||
) : null}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user