mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-01 17:10:24 +08:00
155ef4f7ac
* fix: raise the output budget so reasoning models reach the tool call A reasoning model spends the output budget in order: thinking first, then prose, then the tool call. With 16000 the thinking alone can consume all of it, so the turn ends with finishReason "length" before display_diagram is ever called. The canvas stays empty and nothing surfaces in the UI, because no tool call means no tool error, and the client never reads finishReason. Measured on openrouter deepseek/deepseek-v4-flash, the model from the report: - max_tokens=800 with reasoning on returns reasoning_tokens=800, empty content, finish_reason length. So reasoning is billed against this budget, not exempt. - refining an existing diagram (19k chars of XML in the input) produced 49142 chars of reasoning, zero tool calls, finishReason "length" at 16000 - the same request at 40000 finished and called edit_diagram with 12 operations 64000 cannot just be sent to every model: bedrock claude-3-haiku caps at 4096, nova-lite at 10000, and the openrouter deepseek-r1 endpoint counts input and output against one 64000 ceiling. All three name the real limit in the 400, so parse it and retry once. Verified: nova-lite logs "64000 rejected, retrying with 10000" and then completes its tool call. Also expose the budget in Settings. It is sent as a header rather than read from env only, so desktop users can raise it themselves without an env file. vercel.json goes back to the 300s it had before #238 traded it for $2-4/month. That is now Vercel's own default, and billing pauses while the function waits on the model, so the saving that motivated 120s no longer applies. edgeone.json is left alone: its 120 may be that platform's actual ceiling. * fix: only reinterpret an error as a budget rejection when it says so Review of the first commit found the retry could fire on errors that have nothing to do with the budget, which would replace a readable provider error with a truncated response: exactly the symptom this PR exists to remove. - Drop the generic "lower than N" pattern. For the Bedrock message it was dead code, since "model limit of N" matches first with the same number. Left live, it would read a number out of any message shaped like "must be lower than 2". - Skip errors whose status is not 400 or 422, so auth and rate-limit failures are never reinterpreted. - Require the parsed ceiling to be at least 1024. Below that a diagram cannot come out whole, so retrying would hide the error behind broken XML. - Validate MAX_OUTPUT_TOKENS from env the same way as the header, so a stray "-1" falls back instead of reaching the provider. Adds tests for the retry wrapper itself, which had none: it retries once with the named ceiling, leaves a 401 alone, does not retry when the ceiling is not smaller, propagates a second rejection, and preserves the other call options. Re-verified against the live APIs: bedrock nova-lite still logs "64000 rejected, retrying with 10000" and completes its tool call, and deepseek-v4-flash still finishes normally at 64000.
758 lines
31 KiB
TypeScript
758 lines
31 KiB
TypeScript
"use client"
|
|
|
|
import { ChevronRight, Github, Info, Moon, Sun, Tag } from "lucide-react"
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
|
import { Suspense, useCallback, useEffect, useState } from "react"
|
|
import { toast } from "sonner"
|
|
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"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { useDictionary } from "@/hooks/use-dictionary"
|
|
import { getApiEndpoint } from "@/lib/base-path"
|
|
import type { DrawioTheme } from "@/lib/drawio-themes"
|
|
import { i18n, type Locale } from "@/lib/i18n/config"
|
|
import { STORAGE_KEYS } from "@/lib/storage"
|
|
|
|
// Reusable setting item component for consistent layout
|
|
function SettingItem({
|
|
label,
|
|
description,
|
|
children,
|
|
}: {
|
|
label: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between py-4 first:pt-0 last:pb-0">
|
|
<div className="space-y-0.5 pr-4">
|
|
<Label className="text-sm font-medium">{label}</Label>
|
|
{description && (
|
|
<p className="text-xs text-muted-foreground max-w-[260px]">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="shrink-0">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const LANGUAGE_LABELS: Record<Locale, string> = {
|
|
en: "English",
|
|
zh: "中文",
|
|
ja: "日本語",
|
|
"zh-Hant": "繁體中文",
|
|
}
|
|
|
|
interface SettingsDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
drawioUi: DrawioTheme
|
|
onDrawioUiChange: (theme: DrawioTheme) => void
|
|
darkMode: boolean
|
|
onToggleDarkMode: () => void
|
|
minimalStyle?: boolean
|
|
onMinimalStyleChange?: (value: boolean) => void
|
|
vlmValidationEnabled?: boolean
|
|
onVlmValidationChange?: (value: boolean) => void
|
|
onOpenModelConfig?: () => void
|
|
customSystemMessage?: string
|
|
onCustomSystemMessageChange?: (value: string) => void
|
|
maxOutputTokens?: string
|
|
onMaxOutputTokensChange?: (value: string) => void
|
|
}
|
|
|
|
export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
|
|
const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
|
|
|
|
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"
|
|
}
|
|
|
|
function SettingsContent({
|
|
open,
|
|
onOpenChange,
|
|
drawioUi,
|
|
onDrawioUiChange,
|
|
darkMode,
|
|
onToggleDarkMode,
|
|
minimalStyle = false,
|
|
onMinimalStyleChange = () => {},
|
|
vlmValidationEnabled = false,
|
|
onVlmValidationChange = () => {},
|
|
onOpenModelConfig,
|
|
customSystemMessage = "",
|
|
onCustomSystemMessageChange = () => {},
|
|
maxOutputTokens = "",
|
|
onMaxOutputTokensChange = () => {},
|
|
}: SettingsDialogProps) {
|
|
const dict = useDictionary()
|
|
const router = useRouter()
|
|
const pathname = usePathname() || "/"
|
|
const search = useSearchParams()
|
|
const [accessCode, setAccessCode] = useState("")
|
|
const [isVerifying, setIsVerifying] = useState(false)
|
|
const [error, setError] = useState("")
|
|
const [accessCodeRequired, setAccessCodeRequired] = useState(
|
|
() => getStoredAccessCodeRequired() ?? false,
|
|
)
|
|
const [currentLang, setCurrentLang] = useState("en")
|
|
const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
|
|
|
|
// Panel visibility state
|
|
const [showRecentChats, setShowRecentChats] = useState(true)
|
|
const [showMyTemplates, setShowMyTemplates] = useState(true)
|
|
const [showQuickExamples, setShowQuickExamples] = useState(true)
|
|
|
|
const handlePanelToggle = useCallback(
|
|
(key: string, value: boolean, setter: (v: boolean) => void) => {
|
|
setter(value)
|
|
localStorage.setItem(key, String(value))
|
|
window.dispatchEvent(new CustomEvent("panelVisibilityChange"))
|
|
},
|
|
[],
|
|
)
|
|
|
|
// Proxy settings state (Electron only)
|
|
const [httpProxy, setHttpProxy] = useState("")
|
|
const [httpsProxy, setHttpsProxy] = useState("")
|
|
const [isApplyingProxy, setIsApplyingProxy] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Re-fetch config whenever the dialog opens to ensure we always show
|
|
// the access code input if the server requires it. This fixes the case
|
|
// where a stale localStorage cache (from before ACCESS_CODE_LIST was
|
|
// configured) would hide the access code input.
|
|
if (!open) return
|
|
|
|
fetch(getApiEndpoint("/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(() => {
|
|
// Keep existing cached value on error
|
|
})
|
|
}, [open])
|
|
|
|
// Detect current language from pathname
|
|
useEffect(() => {
|
|
const seg = pathname.split("/").filter(Boolean)
|
|
const first = seg[0]
|
|
if (first && i18n.locales.includes(first as Locale)) {
|
|
setCurrentLang(first)
|
|
} else {
|
|
setCurrentLang(i18n.defaultLocale)
|
|
}
|
|
}, [pathname])
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
const storedCode =
|
|
localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
|
|
setAccessCode(storedCode)
|
|
|
|
const storedSendShortcut = localStorage.getItem(
|
|
STORAGE_KEYS.sendShortcut,
|
|
)
|
|
setSendShortcut(storedSendShortcut || "ctrl-enter")
|
|
|
|
setShowRecentChats(
|
|
localStorage.getItem(STORAGE_KEYS.showRecentChats) !== "false",
|
|
)
|
|
setShowMyTemplates(
|
|
localStorage.getItem(STORAGE_KEYS.showMyTemplates) !== "false",
|
|
)
|
|
setShowQuickExamples(
|
|
localStorage.getItem(STORAGE_KEYS.showQuickExamples) !==
|
|
"false",
|
|
)
|
|
|
|
setError("")
|
|
|
|
// Load proxy settings (Electron only)
|
|
if (window.electronAPI?.getProxy) {
|
|
window.electronAPI.getProxy().then((config) => {
|
|
setHttpProxy(config.httpProxy || "")
|
|
setHttpsProxy(config.httpsProxy || "")
|
|
})
|
|
}
|
|
}
|
|
}, [open])
|
|
|
|
const changeLanguage = (lang: string) => {
|
|
// Save locale to localStorage for persistence across restarts
|
|
localStorage.setItem("next-ai-draw-io-locale", lang)
|
|
|
|
// Notify Electron main process to update its menu language
|
|
if (window.electronAPI?.setUserLocale) {
|
|
window.electronAPI.setUserLocale(lang).catch((error) => {
|
|
console.error("Failed to sync locale with Electron:", error)
|
|
})
|
|
}
|
|
|
|
const parts = pathname.split("/")
|
|
if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
|
|
parts[1] = lang
|
|
} else {
|
|
parts.splice(1, 0, lang)
|
|
}
|
|
const newPath = parts.join("/") || "/"
|
|
const searchStr = search?.toString() ? `?${search.toString()}` : ""
|
|
router.push(newPath + searchStr)
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
if (!accessCodeRequired) return
|
|
|
|
setError("")
|
|
setIsVerifying(true)
|
|
|
|
try {
|
|
const response = await fetch(
|
|
getApiEndpoint("/api/verify-access-code"),
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"x-access-code": accessCode.trim(),
|
|
},
|
|
},
|
|
)
|
|
|
|
const data = await response.json()
|
|
|
|
if (!data.valid) {
|
|
setError(data.message || dict.errors.invalidAccessCode)
|
|
return
|
|
}
|
|
|
|
localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
|
|
onOpenChange(false)
|
|
} catch {
|
|
setError(dict.errors.networkError)
|
|
} finally {
|
|
setIsVerifying(false)
|
|
}
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault()
|
|
handleSave()
|
|
}
|
|
}
|
|
|
|
const handleApplyProxy = async () => {
|
|
if (!window.electronAPI?.setProxy) return
|
|
|
|
// Validate proxy URLs (must start with http:// or https://)
|
|
const validateProxyUrl = (url: string): boolean => {
|
|
if (!url) return true // Empty is OK
|
|
return url.startsWith("http://") || url.startsWith("https://")
|
|
}
|
|
|
|
const trimmedHttp = httpProxy.trim()
|
|
const trimmedHttps = httpsProxy.trim()
|
|
|
|
if (trimmedHttp && !validateProxyUrl(trimmedHttp)) {
|
|
toast.error("HTTP Proxy must start with http:// or https://")
|
|
return
|
|
}
|
|
if (trimmedHttps && !validateProxyUrl(trimmedHttps)) {
|
|
toast.error("HTTPS Proxy must start with http:// or https://")
|
|
return
|
|
}
|
|
|
|
setIsApplyingProxy(true)
|
|
try {
|
|
const result = await window.electronAPI.setProxy({
|
|
httpProxy: trimmedHttp || undefined,
|
|
httpsProxy: trimmedHttps || undefined,
|
|
})
|
|
|
|
if (result.success) {
|
|
toast.success(dict.settings.proxyApplied)
|
|
} else {
|
|
toast.error(result.error || "Failed to apply proxy settings")
|
|
}
|
|
} catch {
|
|
toast.error("Failed to apply proxy settings")
|
|
} finally {
|
|
setIsApplyingProxy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<DialogContent className="sm:max-w-lg p-0 gap-0 max-h-[90vh] flex flex-col overflow-hidden">
|
|
{/* Header */}
|
|
<DialogHeader className="px-6 pt-6 pb-4">
|
|
<DialogTitle>{dict.settings.title}</DialogTitle>
|
|
<DialogDescription className="mt-1">
|
|
{dict.settings.description}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{/* Content */}
|
|
<div className="px-6 pb-6 overflow-y-auto flex-1 scrollbar-thin">
|
|
<div className="divide-y divide-border-subtle">
|
|
{/* API Keys & Models */}
|
|
{onOpenModelConfig && (
|
|
<SettingItem
|
|
label={dict.settings.apiKeysModels}
|
|
description={dict.settings.apiKeysModelsDescription}
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-9 w-9 p-0"
|
|
onClick={() => {
|
|
onOpenChange(false)
|
|
onOpenModelConfig()
|
|
}}
|
|
aria-label={dict.settings.apiKeysModels}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</SettingItem>
|
|
)}
|
|
|
|
{/* Access Code (conditional) */}
|
|
{accessCodeRequired && (
|
|
<div className="py-4 first:pt-0 space-y-3">
|
|
<div className="space-y-0.5">
|
|
<Label
|
|
htmlFor="access-code"
|
|
className="text-sm font-medium"
|
|
>
|
|
{dict.settings.accessCode}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{dict.settings.accessCodeDescription}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="access-code"
|
|
type="password"
|
|
value={accessCode}
|
|
onChange={(e) =>
|
|
setAccessCode(e.target.value)
|
|
}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={
|
|
dict.settings.accessCodePlaceholder
|
|
}
|
|
autoComplete="off"
|
|
className="h-9"
|
|
/>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={isVerifying || !accessCode.trim()}
|
|
className="h-9 px-4 rounded-xl"
|
|
>
|
|
{isVerifying ? "..." : dict.common.save}
|
|
</Button>
|
|
</div>
|
|
{error && (
|
|
<p className="text-xs text-destructive">
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Language */}
|
|
<SettingItem
|
|
label={dict.settings.language}
|
|
description={dict.settings.languageDescription}
|
|
>
|
|
<Select
|
|
value={currentLang}
|
|
onValueChange={changeLanguage}
|
|
>
|
|
<SelectTrigger
|
|
id="language-select"
|
|
className="w-[120px] h-9 rounded-xl"
|
|
>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{i18n.locales.map((locale) => (
|
|
<SelectItem key={locale} value={locale}>
|
|
{LANGUAGE_LABELS[locale]}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</SettingItem>
|
|
|
|
{/* Theme */}
|
|
<SettingItem
|
|
label={dict.settings.theme}
|
|
description={dict.settings.themeDescription}
|
|
>
|
|
<Button
|
|
id="theme-toggle"
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={onToggleDarkMode}
|
|
className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
|
|
>
|
|
{darkMode ? (
|
|
<Sun className="h-4 w-4" />
|
|
) : (
|
|
<Moon className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</SettingItem>
|
|
|
|
{/* Draw.io Style */}
|
|
<SettingItem
|
|
label={dict.settings.drawioStyle}
|
|
description={dict.settings.drawioStyleDescription}
|
|
>
|
|
<Select
|
|
value={drawioUi}
|
|
onValueChange={(v) =>
|
|
onDrawioUiChange(v as DrawioTheme)
|
|
}
|
|
>
|
|
<SelectTrigger
|
|
id="drawio-ui-select"
|
|
aria-label={dict.settings.drawioStyle}
|
|
className="w-[120px] h-9 rounded-xl"
|
|
>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="kennedy">
|
|
{dict.settings.themeDefault}
|
|
</SelectItem>
|
|
<SelectItem value="atlas">Atlas</SelectItem>
|
|
<SelectItem value="dark">
|
|
{dict.settings.themeDark}
|
|
</SelectItem>
|
|
<SelectItem value="min">
|
|
{dict.settings.themeMinimal}
|
|
</SelectItem>
|
|
<SelectItem value="sketch">
|
|
{dict.settings.themeSketch}
|
|
</SelectItem>
|
|
<SelectItem value="simple">
|
|
{dict.settings.themeSimple}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</SettingItem>
|
|
|
|
{/* Diagram Style */}
|
|
<SettingItem
|
|
label={dict.settings.diagramStyle}
|
|
description={dict.settings.diagramStyleDescription}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
id="minimal-style"
|
|
checked={minimalStyle}
|
|
onCheckedChange={onMinimalStyleChange}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{minimalStyle
|
|
? dict.chat.minimalStyle
|
|
: dict.chat.styledMode}
|
|
</span>
|
|
</div>
|
|
</SettingItem>
|
|
|
|
{/* Panel Visibility */}
|
|
<SettingItem
|
|
label={dict.settings.panelVisibility}
|
|
description={dict.settings.panelVisibilityDescription}
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<Switch
|
|
id="show-recent-chats"
|
|
checked={showRecentChats}
|
|
onCheckedChange={(v) =>
|
|
handlePanelToggle(
|
|
STORAGE_KEYS.showRecentChats,
|
|
v,
|
|
setShowRecentChats,
|
|
)
|
|
}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">
|
|
{dict.settings.showRecentChats}
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<Switch
|
|
id="show-my-templates"
|
|
checked={showMyTemplates}
|
|
onCheckedChange={(v) =>
|
|
handlePanelToggle(
|
|
STORAGE_KEYS.showMyTemplates,
|
|
v,
|
|
setShowMyTemplates,
|
|
)
|
|
}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">
|
|
{dict.settings.showMyTemplates}
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<Switch
|
|
id="show-quick-examples"
|
|
checked={showQuickExamples}
|
|
onCheckedChange={(v) =>
|
|
handlePanelToggle(
|
|
STORAGE_KEYS.showQuickExamples,
|
|
v,
|
|
setShowQuickExamples,
|
|
)
|
|
}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">
|
|
{dict.settings.showQuickExamples}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</SettingItem>
|
|
|
|
{/* VLM Diagram Validation */}
|
|
<SettingItem
|
|
label={dict.settings.diagramValidation}
|
|
description={dict.settings.diagramValidationDescription}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
id="vlm-validation"
|
|
checked={vlmValidationEnabled}
|
|
onCheckedChange={onVlmValidationChange}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{vlmValidationEnabled
|
|
? dict.settings.enabled
|
|
: dict.settings.disabled}
|
|
</span>
|
|
</div>
|
|
</SettingItem>
|
|
|
|
{/* Custom System Message */}
|
|
<div className="py-4 space-y-3">
|
|
<div className="space-y-0.5">
|
|
<Label
|
|
htmlFor="custom-system-message"
|
|
className="text-sm font-medium"
|
|
>
|
|
{dict.settings.customSystemMessage}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{dict.settings.customSystemMessageDescription}
|
|
</p>
|
|
</div>
|
|
<Textarea
|
|
id="custom-system-message"
|
|
value={customSystemMessage}
|
|
onChange={(e) =>
|
|
onCustomSystemMessageChange(e.target.value)
|
|
}
|
|
placeholder={
|
|
dict.settings.customSystemMessagePlaceholder
|
|
}
|
|
className="min-h-[80px] max-h-[160px] text-sm"
|
|
maxLength={5000}
|
|
/>
|
|
</div>
|
|
|
|
{/* Max Output Tokens */}
|
|
<SettingItem
|
|
label={dict.settings.maxOutputTokens}
|
|
description={dict.settings.maxOutputTokensDescription}
|
|
>
|
|
<Input
|
|
id="max-output-tokens"
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={maxOutputTokens}
|
|
onChange={(e) =>
|
|
onMaxOutputTokensChange(e.target.value)
|
|
}
|
|
placeholder="64000"
|
|
className="h-9 w-28 text-sm"
|
|
/>
|
|
</SettingItem>
|
|
|
|
{/* Send Shortcut */}
|
|
<SettingItem
|
|
label={dict.settings.sendShortcut}
|
|
description={dict.settings.sendShortcutDescription}
|
|
>
|
|
<Select
|
|
value={sendShortcut}
|
|
onValueChange={(value) => {
|
|
setSendShortcut(value)
|
|
localStorage.setItem(
|
|
STORAGE_KEYS.sendShortcut,
|
|
value,
|
|
)
|
|
window.dispatchEvent(
|
|
new CustomEvent("sendShortcutChange", {
|
|
detail: value,
|
|
}),
|
|
)
|
|
}}
|
|
>
|
|
<SelectTrigger
|
|
id="send-shortcut-select"
|
|
className="w-auto h-9 rounded-xl"
|
|
>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="enter">
|
|
{dict.settings.enterToSend}
|
|
</SelectItem>
|
|
<SelectItem value="ctrl-enter">
|
|
{dict.settings.ctrlEnterToSend}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</SettingItem>
|
|
|
|
{/* Proxy Settings - Electron only */}
|
|
{typeof window !== "undefined" &&
|
|
window.electronAPI?.isElectron && (
|
|
<div className="py-4 space-y-3">
|
|
<div className="space-y-0.5">
|
|
<Label className="text-sm font-medium">
|
|
{dict.settings.proxy}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{dict.settings.proxyDescription}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Input
|
|
id="http-proxy"
|
|
type="text"
|
|
value={httpProxy}
|
|
onChange={(e) =>
|
|
setHttpProxy(e.target.value)
|
|
}
|
|
placeholder={`${dict.settings.httpProxy}: http://proxy:8080`}
|
|
className="h-9"
|
|
/>
|
|
<Input
|
|
id="https-proxy"
|
|
type="text"
|
|
value={httpsProxy}
|
|
onChange={(e) =>
|
|
setHttpsProxy(e.target.value)
|
|
}
|
|
placeholder={`${dict.settings.httpsProxy}: http://proxy:8080`}
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleApplyProxy}
|
|
disabled={isApplyingProxy}
|
|
className="h-9 px-4 rounded-xl w-full"
|
|
>
|
|
{isApplyingProxy
|
|
? "..."
|
|
: dict.settings.applyProxy}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
|
|
<div className="flex items-center justify-center gap-3">
|
|
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
|
<Tag className="h-3 w-3" />
|
|
{process.env.APP_VERSION}
|
|
</span>
|
|
<span className="text-muted-foreground">·</span>
|
|
<a
|
|
href="https://github.com/DayuanJiang/next-ai-draw-io"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
|
>
|
|
<Github className="h-3 w-3" />
|
|
GitHub
|
|
</a>
|
|
{process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE ===
|
|
"true" && (
|
|
<>
|
|
<span className="text-muted-foreground">·</span>
|
|
<a
|
|
href={`/${currentLang}/about${currentLang === "zh" ? "/cn" : currentLang === "ja" ? "/ja" : ""}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
|
|
>
|
|
<Info className="h-3 w-3" />
|
|
{dict.nav.about}
|
|
</a>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
)
|
|
}
|
|
|
|
export function SettingsDialog(props: SettingsDialogProps) {
|
|
return (
|
|
<Dialog open={props.open} onOpenChange={props.onOpenChange}>
|
|
<Suspense
|
|
fallback={
|
|
<DialogContent className="sm:max-w-lg p-0">
|
|
<div className="h-80 flex items-center justify-center">
|
|
<div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
|
|
</div>
|
|
</DialogContent>
|
|
}
|
|
>
|
|
<SettingsContent {...props} />
|
|
</Suspense>
|
|
</Dialog>
|
|
)
|
|
}
|