Riccardo Giorato
228 lines
8.0 KiB
TypeScript
228 lines
8.0 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import { useState, useEffect } from "react"
|
|
import { Key, ExternalLink, ArrowRight, X, Check } from "lucide-react"
|
|
import { motion, AnimatePresence } from "motion/react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from "@/components/ui/dialog"
|
|
import { TOGETHER_LINK } from "@/lib/utils"
|
|
import { useApiKey } from "@/hooks/use-api-key"
|
|
|
|
interface ApiKeyModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onSubmit: (key: string) => void
|
|
}
|
|
|
|
export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
|
|
const [apiKeyInput, setApiKeyInput] = useState("")
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [shakeKey, setShakeKey] = useState(0)
|
|
const [success, setSuccess] = useState(false)
|
|
const [existingKey, setApiKey] = useApiKey()
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setSuccess(false)
|
|
setError(null)
|
|
setApiKeyInput((current) => {
|
|
if (existingKey && current === "") {
|
|
return existingKey
|
|
}
|
|
return current
|
|
})
|
|
}
|
|
}, [isOpen, existingKey])
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!apiKeyInput.trim()) return
|
|
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const res = await fetch("/api/validate-api-key", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ apiKey: apiKeyInput.trim() }),
|
|
})
|
|
const data = await res.json()
|
|
|
|
if (!data.valid) {
|
|
setError("Invalid API key. Please check and try again.")
|
|
setShakeKey((k) => k + 1)
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
} catch {
|
|
setError("Could not validate key. Please try again.")
|
|
setShakeKey((k) => k + 1)
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
|
|
setIsLoading(false)
|
|
setSuccess(true)
|
|
onSubmit(apiKeyInput.trim())
|
|
setTimeout(() => {
|
|
setSuccess(false)
|
|
setApiKeyInput("")
|
|
}, 1400)
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
setApiKey(null)
|
|
setApiKeyInput("")
|
|
setError(null)
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="border border-border/50 rounded-xl bg-background max-w-sm p-6 overflow-hidden">
|
|
<AnimatePresence>
|
|
{success && (
|
|
<motion.div
|
|
key="success"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-background rounded-xl"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.5, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 20, delay: 0.05 }}
|
|
className="w-14 h-14 rounded-full bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center"
|
|
>
|
|
<Check className="w-7 h-7 text-emerald-400" strokeWidth={2.5} />
|
|
</motion.div>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 4 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.15, duration: 0.2 }}
|
|
className="text-sm font-medium text-white"
|
|
>
|
|
API key saved
|
|
</motion.p>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 4 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2, duration: 0.2 }}
|
|
className="text-xs text-muted-foreground"
|
|
>
|
|
You're all set for unlimited generation
|
|
</motion.p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
<DialogHeader className="mb-4">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Key className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
|
<DialogTitle className="text-base font-semibold text-white leading-none">
|
|
{existingKey ? "Your API key" : "Add your API key"}
|
|
</DialogTitle>
|
|
</div>
|
|
<DialogDescription className="text-sm text-muted-foreground leading-snug pl-6">
|
|
{existingKey
|
|
? "Update or remove your Together AI key."
|
|
: "You've used all your free credits. Add your key for unlimited use."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-3">
|
|
<div className="relative">
|
|
<AnimatePresence>
|
|
{error && (
|
|
<motion.p
|
|
key="error"
|
|
initial={{ opacity: 0, y: 4 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 4 }}
|
|
transition={{ duration: 0.18, ease: "easeOut" }}
|
|
className="absolute bottom-full left-0 mb-1.5 text-xs text-red-400 flex items-center gap-1.5 pointer-events-none"
|
|
>
|
|
<span className="inline-block w-1 h-1 rounded-full bg-red-400 flex-shrink-0" />
|
|
{error}
|
|
</motion.p>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<motion.div
|
|
key={shakeKey}
|
|
className="relative"
|
|
animate={shakeKey > 0 ? { x: [0, -8, 8, -6, 6, -3, 3, 0] } : {}}
|
|
transition={{ duration: 0.45, ease: "easeInOut" }}
|
|
>
|
|
<Input
|
|
type="password"
|
|
value={apiKeyInput}
|
|
onChange={(e) => { setApiKeyInput(e.target.value); setError(null) }}
|
|
placeholder="sk-••••••••••••••••"
|
|
className={`bg-secondary border-border/50 text-white placeholder-muted-foreground/40 py-5 pr-10 font-mono text-sm transition-colors duration-200 ${error ? "border-red-500/60 focus-visible:ring-red-500/20" : ""}`}
|
|
/>
|
|
{apiKeyInput && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setApiKeyInput("")}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-white transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
|
|
<a
|
|
href={TOGETHER_LINK}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-white transition-colors"
|
|
>
|
|
Get a free Together AI key
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
|
|
<div className="flex gap-2 pt-1">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={existingKey ? handleDelete : onClose}
|
|
className={`flex-1 border-border/50 hover:border-border transition-colors ${
|
|
existingKey
|
|
? "text-red-400 border-red-500/30 hover:bg-red-500/10 hover:border-red-500/50 hover:text-red-300"
|
|
: "text-muted-foreground hover:text-white hover:bg-secondary"
|
|
}`}
|
|
>
|
|
{existingKey ? "Delete" : "Later"}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={!apiKeyInput.trim() || isLoading}
|
|
className="flex-[2] gap-2 bg-white hover:bg-neutral-200 text-black font-medium"
|
|
>
|
|
{isLoading ? "Checking…" : "Save key"}
|
|
{!isLoading && <ArrowRight className="w-4 h-4" />}
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="text-xs text-muted-foreground/50 text-center pt-1">
|
|
Stored locally · never sent to our servers
|
|
</p>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|