mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
97ab82e027
- Add AI provider settings to config panel (provider, model, API key, base URL) - Support 7 providers: OpenAI, Anthropic, Google, Azure, OpenRouter, DeepSeek, SiliconFlow - Client API keys stored in localStorage, never stored on server - Client settings override server env vars when provided - Skip server credential validation when client provides API key - Bypass usage limits (request/token/TPM) when using own API key - Add /api/config endpoint for fetching usage limits - Add privacy notices to settings dialog, about pages, and quota toast - Add clear settings button to reset saved API keys - Update README files (EN/CN/JA) with BYOK documentation Co-authored-by: dayuan.jiang <jiangdy@amazon.co.jp>
387 lines
18 KiB
TypeScript
387 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { Switch } from "@/components/ui/switch"
|
|
|
|
interface SettingsDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onCloseProtectionChange?: (enabled: boolean) => void
|
|
}
|
|
|
|
export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
|
|
export const STORAGE_CLOSE_PROTECTION_KEY = "next-ai-draw-io-close-protection"
|
|
const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
|
|
export const STORAGE_AI_PROVIDER_KEY = "next-ai-draw-io-ai-provider"
|
|
export const STORAGE_AI_BASE_URL_KEY = "next-ai-draw-io-ai-base-url"
|
|
export const STORAGE_AI_API_KEY_KEY = "next-ai-draw-io-ai-api-key"
|
|
export const STORAGE_AI_MODEL_KEY = "next-ai-draw-io-ai-model"
|
|
|
|
function getStoredAccessCodeRequired(): boolean | null {
|
|
if (typeof window === "undefined") return null
|
|
const stored = localStorage.getItem(STORAGE_ACCESS_CODE_REQUIRED_KEY)
|
|
if (stored === null) return null
|
|
return stored === "true"
|
|
}
|
|
|
|
export function SettingsDialog({
|
|
open,
|
|
onOpenChange,
|
|
onCloseProtectionChange,
|
|
}: SettingsDialogProps) {
|
|
const [accessCode, setAccessCode] = useState("")
|
|
const [closeProtection, setCloseProtection] = useState(true)
|
|
const [isVerifying, setIsVerifying] = useState(false)
|
|
const [error, setError] = useState("")
|
|
const [accessCodeRequired, setAccessCodeRequired] = useState(
|
|
() => getStoredAccessCodeRequired() ?? false,
|
|
)
|
|
const [provider, setProvider] = useState("")
|
|
const [baseUrl, setBaseUrl] = useState("")
|
|
const [apiKey, setApiKey] = useState("")
|
|
const [modelId, setModelId] = useState("")
|
|
|
|
useEffect(() => {
|
|
// Only fetch if not cached in localStorage
|
|
if (getStoredAccessCodeRequired() !== null) return
|
|
|
|
fetch("/api/config")
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
return res.json()
|
|
})
|
|
.then((data) => {
|
|
const required = data?.accessCodeRequired === true
|
|
localStorage.setItem(
|
|
STORAGE_ACCESS_CODE_REQUIRED_KEY,
|
|
String(required),
|
|
)
|
|
setAccessCodeRequired(required)
|
|
})
|
|
.catch(() => {
|
|
// Don't cache on error - allow retry on next mount
|
|
setAccessCodeRequired(false)
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
const storedCode =
|
|
localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
|
|
setAccessCode(storedCode)
|
|
|
|
const storedCloseProtection = localStorage.getItem(
|
|
STORAGE_CLOSE_PROTECTION_KEY,
|
|
)
|
|
// Default to true if not set
|
|
setCloseProtection(storedCloseProtection !== "false")
|
|
|
|
// Load AI provider settings
|
|
setProvider(localStorage.getItem(STORAGE_AI_PROVIDER_KEY) || "")
|
|
setBaseUrl(localStorage.getItem(STORAGE_AI_BASE_URL_KEY) || "")
|
|
setApiKey(localStorage.getItem(STORAGE_AI_API_KEY_KEY) || "")
|
|
setModelId(localStorage.getItem(STORAGE_AI_MODEL_KEY) || "")
|
|
|
|
setError("")
|
|
}
|
|
}, [open])
|
|
|
|
const handleSave = async () => {
|
|
if (!accessCodeRequired) return
|
|
|
|
setError("")
|
|
setIsVerifying(true)
|
|
|
|
try {
|
|
const response = await fetch("/api/verify-access-code", {
|
|
method: "POST",
|
|
headers: {
|
|
"x-access-code": accessCode.trim(),
|
|
},
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!data.valid) {
|
|
setError(data.message || "Invalid access code")
|
|
return
|
|
}
|
|
|
|
localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
|
|
onOpenChange(false)
|
|
} catch {
|
|
setError("Failed to verify access code")
|
|
} finally {
|
|
setIsVerifying(false)
|
|
}
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault()
|
|
handleSave()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Settings</DialogTitle>
|
|
<DialogDescription>
|
|
Configure your application settings.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-2">
|
|
{accessCodeRequired && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="access-code">Access Code</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="access-code"
|
|
type="password"
|
|
value={accessCode}
|
|
onChange={(e) =>
|
|
setAccessCode(e.target.value)
|
|
}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Enter access code"
|
|
autoComplete="off"
|
|
/>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={isVerifying || !accessCode.trim()}
|
|
>
|
|
{isVerifying ? "..." : "Save"}
|
|
</Button>
|
|
</div>
|
|
<p className="text-[0.8rem] text-muted-foreground">
|
|
Required to use this application.
|
|
</p>
|
|
{error && (
|
|
<p className="text-[0.8rem] text-destructive">
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<Label>AI Provider Settings</Label>
|
|
<p className="text-[0.8rem] text-muted-foreground">
|
|
Use your own API key to bypass usage limits. Your
|
|
key is stored locally in your browser and is never
|
|
stored on the server.
|
|
</p>
|
|
<div className="space-y-3 pt-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="ai-provider">Provider</Label>
|
|
<Select
|
|
value={provider || "default"}
|
|
onValueChange={(value) => {
|
|
const actualValue =
|
|
value === "default" ? "" : value
|
|
setProvider(actualValue)
|
|
localStorage.setItem(
|
|
STORAGE_AI_PROVIDER_KEY,
|
|
actualValue,
|
|
)
|
|
}}
|
|
>
|
|
<SelectTrigger id="ai-provider">
|
|
<SelectValue placeholder="Use Server Default" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">
|
|
Use Server Default
|
|
</SelectItem>
|
|
<SelectItem value="openai">
|
|
OpenAI
|
|
</SelectItem>
|
|
<SelectItem value="anthropic">
|
|
Anthropic
|
|
</SelectItem>
|
|
<SelectItem value="google">
|
|
Google
|
|
</SelectItem>
|
|
<SelectItem value="azure">
|
|
Azure OpenAI
|
|
</SelectItem>
|
|
<SelectItem value="openrouter">
|
|
OpenRouter
|
|
</SelectItem>
|
|
<SelectItem value="deepseek">
|
|
DeepSeek
|
|
</SelectItem>
|
|
<SelectItem value="siliconflow">
|
|
SiliconFlow
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{provider && provider !== "default" && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="ai-model">
|
|
Model ID
|
|
</Label>
|
|
<Input
|
|
id="ai-model"
|
|
value={modelId}
|
|
onChange={(e) => {
|
|
setModelId(e.target.value)
|
|
localStorage.setItem(
|
|
STORAGE_AI_MODEL_KEY,
|
|
e.target.value,
|
|
)
|
|
}}
|
|
placeholder={
|
|
provider === "openai"
|
|
? "e.g., gpt-4o"
|
|
: provider === "anthropic"
|
|
? "e.g., claude-sonnet-4-5"
|
|
: provider === "google"
|
|
? "e.g., gemini-2.0-flash-exp"
|
|
: provider ===
|
|
"deepseek"
|
|
? "e.g., deepseek-chat"
|
|
: "Model ID"
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="ai-api-key">
|
|
API Key
|
|
</Label>
|
|
<Input
|
|
id="ai-api-key"
|
|
type="password"
|
|
value={apiKey}
|
|
onChange={(e) => {
|
|
setApiKey(e.target.value)
|
|
localStorage.setItem(
|
|
STORAGE_AI_API_KEY_KEY,
|
|
e.target.value,
|
|
)
|
|
}}
|
|
placeholder="Your API key"
|
|
autoComplete="off"
|
|
/>
|
|
<p className="text-[0.8rem] text-muted-foreground">
|
|
Overrides{" "}
|
|
{provider === "openai"
|
|
? "OPENAI_API_KEY"
|
|
: provider === "anthropic"
|
|
? "ANTHROPIC_API_KEY"
|
|
: provider === "google"
|
|
? "GOOGLE_GENERATIVE_AI_API_KEY"
|
|
: provider === "azure"
|
|
? "AZURE_API_KEY"
|
|
: provider ===
|
|
"openrouter"
|
|
? "OPENROUTER_API_KEY"
|
|
: provider ===
|
|
"deepseek"
|
|
? "DEEPSEEK_API_KEY"
|
|
: provider ===
|
|
"siliconflow"
|
|
? "SILICONFLOW_API_KEY"
|
|
: "server API key"}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="ai-base-url">
|
|
Base URL (optional)
|
|
</Label>
|
|
<Input
|
|
id="ai-base-url"
|
|
value={baseUrl}
|
|
onChange={(e) => {
|
|
setBaseUrl(e.target.value)
|
|
localStorage.setItem(
|
|
STORAGE_AI_BASE_URL_KEY,
|
|
e.target.value,
|
|
)
|
|
}}
|
|
placeholder={
|
|
provider === "anthropic"
|
|
? "https://api.anthropic.com/v1"
|
|
: provider === "siliconflow"
|
|
? "https://api.siliconflow.com/v1"
|
|
: "Custom endpoint URL"
|
|
}
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
onClick={() => {
|
|
localStorage.removeItem(
|
|
STORAGE_AI_PROVIDER_KEY,
|
|
)
|
|
localStorage.removeItem(
|
|
STORAGE_AI_BASE_URL_KEY,
|
|
)
|
|
localStorage.removeItem(
|
|
STORAGE_AI_API_KEY_KEY,
|
|
)
|
|
localStorage.removeItem(
|
|
STORAGE_AI_MODEL_KEY,
|
|
)
|
|
setProvider("")
|
|
setBaseUrl("")
|
|
setApiKey("")
|
|
setModelId("")
|
|
}}
|
|
>
|
|
Clear Settings
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="close-protection">
|
|
Close Protection
|
|
</Label>
|
|
<p className="text-[0.8rem] text-muted-foreground">
|
|
Show confirmation when leaving the page.
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="close-protection"
|
|
checked={closeProtection}
|
|
onCheckedChange={(checked) => {
|
|
setCloseProtection(checked)
|
|
localStorage.setItem(
|
|
STORAGE_CLOSE_PROTECTION_KEY,
|
|
checked.toString(),
|
|
)
|
|
onCloseProtectionChange?.(checked)
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|