fix: OpenAI reasoning/thinking blocks not showing

- Use Responses API instead of Chat Completions API for OpenAI
  (.chat() -> default call) to support reasoning events
- Add o4 to reasoning model detection
- Change default reasoningSummary from 'detailed' to 'auto'
  (not all models support 'detailed')
- Update types to match AI SDK: 'auto' | 'detailed'

.github/workflows/docker-build.yml

@@ -63,6 +63,8 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           platforms: linux/amd64,linux/arm64
+          build-args: |
+            NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=true
 
       # Push to AWS ECR for App Runner auto-deploy
       - name: Configure AWS credentials

Dockerfile

@@ -26,6 +26,10 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ARG NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net
 ENV NEXT_PUBLIC_DRAWIO_BASE_URL=${NEXT_PUBLIC_DRAWIO_BASE_URL}
 
+# Build-time argument to show About link and Notice icon
+ARG NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=false
+ENV NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=${NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE}
+
 # Build Next.js application (standalone mode)
 RUN npm run build
 

app/[lang]/about/cn/page.tsx

@@ -117,9 +117,9 @@ export default function AboutCN() {
                                     (TPS/TPM)。一旦超限，系统就会暂停，导致请求失败。
                                 </p>
                                 <p>
-                                    由于使用量过高，我已将模型从 Claude 更换为{" "}
+                                    由于使用量过高，我已将模型从 Opus 4.5 更换为{" "}
                                     <span className="font-semibold text-amber-700">
-                                        minimax-m2
+                                        Haiku 4.5
                                     </span>
                                     ，以降低成本。
                                 </p>

app/[lang]/about/ja/page.tsx

@@ -126,9 +126,9 @@ export default function AboutJA() {
                                 </p>
                                 <p>
                                     利用量の増加に伴い、コスト削減のためモデルを
-                                    Claude から{" "}
+                                    Opus 4.5 から{" "}
                                     <span className="font-semibold text-amber-700">
-                                        minimax-m2
+                                        Haiku 4.5
                                     </span>{" "}
                                     に変更しました。
                                 </p>

app/[lang]/about/page.tsx

@@ -129,9 +129,9 @@ export default function About() {
                                 </p>
                                 <p>
                                     Due to the high usage, I have changed the
-                                    model from Claude to{" "}
+                                    model from Opus 4.5 to{" "}
                                     <span className="font-semibold text-amber-700">
-                                        minimax-m2
+                                        Haiku 4.5
                                     </span>
                                     , which is more cost-effective.
                                 </p>

app/api/validate-model/route.ts

@@ -11,6 +11,66 @@ import { createOllama } from "ollama-ai-provider-v2"
 
 export const runtime = "nodejs"
 
+/**
+ * SECURITY: Check if URL points to private/internal network (SSRF protection)
+ * Blocks: localhost, private IPs, link-local, AWS metadata service
+ */
+function isPrivateUrl(urlString: string): boolean {
+    try {
+        const url = new URL(urlString)
+        const hostname = url.hostname.toLowerCase()
+
+        // Block localhost
+        if (
+            hostname === "localhost" ||
+            hostname === "127.0.0.1" ||
+            hostname === "::1"
+        ) {
+            return true
+        }
+
+        // Block AWS/cloud metadata endpoints
+        if (
+            hostname === "169.254.169.254" ||
+            hostname === "metadata.google.internal"
+        ) {
+            return true
+        }
+
+        // Check for private IPv4 ranges
+        const ipv4Match = hostname.match(
+            /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/,
+        )
+        if (ipv4Match) {
+            const [, a, b] = ipv4Match.map(Number)
+            // 10.0.0.0/8
+            if (a === 10) return true
+            // 172.16.0.0/12
+            if (a === 172 && b >= 16 && b <= 31) return true
+            // 192.168.0.0/16
+            if (a === 192 && b === 168) return true
+            // 169.254.0.0/16 (link-local)
+            if (a === 169 && b === 254) return true
+            // 127.0.0.0/8 (loopback)
+            if (a === 127) return true
+        }
+
+        // Block common internal hostnames
+        if (
+            hostname.endsWith(".local") ||
+            hostname.endsWith(".internal") ||
+            hostname.endsWith(".localhost")
+        ) {
+            return true
+        }
+
+        return false
+    } catch {
+        // Invalid URL - block it
+        return true
+    }
+}
+
 interface ValidateRequest {
     provider: string
     apiKey: string
@@ -42,6 +102,14 @@ export async function POST(req: Request) {
             )
         }
 
+        // SECURITY: Block SSRF attacks via custom baseUrl
+        if (baseUrl && isPrivateUrl(baseUrl)) {
+            return NextResponse.json(
+                { valid: false, error: "Invalid base URL" },
+                { status: 400 },
+            )
+        }
+
         // Validate credentials based on provider
         if (provider === "bedrock") {
             if (!awsAccessKeyId || !awsSecretAccessKey || !awsRegion) {

app/manifest.ts

@@ -1,24 +1,24 @@
 import type { MetadataRoute } from "next"
-
+import { getAssetUrl } from "@/lib/base-path"
 export default function manifest(): MetadataRoute.Manifest {
     return {
         name: "Next AI Draw.io",
         short_name: "AIDraw.io",
         description:
             "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
-        start_url: "/",
+        start_url: getAssetUrl("/"),
         display: "standalone",
         background_color: "#f9fafb",
         theme_color: "#171d26",
         icons: [
             {
-                src: "/favicon-192x192.png",
+                src: getAssetUrl("/favicon-192x192.png"),
                 sizes: "192x192",
                 type: "image/png",
                 purpose: "any",
             },
             {
-                src: "/favicon-512x512.png",
+                src: getAssetUrl("/favicon-512x512.png"),
                 sizes: "512x512",
                 type: "image/png",
                 purpose: "any",

components/chat-example-panel.tsx

@@ -9,6 +9,7 @@ import {
     Zap,
 } from "lucide-react"
 import { useDictionary } from "@/hooks/use-dictionary"
+import { getAssetUrl } from "@/lib/base-path"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -79,7 +80,7 @@ export default function ExamplePanel({
         setInput("Replicate this flowchart.")
 
         try {
-            const response = await fetch("/example.png")
+            const response = await fetch(getAssetUrl("/example.png"))
             const blob = await response.blob()
             const file = new File([blob], "example.png", { type: "image/png" })
             setFiles([file])
@@ -92,7 +93,7 @@ export default function ExamplePanel({
         setInput("Replicate this in aws style")
 
         try {
-            const response = await fetch("/architecture.png")
+            const response = await fetch(getAssetUrl("/architecture.png"))
             const blob = await response.blob()
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
@@ -107,7 +108,7 @@ export default function ExamplePanel({
         setInput("Summarize this paper as a diagram")
 
         try {
-            const response = await fetch("/chain-of-thought.txt")
+            const response = await fetch(getAssetUrl("/chain-of-thought.txt"))
             const blob = await response.blob()
             const file = new File([blob], "chain-of-thought.txt", {
                 type: "text/plain",

components/chat-message-display.tsx

@@ -27,6 +27,7 @@ import {
     ReasoningTrigger,
 } from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { getApiEndpoint } from "@/lib/base-path"
 import {
     applyDiagramOperations,
     convertToLegalXml,
@@ -291,7 +292,7 @@ export function ChatMessageDisplay({
         setFeedback((prev) => ({ ...prev, [messageId]: value }))
 
         try {
-            await fetch("/api/log-feedback", {
+            await fetch(getApiEndpoint("/api/log-feedback"), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({

components/chat-panel.tsx

@@ -21,16 +21,21 @@ import { ChatInput } from "@/components/chat-input"
 import { ModelConfigDialog } from "@/components/model-config-dialog"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
 import { SettingsDialog } from "@/components/settings-dialog"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
+import { getApiEndpoint } from "@/lib/base-path"
 import { findCachedResponse } from "@/lib/cached-responses"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
 import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
-import LanguageToggle from "./language-toggle"
 
 // localStorage keys for persistence
 const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
@@ -168,7 +173,7 @@ export default function ChatPanel({
 
     // Check config on mount
     useEffect(() => {
-        fetch("/api/config")
+        fetch(getApiEndpoint("/api/config"))
             .then((res) => res.json())
             .then((data) => {
                 setDailyRequestLimit(data.dailyRequestLimit || 0)
@@ -239,7 +244,7 @@ export default function ChatPanel({
         setMessages,
     } = useChat({
         transport: new DefaultChatTransport({
-            api: "/api/chat",
+            api: getApiEndpoint("/api/chat"),
         }),
         async onToolCall({ toolCall }) {
             if (DEBUG) {
@@ -1264,32 +1269,18 @@ Continue from EXACTLY where you stopped.`,
                                 Next AI Drawio
                             </h1>
                         </div>
-                        {!isMobile && (
-                            <Link
-                                href="/about"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-sm text-muted-foreground hover:text-foreground transition-colors ml-2"
-                            >
-                                About
-                            </Link>
-                        )}
-                        {!isMobile && (
-                            <Link
-                                href="/about"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <ButtonWithTooltip
-                                    tooltipContent="Due to high usage, I have changed the model to minimax-m2 and added some usage limits. See About page for details."
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-6 w-6 text-amber-500 hover:text-amber-600"
+                        {!isMobile &&
+                            process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE ===
+                                "true" && (
+                                <Link
+                                    href="/about"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-sm text-muted-foreground hover:text-foreground transition-colors ml-2"
                                 >
-                                    <AlertTriangle className="h-4 w-4" />
-                                </ButtonWithTooltip>
-                            </Link>
-                        )}
+                                    About
+                                </Link>
+                            )}
                     </div>
                     <div className="flex items-center gap-1 justify-end overflow-visible">
                         <ButtonWithTooltip
@@ -1304,16 +1295,23 @@ Continue from EXACTLY where you stopped.`,
                             />
                         </ButtonWithTooltip>
                         <div className="w-px h-5 bg-border mx-1" />
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-                        >
-                            <FaGithub
-                                className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`}
-                            />
-                        </a>
+
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <a
+                                    href="https://github.com/DayuanJiang/next-ai-draw-io"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center justify-center h-9 w-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                                >
+                                    <FaGithub
+                                        className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`}
+                                    />
+                                </a>
+                            </TooltipTrigger>
+                            <TooltipContent>{dict.nav.github}</TooltipContent>
+                        </Tooltip>
+
                         <ButtonWithTooltip
                             tooltipContent={dict.nav.settings}
                             variant="ghost"
@@ -1326,7 +1324,6 @@ Continue from EXACTLY where you stopped.`,
                             />
                         </ButtonWithTooltip>
                         <div className="hidden sm:flex items-center gap-2">
-                            <LanguageToggle />
                             {!isMobile && (
                                 <ButtonWithTooltip
                                     tooltipContent={dict.nav.hidePanel}

components/language-toggle.tsx

@@ -1,108 +0,0 @@
-"use client"
-
-import { Globe } from "lucide-react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { Suspense, useEffect, useRef, useState } from "react"
-import { i18n, type Locale } from "@/lib/i18n/config"
-
-const LABELS: Record<string, string> = {
-    en: "EN",
-    zh: "中文",
-    ja: "日本語",
-}
-
-function LanguageToggleInner({ className = "" }: { className?: string }) {
-    const router = useRouter()
-    const pathname = usePathname() || "/"
-    const search = useSearchParams()
-    const [open, setOpen] = useState(false)
-    const [value, setValue] = useState<Locale>(i18n.defaultLocale)
-    const ref = useRef<HTMLDivElement | null>(null)
-
-    useEffect(() => {
-        const seg = pathname.split("/").filter(Boolean)
-        const first = seg[0]
-        if (first && i18n.locales.includes(first as Locale))
-            setValue(first as Locale)
-        else setValue(i18n.defaultLocale)
-    }, [pathname])
-
-    useEffect(() => {
-        function onDoc(e: MouseEvent) {
-            if (!ref.current) return
-            if (!ref.current.contains(e.target as Node)) setOpen(false)
-        }
-        if (open) document.addEventListener("mousedown", onDoc)
-        return () => document.removeEventListener("mousedown", onDoc)
-    }, [open])
-
-    const changeLocale = (lang: string) => {
-        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()}` : ""
-        setOpen(false)
-        router.push(newPath + searchStr)
-    }
-
-    return (
-        <div className={`relative inline-flex ${className}`} ref={ref}>
-            <button
-                aria-haspopup="menu"
-                aria-expanded={open}
-                onClick={() => setOpen((s) => !s)}
-                className="p-2 rounded-full hover:bg-accent/20 transition-colors text-muted-foreground"
-                aria-label="Change language"
-            >
-                <Globe className="w-5 h-5" />
-            </button>
-            {open && (
-                <div className="absolute right-0 top-full mt-2 w-40 bg-popover dark:bg-popover text-popover-foreground rounded-xl shadow-md border border-border/30 overflow-hidden z-50">
-                    <div className="grid gap-0 divide-y divide-border/30">
-                        {i18n.locales.map((loc) => (
-                            <button
-                                key={loc}
-                                onClick={() => changeLocale(loc)}
-                                className={`flex items-center gap-2 px-4 py-2 text-sm w-full text-left hover:bg-accent/10 transition-colors ${value === loc ? "bg-accent/10 font-semibold" : ""}`}
-                            >
-                                <span className="flex-1">
-                                    {LABELS[loc] ?? loc}
-                                </span>
-                                {value === loc && (
-                                    <span className="text-xs opacity-70">
-                                        ✓
-                                    </span>
-                                )}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default function LanguageToggle({
-    className = "",
-}: {
-    className?: string
-}) {
-    return (
-        <Suspense
-            fallback={
-                <button
-                    className="p-2 rounded-full text-muted-foreground opacity-50"
-                    disabled
-                >
-                    <Globe className="w-5 h-5" />
-                </button>
-            }
-        >
-            <LanguageToggleInner className={className} />
-        </Suspense>
-    )
-}

components/model-config-dialog.tsx

@@ -52,6 +52,7 @@ import {
 } from "@/components/ui/select"
 import { useDictionary } from "@/hooks/use-dictionary"
 import type { UseModelConfigReturn } from "@/hooks/use-model-config"
+import { formatMessage } from "@/lib/i18n/utils"
 import type { ProviderConfig, ProviderName } from "@/lib/types/model-config"
 import { PROVIDER_INFO, SUGGESTED_MODELS } from "@/lib/types/model-config"
 import { cn } from "@/lib/utils"
@@ -107,10 +108,12 @@ function ValidationButton({
     status,
     onClick,
     disabled,
+    dict,
 }: {
     status: ValidationStatus
     onClick: () => void
     disabled: boolean
+    dict: ReturnType<typeof useDictionary>
 }) {
     return (
         <Button
@@ -129,10 +132,10 @@ function ValidationButton({
             ) : status === "success" ? (
                 <>
                     <Check className="h-4 w-4 mr-1.5" />
-                    Verified
+                    {dict.modelConfig.verified}
                 </>
             ) : (
-                "Test"
+                dict.modelConfig.test
             )}
         </Button>
     )
@@ -406,7 +409,7 @@ export function ModelConfigDialog({
                     <div className="w-56 flex-shrink-0 flex flex-col border-r bg-muted/20">
                         <div className="px-4 py-3 border-b">
                             <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                                Providers
+                                {dict.modelConfig.providers}
                             </span>
                         </div>
 
@@ -418,7 +421,7 @@ export function ModelConfigDialog({
                                             <Plus className="h-5 w-5 text-muted-foreground" />
                                         </div>
                                         <p className="text-xs text-muted-foreground">
-                                            Add a provider to get started
+                                            {dict.modelConfig.addProviderHint}
                                         </p>
                                     </div>
                                 ) : (
@@ -484,7 +487,11 @@ export function ModelConfigDialog({
                             >
                                 <SelectTrigger className="h-9 bg-background hover:bg-accent">
                                     <Plus className="h-4 w-4 mr-2 text-muted-foreground" />
-                                    <SelectValue placeholder="Add Provider" />
+                                    <SelectValue
+                                        placeholder={
+                                            dict.modelConfig.addProvider
+                                        }
+                                    />
                                 </SelectTrigger>
                                 <SelectContent>
                                     {availableProviders.map((p) => (
@@ -552,15 +559,27 @@ export function ModelConfigDialog({
                                                 <p className="text-xs text-muted-foreground">
                                                     {selectedProvider.models
                                                         .length === 0
-                                                        ? "No models configured"
-                                                        : `${selectedProvider.models.length} model${selectedProvider.models.length > 1 ? "s" : ""} configured`}
+                                                        ? dict.modelConfig
+                                                              .noModelsConfigured
+                                                        : formatMessage(
+                                                              dict.modelConfig
+                                                                  .modelsConfiguredCount,
+                                                              {
+                                                                  count: selectedProvider
+                                                                      .models
+                                                                      .length,
+                                                              },
+                                                          )}
                                                 </p>
                                             </div>
                                             {selectedProvider.validated && (
                                                 <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                                                     <Check className="h-3.5 w-3.5" />
                                                     <span className="text-xs font-medium">
-                                                        Verified
+                                                        {
+                                                            dict.modelConfig
+                                                                .verified
+                                                        }
                                                     </span>
                                                 </div>
                                             )}
@@ -570,7 +589,12 @@ export function ModelConfigDialog({
                                         <div className="space-y-4">
                                             <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                                                 <Settings2 className="h-4 w-4" />
-                                                <span>Configuration</span>
+                                                <span>
+                                                    {
+                                                        dict.modelConfig
+                                                            .configuration
+                                                    }
+                                                </span>
                                             </div>
 
                                             <div className="rounded-xl border bg-card p-4 space-y-4">
@@ -581,7 +605,10 @@ export function ModelConfigDialog({
                                                         className="text-xs font-medium flex items-center gap-1.5"
                                                     >
                                                         <Tag className="h-3.5 w-3.5 text-muted-foreground" />
-                                                        Display Name
+                                                        {
+                                                            dict.modelConfig
+                                                                .displayName
+                                                        }
                                                     </Label>
                                                     <Input
                                                         id="provider-name"
@@ -616,8 +643,11 @@ export function ModelConfigDialog({
                                                                 className="text-xs font-medium flex items-center gap-1.5"
                                                             >
                                                                 <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                AWS Access Key
-                                                                ID
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .awsAccessKeyId
+                                                                }
                                                             </Label>
                                                             <Input
                                                                 id="aws-access-key-id"
@@ -649,8 +679,11 @@ export function ModelConfigDialog({
                                                                 className="text-xs font-medium flex items-center gap-1.5"
                                                             >
                                                                 <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                AWS Secret
-                                                                Access Key
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .awsSecretAccessKey
+                                                                }
                                                             </Label>
                                                             <div className="relative">
                                                                 <Input
@@ -674,7 +707,11 @@ export function ModelConfigDialog({
                                                                                 .value,
                                                                         )
                                                                     }
-                                                                    placeholder="Enter your secret access key"
+                                                                    placeholder={
+                                                                        dict
+                                                                            .modelConfig
+                                                                            .enterSecretKey
+                                                                    }
                                                                     className="h-9 pr-10 font-mono text-xs"
                                                                 />
                                                                 <button
@@ -707,7 +744,11 @@ export function ModelConfigDialog({
                                                                 className="text-xs font-medium flex items-center gap-1.5"
                                                             >
                                                                 <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                AWS Region
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .awsRegion
+                                                                }
                                                             </Label>
                                                             <Select
                                                                 value={
@@ -724,7 +765,13 @@ export function ModelConfigDialog({
                                                                 }
                                                             >
                                                                 <SelectTrigger className="h-9 font-mono text-xs hover:bg-accent">
-                                                                    <SelectValue placeholder="Select region" />
+                                                                    <SelectValue
+                                                                        placeholder={
+                                                                            dict
+                                                                                .modelConfig
+                                                                                .selectRegion
+                                                                        }
+                                                                    />
                                                                 </SelectTrigger>
                                                                 <SelectContent className="max-h-64">
                                                                     <SelectItem value="us-east-1">
@@ -819,10 +866,16 @@ export function ModelConfigDialog({
                                                                   "success" ? (
                                                                     <>
                                                                         <Check className="h-4 w-4 mr-1.5" />
-                                                                        Verified
+                                                                        {
+                                                                            dict
+                                                                                .modelConfig
+                                                                                .verified
+                                                                        }
                                                                     </>
                                                                 ) : (
-                                                                    "Test"
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .test
                                                                 )}
                                                             </Button>
                                                             {validationStatus ===
@@ -846,7 +899,11 @@ export function ModelConfigDialog({
                                                                 className="text-xs font-medium flex items-center gap-1.5"
                                                             >
                                                                 <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                API Key
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .apiKey
+                                                                }
                                                             </Label>
                                                             <div className="flex gap-2">
                                                                 <div className="relative flex-1">
@@ -870,7 +927,11 @@ export function ModelConfigDialog({
                                                                                     .value,
                                                                             )
                                                                         }
-                                                                        placeholder="Enter your API key"
+                                                                        placeholder={
+                                                                            dict
+                                                                                .modelConfig
+                                                                                .enterApiKey
+                                                                        }
                                                                         className="h-9 pr-10 font-mono text-xs"
                                                                     />
                                                                     <button
@@ -924,10 +985,16 @@ export function ModelConfigDialog({
                                                                       "success" ? (
                                                                         <>
                                                                             <Check className="h-4 w-4 mr-1.5" />
-                                                                            Verified
+                                                                            {
+                                                                                dict
+                                                                                    .modelConfig
+                                                                                    .verified
+                                                                            }
                                                                         </>
                                                                     ) : (
-                                                                        "Test"
+                                                                        dict
+                                                                            .modelConfig
+                                                                            .test
                                                                     )}
                                                                 </Button>
                                                             </div>
@@ -950,9 +1017,17 @@ export function ModelConfigDialog({
                                                                 className="text-xs font-medium flex items-center gap-1.5"
                                                             >
                                                                 <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                Base URL
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .baseUrl
+                                                                }
                                                                 <span className="text-muted-foreground font-normal">
-                                                                    (optional)
+                                                                    {
+                                                                        dict
+                                                                            .modelConfig
+                                                                            .optional
+                                                                    }
                                                                 </span>
                                                             </Label>
                                                             <Input
@@ -974,7 +1049,9 @@ export function ModelConfigDialog({
                                                                             .provider
                                                                     ]
                                                                         .defaultBaseUrl ||
-                                                                    "Custom endpoint URL"
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .customEndpoint
                                                                 }
                                                                 className="h-9 font-mono text-xs"
                                                             />
@@ -989,12 +1066,20 @@ export function ModelConfigDialog({
                                             <div className="flex items-center justify-between">
                                                 <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                                                     <Sparkles className="h-4 w-4" />
-                                                    <span>Models</span>
+                                                    <span>
+                                                        {
+                                                            dict.modelConfig
+                                                                .models
+                                                        }
+                                                    </span>
                                                 </div>
                                                 <div className="flex items-center gap-2">
                                                     <div className="relative">
                                                         <Input
-                                                            placeholder="Custom model ID..."
+                                                            placeholder={
+                                                                dict.modelConfig
+                                                                    .customModelId
+                                                            }
                                                             value={
                                                                 customModelInput
                                                             }
@@ -1088,8 +1173,12 @@ export function ModelConfigDialog({
                                                             <span className="text-xs">
                                                                 {availableSuggestions.length ===
                                                                 0
-                                                                    ? "All added"
-                                                                    : "Suggested"}
+                                                                    ? dict
+                                                                          .modelConfig
+                                                                          .allAdded
+                                                                    : dict
+                                                                          .modelConfig
+                                                                          .suggested}
                                                             </span>
                                                         </SelectTrigger>
                                                         <SelectContent className="max-h-72">
@@ -1124,7 +1213,10 @@ export function ModelConfigDialog({
                                                             <Sparkles className="h-5 w-5 text-muted-foreground" />
                                                         </div>
                                                         <p className="text-sm text-muted-foreground">
-                                                            No models configured
+                                                            {
+                                                                dict.modelConfig
+                                                                    .noModelsConfigured
+                                                            }
                                                         </p>
                                                     </div>
                                                 ) : (
@@ -1291,7 +1383,9 @@ export function ModelConfigDialog({
                                                                                     !newModelId
                                                                                 ) {
                                                                                     showError(
-                                                                                        "Model ID cannot be empty",
+                                                                                        dict
+                                                                                            .modelConfig
+                                                                                            .modelIdEmpty,
                                                                                     )
                                                                                     return
                                                                                 }
@@ -1319,7 +1413,9 @@ export function ModelConfigDialog({
                                                                                     )
                                                                                 ) {
                                                                                     showError(
-                                                                                        "This model ID already exists",
+                                                                                        dict
+                                                                                            .modelConfig
+                                                                                            .modelIdExists,
                                                                                     )
                                                                                     return
                                                                                 }
@@ -1383,7 +1479,10 @@ export function ModelConfigDialog({
                                                 className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                                             >
                                                 <Trash2 className="h-4 w-4 mr-2" />
-                                                Delete Provider
+                                                {
+                                                    dict.modelConfig
+                                                        .deleteProvider
+                                                }
                                             </Button>
                                         </div>
                                     </div>
@@ -1395,11 +1494,10 @@ export function ModelConfigDialog({
                                     <Server className="h-8 w-8 text-primary/60" />
                                 </div>
                                 <h3 className="font-semibold mb-1">
-                                    Configure AI Providers
+                                    {dict.modelConfig.configureProviders}
                                 </h3>
                                 <p className="text-sm text-muted-foreground max-w-xs">
-                                    Select a provider from the list or add a new
-                                    one to configure API keys and models
+                                    {dict.modelConfig.selectProviderHint}
                                 </p>
                             </div>
                         )}
@@ -1410,7 +1508,7 @@ export function ModelConfigDialog({
                 <div className="px-6 py-3 border-t bg-muted/20">
                     <p className="text-xs text-muted-foreground text-center flex items-center justify-center gap-1.5">
                         <Key className="h-3 w-3" />
-                        API keys are stored locally in your browser
+                        {dict.modelConfig.apiKeyStored}
                     </p>
                 </div>
             </DialogContent>
@@ -1429,19 +1527,16 @@ export function ModelConfigDialog({
                             <AlertCircle className="h-6 w-6 text-destructive" />
                         </div>
                         <AlertDialogTitle className="text-center">
-                            Delete Provider
+                            {dict.modelConfig.deleteProvider}
                         </AlertDialogTitle>
                         <AlertDialogDescription className="text-center">
-                            Are you sure you want to delete{" "}
-                            <span className="font-medium text-foreground">
-                                {selectedProvider
+                            {formatMessage(dict.modelConfig.deleteConfirmDesc, {
+                                name: selectedProvider
                                     ? selectedProvider.name ||
                                       PROVIDER_INFO[selectedProvider.provider]
                                           .label
-                                    : "this provider"}
-                            </span>
-                            ? This will remove all configured models and cannot
-                            be undone.
+                                    : "this provider",
+                            })}
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     {selectedProvider &&
@@ -1451,11 +1546,16 @@ export function ModelConfigDialog({
                                     htmlFor="delete-confirm"
                                     className="text-sm text-muted-foreground"
                                 >
-                                    Type &quot;
-                                    {selectedProvider.name ||
-                                        PROVIDER_INFO[selectedProvider.provider]
-                                            .label}
-                                    &quot; to confirm
+                                    {formatMessage(
+                                        dict.modelConfig.typeToConfirm,
+                                        {
+                                            name:
+                                                selectedProvider.name ||
+                                                PROVIDER_INFO[
+                                                    selectedProvider.provider
+                                                ].label,
+                                        },
+                                    )}
                                 </Label>
                                 <Input
                                     id="delete-confirm"
@@ -1463,13 +1563,17 @@ export function ModelConfigDialog({
                                     onChange={(e) =>
                                         setDeleteConfirmText(e.target.value)
                                     }
-                                    placeholder="Type provider name..."
+                                    placeholder={
+                                        dict.modelConfig.typeProviderName
+                                    }
                                     className="h-9"
                                 />
                             </div>
                         )}
                     <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogCancel>
+                            {dict.modelConfig.cancel}
+                        </AlertDialogCancel>
                         <AlertDialogAction
                             onClick={handleDeleteProvider}
                             disabled={
@@ -1482,7 +1586,7 @@ export function ModelConfigDialog({
                             }
                             className="bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50"
                         >
-                            Delete
+                            {dict.modelConfig.delete}
                         </AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>

components/model-selector.tsx

@@ -16,6 +16,7 @@ import {
     ModelSelectorTrigger,
 } from "@/components/ai-elements/model-selector"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
+import { useDictionary } from "@/hooks/use-dictionary"
 import type { FlattenedModel } from "@/lib/types/model-config"
 import { cn } from "@/lib/utils"
 
@@ -67,6 +68,7 @@ export function ModelSelector({
     onConfigure,
     disabled = false,
 }: ModelSelectorProps) {
+    const dict = useDictionary()
     const [open, setOpen] = useState(false)
     // Only show validated models in the selector
     const validatedModels = useMemo(
@@ -96,8 +98,8 @@ export function ModelSelector({
     }
 
     const tooltipContent = selectedModel
-        ? `${selectedModel.modelId} (click to change)`
-        : "Using server default model (click to change)"
+        ? `${selectedModel.modelId} ${dict.modelConfig.clickToChange}`
+        : `${dict.modelConfig.usingServerDefault} ${dict.modelConfig.clickToChange}`
 
     return (
         <ModelSelectorRoot open={open} onOpenChange={setOpen}>
@@ -111,22 +113,26 @@ export function ModelSelector({
                 >
                     <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
                     <span className="text-xs truncate">
-                        {selectedModel ? selectedModel.modelId : "Default"}
+                        {selectedModel
+                            ? selectedModel.modelId
+                            : dict.modelConfig.default}
                     </span>
                     <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
                 </ButtonWithTooltip>
             </ModelSelectorTrigger>
-            <ModelSelectorContent title="Select Model">
-                <ModelSelectorInput placeholder="Search models..." />
+            <ModelSelectorContent title={dict.modelConfig.selectModel}>
+                <ModelSelectorInput
+                    placeholder={dict.modelConfig.searchModels}
+                />
                 <ModelSelectorList>
                     <ModelSelectorEmpty>
                         {validatedModels.length === 0 && models.length > 0
-                            ? "No verified models. Test your models first."
-                            : "No models found."}
+                            ? dict.modelConfig.noVerifiedModels
+                            : dict.modelConfig.noModelsFound}
                     </ModelSelectorEmpty>
 
                     {/* Server Default Option */}
-                    <ModelSelectorGroup heading="Default">
+                    <ModelSelectorGroup heading={dict.modelConfig.default}>
                         <ModelSelectorItem
                             value="__server_default__"
                             onSelect={handleSelect}
@@ -145,7 +151,7 @@ export function ModelSelector({
                             />
                             <Server className="mr-2 h-4 w-4 text-muted-foreground" />
                             <ModelSelectorName>
-                                Server Default
+                                {dict.modelConfig.serverDefault}
                             </ModelSelectorName>
                         </ModelSelectorItem>
                     </ModelSelectorGroup>
@@ -201,13 +207,13 @@ export function ModelSelector({
                         >
                             <Settings2 className="mr-2 h-4 w-4" />
                             <ModelSelectorName>
-                                Configure Models...
+                                {dict.modelConfig.configureModels}
                             </ModelSelectorName>
                         </ModelSelectorItem>
                     </ModelSelectorGroup>
                     {/* Info text */}
                     <div className="px-3 py-2 text-xs text-muted-foreground border-t">
-                        Only verified models are shown
+                        {dict.modelConfig.onlyVerifiedShown}
                     </div>
                 </ModelSelectorList>
             </ModelSelectorContent>

components/settings-dialog.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import { Moon, Sun } from "lucide-react"
-import { useEffect, useState } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -12,8 +13,23 @@ import {
 } 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 { useDictionary } from "@/hooks/use-dictionary"
+import { getApiEndpoint } from "@/lib/base-path"
+import { i18n, type Locale } from "@/lib/i18n/config"
+
+const LANGUAGE_LABELS: Record<Locale, string> = {
+    en: "English",
+    zh: "中文",
+    ja: "日本語",
+}
 
 interface SettingsDialogProps {
     open: boolean
@@ -36,7 +52,7 @@ function getStoredAccessCodeRequired(): boolean | null {
     return stored === "true"
 }
 
-export function SettingsDialog({
+function SettingsContent({
     open,
     onOpenChange,
     onCloseProtectionChange,
@@ -46,6 +62,9 @@ export function SettingsDialog({
     onToggleDarkMode,
 }: SettingsDialogProps) {
     const dict = useDictionary()
+    const router = useRouter()
+    const pathname = usePathname() || "/"
+    const search = useSearchParams()
     const [accessCode, setAccessCode] = useState("")
     const [closeProtection, setCloseProtection] = useState(true)
     const [isVerifying, setIsVerifying] = useState(false)
@@ -53,12 +72,13 @@ export function SettingsDialog({
     const [accessCodeRequired, setAccessCodeRequired] = useState(
         () => getStoredAccessCodeRequired() ?? false,
     )
+    const [currentLang, setCurrentLang] = useState("en")
 
     useEffect(() => {
         // Only fetch if not cached in localStorage
         if (getStoredAccessCodeRequired() !== null) return
 
-        fetch("/api/config")
+        fetch(getApiEndpoint("/api/config"))
             .then((res) => {
                 if (!res.ok) throw new Error(`HTTP ${res.status}`)
                 return res.json()
@@ -77,6 +97,17 @@ export function SettingsDialog({
             })
     }, [])
 
+    // 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 =
@@ -93,6 +124,18 @@ export function SettingsDialog({
         }
     }, [open])
 
+    const changeLanguage = (lang: string) => {
+        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
 
@@ -100,12 +143,15 @@ export function SettingsDialog({
         setIsVerifying(true)
 
         try {
-            const response = await fetch("/api/verify-access-code", {
-                method: "POST",
-                headers: {
-                    "x-access-code": accessCode.trim(),
+            const response = await fetch(
+                getApiEndpoint("/api/verify-access-code"),
+                {
+                    method: "POST",
+                    headers: {
+                        "x-access-code": accessCode.trim(),
+                    },
                 },
-            })
+            )
 
             const data = await response.json()
 
@@ -131,128 +177,166 @@ export function SettingsDialog({
     }
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
-                <DialogHeader>
-                    <DialogTitle>{dict.settings.title}</DialogTitle>
-                    <DialogDescription>
-                        {dict.settings.description}
-                    </DialogDescription>
-                </DialogHeader>
-                <div className="space-y-4 py-2">
-                    {accessCodeRequired && (
-                        <div className="space-y-2">
-                            <Label htmlFor="access-code">
-                                {dict.settings.accessCode}
-                            </Label>
-                            <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"
-                                />
-                                <Button
-                                    onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
-                                >
-                                    {isVerifying ? "..." : dict.common.save}
-                                </Button>
-                            </div>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.accessCodeDescription}
-                            </p>
-                            {error && (
-                                <p className="text-[0.8rem] text-destructive">
-                                    {error}
-                                </p>
-                            )}
+        <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+                <DialogTitle>{dict.settings.title}</DialogTitle>
+                <DialogDescription>
+                    {dict.settings.description}
+                </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-2">
+                {accessCodeRequired && (
+                    <div className="space-y-2">
+                        <Label htmlFor="access-code">
+                            {dict.settings.accessCode}
+                        </Label>
+                        <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"
+                            />
+                            <Button
+                                onClick={handleSave}
+                                disabled={isVerifying || !accessCode.trim()}
+                            >
+                                {isVerifying ? "..." : dict.common.save}
+                            </Button>
                         </div>
-                    )}
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label htmlFor="theme-toggle">
-                                {dict.settings.theme}
-                            </Label>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.themeDescription}
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.accessCodeDescription}
+                        </p>
+                        {error && (
+                            <p className="text-[0.8rem] text-destructive">
+                                {error}
                             </p>
-                        </div>
-                        <Button
-                            id="theme-toggle"
-                            variant="outline"
-                            size="icon"
-                            onClick={onToggleDarkMode}
-                        >
-                            {darkMode ? (
-                                <Sun className="h-4 w-4" />
-                            ) : (
-                                <Moon className="h-4 w-4" />
-                            )}
-                        </Button>
+                        )}
                     </div>
+                )}
 
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label htmlFor="drawio-ui">
-                                {dict.settings.drawioStyle}
-                            </Label>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.drawioStyleDescription}{" "}
-                                {drawioUi === "min"
-                                    ? dict.settings.minimal
-                                    : dict.settings.sketch}
-                            </p>
-                        </div>
-                        <Button
-                            id="drawio-ui"
-                            variant="outline"
-                            size="sm"
-                            onClick={onToggleDrawioUi}
-                        >
-                            {dict.settings.switchTo}{" "}
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label htmlFor="language-select">
+                            {dict.settings.language}
+                        </Label>
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.languageDescription}
+                        </p>
+                    </div>
+                    <Select value={currentLang} onValueChange={changeLanguage}>
+                        <SelectTrigger id="language-select" className="w-32">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {i18n.locales.map((locale) => (
+                                <SelectItem key={locale} value={locale}>
+                                    {LANGUAGE_LABELS[locale]}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label htmlFor="theme-toggle">
+                            {dict.settings.theme}
+                        </Label>
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.themeDescription}
+                        </p>
+                    </div>
+                    <Button
+                        id="theme-toggle"
+                        variant="outline"
+                        size="icon"
+                        onClick={onToggleDarkMode}
+                    >
+                        {darkMode ? (
+                            <Sun className="h-4 w-4" />
+                        ) : (
+                            <Moon className="h-4 w-4" />
+                        )}
+                    </Button>
+                </div>
+
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label htmlFor="drawio-ui">
+                            {dict.settings.drawioStyle}
+                        </Label>
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.drawioStyleDescription}{" "}
                             {drawioUi === "min"
-                                ? dict.settings.sketch
-                                : dict.settings.minimal}
-                        </Button>
+                                ? dict.settings.minimal
+                                : dict.settings.sketch}
+                        </p>
                     </div>
+                    <Button
+                        id="drawio-ui"
+                        variant="outline"
+                        size="sm"
+                        onClick={onToggleDrawioUi}
+                    >
+                        {dict.settings.switchTo}{" "}
+                        {drawioUi === "min"
+                            ? dict.settings.sketch
+                            : dict.settings.minimal}
+                    </Button>
+                </div>
 
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label htmlFor="close-protection">
-                                {dict.settings.closeProtection}
-                            </Label>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.closeProtectionDescription}
-                            </p>
-                        </div>
-                        <Switch
-                            id="close-protection"
-                            checked={closeProtection}
-                            onCheckedChange={(checked) => {
-                                setCloseProtection(checked)
-                                localStorage.setItem(
-                                    STORAGE_CLOSE_PROTECTION_KEY,
-                                    checked.toString(),
-                                )
-                                onCloseProtectionChange?.(checked)
-                            }}
-                        />
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label htmlFor="close-protection">
+                            {dict.settings.closeProtection}
+                        </Label>
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.closeProtectionDescription}
+                        </p>
                     </div>
+                    <Switch
+                        id="close-protection"
+                        checked={closeProtection}
+                        onCheckedChange={(checked) => {
+                            setCloseProtection(checked)
+                            localStorage.setItem(
+                                STORAGE_CLOSE_PROTECTION_KEY,
+                                checked.toString(),
+                            )
+                            onCloseProtectionChange?.(checked)
+                        }}
+                    />
                 </div>
-                <div className="pt-4 border-t border-border/50">
-                    <p className="text-[0.75rem] text-muted-foreground text-center">
-                        Version {process.env.APP_VERSION}
-                    </p>
-                </div>
-            </DialogContent>
+            </div>
+            <div className="pt-4 border-t border-border/50">
+                <p className="text-[0.75rem] text-muted-foreground text-center">
+                    Version {process.env.APP_VERSION}
+                </p>
+            </div>
+        </DialogContent>
+    )
+}
+
+export function SettingsDialog(props: SettingsDialogProps) {
+    return (
+        <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+            <Suspense
+                fallback={
+                    <DialogContent className="sm:max-w-md">
+                        <div className="h-64 flex items-center justify-center">
+                            <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+                        </div>
+                    </DialogContent>
+                }
+            >
+                <SettingsContent {...props} />
+            </Suspense>
         </Dialog>
     )
 }

contexts/diagram-context.tsx

@@ -5,6 +5,7 @@ import { createContext, useContext, useEffect, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
+import { getApiEndpoint } from "@/lib/base-path"
 import { extractDiagramXML, validateAndFixXml } from "../lib/utils"
 
 interface DiagramContextType {
@@ -329,7 +330,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         sessionId?: string,
     ) => {
         try {
-            await fetch("/api/log-save", {
+            await fetch(getApiEndpoint("/api/log-save"), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ filename, format, sessionId }),

docker-compose.yml

@@ -7,6 +7,11 @@ services:
       context: .
       args:
         - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
+        # Uncomment below for subdirectory deployment
+        # - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
     ports: ["3000:3000"]
     env_file: .env
+    environment:
+      # For subdirectory deployment, uncomment and set your path:
+      # NEXT_PUBLIC_BASE_PATH: /nextaidrawio
     depends_on: [drawio]

env.example

@@ -68,6 +68,10 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SILICONFLOW_API_KEY=sk-...
 # SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # Optional: switch to https://api.siliconflow.cn/v1 if needed
 
+# SGLang Configuration (OpenAI-compatible)
+# SGLANG_API_KEY=your-sglang-api-key
+# SGLANG_BASE_URL=http://127.0.0.1:8000/v1  # Your SGLang endpoint
+
 # Vercel AI Gateway Configuration
 # Get your API key from: https://vercel.com/ai-gateway
 # Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
@@ -93,6 +97,12 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net  # Default: https://embed.diagrams.net
 # Use this to point to a self-hosted draw.io instance
 
+# Subdirectory Deployment (Optional)
+# For deploying to a subdirectory (e.g., https://example.com/nextaidrawio)
+# Set this to your subdirectory path with leading slash (e.g., /nextaidrawio)
+# Leave empty for root deployment (default)
+# NEXT_PUBLIC_BASE_PATH=/nextaidrawio
+
 # PDF Input Feature (Optional)
 # Enable PDF file upload to extract text and generate diagrams
 # Enabled by default. Set to "false" to disable.

instrumentation.ts

@@ -19,10 +19,13 @@ export function register() {
             const spanName = otelSpan.name
             // Skip Next.js HTTP infrastructure spans
             if (
-                spanName.startsWith("POST /") ||
-                spanName.startsWith("GET /") ||
+                spanName.startsWith("POST") ||
+                spanName.startsWith("GET") ||
+                spanName.startsWith("RSC") ||
                 spanName.includes("BaseServer") ||
-                spanName.includes("handleRequest")
+                spanName.includes("handleRequest") ||
+                spanName.includes("resolve page") ||
+                spanName.includes("start response")
             ) {
                 return false
             }
@@ -36,4 +39,5 @@ export function register() {
 
     // Register globally so AI SDK's telemetry also uses this processor
     tracerProvider.register()
+    console.log("[Langfuse] Instrumentation initialized successfully")
 }

lib/ai-providers.ts

@@ -19,6 +19,7 @@ export type ProviderName =
     | "openrouter"
     | "deepseek"
     | "siliconflow"
+    | "sglang"
     | "gateway"
 
 interface ModelConfig {
@@ -50,6 +51,7 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
     "openrouter",
     "deepseek",
     "siliconflow",
+    "sglang",
     "gateway",
 ]
 
@@ -93,8 +95,8 @@ function parseIntSafe(
  * Supports various AI SDK providers with their unique configuration options
  *
  * Environment variables:
- * - OPENAI_REASONING_EFFORT: OpenAI reasoning effort level (minimal/low/medium/high) - for o1/o3/gpt-5
- * - OPENAI_REASONING_SUMMARY: OpenAI reasoning summary (none/brief/detailed) - auto-enabled for o1/o3/gpt-5
+ * - OPENAI_REASONING_EFFORT: OpenAI reasoning effort level (minimal/low/medium/high) - for o1/o3/o4/gpt-5
+ * - OPENAI_REASONING_SUMMARY: OpenAI reasoning summary (auto/detailed) - auto-enabled for o1/o3/o4/gpt-5
  * - ANTHROPIC_THINKING_BUDGET_TOKENS: Anthropic thinking budget in tokens (1024-64000)
  * - ANTHROPIC_THINKING_TYPE: Anthropic thinking type (enabled)
  * - GOOGLE_THINKING_BUDGET: Google Gemini 2.5 thinking budget in tokens (1024-100000)
@@ -116,18 +118,19 @@ function buildProviderOptions(
             const reasoningEffort = process.env.OPENAI_REASONING_EFFORT
             const reasoningSummary = process.env.OPENAI_REASONING_SUMMARY
 
-            // OpenAI reasoning models (o1, o3, gpt-5) need reasoningSummary to return thoughts
+            // OpenAI reasoning models (o1, o3, o4, gpt-5) need reasoningSummary to return thoughts
             if (
                 modelId &&
                 (modelId.includes("o1") ||
                     modelId.includes("o3") ||
+                    modelId.includes("o4") ||
                     modelId.includes("gpt-5"))
             ) {
                 options.openai = {
-                    // Auto-enable reasoning summary for reasoning models (default: detailed)
+                    // Auto-enable reasoning summary for reasoning models
+                    // Use 'auto' as default since not all models support 'detailed'
                     reasoningSummary:
-                        (reasoningSummary as "none" | "brief" | "detailed") ||
-                        "detailed",
+                        (reasoningSummary as "auto" | "detailed") || "auto",
                 }
 
                 // Optionally configure reasoning effort
@@ -150,8 +153,7 @@ function buildProviderOptions(
                 }
                 if (reasoningSummary) {
                     options.openai.reasoningSummary = reasoningSummary as
-                        | "none"
-                        | "brief"
+                        | "auto"
                         | "detailed"
                 }
             }
@@ -343,6 +345,7 @@ function buildProviderOptions(
         case "deepseek":
         case "openrouter":
         case "siliconflow":
+        case "sglang":
         case "gateway": {
             // These providers don't have reasoning configs in AI SDK yet
             // Gateway passes through to underlying providers which handle their own configs
@@ -367,6 +370,7 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
     openrouter: "OPENROUTER_API_KEY",
     deepseek: "DEEPSEEK_API_KEY",
     siliconflow: "SILICONFLOW_API_KEY",
+    sglang: "SGLANG_API_KEY",
     gateway: "AI_GATEWAY_API_KEY",
 }
 
@@ -432,7 +436,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  * Get the AI model based on environment variables
  *
  * Environment variables:
- * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
+ * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway)
  * - AI_MODEL: The model ID/name for the selected provider
  *
  * Provider-specific env vars:
@@ -448,6 +452,8 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
  * - SILICONFLOW_API_KEY: SiliconFlow API key
  * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
+ * - SGLANG_API_KEY: SGLang API key
+ * - SGLANG_BASE_URL: SGLang endpoint (optional)
  */
 export function getAIModel(overrides?: ClientOverrides): ModelConfig {
     // SECURITY: Prevent SSRF attacks (GHSA-9qf7-mprq-9qgm)
@@ -516,6 +522,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
                         `- OPENROUTER_API_KEY for OpenRouter\n` +
                         `- AZURE_API_KEY for Azure\n` +
                         `- SILICONFLOW_API_KEY for SiliconFlow\n` +
+                        `- SGLANG_API_KEY for SGLang\n` +
                         `Or set AI_PROVIDER=ollama for local Ollama.`,
                 )
             } else {
@@ -586,7 +593,9 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
                     apiKey,
                     ...(baseURL && { baseURL }),
                 })
-                model = customOpenAI.chat(modelId)
+                // Use Responses API (default) instead of .chat() to support reasoning
+                // for gpt-5, o1, o3, o4 models. Chat Completions API does not emit reasoning events.
+                model = customOpenAI(modelId)
             } else {
                 model = openai(modelId)
             }
@@ -698,6 +707,112 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             break
         }
 
+        case "sglang": {
+            const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
+            const baseURL = overrides?.baseUrl || process.env.SGLANG_BASE_URL
+
+            const sglangProvider = createOpenAI({
+                apiKey,
+                baseURL,
+                // Add a custom fetch wrapper to intercept and fix the stream from sglang
+                fetch: async (url, options) => {
+                    const response = await fetch(url, options)
+                    if (!response.body) {
+                        return response
+                    }
+
+                    // Create a transform stream to fix the non-compliant sglang stream
+                    let buffer = ""
+                    const decoder = new TextDecoder()
+
+                    const transformStream = new TransformStream({
+                        transform(chunk, controller) {
+                            buffer += decoder.decode(chunk, { stream: true })
+                            // Process all complete messages in the buffer
+                            let messageEndPos
+                            while (
+                                (messageEndPos = buffer.indexOf("\n\n")) !== -1
+                            ) {
+                                const message = buffer.substring(
+                                    0,
+                                    messageEndPos,
+                                )
+                                buffer = buffer.substring(messageEndPos + 2) // Move past the '\n\n'
+
+                                if (message.startsWith("data: ")) {
+                                    const jsonStr = message.substring(6).trim()
+                                    if (jsonStr === "[DONE]") {
+                                        controller.enqueue(
+                                            new TextEncoder().encode(
+                                                message + "\n\n",
+                                            ),
+                                        )
+                                        continue
+                                    }
+                                    try {
+                                        const data = JSON.parse(jsonStr)
+                                        const delta = data.choices?.[0]?.delta
+
+                                        if (delta) {
+                                            // Fix 1: remove invalid empty role
+                                            if (delta.role === "") {
+                                                delete delta.role
+                                            }
+                                            // Fix 2: remove non-standard reasoning_content field
+                                            if ("reasoning_content" in delta) {
+                                                delete delta.reasoning_content
+                                            }
+                                        }
+
+                                        // Re-serialize and forward the corrected data with the correct SSE format
+                                        controller.enqueue(
+                                            new TextEncoder().encode(
+                                                `data: ${JSON.stringify(data)}\n\n`,
+                                            ),
+                                        )
+                                    } catch (e) {
+                                        // If parsing fails, forward the original message to avoid breaking the stream.
+                                        controller.enqueue(
+                                            new TextEncoder().encode(
+                                                message + "\n\n",
+                                            ),
+                                        )
+                                    }
+                                } else if (message.trim() !== "") {
+                                    // Pass through other message types (e.g., 'event: ...')
+                                    controller.enqueue(
+                                        new TextEncoder().encode(
+                                            message + "\n\n",
+                                        ),
+                                    )
+                                }
+                            }
+                        },
+                        flush(controller) {
+                            // If there's anything left in the buffer, forward it.
+                            if (buffer.trim()) {
+                                controller.enqueue(
+                                    new TextEncoder().encode(buffer),
+                                )
+                            }
+                        },
+                    })
+
+                    const transformedBody =
+                        response.body.pipeThrough(transformStream)
+
+                    // Return a new response with the transformed body
+                    return new Response(transformedBody, {
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                    })
+                },
+            })
+            model = sglangProvider.chat(modelId)
+            break
+        }
+
         case "gateway": {
             // Vercel AI Gateway - unified access to multiple AI providers
             // Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
@@ -721,7 +836,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         default:
             throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway`,
             )
     }
 

lib/base-path.ts

@@ -0,0 +1,37 @@
+/**
+ * Get the base path for API calls and static assets
+ * This is used for subdirectory deployment support
+ *
+ * Example: If deployed at https://example.com/nextaidrawio, this returns "/nextaidrawio"
+ * For root deployment, this returns ""
+ *
+ * Set NEXT_PUBLIC_BASE_PATH environment variable to your subdirectory path (e.g., /nextaidrawio)
+ */
+export function getBasePath(): string {
+    // Read from environment variable (must start with NEXT_PUBLIC_ to be available on client)
+    const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+    if (basePath && !basePath.startsWith("/")) {
+        console.warn("NEXT_PUBLIC_BASE_PATH should start with /")
+    }
+    return basePath
+}
+
+/**
+ * Get full API endpoint URL
+ * @param endpoint - API endpoint path (e.g., "/api/chat", "/api/config")
+ * @returns Full API path with base path prefix
+ */
+export function getApiEndpoint(endpoint: string): string {
+    const basePath = getBasePath()
+    return `${basePath}${endpoint}`
+}
+
+/**
+ * Get full static asset URL
+ * @param assetPath - Asset path (e.g., "/example.png", "/chain-of-thought.txt")
+ * @returns Full asset path with base path prefix
+ */
+export function getAssetUrl(assetPath: string): string {
+    const basePath = getBasePath()
+    return `${basePath}${assetPath}`
+}

lib/i18n/dictionaries/en.json

@@ -14,6 +14,7 @@
         "about": "About",
         "editor": "Editor",
         "newChat": "Start fresh chat",
+        "github": "GitHub",
         "settings": "Settings",
         "hidePanel": "Hide chat panel (Ctrl+B)",
         "showPanel": "Show chat panel (Ctrl+B)",
@@ -87,6 +88,8 @@
         "overrides": "Overrides",
         "clearSettings": "Clear Settings",
         "useServerDefault": "Use Server Default",
+        "language": "Language",
+        "languageDescription": "Choose your interface language.",
         "theme": "Theme",
         "themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
         "drawioStyle": "DrawIO Style",
@@ -147,6 +150,7 @@
         "tokenLimit": "Daily Token Limit Reached",
         "tpmLimit": "Rate Limit",
         "tpmMessage": "Too many requests. Please wait a moment.",
+        "tpmMessageDetailed": "Rate limit reached ({limit} tokens/min). Please wait {seconds} seconds before sending another request.",
         "messageApi": "Oops — you've reached the daily API limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
         "messageToken": "Oops — you've reached the daily token limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
         "tip": "<strong>Tip:</strong> You can use your own API key (click the Settings icon) or self-host the project to bypass these limits.",
@@ -198,6 +202,47 @@
         "apiKeyStored": "API keys are stored locally in your browser",
         "test": "Test",
         "validationError": "Validation failed",
-        "addModelFirst": "Add at least one model to validate"
+        "addModelFirst": "Add at least one model to validate",
+        "providers": "Providers",
+        "addProviderHint": "Add a provider to get started",
+        "verified": "Verified",
+        "configuration": "Configuration",
+        "displayName": "Display Name",
+        "awsAccessKeyId": "AWS Access Key ID",
+        "awsSecretAccessKey": "AWS Secret Access Key",
+        "awsRegion": "AWS Region",
+        "selectRegion": "Select region",
+        "apiKey": "API Key",
+        "enterApiKey": "Enter your API key",
+        "enterSecretKey": "Enter your secret access key",
+        "baseUrl": "Base URL",
+        "optional": "(optional)",
+        "customEndpoint": "Custom endpoint URL",
+        "models": "Models",
+        "customModelId": "Custom model ID...",
+        "allAdded": "All added",
+        "suggested": "Suggested",
+        "noModelsConfigured": "No models configured",
+        "modelIdEmpty": "Model ID cannot be empty",
+        "modelIdExists": "This model ID already exists",
+        "configureProviders": "Configure AI Providers",
+        "selectProviderHint": "Select a provider from the list or add a new one to configure API keys and models",
+        "deleteConfirmDesc": "Are you sure you want to delete {name}? This will remove all configured models and cannot be undone.",
+        "typeToConfirm": "Type \"{name}\" to confirm",
+        "typeProviderName": "Type provider name...",
+        "modelsConfiguredCount": "{count} model(s) configured",
+        "validationFailedCount": "{count} model(s) failed validation",
+        "cancel": "Cancel",
+        "delete": "Delete",
+        "clickToChange": "(click to change)",
+        "usingServerDefault": "Using server default model",
+        "selectModel": "Select Model",
+        "searchModels": "Search models...",
+        "noVerifiedModels": "No verified models. Test your models first.",
+        "noModelsFound": "No models found.",
+        "default": "Default",
+        "serverDefault": "Server Default",
+        "configureModels": "Configure Models...",
+        "onlyVerifiedShown": "Only verified models are shown"
     }
 }

lib/i18n/dictionaries/ja.json

@@ -14,6 +14,7 @@
         "about": "概要",
         "editor": "エディタ",
         "newChat": "新しいチャットを開始",
+        "github": "GitHub",
         "settings": "設定",
         "hidePanel": "チャットパネルを非表示 (Ctrl+B)",
         "showPanel": "チャットパネルを表示 (Ctrl+B)",
@@ -87,6 +88,8 @@
         "overrides": "上書き",
         "clearSettings": "設定をクリア",
         "useServerDefault": "サーバーデフォルトを使用",
+        "language": "言語",
+        "languageDescription": "インターフェース言語を選択します。",
         "theme": "テーマ",
         "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
         "drawioStyle": "DrawIO スタイル",
@@ -147,6 +150,7 @@
         "tokenLimit": "1日のトークン制限に達しました",
         "tpmLimit": "レート制限",
         "tpmMessage": "リクエストが多すぎます。しばらくお待ちください。",
+        "tpmMessageDetailed": "レート制限に達しました（{limit}トークン/分）。{seconds}秒待ってからもう一度リクエストしてください。",
         "messageApi": "おっと — このデモの1日の API 制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
         "messageToken": "おっと — このデモの1日のトークン制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
         "tip": "<strong>ヒント：</strong>独自の API キーを使用する（設定アイコンをクリック）か、プロジェクトをセルフホストしてこれらの制限を回避できます。",
@@ -198,6 +202,47 @@
         "apiKeyStored": "APIキーはブラウザにローカル保存されます",
         "test": "テスト",
         "validationError": "検証に失敗しました",
-        "addModelFirst": "検証するには少なくとも1つのモデルを追加してください"
+        "addModelFirst": "検証するには少なくとも1つのモデルを追加してください",
+        "providers": "プロバイダー",
+        "addProviderHint": "プロバイダーを追加して開始",
+        "verified": "検証済み",
+        "configuration": "設定",
+        "displayName": "表示名",
+        "awsAccessKeyId": "AWS アクセスキー ID",
+        "awsSecretAccessKey": "AWS シークレットアクセスキー",
+        "awsRegion": "AWS リージョン",
+        "selectRegion": "リージョンを選択",
+        "apiKey": "API キー",
+        "enterApiKey": "API キーを入力",
+        "enterSecretKey": "シークレットアクセスキーを入力",
+        "baseUrl": "ベース URL",
+        "optional": "（オプション）",
+        "customEndpoint": "カスタムエンドポイント URL",
+        "models": "モデル",
+        "customModelId": "カスタムモデル ID...",
+        "allAdded": "すべて追加済み",
+        "suggested": "おすすめ",
+        "noModelsConfigured": "モデルが設定されていません",
+        "modelIdEmpty": "モデル ID は空にできません",
+        "modelIdExists": "このモデル ID は既に存在します",
+        "configureProviders": "AI プロバイダーを設定",
+        "selectProviderHint": "リストからプロバイダーを選択するか、新規追加して API キーとモデルを設定",
+        "deleteConfirmDesc": "{name} を削除してもよろしいですか？設定されたすべてのモデルが削除され、元に戻せません。",
+        "typeToConfirm": "確認のため「{name}」と入力",
+        "typeProviderName": "プロバイダー名を入力...",
+        "modelsConfiguredCount": "{count} 個のモデルを設定済み",
+        "validationFailedCount": "{count} 個のモデルの検証に失敗",
+        "cancel": "キャンセル",
+        "delete": "削除",
+        "clickToChange": "（クリックして変更）",
+        "usingServerDefault": "サーバーデフォルトモデルを使用中",
+        "selectModel": "モデルを選択",
+        "searchModels": "モデルを検索...",
+        "noVerifiedModels": "検証済みのモデルがありません。先にモデルをテストしてください。",
+        "noModelsFound": "モデルが見つかりません。",
+        "default": "デフォルト",
+        "serverDefault": "サーバーデフォルト",
+        "configureModels": "モデルを設定...",
+        "onlyVerifiedShown": "検証済みのモデルのみ表示"
     }
 }

lib/i18n/dictionaries/zh.json

@@ -14,6 +14,7 @@
         "about": "关于",
         "editor": "编辑器",
         "newChat": "开始新对话",
+        "github": "GitHub",
         "settings": "设置",
         "hidePanel": "隐藏聊天面板 (Ctrl+B)",
         "showPanel": "显示聊天面板 (Ctrl+B)",
@@ -87,6 +88,8 @@
         "overrides": "覆盖",
         "clearSettings": "清除设置",
         "useServerDefault": "使用服务器默认值",
+        "language": "语言",
+        "languageDescription": "选择界面语言。",
         "theme": "主题",
         "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
         "drawioStyle": "DrawIO 样式",
@@ -147,6 +150,7 @@
         "tokenLimit": "已达每日令牌限制",
         "tpmLimit": "速率限制",
         "tpmMessage": "请求过多。请稍等片刻。",
+        "tpmMessageDetailed": "达到速率限制（{limit} 令牌/分钟）。请等待 {seconds} 秒后再发送请求。",
         "messageApi": "糟糕 — 您已达到此演示的每日 API 限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
         "messageToken": "糟糕 — 您已达到此演示的每日令牌限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
         "tip": "<strong>提示：</strong>您可以使用自己的 API 密钥（点击设置图标）或自托管项目来绕过这些限制。",
@@ -198,6 +202,47 @@
         "apiKeyStored": "API 密钥存储在您的浏览器本地",
         "test": "测试",
         "validationError": "验证失败",
-        "addModelFirst": "请先添加至少一个模型以进行验证"
+        "addModelFirst": "请先添加至少一个模型以进行验证",
+        "providers": "提供商",
+        "addProviderHint": "添加提供商即可开始使用",
+        "verified": "已验证",
+        "configuration": "配置",
+        "displayName": "显示名称",
+        "awsAccessKeyId": "AWS 访问密钥 ID",
+        "awsSecretAccessKey": "AWS Secret Access Key",
+        "awsRegion": "AWS 区域",
+        "selectRegion": "选择区域",
+        "apiKey": "API 密钥",
+        "enterApiKey": "输入您的 API 密钥",
+        "enterSecretKey": "输入您的 Secret Key",
+        "baseUrl": "基础 URL",
+        "optional": "（可选）",
+        "customEndpoint": "自定义端点 URL",
+        "models": "模型",
+        "customModelId": "自定义模型 ID...",
+        "allAdded": "已全部添加",
+        "suggested": "推荐",
+        "noModelsConfigured": "尚未配置模型",
+        "modelIdEmpty": "模型 ID 不能为空",
+        "modelIdExists": "此模型 ID 已存在",
+        "configureProviders": "配置 AI 提供商",
+        "selectProviderHint": "从列表中选择提供商或添加新的以配置 API 密钥和模型",
+        "deleteConfirmDesc": "确定要删除 {name} 吗？这将移除所有配置的模型且无法撤销。",
+        "typeToConfirm": "输入 \"{name}\" 以确认",
+        "typeProviderName": "输入提供商名称...",
+        "modelsConfiguredCount": "已配置 {count} 个模型",
+        "validationFailedCount": "{count} 个模型验证失败",
+        "cancel": "取消",
+        "delete": "删除",
+        "clickToChange": "（点击更改）",
+        "usingServerDefault": "使用服务器默认模型",
+        "selectModel": "选择模型",
+        "searchModels": "搜索模型...",
+        "noVerifiedModels": "没有已验证的模型。请先测试您的模型。",
+        "noModelsFound": "未找到模型。",
+        "default": "默认",
+        "serverDefault": "服务器默认",
+        "configureModels": "配置模型...",
+        "onlyVerifiedShown": "仅显示已验证的模型"
     }
 }

lib/use-quota-manager.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useMemo } from "react"
 import { toast } from "sonner"
 import { QuotaLimitToast } from "@/components/quota-limit-toast"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
 import { STORAGE_KEYS } from "@/lib/storage"
 
 export interface QuotaConfig {
@@ -40,6 +42,8 @@ export function useQuotaManager(config: QuotaConfig): {
 } {
     const { dailyRequestLimit, dailyTokenLimit, tpmLimit } = config
 
+    const dict = useDictionary()
+
     // Check if user has their own API key configured (bypass limits)
     const hasOwnApiKey = useCallback((): boolean => {
         const provider = localStorage.getItem(STORAGE_KEYS.aiProvider)
@@ -221,11 +225,12 @@ export function useQuotaManager(config: QuotaConfig): {
     const showTPMLimitToast = useCallback(() => {
         const limitDisplay =
             tpmLimit >= 1000 ? `${tpmLimit / 1000}k` : String(tpmLimit)
-        toast.error(
-            `Rate limit reached (${limitDisplay} tokens/min). Please wait 60 seconds before sending another request.`,
-            { duration: 8000 },
-        )
-    }, [tpmLimit])
+        const message = formatMessage(dict.quota.tpmMessageDetailed, {
+            limit: limitDisplay,
+            seconds: 60,
+        })
+        toast.error(message, { duration: 8000 })
+    }, [tpmLimit, dict])
 
     return {
         // Check functions

next.config.ts

@@ -4,9 +4,16 @@ import packageJson from "./package.json"
 const nextConfig: NextConfig = {
     /* config options here */
     output: "standalone",
+    // Support for subdirectory deployment (e.g., https://example.com/nextaidrawio)
+    // Set NEXT_PUBLIC_BASE_PATH environment variable to your subdirectory path (e.g., /nextaidrawio)
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
     env: {
         APP_VERSION: packageJson.version,
     },
+    // Include instrumentation.ts in standalone build for Langfuse telemetry
+    outputFileTracingIncludes: {
+        "*": ["./instrumentation.ts"],
+    },
 }
 
 export default nextConfig

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.5",
+    "version": "0.4.6",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.5",
+            "version": "0.4.6",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^3.0.70",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.5",
+    "version": "0.4.6",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",