i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-09-02 01:20:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/gcp-vertex-ai

Browse Source
This commit is contained in:
ElshadHu
2026-01-14 01:09:52 -05:00
parent 6b70fdbeda 6bd26c8bbd
commit 476ef3c7d1
9 changed files with 227 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/[lang]/page.tsx
View File

@@ -4,7 +4,6 @@ import { Suspense, useCallback, useEffect, useRef, useState } from "react"
import { DrawIoEmbed } from "react-drawio"
import type { ImperativePanelHandle } from "react-resizable-panels"
import ChatPanel from "@/components/chat-panel"
import { STORAGE_CLOSE_PROTECTION_KEY } from "@/components/settings-dialog"
import {
ResizableHandle,
ResizablePanel,
@@ -29,7 +28,6 @@ export default function Home() {
const [darkMode, setDarkMode] = useState(false)
const [isLoaded, setIsLoaded] = useState(false)
const [isDrawioReady, setIsDrawioReady] = useState(false)
const [closeProtection, setCloseProtection] = useState(false)
const chatPanelRef = useRef<ImperativePanelHandle>(null)
const isMobileRef = useRef(false)
@@ -66,13 +64,6 @@ export default function Home() {
document.documentElement.classList.toggle("dark", prefersDark)
}
const savedCloseProtection = localStorage.getItem(
STORAGE_CLOSE_PROTECTION_KEY,
)
if (savedCloseProtection === "true") {
setCloseProtection(true)
}
setIsLoaded(true)
}, [pathname, router])
@@ -146,20 +137,6 @@ export default function Home() {
return () => window.removeEventListener("keydown", handleKeyDown)
}, [])
// Show confirmation dialog when user tries to leave the page
useEffect(() => {
if (!closeProtection) return
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
event.preventDefault()
return ""
}
window.addEventListener("beforeunload", handleBeforeUnload)
return () =>
window.removeEventListener("beforeunload", handleBeforeUnload)
}, [closeProtection])
return (
<div className="h-screen bg-background relative overflow-hidden">
<ResizablePanelGroup
@@ -243,7 +220,6 @@ export default function Home() {
darkMode={darkMode}
onToggleDarkMode={handleDarkModeChange}
isMobile={isMobile}
onCloseProtectionChange={setCloseProtection}
/>
</Suspense>
</div>

3
components/chat-panel.tsx
View File

@@ -70,7 +70,6 @@ interface ChatPanelProps {
darkMode: boolean
onToggleDarkMode: () => void
isMobile?: boolean
onCloseProtectionChange?: (enabled: boolean) => void
}
// Constants for tool states
@@ -111,7 +110,6 @@ export default function ChatPanel({
darkMode,
onToggleDarkMode,
isMobile = false,
onCloseProtectionChange,
}: ChatPanelProps) {
const {
loadDiagram: onDisplayChart,
@@ -1296,7 +1294,6 @@ export default function ChatPanel({
<SettingsDialog
open={showSettingsDialog}
onOpenChange={setShowSettingsDialog}
onCloseProtectionChange={onCloseProtectionChange}
drawioUi={drawioUi}
onToggleDrawioUi={onToggleDrawioUi}
darkMode={darkMode}

29
components/settings-dialog.tsx
View File

@@ -61,7 +61,6 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
interface SettingsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onCloseProtectionChange?: (enabled: boolean) => void
drawioUi: "min" | "sketch"
onToggleDrawioUi: () => void
darkMode: boolean
@@ -71,7 +70,6 @@ interface SettingsDialogProps {
}
export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
export const STORAGE_CLOSE_PROTECTION_KEY = "next-ai-draw-io-close-protection"
const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
function getStoredAccessCodeRequired(): boolean | null {
@@ -84,7 +82,6 @@ function getStoredAccessCodeRequired(): boolean | null {
function SettingsContent({
open,
onOpenChange,
onCloseProtectionChange,
drawioUi,
onToggleDrawioUi,
darkMode,
@@ -97,7 +94,6 @@ function SettingsContent({
const pathname = usePathname() || "/"
const search = useSearchParams()
const [accessCode, setAccessCode] = useState("")
const [closeProtection, setCloseProtection] = useState(true)
const [isVerifying, setIsVerifying] = useState(false)
const [error, setError] = useState("")
const [accessCodeRequired, setAccessCodeRequired] = useState(
@@ -151,12 +147,6 @@ function SettingsContent({
localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
setAccessCode(storedCode)
const storedCloseProtection = localStorage.getItem(
STORAGE_CLOSE_PROTECTION_KEY,
)
// Default to true if not set
setCloseProtection(storedCloseProtection !== "false")
const storedSendShortcut = localStorage.getItem(
STORAGE_KEYS.sendShortcut,
)
@@ -394,25 +384,6 @@ function SettingsContent({
</Button>
</SettingItem>
{/* Close Protection */}
<SettingItem
label={dict.settings.closeProtection}
description={dict.settings.closeProtectionDescription}
>
<Switch
id="close-protection"
checked={closeProtection}
onCheckedChange={(checked) => {
setCloseProtection(checked)
localStorage.setItem(
STORAGE_CLOSE_PROTECTION_KEY,
checked.toString(),
)
onCloseProtectionChange?.(checked)
}}
/>
</SettingItem>
{/* Diagram Style */}
<SettingItem
label={dict.settings.diagramStyle}

117
lib/ai-providers.ts
View File

@@ -67,6 +67,32 @@ const ANTHROPIC_BETA_HEADERS = {
"anthropic-beta": "fine-grained-tool-streaming-2025-05-14",
}
/**
* Resolve baseURL based on whether user is providing their own API key.
* When user provides their own API key, we should NOT fall back to server's
* baseURL environment variable - user credentials should only be sent to
* user-specified endpoints or official provider endpoints.
*
* @param userApiKey - User-provided API key (if any)
* @param userBaseUrl - User-provided base URL (if any)
* @param serverBaseUrl - Server's base URL from environment variable
* @param defaultBaseUrl - Provider's official/default base URL (optional)
* @returns The resolved base URL to use
*/
export function resolveBaseURL(
userApiKey: string | null | undefined,
userBaseUrl: string | null | undefined,
serverBaseUrl: string | undefined,
defaultBaseUrl?: string,
): string | undefined {
if (userApiKey) {
// User provides their own API key - only use user's baseUrl or default
return userBaseUrl || defaultBaseUrl || undefined
}
// No user API key - fall back to server config
return userBaseUrl || serverBaseUrl || defaultBaseUrl || undefined
}
/**
* Safely parse integer from environment variable with validation
*/
@@ -635,7 +661,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "openai": {
const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
const baseURL = overrides?.baseUrl || process.env.OPENAI_BASE_URL
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.OPENAI_BASE_URL,
)
if (baseURL) {
// Custom base URL = third-party proxy, use Chat Completions API
// for compatibility (most proxies don't support /responses endpoint)
@@ -654,10 +684,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "anthropic": {
const apiKey = overrides?.apiKey || process.env.ANTHROPIC_API_KEY
const baseURL =
overrides?.baseUrl ||
process.env.ANTHROPIC_BASE_URL ||
"https://api.anthropic.com/v1"
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.ANTHROPIC_BASE_URL,
"https://api.anthropic.com/v1",
)
const customProvider = createAnthropic({
apiKey,
baseURL,
@@ -672,7 +704,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "google": {
const apiKey =
overrides?.apiKey || process.env.GOOGLE_GENERATIVE_AI_API_KEY
const baseURL = overrides?.baseUrl || process.env.GOOGLE_BASE_URL
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.GOOGLE_BASE_URL,
)
if (baseURL || overrides?.apiKey) {
const customGoogle = createGoogleGenerativeAI({
apiKey,
@@ -711,8 +747,15 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "azure": {
const apiKey = overrides?.apiKey || process.env.AZURE_API_KEY
const baseURL = overrides?.baseUrl || process.env.AZURE_BASE_URL
const resourceName = process.env.AZURE_RESOURCE_NAME
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.AZURE_BASE_URL,
)
// Only use server's resourceName if user is NOT providing their own API key
const resourceName = overrides?.apiKey
? undefined
: process.env.AZURE_RESOURCE_NAME
// Azure requires either baseURL or resourceName to construct the endpoint
// resourceName constructs: https://{resourceName}.openai.azure.com/openai/v1{path}
if (baseURL || resourceName || overrides?.apiKey) {
@@ -742,8 +785,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "openrouter": {
const apiKey = overrides?.apiKey || process.env.OPENROUTER_API_KEY
const baseURL =
overrides?.baseUrl || process.env.OPENROUTER_BASE_URL
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.OPENROUTER_BASE_URL,
)
const openrouter = createOpenRouter({
apiKey,
...(baseURL && { baseURL }),
@@ -754,7 +800,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "deepseek": {
const apiKey = overrides?.apiKey || process.env.DEEPSEEK_API_KEY
const baseURL = overrides?.baseUrl || process.env.DEEPSEEK_BASE_URL
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.DEEPSEEK_BASE_URL,
)
if (baseURL || overrides?.apiKey) {
const customDeepSeek = createDeepSeek({
apiKey,
@@ -769,10 +819,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "siliconflow": {
const apiKey = overrides?.apiKey || process.env.SILICONFLOW_API_KEY
const baseURL =
overrides?.baseUrl ||
process.env.SILICONFLOW_BASE_URL ||
"https://api.siliconflow.cn/v1"
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.SILICONFLOW_BASE_URL,
"https://api.siliconflow.cn/v1",
)
const siliconflowProvider = createOpenAI({
apiKey,
baseURL,
@@ -783,11 +835,15 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "sglang": {
const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
const baseURL = overrides?.baseUrl || process.env.SGLANG_BASE_URL
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.SGLANG_BASE_URL,
)
const sglangProvider = createOpenAI({
apiKey,
baseURL,
...(baseURL && { baseURL }),
// Add a custom fetch wrapper to intercept and fix the stream from sglang
fetch: async (url, options) => {
const response = await fetch(url, options)
@@ -892,8 +948,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
// Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
// See: https://vercel.com/ai-gateway
const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
const baseURL =
overrides?.baseUrl || process.env.AI_GATEWAY_BASE_URL
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.AI_GATEWAY_BASE_URL,
)
// Only use custom configuration if explicitly set (local dev or custom Gateway)
// Otherwise undefined → AI SDK uses Vercel default (https://ai-gateway.vercel.sh/v1/ai) + OIDC
if (baseURL || overrides?.apiKey) {
@@ -925,10 +984,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "doubao": {
const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
const baseURL =
overrides?.baseUrl ||
process.env.DOUBAO_BASE_URL ||
"https://ark.cn-beijing.volces.com/api/v3"
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.DOUBAO_BASE_URL,
"https://ark.cn-beijing.volces.com/api/v3",
)
const lowerModelId = modelId.toLowerCase()
// Use DeepSeek provider for DeepSeek/Kimi models, OpenAI for others (multimodal support)
if (
@@ -952,10 +1013,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
case "modelscope": {
const apiKey = overrides?.apiKey || process.env.MODELSCOPE_API_KEY
const baseURL =
overrides?.baseUrl ||
process.env.MODELSCOPE_BASE_URL ||
"https://api-inference.modelscope.cn/v1"
const baseURL = resolveBaseURL(
overrides?.apiKey,
overrides?.baseUrl,
process.env.MODELSCOPE_BASE_URL,
"https://api-inference.modelscope.cn/v1",
)
const modelscopeProvider = createOpenAI({
apiKey,
baseURL,

2
lib/i18n/dictionaries/en.json
View File

@@ -100,8 +100,6 @@
"switchTo": "Switch to",
"minimal": "Minimal",
"sketch": "Sketch",
"closeProtection": "Close Protection",
"closeProtectionDescription": "Show confirmation when leaving the page.",
"diagramStyle": "Diagram Style",
"diagramStyleDescription": "Toggle between minimal and styled diagram output.",
"sendShortcut": "Send Shortcut",

2
lib/i18n/dictionaries/ja.json
View File

@@ -100,8 +100,6 @@
"switchTo": "切り替え",
"minimal": "ミニマル",
"sketch": "スケッチ",
"closeProtection": "ページ離脱確認",
"closeProtectionDescription": "ページを離れる際に確認を表示します。",
"diagramStyle": "ダイアグラムスタイル",
"diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
"sendShortcut": "送信ショートカット",

2
lib/i18n/dictionaries/zh.json
View File

@@ -100,8 +100,6 @@
"switchTo": "切换到",
"minimal": "简约",
"sketch": "草图",
"closeProtection": "关闭确认",
"closeProtectionDescription": "离开页面时显示确认。",
"diagramStyle": "图表样式",
"diagramStyleDescription": "切换简约与精致图表输出模式。",
"sendShortcut": "发送快捷键",

1
lib/storage.ts
View File

@@ -12,7 +12,6 @@ export const STORAGE_KEYS = {
// Settings
accessCode: "next-ai-draw-io-access-code",
closeProtection: "next-ai-draw-io-close-protection",
accessCodeRequired: "next-ai-draw-io-access-code-required",
aiProvider: "next-ai-draw-io-ai-provider",
aiBaseUrl: "next-ai-draw-io-ai-base-url",

138
tests/unit/ai-providers.test.ts
View File

@@ -1,5 +1,141 @@
import { describe, expect, it } from "vitest"
import { supportsImageInput, supportsPromptCaching } from "@/lib/ai-providers"
import {
resolveBaseURL,
supportsImageInput,
supportsPromptCaching,
} from "@/lib/ai-providers"
describe("resolveBaseURL", () => {
const SERVER_BASE_URL = "https://server-proxy.example.com"
const USER_BASE_URL = "https://user-proxy.example.com"
const DEFAULT_BASE_URL = "https://api.provider.com/v1"
const USER_API_KEY = "user-api-key-123"
describe("when user provides their own API key", () => {
it("uses user's baseUrl when provided", () => {
const result = resolveBaseURL(
USER_API_KEY,
USER_BASE_URL,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
expect(result).toBe(USER_BASE_URL)
})
it("uses default baseUrl when user provides no baseUrl", () => {
const result = resolveBaseURL(
USER_API_KEY,
null,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
expect(result).toBe(DEFAULT_BASE_URL)
})
it("returns undefined when user provides no baseUrl and no default exists", () => {
const result = resolveBaseURL(
USER_API_KEY,
null,
SERVER_BASE_URL,
undefined,
)
expect(result).toBeUndefined()
})
it("does NOT use server's baseUrl even when available", () => {
const result = resolveBaseURL(
USER_API_KEY,
undefined,
SERVER_BASE_URL,
undefined,
)
// Should NOT return SERVER_BASE_URL
expect(result).not.toBe(SERVER_BASE_URL)
expect(result).toBeUndefined()
})
it("prefers user's baseUrl over default", () => {
const result = resolveBaseURL(
USER_API_KEY,
USER_BASE_URL,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
expect(result).toBe(USER_BASE_URL)
})
})
describe("when using server credentials (no user API key)", () => {
it("uses user's baseUrl when provided (overrides server)", () => {
const result = resolveBaseURL(
null,
USER_BASE_URL,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
expect(result).toBe(USER_BASE_URL)
})
it("falls back to server's baseUrl when no user baseUrl", () => {
const result = resolveBaseURL(
null,
null,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
expect(result).toBe(SERVER_BASE_URL)
})
it("falls back to default when no user or server baseUrl", () => {
const result = resolveBaseURL(
null,
null,
undefined,
DEFAULT_BASE_URL,
)
expect(result).toBe(DEFAULT_BASE_URL)
})
it("returns undefined when no baseUrl available anywhere", () => {
const result = resolveBaseURL(null, null, undefined, undefined)
expect(result).toBeUndefined()
})
it("handles undefined apiKey same as null", () => {
const result = resolveBaseURL(
undefined,
null,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
expect(result).toBe(SERVER_BASE_URL)
})
})
describe("edge cases", () => {
it("handles empty string apiKey as falsy (uses server config)", () => {
const result = resolveBaseURL(
"",
null,
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
// Empty string is falsy, so should use server config
expect(result).toBe(SERVER_BASE_URL)
})
it("handles empty string baseUrl as falsy", () => {
const result = resolveBaseURL(
USER_API_KEY,
"",
SERVER_BASE_URL,
DEFAULT_BASE_URL,
)
// Empty string baseUrl is falsy, should fall back to default
expect(result).toBe(DEFAULT_BASE_URL)
})
})
})
describe("supportsPromptCaching", () => {
it("returns true for Claude models", () => {