mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-02 01:20:23 +08:00
Compare commits
4 Commits
fix/idb-cl
...
fix/autosa
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a0616c1ad8 | ||
|
|
e271df43f8 | ||
|
|
38a247c55d | ||
|
|
a0e3130ac2 |
21
.github/workflows/electron-release.yml
vendored
21
.github/workflows/electron-release.yml
vendored
@@ -34,15 +34,6 @@ jobs:
|
||||
node-version: 24
|
||||
cache: "npm"
|
||||
|
||||
- name: Download draw.io static files for offline use
|
||||
run: |
|
||||
rm -rf public/drawio
|
||||
git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
|
||||
mkdir -p public/drawio
|
||||
cp -r /tmp/drawio/src/main/webapp/* public/drawio/
|
||||
rm -rf public/drawio/WEB-INF
|
||||
rm -rf public/drawio/META-INF
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install
|
||||
|
||||
@@ -66,16 +57,6 @@ jobs:
|
||||
node-version: 24
|
||||
cache: "npm"
|
||||
|
||||
- name: Download draw.io static files for offline use
|
||||
shell: bash
|
||||
run: |
|
||||
rm -rf public/drawio
|
||||
git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
|
||||
mkdir -p public/drawio
|
||||
cp -r /tmp/drawio/src/main/webapp/* public/drawio/
|
||||
rm -rf public/drawio/WEB-INF
|
||||
rm -rf public/drawio/META-INF
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install
|
||||
|
||||
@@ -99,7 +80,7 @@ jobs:
|
||||
api-token: ${{ secrets.SIGNPATH_API_TOKEN }}
|
||||
organization-id: '880a211d-2cd3-4e7b-8d04-3d1f8eb39df5'
|
||||
project-slug: 'next-ai-draw-io'
|
||||
signing-policy-slug: 'release-signing'
|
||||
signing-policy-slug: 'test-signing'
|
||||
artifact-configuration-slug: 'windows-exe'
|
||||
github-artifact-id: ${{ steps.upload-unsigned.outputs.artifact-id }}
|
||||
wait-for-completion: true
|
||||
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -56,8 +56,6 @@ push-via-ec2.sh
|
||||
/dist-electron/
|
||||
/release/
|
||||
/electron-standalone/
|
||||
# Draw.io static files (downloaded during CI build)
|
||||
public/drawio/
|
||||
*.dmg
|
||||
*.exe
|
||||
*.AppImage
|
||||
@@ -70,5 +68,4 @@ CLAUDE.md
|
||||
|
||||
# edgeone
|
||||
.edgeone
|
||||
opencode.json
|
||||
ai-models.json
|
||||
opencode.json
|
||||
@@ -207,7 +207,6 @@ See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Google Vertex AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
@@ -222,10 +221,6 @@ All providers except AWS Bedrock and OpenRouter support custom endpoints.
|
||||
|
||||
📖 **[Detailed Provider Configuration Guide](./docs/en/ai-providers.md)** - See setup instructions for each provider.
|
||||
|
||||
### Server-Side Multi-Model Configuration
|
||||
|
||||
Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via `AI_MODELS_CONFIG` environment variable (JSON string) or `ai-models.json` file.
|
||||
|
||||
**Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
|
||||
|
||||
Note that the `claude` series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
|
||||
|
||||
@@ -292,7 +292,6 @@ export default function AboutCN() {
|
||||
</li>
|
||||
<li>Anthropic</li>
|
||||
<li>Google AI</li>
|
||||
<li>Google Vertex AI</li>
|
||||
<li>Azure OpenAI</li>
|
||||
<li>Ollama</li>
|
||||
<li>OpenRouter</li>
|
||||
|
||||
@@ -307,7 +307,6 @@ export default function AboutJA() {
|
||||
</li>
|
||||
<li>Anthropic</li>
|
||||
<li>Google AI</li>
|
||||
<li>Google Vertex AI</li>
|
||||
<li>Azure OpenAI</li>
|
||||
<li>Ollama</li>
|
||||
<li>OpenRouter</li>
|
||||
|
||||
@@ -326,7 +326,6 @@ export default function About() {
|
||||
</li>
|
||||
<li>Anthropic</li>
|
||||
<li>Google AI</li>
|
||||
<li>Google Vertex AI</li>
|
||||
<li>Azure OpenAI</li>
|
||||
<li>Ollama</li>
|
||||
<li>OpenRouter</li>
|
||||
|
||||
@@ -11,13 +11,15 @@ import {
|
||||
} from "@/components/ui/resizable"
|
||||
import { useDiagram } from "@/contexts/diagram-context"
|
||||
import { i18n, type Locale } from "@/lib/i18n/config"
|
||||
import { isIndexedDBUsable } from "@/lib/session-storage"
|
||||
|
||||
const drawioBaseUrl =
|
||||
process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
|
||||
|
||||
export default function Home() {
|
||||
const {
|
||||
drawioRef,
|
||||
handleDiagramExport,
|
||||
handleDiagramAutoSave,
|
||||
handleAutoSave,
|
||||
onDrawioLoad,
|
||||
resetDrawioReady,
|
||||
} = useDiagram()
|
||||
@@ -31,12 +33,6 @@ export default function Home() {
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const [isDrawioReady, setIsDrawioReady] = useState(false)
|
||||
const [isElectron, setIsElectron] = useState(false)
|
||||
const [canPersist, setCanPersist] = useState(false)
|
||||
const [canPersistChecked, setCanPersistChecked] = useState(false)
|
||||
const [drawioBaseUrl, setDrawioBaseUrl] = useState(
|
||||
process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net",
|
||||
)
|
||||
|
||||
const chatPanelRef = useRef<ImperativePanelHandle>(null)
|
||||
const isMobileRef = useRef(false)
|
||||
@@ -73,22 +69,6 @@ export default function Home() {
|
||||
document.documentElement.classList.toggle("dark", prefersDark)
|
||||
}
|
||||
|
||||
// Detect Electron and use bundled draw.io files for offline use
|
||||
// Note: react-drawio uses `new URL(baseUrl)` so we need absolute URL
|
||||
// Include /index.html because Next.js doesn't auto-serve index.html for directories
|
||||
const electronDetected =
|
||||
!process.env.NEXT_PUBLIC_DRAWIO_BASE_URL &&
|
||||
!!(window as unknown as { electronAPI?: unknown }).electronAPI
|
||||
if (electronDetected) {
|
||||
setIsElectron(true)
|
||||
setDrawioBaseUrl(`${window.location.origin}/drawio/index.html`)
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
const usable = await isIndexedDBUsable()
|
||||
setCanPersist(usable)
|
||||
setCanPersistChecked(true)
|
||||
})()
|
||||
setIsLoaded(true)
|
||||
}, [pathname, router])
|
||||
|
||||
@@ -97,17 +77,6 @@ export default function Home() {
|
||||
onDrawioLoad()
|
||||
}, [onDrawioLoad])
|
||||
|
||||
const handleDrawioAutoSave = useCallback(
|
||||
(data: { xml?: string }) => {
|
||||
handleDiagramAutoSave(data)
|
||||
// Only suppress modified state when persistence is available
|
||||
if (canPersist) {
|
||||
drawioRef.current?.status({ message: "", modified: false })
|
||||
}
|
||||
},
|
||||
[canPersist, drawioRef, handleDiagramAutoSave],
|
||||
)
|
||||
|
||||
const handleDarkModeChange = () => {
|
||||
const newValue = !darkMode
|
||||
setDarkMode(newValue)
|
||||
@@ -191,41 +160,28 @@ export default function Home() {
|
||||
}`}
|
||||
>
|
||||
<div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 relative">
|
||||
{isLoaded && canPersistChecked && (
|
||||
{isLoaded && (
|
||||
<div
|
||||
className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
|
||||
>
|
||||
<DrawIoEmbed
|
||||
key={`${drawioUi}-${darkMode}-${currentLang}-${isElectron}`}
|
||||
key={`${drawioUi}-${darkMode}-${currentLang}`}
|
||||
ref={drawioRef}
|
||||
autosave
|
||||
onAutoSave={handleDrawioAutoSave}
|
||||
onExport={handleDiagramExport}
|
||||
onLoad={handleDrawioLoad}
|
||||
onAutoSave={handleAutoSave}
|
||||
autosave={true}
|
||||
baseUrl={drawioBaseUrl}
|
||||
configuration={
|
||||
canPersist
|
||||
? { confirmExit: false }
|
||||
: undefined
|
||||
}
|
||||
urlParameters={{
|
||||
ui: drawioUi,
|
||||
spin: false,
|
||||
libraries: false,
|
||||
// Disable modified tracking only when persistence is available
|
||||
...(canPersist && {
|
||||
modified: false,
|
||||
keepmodified: false,
|
||||
}),
|
||||
saveAndExit: false,
|
||||
noSaveBtn: true,
|
||||
noExitBtn: true,
|
||||
modified: false,
|
||||
dark: darkMode,
|
||||
lang: currentLang,
|
||||
// Enable offline mode in Electron to disable external service calls
|
||||
...(isElectron && {
|
||||
offline: true,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -34,7 +34,6 @@ import {
|
||||
setTraceOutput,
|
||||
wrapWithObserve,
|
||||
} from "@/lib/langfuse"
|
||||
import { findServerModelById } from "@/lib/server-model-config"
|
||||
import { getSystemPrompt } from "@/lib/system-prompts"
|
||||
import { getUserIdFromRequest } from "@/lib/user-id"
|
||||
|
||||
@@ -118,10 +117,7 @@ async function handleChatRequest(req: Request): Promise<Response> {
|
||||
// === SERVER-SIDE QUOTA CHECK START ===
|
||||
// Quota is opt-in: only enabled when DYNAMODB_QUOTA_TABLE env var is set
|
||||
const hasOwnApiKey = !!(
|
||||
req.headers.get("x-ai-provider") &&
|
||||
(req.headers.get("x-ai-api-key") ||
|
||||
req.headers.get("x-aws-access-key-id") ||
|
||||
req.headers.get("x-vertex-api-key"))
|
||||
req.headers.get("x-ai-provider") && req.headers.get("x-ai-api-key")
|
||||
)
|
||||
|
||||
// Skip quota check if: quota disabled, user has own API key, or is anonymous
|
||||
@@ -172,7 +168,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
|
||||
// Read client AI provider overrides from headers
|
||||
const provider = req.headers.get("x-ai-provider")
|
||||
let baseUrl = req.headers.get("x-ai-base-url")
|
||||
const selectedModelId = req.headers.get("x-selected-model-id")
|
||||
|
||||
// For EdgeOne provider, construct full URL from request origin
|
||||
// because createOpenAI needs absolute URL, not relative path
|
||||
@@ -184,30 +179,8 @@ async function handleChatRequest(req: Request): Promise<Response> {
|
||||
// Get cookie header for EdgeOne authentication (eo_token, eo_time)
|
||||
const cookieHeader = req.headers.get("cookie")
|
||||
|
||||
// Check if this is a server model with custom env var names
|
||||
let serverModelConfig: {
|
||||
apiKeyEnv?: string
|
||||
baseUrlEnv?: string
|
||||
provider?: string
|
||||
} = {}
|
||||
if (selectedModelId?.startsWith("server:")) {
|
||||
const serverModel = await findServerModelById(selectedModelId)
|
||||
console.log(
|
||||
`[Server Model Lookup] ID: ${selectedModelId}, Found: ${!!serverModel}, Provider: ${serverModel?.provider}`,
|
||||
)
|
||||
if (serverModel) {
|
||||
serverModelConfig = {
|
||||
apiKeyEnv: serverModel.apiKeyEnv,
|
||||
baseUrlEnv: serverModel.baseUrlEnv,
|
||||
// Use actual provider from config (client header may have incorrect value due to ID format change)
|
||||
provider: serverModel.provider,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clientOverrides = {
|
||||
// Server model provider takes precedence over client header
|
||||
provider: serverModelConfig.provider || provider,
|
||||
provider,
|
||||
baseUrl,
|
||||
apiKey: req.headers.get("x-ai-api-key"),
|
||||
modelId: req.headers.get("x-ai-model"),
|
||||
@@ -216,10 +189,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
|
||||
awsSecretAccessKey: req.headers.get("x-aws-secret-access-key"),
|
||||
awsRegion: req.headers.get("x-aws-region"),
|
||||
awsSessionToken: req.headers.get("x-aws-session-token"),
|
||||
// Server model custom env var names
|
||||
...serverModelConfig,
|
||||
// Vertex AI credentials (Express Mode)
|
||||
vertexApiKey: req.headers.get("x-vertex-api-key"),
|
||||
// Pass cookies for EdgeOne Pages authentication
|
||||
...(provider === "edgeone" &&
|
||||
cookieHeader && {
|
||||
@@ -230,10 +199,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
|
||||
// Read minimal style preference from header
|
||||
const minimalStyle = req.headers.get("x-minimal-style") === "true"
|
||||
|
||||
console.log(
|
||||
`[Client Overrides] provider: ${clientOverrides.provider}, modelId: ${clientOverrides.modelId}`,
|
||||
)
|
||||
|
||||
// Get AI model with optional client overrides
|
||||
const { model, providerOptions, headers, modelId } =
|
||||
getAIModel(clientOverrides)
|
||||
@@ -476,13 +441,6 @@ ${userInputText}
|
||||
inputToRepair = inputToRepair.replace(/:=/g, ": ")
|
||||
// Fix `= "` instead of `: "`
|
||||
inputToRepair = inputToRepair.replace(/=\s*"/g, ': "')
|
||||
// Fix inconsistent quote escaping in XML attributes within JSON strings
|
||||
// Pattern: attribute="value\" where opening quote is unescaped but closing is escaped
|
||||
// Example: y="-20\" should be y=\"-20\"
|
||||
inputToRepair = inputToRepair.replace(
|
||||
/(\w+)="([^"]*?)\\"/g,
|
||||
'$1=\\"$2\\"',
|
||||
)
|
||||
}
|
||||
// Use jsonrepair to fix truncated JSON
|
||||
const repairedInput = jsonrepair(inputToRepair)
|
||||
|
||||
@@ -1,11 +1,61 @@
|
||||
import { extract } from "@extractus/article-extractor"
|
||||
import { NextResponse } from "next/server"
|
||||
import TurndownService from "turndown"
|
||||
import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
|
||||
|
||||
const MAX_CONTENT_LENGTH = 150000 // Match PDF limit
|
||||
const EXTRACT_TIMEOUT_MS = 15000
|
||||
|
||||
// SSRF protection - block private/internal addresses
|
||||
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)
|
||||
if (a === 10) return true // 10.0.0.0/8
|
||||
if (a === 172 && b >= 16 && b <= 31) return true // 172.16.0.0/12
|
||||
if (a === 192 && b === 168) return true // 192.168.0.0/16
|
||||
if (a === 169 && b === 254) return true // 169.254.0.0/16 (link-local)
|
||||
if (a === 127) return true // 127.0.0.0/8 (loopback)
|
||||
}
|
||||
|
||||
// Block common internal hostnames
|
||||
if (
|
||||
hostname.endsWith(".local") ||
|
||||
hostname.endsWith(".internal") ||
|
||||
hostname.endsWith(".localhost")
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
} catch {
|
||||
return true // Invalid URL - block it
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const { url } = await req.json()
|
||||
@@ -28,7 +78,7 @@ export async function POST(req: Request) {
|
||||
}
|
||||
|
||||
// SSRF protection
|
||||
if (!allowPrivateUrls && isPrivateUrl(url)) {
|
||||
if (isPrivateUrl(url)) {
|
||||
return NextResponse.json(
|
||||
{ error: "Cannot access private/internal URLs" },
|
||||
{ status: 400 },
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { NextResponse } from "next/server"
|
||||
import { loadFlattenedServerModels } from "@/lib/server-model-config"
|
||||
|
||||
// Use dynamic rendering to read AI_MODEL/AI_PROVIDER env vars at runtime
|
||||
// This ensures Docker users can set these values when starting containers
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export async function GET() {
|
||||
const models = await loadFlattenedServerModels()
|
||||
return NextResponse.json({
|
||||
models,
|
||||
hasConfig: models.length > 0,
|
||||
})
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
/**
|
||||
* API endpoint for VLM-based diagram validation.
|
||||
* Accepts a PNG image and streams validation results using useObject-compatible format.
|
||||
*/
|
||||
|
||||
import { streamObject } from "ai"
|
||||
import { getValidationModel } from "@/lib/ai-providers"
|
||||
import { VALIDATION_SYSTEM_PROMPT } from "@/lib/validation-prompts"
|
||||
import {
|
||||
type ValidationResult,
|
||||
ValidationResultSchema,
|
||||
} from "@/lib/validation-schema"
|
||||
|
||||
export const maxDuration = 30
|
||||
|
||||
interface ValidateDiagramRequest {
|
||||
imageData: string // Base64 PNG data URL
|
||||
sessionId?: string
|
||||
}
|
||||
|
||||
// Default valid result for disabled/error cases
|
||||
const DEFAULT_VALID_RESULT: ValidationResult = {
|
||||
valid: true,
|
||||
issues: [],
|
||||
suggestions: [],
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a streaming response for useObject compatibility.
|
||||
* useObject expects text stream format, not plain JSON.
|
||||
*/
|
||||
function createStreamingResponse(result: ValidationResult): Response {
|
||||
const encoder = new TextEncoder()
|
||||
const stream = new ReadableStream({
|
||||
start(controller) {
|
||||
// Stream the JSON as text (useObject parses this)
|
||||
controller.enqueue(encoder.encode(JSON.stringify(result)))
|
||||
controller.close()
|
||||
},
|
||||
})
|
||||
return new Response(stream, {
|
||||
headers: { "Content-Type": "text/plain; charset=utf-8" },
|
||||
})
|
||||
}
|
||||
|
||||
export async function POST(req: Request): Promise<Response> {
|
||||
try {
|
||||
// Check if VLM validation is enabled (default: true)
|
||||
const enableValidation = process.env.ENABLE_VLM_VALIDATION !== "false"
|
||||
if (!enableValidation) {
|
||||
return createStreamingResponse(DEFAULT_VALID_RESULT)
|
||||
}
|
||||
|
||||
const body: ValidateDiagramRequest = await req.json()
|
||||
const { imageData, sessionId } = body
|
||||
|
||||
if (!imageData) {
|
||||
return Response.json(
|
||||
{ error: "Missing imageData" },
|
||||
{ status: 400 },
|
||||
)
|
||||
}
|
||||
|
||||
// Validate image data format
|
||||
if (
|
||||
!imageData.startsWith("data:image/png;base64,") &&
|
||||
!imageData.startsWith("data:image/")
|
||||
) {
|
||||
return Response.json(
|
||||
{ error: "Invalid image data format" },
|
||||
{ status: 400 },
|
||||
)
|
||||
}
|
||||
|
||||
// Get the validation model
|
||||
let model
|
||||
try {
|
||||
model = getValidationModel()
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
"[validate-diagram] Validation model not available:",
|
||||
error,
|
||||
)
|
||||
// Return valid if no vision model is configured
|
||||
return createStreamingResponse(DEFAULT_VALID_RESULT)
|
||||
}
|
||||
|
||||
// Parse timeout with validation (minimum 1000ms, default 10000ms)
|
||||
const timeout =
|
||||
Math.max(
|
||||
1000,
|
||||
parseInt(process.env.VALIDATION_TIMEOUT || "10000", 10),
|
||||
) || 10000
|
||||
|
||||
// Stream the VLM response for useObject consumption
|
||||
const result = streamObject({
|
||||
model,
|
||||
schema: ValidationResultSchema,
|
||||
system: VALIDATION_SYSTEM_PROMPT,
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: [
|
||||
{
|
||||
type: "image",
|
||||
image: imageData,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Please analyze this diagram for visual quality issues.",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
maxOutputTokens: 1024,
|
||||
abortSignal: AbortSignal.timeout(timeout),
|
||||
onFinish: ({ object }) => {
|
||||
if (sessionId && object) {
|
||||
console.log(
|
||||
`[validate-diagram] Session ${sessionId}: valid=${object.valid}, issues=${object.issues?.length ?? 0}`,
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
return result.toTextStreamResponse()
|
||||
} catch (error) {
|
||||
// Log with session context if available
|
||||
const errorMessage =
|
||||
error instanceof Error ? error.message : String(error)
|
||||
console.error("[validate-diagram] Error:", errorMessage)
|
||||
|
||||
// On error, return valid to not block the user
|
||||
return createStreamingResponse(DEFAULT_VALID_RESULT)
|
||||
}
|
||||
}
|
||||
@@ -3,16 +3,74 @@ import { createAnthropic } from "@ai-sdk/anthropic"
|
||||
import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
|
||||
import { createGateway } from "@ai-sdk/gateway"
|
||||
import { createGoogleGenerativeAI } from "@ai-sdk/google"
|
||||
import { createVertex } from "@ai-sdk/google-vertex"
|
||||
import { createOpenAI } from "@ai-sdk/openai"
|
||||
import { createOpenRouter } from "@openrouter/ai-sdk-provider"
|
||||
import { generateText } from "ai"
|
||||
import { NextResponse } from "next/server"
|
||||
import { createOllama } from "ollama-ai-provider-v2"
|
||||
import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
|
||||
|
||||
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
|
||||
@@ -22,8 +80,6 @@ interface ValidateRequest {
|
||||
awsAccessKeyId?: string
|
||||
awsSecretAccessKey?: string
|
||||
awsRegion?: string
|
||||
// Vertex AI specific
|
||||
vertexApiKey?: string // Express Mode API key
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
@@ -37,8 +93,6 @@ export async function POST(req: Request) {
|
||||
awsAccessKeyId,
|
||||
awsSecretAccessKey,
|
||||
awsRegion,
|
||||
// Note: Express Mode only needs vertexApiKey
|
||||
vertexApiKey,
|
||||
} = body
|
||||
|
||||
if (!provider || !modelId) {
|
||||
@@ -49,7 +103,7 @@ export async function POST(req: Request) {
|
||||
}
|
||||
|
||||
// SECURITY: Block SSRF attacks via custom baseUrl
|
||||
if (baseUrl && !allowPrivateUrls && isPrivateUrl(baseUrl)) {
|
||||
if (baseUrl && isPrivateUrl(baseUrl)) {
|
||||
return NextResponse.json(
|
||||
{ valid: false, error: "Invalid base URL" },
|
||||
{ status: 400 },
|
||||
@@ -67,16 +121,6 @@ export async function POST(req: Request) {
|
||||
{ status: 400 },
|
||||
)
|
||||
}
|
||||
} else if (provider === "vertexai") {
|
||||
if (!vertexApiKey) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
valid: false,
|
||||
error: "Vertex AI API key is required for Express Mode",
|
||||
},
|
||||
{ status: 400 },
|
||||
)
|
||||
}
|
||||
} else if (provider !== "ollama" && provider !== "edgeone" && !apiKey) {
|
||||
return NextResponse.json(
|
||||
{ valid: false, error: "API key is required" },
|
||||
@@ -114,15 +158,6 @@ export async function POST(req: Request) {
|
||||
break
|
||||
}
|
||||
|
||||
case "vertexai": {
|
||||
const vertex = createVertex({
|
||||
apiKey: vertexApiKey,
|
||||
...(baseUrl && { baseURL: baseUrl }),
|
||||
})
|
||||
model = vertex(modelId)
|
||||
break
|
||||
}
|
||||
|
||||
case "azure": {
|
||||
const azure = createOpenAI({
|
||||
apiKey,
|
||||
|
||||
@@ -169,27 +169,3 @@ export const ModelSelectorName = ({
|
||||
}: ModelSelectorNameProps) => (
|
||||
<span className={cn("flex-1 truncate text-left", className)} {...props} />
|
||||
)
|
||||
|
||||
export type ModelSelectorSectionHeaderProps = {
|
||||
icon: ReactNode
|
||||
label: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const ModelSelectorSectionHeader = ({
|
||||
icon,
|
||||
label,
|
||||
className,
|
||||
}: ModelSelectorSectionHeaderProps) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted/40 rounded-sm mx-1 mt-1",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span className="[&>svg]:size-3.5" aria-hidden="true">
|
||||
{icon}
|
||||
</span>
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -9,14 +9,7 @@ import {
|
||||
Send,
|
||||
} from "lucide-react"
|
||||
import type React from "react"
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { ButtonWithTooltip } from "@/components/button-with-tooltip"
|
||||
import { ErrorToast } from "@/components/error-toast"
|
||||
@@ -34,7 +27,6 @@ import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
|
||||
import { STORAGE_KEYS } from "@/lib/storage"
|
||||
import type { FlattenedModel } from "@/lib/types/model-config"
|
||||
import { extractUrlContent, type UrlData } from "@/lib/url-utils"
|
||||
import { isRealDiagram } from "@/lib/utils"
|
||||
import { FilePreviewList } from "./file-preview-list"
|
||||
|
||||
const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB
|
||||
@@ -145,10 +137,6 @@ function showValidationErrors(errors: string[], dict: any) {
|
||||
}
|
||||
}
|
||||
|
||||
export interface ChatInputRef {
|
||||
focus: () => void
|
||||
}
|
||||
|
||||
interface ChatInputProps {
|
||||
input: string
|
||||
status: "submitted" | "streaming" | "ready" | "error"
|
||||
@@ -171,438 +159,400 @@ interface ChatInputProps {
|
||||
onModelSelect?: (modelId: string | undefined) => void
|
||||
showUnvalidatedModels?: boolean
|
||||
onConfigureModels?: () => void
|
||||
// Focus control props
|
||||
shouldFocus?: boolean
|
||||
onFocused?: () => void
|
||||
}
|
||||
|
||||
export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
|
||||
function ChatInput(
|
||||
{
|
||||
input,
|
||||
status,
|
||||
onSubmit,
|
||||
onChange,
|
||||
files = [],
|
||||
onFileChange = () => {},
|
||||
pdfData = new Map(),
|
||||
urlData,
|
||||
onUrlChange,
|
||||
sessionId,
|
||||
error = null,
|
||||
models = [],
|
||||
selectedModelId,
|
||||
onModelSelect = () => {},
|
||||
showUnvalidatedModels = false,
|
||||
onConfigureModels = () => {},
|
||||
shouldFocus = false,
|
||||
onFocused,
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const dict = useDictionary()
|
||||
const {
|
||||
chartXML,
|
||||
diagramHistory,
|
||||
saveDiagramToFile,
|
||||
showSaveDialog,
|
||||
setShowSaveDialog,
|
||||
} = useDiagram()
|
||||
export function ChatInput({
|
||||
input,
|
||||
status,
|
||||
onSubmit,
|
||||
onChange,
|
||||
files = [],
|
||||
onFileChange = () => {},
|
||||
pdfData = new Map(),
|
||||
urlData,
|
||||
onUrlChange,
|
||||
sessionId,
|
||||
error = null,
|
||||
models = [],
|
||||
selectedModelId,
|
||||
onModelSelect = () => {},
|
||||
showUnvalidatedModels = false,
|
||||
onConfigureModels = () => {},
|
||||
}: ChatInputProps) {
|
||||
const dict = useDictionary()
|
||||
const {
|
||||
diagramHistory,
|
||||
saveDiagramToFile,
|
||||
showSaveDialog,
|
||||
setShowSaveDialog,
|
||||
} = useDiagram()
|
||||
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const [showHistory, setShowHistory] = useState(false)
|
||||
const [showUrlDialog, setShowUrlDialog] = useState(false)
|
||||
const [isExtractingUrl, setIsExtractingUrl] = useState(false)
|
||||
const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
|
||||
// Allow retry when there's an error (even if status is still "streaming" or "submitted")
|
||||
const isDisabled =
|
||||
(status === "streaming" || status === "submitted") && !error
|
||||
|
||||
// Expose focus method via ref
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: () => {
|
||||
textareaRef.current?.focus()
|
||||
},
|
||||
}))
|
||||
const adjustTextareaHeight = useCallback(() => {
|
||||
const textarea = textareaRef.current
|
||||
if (textarea) {
|
||||
textarea.style.height = "auto"
|
||||
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
|
||||
}
|
||||
}, [])
|
||||
// Handle programmatic input changes (e.g., setInput("") after form submission)
|
||||
useEffect(() => {
|
||||
adjustTextareaHeight()
|
||||
}, [input, adjustTextareaHeight])
|
||||
|
||||
// Focus the textarea when shouldFocus becomes true
|
||||
// Use setTimeout to ensure focus happens after drawio iframe settles
|
||||
useEffect(() => {
|
||||
if (shouldFocus) {
|
||||
const timer = setTimeout(() => {
|
||||
textareaRef.current?.focus()
|
||||
onFocused?.()
|
||||
}, 150)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [shouldFocus, onFocused])
|
||||
// Load send shortcut preference from localStorage and listen for changes
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
|
||||
if (stored) setSendShortcut(stored)
|
||||
|
||||
const [showHistory, setShowHistory] = useState(false)
|
||||
const [showUrlDialog, setShowUrlDialog] = useState(false)
|
||||
const [isExtractingUrl, setIsExtractingUrl] = useState(false)
|
||||
const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
|
||||
// Allow retry when there's an error (even if status is still "streaming" or "submitted")
|
||||
const isDisabled =
|
||||
(status === "streaming" || status === "submitted") && !error
|
||||
|
||||
const adjustTextareaHeight = useCallback(() => {
|
||||
const textarea = textareaRef.current
|
||||
if (textarea) {
|
||||
textarea.style.height = "auto"
|
||||
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
|
||||
}
|
||||
}, [])
|
||||
// Handle programmatic input changes (e.g., setInput("") after form submission)
|
||||
useEffect(() => {
|
||||
adjustTextareaHeight()
|
||||
}, [input, adjustTextareaHeight])
|
||||
|
||||
// Load send shortcut preference from localStorage and listen for changes
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
|
||||
if (stored) setSendShortcut(stored)
|
||||
|
||||
const handleChange = (e: CustomEvent<string>) =>
|
||||
setSendShortcut(e.detail)
|
||||
window.addEventListener(
|
||||
const handleChange = (e: CustomEvent<string>) =>
|
||||
setSendShortcut(e.detail)
|
||||
window.addEventListener(
|
||||
"sendShortcutChange",
|
||||
handleChange as EventListener,
|
||||
)
|
||||
return () =>
|
||||
window.removeEventListener(
|
||||
"sendShortcutChange",
|
||||
handleChange as EventListener,
|
||||
)
|
||||
return () =>
|
||||
window.removeEventListener(
|
||||
"sendShortcutChange",
|
||||
handleChange as EventListener,
|
||||
)
|
||||
}, [])
|
||||
}, [])
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onChange(e)
|
||||
adjustTextareaHeight()
|
||||
}
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onChange(e)
|
||||
adjustTextareaHeight()
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const shouldSend =
|
||||
sendShortcut === "enter"
|
||||
? e.key === "Enter" &&
|
||||
!e.shiftKey &&
|
||||
!e.ctrlKey &&
|
||||
!e.metaKey
|
||||
: (e.metaKey || e.ctrlKey) && e.key === "Enter"
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const shouldSend =
|
||||
sendShortcut === "enter"
|
||||
? e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey
|
||||
: (e.metaKey || e.ctrlKey) && e.key === "Enter"
|
||||
|
||||
if (shouldSend) {
|
||||
e.preventDefault()
|
||||
const form = e.currentTarget.closest("form")
|
||||
if (form && input.trim() && !isDisabled) {
|
||||
form.requestSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handlePaste = async (e: React.ClipboardEvent) => {
|
||||
if (isDisabled) return
|
||||
|
||||
const items = e.clipboardData.items
|
||||
const imageItems = Array.from(items).filter((item) =>
|
||||
item.type.startsWith("image/"),
|
||||
)
|
||||
|
||||
if (imageItems.length > 0) {
|
||||
const imageFiles = (
|
||||
await Promise.all(
|
||||
imageItems.map(async (item, index) => {
|
||||
const file = item.getAsFile()
|
||||
if (!file) return null
|
||||
return new File(
|
||||
[file],
|
||||
`pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
|
||||
{ type: file.type },
|
||||
)
|
||||
}),
|
||||
)
|
||||
).filter((f): f is File => f !== null)
|
||||
|
||||
const { validFiles, errors } = validateFiles(
|
||||
imageFiles,
|
||||
files.length,
|
||||
dict,
|
||||
)
|
||||
showValidationErrors(errors, dict)
|
||||
if (validFiles.length > 0) {
|
||||
onFileChange([...files, ...validFiles])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newFiles = Array.from(e.target.files || [])
|
||||
const { validFiles, errors } = validateFiles(
|
||||
newFiles,
|
||||
files.length,
|
||||
dict,
|
||||
)
|
||||
showValidationErrors(errors, dict)
|
||||
if (validFiles.length > 0) {
|
||||
onFileChange([...files, ...validFiles])
|
||||
}
|
||||
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ""
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveFile = (fileToRemove: File) => {
|
||||
onFileChange(files.filter((file) => file !== fileToRemove))
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ""
|
||||
}
|
||||
}
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
|
||||
if (shouldSend) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(true)
|
||||
}
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(false)
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(false)
|
||||
|
||||
if (isDisabled) return
|
||||
|
||||
const droppedFiles = e.dataTransfer.files
|
||||
const supportedFiles = Array.from(droppedFiles).filter((file) =>
|
||||
isValidFileType(file),
|
||||
)
|
||||
|
||||
const { validFiles, errors } = validateFiles(
|
||||
supportedFiles,
|
||||
files.length,
|
||||
dict,
|
||||
)
|
||||
showValidationErrors(errors, dict)
|
||||
if (validFiles.length > 0) {
|
||||
onFileChange([...files, ...validFiles])
|
||||
const form = e.currentTarget.closest("form")
|
||||
if (form && input.trim() && !isDisabled) {
|
||||
form.requestSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleUrlExtract = async (url: string) => {
|
||||
if (!onUrlChange) return
|
||||
const handlePaste = async (e: React.ClipboardEvent) => {
|
||||
if (isDisabled) return
|
||||
|
||||
setIsExtractingUrl(true)
|
||||
|
||||
try {
|
||||
const existing = urlData
|
||||
? new Map(urlData)
|
||||
: new Map<string, UrlData>()
|
||||
existing.set(url, {
|
||||
url,
|
||||
title: url,
|
||||
content: "",
|
||||
charCount: 0,
|
||||
isExtracting: true,
|
||||
})
|
||||
onUrlChange(existing)
|
||||
|
||||
const data = await extractUrlContent(url)
|
||||
|
||||
const newUrlData = new Map(existing)
|
||||
newUrlData.set(url, data)
|
||||
onUrlChange(newUrlData)
|
||||
|
||||
setShowUrlDialog(false)
|
||||
} catch (error) {
|
||||
// Remove the URL from the data map on error
|
||||
const newUrlData = urlData
|
||||
? new Map(urlData)
|
||||
: new Map<string, UrlData>()
|
||||
newUrlData.delete(url)
|
||||
onUrlChange(newUrlData)
|
||||
showErrorToast(
|
||||
<span className="text-muted-foreground">
|
||||
{error instanceof Error
|
||||
? error.message
|
||||
: "Failed to extract URL content"}
|
||||
</span>,
|
||||
)
|
||||
} finally {
|
||||
setIsExtractingUrl(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className={`w-full transition-all duration-200 ${
|
||||
isDragging
|
||||
? "ring-2 ring-primary ring-offset-2 rounded-2xl"
|
||||
: ""
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{/* File & URL previews */}
|
||||
{(files.length > 0 || (urlData && urlData.size > 0)) && (
|
||||
<div className="mb-3">
|
||||
<FilePreviewList
|
||||
files={files}
|
||||
onRemoveFile={handleRemoveFile}
|
||||
pdfData={pdfData}
|
||||
urlData={urlData}
|
||||
onRemoveUrl={
|
||||
onUrlChange
|
||||
? (url) => {
|
||||
const next = new Map(urlData)
|
||||
next.delete(url)
|
||||
onUrlChange(next)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPaste={handlePaste}
|
||||
placeholder={dict.chat.placeholder}
|
||||
disabled={isDisabled}
|
||||
aria-label="Chat input"
|
||||
className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
|
||||
<div className="flex items-center gap-1 overflow-x-hidden">
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowHistory(true)}
|
||||
disabled={
|
||||
isDisabled || diagramHistory.length === 0
|
||||
}
|
||||
tooltipContent={dict.chat.diagramHistory}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<History className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={
|
||||
isDisabled || !isRealDiagram(chartXML)
|
||||
}
|
||||
tooltipContent={dict.chat.saveDiagram}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={triggerFileInput}
|
||||
disabled={isDisabled}
|
||||
tooltipContent={dict.chat.uploadFile}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
|
||||
{onUrlChange && (
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowUrlDialog(true)}
|
||||
disabled={isDisabled}
|
||||
tooltipContent={dict.chat.ExtractURL}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Link className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
|
||||
multiple
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
</div>
|
||||
<ModelSelector
|
||||
models={models}
|
||||
selectedModelId={selectedModelId}
|
||||
onSelect={onModelSelect}
|
||||
onConfigure={onConfigureModels}
|
||||
disabled={isDisabled}
|
||||
showUnvalidatedModels={showUnvalidatedModels}
|
||||
/>
|
||||
<div className="w-px h-5 bg-border mx-1" />
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isDisabled || !input.trim()}
|
||||
size="sm"
|
||||
className="h-8 px-4 rounded-xl font-medium shadow-sm"
|
||||
aria-label={
|
||||
isDisabled ? dict.chat.sending : dict.chat.send
|
||||
}
|
||||
>
|
||||
{isDisabled ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Send className="h-4 w-4 mr-1.5" />
|
||||
{dict.chat.send}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<HistoryDialog
|
||||
showHistory={showHistory}
|
||||
onToggleHistory={setShowHistory}
|
||||
/>
|
||||
<SaveDialog
|
||||
open={showSaveDialog}
|
||||
onOpenChange={setShowSaveDialog}
|
||||
onSave={(filename, format) =>
|
||||
saveDiagramToFile(
|
||||
filename,
|
||||
format,
|
||||
sessionId,
|
||||
dict.save.savedSuccessfully,
|
||||
)
|
||||
}
|
||||
defaultFilename={`diagram-${new Date()
|
||||
.toISOString()
|
||||
.slice(0, 10)}`}
|
||||
/>
|
||||
{onUrlChange && (
|
||||
<UrlInputDialog
|
||||
open={showUrlDialog}
|
||||
onOpenChange={setShowUrlDialog}
|
||||
onSubmit={handleUrlExtract}
|
||||
isExtracting={isExtractingUrl}
|
||||
/>
|
||||
)}
|
||||
</form>
|
||||
const items = e.clipboardData.items
|
||||
const imageItems = Array.from(items).filter((item) =>
|
||||
item.type.startsWith("image/"),
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
if (imageItems.length > 0) {
|
||||
const imageFiles = (
|
||||
await Promise.all(
|
||||
imageItems.map(async (item, index) => {
|
||||
const file = item.getAsFile()
|
||||
if (!file) return null
|
||||
return new File(
|
||||
[file],
|
||||
`pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
|
||||
{ type: file.type },
|
||||
)
|
||||
}),
|
||||
)
|
||||
).filter((f): f is File => f !== null)
|
||||
|
||||
const { validFiles, errors } = validateFiles(
|
||||
imageFiles,
|
||||
files.length,
|
||||
dict,
|
||||
)
|
||||
showValidationErrors(errors, dict)
|
||||
if (validFiles.length > 0) {
|
||||
onFileChange([...files, ...validFiles])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newFiles = Array.from(e.target.files || [])
|
||||
const { validFiles, errors } = validateFiles(
|
||||
newFiles,
|
||||
files.length,
|
||||
dict,
|
||||
)
|
||||
showValidationErrors(errors, dict)
|
||||
if (validFiles.length > 0) {
|
||||
onFileChange([...files, ...validFiles])
|
||||
}
|
||||
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ""
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveFile = (fileToRemove: File) => {
|
||||
onFileChange(files.filter((file) => file !== fileToRemove))
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ""
|
||||
}
|
||||
}
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(true)
|
||||
}
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(false)
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsDragging(false)
|
||||
|
||||
if (isDisabled) return
|
||||
|
||||
const droppedFiles = e.dataTransfer.files
|
||||
const supportedFiles = Array.from(droppedFiles).filter((file) =>
|
||||
isValidFileType(file),
|
||||
)
|
||||
|
||||
const { validFiles, errors } = validateFiles(
|
||||
supportedFiles,
|
||||
files.length,
|
||||
dict,
|
||||
)
|
||||
showValidationErrors(errors, dict)
|
||||
if (validFiles.length > 0) {
|
||||
onFileChange([...files, ...validFiles])
|
||||
}
|
||||
}
|
||||
|
||||
const handleUrlExtract = async (url: string) => {
|
||||
if (!onUrlChange) return
|
||||
|
||||
setIsExtractingUrl(true)
|
||||
|
||||
try {
|
||||
const existing = urlData
|
||||
? new Map(urlData)
|
||||
: new Map<string, UrlData>()
|
||||
existing.set(url, {
|
||||
url,
|
||||
title: url,
|
||||
content: "",
|
||||
charCount: 0,
|
||||
isExtracting: true,
|
||||
})
|
||||
onUrlChange(existing)
|
||||
|
||||
const data = await extractUrlContent(url)
|
||||
|
||||
const newUrlData = new Map(existing)
|
||||
newUrlData.set(url, data)
|
||||
onUrlChange(newUrlData)
|
||||
|
||||
setShowUrlDialog(false)
|
||||
} catch (error) {
|
||||
// Remove the URL from the data map on error
|
||||
const newUrlData = urlData
|
||||
? new Map(urlData)
|
||||
: new Map<string, UrlData>()
|
||||
newUrlData.delete(url)
|
||||
onUrlChange(newUrlData)
|
||||
showErrorToast(
|
||||
<span className="text-muted-foreground">
|
||||
{error instanceof Error
|
||||
? error.message
|
||||
: "Failed to extract URL content"}
|
||||
</span>,
|
||||
)
|
||||
} finally {
|
||||
setIsExtractingUrl(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className={`w-full transition-all duration-200 ${
|
||||
isDragging
|
||||
? "ring-2 ring-primary ring-offset-2 rounded-2xl"
|
||||
: ""
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{/* File & URL previews */}
|
||||
{(files.length > 0 || (urlData && urlData.size > 0)) && (
|
||||
<div className="mb-3">
|
||||
<FilePreviewList
|
||||
files={files}
|
||||
onRemoveFile={handleRemoveFile}
|
||||
pdfData={pdfData}
|
||||
urlData={urlData}
|
||||
onRemoveUrl={
|
||||
onUrlChange
|
||||
? (url) => {
|
||||
const next = new Map(urlData)
|
||||
next.delete(url)
|
||||
onUrlChange(next)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPaste={handlePaste}
|
||||
placeholder={dict.chat.placeholder}
|
||||
disabled={isDisabled}
|
||||
aria-label="Chat input"
|
||||
className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
|
||||
<div className="flex items-center gap-1 overflow-x-hidden">
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowHistory(true)}
|
||||
disabled={isDisabled || diagramHistory.length === 0}
|
||||
tooltipContent={dict.chat.diagramHistory}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<History className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={isDisabled}
|
||||
tooltipContent={dict.chat.saveDiagram}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={triggerFileInput}
|
||||
disabled={isDisabled}
|
||||
tooltipContent={dict.chat.uploadFile}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
|
||||
{onUrlChange && (
|
||||
<ButtonWithTooltip
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowUrlDialog(true)}
|
||||
disabled={isDisabled}
|
||||
tooltipContent={dict.chat.ExtractURL}
|
||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Link className="h-4 w-4" />
|
||||
</ButtonWithTooltip>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
|
||||
multiple
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
</div>
|
||||
<ModelSelector
|
||||
models={models}
|
||||
selectedModelId={selectedModelId}
|
||||
onSelect={onModelSelect}
|
||||
onConfigure={onConfigureModels}
|
||||
disabled={isDisabled}
|
||||
showUnvalidatedModels={showUnvalidatedModels}
|
||||
/>
|
||||
<div className="w-px h-5 bg-border mx-1" />
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isDisabled || !input.trim()}
|
||||
size="sm"
|
||||
className="h-8 px-4 rounded-xl font-medium shadow-sm"
|
||||
aria-label={
|
||||
isDisabled ? dict.chat.sending : dict.chat.send
|
||||
}
|
||||
>
|
||||
{isDisabled ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Send className="h-4 w-4 mr-1.5" />
|
||||
{dict.chat.send}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<HistoryDialog
|
||||
showHistory={showHistory}
|
||||
onToggleHistory={setShowHistory}
|
||||
/>
|
||||
<SaveDialog
|
||||
open={showSaveDialog}
|
||||
onOpenChange={setShowSaveDialog}
|
||||
onSave={(filename, format) =>
|
||||
saveDiagramToFile(
|
||||
filename,
|
||||
format,
|
||||
sessionId,
|
||||
dict.save.savedSuccessfully,
|
||||
)
|
||||
}
|
||||
defaultFilename={`diagram-${new Date()
|
||||
.toISOString()
|
||||
.slice(0, 10)}`}
|
||||
/>
|
||||
{onUrlChange && (
|
||||
<UrlInputDialog
|
||||
open={showUrlDialog}
|
||||
onOpenChange={setShowUrlDialog}
|
||||
onSubmit={handleUrlExtract}
|
||||
isExtracting={isExtractingUrl}
|
||||
/>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
Copy,
|
||||
FileCode,
|
||||
FileText,
|
||||
Link,
|
||||
Pencil,
|
||||
RotateCcw,
|
||||
ThumbsDown,
|
||||
@@ -29,8 +28,6 @@ import {
|
||||
import { ChatLobby } from "@/components/chat/ChatLobby"
|
||||
import { ToolCallCard } from "@/components/chat/ToolCallCard"
|
||||
import type { DiagramOperation, ToolPartLike } from "@/components/chat/types"
|
||||
import type { ValidationState } from "@/components/chat/ValidationCard"
|
||||
import { ValidationCard } from "@/components/chat/ValidationCard"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { useDictionary } from "@/hooks/use-dictionary"
|
||||
import { getApiEndpoint } from "@/lib/base-path"
|
||||
@@ -60,20 +57,20 @@ function getCompleteOperations(
|
||||
|
||||
import { useDiagram } from "@/contexts/diagram-context"
|
||||
|
||||
// Helper to split text content into regular text and file/URL sections (PDF, text files, or URLs)
|
||||
// Helper to split text content into regular text and file sections (PDF or text files)
|
||||
interface TextSection {
|
||||
type: "text" | "file" | "url"
|
||||
type: "text" | "file"
|
||||
content: string
|
||||
filename?: string
|
||||
charCount?: number
|
||||
fileType?: "pdf" | "text" | "url"
|
||||
fileType?: "pdf" | "text"
|
||||
}
|
||||
|
||||
function splitTextIntoFileSections(text: string): TextSection[] {
|
||||
const sections: TextSection[] = []
|
||||
// Match [PDF: filename], [File: filename], or [URL: url] patterns
|
||||
// Match [PDF: filename] or [File: filename] patterns
|
||||
const filePattern =
|
||||
/\[(PDF|File|URL):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File|URL):|$)/g
|
||||
/\[(PDF|File):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File):|$)/g
|
||||
let lastIndex = 0
|
||||
let match
|
||||
|
||||
@@ -84,34 +81,28 @@ function splitTextIntoFileSections(text: string): TextSection[] {
|
||||
sections.push({ type: "text", content: beforeText })
|
||||
}
|
||||
|
||||
// Add file/url section
|
||||
const sectionType = match[1].toLowerCase()
|
||||
const fileType =
|
||||
sectionType === "pdf"
|
||||
? "pdf"
|
||||
: sectionType === "url"
|
||||
? "url"
|
||||
: "text"
|
||||
// Add file section
|
||||
const fileType = match[1].toLowerCase() === "pdf" ? "pdf" : "text"
|
||||
const filename = match[2].trim()
|
||||
const content = match[3].trim()
|
||||
const fileContent = match[3].trim()
|
||||
sections.push({
|
||||
type: sectionType === "url" ? "url" : "file",
|
||||
content: content,
|
||||
type: "file",
|
||||
content: fileContent,
|
||||
filename,
|
||||
charCount: content.length,
|
||||
charCount: fileContent.length,
|
||||
fileType,
|
||||
})
|
||||
|
||||
lastIndex = match.index + match[0].length
|
||||
}
|
||||
|
||||
// Add remaining text after last section
|
||||
// Add remaining text after last file section
|
||||
const remainingText = text.slice(lastIndex).trim()
|
||||
if (remainingText) {
|
||||
sections.push({ type: "text", content: remainingText })
|
||||
}
|
||||
|
||||
// If no file/url sections found, return original text
|
||||
// If no file sections found, return original text
|
||||
if (sections.length === 0) {
|
||||
sections.push({ type: "text", content: text })
|
||||
}
|
||||
@@ -130,8 +121,8 @@ const getMessageTextContent = (message: UIMessage): string => {
|
||||
// Get only the user's original text, excluding appended file content
|
||||
const getUserOriginalText = (message: UIMessage): string => {
|
||||
const fullText = getMessageTextContent(message)
|
||||
// Strip out [PDF: ...], [File: ...], and [URL: ...] sections that were appended
|
||||
const filePattern = /\n\n\[(PDF|File|URL):\s*[^\]]+\]\n[\s\S]*$/
|
||||
// Strip out [PDF: ...] and [File: ...] sections that were appended
|
||||
const filePattern = /\n\n\[(PDF|File):\s*[^\]]+\]\n[\s\S]*$/
|
||||
return fullText.replace(filePattern, "").trim()
|
||||
}
|
||||
|
||||
@@ -157,8 +148,6 @@ interface ChatMessageDisplayProps {
|
||||
onSelectSession?: (id: string) => void
|
||||
onDeleteSession?: (id: string) => void
|
||||
loadedMessageIdsRef?: MutableRefObject<Set<string>>
|
||||
validationStates?: Record<string, ValidationState>
|
||||
onImproveWithSuggestions?: (feedback: string) => void
|
||||
}
|
||||
|
||||
export function ChatMessageDisplay({
|
||||
@@ -176,8 +165,6 @@ export function ChatMessageDisplay({
|
||||
onSelectSession,
|
||||
onDeleteSession,
|
||||
loadedMessageIdsRef,
|
||||
validationStates = {},
|
||||
onImproveWithSuggestions,
|
||||
}: ChatMessageDisplayProps) {
|
||||
const dict = useDictionary()
|
||||
const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
|
||||
@@ -442,15 +429,11 @@ export function ChatMessageDisplay({
|
||||
const toolPart = part as ToolPartLike
|
||||
const { toolCallId, state, input } = toolPart
|
||||
|
||||
// Auto-collapse on completion, but only if user hasn't manually toggled
|
||||
if (state === "output-available") {
|
||||
setExpandedTools((prev) => {
|
||||
// Only auto-collapse if not already set (user hasn't interacted)
|
||||
if (prev[toolCallId] === undefined) {
|
||||
return { ...prev, [toolCallId]: false }
|
||||
}
|
||||
return prev
|
||||
})
|
||||
setExpandedTools((prev) => ({
|
||||
...prev,
|
||||
[toolCallId]: false,
|
||||
}))
|
||||
}
|
||||
|
||||
if (
|
||||
@@ -928,56 +911,30 @@ export function ChatMessageDisplay({
|
||||
return groups.map(
|
||||
(group, groupIndex) => {
|
||||
if (group.type === "tool") {
|
||||
const toolPart = group
|
||||
.parts[0] as ToolPartLike
|
||||
const toolCallId =
|
||||
toolPart.toolCallId
|
||||
const isDisplayDiagram =
|
||||
toolPart.type ===
|
||||
"tool-display_diagram"
|
||||
const validationState =
|
||||
validationStates[
|
||||
toolCallId
|
||||
]
|
||||
|
||||
return (
|
||||
<div
|
||||
<ToolCallCard
|
||||
key={`${message.id}-tool-${group.startIndex}`}
|
||||
>
|
||||
<ToolCallCard
|
||||
part={
|
||||
toolPart
|
||||
}
|
||||
expandedTools={
|
||||
expandedTools
|
||||
}
|
||||
setExpandedTools={
|
||||
setExpandedTools
|
||||
}
|
||||
onCopy={
|
||||
copyMessageToClipboard
|
||||
}
|
||||
copiedToolCallId={
|
||||
copiedToolCallId
|
||||
}
|
||||
copyFailedToolCallId={
|
||||
copyFailedToolCallId
|
||||
}
|
||||
dict={dict}
|
||||
/>
|
||||
{/* Show validation card for display_diagram tools */}
|
||||
{isDisplayDiagram &&
|
||||
validationState && (
|
||||
<ValidationCard
|
||||
state={
|
||||
validationState
|
||||
}
|
||||
onImproveWithSuggestions={
|
||||
onImproveWithSuggestions
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
part={
|
||||
group
|
||||
.parts[0] as ToolPartLike
|
||||
}
|
||||
expandedTools={
|
||||
expandedTools
|
||||
}
|
||||
setExpandedTools={
|
||||
setExpandedTools
|
||||
}
|
||||
onCopy={
|
||||
copyMessageToClipboard
|
||||
}
|
||||
copiedToolCallId={
|
||||
copiedToolCallId
|
||||
}
|
||||
copyFailedToolCallId={
|
||||
copyFailedToolCallId
|
||||
}
|
||||
dict={dict}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1091,14 +1048,12 @@ export function ChatMessageDisplay({
|
||||
) => {
|
||||
if (
|
||||
section.type ===
|
||||
"file" ||
|
||||
section.type ===
|
||||
"url"
|
||||
"file"
|
||||
) {
|
||||
const sectionKey = `${message.id}-${section.type}-${partIndex}-${sectionIndex}`
|
||||
const pdfKey = `${message.id}-file-${partIndex}-${sectionIndex}`
|
||||
const isExpanded =
|
||||
expandedPdfSections[
|
||||
sectionKey
|
||||
pdfKey
|
||||
] ??
|
||||
false
|
||||
const charDisplay =
|
||||
@@ -1107,27 +1062,10 @@ export function ChatMessageDisplay({
|
||||
1000
|
||||
? `${(section.charCount / 1000).toFixed(1)}k`
|
||||
: section.charCount
|
||||
|
||||
// Icon selector
|
||||
const Icon =
|
||||
section.fileType ===
|
||||
"pdf"
|
||||
? FileText
|
||||
: section.fileType ===
|
||||
"url"
|
||||
? Link
|
||||
: FileCode
|
||||
|
||||
const iconColor =
|
||||
section.fileType ===
|
||||
"pdf"
|
||||
? "text-red-500"
|
||||
: "text-blue-700"
|
||||
|
||||
return (
|
||||
<div
|
||||
key={
|
||||
sectionKey
|
||||
pdfKey
|
||||
}
|
||||
className="rounded-lg border border-border/60 bg-muted/30 overflow-hidden"
|
||||
>
|
||||
@@ -1142,7 +1080,7 @@ export function ChatMessageDisplay({
|
||||
prev,
|
||||
) => ({
|
||||
...prev,
|
||||
[sectionKey]:
|
||||
[pdfKey]:
|
||||
!isExpanded,
|
||||
}),
|
||||
)
|
||||
@@ -1150,10 +1088,13 @@ export function ChatMessageDisplay({
|
||||
className="w-full flex items-center justify-between px-3 py-2 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon
|
||||
className={`h-4 w-4 ${iconColor}`}
|
||||
/>
|
||||
<span className="text-xs font-medium truncate max-w-[200px]">
|
||||
{section.fileType ===
|
||||
"pdf" ? (
|
||||
<FileText className="h-4 w-4 text-red-500" />
|
||||
) : (
|
||||
<FileCode className="h-4 w-4 text-blue-500" />
|
||||
)}
|
||||
<span className="text-xs font-medium">
|
||||
{
|
||||
section.filename
|
||||
}
|
||||
|
||||
@@ -29,18 +29,15 @@ import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
|
||||
import { useDictionary } from "@/hooks/use-dictionary"
|
||||
import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
|
||||
import { useSessionManager } from "@/hooks/use-session-manager"
|
||||
import { useValidateDiagram } from "@/hooks/use-validate-diagram"
|
||||
import { getApiEndpoint } from "@/lib/base-path"
|
||||
import { findCachedResponse } from "@/lib/cached-responses"
|
||||
import { formatMessage } from "@/lib/i18n/utils"
|
||||
import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
|
||||
import { sanitizeMessages } from "@/lib/session-storage"
|
||||
import { STORAGE_KEYS } from "@/lib/storage"
|
||||
import type { UrlData } from "@/lib/url-utils"
|
||||
import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
|
||||
import { useQuotaManager } from "@/lib/use-quota-manager"
|
||||
import { cn, formatXML, isRealDiagram } from "@/lib/utils"
|
||||
import type { ValidationState } from "./chat/ValidationCard"
|
||||
import { ChatMessageDisplay } from "./chat-message-display"
|
||||
import { DevXmlSimulator } from "./dev-xml-simulator"
|
||||
|
||||
@@ -78,8 +75,7 @@ interface ChatPanelProps {
|
||||
// Constants for tool states
|
||||
const TOOL_ERROR_STATE = "output-error" as const
|
||||
const DEBUG = process.env.NODE_ENV === "development"
|
||||
// Increased to 3 to support VLM validation retries (matches MAX_VALIDATION_RETRIES)
|
||||
const MAX_AUTO_RETRY_COUNT = 3
|
||||
const MAX_AUTO_RETRY_COUNT = 1
|
||||
|
||||
const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
|
||||
|
||||
@@ -124,7 +120,6 @@ export default function ChatPanel({
|
||||
latestSvg,
|
||||
clearDiagram,
|
||||
getThumbnailSvg,
|
||||
captureValidationPng,
|
||||
diagramHistory,
|
||||
setDiagramHistory,
|
||||
} = useDiagram()
|
||||
@@ -137,22 +132,26 @@ export default function ChatPanel({
|
||||
const onFetchChart = (saveToHistory = true) => {
|
||||
return Promise.race([
|
||||
new Promise<string>((resolve) => {
|
||||
resolverRef.current = resolve
|
||||
if (resolverRef && "current" in resolverRef) {
|
||||
resolverRef.current = resolve
|
||||
}
|
||||
if (saveToHistory) {
|
||||
onExport()
|
||||
} else {
|
||||
handleExportWithoutHistory()
|
||||
}
|
||||
}),
|
||||
new Promise<string>((_, reject) => {
|
||||
const currentResolver = resolverRef.current
|
||||
setTimeout(() => {
|
||||
if (resolverRef.current === currentResolver) {
|
||||
resolverRef.current = null
|
||||
}
|
||||
reject(new Error("Chart export timed out after 10 seconds"))
|
||||
}, 10000)
|
||||
}),
|
||||
new Promise<string>((_, reject) =>
|
||||
setTimeout(
|
||||
() =>
|
||||
reject(
|
||||
new Error(
|
||||
"Chart export timed out after 10 seconds",
|
||||
),
|
||||
),
|
||||
10000,
|
||||
),
|
||||
),
|
||||
])
|
||||
}
|
||||
|
||||
@@ -174,8 +173,6 @@ export default function ChatPanel({
|
||||
const [dailyTokenLimit, setDailyTokenLimit] = useState(0)
|
||||
const [tpmLimit, setTpmLimit] = useState(0)
|
||||
const [minimalStyle, setMinimalStyle] = useState(false)
|
||||
const [vlmValidationEnabled, setVlmValidationEnabled] = useState(false)
|
||||
const [shouldFocusInput, setShouldFocusInput] = useState(false)
|
||||
|
||||
// Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
|
||||
useEffect(() => {
|
||||
@@ -185,14 +182,6 @@ export default function ChatPanel({
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Load VLM validation setting from localStorage on mount
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEYS.vlmValidationEnabled)
|
||||
if (stored !== null) {
|
||||
setVlmValidationEnabled(stored === "true")
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Check config on mount
|
||||
useEffect(() => {
|
||||
fetch(getApiEndpoint("/api/config"))
|
||||
@@ -280,46 +269,6 @@ export default function ChatPanel({
|
||||
> | null>(null)
|
||||
const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second
|
||||
|
||||
// Validation state for displaying VLM validation progress
|
||||
// Key: toolCallId, Value: ValidationState
|
||||
const [validationStates, setValidationStates] = useState<
|
||||
Record<string, ValidationState>
|
||||
>({})
|
||||
|
||||
// Callback to update validation state from tool handler
|
||||
const handleValidationStateChange = useCallback(
|
||||
(toolCallId: string, state: ValidationState) => {
|
||||
setValidationStates((prev) => ({
|
||||
...prev,
|
||||
[toolCallId]: state,
|
||||
}))
|
||||
},
|
||||
[],
|
||||
)
|
||||
|
||||
// Handler for VLM validation setting change
|
||||
const handleVlmValidationChange = useCallback((value: boolean) => {
|
||||
setVlmValidationEnabled(value)
|
||||
localStorage.setItem(STORAGE_KEYS.vlmValidationEnabled, String(value))
|
||||
}, [])
|
||||
|
||||
// Ref to store the sendMessage function for use in callbacks
|
||||
const sendMessageRef = useRef<typeof sendMessage | null>(null)
|
||||
|
||||
// Callback to improve diagram with validation suggestions
|
||||
const handleImproveWithSuggestions = useCallback((feedback: string) => {
|
||||
if (sendMessageRef.current) {
|
||||
// Send the feedback as a new user message to trigger regeneration
|
||||
sendMessageRef.current({
|
||||
role: "user",
|
||||
parts: [{ type: "text", text: feedback }],
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
// VLM validation hook using AI SDK's useObject
|
||||
const { validateWithFallback } = useValidateDiagram()
|
||||
|
||||
// Diagram tool handlers (display_diagram, edit_diagram, append_diagram)
|
||||
const { handleToolCall } = useDiagramToolHandlers({
|
||||
partialXmlRef,
|
||||
@@ -328,11 +277,6 @@ export default function ChatPanel({
|
||||
onDisplayChart,
|
||||
onFetchChart,
|
||||
onExport,
|
||||
captureValidationPng,
|
||||
validateDiagram: validateWithFallback,
|
||||
enableVlmValidation: vlmValidationEnabled,
|
||||
sessionId,
|
||||
onValidationStateChange: handleValidationStateChange,
|
||||
})
|
||||
|
||||
const { messages, sendMessage, addToolOutput, status, error, setMessages } =
|
||||
@@ -481,11 +425,6 @@ export default function ChatPanel({
|
||||
},
|
||||
})
|
||||
|
||||
// Store sendMessage in ref for use in callbacks (like handleImproveWithSuggestions)
|
||||
useEffect(() => {
|
||||
sendMessageRef.current = sendMessage
|
||||
}, [sendMessage])
|
||||
|
||||
// Ref to track latest messages for unload persistence
|
||||
const messagesRef = useRef(messages)
|
||||
useEffect(() => {
|
||||
@@ -581,7 +520,7 @@ export default function ChatPanel({
|
||||
|
||||
try {
|
||||
const currentSession = sessionManager.currentSession
|
||||
if (currentSession) {
|
||||
if (currentSession && currentSession.messages.length > 0) {
|
||||
// Restore from session manager (IndexedDB)
|
||||
justLoadedSessionRef.current = true
|
||||
syncUIWithSession(currentSession)
|
||||
@@ -618,7 +557,7 @@ export default function ChatPanel({
|
||||
lastSyncedSessionIdRef.current = newSessionId
|
||||
|
||||
// Sync UI with new session
|
||||
if (newSession) {
|
||||
if (newSession && newSession.messages.length > 0) {
|
||||
justLoadedSessionRef.current = true
|
||||
syncUIWithSession(newSession)
|
||||
} else if (!newSession) {
|
||||
@@ -673,7 +612,7 @@ export default function ChatPanel({
|
||||
// Debounce: save after 1 second of no changes
|
||||
localStorageDebounceRef.current = setTimeout(async () => {
|
||||
try {
|
||||
if (messages.length > 0 || hasDiagramNow) {
|
||||
if (messages.length > 0) {
|
||||
const sessionData = await buildSessionData({
|
||||
// Only capture thumbnail if there was a diagram AND this isn't a no-diagram session
|
||||
withThumbnail: hasDiagramNow && !isNodiagramSession,
|
||||
@@ -695,12 +634,12 @@ export default function ChatPanel({
|
||||
}
|
||||
}
|
||||
}, [
|
||||
chartXML,
|
||||
messages,
|
||||
status,
|
||||
sessionIsAvailable,
|
||||
currentSessionId,
|
||||
buildSessionData,
|
||||
chartXML,
|
||||
])
|
||||
|
||||
// Update URL when a new session is created (first message sent)
|
||||
@@ -726,8 +665,7 @@ export default function ChatPanel({
|
||||
const handleVisibilityChange = async () => {
|
||||
if (
|
||||
document.visibilityState === "hidden" &&
|
||||
(messagesRef.current.length > 0 ||
|
||||
isRealDiagram(chartXMLRef.current))
|
||||
messagesRef.current.length > 0
|
||||
) {
|
||||
try {
|
||||
// Attempt to save session - browser may not wait for completion
|
||||
@@ -882,7 +820,6 @@ export default function ChatPanel({
|
||||
} else {
|
||||
justLoadedSessionIdRef.current = null
|
||||
}
|
||||
setValidationStates({}) // Clear validation states when switching sessions
|
||||
syncUIWithSession(sessionData)
|
||||
router.replace(`?session=${sessionId}`, { scroll: false })
|
||||
}
|
||||
@@ -920,10 +857,8 @@ export default function ChatPanel({
|
||||
|
||||
// Clear UI state (can't use syncUIWithSession here because we also need to clear files)
|
||||
setMessages([])
|
||||
setInput("")
|
||||
clearDiagram()
|
||||
setDiagramHistory([])
|
||||
setValidationStates({}) // Clear validation states to prevent memory leak
|
||||
handleFileChange([]) // Use handleFileChange to also clear pdfData
|
||||
setUrlData(new Map())
|
||||
const newSessionId = `session-${Date.now()}-${Math.random()
|
||||
@@ -936,9 +871,6 @@ export default function ChatPanel({
|
||||
|
||||
// Clear URL param to show blank state
|
||||
router.replace(window.location.pathname, { scroll: false })
|
||||
|
||||
// After starting a fresh chat, move focus back to the chat input
|
||||
setShouldFocusInput(true)
|
||||
}, [
|
||||
clearDiagram,
|
||||
handleFileChange,
|
||||
@@ -1032,14 +964,6 @@ export default function ChatPanel({
|
||||
...(config.awsSessionToken && {
|
||||
"x-aws-session-token": config.awsSessionToken,
|
||||
}),
|
||||
// Vertex AI credentials (Express Mode)
|
||||
...(config.vertexApiKey && {
|
||||
"x-vertex-api-key": config.vertexApiKey,
|
||||
}),
|
||||
}),
|
||||
// Send selected model ID for server model lookup (apiKeyEnv/baseUrlEnv)
|
||||
...(config.selectedModelId && {
|
||||
"x-selected-model-id": config.selectedModelId,
|
||||
}),
|
||||
...(minimalStyle && {
|
||||
"x-minimal-style": "true",
|
||||
@@ -1330,8 +1254,6 @@ export default function ChatPanel({
|
||||
onSelectSession={handleSelectSession}
|
||||
onDeleteSession={handleDeleteSession}
|
||||
loadedMessageIdsRef={loadedMessageIdsRef}
|
||||
validationStates={validationStates}
|
||||
onImproveWithSuggestions={handleImproveWithSuggestions}
|
||||
/>
|
||||
</main>
|
||||
|
||||
@@ -1367,8 +1289,6 @@ export default function ChatPanel({
|
||||
onModelSelect={modelConfig.setSelectedModelId}
|
||||
showUnvalidatedModels={modelConfig.showUnvalidatedModels}
|
||||
onConfigureModels={() => setShowModelConfigDialog(true)}
|
||||
shouldFocus={shouldFocusInput}
|
||||
onFocused={() => setShouldFocusInput(false)}
|
||||
/>
|
||||
</footer>
|
||||
|
||||
@@ -1381,8 +1301,6 @@ export default function ChatPanel({
|
||||
onToggleDarkMode={onToggleDarkMode}
|
||||
minimalStyle={minimalStyle}
|
||||
onMinimalStyleChange={setMinimalStyle}
|
||||
vlmValidationEnabled={vlmValidationEnabled}
|
||||
onVlmValidationChange={handleVlmValidationChange}
|
||||
/>
|
||||
|
||||
<ModelConfigDialog
|
||||
|
||||
@@ -67,8 +67,8 @@ export function ToolCallCard({
|
||||
}: ToolCallCardProps) {
|
||||
const callId = part.toolCallId
|
||||
const { state, input, output } = part
|
||||
// Default to expanded for all states (user can manually collapse if needed)
|
||||
const isExpanded = expandedTools[callId] ?? true
|
||||
// Default to collapsed if tool is complete, expanded if still streaming
|
||||
const isExpanded = expandedTools[callId] ?? state !== "output-available"
|
||||
const toolName = part.type?.replace("tool-", "")
|
||||
const isCopied = copiedToolCallId === callId
|
||||
|
||||
|
||||
@@ -1,328 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
AlertTriangle,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Eye,
|
||||
ImageIcon,
|
||||
RefreshCw,
|
||||
X,
|
||||
} from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import { useState } from "react"
|
||||
import { useDictionary } from "@/hooks/use-dictionary"
|
||||
import type { ValidationResult } from "@/lib/diagram-validator"
|
||||
|
||||
export type ValidationStatus =
|
||||
| "idle"
|
||||
| "capturing"
|
||||
| "validating"
|
||||
| "success"
|
||||
| "success_with_warnings"
|
||||
| "failed"
|
||||
| "error"
|
||||
| "skipped"
|
||||
|
||||
export interface ValidationState {
|
||||
status: ValidationStatus
|
||||
attempt?: number
|
||||
maxAttempts?: number
|
||||
result?: ValidationResult
|
||||
error?: string
|
||||
imageData?: string // Base64 PNG data URL
|
||||
}
|
||||
|
||||
interface ValidationCardProps {
|
||||
state: ValidationState
|
||||
onImproveWithSuggestions?: (feedback: string) => void
|
||||
}
|
||||
|
||||
export function ValidationCard({
|
||||
state,
|
||||
onImproveWithSuggestions,
|
||||
}: ValidationCardProps) {
|
||||
const dict = useDictionary()
|
||||
const [isExpanded, setIsExpanded] = useState(
|
||||
state.status === "validating" || state.status === "failed",
|
||||
)
|
||||
const [hasRequestedImprovement, setHasRequestedImprovement] =
|
||||
useState(false)
|
||||
|
||||
// Generate improvement feedback from validation result
|
||||
const generateImprovementFeedback = (): string => {
|
||||
if (!state.result) return ""
|
||||
|
||||
const lines: string[] = []
|
||||
lines.push(
|
||||
"Please improve the diagram based on the following visual analysis feedback:",
|
||||
)
|
||||
lines.push("")
|
||||
|
||||
if (state.result.issues.length > 0) {
|
||||
lines.push("Issues to address:")
|
||||
for (const issue of state.result.issues) {
|
||||
lines.push(
|
||||
` - [${issue.severity}] ${issue.type}: ${issue.description}`,
|
||||
)
|
||||
}
|
||||
lines.push("")
|
||||
}
|
||||
|
||||
if (state.result.suggestions.length > 0) {
|
||||
lines.push("Suggestions for improvement:")
|
||||
for (const suggestion of state.result.suggestions) {
|
||||
lines.push(` - ${suggestion}`)
|
||||
}
|
||||
lines.push("")
|
||||
}
|
||||
|
||||
lines.push("Regenerate the diagram with these improvements applied.")
|
||||
return lines.join("\n")
|
||||
}
|
||||
|
||||
const handleImproveClick = () => {
|
||||
if (
|
||||
!onImproveWithSuggestions ||
|
||||
!state.result ||
|
||||
hasRequestedImprovement
|
||||
)
|
||||
return
|
||||
setHasRequestedImprovement(true)
|
||||
const feedback = generateImprovementFeedback()
|
||||
onImproveWithSuggestions(feedback)
|
||||
}
|
||||
|
||||
// Check if we should show the improve button
|
||||
const showImproveButton =
|
||||
onImproveWithSuggestions &&
|
||||
state.result &&
|
||||
(state.status === "success" ||
|
||||
state.status === "success_with_warnings" ||
|
||||
state.status === "skipped") &&
|
||||
(state.result.issues.length > 0 || state.result.suggestions.length > 0)
|
||||
|
||||
const getStatusDisplay = () => {
|
||||
switch (state.status) {
|
||||
case "capturing":
|
||||
return {
|
||||
label: dict.validation.capturing,
|
||||
color: "text-blue-600 bg-blue-50",
|
||||
icon: (
|
||||
<div className="h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
||||
),
|
||||
}
|
||||
case "validating":
|
||||
return {
|
||||
label: state.attempt
|
||||
? dict.validation.validatingWithAttempt
|
||||
.replace("{attempt}", String(state.attempt))
|
||||
.replace("{max}", String(state.maxAttempts || 3))
|
||||
: dict.validation.validating,
|
||||
color: "text-blue-600 bg-blue-50",
|
||||
icon: (
|
||||
<div className="h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
||||
),
|
||||
}
|
||||
case "success":
|
||||
return {
|
||||
label: dict.validation.valid,
|
||||
color: "text-green-600 bg-green-50",
|
||||
icon: <Check className="h-4 w-4" aria-hidden="true" />,
|
||||
}
|
||||
case "success_with_warnings":
|
||||
return {
|
||||
label: dict.validation.validWithWarnings,
|
||||
color: "text-amber-600 bg-amber-50",
|
||||
icon: (
|
||||
<AlertTriangle className="h-4 w-4" aria-hidden="true" />
|
||||
),
|
||||
}
|
||||
case "failed":
|
||||
return {
|
||||
label: dict.validation.issuesFound,
|
||||
color: "text-yellow-600 bg-yellow-50",
|
||||
icon: (
|
||||
<AlertTriangle className="h-4 w-4" aria-hidden="true" />
|
||||
),
|
||||
}
|
||||
case "error":
|
||||
return {
|
||||
label: dict.validation.error,
|
||||
color: "text-red-600 bg-red-50",
|
||||
icon: <X className="h-4 w-4" aria-hidden="true" />,
|
||||
}
|
||||
case "skipped":
|
||||
return {
|
||||
label: dict.validation.skipped,
|
||||
color: "text-gray-600 bg-gray-50",
|
||||
icon: <Check className="h-4 w-4" aria-hidden="true" />,
|
||||
}
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const statusDisplay = getStatusDisplay()
|
||||
if (!statusDisplay || state.status === "idle") return null
|
||||
|
||||
return (
|
||||
<div className="my-3 rounded-xl border border-border/60 bg-muted/30 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-muted/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
|
||||
<Eye
|
||||
className="w-3.5 h-3.5 text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-foreground/80">
|
||||
{dict.validation.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`text-xs font-medium px-2 py-0.5 rounded-full flex items-center gap-1 ${statusDisplay.color}`}
|
||||
>
|
||||
{statusDisplay.icon}
|
||||
<span className="ml-1">{statusDisplay.label}</span>
|
||||
</span>
|
||||
{(state.result || state.error) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1 rounded hover:bg-muted transition-colors"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronUp
|
||||
className="w-4 h-4 text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
<ChevronDown
|
||||
className="w-4 h-4 text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Validation details when expanded */}
|
||||
{isExpanded && (state.result || state.imageData) && (
|
||||
<div className="px-4 py-3 border-t border-border/40 bg-muted/20 space-y-3">
|
||||
{/* Captured image */}
|
||||
{state.imageData && (
|
||||
<div>
|
||||
<div className="text-xs font-medium text-foreground/70 mb-2 flex items-center gap-1">
|
||||
<ImageIcon
|
||||
className="h-3 w-3"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{dict.validation.capturedScreenshot}
|
||||
</div>
|
||||
<div className="rounded-lg border border-border/50 overflow-hidden bg-white">
|
||||
<Image
|
||||
src={state.imageData}
|
||||
alt="Captured diagram for validation"
|
||||
width={400}
|
||||
height={300}
|
||||
className="w-full h-auto max-h-48 object-contain"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Issues */}
|
||||
{state.result && state.result.issues.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs font-medium text-foreground/70 mb-2">
|
||||
{dict.validation.issuesFoundLabel}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{state.result.issues.map((issue, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`text-xs px-3 py-2 rounded-lg border ${
|
||||
issue.severity === "critical"
|
||||
? "bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300"
|
||||
: "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-300"
|
||||
}`}
|
||||
>
|
||||
<span className="font-medium uppercase text-[10px] mr-2">
|
||||
[{issue.type}]
|
||||
</span>
|
||||
{issue.description}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Suggestions */}
|
||||
{state.result && state.result.suggestions.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs font-medium text-foreground/70 mb-2">
|
||||
{dict.validation.suggestions}
|
||||
</div>
|
||||
<ul className="text-xs text-foreground/60 space-y-1 list-disc list-inside">
|
||||
{state.result.suggestions.map(
|
||||
(suggestion, index) => (
|
||||
<li key={index}>{suggestion}</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Valid result message */}
|
||||
{state.result?.valid &&
|
||||
state.result.issues.length === 0 && (
|
||||
<div className="text-xs text-green-600 dark:text-green-400">
|
||||
{dict.validation.passedValidation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Improve with Suggestions button - shown when validation passed but has suggestions */}
|
||||
{showImproveButton && (
|
||||
<div className="px-4 py-3 border-t border-border/40 bg-muted/10">
|
||||
{hasRequestedImprovement ? (
|
||||
<div className="flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-green-600 dark:text-green-400">
|
||||
<Check className="h-4 w-4" aria-hidden="true" />
|
||||
{dict.validation.improvementRequested}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleImproveClick}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-lg transition-colors"
|
||||
>
|
||||
<RefreshCw
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{dict.validation.improveWithSuggestions}
|
||||
</button>
|
||||
<p className="text-xs text-muted-foreground mt-2 text-center">
|
||||
{dict.validation.regenerateWithFeedback}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error details when expanded */}
|
||||
{isExpanded && state.error && (
|
||||
<div className="px-4 py-3 border-t border-border/40 bg-red-50/50">
|
||||
<div className="text-xs text-red-600">{state.error}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -78,7 +78,6 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
|
||||
sglang: "openai", // SGLang is OpenAI-compatible
|
||||
gateway: "vercel",
|
||||
edgeone: "tencent-cloud",
|
||||
vertexai: "google",
|
||||
doubao: "bytedance",
|
||||
modelscope: "modelscope",
|
||||
}
|
||||
@@ -238,7 +237,6 @@ export function ModelConfigDialog({
|
||||
"awsAccessKeyId",
|
||||
"awsSecretAccessKey",
|
||||
"awsRegion",
|
||||
"vertexApiKey",
|
||||
]
|
||||
if (credentialFields.includes(field)) {
|
||||
setValidationStatus("idle")
|
||||
@@ -282,7 +280,6 @@ export function ModelConfigDialog({
|
||||
// Check credentials based on provider type
|
||||
const isBedrock = selectedProvider.provider === "bedrock"
|
||||
const isEdgeOne = selectedProvider.provider === "edgeone"
|
||||
const isVertexAI = selectedProvider.provider === "vertexai"
|
||||
if (isBedrock) {
|
||||
if (
|
||||
!selectedProvider.awsAccessKeyId ||
|
||||
@@ -291,11 +288,6 @@ export function ModelConfigDialog({
|
||||
) {
|
||||
return
|
||||
}
|
||||
} else if (isVertexAI) {
|
||||
// Vertex AI requires vertexApiKey for Express Mode
|
||||
if (!selectedProvider.vertexApiKey) {
|
||||
return
|
||||
}
|
||||
} else if (!isEdgeOne && !selectedProvider.apiKey) {
|
||||
return
|
||||
}
|
||||
@@ -336,8 +328,6 @@ export function ModelConfigDialog({
|
||||
awsAccessKeyId: selectedProvider.awsAccessKeyId,
|
||||
awsSecretAccessKey: selectedProvider.awsSecretAccessKey,
|
||||
awsRegion: selectedProvider.awsRegion,
|
||||
// Vertex AI credentials (Express Mode)
|
||||
vertexApiKey: selectedProvider.vertexApiKey,
|
||||
}),
|
||||
})
|
||||
const data = await response.json()
|
||||
@@ -443,12 +433,12 @@ export function ModelConfigDialog({
|
||||
}}
|
||||
className={cn(
|
||||
"group flex items-center gap-3 px-3 py-2.5 rounded-xl w-full",
|
||||
"text-left text-sm transition-all duration-150 border border-transparent",
|
||||
"text-left text-sm transition-all duration-150",
|
||||
"hover:bg-interactive-hover",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
selectedProviderId ===
|
||||
provider.id &&
|
||||
"bg-surface-0 shadow-sm border-border-subtle",
|
||||
"bg-surface-0 shadow-sm ring-1 ring-border-subtle",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@@ -877,162 +867,7 @@ export function ModelConfigDialog({
|
||||
</div>
|
||||
</>
|
||||
) : selectedProvider.provider ===
|
||||
"vertexai" ? (
|
||||
<>
|
||||
{/* Vertex AI API Key */}
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="vertex-api-key"
|
||||
className="text-xs font-medium flex items-center gap-1.5"
|
||||
>
|
||||
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
API Key
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
id="vertex-api-key"
|
||||
type={
|
||||
showApiKey
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
value={
|
||||
selectedProvider.vertexApiKey ||
|
||||
""
|
||||
}
|
||||
onChange={(
|
||||
e,
|
||||
) =>
|
||||
handleProviderUpdate(
|
||||
"vertexApiKey",
|
||||
e
|
||||
.target
|
||||
.value,
|
||||
)
|
||||
}
|
||||
placeholder="Enter your Vertex AI API key"
|
||||
className="h-9 pr-10 font-mono text-xs"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowApiKey(
|
||||
!showApiKey,
|
||||
)
|
||||
}
|
||||
aria-label={
|
||||
showApiKey
|
||||
? "Hide API key"
|
||||
: "Show API key"
|
||||
}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
|
||||
>
|
||||
{showApiKey ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
variant={
|
||||
validationStatus ===
|
||||
"success"
|
||||
? "outline"
|
||||
: "default"
|
||||
}
|
||||
size="sm"
|
||||
onClick={
|
||||
handleValidate
|
||||
}
|
||||
disabled={
|
||||
!selectedProvider.vertexApiKey ||
|
||||
validationStatus ===
|
||||
"validating"
|
||||
}
|
||||
className={cn(
|
||||
"h-9 px-4",
|
||||
validationStatus ===
|
||||
"success" &&
|
||||
"text-success border-success/30 bg-success-muted hover:bg-success-muted",
|
||||
)}
|
||||
>
|
||||
{validationStatus ===
|
||||
"validating" ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : validationStatus ===
|
||||
"success" ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-1.5 animate-check-pop" />
|
||||
{
|
||||
dict
|
||||
.modelConfig
|
||||
.verified
|
||||
}
|
||||
</>
|
||||
) : (
|
||||
dict
|
||||
.modelConfig
|
||||
.test
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{validationStatus ===
|
||||
"error" &&
|
||||
validationError && (
|
||||
<p className="text-xs text-destructive flex items-center gap-1">
|
||||
<X className="h-3 w-3" />
|
||||
{
|
||||
validationError
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Base URL (optional) */}
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="vertex-base-url"
|
||||
className="text-xs font-medium flex items-center gap-1.5"
|
||||
>
|
||||
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{formatMessage(
|
||||
dict.modelConfig
|
||||
.baseUrlWithExample,
|
||||
{
|
||||
example:
|
||||
PROVIDER_INFO[
|
||||
selectedProvider
|
||||
.provider
|
||||
]
|
||||
.defaultBaseUrl ||
|
||||
"https://api.example.com/v1",
|
||||
},
|
||||
)}
|
||||
</Label>
|
||||
<Input
|
||||
id="vertex-base-url"
|
||||
value={
|
||||
selectedProvider.baseUrl ||
|
||||
""
|
||||
}
|
||||
onChange={(e) =>
|
||||
handleProviderUpdate(
|
||||
"baseUrl",
|
||||
e.target
|
||||
.value,
|
||||
)
|
||||
}
|
||||
placeholder="Custom endpoint URL"
|
||||
className="h-9 font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : selectedProvider.provider ===
|
||||
"ollama" ||
|
||||
selectedProvider.provider ===
|
||||
"edgeone" ? (
|
||||
"edgeone" ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
@@ -1213,19 +1048,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" />
|
||||
{formatMessage(
|
||||
{
|
||||
dict.modelConfig
|
||||
.baseUrlWithExample,
|
||||
.baseUrl
|
||||
}
|
||||
<span className="text-muted-foreground font-normal">
|
||||
{
|
||||
example:
|
||||
PROVIDER_INFO[
|
||||
selectedProvider
|
||||
.provider
|
||||
]
|
||||
.defaultBaseUrl ||
|
||||
"https://api.example.com/v1",
|
||||
},
|
||||
)}
|
||||
dict
|
||||
.modelConfig
|
||||
.optional
|
||||
}
|
||||
</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="base-url"
|
||||
|
||||
@@ -5,10 +5,8 @@ import {
|
||||
Bot,
|
||||
Check,
|
||||
ChevronDown,
|
||||
Monitor,
|
||||
Server,
|
||||
Settings2,
|
||||
User,
|
||||
} from "lucide-react"
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import {
|
||||
@@ -21,7 +19,6 @@ import {
|
||||
ModelSelectorLogo,
|
||||
ModelSelectorName,
|
||||
ModelSelector as ModelSelectorRoot,
|
||||
ModelSelectorSectionHeader,
|
||||
ModelSelectorSeparator,
|
||||
ModelSelectorTrigger,
|
||||
} from "@/components/ai-elements/model-selector"
|
||||
@@ -52,7 +49,6 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
|
||||
sglang: "openai", // SGLang is OpenAI-compatible, use OpenAI logo
|
||||
gateway: "vercel",
|
||||
edgeone: "tencent-cloud",
|
||||
vertexai: "google",
|
||||
doubao: "bytedance",
|
||||
modelscope: "modelscope",
|
||||
}
|
||||
@@ -66,11 +62,7 @@ function groupModelsByProvider(
|
||||
{ provider: string; models: FlattenedModel[] }
|
||||
>()
|
||||
for (const model of models) {
|
||||
// For server models, strip "Server · " prefix for cleaner grouping
|
||||
const key =
|
||||
model.source === "server"
|
||||
? model.providerLabel.replace(/^Server · /, "")
|
||||
: model.providerLabel
|
||||
const key = model.providerLabel
|
||||
const existing = groups.get(key)
|
||||
if (existing) {
|
||||
existing.models.push(model)
|
||||
@@ -98,26 +90,10 @@ export function ModelSelector({
|
||||
}
|
||||
return models.filter((m) => m.validated === true)
|
||||
}, [models, showUnvalidatedModels])
|
||||
|
||||
// Separate server and user models
|
||||
const serverModels = useMemo(
|
||||
() => displayModels.filter((m) => m.source === "server"),
|
||||
const groupedModels = useMemo(
|
||||
() => groupModelsByProvider(displayModels),
|
||||
[displayModels],
|
||||
)
|
||||
const userModels = useMemo(
|
||||
() => displayModels.filter((m) => m.source !== "server"),
|
||||
[displayModels],
|
||||
)
|
||||
|
||||
// Group each category separately
|
||||
const groupedServerModels = useMemo(
|
||||
() => groupModelsByProvider(serverModels),
|
||||
[serverModels],
|
||||
)
|
||||
const groupedUserModels = useMemo(
|
||||
() => groupModelsByProvider(userModels),
|
||||
[userModels],
|
||||
)
|
||||
|
||||
// Find selected model for display
|
||||
const selectedModel = useMemo(
|
||||
@@ -184,7 +160,7 @@ export function ModelSelector({
|
||||
size="sm"
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"hover:bg-accent gap-1.5 h-8 px-2 transition-[padding,background-color] duration-150 ease-in-out",
|
||||
"hover:bg-accent gap-1.5 h-8 px-2 transition-all duration-150 ease-in-out",
|
||||
!showLabel && "px-1.5 justify-center",
|
||||
)}
|
||||
// accessibility: expose label to screen readers
|
||||
@@ -221,169 +197,83 @@ export function ModelSelector({
|
||||
: dict.modelConfig.noModelsFound}
|
||||
</ModelSelectorEmpty>
|
||||
|
||||
{/* Server Default Option - only show when no server models are configured */}
|
||||
{serverModels.length === 0 && (
|
||||
<ModelSelectorGroup
|
||||
heading={dict.modelConfig.default}
|
||||
{/* Server Default Option */}
|
||||
<ModelSelectorGroup heading={dict.modelConfig.default}>
|
||||
<ModelSelectorItem
|
||||
value="__server_default__"
|
||||
onSelect={handleSelect}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
!selectedModelId && "bg-accent",
|
||||
)}
|
||||
>
|
||||
<ModelSelectorItem
|
||||
value="__server_default__"
|
||||
onSelect={handleSelect}
|
||||
<Check
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
!selectedModelId && "bg-accent",
|
||||
"mr-2 h-4 w-4",
|
||||
!selectedModelId
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<Server className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<ModelSelectorName>
|
||||
{dict.modelConfig.serverDefault}
|
||||
</ModelSelectorName>
|
||||
</ModelSelectorItem>
|
||||
</ModelSelectorGroup>
|
||||
|
||||
{/* Configured Models by Provider */}
|
||||
{Array.from(groupedModels.entries()).map(
|
||||
([
|
||||
providerLabel,
|
||||
{ provider, models: providerModels },
|
||||
]) => (
|
||||
<ModelSelectorGroup
|
||||
key={providerLabel}
|
||||
heading={providerLabel}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
!selectedModelId
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<Server className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<ModelSelectorName>
|
||||
{dict.modelConfig.serverDefault}
|
||||
</ModelSelectorName>
|
||||
</ModelSelectorItem>
|
||||
</ModelSelectorGroup>
|
||||
)}
|
||||
|
||||
{/* Server Models Section */}
|
||||
{serverModels.length > 0 && (
|
||||
<>
|
||||
<ModelSelectorSectionHeader
|
||||
icon={<Monitor />}
|
||||
label={dict.modelConfig.serverModels}
|
||||
/>
|
||||
{Array.from(groupedServerModels.entries()).map(
|
||||
([
|
||||
providerLabel,
|
||||
{ provider, models: providerModels },
|
||||
]) => (
|
||||
<ModelSelectorGroup
|
||||
key={`server-${providerLabel}`}
|
||||
heading={providerLabel}
|
||||
className="[&>[cmdk-group-heading]]:pl-4"
|
||||
{providerModels.map((model) => (
|
||||
<ModelSelectorItem
|
||||
key={model.id}
|
||||
value={model.modelId}
|
||||
onSelect={() =>
|
||||
handleSelect(model.id)
|
||||
}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{providerModels.map((model) => (
|
||||
<ModelSelectorItem
|
||||
key={model.id}
|
||||
value={model.modelId}
|
||||
onSelect={() =>
|
||||
handleSelect(model.id)
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedModelId === model.id
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<ModelSelectorLogo
|
||||
provider={
|
||||
PROVIDER_LOGO_MAP[
|
||||
provider
|
||||
] || provider
|
||||
}
|
||||
className="mr-2"
|
||||
/>
|
||||
<ModelSelectorName>
|
||||
{model.modelId}
|
||||
</ModelSelectorName>
|
||||
{model.validated !== true && (
|
||||
<span
|
||||
title={
|
||||
dict.modelConfig
|
||||
.unvalidatedModelWarning
|
||||
}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedModelId ===
|
||||
model.id
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<ModelSelectorLogo
|
||||
provider={
|
||||
PROVIDER_LOGO_MAP[
|
||||
provider
|
||||
] || provider
|
||||
}
|
||||
className="mr-2"
|
||||
/>
|
||||
<ModelSelectorName>
|
||||
{model.modelId}
|
||||
</ModelSelectorName>
|
||||
{model.isDefault && (
|
||||
<span
|
||||
title={
|
||||
dict.modelConfig
|
||||
.serverDefaultModel
|
||||
}
|
||||
className="ml-auto text-xs text-muted-foreground"
|
||||
>
|
||||
{
|
||||
dict.modelConfig
|
||||
.default
|
||||
}
|
||||
</span>
|
||||
)}
|
||||
</ModelSelectorItem>
|
||||
))}
|
||||
</ModelSelectorGroup>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* User Models Section */}
|
||||
{userModels.length > 0 && (
|
||||
<>
|
||||
{serverModels.length > 0 && (
|
||||
<ModelSelectorSeparator />
|
||||
)}
|
||||
<ModelSelectorSectionHeader
|
||||
icon={<User />}
|
||||
label={dict.modelConfig.userModels}
|
||||
/>
|
||||
{Array.from(groupedUserModels.entries()).map(
|
||||
([
|
||||
providerLabel,
|
||||
{ provider, models: providerModels },
|
||||
]) => (
|
||||
<ModelSelectorGroup
|
||||
key={`user-${providerLabel}`}
|
||||
heading={providerLabel}
|
||||
className="[&>[cmdk-group-heading]]:pl-4"
|
||||
>
|
||||
{providerModels.map((model) => (
|
||||
<ModelSelectorItem
|
||||
key={model.id}
|
||||
value={model.modelId}
|
||||
onSelect={() =>
|
||||
handleSelect(model.id)
|
||||
}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedModelId ===
|
||||
model.id
|
||||
? "opacity-100"
|
||||
: "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<ModelSelectorLogo
|
||||
provider={
|
||||
PROVIDER_LOGO_MAP[
|
||||
provider
|
||||
] || provider
|
||||
}
|
||||
className="mr-2"
|
||||
/>
|
||||
<ModelSelectorName>
|
||||
{model.modelId}
|
||||
</ModelSelectorName>
|
||||
{model.validated !==
|
||||
true && (
|
||||
<span
|
||||
title={
|
||||
dict.modelConfig
|
||||
.unvalidatedModelWarning
|
||||
}
|
||||
>
|
||||
<AlertTriangle className="ml-auto h-3 w-3 text-warning" />
|
||||
</span>
|
||||
)}
|
||||
</ModelSelectorItem>
|
||||
))}
|
||||
</ModelSelectorGroup>
|
||||
),
|
||||
)}
|
||||
</>
|
||||
<AlertTriangle className="ml-auto h-3 w-3 text-warning" />
|
||||
</span>
|
||||
)}
|
||||
</ModelSelectorItem>
|
||||
))}
|
||||
</ModelSelectorGroup>
|
||||
),
|
||||
)}
|
||||
|
||||
{/* Configure Option */}
|
||||
@@ -392,7 +282,7 @@ export function ModelSelector({
|
||||
<ModelSelectorItem
|
||||
value="__configure__"
|
||||
onSelect={handleSelect}
|
||||
className="cursor-pointer text-muted-foreground hover:text-foreground"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Settings2 className="mr-2 h-4 w-4" />
|
||||
<ModelSelectorName>
|
||||
|
||||
@@ -67,8 +67,6 @@ interface SettingsDialogProps {
|
||||
onToggleDarkMode: () => void
|
||||
minimalStyle?: boolean
|
||||
onMinimalStyleChange?: (value: boolean) => void
|
||||
vlmValidationEnabled?: boolean
|
||||
onVlmValidationChange?: (value: boolean) => void
|
||||
}
|
||||
|
||||
export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
|
||||
@@ -90,8 +88,6 @@ function SettingsContent({
|
||||
onToggleDarkMode,
|
||||
minimalStyle = false,
|
||||
onMinimalStyleChange = () => {},
|
||||
vlmValidationEnabled = false,
|
||||
onVlmValidationChange = () => {},
|
||||
}: SettingsDialogProps) {
|
||||
const dict = useDictionary()
|
||||
const router = useRouter()
|
||||
@@ -172,13 +168,6 @@ function SettingsContent({
|
||||
// Save locale to localStorage for persistence across restarts
|
||||
localStorage.setItem("next-ai-draw-io-locale", lang)
|
||||
|
||||
// Notify Electron main process to update its menu language
|
||||
if (window.electronAPI?.setUserLocale) {
|
||||
window.electronAPI.setUserLocale(lang).catch((error) => {
|
||||
console.error("Failed to sync locale with Electron:", error)
|
||||
})
|
||||
}
|
||||
|
||||
const parts = pathname.split("/")
|
||||
if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
|
||||
parts[1] = lang
|
||||
@@ -414,25 +403,6 @@ function SettingsContent({
|
||||
</div>
|
||||
</SettingItem>
|
||||
|
||||
{/* VLM Diagram Validation */}
|
||||
<SettingItem
|
||||
label={dict.settings.diagramValidation}
|
||||
description={dict.settings.diagramValidationDescription}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
id="vlm-validation"
|
||||
checked={vlmValidationEnabled}
|
||||
onCheckedChange={onVlmValidationChange}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{vlmValidationEnabled
|
||||
? dict.settings.enabled
|
||||
: dict.settings.disabled}
|
||||
</span>
|
||||
</div>
|
||||
</SettingItem>
|
||||
|
||||
{/* Send Shortcut */}
|
||||
<SettingItem
|
||||
label={dict.settings.sendShortcut}
|
||||
@@ -455,7 +425,7 @@ function SettingsContent({
|
||||
>
|
||||
<SelectTrigger
|
||||
id="send-shortcut-select"
|
||||
className="w-auto h-9 rounded-xl"
|
||||
className="w-[170px] h-9 rounded-xl"
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import type React from "react"
|
||||
import { createContext, useContext, useEffect, useRef, useState } from "react"
|
||||
import type { DrawIoEmbedRef } from "react-drawio"
|
||||
import type { DrawIoEmbedRef, EventAutoSave } from "react-drawio"
|
||||
import { toast } from "sonner"
|
||||
import type { ExportFormat } from "@/components/save-dialog"
|
||||
import { getApiEndpoint } from "@/lib/base-path"
|
||||
@@ -20,10 +20,10 @@ interface DiagramContextType {
|
||||
loadDiagram: (chart: string, skipValidation?: boolean) => string | null
|
||||
handleExport: () => void
|
||||
handleExportWithoutHistory: () => void
|
||||
resolverRef: React.MutableRefObject<((value: string) => void) | null>
|
||||
drawioRef: React.MutableRefObject<DrawIoEmbedRef | null>
|
||||
resolverRef: React.Ref<((value: string) => void) | null>
|
||||
drawioRef: React.Ref<DrawIoEmbedRef | null>
|
||||
handleDiagramExport: (data: any) => void
|
||||
handleDiagramAutoSave: (data: { xml?: string }) => void
|
||||
handleAutoSave: (data: EventAutoSave) => void
|
||||
clearDiagram: () => void
|
||||
saveDiagramToFile: (
|
||||
filename: string,
|
||||
@@ -32,7 +32,6 @@ interface DiagramContextType {
|
||||
successMessage?: string,
|
||||
) => void
|
||||
getThumbnailSvg: () => Promise<string | null>
|
||||
captureValidationPng: () => Promise<string | null>
|
||||
isDrawioReady: boolean
|
||||
onDrawioLoad: () => void
|
||||
resetDrawioReady: () => void
|
||||
@@ -53,10 +52,10 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
|
||||
const hasCalledOnLoadRef = useRef(false)
|
||||
const drawioRef = useRef<DrawIoEmbedRef | null>(null)
|
||||
const resolverRef = useRef<((value: string) => void) | null>(null)
|
||||
// Resolver for PNG export (used for VLM validation)
|
||||
const pngResolverRef = useRef<((value: string) => void) | null>(null)
|
||||
// Track if we're expecting an export for history (user-initiated)
|
||||
const expectHistoryExportRef = useRef<boolean>(false)
|
||||
// Track if diagram has been restored after DrawIO remount (e.g., theme change)
|
||||
const hasDiagramRestoredRef = useRef<boolean>(false)
|
||||
// Track latest chartXML for restoration after remount
|
||||
const chartXMLRef = useRef<string>("")
|
||||
|
||||
@@ -78,22 +77,22 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
|
||||
}, [chartXML])
|
||||
|
||||
// Restore diagram when DrawIO becomes ready after remount (e.g., theme/UI change)
|
||||
// Also restore when chartXML changes while DrawIO is ready (e.g., session loaded after iframe ready)
|
||||
const lastRestoredXmlRef = useRef<string>("")
|
||||
useEffect(() => {
|
||||
if (!isDrawioReady || !drawioRef.current) return
|
||||
// Only load if we have a real diagram and it's different from what we already loaded
|
||||
if (
|
||||
isRealDiagram(chartXML) &&
|
||||
chartXML !== lastRestoredXmlRef.current
|
||||
) {
|
||||
lastRestoredXmlRef.current = chartXML
|
||||
drawioRef.current.load({ xml: chartXML })
|
||||
} else if (!isRealDiagram(chartXML)) {
|
||||
// Reset when diagram is cleared so a future restore can re-load the same XML.
|
||||
lastRestoredXmlRef.current = ""
|
||||
// Reset restore flag when DrawIO is not ready (preparing for next restore cycle)
|
||||
if (!isDrawioReady) {
|
||||
hasDiagramRestoredRef.current = false
|
||||
return
|
||||
}
|
||||
}, [isDrawioReady, chartXML])
|
||||
// Only restore once per ready cycle
|
||||
if (hasDiagramRestoredRef.current) return
|
||||
hasDiagramRestoredRef.current = true
|
||||
|
||||
// Restore diagram from ref if we have one
|
||||
const xmlToRestore = chartXMLRef.current
|
||||
if (isRealDiagram(xmlToRestore) && drawioRef.current) {
|
||||
drawioRef.current.load({ xml: xmlToRestore })
|
||||
}
|
||||
}, [isDrawioReady])
|
||||
|
||||
// Track if we're expecting an export for file save (stores raw export data)
|
||||
const saveResolverRef = useRef<{
|
||||
@@ -149,37 +148,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
}
|
||||
|
||||
// Capture current diagram as PNG for VLM validation
|
||||
const captureValidationPng = async (): Promise<string | null> => {
|
||||
if (!drawioRef.current) return null
|
||||
// Don't export if diagram is empty
|
||||
if (!isRealDiagram(chartXML)) return null
|
||||
|
||||
try {
|
||||
const pngData = await Promise.race([
|
||||
new Promise<string>((resolve) => {
|
||||
pngResolverRef.current = resolve
|
||||
drawioRef.current?.exportDiagram({ format: "png" })
|
||||
}),
|
||||
new Promise<string>((_, reject) =>
|
||||
setTimeout(
|
||||
() => reject(new Error("PNG export timeout")),
|
||||
5000,
|
||||
),
|
||||
),
|
||||
])
|
||||
|
||||
// PNG data should be a base64 data URL
|
||||
if (pngData?.startsWith("data:image/png")) {
|
||||
return pngData
|
||||
}
|
||||
return null
|
||||
} catch {
|
||||
// Timeout is expected occasionally - don't log as error
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const loadDiagram = (
|
||||
chart: string,
|
||||
skipValidation?: boolean,
|
||||
@@ -219,13 +187,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
|
||||
const handleDiagramExport = (data: any) => {
|
||||
// Handle PNG export for VLM validation
|
||||
if (pngResolverRef.current && data.data?.startsWith("data:image/png")) {
|
||||
pngResolverRef.current(data.data)
|
||||
pngResolverRef.current = null
|
||||
return
|
||||
}
|
||||
|
||||
// Handle save to file if requested (process raw data before extraction)
|
||||
if (saveResolverRef.current.resolver) {
|
||||
const format = saveResolverRef.current.format
|
||||
@@ -266,14 +227,11 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
}
|
||||
|
||||
const handleDiagramAutoSave = (data: { xml?: string }) => {
|
||||
if (!data?.xml) return
|
||||
// Don't overwrite a pending restore - if we have a real diagram in state
|
||||
// but DrawIO isn't ready yet, it means we're waiting to restore
|
||||
if (!isDrawioReady && isRealDiagram(chartXML)) {
|
||||
return
|
||||
// Handle autosave events from draw.io - keeps chartXML in sync with user modifications
|
||||
const handleAutoSave = (data: EventAutoSave) => {
|
||||
if (data.xml) {
|
||||
setChartXML(data.xml)
|
||||
}
|
||||
setChartXML(data.xml)
|
||||
}
|
||||
|
||||
const clearDiagram = () => {
|
||||
@@ -400,11 +358,10 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
|
||||
resolverRef,
|
||||
drawioRef,
|
||||
handleDiagramExport,
|
||||
handleDiagramAutoSave,
|
||||
handleAutoSave,
|
||||
clearDiagram,
|
||||
saveDiagramToFile,
|
||||
getThumbnailSvg,
|
||||
captureValidationPng,
|
||||
isDrawioReady,
|
||||
onDrawioLoad,
|
||||
resetDrawioReady,
|
||||
|
||||
@@ -200,7 +200,6 @@ npm run dev
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Google Vertex AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
@@ -214,10 +213,6 @@ npm run dev
|
||||
|
||||
📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。
|
||||
|
||||
### 服务端多模型配置
|
||||
|
||||
管理员可以配置多个服务端模型,让所有用户无需提供个人 API Key 即可使用。通过 `AI_MODELS_CONFIG` 环境变量(JSON 字符串)或 `ai-models.json` 文件配置。
|
||||
|
||||
**模型要求**:此任务需要强大的模型能力,因为它涉及生成具有严格格式约束的长文本(draw.io XML)。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
|
||||
|
||||
注意:`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练,因此如果您想创建云架构图,这是最佳选择。
|
||||
|
||||
@@ -217,63 +217,6 @@ AI_MODEL=openai/gpt-4o
|
||||
AI_PROVIDER=google # 或:openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
|
||||
```
|
||||
|
||||
## 服务端多模型配置
|
||||
|
||||
管理员可以配置多个服务端模型,让所有用户无需提供个人 API Key 即可使用。
|
||||
|
||||
### 配置方式
|
||||
|
||||
**方式一:环境变量**(推荐用于云部署)
|
||||
|
||||
设置 `AI_MODELS_CONFIG` 为 JSON 字符串:
|
||||
|
||||
```bash
|
||||
AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
|
||||
```
|
||||
|
||||
**方式二:配置文件**
|
||||
|
||||
在项目根目录创建 `ai-models.json` 文件(或通过 `AI_MODELS_CONFIG_PATH` 指定路径)。
|
||||
|
||||
### 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"providers": [
|
||||
{
|
||||
"name": "OpenAI Production",
|
||||
"provider": "openai",
|
||||
"models": ["gpt-4o", "gpt-4o-mini"],
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"name": "Custom DeepSeek",
|
||||
"provider": "deepseek",
|
||||
"models": ["deepseek-chat"],
|
||||
"apiKeyEnv": "MY_DEEPSEEK_KEY",
|
||||
"baseUrlEnv": "MY_DEEPSEEK_URL"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 字段说明
|
||||
|
||||
| 字段 | 必填 | 说明 |
|
||||
|------|------|------|
|
||||
| `name` | 是 | 显示名称(支持同一提供商多个配置) |
|
||||
| `provider` | 是 | 提供商类型(`openai`, `anthropic`, `google`, `bedrock` 等) |
|
||||
| `models` | 是 | 模型 ID 列表 |
|
||||
| `default` | 否 | 设为 `true` 表示默认选中该提供商的第一个模型 |
|
||||
| `apiKeyEnv` | 否 | 自定义 API Key 环境变量名(默认使用提供商标准变量如 `OPENAI_API_KEY`) |
|
||||
| `baseUrlEnv` | 否 | 自定义 Base URL 环境变量名 |
|
||||
|
||||
### 说明
|
||||
|
||||
- API Key 和凭证通过环境变量提供。默认使用标准变量名(如 `OPENAI_API_KEY`),也可通过 `apiKeyEnv` 指定自定义变量名。
|
||||
- `name` 字段允许同一提供商多个配置(例如 "OpenAI Production" 和 "OpenAI Staging" 都使用 `provider: "openai"` 但 `apiKeyEnv` 不同)。
|
||||
- 如果配置不存在,应用会回退到 `AI_PROVIDER`/`AI_MODEL` 环境变量配置。
|
||||
|
||||
## 模型能力要求
|
||||
|
||||
此任务对模型能力要求极高,因为它涉及生成具有严格格式约束(draw.io XML)的长文本。
|
||||
|
||||
@@ -33,21 +33,6 @@ Optional custom endpoint:
|
||||
GOOGLE_BASE_URL=https://your-custom-endpoint
|
||||
```
|
||||
|
||||
### Google Vertex AI (Enterprise GCP)
|
||||
|
||||
Google Vertex AI offers enterprise-grade features and data residency. **Express Mode** allows for simple API key authentication, making it compatible with edge runtimes like Vercel and Cloudflare.
|
||||
|
||||
```bash
|
||||
GOOGLE_VERTEX_API_KEY=your_api_key
|
||||
AI_MODEL=gemini-2.0-flash
|
||||
```
|
||||
|
||||
Optional custom endpoint:
|
||||
|
||||
```bash
|
||||
GOOGLE_VERTEX_BASE_URL=https://your-custom-endpoint
|
||||
```
|
||||
|
||||
### OpenAI
|
||||
|
||||
```bash
|
||||
@@ -232,63 +217,6 @@ If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:
|
||||
AI_PROVIDER=google # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang, modelscope
|
||||
```
|
||||
|
||||
## Server-Side Multi-Model Configuration
|
||||
|
||||
Administrators can configure multiple server-side models that are available to all users without requiring personal API keys.
|
||||
|
||||
### Configuration Methods
|
||||
|
||||
**Option 1: Environment Variable** (recommended for cloud deployments)
|
||||
|
||||
Set `AI_MODELS_CONFIG` as a JSON string:
|
||||
|
||||
```bash
|
||||
AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
|
||||
```
|
||||
|
||||
**Option 2: Config File**
|
||||
|
||||
Create an `ai-models.json` file in the project root (or set `AI_MODELS_CONFIG_PATH` to a custom location).
|
||||
|
||||
### Example Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"providers": [
|
||||
{
|
||||
"name": "OpenAI Production",
|
||||
"provider": "openai",
|
||||
"models": ["gpt-4o", "gpt-4o-mini"],
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"name": "Custom DeepSeek",
|
||||
"provider": "deepseek",
|
||||
"models": ["deepseek-chat"],
|
||||
"apiKeyEnv": "MY_DEEPSEEK_KEY",
|
||||
"baseUrlEnv": "MY_DEEPSEEK_URL"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Field Reference
|
||||
|
||||
| Field | Required | Description |
|
||||
|-------|----------|-------------|
|
||||
| `name` | Yes | Display name (supports multiple configs for same provider) |
|
||||
| `provider` | Yes | Provider type (`openai`, `anthropic`, `google`, `bedrock`, etc.) |
|
||||
| `models` | Yes | List of model IDs |
|
||||
| `default` | No | Set to `true` to auto-select this provider's first model as default |
|
||||
| `apiKeyEnv` | No | Custom API key env var name (defaults to provider's standard var like `OPENAI_API_KEY`) |
|
||||
| `baseUrlEnv` | No | Custom base URL env var name |
|
||||
|
||||
### Notes
|
||||
|
||||
- API keys and credentials are provided via environment variables. By default, standard var names are used (e.g., `OPENAI_API_KEY`), but you can specify custom var names with `apiKeyEnv`.
|
||||
- The `name` field allows multiple configurations for the same provider (e.g., "OpenAI Production" and "OpenAI Staging" both using `provider: "openai"` but with different `apiKeyEnv` values).
|
||||
- If config is not present, the app falls back to `AI_PROVIDER`/`AI_MODEL` environment variable configuration.
|
||||
|
||||
## Model Capability Requirements
|
||||
|
||||
This task requires exceptionally strong model capabilities, as it involves generating long-form text with strict formatting constraints (draw.io XML).
|
||||
|
||||
@@ -22,27 +22,6 @@ cp env.example .env
|
||||
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||
```
|
||||
|
||||
### Using server-side model configuration
|
||||
|
||||
You can mount an `ai-models.json` file into the container to provide multiple server-side models without exposing user API keys:
|
||||
|
||||
```bash
|
||||
docker run -d -p 3000:3000 \
|
||||
-e OPENAI_API_KEY=your_api_key \
|
||||
-v $(pwd)/ai-models.json:/app/ai-models.json:ro \
|
||||
ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||
```
|
||||
|
||||
If you prefer to keep the config in a different path inside the container, set `AI_MODELS_CONFIG_PATH`:
|
||||
|
||||
```bash
|
||||
docker run -d -p 3000:3000 \
|
||||
-e OPENAI_API_KEY=your_api_key \
|
||||
-e AI_MODELS_CONFIG_PATH=/config/ai-models.json \
|
||||
-v $(pwd)/ai-models.json:/config/ai-models.json:ro \
|
||||
ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
|
||||
Replace the environment variables with your preferred AI provider configuration. See [AI Providers](./ai-providers.md) for available options.
|
||||
|
||||
@@ -201,7 +201,6 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Google Vertex AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
@@ -215,10 +214,6 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
|
||||
|
||||
📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。
|
||||
|
||||
### サーバーサイドマルチモデル設定
|
||||
|
||||
管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。`AI_MODELS_CONFIG` 環境変数(JSON文字列)または `ai-models.json` ファイルで設定します。
|
||||
|
||||
**モデル要件**:このタスクは厳密なフォーマット制約(draw.io XML)を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1を推奨します。
|
||||
|
||||
注:`claude`シリーズはAWS、Azure、GCPなどのクラウドアーキテクチャロゴ付きのdraw.ioダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。
|
||||
|
||||
@@ -217,63 +217,6 @@ AI_MODEL=openai/gpt-4o
|
||||
AI_PROVIDER=google # または: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
|
||||
```
|
||||
|
||||
## サーバーサイドマルチモデル設定
|
||||
|
||||
管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。
|
||||
|
||||
### 設定方法
|
||||
|
||||
**方法1:環境変数**(クラウドデプロイ推奨)
|
||||
|
||||
`AI_MODELS_CONFIG` をJSON文字列として設定:
|
||||
|
||||
```bash
|
||||
AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
|
||||
```
|
||||
|
||||
**方法2:設定ファイル**
|
||||
|
||||
プロジェクトルートに `ai-models.json` ファイルを作成します(または `AI_MODELS_CONFIG_PATH` でパスを指定)。
|
||||
|
||||
### 設定例
|
||||
|
||||
```json
|
||||
{
|
||||
"providers": [
|
||||
{
|
||||
"name": "OpenAI Production",
|
||||
"provider": "openai",
|
||||
"models": ["gpt-4o", "gpt-4o-mini"],
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"name": "Custom DeepSeek",
|
||||
"provider": "deepseek",
|
||||
"models": ["deepseek-chat"],
|
||||
"apiKeyEnv": "MY_DEEPSEEK_KEY",
|
||||
"baseUrlEnv": "MY_DEEPSEEK_URL"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### フィールド説明
|
||||
|
||||
| フィールド | 必須 | 説明 |
|
||||
|------------|------|------|
|
||||
| `name` | はい | 表示名(同一プロバイダーの複数設定をサポート) |
|
||||
| `provider` | はい | プロバイダータイプ(`openai`, `anthropic`, `google`, `bedrock` など) |
|
||||
| `models` | はい | モデルIDのリスト |
|
||||
| `default` | いいえ | `true` に設定すると、そのプロバイダーの最初のモデルがデフォルトで選択されます |
|
||||
| `apiKeyEnv` | いいえ | カスタムAPIキー環境変数名(デフォルトは `OPENAI_API_KEY` などの標準変数) |
|
||||
| `baseUrlEnv` | いいえ | カスタムBase URL環境変数名 |
|
||||
|
||||
### 備考
|
||||
|
||||
- APIキーと認証情報は環境変数で提供します。デフォルトは標準変数名(例:`OPENAI_API_KEY`)を使用しますが、`apiKeyEnv` でカスタム変数名を指定できます。
|
||||
- `name` フィールドにより同一プロバイダーの複数設定が可能です(例:「OpenAI Production」と「OpenAI Staging」が両方とも `provider: "openai"` を使用しつつ、異なる `apiKeyEnv` を持つ)。
|
||||
- 設定が存在しない場合、アプリは `AI_PROVIDER`/`AI_MODEL` 環境変数設定にフォールバックします。
|
||||
|
||||
## モデル性能要件
|
||||
|
||||
このタスクは、厳密なフォーマット制約(draw.io XML)を伴う長文テキストの生成を含むため、非常に強力なモデル性能が必要です。
|
||||
|
||||
@@ -37,11 +37,10 @@ mac:
|
||||
arch:
|
||||
- x64
|
||||
- arm64
|
||||
# Disable electron-builder's signing - we use custom ad-hoc signing in afterPack
|
||||
# to properly sign nested bundles with --deep flag for bundled draw.io files
|
||||
identity: null
|
||||
hardenedRuntime: false
|
||||
hardenedRuntime: true
|
||||
gatekeeperAssess: false
|
||||
entitlements: resources/entitlements.mac.plist
|
||||
entitlementsInherit: resources/entitlements.mac.plist
|
||||
|
||||
dmg:
|
||||
contents:
|
||||
|
||||
18
electron/electron.d.ts
vendored
18
electron/electron.d.ts
vendored
@@ -38,12 +38,6 @@ interface SetProxyResult {
|
||||
devMode?: boolean
|
||||
}
|
||||
|
||||
/** Result of setting user locale */
|
||||
interface SetUserLocaleResult {
|
||||
success: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
/** Main window Electron API */
|
||||
@@ -68,10 +62,6 @@ declare global {
|
||||
getProxy: () => Promise<ProxyConfig>
|
||||
/** Set proxy configuration (saves and restarts server) */
|
||||
setProxy: (config: ProxyConfig) => Promise<SetProxyResult>
|
||||
/** Get user's preferred locale */
|
||||
getUserLocale: () => Promise<"en" | "zh" | "ja" | undefined>
|
||||
/** Set user's preferred locale */
|
||||
setUserLocale: (locale: string) => Promise<SetUserLocaleResult>
|
||||
}
|
||||
|
||||
/** Settings window Electron API */
|
||||
@@ -98,10 +88,4 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export type {
|
||||
ConfigPreset,
|
||||
ApplyPresetResult,
|
||||
ProxyConfig,
|
||||
SetProxyResult,
|
||||
SetUserLocaleResult,
|
||||
}
|
||||
export { ConfigPreset, ApplyPresetResult, ProxyConfig, SetProxyResult }
|
||||
|
||||
@@ -12,12 +12,11 @@ import {
|
||||
getCurrentPresetId,
|
||||
setCurrentPreset,
|
||||
} from "./config-manager"
|
||||
import { getMenuTranslations, getPreferredLocale } from "./menu-i18n"
|
||||
import { restartNextServer } from "./next-server"
|
||||
import { showSettingsWindow } from "./settings-window"
|
||||
|
||||
/**
|
||||
* Build and set the application menu with i18n support
|
||||
* Build and set the application menu
|
||||
*/
|
||||
export function buildAppMenu(): void {
|
||||
const template = getMenuTemplate()
|
||||
@@ -26,22 +25,18 @@ export function buildAppMenu(): void {
|
||||
}
|
||||
|
||||
/**
|
||||
* Rebuild the menu (call this when presets change or language changes)
|
||||
* Rebuild the menu (call this when presets change)
|
||||
*/
|
||||
export function rebuildAppMenu(): void {
|
||||
buildAppMenu()
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the menu template with translations
|
||||
* Get the menu template
|
||||
*/
|
||||
function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
const isMac = process.platform === "darwin"
|
||||
|
||||
// Get translations for preferred locale (saved preference or system default)
|
||||
const locale = getPreferredLocale(app.getLocale())
|
||||
const t = getMenuTranslations(locale)
|
||||
|
||||
const template: MenuItemConstructorOptions[] = []
|
||||
|
||||
// macOS app menu
|
||||
@@ -49,10 +44,10 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
template.push({
|
||||
label: app.name,
|
||||
submenu: [
|
||||
{ role: "about" }, // System-translated
|
||||
{ role: "about" },
|
||||
{ type: "separator" },
|
||||
{
|
||||
label: t.settings,
|
||||
label: "Settings...",
|
||||
accelerator: "CmdOrCtrl+,",
|
||||
click: () => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
@@ -60,26 +55,26 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
},
|
||||
},
|
||||
{ type: "separator" },
|
||||
{ role: "services" }, // System-translated
|
||||
{ role: "services" },
|
||||
{ type: "separator" },
|
||||
{ role: "hide" }, // System-translated
|
||||
{ role: "hideOthers" }, // System-translated
|
||||
{ role: "unhide" }, // System-translated
|
||||
{ role: "hide" },
|
||||
{ role: "hideOthers" },
|
||||
{ role: "unhide" },
|
||||
{ type: "separator" },
|
||||
{ role: "quit" }, // System-translated
|
||||
{ role: "quit" },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// File menu
|
||||
template.push({
|
||||
label: t.file,
|
||||
label: "File",
|
||||
submenu: [
|
||||
...(isMac
|
||||
? []
|
||||
: [
|
||||
{
|
||||
label: t.settings,
|
||||
label: "Settings",
|
||||
accelerator: "CmdOrCtrl+,",
|
||||
click: () => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
@@ -88,76 +83,76 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
},
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
]),
|
||||
isMac ? { role: "close" } : { role: "quit" }, // System-translated
|
||||
isMac ? { role: "close" } : { role: "quit" },
|
||||
],
|
||||
})
|
||||
|
||||
// Edit menu
|
||||
template.push({
|
||||
label: t.edit,
|
||||
label: "Edit",
|
||||
submenu: [
|
||||
{ role: "undo" }, // System-translated
|
||||
{ role: "redo" }, // System-translated
|
||||
{ role: "undo" },
|
||||
{ role: "redo" },
|
||||
{ type: "separator" },
|
||||
{ role: "cut" }, // System-translated
|
||||
{ role: "copy" }, // System-translated
|
||||
{ role: "paste" }, // System-translated
|
||||
{ role: "cut" },
|
||||
{ role: "copy" },
|
||||
{ role: "paste" },
|
||||
...(isMac
|
||||
? [
|
||||
{
|
||||
role: "pasteAndMatchStyle",
|
||||
} as MenuItemConstructorOptions, // System-translated
|
||||
{ role: "delete" } as MenuItemConstructorOptions, // System-translated
|
||||
{ role: "selectAll" } as MenuItemConstructorOptions, // System-translated
|
||||
} as MenuItemConstructorOptions,
|
||||
{ role: "delete" } as MenuItemConstructorOptions,
|
||||
{ role: "selectAll" } as MenuItemConstructorOptions,
|
||||
]
|
||||
: [
|
||||
{ role: "delete" } as MenuItemConstructorOptions, // System-translated
|
||||
{ role: "delete" } as MenuItemConstructorOptions,
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
{ role: "selectAll" } as MenuItemConstructorOptions, // System-translated
|
||||
{ role: "selectAll" } as MenuItemConstructorOptions,
|
||||
]),
|
||||
],
|
||||
})
|
||||
|
||||
// View menu
|
||||
template.push({
|
||||
label: t.view,
|
||||
label: "View",
|
||||
submenu: [
|
||||
{ role: "reload" }, // System-translated
|
||||
{ role: "forceReload" }, // System-translated
|
||||
{ role: "toggleDevTools" }, // System-translated
|
||||
{ role: "reload" },
|
||||
{ role: "forceReload" },
|
||||
{ role: "toggleDevTools" },
|
||||
{ type: "separator" },
|
||||
{ role: "resetZoom" }, // System-translated
|
||||
{ role: "zoomIn" }, // System-translated
|
||||
{ role: "zoomOut" }, // System-translated
|
||||
{ role: "resetZoom" },
|
||||
{ role: "zoomIn" },
|
||||
{ role: "zoomOut" },
|
||||
{ type: "separator" },
|
||||
{ role: "togglefullscreen" }, // System-translated
|
||||
{ role: "togglefullscreen" },
|
||||
],
|
||||
})
|
||||
|
||||
// Configuration menu with presets
|
||||
template.push(buildConfigMenu(t))
|
||||
template.push(buildConfigMenu())
|
||||
|
||||
// Window menu
|
||||
template.push({
|
||||
label: t.window,
|
||||
label: "Window",
|
||||
submenu: [
|
||||
{ role: "minimize" }, // System-translated
|
||||
{ role: "zoom" }, // System-translated
|
||||
{ role: "minimize" },
|
||||
{ role: "zoom" },
|
||||
...(isMac
|
||||
? [
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
{ role: "front" } as MenuItemConstructorOptions, // System-translated
|
||||
{ role: "front" } as MenuItemConstructorOptions,
|
||||
]
|
||||
: [{ role: "close" } as MenuItemConstructorOptions]), // System-translated
|
||||
: [{ role: "close" } as MenuItemConstructorOptions]),
|
||||
],
|
||||
})
|
||||
|
||||
// Help menu
|
||||
template.push({
|
||||
label: t.help,
|
||||
label: "Help",
|
||||
submenu: [
|
||||
{
|
||||
label: t.documentation,
|
||||
label: "Documentation",
|
||||
click: async () => {
|
||||
await shell.openExternal(
|
||||
"https://github.com/dayuanjiang/next-ai-draw-io",
|
||||
@@ -165,7 +160,7 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t.reportIssue,
|
||||
label: "Report Issue",
|
||||
click: async () => {
|
||||
await shell.openExternal(
|
||||
"https://github.com/dayuanjiang/next-ai-draw-io/issues",
|
||||
@@ -181,9 +176,7 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
|
||||
/**
|
||||
* Build the Configuration menu with presets
|
||||
*/
|
||||
function buildConfigMenu(
|
||||
t: ReturnType<typeof getMenuTranslations>,
|
||||
): MenuItemConstructorOptions {
|
||||
function buildConfigMenu(): MenuItemConstructorOptions {
|
||||
const presets = getAllPresets()
|
||||
const currentPresetId = getCurrentPresetId()
|
||||
|
||||
@@ -223,11 +216,11 @@ function buildConfigMenu(
|
||||
}))
|
||||
|
||||
return {
|
||||
label: t.configuration,
|
||||
label: "Configuration",
|
||||
submenu: [
|
||||
...(presetItems.length > 0
|
||||
? [
|
||||
{ label: t.switchPreset, enabled: false },
|
||||
{ label: "Switch Preset", enabled: false },
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
...presetItems,
|
||||
{ type: "separator" } as MenuItemConstructorOptions,
|
||||
@@ -236,8 +229,8 @@ function buildConfigMenu(
|
||||
{
|
||||
label:
|
||||
presetItems.length > 0
|
||||
? t.managePresets
|
||||
: t.addConfigurationPreset,
|
||||
? "Manage Presets..."
|
||||
: "Add Configuration Preset...",
|
||||
click: () => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
showSettingsWindow(win || undefined)
|
||||
|
||||
@@ -137,7 +137,6 @@ interface ConfigPresetsFile {
|
||||
version: 1
|
||||
currentPresetId: string | null
|
||||
presets: ConfigPreset[]
|
||||
userLocale?: "en" | "zh" | "ja"
|
||||
}
|
||||
|
||||
const CONFIG_FILE_NAME = "config-presets.json"
|
||||
@@ -162,7 +161,6 @@ export function loadPresets(): ConfigPresetsFile {
|
||||
version: 1,
|
||||
currentPresetId: null,
|
||||
presets: [],
|
||||
userLocale: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,7 +181,6 @@ export function loadPresets(): ConfigPresetsFile {
|
||||
version: 1,
|
||||
currentPresetId: null,
|
||||
presets: [],
|
||||
userLocale: undefined,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -465,21 +462,3 @@ export function getCurrentPresetEnv(): Record<string, string> {
|
||||
}
|
||||
return env
|
||||
}
|
||||
|
||||
/**
|
||||
* Get user's preferred locale from config
|
||||
* Returns undefined if not set
|
||||
*/
|
||||
export function getUserLocale(): "en" | "zh" | "ja" | undefined {
|
||||
const data = loadPresets()
|
||||
return data.userLocale
|
||||
}
|
||||
|
||||
/**
|
||||
* Set user's preferred locale in config
|
||||
*/
|
||||
export function setUserLocale(locale: "en" | "zh" | "ja" | null): void {
|
||||
const data = loadPresets()
|
||||
data.userLocale = locale === null ? undefined : locale
|
||||
savePresets(data)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { app, BrowserWindow, dialog, ipcMain } from "electron"
|
||||
import { rebuildAppMenu } from "./app-menu"
|
||||
import {
|
||||
applyPresetToEnv,
|
||||
type ConfigPreset,
|
||||
@@ -8,9 +7,7 @@ import {
|
||||
getAllPresets,
|
||||
getCurrentPreset,
|
||||
getCurrentPresetId,
|
||||
getUserLocale,
|
||||
setCurrentPreset,
|
||||
setUserLocale,
|
||||
updatePreset,
|
||||
} from "./config-manager"
|
||||
import { restartNextServer } from "./next-server"
|
||||
@@ -254,32 +251,4 @@ export function registerIpcHandlers(): void {
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== User Locale ====================
|
||||
|
||||
ipcMain.handle("get-user-locale", () => {
|
||||
return getUserLocale()
|
||||
})
|
||||
|
||||
ipcMain.handle("set-user-locale", (_event, locale: string) => {
|
||||
// Validate locale is one of the supported values
|
||||
if (!["en", "zh", "ja"].includes(locale)) {
|
||||
return { success: false, error: "Invalid locale" }
|
||||
}
|
||||
|
||||
try {
|
||||
setUserLocale(locale as "en" | "zh" | "ja")
|
||||
// Rebuild the menu to reflect the new locale
|
||||
rebuildAppMenu()
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
error:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to set locale",
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
/**
|
||||
* Internationalization support for Electron menu
|
||||
* Translations for menu labels that don't use Electron's built-in roles
|
||||
*/
|
||||
|
||||
import { getUserLocale } from "./config-manager"
|
||||
|
||||
export type MenuLocale = "en" | "zh" | "ja"
|
||||
|
||||
export interface MenuTranslations {
|
||||
// App menu (macOS only)
|
||||
settings: string
|
||||
|
||||
// File menu
|
||||
file: string
|
||||
|
||||
// Edit menu
|
||||
edit: string
|
||||
|
||||
// View menu
|
||||
view: string
|
||||
|
||||
// Configuration menu
|
||||
configuration: string
|
||||
switchPreset: string
|
||||
managePresets: string
|
||||
addConfigurationPreset: string
|
||||
|
||||
// Window menu
|
||||
window: string
|
||||
|
||||
// Help menu
|
||||
help: string
|
||||
documentation: string
|
||||
reportIssue: string
|
||||
}
|
||||
|
||||
const translations: Record<MenuLocale, MenuTranslations> = {
|
||||
en: {
|
||||
// App menu
|
||||
settings: "Settings...",
|
||||
|
||||
// File menu
|
||||
file: "File",
|
||||
|
||||
// Edit menu
|
||||
edit: "Edit",
|
||||
|
||||
// View menu
|
||||
view: "View",
|
||||
|
||||
// Configuration menu
|
||||
configuration: "Configuration",
|
||||
switchPreset: "Switch Preset",
|
||||
managePresets: "Manage Presets...",
|
||||
addConfigurationPreset: "Add Configuration Preset...",
|
||||
|
||||
// Window menu
|
||||
window: "Window",
|
||||
|
||||
// Help menu
|
||||
help: "Help",
|
||||
documentation: "Documentation",
|
||||
reportIssue: "Report Issue",
|
||||
},
|
||||
|
||||
zh: {
|
||||
// App menu
|
||||
settings: "设置...",
|
||||
|
||||
// File menu
|
||||
file: "文件",
|
||||
|
||||
// Edit menu
|
||||
edit: "编辑",
|
||||
|
||||
// View menu
|
||||
view: "查看",
|
||||
|
||||
// Configuration menu
|
||||
configuration: "配置",
|
||||
switchPreset: "切换预设",
|
||||
managePresets: "管理预设...",
|
||||
addConfigurationPreset: "添加配置预设...",
|
||||
|
||||
// Window menu
|
||||
window: "窗口",
|
||||
|
||||
// Help menu
|
||||
help: "帮助",
|
||||
documentation: "文档",
|
||||
reportIssue: "报告问题",
|
||||
},
|
||||
|
||||
ja: {
|
||||
// App menu
|
||||
settings: "設定...",
|
||||
|
||||
// File menu
|
||||
file: "ファイル",
|
||||
|
||||
// Edit menu
|
||||
edit: "編集",
|
||||
|
||||
// View menu
|
||||
view: "表示",
|
||||
|
||||
// Configuration menu
|
||||
configuration: "設定",
|
||||
switchPreset: "プリセット切り替え",
|
||||
managePresets: "プリセット管理...",
|
||||
addConfigurationPreset: "設定プリセットを追加...",
|
||||
|
||||
// Window menu
|
||||
window: "ウインドウ",
|
||||
|
||||
// Help menu
|
||||
help: "ヘルプ",
|
||||
documentation: "ドキュメント",
|
||||
reportIssue: "問題を報告",
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* Get menu translations for a given locale
|
||||
* Falls back to English if locale is not supported
|
||||
*/
|
||||
export function getMenuTranslations(locale: string): MenuTranslations {
|
||||
// Normalize locale (e.g., "zh-CN" -> "zh", "ja-JP" -> "ja")
|
||||
const normalized = locale.toLowerCase().split("-")[0]
|
||||
|
||||
if (normalized === "zh") return translations.zh
|
||||
if (normalized === "ja") return translations.ja
|
||||
return translations.en
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect system locale from Electron app
|
||||
* Returns one of: "en", "zh", "ja"
|
||||
*/
|
||||
export function detectSystemLocale(appLocale: string): MenuLocale {
|
||||
const normalized = appLocale.toLowerCase().split("-")[0]
|
||||
|
||||
if (normalized === "zh") return "zh"
|
||||
if (normalized === "ja") return "ja"
|
||||
return "en"
|
||||
}
|
||||
|
||||
/**
|
||||
* Get locale from stored preference or system default
|
||||
* Checks config file for user's language preference first
|
||||
*/
|
||||
export function getPreferredLocale(appLocale: string): MenuLocale {
|
||||
// Try to get from saved preference first
|
||||
const savedLocale = getUserLocale()
|
||||
if (savedLocale) {
|
||||
return savedLocale
|
||||
}
|
||||
|
||||
// Fall back to system locale
|
||||
return detectSystemLocale(appLocale)
|
||||
}
|
||||
@@ -26,9 +26,4 @@ contextBridge.exposeInMainWorld("electronAPI", {
|
||||
getProxy: () => ipcRenderer.invoke("get-proxy"),
|
||||
setProxy: (config: { httpProxy?: string; httpsProxy?: string }) =>
|
||||
ipcRenderer.invoke("set-proxy", config),
|
||||
|
||||
// User locale settings
|
||||
getUserLocale: () => ipcRenderer.invoke("get-user-locale"),
|
||||
setUserLocale: (locale: string) =>
|
||||
ipcRenderer.invoke("set-user-locale", locale),
|
||||
})
|
||||
|
||||
20
env.example
20
env.example
@@ -1,6 +1,6 @@
|
||||
# AI Provider Configuration
|
||||
# AI_PROVIDER: Which provider to use
|
||||
# Options: bedrock, openai, anthropic, google, vertexai, azure, ollama, openrouter, deepseek, siliconflow, gateway
|
||||
# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway
|
||||
# Default: bedrock
|
||||
AI_PROVIDER=bedrock
|
||||
|
||||
@@ -40,14 +40,6 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
|
||||
# GOOGLE_THINKING_BUDGET=8192 # Optional: Gemini 2.5 thinking budget in tokens (for more/less thinking)
|
||||
# GOOGLE_THINKING_LEVEL=high # Optional: Gemini 3 thinking level (low/high)
|
||||
|
||||
# Google Vertex AI Configuration (Enterprise GCP)
|
||||
# For enterprise users needing data residency, VPC Service Controls, or GCP integration
|
||||
# GOOGLE_VERTEX_API_KEY= # Required: Express Mode API key
|
||||
# GOOGLE_VERTEX_BASE_URL=https://... # Optional: Custom endpoint URL
|
||||
# Note: Gemini 2.5/3 models automatically enable reasoning display (includeThoughts: true)
|
||||
# GOOGLE_VERTEX_THINKING_BUDGET=8192 # Optional: Gemini 2.5 thinking budget in tokens (1024-100000)
|
||||
# GOOGLE_VERTEX_THINKING_LEVEL=high # Optional: Gemini 3 thinking level (minimal/low/medium/high)
|
||||
|
||||
# Azure OpenAI Configuration
|
||||
# Configure endpoint using ONE of these methods:
|
||||
# 1. AZURE_RESOURCE_NAME - SDK constructs: https://{name}.openai.azure.com/openai/v1{path}
|
||||
@@ -101,11 +93,6 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
|
||||
# LANGFUSE_SECRET_KEY=sk-lf-...
|
||||
# LANGFUSE_BASEURL=https://cloud.langfuse.com # EU region, use https://us.cloud.langfuse.com for US
|
||||
|
||||
# Optional server-side multi-model configuration
|
||||
# If set, points to a JSON file with server-provided models (see README for schema).
|
||||
# Default: ./ai-models.json in project root
|
||||
# AI_MODELS_CONFIG_PATH=/path/to/ai-models.json
|
||||
|
||||
# Temperature (Optional)
|
||||
# Controls randomness in AI responses. Lower = more deterministic.
|
||||
# Leave unset for models that don't support temperature (e.g., GPT-5.1 reasoning models)
|
||||
@@ -129,8 +116,3 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
|
||||
# Enabled by default. Set to "false" to disable.
|
||||
# ENABLE_PDF_INPUT=true
|
||||
# NEXT_PUBLIC_MAX_EXTRACTED_CHARS=150000 # Max characters for PDF/text extraction (default: 150000)
|
||||
|
||||
# Security Settings (Optional)
|
||||
# Allow private/internal URLs for reverse proxy setups (default: true)
|
||||
# Set to "false" to block private IPs, localhost, and internal hostnames
|
||||
# ALLOW_PRIVATE_URLS=false
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
import type { MutableRefObject } from "react"
|
||||
import { useRef } from "react"
|
||||
import type { DiagramOperation } from "@/components/chat/types"
|
||||
import type {
|
||||
ValidationState,
|
||||
ValidationStatus,
|
||||
} from "@/components/chat/ValidationCard"
|
||||
import type { ValidationResult } from "@/lib/diagram-validator"
|
||||
import { formatValidationFeedback } from "@/lib/diagram-validator"
|
||||
import { isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
|
||||
|
||||
const DEBUG = process.env.NODE_ENV === "development"
|
||||
@@ -37,14 +30,6 @@ type AddToolOutputParams = AddToolOutputSuccess | AddToolOutputError
|
||||
|
||||
type AddToolOutputFn = (params: AddToolOutputParams) => void
|
||||
|
||||
const MAX_VALIDATION_RETRIES = 3
|
||||
|
||||
// Type for the validation function passed from useValidateDiagram hook
|
||||
type ValidateDiagramFn = (
|
||||
imageData: string,
|
||||
sessionId?: string,
|
||||
) => Promise<ValidationResult>
|
||||
|
||||
interface UseDiagramToolHandlersParams {
|
||||
partialXmlRef: MutableRefObject<string>
|
||||
editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
|
||||
@@ -52,14 +37,6 @@ interface UseDiagramToolHandlersParams {
|
||||
onDisplayChart: (xml: string, skipValidation?: boolean) => string | null
|
||||
onFetchChart: (saveToHistory?: boolean) => Promise<string>
|
||||
onExport: () => void
|
||||
captureValidationPng?: () => Promise<string | null>
|
||||
validateDiagram?: ValidateDiagramFn
|
||||
enableVlmValidation?: boolean
|
||||
sessionId?: string
|
||||
onValidationStateChange?: (
|
||||
toolCallId: string,
|
||||
state: ValidationState,
|
||||
) => void
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -76,34 +53,7 @@ export function useDiagramToolHandlers({
|
||||
onDisplayChart,
|
||||
onFetchChart,
|
||||
onExport,
|
||||
captureValidationPng,
|
||||
validateDiagram,
|
||||
enableVlmValidation = true,
|
||||
sessionId,
|
||||
onValidationStateChange,
|
||||
}: UseDiagramToolHandlersParams) {
|
||||
// Track validation retry count per tool call
|
||||
const validationRetryCountRef = useRef<Map<string, number>>(new Map())
|
||||
|
||||
// Helper to update validation state
|
||||
const updateValidationState = (
|
||||
toolCallId: string,
|
||||
status: ValidationStatus,
|
||||
options?: {
|
||||
attempt?: number
|
||||
maxAttempts?: number
|
||||
result?: ValidationResult
|
||||
error?: string
|
||||
imageData?: string
|
||||
},
|
||||
) => {
|
||||
if (onValidationStateChange) {
|
||||
onValidationStateChange(toolCallId, {
|
||||
status,
|
||||
...options,
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleToolCall = async (
|
||||
{ toolCall }: { toolCall: ToolCall },
|
||||
addToolOutput: AddToolOutputFn,
|
||||
@@ -205,159 +155,7 @@ ${finalXml}
|
||||
// Success - diagram will be rendered by chat-message-display
|
||||
if (DEBUG) {
|
||||
console.log(
|
||||
"[display_diagram] Success! Checking if VLM validation is enabled...",
|
||||
)
|
||||
}
|
||||
|
||||
// VLM validation after successful display
|
||||
if (
|
||||
enableVlmValidation &&
|
||||
captureValidationPng &&
|
||||
validateDiagram
|
||||
) {
|
||||
let capturedPngData: string | null = null
|
||||
try {
|
||||
// Notify UI that we're starting capture
|
||||
updateValidationState(toolCall.toolCallId, "capturing")
|
||||
|
||||
// Small delay (100ms) to allow diagram rendering to complete before capture.
|
||||
// This is a best-effort heuristic and may need adjustment for complex diagrams or slower devices.
|
||||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||
|
||||
capturedPngData = await captureValidationPng()
|
||||
if (capturedPngData) {
|
||||
if (DEBUG) {
|
||||
console.log(
|
||||
"[display_diagram] Captured PNG for validation",
|
||||
)
|
||||
}
|
||||
|
||||
const retryCount =
|
||||
validationRetryCountRef.current.get(
|
||||
toolCall.toolCallId,
|
||||
) || 0
|
||||
|
||||
// Notify UI that we're validating (include the image)
|
||||
updateValidationState(
|
||||
toolCall.toolCallId,
|
||||
"validating",
|
||||
{
|
||||
attempt: retryCount + 1,
|
||||
maxAttempts: MAX_VALIDATION_RETRIES,
|
||||
imageData: capturedPngData,
|
||||
},
|
||||
)
|
||||
|
||||
const result = await validateDiagram(
|
||||
capturedPngData,
|
||||
sessionId,
|
||||
)
|
||||
|
||||
if (!result.valid) {
|
||||
if (retryCount < MAX_VALIDATION_RETRIES) {
|
||||
validationRetryCountRef.current.set(
|
||||
toolCall.toolCallId,
|
||||
retryCount + 1,
|
||||
)
|
||||
|
||||
const feedback =
|
||||
formatValidationFeedback(result)
|
||||
if (DEBUG) {
|
||||
console.log(
|
||||
`[display_diagram] Validation failed (attempt ${retryCount + 1}/${MAX_VALIDATION_RETRIES}):`,
|
||||
result.issues,
|
||||
)
|
||||
}
|
||||
|
||||
// Notify UI of validation failure (include the image)
|
||||
updateValidationState(
|
||||
toolCall.toolCallId,
|
||||
"failed",
|
||||
{
|
||||
attempt: retryCount + 1,
|
||||
maxAttempts: MAX_VALIDATION_RETRIES,
|
||||
result,
|
||||
imageData: capturedPngData,
|
||||
},
|
||||
)
|
||||
|
||||
addToolOutput({
|
||||
tool: "display_diagram",
|
||||
toolCallId: toolCall.toolCallId,
|
||||
state: "output-error",
|
||||
errorText: `[Validation attempt ${retryCount + 1}/${MAX_VALIDATION_RETRIES}]\n${feedback}`,
|
||||
})
|
||||
return
|
||||
} else {
|
||||
// Max retries reached - accept the diagram with warning
|
||||
if (DEBUG) {
|
||||
console.log(
|
||||
"[display_diagram] Max validation retries reached, accepting diagram",
|
||||
)
|
||||
}
|
||||
validationRetryCountRef.current.delete(
|
||||
toolCall.toolCallId,
|
||||
)
|
||||
|
||||
// Notify UI that we're accepting with issues (include the image)
|
||||
updateValidationState(
|
||||
toolCall.toolCallId,
|
||||
"skipped",
|
||||
{ result, imageData: capturedPngData },
|
||||
)
|
||||
|
||||
addToolOutput({
|
||||
tool: "display_diagram",
|
||||
toolCallId: toolCall.toolCallId,
|
||||
output: "Diagram displayed (validation issues noted but max retries reached).",
|
||||
})
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// Validation passed - clean up retry count
|
||||
validationRetryCountRef.current.delete(
|
||||
toolCall.toolCallId,
|
||||
)
|
||||
if (DEBUG) {
|
||||
console.log(
|
||||
"[display_diagram] Validation passed!",
|
||||
)
|
||||
}
|
||||
|
||||
// Notify UI of success (include the image)
|
||||
// Use "success_with_warnings" if valid but has issues
|
||||
const hasWarnings = result.issues.length > 0
|
||||
updateValidationState(
|
||||
toolCall.toolCallId,
|
||||
hasWarnings
|
||||
? "success_with_warnings"
|
||||
: "success",
|
||||
{ result, imageData: capturedPngData },
|
||||
)
|
||||
}
|
||||
} else {
|
||||
// PNG capture failed - skip validation
|
||||
updateValidationState(toolCall.toolCallId, "skipped")
|
||||
}
|
||||
} catch (error) {
|
||||
// VLM validation error - log but don't block the user
|
||||
console.warn(
|
||||
"[display_diagram] VLM validation error:",
|
||||
error,
|
||||
)
|
||||
updateValidationState(toolCall.toolCallId, "error", {
|
||||
error:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Validation failed",
|
||||
imageData: capturedPngData || undefined,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (DEBUG) {
|
||||
console.log(
|
||||
"[display_diagram] Adding tool output with state: output-available",
|
||||
"[display_diagram] Success! Adding tool output with state: output-available",
|
||||
)
|
||||
}
|
||||
addToolOutput({
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import type { FlattenedServerModel } from "@/lib/server-model-config"
|
||||
import { STORAGE_KEYS } from "@/lib/storage"
|
||||
import {
|
||||
createEmptyConfig,
|
||||
@@ -133,56 +132,14 @@ export interface UseModelConfigReturn {
|
||||
export function useModelConfig(): UseModelConfigReturn {
|
||||
const [config, setConfig] = useState<MultiModelConfig>(createEmptyConfig)
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const [serverModels, setServerModels] = useState<FlattenedServerModel[]>([])
|
||||
const [serverLoaded, setServerLoaded] = useState(false)
|
||||
|
||||
// Load client config on mount
|
||||
// Load config on mount
|
||||
useEffect(() => {
|
||||
const loaded = loadConfig()
|
||||
setConfig(loaded)
|
||||
setIsLoaded(true)
|
||||
}, [])
|
||||
|
||||
// Load server models on mount (if any)
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return
|
||||
|
||||
fetch("/api/server-models")
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
console.error(
|
||||
"Failed to load server models:",
|
||||
res.status,
|
||||
res.statusText,
|
||||
)
|
||||
throw new Error(`Request failed with status ${res.status}`)
|
||||
}
|
||||
return res.json()
|
||||
})
|
||||
.then((data) => {
|
||||
const raw: FlattenedServerModel[] = data?.models || []
|
||||
setServerModels(raw)
|
||||
setServerLoaded(true)
|
||||
|
||||
// Auto-select default server model if no model is currently selected
|
||||
setConfig((prev) => {
|
||||
if (!prev.selectedModelId && raw.length > 0) {
|
||||
const defaultModel = raw.find((m) => m.isDefault)
|
||||
if (defaultModel) {
|
||||
return { ...prev, selectedModelId: defaultModel.id }
|
||||
}
|
||||
// If no default marked, use first server model
|
||||
return { ...prev, selectedModelId: raw[0].id }
|
||||
}
|
||||
return prev
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error while loading server models:", error)
|
||||
setServerLoaded(true)
|
||||
})
|
||||
}, [])
|
||||
|
||||
// Save config whenever it changes (after initial load)
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
@@ -191,33 +148,9 @@ export function useModelConfig(): UseModelConfigReturn {
|
||||
}, [config, isLoaded])
|
||||
|
||||
// Derived state
|
||||
const userModels = flattenModels(config)
|
||||
|
||||
const models: FlattenedModel[] = [
|
||||
// Server models (read-only, credentials from env)
|
||||
...serverModels.map((m) => ({
|
||||
id: m.id,
|
||||
modelId: m.modelId,
|
||||
provider: m.provider,
|
||||
providerLabel: `Server · ${m.providerLabel}`,
|
||||
apiKey: "",
|
||||
baseUrl: undefined,
|
||||
awsAccessKeyId: undefined,
|
||||
awsSecretAccessKey: undefined,
|
||||
awsRegion: undefined,
|
||||
awsSessionToken: undefined,
|
||||
validated: true,
|
||||
source: "server" as const,
|
||||
isDefault: m.isDefault,
|
||||
apiKeyEnv: m.apiKeyEnv,
|
||||
baseUrlEnv: m.baseUrlEnv,
|
||||
})),
|
||||
// User models from local configuration
|
||||
...userModels,
|
||||
]
|
||||
|
||||
const models = flattenModels(config)
|
||||
const selectedModel = config.selectedModelId
|
||||
? models.find((m) => m.id === config.selectedModelId)
|
||||
? findModelById(config, config.selectedModelId)
|
||||
: undefined
|
||||
|
||||
// Actions
|
||||
@@ -349,7 +282,7 @@ export function useModelConfig(): UseModelConfigReturn {
|
||||
|
||||
return {
|
||||
config,
|
||||
isLoaded: isLoaded && serverLoaded,
|
||||
isLoaded,
|
||||
models,
|
||||
selectedModel,
|
||||
selectedModelId: config.selectedModelId,
|
||||
@@ -381,10 +314,6 @@ export function getSelectedAIConfig(): {
|
||||
awsSecretAccessKey: string
|
||||
awsRegion: string
|
||||
awsSessionToken: string
|
||||
// Selected model ID (for server model lookup)
|
||||
selectedModelId: string
|
||||
// Vertex AI credentials (Express Mode)
|
||||
vertexApiKey: string
|
||||
} {
|
||||
const empty = {
|
||||
accessCode: "",
|
||||
@@ -396,8 +325,6 @@ export function getSelectedAIConfig(): {
|
||||
awsSecretAccessKey: "",
|
||||
awsRegion: "",
|
||||
awsSessionToken: "",
|
||||
selectedModelId: "",
|
||||
vertexApiKey: "",
|
||||
}
|
||||
|
||||
if (typeof window === "undefined") return empty
|
||||
@@ -420,8 +347,6 @@ export function getSelectedAIConfig(): {
|
||||
awsSecretAccessKey: "",
|
||||
awsRegion: "",
|
||||
awsSessionToken: "",
|
||||
selectedModelId: "",
|
||||
vertexApiKey: "",
|
||||
}
|
||||
}
|
||||
|
||||
@@ -432,32 +357,12 @@ export function getSelectedAIConfig(): {
|
||||
return { ...empty, accessCode }
|
||||
}
|
||||
|
||||
// No selected model = use server default (AI_PROVIDER/AI_MODEL/env auto-detect)
|
||||
// No selected model = use server default
|
||||
if (!config.selectedModelId) {
|
||||
return { ...empty, accessCode }
|
||||
}
|
||||
|
||||
// Server-side model selection (id = "server:<name-slug>:<modelId>")
|
||||
// Provider is resolved server-side via findServerModelById()
|
||||
if (config.selectedModelId.startsWith("server:")) {
|
||||
const parts = config.selectedModelId.split(":")
|
||||
const nameSlug = parts[1] || ""
|
||||
const modelId = parts.slice(2).join(":") // Preserve Bedrock-style IDs
|
||||
|
||||
return {
|
||||
...empty,
|
||||
accessCode,
|
||||
// Note: nameSlug is NOT the provider, but we send it for backwards compat
|
||||
// Server uses selectedModelId to lookup the actual provider
|
||||
aiProvider: nameSlug,
|
||||
aiBaseUrl: "",
|
||||
aiApiKey: "",
|
||||
aiModel: modelId,
|
||||
selectedModelId: config.selectedModelId,
|
||||
}
|
||||
}
|
||||
|
||||
// Find selected user-defined model
|
||||
// Find selected model
|
||||
const model = findModelById(config, config.selectedModelId)
|
||||
if (!model) {
|
||||
return { ...empty, accessCode }
|
||||
@@ -474,8 +379,5 @@ export function getSelectedAIConfig(): {
|
||||
awsSecretAccessKey: model.awsSecretAccessKey || "",
|
||||
awsRegion: model.awsRegion || "",
|
||||
awsSessionToken: model.awsSessionToken || "",
|
||||
selectedModelId: config.selectedModelId || "",
|
||||
// Vertex AI credentials (Express Mode)
|
||||
vertexApiKey: model.vertexApiKey || "",
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
"use client"
|
||||
|
||||
/**
|
||||
* Hook for VLM-based diagram validation using AI SDK's useObject.
|
||||
*/
|
||||
|
||||
import { experimental_useObject as useObject } from "@ai-sdk/react"
|
||||
import { useCallback, useRef } from "react"
|
||||
import { getApiEndpoint } from "@/lib/base-path"
|
||||
import {
|
||||
type ValidationResult,
|
||||
ValidationResultSchema,
|
||||
} from "@/lib/validation-schema"
|
||||
|
||||
export type { ValidationResult }
|
||||
|
||||
// Default valid result for fallback cases
|
||||
const DEFAULT_VALID_RESULT: ValidationResult = {
|
||||
valid: true,
|
||||
issues: [],
|
||||
suggestions: [],
|
||||
}
|
||||
|
||||
interface UseValidateDiagramOptions {
|
||||
onSuccess?: (result: ValidationResult) => void
|
||||
onError?: (error: Error) => void
|
||||
}
|
||||
|
||||
// Track pending validation promises for imperative API
|
||||
type PendingValidation = {
|
||||
resolve: (result: ValidationResult) => void
|
||||
reject: (error: Error) => void
|
||||
}
|
||||
|
||||
export function useValidateDiagram(options: UseValidateDiagramOptions = {}) {
|
||||
const { onSuccess, onError } = options
|
||||
const pendingValidationRef = useRef<PendingValidation | null>(null)
|
||||
|
||||
const { object, submit, isLoading, error, stop } = useObject({
|
||||
api: getApiEndpoint("/api/validate-diagram"),
|
||||
schema: ValidationResultSchema,
|
||||
onFinish: ({
|
||||
object,
|
||||
error: finishError,
|
||||
}: {
|
||||
object: ValidationResult | undefined
|
||||
error: Error | undefined
|
||||
}) => {
|
||||
if (finishError) {
|
||||
console.error(
|
||||
"[useValidateDiagram] Validation error:",
|
||||
finishError,
|
||||
)
|
||||
onError?.(finishError)
|
||||
pendingValidationRef.current?.reject(finishError)
|
||||
pendingValidationRef.current = null
|
||||
return
|
||||
}
|
||||
|
||||
if (object) {
|
||||
const result = object as ValidationResult
|
||||
onSuccess?.(result)
|
||||
pendingValidationRef.current?.resolve(result)
|
||||
pendingValidationRef.current = null
|
||||
}
|
||||
},
|
||||
onError: (err: Error) => {
|
||||
console.error("[useValidateDiagram] Stream error:", err)
|
||||
onError?.(err)
|
||||
pendingValidationRef.current?.reject(err)
|
||||
pendingValidationRef.current = null
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* Validate a diagram image.
|
||||
* Returns a promise that resolves with the validation result.
|
||||
*/
|
||||
const validate = useCallback(
|
||||
async (
|
||||
imageData: string,
|
||||
sessionId?: string,
|
||||
): Promise<ValidationResult> => {
|
||||
// Reject any pending validation to prevent promise leaks
|
||||
if (pendingValidationRef.current) {
|
||||
pendingValidationRef.current.reject(
|
||||
new Error("Validation superseded by new request"),
|
||||
)
|
||||
pendingValidationRef.current = null
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// Store the promise handlers
|
||||
pendingValidationRef.current = { resolve, reject }
|
||||
|
||||
// Submit the validation request
|
||||
submit({ imageData, sessionId })
|
||||
})
|
||||
},
|
||||
[submit],
|
||||
)
|
||||
|
||||
/**
|
||||
* Validate with fallback - returns default valid result on error.
|
||||
* Use this to avoid blocking the user on validation failures.
|
||||
*/
|
||||
const validateWithFallback = useCallback(
|
||||
async (
|
||||
imageData: string,
|
||||
sessionId?: string,
|
||||
): Promise<ValidationResult> => {
|
||||
try {
|
||||
return await validate(imageData, sessionId)
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
"[useValidateDiagram] Validation failed, using fallback:",
|
||||
error,
|
||||
)
|
||||
return DEFAULT_VALID_RESULT
|
||||
}
|
||||
},
|
||||
[validate],
|
||||
)
|
||||
|
||||
return {
|
||||
// Validation functions
|
||||
validate,
|
||||
validateWithFallback,
|
||||
stop,
|
||||
|
||||
// State
|
||||
isValidating: isLoading,
|
||||
partialResult: object as ValidationResult | undefined,
|
||||
error,
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,6 @@ import { azure, createAzure } from "@ai-sdk/azure"
|
||||
import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
|
||||
import { createGateway, gateway } from "@ai-sdk/gateway"
|
||||
import { createGoogleGenerativeAI, google } from "@ai-sdk/google"
|
||||
import { createVertex } from "@ai-sdk/google-vertex"
|
||||
import { createOpenAI, openai } from "@ai-sdk/openai"
|
||||
import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
|
||||
import { createOpenRouter } from "@openrouter/ai-sdk-provider"
|
||||
@@ -30,13 +29,8 @@ export interface ClientOverrides {
|
||||
awsSecretAccessKey?: string | null
|
||||
awsRegion?: string | null
|
||||
awsSessionToken?: string | null
|
||||
// Vertex AI config
|
||||
vertexApiKey?: string | null // Express Mode API key
|
||||
// Custom headers (e.g., for EdgeOne cookie auth)
|
||||
headers?: Record<string, string>
|
||||
// Custom env var names for server models (allows multiple API keys per provider)
|
||||
apiKeyEnv?: string
|
||||
baseUrlEnv?: string
|
||||
}
|
||||
|
||||
// Providers that can be used with client-provided API keys
|
||||
@@ -44,7 +38,6 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
|
||||
"openai",
|
||||
"anthropic",
|
||||
"google",
|
||||
"vertexai",
|
||||
"azure",
|
||||
"bedrock",
|
||||
"openrouter",
|
||||
@@ -95,36 +88,6 @@ export function resolveBaseURL(
|
||||
return userBaseUrl || serverBaseUrl || defaultBaseUrl || undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve API key from custom env var name or default env var.
|
||||
* Supports multiple API keys per provider via ai-models.json apiKeyEnv config.
|
||||
*
|
||||
* Priority:
|
||||
* 1. User-provided API key (overrides.apiKey)
|
||||
* 2. Custom env var from ai-models.json (overrides.apiKeyEnv)
|
||||
* 3. Default provider env var (defaultEnvVar)
|
||||
*/
|
||||
function resolveApiKey(
|
||||
overrides: ClientOverrides | undefined,
|
||||
defaultEnvVar: string,
|
||||
): string | undefined {
|
||||
if (overrides?.apiKey) return overrides.apiKey
|
||||
if (overrides?.apiKeyEnv) return process.env[overrides.apiKeyEnv]
|
||||
return process.env[defaultEnvVar]
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve base URL from custom env var name or default env var.
|
||||
* Supports multiple base URLs per provider via ai-models.json baseUrlEnv config.
|
||||
*/
|
||||
function resolveBaseUrlEnv(
|
||||
overrides: ClientOverrides | undefined,
|
||||
defaultEnvVar: string,
|
||||
): string | undefined {
|
||||
if (overrides?.baseUrlEnv) return process.env[overrides.baseUrlEnv]
|
||||
return process.env[defaultEnvVar]
|
||||
}
|
||||
|
||||
/**
|
||||
* Safely parse integer from environment variable with validation
|
||||
*/
|
||||
@@ -159,8 +122,6 @@ function parseIntSafe(
|
||||
* - ANTHROPIC_THINKING_TYPE: Anthropic thinking type (enabled)
|
||||
* - GOOGLE_THINKING_BUDGET: Google Gemini 2.5 thinking budget in tokens (1024-100000)
|
||||
* - GOOGLE_THINKING_LEVEL: Google Gemini 3 thinking level (low/high)
|
||||
* - GOOGLE_VERTEX_THINKING_BUDGET: Vertex AI Gemini 2.5 thinking budget in tokens (1024-100000)
|
||||
* - GOOGLE_VERTEX_THINKING_LEVEL: Vertex AI Gemini 3 thinking level (low/high)
|
||||
* - AZURE_REASONING_EFFORT: Azure/OpenAI reasoning effort (low/medium/high)
|
||||
* - AZURE_REASONING_SUMMARY: Azure reasoning summary (none/brief/detailed)
|
||||
* - BEDROCK_REASONING_BUDGET_TOKENS: Bedrock Claude reasoning budget in tokens (1024-64000)
|
||||
@@ -325,46 +286,7 @@ function buildProviderOptions(
|
||||
}
|
||||
break
|
||||
}
|
||||
case "vertexai": {
|
||||
const thinkingBudget = parseIntSafe(
|
||||
process.env.GOOGLE_VERTEX_THINKING_BUDGET,
|
||||
"GOOGLE_VERTEX_THINKING_BUDGET",
|
||||
1024,
|
||||
100000,
|
||||
)
|
||||
const thinkingLevel = process.env.GOOGLE_VERTEX_THINKING_LEVEL
|
||||
|
||||
if (
|
||||
modelId &&
|
||||
(modelId.includes("gemini-2") ||
|
||||
modelId.includes("gemini-3") ||
|
||||
modelId.includes("gemini2") ||
|
||||
modelId.includes("gemini3"))
|
||||
) {
|
||||
const thinkingConfig: Record<string, any> = {
|
||||
includeThoughts: true,
|
||||
}
|
||||
|
||||
const isGemini3 =
|
||||
modelId?.includes("gemini-3") ||
|
||||
modelId?.includes("gemini3")
|
||||
const isGemini25 =
|
||||
modelId?.includes("2.5") || modelId?.includes("2-5")
|
||||
|
||||
if (isGemini3 && thinkingLevel) {
|
||||
// Vertex AI provider in AI SDK supports more granular levels (minimal/low/medium/high)
|
||||
thinkingConfig.thinkingLevel = thinkingLevel as
|
||||
| "minimal"
|
||||
| "low"
|
||||
| "medium"
|
||||
| "high"
|
||||
} else if (isGemini25 && thinkingBudget) {
|
||||
thinkingConfig.thinkingBudget = thinkingBudget
|
||||
}
|
||||
options.google = { thinkingConfig }
|
||||
}
|
||||
break
|
||||
}
|
||||
case "azure": {
|
||||
const reasoningEffort = process.env.AZURE_REASONING_EFFORT
|
||||
const reasoningSummary = process.env.AZURE_REASONING_SUMMARY
|
||||
@@ -466,7 +388,6 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
|
||||
openai: "OPENAI_API_KEY",
|
||||
anthropic: "ANTHROPIC_API_KEY",
|
||||
google: "GOOGLE_GENERATIVE_AI_API_KEY",
|
||||
vertexai: "GOOGLE_VERTEX_API_KEY",
|
||||
azure: "AZURE_API_KEY",
|
||||
ollama: null, // No credentials needed for local Ollama
|
||||
openrouter: "OPENROUTER_API_KEY",
|
||||
@@ -514,15 +435,9 @@ function detectProvider(): ProviderName | null {
|
||||
|
||||
/**
|
||||
* Validate that required API keys are present for the selected provider
|
||||
* @param provider - The provider to validate
|
||||
* @param customApiKeyEnv - Optional custom env var name (from ai-models.json apiKeyEnv)
|
||||
*/
|
||||
function validateProviderCredentials(
|
||||
provider: ProviderName,
|
||||
customApiKeyEnv?: string,
|
||||
): void {
|
||||
// Use custom env var name if provided, otherwise use default
|
||||
const requiredVar = customApiKeyEnv || PROVIDER_ENV_VARS[provider]
|
||||
function validateProviderCredentials(provider: ProviderName): void {
|
||||
const requiredVar = PROVIDER_ENV_VARS[provider]
|
||||
if (requiredVar && !process.env[requiredVar]) {
|
||||
throw new Error(
|
||||
`${requiredVar} environment variable is required for ${provider} provider. ` +
|
||||
@@ -576,7 +491,6 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
if (
|
||||
overrides?.baseUrl &&
|
||||
!overrides?.apiKey &&
|
||||
!(overrides?.provider === "vertexai" && overrides?.vertexApiKey) &&
|
||||
overrides?.provider !== "edgeone"
|
||||
) {
|
||||
throw new Error(
|
||||
@@ -586,11 +500,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
// Check if client is providing their own provider override
|
||||
const isClientOverride = !!(
|
||||
overrides?.provider &&
|
||||
(overrides?.apiKey ||
|
||||
(overrides?.provider === "vertexai" && overrides?.vertexApiKey))
|
||||
)
|
||||
const isClientOverride = !!(overrides?.provider && overrides?.apiKey)
|
||||
|
||||
// Use client override if provided, otherwise fall back to env vars
|
||||
const modelId = overrides?.modelId || process.env.AI_MODEL
|
||||
@@ -660,7 +570,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
|
||||
// Only validate server credentials if client isn't providing their own API key
|
||||
if (!isClientOverride) {
|
||||
validateProviderCredentials(provider, overrides?.apiKeyEnv)
|
||||
validateProviderCredentials(provider)
|
||||
}
|
||||
|
||||
console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`)
|
||||
@@ -710,15 +620,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "openai": {
|
||||
const apiKey = resolveApiKey(overrides, "OPENAI_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"OPENAI_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.OPENAI_BASE_URL,
|
||||
)
|
||||
if (baseURL) {
|
||||
// Custom base URL = third-party proxy, use Chat Completions API
|
||||
@@ -737,15 +643,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "anthropic": {
|
||||
const apiKey = resolveApiKey(overrides, "ANTHROPIC_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"ANTHROPIC_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.ANTHROPIC_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.ANTHROPIC_BASE_URL,
|
||||
"https://api.anthropic.com/v1",
|
||||
)
|
||||
const customProvider = createAnthropic({
|
||||
@@ -760,18 +662,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "google": {
|
||||
const apiKey = resolveApiKey(
|
||||
overrides,
|
||||
"GOOGLE_GENERATIVE_AI_API_KEY",
|
||||
)
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"GOOGLE_BASE_URL",
|
||||
)
|
||||
const apiKey =
|
||||
overrides?.apiKey || process.env.GOOGLE_GENERATIVE_AI_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.GOOGLE_BASE_URL,
|
||||
)
|
||||
if (baseURL || overrides?.apiKey) {
|
||||
const customGoogle = createGoogleGenerativeAI({
|
||||
@@ -784,37 +680,13 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
break
|
||||
}
|
||||
case "vertexai": {
|
||||
// Express Mode: Use API key for authentication
|
||||
const vertexApiKey =
|
||||
overrides?.vertexApiKey || process.env.GOOGLE_VERTEX_API_KEY
|
||||
|
||||
if (!vertexApiKey) {
|
||||
throw new Error(
|
||||
"Vertex AI requires an API key for Express Mode. " +
|
||||
"Get one from Google Cloud Console or set GOOGLE_VERTEX_API_KEY environment variable.",
|
||||
)
|
||||
}
|
||||
|
||||
// Support custom base URL from env or client override
|
||||
const baseURL =
|
||||
overrides?.baseUrl || process.env.GOOGLE_VERTEX_BASE_URL
|
||||
|
||||
const vertexProvider = createVertex({
|
||||
apiKey: vertexApiKey,
|
||||
...(baseURL && { baseURL }),
|
||||
})
|
||||
model = vertexProvider(modelId)
|
||||
break
|
||||
}
|
||||
|
||||
case "azure": {
|
||||
const apiKey = resolveApiKey(overrides, "AZURE_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(overrides, "AZURE_BASE_URL")
|
||||
const apiKey = overrides?.apiKey || process.env.AZURE_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.AZURE_BASE_URL,
|
||||
)
|
||||
// Only use server's resourceName if user is NOT providing their own API key
|
||||
const resourceName = overrides?.apiKey
|
||||
@@ -848,15 +720,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
break
|
||||
|
||||
case "openrouter": {
|
||||
const apiKey = resolveApiKey(overrides, "OPENROUTER_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"OPENROUTER_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.OPENROUTER_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.OPENROUTER_BASE_URL,
|
||||
)
|
||||
const openrouter = createOpenRouter({
|
||||
apiKey,
|
||||
@@ -867,15 +735,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "deepseek": {
|
||||
const apiKey = resolveApiKey(overrides, "DEEPSEEK_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"DEEPSEEK_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.DEEPSEEK_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.DEEPSEEK_BASE_URL,
|
||||
)
|
||||
if (baseURL || overrides?.apiKey) {
|
||||
const customDeepSeek = createDeepSeek({
|
||||
@@ -890,15 +754,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "siliconflow": {
|
||||
const apiKey = resolveApiKey(overrides, "SILICONFLOW_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"SILICONFLOW_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.SILICONFLOW_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.SILICONFLOW_BASE_URL,
|
||||
"https://api.siliconflow.cn/v1",
|
||||
)
|
||||
const siliconflowProvider = createOpenAI({
|
||||
@@ -910,15 +770,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "sglang": {
|
||||
const apiKey = resolveApiKey(overrides, "SGLANG_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"SGLANG_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.SGLANG_BASE_URL,
|
||||
)
|
||||
|
||||
const sglangProvider = createOpenAI({
|
||||
@@ -1027,15 +883,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
// Vercel AI Gateway - unified access to multiple AI providers
|
||||
// Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
|
||||
// See: https://vercel.com/ai-gateway
|
||||
const apiKey = resolveApiKey(overrides, "AI_GATEWAY_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"AI_GATEWAY_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
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
|
||||
@@ -1067,15 +919,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "doubao": {
|
||||
const apiKey = resolveApiKey(overrides, "DOUBAO_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"DOUBAO_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.DOUBAO_BASE_URL,
|
||||
"https://ark.cn-beijing.volces.com/api/v3",
|
||||
)
|
||||
const lowerModelId = modelId.toLowerCase()
|
||||
@@ -1100,15 +948,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
}
|
||||
|
||||
case "modelscope": {
|
||||
const apiKey = resolveApiKey(overrides, "MODELSCOPE_API_KEY")
|
||||
const serverBaseUrl = resolveBaseUrlEnv(
|
||||
overrides,
|
||||
"MODELSCOPE_BASE_URL",
|
||||
)
|
||||
const apiKey = overrides?.apiKey || process.env.MODELSCOPE_API_KEY
|
||||
const baseURL = resolveBaseURL(
|
||||
overrides?.apiKey,
|
||||
overrides?.baseUrl,
|
||||
serverBaseUrl,
|
||||
process.env.MODELSCOPE_BASE_URL,
|
||||
"https://api-inference.modelscope.cn/v1",
|
||||
)
|
||||
const modelscopeProvider = createOpenAI({
|
||||
@@ -1177,27 +1021,3 @@ export function supportsImageInput(modelId: string): boolean {
|
||||
// Default: assume model supports images
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the AI model for diagram validation.
|
||||
* Uses VALIDATION_MODEL env var if set, otherwise falls back to AI_MODEL.
|
||||
* Throws if the model doesn't support image input.
|
||||
*/
|
||||
export function getValidationModel(): ReturnType<typeof getAIModel>["model"] {
|
||||
const modelId = process.env.VALIDATION_MODEL || process.env.AI_MODEL
|
||||
|
||||
if (!modelId) {
|
||||
throw new Error(
|
||||
"No validation model configured. Set VALIDATION_MODEL or AI_MODEL.",
|
||||
)
|
||||
}
|
||||
|
||||
if (!supportsImageInput(modelId)) {
|
||||
throw new Error(
|
||||
`Validation requires a vision-capable model. Model "${modelId}" does not support image input.`,
|
||||
)
|
||||
}
|
||||
|
||||
const { model } = getAIModel({ modelId })
|
||||
return model
|
||||
}
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
/**
|
||||
* Types and utilities for VLM-based diagram validation.
|
||||
* The actual validation is performed via useValidateDiagram hook using AI SDK's useObject.
|
||||
*/
|
||||
|
||||
// Re-export types from the schema file (single source of truth)
|
||||
export type { ValidationIssue, ValidationResult } from "./validation-schema"
|
||||
|
||||
import type { ValidationResult } from "./validation-schema"
|
||||
|
||||
/**
|
||||
* Format validation feedback for display to the AI model.
|
||||
* This creates a human-readable error message that guides the AI to fix issues.
|
||||
*
|
||||
* @param result - The validation result from VLM
|
||||
* @returns Formatted string for tool error output
|
||||
*/
|
||||
export function formatValidationFeedback(result: ValidationResult): string {
|
||||
// If validation passed with no issues, return empty string
|
||||
if (result.valid && result.issues.length === 0) {
|
||||
return ""
|
||||
}
|
||||
|
||||
const lines: string[] = []
|
||||
|
||||
lines.push("DIAGRAM VISUAL VALIDATION FAILED")
|
||||
lines.push("")
|
||||
|
||||
// Group issues by severity
|
||||
const criticalIssues = result.issues.filter(
|
||||
(i) => i.severity === "critical",
|
||||
)
|
||||
const warnings = result.issues.filter((i) => i.severity === "warning")
|
||||
|
||||
if (criticalIssues.length > 0) {
|
||||
lines.push("Critical Issues (must fix):")
|
||||
for (const issue of criticalIssues) {
|
||||
lines.push(` - [${issue.type}] ${issue.description}`)
|
||||
}
|
||||
lines.push("")
|
||||
}
|
||||
|
||||
if (warnings.length > 0) {
|
||||
lines.push("Warnings:")
|
||||
for (const issue of warnings) {
|
||||
lines.push(` - [${issue.type}] ${issue.description}`)
|
||||
}
|
||||
lines.push("")
|
||||
}
|
||||
|
||||
if (result.suggestions.length > 0) {
|
||||
lines.push("Suggestions to fix:")
|
||||
for (const suggestion of result.suggestions) {
|
||||
lines.push(` - ${suggestion}`)
|
||||
}
|
||||
lines.push("")
|
||||
}
|
||||
|
||||
lines.push(
|
||||
"Please regenerate the diagram with corrected layout to fix these visual issues.",
|
||||
)
|
||||
|
||||
return lines.join("\n")
|
||||
}
|
||||
@@ -115,11 +115,7 @@
|
||||
"httpProxy": "HTTP Proxy",
|
||||
"httpsProxy": "HTTPS Proxy",
|
||||
"applyProxy": "Apply",
|
||||
"proxyApplied": "Proxy settings applied",
|
||||
"diagramValidation": "Diagram Validation (Experimental)",
|
||||
"diagramValidationDescription": "Use a vision language model to validate generated diagrams. Requires a VLM like GPT-5.2 or Sonnet-4.5.",
|
||||
"enabled": "Enabled",
|
||||
"disabled": "Disabled"
|
||||
"proxyApplied": "Proxy settings applied"
|
||||
},
|
||||
"save": {
|
||||
"title": "Save Diagram",
|
||||
@@ -252,24 +248,6 @@
|
||||
"searchPlaceholder": "Search chats...",
|
||||
"noResults": "No chats found"
|
||||
},
|
||||
"validation": {
|
||||
"title": "Validate Diagram",
|
||||
"capturing": "Capturing",
|
||||
"validating": "Validating",
|
||||
"validatingWithAttempt": "Validating ({attempt}/{max})",
|
||||
"valid": "Valid",
|
||||
"validWithWarnings": "Valid with Warnings",
|
||||
"issuesFound": "Issues Found",
|
||||
"error": "Error",
|
||||
"skipped": "Skipped",
|
||||
"capturedScreenshot": "Captured Screenshot:",
|
||||
"issuesFoundLabel": "Issues Found:",
|
||||
"suggestions": "Suggestions:",
|
||||
"passedValidation": "Diagram passed visual validation - no issues detected.",
|
||||
"improvementRequested": "Improvement requested - check the new diagram below",
|
||||
"improveWithSuggestions": "Improve with Suggestions",
|
||||
"regenerateWithFeedback": "Regenerate the diagram using the validation feedback"
|
||||
},
|
||||
"modelConfig": {
|
||||
"title": "AI Model Configuration",
|
||||
"description": "Configure multiple AI providers and models",
|
||||
@@ -302,7 +280,6 @@
|
||||
"enterSecretKey": "Enter your secret access key",
|
||||
"baseUrl": "Base URL",
|
||||
"optional": "(optional)",
|
||||
"baseUrlWithExample": "Base URL (optional, e.g. {example})",
|
||||
"customEndpoint": "Custom endpoint URL",
|
||||
"models": "Models",
|
||||
"customModelId": "Custom model ID...",
|
||||
@@ -328,13 +305,10 @@
|
||||
"noModelsFound": "No models found.",
|
||||
"default": "Default",
|
||||
"serverDefault": "Server Default",
|
||||
"serverModels": "Server Models",
|
||||
"userModels": "User Models",
|
||||
"configureModels": "Configure Models...",
|
||||
"onlyVerifiedShown": "Only verified models are shown",
|
||||
"showUnvalidatedModels": "Show unvalidated models",
|
||||
"allModelsShown": "All models are shown (including unvalidated)",
|
||||
"unvalidatedModelWarning": "This model has not been validated",
|
||||
"serverDefaultModel": "Server default model"
|
||||
"unvalidatedModelWarning": "This model has not been validated"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,11 +115,7 @@
|
||||
"httpProxy": "HTTP プロキシ",
|
||||
"httpsProxy": "HTTPS プロキシ",
|
||||
"applyProxy": "適用",
|
||||
"proxyApplied": "プロキシ設定が適用されました",
|
||||
"diagramValidation": "ダイアグラム検証(実験的)",
|
||||
"diagramValidationDescription": "視覚言語モデルを使用して生成されたダイアグラムを検証します。GPT-5.2 や Sonnet-4.5 などの VLM が必要です。",
|
||||
"enabled": "有効",
|
||||
"disabled": "無効"
|
||||
"proxyApplied": "プロキシ設定が適用されました"
|
||||
},
|
||||
"save": {
|
||||
"title": "ダイアグラムを保存",
|
||||
@@ -252,24 +248,6 @@
|
||||
"searchPlaceholder": "チャットを検索...",
|
||||
"noResults": "チャットが見つかりません"
|
||||
},
|
||||
"validation": {
|
||||
"title": "ダイアグラムを検証",
|
||||
"capturing": "キャプチャ中",
|
||||
"validating": "検証中",
|
||||
"validatingWithAttempt": "検証中 ({attempt}/{max})",
|
||||
"valid": "有効",
|
||||
"validWithWarnings": "有効(警告あり)",
|
||||
"issuesFound": "問題が見つかりました",
|
||||
"error": "エラー",
|
||||
"skipped": "スキップ",
|
||||
"capturedScreenshot": "キャプチャした画像:",
|
||||
"issuesFoundLabel": "検出された問題:",
|
||||
"suggestions": "提案:",
|
||||
"passedValidation": "ダイアグラムは視覚検証に合格しました - 問題は検出されませんでした。",
|
||||
"improvementRequested": "改善リクエスト済み - 下の新しいダイアグラムを確認してください",
|
||||
"improveWithSuggestions": "提案で改善",
|
||||
"regenerateWithFeedback": "検証フィードバックを使用してダイアグラムを再生成"
|
||||
},
|
||||
"modelConfig": {
|
||||
"title": "AIモデル設定",
|
||||
"description": "複数のAIプロバイダーとモデルを設定",
|
||||
@@ -302,7 +280,6 @@
|
||||
"enterSecretKey": "シークレットアクセスキーを入力",
|
||||
"baseUrl": "ベース URL",
|
||||
"optional": "(オプション)",
|
||||
"baseUrlWithExample": "ベース URL(オプション、例: {example})",
|
||||
"customEndpoint": "カスタムエンドポイント URL",
|
||||
"models": "モデル",
|
||||
"customModelId": "カスタムモデル ID...",
|
||||
@@ -328,13 +305,10 @@
|
||||
"noModelsFound": "モデルが見つかりません。",
|
||||
"default": "デフォルト",
|
||||
"serverDefault": "サーバーデフォルト",
|
||||
"serverModels": "サーバーモデル",
|
||||
"userModels": "ユーザーモデル",
|
||||
"configureModels": "モデルを設定...",
|
||||
"onlyVerifiedShown": "検証済みのモデルのみ表示",
|
||||
"showUnvalidatedModels": "未検証のモデルを表示",
|
||||
"allModelsShown": "すべてのモデルを表示(未検証を含む)",
|
||||
"unvalidatedModelWarning": "このモデルは検証されていません",
|
||||
"serverDefaultModel": "サーバーデフォルトモデル"
|
||||
"unvalidatedModelWarning": "このモデルは検証されていません"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,11 +115,7 @@
|
||||
"httpProxy": "HTTP 代理",
|
||||
"httpsProxy": "HTTPS 代理",
|
||||
"applyProxy": "应用",
|
||||
"proxyApplied": "代理设置已应用",
|
||||
"diagramValidation": "图表验证(实验性)",
|
||||
"diagramValidationDescription": "使用视觉语言模型验证生成的图表。需要支持视觉的模型,如 GPT-5.2 或 Sonnet-4.5。",
|
||||
"enabled": "已启用",
|
||||
"disabled": "已禁用"
|
||||
"proxyApplied": "代理设置已应用"
|
||||
},
|
||||
"save": {
|
||||
"title": "保存图表",
|
||||
@@ -252,24 +248,6 @@
|
||||
"searchPlaceholder": "搜索对话...",
|
||||
"noResults": "未找到对话"
|
||||
},
|
||||
"validation": {
|
||||
"title": "验证图表",
|
||||
"capturing": "截图中",
|
||||
"validating": "验证中",
|
||||
"validatingWithAttempt": "验证中 ({attempt}/{max})",
|
||||
"valid": "通过",
|
||||
"validWithWarnings": "通过(有警告)",
|
||||
"issuesFound": "发现问题",
|
||||
"error": "错误",
|
||||
"skipped": "已跳过",
|
||||
"capturedScreenshot": "截图预览:",
|
||||
"issuesFoundLabel": "发现的问题:",
|
||||
"suggestions": "建议:",
|
||||
"passedValidation": "图表通过视觉验证 - 未发现问题。",
|
||||
"improvementRequested": "改进请求已发送 - 请查看下方新图表",
|
||||
"improveWithSuggestions": "根据建议改进",
|
||||
"regenerateWithFeedback": "使用验证反馈重新生成图表"
|
||||
},
|
||||
"modelConfig": {
|
||||
"title": "AI 模型配置",
|
||||
"description": "配置多个 AI 提供商和模型",
|
||||
@@ -302,7 +280,6 @@
|
||||
"enterSecretKey": "输入您的 Secret Key",
|
||||
"baseUrl": "基础 URL",
|
||||
"optional": "(可选)",
|
||||
"baseUrlWithExample": "基础 URL(可选,例如 {example})",
|
||||
"customEndpoint": "自定义端点 URL",
|
||||
"models": "模型",
|
||||
"customModelId": "自定义模型 ID...",
|
||||
@@ -328,13 +305,10 @@
|
||||
"noModelsFound": "未找到模型。",
|
||||
"default": "默认",
|
||||
"serverDefault": "服务器默认",
|
||||
"serverModels": "服务器模型",
|
||||
"userModels": "用户模型",
|
||||
"configureModels": "配置模型...",
|
||||
"onlyVerifiedShown": "仅显示已验证的模型",
|
||||
"showUnvalidatedModels": "显示未验证的模型",
|
||||
"allModelsShown": "显示所有模型(包括未验证的)",
|
||||
"unvalidatedModelWarning": "此模型尚未验证",
|
||||
"serverDefaultModel": "服务器默认模型"
|
||||
"unvalidatedModelWarning": "此模型尚未验证"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
import fs from "fs/promises"
|
||||
import path from "path"
|
||||
import { z } from "zod"
|
||||
import type { ProviderName } from "@/lib/types/model-config"
|
||||
import { PROVIDER_INFO } from "@/lib/types/model-config"
|
||||
|
||||
export const ProviderNameSchema: z.ZodType<ProviderName> = z
|
||||
.string()
|
||||
.refine((val): val is ProviderName => val in PROVIDER_INFO, {
|
||||
message: "Invalid provider name",
|
||||
})
|
||||
|
||||
export const ServerProviderSchema = z.object({
|
||||
name: z.string().min(1),
|
||||
provider: ProviderNameSchema,
|
||||
models: z.array(z.string().min(1)),
|
||||
// Optional: custom environment variable name for API key
|
||||
// e.g., "OPENAI_API_KEY_TEAM_A" instead of default "OPENAI_API_KEY"
|
||||
apiKeyEnv: z.string().min(1).optional(),
|
||||
// Optional: custom environment variable name for base URL
|
||||
baseUrlEnv: z.string().min(1).optional(),
|
||||
// Optional: mark the first model in this provider as the default
|
||||
default: z.boolean().optional(),
|
||||
})
|
||||
|
||||
export const ServerModelsConfigSchema = z.object({
|
||||
providers: z.array(ServerProviderSchema),
|
||||
})
|
||||
|
||||
export type ServerProviderConfig = z.infer<typeof ServerProviderSchema>
|
||||
export type ServerModelsConfig = z.infer<typeof ServerModelsConfigSchema>
|
||||
|
||||
export interface FlattenedServerModel {
|
||||
id: string // "server:<slugified-name>:<modelId>" - name ensures uniqueness for multiple API keys per provider
|
||||
modelId: string
|
||||
provider: ProviderName
|
||||
providerLabel: string
|
||||
isDefault: boolean
|
||||
// Custom env var names for credentials (optional)
|
||||
apiKeyEnv?: string
|
||||
baseUrlEnv?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert provider name to URL-safe slug for use in model ID
|
||||
* e.g., "OpenAI Production" → "openai-production"
|
||||
*/
|
||||
function slugify(name: string): string {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-|-$/g, "")
|
||||
}
|
||||
|
||||
function getConfigPath(): string {
|
||||
const custom = process.env.AI_MODELS_CONFIG_PATH
|
||||
if (custom && custom.trim().length > 0) return custom
|
||||
return path.join(process.cwd(), "ai-models.json")
|
||||
}
|
||||
|
||||
export async function loadRawServerModelsConfig(): Promise<ServerModelsConfig | null> {
|
||||
// Priority 1: AI_MODELS_CONFIG env var (JSON string) - for cloud deployments
|
||||
const envConfig = process.env.AI_MODELS_CONFIG
|
||||
if (envConfig && envConfig.trim().length > 0) {
|
||||
try {
|
||||
const json = JSON.parse(envConfig)
|
||||
return ServerModelsConfigSchema.parse(json)
|
||||
} catch (err) {
|
||||
console.error(
|
||||
"[server-model-config] Failed to parse AI_MODELS_CONFIG:",
|
||||
err,
|
||||
)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Priority 2: ai-models.json file
|
||||
const configPath = getConfigPath()
|
||||
try {
|
||||
const jsonStr = await fs.readFile(configPath, "utf8")
|
||||
const json = JSON.parse(jsonStr)
|
||||
return ServerModelsConfigSchema.parse(json)
|
||||
} catch (err: any) {
|
||||
if (err?.code === "ENOENT") {
|
||||
return null
|
||||
}
|
||||
console.error(
|
||||
"[server-model-config] Failed to load ai-models.json:",
|
||||
err,
|
||||
)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadFlattenedServerModels(): Promise<
|
||||
FlattenedServerModel[]
|
||||
> {
|
||||
const cfg = await loadRawServerModelsConfig()
|
||||
if (!cfg) return []
|
||||
|
||||
const defaultProvider = process.env.AI_PROVIDER as ProviderName | undefined
|
||||
const defaultModelId = process.env.AI_MODEL
|
||||
|
||||
const flattened: FlattenedServerModel[] = []
|
||||
|
||||
for (const p of cfg.providers) {
|
||||
const providerLabel =
|
||||
p.name || PROVIDER_INFO[p.provider]?.label || p.provider
|
||||
|
||||
// Use slugified name for unique ID (supports multiple API keys per provider)
|
||||
const nameSlug = slugify(p.name)
|
||||
|
||||
for (const modelId of p.models) {
|
||||
const id = `server:${nameSlug}:${modelId}`
|
||||
|
||||
// Default model priority:
|
||||
// 1. From ai-models.json: first model of provider with default: true
|
||||
// 2. From env vars: AI_MODEL matches (legacy behavior)
|
||||
const isDefault =
|
||||
(p.default === true && modelId === p.models[0]) ||
|
||||
(!!defaultModelId &&
|
||||
modelId === defaultModelId &&
|
||||
(!defaultProvider || defaultProvider === p.provider))
|
||||
|
||||
flattened.push({
|
||||
id,
|
||||
modelId,
|
||||
provider: p.provider,
|
||||
providerLabel,
|
||||
isDefault,
|
||||
apiKeyEnv: p.apiKeyEnv,
|
||||
baseUrlEnv: p.baseUrlEnv,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return flattened
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a server model by its ID (format: "server:<slugified-name>:<modelId>")
|
||||
* Returns the model config including apiKeyEnv/baseUrlEnv if configured
|
||||
*/
|
||||
export async function findServerModelById(
|
||||
modelId: string,
|
||||
): Promise<FlattenedServerModel | null> {
|
||||
if (!modelId.startsWith("server:")) return null
|
||||
|
||||
const models = await loadFlattenedServerModels()
|
||||
return models.find((m) => m.id === modelId) || null
|
||||
}
|
||||
@@ -47,33 +47,6 @@ interface ChatSessionDB extends DBSchema {
|
||||
|
||||
// Database singleton
|
||||
let dbPromise: Promise<IDBPDatabase<ChatSessionDB>> | null = null
|
||||
const resetDBPromise = () => {
|
||||
dbPromise = null
|
||||
}
|
||||
|
||||
const isClosingError = (error: unknown): boolean => {
|
||||
return (
|
||||
error instanceof DOMException &&
|
||||
error.name === "InvalidStateError" &&
|
||||
/closing/i.test(error.message)
|
||||
)
|
||||
}
|
||||
|
||||
const withDB = async <T>(
|
||||
action: (db: IDBPDatabase<ChatSessionDB>) => Promise<T>,
|
||||
): Promise<T> => {
|
||||
try {
|
||||
const db = await getDB()
|
||||
return await action(db)
|
||||
} catch (error) {
|
||||
if (isClosingError(error)) {
|
||||
resetDBPromise()
|
||||
const db = await getDB()
|
||||
return await action(db)
|
||||
}
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async function getDB(): Promise<IDBPDatabase<ChatSessionDB>> {
|
||||
if (!dbPromise) {
|
||||
@@ -87,23 +60,7 @@ async function getDB(): Promise<IDBPDatabase<ChatSessionDB>> {
|
||||
}
|
||||
// Future migrations: if (oldVersion < 2) { ... }
|
||||
},
|
||||
terminated() {
|
||||
resetDBPromise()
|
||||
},
|
||||
})
|
||||
dbPromise
|
||||
.then((db) => {
|
||||
db.onversionchange = () => {
|
||||
db.close()
|
||||
resetDBPromise()
|
||||
}
|
||||
db.onclose = () => {
|
||||
resetDBPromise()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
resetDBPromise()
|
||||
})
|
||||
}
|
||||
return dbPromise
|
||||
}
|
||||
@@ -118,46 +75,31 @@ export function isIndexedDBAvailable(): boolean {
|
||||
}
|
||||
}
|
||||
|
||||
// Check if IndexedDB is actually usable (not just present).
|
||||
// Note: Do NOT close the db here - getDB() returns a shared singleton connection
|
||||
// that other code depends on.
|
||||
export async function isIndexedDBUsable(): Promise<boolean> {
|
||||
if (!isIndexedDBAvailable()) return false
|
||||
try {
|
||||
await getDB()
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// CRUD Operations
|
||||
export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
|
||||
if (!isIndexedDBAvailable()) return []
|
||||
try {
|
||||
return await withDB(async (db) => {
|
||||
const tx = db.transaction(STORE_NAME, "readonly")
|
||||
const index = tx.store.index("by-updated")
|
||||
const metadata: SessionMetadata[] = []
|
||||
const db = await getDB()
|
||||
const tx = db.transaction(STORE_NAME, "readonly")
|
||||
const index = tx.store.index("by-updated")
|
||||
const metadata: SessionMetadata[] = []
|
||||
|
||||
// Use cursor to read only metadata fields (avoids loading full messages/XML)
|
||||
let cursor = await index.openCursor(null, "prev") // newest first
|
||||
while (cursor) {
|
||||
const s = cursor.value
|
||||
metadata.push({
|
||||
id: s.id,
|
||||
title: s.title,
|
||||
createdAt: s.createdAt,
|
||||
updatedAt: s.updatedAt,
|
||||
messageCount: s.messages.length,
|
||||
hasDiagram:
|
||||
!!s.diagramXml && s.diagramXml.trim().length > 0,
|
||||
thumbnailDataUrl: s.thumbnailDataUrl,
|
||||
})
|
||||
cursor = await cursor.continue()
|
||||
}
|
||||
return metadata
|
||||
})
|
||||
// Use cursor to read only metadata fields (avoids loading full messages/XML)
|
||||
let cursor = await index.openCursor(null, "prev") // newest first
|
||||
while (cursor) {
|
||||
const s = cursor.value
|
||||
metadata.push({
|
||||
id: s.id,
|
||||
title: s.title,
|
||||
createdAt: s.createdAt,
|
||||
updatedAt: s.updatedAt,
|
||||
messageCount: s.messages.length,
|
||||
hasDiagram: !!s.diagramXml && s.diagramXml.trim().length > 0,
|
||||
thumbnailDataUrl: s.thumbnailDataUrl,
|
||||
})
|
||||
cursor = await cursor.continue()
|
||||
}
|
||||
return metadata
|
||||
} catch (error) {
|
||||
console.error("Failed to get session metadata:", error)
|
||||
return []
|
||||
@@ -167,9 +109,8 @@ export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
|
||||
export async function getSession(id: string): Promise<ChatSession | null> {
|
||||
if (!isIndexedDBAvailable()) return null
|
||||
try {
|
||||
return await withDB(async (db) => {
|
||||
return (await db.get(STORE_NAME, id)) || null
|
||||
})
|
||||
const db = await getDB()
|
||||
return (await db.get(STORE_NAME, id)) || null
|
||||
} catch (error) {
|
||||
console.error("Failed to get session:", error)
|
||||
return null
|
||||
@@ -179,9 +120,8 @@ export async function getSession(id: string): Promise<ChatSession | null> {
|
||||
export async function saveSession(session: ChatSession): Promise<boolean> {
|
||||
if (!isIndexedDBAvailable()) return false
|
||||
try {
|
||||
await withDB(async (db) => {
|
||||
await db.put(STORE_NAME, session)
|
||||
})
|
||||
const db = await getDB()
|
||||
await db.put(STORE_NAME, session)
|
||||
return true
|
||||
} catch (error) {
|
||||
// Handle quota exceeded
|
||||
@@ -193,9 +133,8 @@ export async function saveSession(session: ChatSession): Promise<boolean> {
|
||||
await deleteOldestSession()
|
||||
// Retry once
|
||||
try {
|
||||
await withDB(async (db) => {
|
||||
await db.put(STORE_NAME, session)
|
||||
})
|
||||
const db = await getDB()
|
||||
await db.put(STORE_NAME, session)
|
||||
return true
|
||||
} catch (retryError) {
|
||||
console.error(
|
||||
@@ -214,9 +153,8 @@ export async function saveSession(session: ChatSession): Promise<boolean> {
|
||||
export async function deleteSession(id: string): Promise<void> {
|
||||
if (!isIndexedDBAvailable()) return
|
||||
try {
|
||||
await withDB(async (db) => {
|
||||
await db.delete(STORE_NAME, id)
|
||||
})
|
||||
const db = await getDB()
|
||||
await db.delete(STORE_NAME, id)
|
||||
} catch (error) {
|
||||
console.error("Failed to delete session:", error)
|
||||
}
|
||||
@@ -225,9 +163,8 @@ export async function deleteSession(id: string): Promise<void> {
|
||||
export async function getSessionCount(): Promise<number> {
|
||||
if (!isIndexedDBAvailable()) return 0
|
||||
try {
|
||||
return await withDB(async (db) => {
|
||||
return await db.count(STORE_NAME)
|
||||
})
|
||||
const db = await getDB()
|
||||
return await db.count(STORE_NAME)
|
||||
} catch (error) {
|
||||
console.error("Failed to get session count:", error)
|
||||
return 0
|
||||
@@ -237,15 +174,14 @@ export async function getSessionCount(): Promise<number> {
|
||||
export async function deleteOldestSession(): Promise<void> {
|
||||
if (!isIndexedDBAvailable()) return
|
||||
try {
|
||||
await withDB(async (db) => {
|
||||
const tx = db.transaction(STORE_NAME, "readwrite")
|
||||
const index = tx.store.index("by-updated")
|
||||
const cursor = await index.openCursor()
|
||||
if (cursor) {
|
||||
await cursor.delete()
|
||||
}
|
||||
await tx.done
|
||||
})
|
||||
const db = await getDB()
|
||||
const tx = db.transaction(STORE_NAME, "readwrite")
|
||||
const index = tx.store.index("by-updated")
|
||||
const cursor = await index.openCursor()
|
||||
if (cursor) {
|
||||
await cursor.delete()
|
||||
}
|
||||
await tx.done
|
||||
} catch (error) {
|
||||
console.error("Failed to delete oldest session:", error)
|
||||
}
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* SSRF (Server-Side Request Forgery) protection utilities
|
||||
*/
|
||||
|
||||
/**
|
||||
* Check if URL points to private/internal network
|
||||
* Blocks: localhost, private IPs, link-local, AWS metadata service
|
||||
*/
|
||||
export 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)
|
||||
if (a === 10) return true // 10.0.0.0/8
|
||||
if (a === 172 && b >= 16 && b <= 31) return true // 172.16.0.0/12
|
||||
if (a === 192 && b === 168) return true // 192.168.0.0/16
|
||||
if (a === 169 && b === 254) return true // 169.254.0.0/16 (link-local)
|
||||
if (a === 127) return true // 127.0.0.0/8 (loopback)
|
||||
}
|
||||
|
||||
// Block common internal hostnames
|
||||
if (
|
||||
hostname.endsWith(".local") ||
|
||||
hostname.endsWith(".internal") ||
|
||||
hostname.endsWith(".localhost")
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
} catch {
|
||||
return true // Invalid URL - block it
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether private URLs are allowed (defaults to true)
|
||||
* Set ALLOW_PRIVATE_URLS=false to block private URLs
|
||||
*/
|
||||
export const allowPrivateUrls = process.env.ALLOW_PRIVATE_URLS !== "false"
|
||||
@@ -24,7 +24,4 @@ export const STORAGE_KEYS = {
|
||||
|
||||
// Chat input preferences
|
||||
sendShortcut: "next-ai-draw-io-send-shortcut",
|
||||
|
||||
// Diagram validation
|
||||
vlmValidationEnabled: "next-ai-draw-io-vlm-validation-enabled",
|
||||
} as const
|
||||
|
||||
@@ -11,7 +11,6 @@ export const DEFAULT_SYSTEM_PROMPT = `
|
||||
You are an expert diagram creation assistant specializing in draw.io XML generation.
|
||||
Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
|
||||
You can see images that users upload, and you can read the text content extracted from PDF documents they upload.
|
||||
ALWAYS respond in the same language as the user's last message.
|
||||
|
||||
When you are asked to create a diagram, briefly describe your plan about the layout and structure to avoid object overlapping or edge cross the objects. (2-3 sentences max), then use display_diagram tool to generate the XML.
|
||||
After generating or editing a diagram, you don't need to say anything. The user can see the diagram - no need to describe it.
|
||||
|
||||
@@ -4,7 +4,6 @@ export type ProviderName =
|
||||
| "openai"
|
||||
| "anthropic"
|
||||
| "google"
|
||||
| "vertexai"
|
||||
| "azure"
|
||||
| "bedrock"
|
||||
| "ollama"
|
||||
@@ -37,9 +36,6 @@ export interface ProviderConfig {
|
||||
awsSecretAccessKey?: string
|
||||
awsRegion?: string
|
||||
awsSessionToken?: string // Optional, for temporary credentials
|
||||
// Vertex AI specific fields
|
||||
vertexApiKey?: string // Express Mode API key
|
||||
|
||||
models: ModelConfig[]
|
||||
validated?: boolean // Has API key been validated
|
||||
}
|
||||
@@ -54,7 +50,7 @@ export interface MultiModelConfig {
|
||||
|
||||
// Flattened model for dropdown display
|
||||
export interface FlattenedModel {
|
||||
id: string // Model config UUID or synthetic server ID (e.g., "server:provider:modelId")
|
||||
id: string // Model config UUID
|
||||
modelId: string // Actual model ID
|
||||
provider: ProviderName
|
||||
providerLabel: string // Provider display name
|
||||
@@ -65,17 +61,7 @@ export interface FlattenedModel {
|
||||
awsSecretAccessKey?: string
|
||||
awsRegion?: string
|
||||
awsSessionToken?: string
|
||||
// Vertex AI specific fields
|
||||
vertexApiKey?: string // Express Mode API key
|
||||
|
||||
validated?: boolean // Has this model been validated
|
||||
// Source of this model config: user-defined (client) or server-defined
|
||||
source?: "user" | "server"
|
||||
// Whether this model is the server default (matches AI_MODEL env var)
|
||||
isDefault?: boolean
|
||||
// Custom env var names for server models (allows multiple API keys per provider)
|
||||
apiKeyEnv?: string
|
||||
baseUrlEnv?: string
|
||||
}
|
||||
|
||||
// Provider metadata
|
||||
@@ -83,36 +69,20 @@ export const PROVIDER_INFO: Record<
|
||||
ProviderName,
|
||||
{ label: string; defaultBaseUrl?: string }
|
||||
> = {
|
||||
openai: {
|
||||
label: "OpenAI",
|
||||
defaultBaseUrl: "https://api.openai.com/v1",
|
||||
},
|
||||
openai: { label: "OpenAI" },
|
||||
anthropic: {
|
||||
label: "Anthropic",
|
||||
defaultBaseUrl: "https://api.anthropic.com/v1",
|
||||
},
|
||||
google: {
|
||||
label: "Google",
|
||||
defaultBaseUrl: "https://generativelanguage.googleapis.com/v1beta",
|
||||
},
|
||||
vertexai: { label: "Google Vertex AI" },
|
||||
azure: {
|
||||
label: "Azure OpenAI",
|
||||
defaultBaseUrl: "https://your-resource.openai.azure.com/openai",
|
||||
},
|
||||
google: { label: "Google" },
|
||||
azure: { label: "Azure OpenAI" },
|
||||
bedrock: { label: "Amazon Bedrock" },
|
||||
ollama: {
|
||||
label: "Ollama",
|
||||
defaultBaseUrl: "http://localhost:11434",
|
||||
},
|
||||
openrouter: {
|
||||
label: "OpenRouter",
|
||||
defaultBaseUrl: "https://openrouter.ai/api/v1",
|
||||
},
|
||||
deepseek: {
|
||||
label: "DeepSeek",
|
||||
defaultBaseUrl: "https://api.deepseek.com/v1",
|
||||
},
|
||||
openrouter: { label: "OpenRouter" },
|
||||
deepseek: { label: "DeepSeek" },
|
||||
siliconflow: {
|
||||
label: "SiliconFlow",
|
||||
defaultBaseUrl: "https://api.siliconflow.cn/v1",
|
||||
@@ -121,10 +91,7 @@ export const PROVIDER_INFO: Record<
|
||||
label: "SGLang",
|
||||
defaultBaseUrl: "http://127.0.0.1:8000/v1",
|
||||
},
|
||||
gateway: {
|
||||
label: "AI Gateway",
|
||||
defaultBaseUrl: "https://ai-gateway.vercel.sh/v1/ai",
|
||||
},
|
||||
gateway: { label: "AI Gateway" },
|
||||
edgeone: { label: "EdgeOne Pages" },
|
||||
doubao: {
|
||||
label: "Doubao (ByteDance)",
|
||||
@@ -190,17 +157,6 @@ export const SUGGESTED_MODELS: Partial<Record<ProviderName, string[]>> = {
|
||||
// Legacy
|
||||
"gemini-pro",
|
||||
],
|
||||
vertexai: [
|
||||
// Gemini 2.5 series
|
||||
"gemini-2.5-pro",
|
||||
"gemini-2.5-flash",
|
||||
// Gemini 2.0 series
|
||||
"gemini-2.0-flash",
|
||||
"gemini-2.0-flash-exp",
|
||||
// Gemini 1.5 series
|
||||
"gemini-1.5-pro",
|
||||
"gemini-1.5-flash",
|
||||
],
|
||||
azure: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-4", "gpt-35-turbo"],
|
||||
bedrock: [
|
||||
// Anthropic Claude
|
||||
@@ -332,7 +288,7 @@ export function createModelConfig(modelId: string): ModelConfig {
|
||||
}
|
||||
}
|
||||
|
||||
// Get all models as flattened list for dropdown (user-defined only)
|
||||
// Get all models as flattened list for dropdown
|
||||
export function flattenModels(config: MultiModelConfig): FlattenedModel[] {
|
||||
const models: FlattenedModel[] = []
|
||||
|
||||
@@ -354,12 +310,7 @@ export function flattenModels(config: MultiModelConfig): FlattenedModel[] {
|
||||
awsSecretAccessKey: provider.awsSecretAccessKey,
|
||||
awsRegion: provider.awsRegion,
|
||||
awsSessionToken: provider.awsSessionToken,
|
||||
// Vertex AI fields
|
||||
vertexApiKey: provider.vertexApiKey,
|
||||
|
||||
validated: model.validated,
|
||||
source: "user",
|
||||
isDefault: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* VLM system prompt for diagram validation.
|
||||
* Note: Response parsing is now handled via AI SDK's structured outputs (generateObject with schema).
|
||||
*/
|
||||
|
||||
export const VALIDATION_SYSTEM_PROMPT = `You are a diagram quality validator. Analyze the rendered diagram image for visual issues.
|
||||
|
||||
Evaluate the diagram for the following issues:
|
||||
|
||||
1. **Overlapping elements** (critical): Shapes covering each other inappropriately, making content unreadable
|
||||
2. **Edge routing issues** (critical): Lines/arrows crossing through shapes that are not their source or target
|
||||
3. **Text readability** (warning): Labels cut off, overlapping, or too small to read
|
||||
4. **Layout quality** (warning): Poor spacing, misalignment, or cramped elements
|
||||
5. **Rendering errors** (critical): Incomplete, corrupted, or missing visual elements
|
||||
|
||||
Rules:
|
||||
- Set "valid" to true ONLY if there are no critical issues
|
||||
- Be specific about which elements have problems (e.g., "The 'Login' box overlaps with 'Register' box")
|
||||
- Provide actionable suggestions (e.g., "Move the Login box 50 pixels to the left")
|
||||
- Minor cosmetic issues (slight misalignment, non-uniform spacing) should be warnings, not critical
|
||||
- Empty diagrams or diagrams with only 1-2 elements should pass unless they have obvious errors
|
||||
- If the diagram looks generally acceptable, set valid to true even with minor warnings`
|
||||
@@ -1,38 +0,0 @@
|
||||
/**
|
||||
* Shared validation schema for VLM-based diagram validation.
|
||||
* This file can be safely imported on both client and server.
|
||||
*/
|
||||
|
||||
import { z } from "zod"
|
||||
|
||||
// Schema for structured validation output
|
||||
export const ValidationResultSchema = z.object({
|
||||
valid: z.boolean().describe("True if there are no critical issues"),
|
||||
issues: z
|
||||
.array(
|
||||
z.object({
|
||||
type: z
|
||||
.enum([
|
||||
"overlap",
|
||||
"edge_routing",
|
||||
"text",
|
||||
"layout",
|
||||
"rendering",
|
||||
])
|
||||
.describe("Type of visual issue"),
|
||||
severity: z
|
||||
.enum(["critical", "warning"])
|
||||
.describe("Severity level"),
|
||||
description: z
|
||||
.string()
|
||||
.describe("Clear description of the issue"),
|
||||
}),
|
||||
)
|
||||
.describe("List of visual issues found"),
|
||||
suggestions: z
|
||||
.array(z.string())
|
||||
.describe("Actionable suggestions to fix issues"),
|
||||
})
|
||||
|
||||
export type ValidationResult = z.infer<typeof ValidationResultSchema>
|
||||
export type ValidationIssue = ValidationResult["issues"][number]
|
||||
979
package-lock.json
generated
979
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "next-ai-draw-io",
|
||||
"version": "0.4.12",
|
||||
"version": "0.4.10",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"main": "dist-electron/main/index.js",
|
||||
@@ -37,7 +37,6 @@
|
||||
"@ai-sdk/deepseek": "^2.0.0",
|
||||
"@ai-sdk/gateway": "^3.0.0",
|
||||
"@ai-sdk/google": "^3.0.0",
|
||||
"@ai-sdk/google-vertex": "^4.0.16",
|
||||
"@ai-sdk/openai": "^3.0.0",
|
||||
"@ai-sdk/react": "^3.0.1",
|
||||
"@aws-sdk/client-dynamodb": "^3.957.0",
|
||||
@@ -50,7 +49,6 @@
|
||||
"@next/third-parties": "^16.0.6",
|
||||
"@opennextjs/cloudflare": "1.14.8",
|
||||
"@openrouter/ai-sdk-provider": "^1.5.4",
|
||||
"@opentelemetry/api": "^1.9.0",
|
||||
"@opentelemetry/exporter-trace-otlp-http": "^0.209.0",
|
||||
"@opentelemetry/sdk-trace-node": "^2.2.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
@@ -139,7 +137,7 @@
|
||||
"vite-tsconfig-paths": "^6.0.3",
|
||||
"vitest": "^4.0.16",
|
||||
"wait-on": "^9.0.3",
|
||||
"wrangler": "^4.60.0"
|
||||
"wrangler": "4.58.0"
|
||||
},
|
||||
"overrides": {
|
||||
"@openrouter/ai-sdk-provider": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@next-ai-drawio/mcp-server",
|
||||
"version": "0.1.15",
|
||||
"version": "0.1.12",
|
||||
"description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@@ -44,17 +44,6 @@ function isLikelyMcpSessionId(sessionId: string): boolean {
|
||||
return sessionId.startsWith("mcp-") && sessionId.length <= 128
|
||||
}
|
||||
|
||||
// Find the most recent active session (for auto-redirect when no sessionId provided)
|
||||
function getMostRecentSessionId(): string | null {
|
||||
let mostRecent: { id: string; lastUpdated: Date } | null = null
|
||||
for (const [sessionId, state] of stateStore) {
|
||||
if (!mostRecent || state.lastUpdated > mostRecent.lastUpdated) {
|
||||
mostRecent = { id: sessionId, lastUpdated: state.lastUpdated }
|
||||
}
|
||||
}
|
||||
return mostRecent?.id || null
|
||||
}
|
||||
|
||||
function ensureSessionStateInitialized(sessionId: string): void {
|
||||
if (!sessionId) return
|
||||
if (!isLikelyMcpSessionId(sessionId)) return
|
||||
@@ -206,17 +195,6 @@ function handleRequest(
|
||||
|
||||
if (url.pathname === "/" || url.pathname === "/index.html") {
|
||||
const sessionId = url.searchParams.get("mcp") || ""
|
||||
|
||||
// Auto-redirect to most recent session if no sessionId provided
|
||||
if (!sessionId) {
|
||||
const recentSessionId = getMostRecentSessionId()
|
||||
if (recentSessionId) {
|
||||
res.writeHead(302, { Location: `/?mcp=${recentSessionId}` })
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
ensureSessionStateInitialized(sessionId)
|
||||
|
||||
res.writeHead(200, { "Content-Type": "text/html" })
|
||||
@@ -397,202 +375,85 @@ function getHtmlPage(sessionId: string): string {
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Next AI Draw.io</title>
|
||||
<title>Draw.io MCP</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { width: 100%; height: 100%; overflow: hidden; }
|
||||
#container { width: 100%; height: 100%; display: flex; flex-direction: column; }
|
||||
#header {
|
||||
padding: 0 20px; height: 52px;
|
||||
background: linear-gradient(to bottom, #ffffff, #fafbfc);
|
||||
border-bottom: 1px solid #e8ecf0;
|
||||
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
|
||||
padding: 8px 16px; background: #1a1a2e; color: #eee;
|
||||
font-family: system-ui, sans-serif; font-size: 14px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
position: relative; z-index: 10;
|
||||
}
|
||||
#header .brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
#header .logo {
|
||||
width: 28px; height: 28px; border-radius: 6px;
|
||||
background: #18181b;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
#header .logo img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
|
||||
#header .title {
|
||||
font-size: 15px; font-weight: 600; color: #1a1a2e;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
#header .session {
|
||||
font-size: 11px; color: #8b95a5; font-weight: 400;
|
||||
background: #f1f3f9; padding: 3px 8px; border-radius: 4px;
|
||||
margin-left: 12px; font-family: 'SF Mono', Monaco, monospace;
|
||||
}
|
||||
#header .right { display: flex; align-items: center; gap: 12px; }
|
||||
#save-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px; border-radius: 8px; font-size: 13px;
|
||||
background: linear-gradient(to bottom, #18181b, #27272a);
|
||||
color: white; border: none; cursor: pointer;
|
||||
font-weight: 500; font-family: inherit;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
#save-btn svg { width: 14px; height: 14px; }
|
||||
#save-btn:hover {
|
||||
background: linear-gradient(to bottom, #27272a, #3f3f46);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
#save-btn:active { transform: translateY(0); }
|
||||
#save-btn:disabled, #history-btn:disabled {
|
||||
background: #e5e7eb; color: #9ca3af;
|
||||
cursor: not-allowed; transform: none; box-shadow: none;
|
||||
}
|
||||
#history-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px; border-radius: 8px; font-size: 13px;
|
||||
background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7;
|
||||
cursor: pointer; font-weight: 500; font-family: inherit;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
#history-btn svg { width: 14px; height: 14px; }
|
||||
#history-btn:hover {
|
||||
background: #e4e4e7; border-color: #d4d4d8;
|
||||
}
|
||||
#header .session { color: #888; font-size: 12px; }
|
||||
#header .status { font-size: 12px; }
|
||||
#header .status.connected { color: #4ade80; }
|
||||
#header .status.disconnected { color: #f87171; }
|
||||
#drawio { flex: 1; border: none; }
|
||||
#history-modal, #save-modal {
|
||||
display: none; position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
|
||||
z-index: 2000; align-items: center; justify-content: center;
|
||||
}
|
||||
#history-modal.open, #save-modal.open { display: flex; }
|
||||
.modal-content {
|
||||
background: white; border-radius: 16px;
|
||||
width: 90%; max-width: 480px; max-height: 70vh;
|
||||
display: flex; flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
|
||||
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
|
||||
animation: modalIn 0.2s ease-out;
|
||||
}
|
||||
@keyframes modalIn {
|
||||
from { opacity: 0; transform: scale(0.95) translateY(-10px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.modal-header {
|
||||
padding: 20px 24px 16px; border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
.modal-header h2 {
|
||||
font-size: 17px; font-weight: 600; margin: 0; color: #18181b;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
|
||||
.modal-footer {
|
||||
padding: 16px 24px; border-top: 1px solid #f1f3f5;
|
||||
display: flex; gap: 10px; justify-content: flex-end;
|
||||
}
|
||||
.history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||||
.history-item {
|
||||
border: 2px solid #e4e4e7; border-radius: 10px; padding: 10px;
|
||||
cursor: pointer; text-align: center; transition: all 0.15s ease;
|
||||
background: #fafafa;
|
||||
}
|
||||
.history-item:hover { border-color: #a1a1aa; background: white; }
|
||||
.history-item.selected {
|
||||
border-color: #18181b; background: white;
|
||||
box-shadow: 0 0 0 3px rgba(24,24,27,0.1);
|
||||
}
|
||||
.history-item .thumb {
|
||||
aspect-ratio: 4/3; background: #f4f4f5; border-radius: 6px;
|
||||
#history-btn {
|
||||
position: fixed; bottom: 24px; right: 24px;
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
background: #3b82f6; color: white; border: none; cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 6px; overflow: hidden;
|
||||
z-index: 1000;
|
||||
}
|
||||
#history-btn:hover { background: #2563eb; }
|
||||
#history-btn:disabled { background: #6b7280; cursor: not-allowed; }
|
||||
#history-btn svg { width: 24px; height: 24px; }
|
||||
#history-modal {
|
||||
display: none; position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.5); z-index: 2000;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
#history-modal.open { display: flex; }
|
||||
.modal-content {
|
||||
background: white; border-radius: 12px;
|
||||
width: 90%; max-width: 500px; max-height: 70vh;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.modal-header { padding: 16px; border-bottom: 1px solid #e5e7eb; }
|
||||
.modal-header h2 { font-size: 18px; margin: 0; }
|
||||
.modal-body { flex: 1; overflow-y: auto; padding: 16px; }
|
||||
.modal-footer { padding: 12px 16px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; justify-content: flex-end; }
|
||||
.history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.history-item {
|
||||
border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px;
|
||||
cursor: pointer; text-align: center;
|
||||
}
|
||||
.history-item:hover { border-color: #3b82f6; }
|
||||
.history-item.selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.3); }
|
||||
.history-item .thumb {
|
||||
aspect-ratio: 4/3; background: #f3f4f6; border-radius: 4px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 4px; overflow: hidden;
|
||||
}
|
||||
.history-item .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.history-item .label { font-size: 11px; color: #71717a; font-weight: 500; }
|
||||
.btn {
|
||||
padding: 9px 18px; border-radius: 8px; font-size: 13px;
|
||||
cursor: pointer; border: none; font-weight: 500;
|
||||
font-family: inherit; transition: all 0.15s ease;
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(to bottom, #18181b, #27272a);
|
||||
color: white;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(to bottom, #27272a, #3f3f46);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
background: #e4e4e7; color: #a1a1aa;
|
||||
cursor: not-allowed; transform: none; box-shadow: none;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7;
|
||||
}
|
||||
.btn-secondary:hover { background: #e4e4e7; }
|
||||
.empty { text-align: center; padding: 40px; color: #71717a; font-size: 14px; }
|
||||
.form-group { margin-bottom: 18px; }
|
||||
.form-group label {
|
||||
display: block; font-size: 13px; font-weight: 500;
|
||||
margin-bottom: 8px; color: #3f3f46;
|
||||
}
|
||||
.form-group select, .form-group input {
|
||||
width: 100%; padding: 10px 14px; border: 1px solid #e4e4e7;
|
||||
border-radius: 8px; font-size: 14px; outline: none;
|
||||
font-family: inherit; background: white;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.form-group select:focus, .form-group input:focus {
|
||||
border-color: #18181b;
|
||||
box-shadow: 0 0 0 3px rgba(24,24,27,0.08);
|
||||
}
|
||||
.filename-group { display: flex; }
|
||||
.filename-group input { border-radius: 8px 0 0 8px; border-right: none; }
|
||||
.filename-group .ext {
|
||||
padding: 10px 14px; background: #f4f4f5; border: 1px solid #e4e4e7;
|
||||
border-radius: 0 8px 8px 0; font-size: 13px; color: #71717a;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
}
|
||||
.history-item .label { font-size: 12px; color: #666; }
|
||||
.btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; }
|
||||
.btn-primary { background: #3b82f6; color: white; }
|
||||
.btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
|
||||
.btn-secondary { background: #f3f4f6; color: #374151; }
|
||||
.empty { text-align: center; padding: 40px; color: #666; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
<div class="brand">
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 1536 1536" fill="#ffffff">
|
||||
<g transform="translate(0,1536) scale(0.1,-0.1)">
|
||||
<path d="M2765 14404 c-100 -29 -181 -58 -225 -82 -227 -125 -359 -296 -431 -560 -19 -70 -19 -108 -19 -1175 0 -1068 1 -1104 20 -1172 58 -206 159 -356 319 -474 71 -53 199 -121 226 -121 9 0 26 -5 38 -12 12 -6 62 -19 112 -29 85 -17 207 -18 2219 -19 1172 0 2133 -3 2138 -8 4 -4 7 -246 6 -538 l-3 -529 -2330 -5 c-2506 -6 -2373 -3 -2470 -54 -61 -31 -150 -113 -194 -178 -87 -128 -82 -77 -90 -1025 l-6 -838 -360 -6 c-292 -4 -368 -8 -405 -21 -194 -68 -303 -177 -373 -372 l-22 -61 1 -2887 c1 -2716 2 -2890 18 -2935 56 -153 161 -276 286 -334 126 -59 0 -54 1400 -54 1394 0 1290 -4 1410 53 95 45 198 148 242 241 62 133 58 -93 58 3026 0 2992 1 2883 -40 2990 -59 156 -183 272 -360 337 -25 9 -146 14 -440 18 l-405 5 0 540 0 540 2020 3 c1111 1 2030 0 2043 -3 l22 -5 -2 -538 -3 -537 -380 -6 c-312 -4 -388 -8 -426 -21 -195 -68 -326 -204 -383 -399 -15 -51 -16 -295 -16 -2921 0 -2778 1 -2867 19 -2920 36 -104 72 -167 134 -230 75 -78 115 -105 222 -151 l50 -22 1219 -3 c672 -1 1255 1 1300 6 109 12 217 63 298 140 73 69 107 118 144 208 l29 69 3 2880 c2 2687 1 2884 -15 2945 -48 183 -188 332 -373 398 -37 13 -114 17 -430 21 l-385 6 -3 534 c-2 421 0 536 10 543 7 4 925 8 2039 8 1718 0 2028 -2 2038 -14 8 -10 11 -154 11 -531 -1 -284 -4 -523 -7 -531 -4 -12 -69 -14 -392 -14 -354 0 -391 -2 -448 -20 -168 -52 -282 -148 -353 -295 -22 -45 -40 -91 -40 -103 0 -11 -5 -33 -10 -47 -7 -18 -10 -988 -10 -2875 0 -2393 2 -2858 14 -2902 43 -167 148 -298 293 -369 57 -27 107 -44 151 -50 88 -11 2429 -11 2508 0 210 31 416 238 445 450 6 39 8 1245 7 2926 -3 2713 -4 2862 -21 2900 -41 93 -74 150 -110 191 -46 52 -149 134 -169 134 -8 0 -19 5 -24 10 -6 6 -42 19 -80 30 -63 18 -100 20 -415 20 -307 0 -348 2 -353 16 -3 9 -6 390 -6 848 0 797 -1 834 -19 886 -31 87 -50 118 -111 183 -66 70 -141 119 -221 144 -50 16 -228 18 -2389 23 l-2335 5 0 535 0 535 2165 5 c1191 3 2170 8 2176 12 6 4 35 12 65 17 201 35 435 198 539 376 55 93 82 153 110 245 19 63 20 94 20 1167 0 1047 -1 1106 -19 1180 -70 290 -275 523 -539 613 -160 54 232 50 -5028 49 -4182 0 -4856 -2 -4899 -15z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="title">Next AI Draw.io</span>
|
||||
${sessionId ? `<span class="session">${sessionId.slice(-8)}</span>` : ""}
|
||||
</div>
|
||||
<div class="right">
|
||||
<button id="history-btn" title="History" ${sessionId ? "" : "disabled"}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
History
|
||||
</button>
|
||||
<button id="save-btn" ${sessionId ? "" : "disabled"}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
Download
|
||||
</button>
|
||||
<div>
|
||||
<strong>Draw.io MCP</strong>
|
||||
<span class="session">${sessionId ? `Session: ${sessionId}` : "No session"}</span>
|
||||
</div>
|
||||
<div id="status" class="status disconnected">Connecting...</div>
|
||||
</div>
|
||||
<iframe id="drawio" src="${normalizeUrl(DRAWIO_BASE_URL)}/?embed=1&proto=json&spin=1&libraries=1&noSaveBtn=1&noExitBtn=1&saveAndExit=0"></iframe>
|
||||
<iframe id="drawio" src="${normalizeUrl(DRAWIO_BASE_URL)}/?embed=1&proto=json&spin=1&libraries=1"></iframe>
|
||||
</div>
|
||||
<button id="history-btn" title="History" ${sessionId ? "" : "disabled"}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="history-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header"><h2>History</h2></div>
|
||||
@@ -606,35 +467,10 @@ function getHtmlPage(sessionId: string): string {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="save-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header"><h2>Download Diagram</h2></div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Format</label>
|
||||
<select id="save-format">
|
||||
<option value="drawio">Draw.io (.drawio)</option>
|
||||
<option value="png">PNG Image (.png)</option>
|
||||
<option value="svg">SVG Vector (.svg)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Filename</label>
|
||||
<div class="filename-group">
|
||||
<input type="text" id="save-filename" value="diagram" placeholder="Enter filename">
|
||||
<span class="ext" id="save-ext">.drawio</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" id="save-cancel-btn">Cancel</button>
|
||||
<button class="btn btn-primary" id="save-confirm-btn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const sessionId = "${sessionId}";
|
||||
const iframe = document.getElementById('drawio');
|
||||
const statusEl = document.getElementById('status');
|
||||
let currentVersion = 0, isReady = false, pendingXml = null, lastXml = null;
|
||||
let pendingSvgExport = null;
|
||||
let pendingAiSvg = false;
|
||||
@@ -645,6 +481,8 @@ function getHtmlPage(sessionId: string): string {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.event === 'init') {
|
||||
isReady = true;
|
||||
statusEl.textContent = 'Ready';
|
||||
statusEl.className = 'status connected';
|
||||
if (pendingXml) { loadDiagram(pendingXml); pendingXml = null; }
|
||||
} else if ((msg.event === 'save' || msg.event === 'autosave') && msg.xml && msg.xml !== lastXml) {
|
||||
// Request SVG export, then push state with SVG
|
||||
@@ -653,23 +491,6 @@ function getHtmlPage(sessionId: string): string {
|
||||
// Fallback if export doesn't respond
|
||||
setTimeout(() => { if (pendingSvgExport === msg.xml) { pushState(msg.xml, ''); pendingSvgExport = null; } }, 2000);
|
||||
} else if (msg.event === 'export' && msg.data) {
|
||||
// Handle file download export (PNG/SVG only, drawio uses lastXml directly)
|
||||
if (pendingDownload && (pendingDownload.format === 'png' || pendingDownload.format === 'svg')) {
|
||||
const dl = pendingDownload;
|
||||
pendingDownload = null;
|
||||
let dataUrl = msg.data;
|
||||
if (!dataUrl.startsWith('data:')) {
|
||||
const mime = dl.format === 'png' ? 'image/png' : 'image/svg+xml';
|
||||
dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(msg.data)));
|
||||
}
|
||||
const a = document.createElement('a');
|
||||
a.href = dataUrl; a.download = dl.filename;
|
||||
document.body.appendChild(a); a.click(); document.body.removeChild(a);
|
||||
saveModal.classList.remove('open');
|
||||
saveConfirmBtn.disabled = false;
|
||||
saveConfirmBtn.textContent = 'Save';
|
||||
return;
|
||||
}
|
||||
// Handle sync export (XML format) - server requested fresh state
|
||||
if (pendingSyncExport && !msg.data.startsWith('data:') && !msg.data.startsWith('<svg')) {
|
||||
pendingSyncExport = false;
|
||||
@@ -742,64 +563,6 @@ function getHtmlPage(sessionId: string): string {
|
||||
|
||||
if (sessionId) { poll(); setInterval(poll, 2000); }
|
||||
|
||||
// Save modal
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const saveModal = document.getElementById('save-modal');
|
||||
const saveFormat = document.getElementById('save-format');
|
||||
const saveFilename = document.getElementById('save-filename');
|
||||
const saveExt = document.getElementById('save-ext');
|
||||
const saveCancelBtn = document.getElementById('save-cancel-btn');
|
||||
const saveConfirmBtn = document.getElementById('save-confirm-btn');
|
||||
let pendingDownload = null;
|
||||
|
||||
const extMap = { drawio: '.drawio', png: '.png', svg: '.svg' };
|
||||
|
||||
saveBtn.onclick = () => {
|
||||
if (!sessionId || !isReady) return;
|
||||
saveModal.classList.add('open');
|
||||
saveFilename.focus();
|
||||
saveFilename.select();
|
||||
};
|
||||
|
||||
saveFormat.onchange = () => {
|
||||
saveExt.textContent = extMap[saveFormat.value] || '.drawio';
|
||||
};
|
||||
|
||||
saveCancelBtn.onclick = () => { saveModal.classList.remove('open'); };
|
||||
saveModal.onclick = (e) => { if (e.target === saveModal) saveCancelBtn.onclick(); };
|
||||
|
||||
saveConfirmBtn.onclick = () => {
|
||||
const format = saveFormat.value;
|
||||
const filename = (saveFilename.value.trim() || 'diagram') + extMap[format];
|
||||
saveConfirmBtn.disabled = true;
|
||||
saveConfirmBtn.textContent = 'Exporting...';
|
||||
|
||||
if (format === 'drawio') {
|
||||
// Use lastXml directly instead of requesting export (avoids race with SVG exports)
|
||||
let xmlData = lastXml || '';
|
||||
if (xmlData && !xmlData.includes('<mxfile')) {
|
||||
xmlData = '<mxfile host="mcp"><diagram name="Page-1">' + xmlData + '</diagram></mxfile>';
|
||||
}
|
||||
const blob = new Blob([xmlData], { type: 'application/xml' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url; a.download = filename;
|
||||
document.body.appendChild(a); a.click(); document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
saveModal.classList.remove('open');
|
||||
saveConfirmBtn.disabled = false;
|
||||
saveConfirmBtn.textContent = 'Save';
|
||||
} else if (format === 'png') {
|
||||
pendingDownload = { format: 'png', filename };
|
||||
iframe.contentWindow.postMessage(JSON.stringify({ action: 'export', format: 'png', scale: 2 }), '*');
|
||||
setTimeout(() => { saveConfirmBtn.disabled = false; saveConfirmBtn.textContent = 'Save'; pendingDownload = null; }, 5000);
|
||||
} else if (format === 'svg') {
|
||||
pendingDownload = { format: 'svg', filename };
|
||||
iframe.contentWindow.postMessage(JSON.stringify({ action: 'export', format: 'svg' }), '*');
|
||||
setTimeout(() => { saveConfirmBtn.disabled = false; saveConfirmBtn.textContent = 'Save'; pendingDownload = null; }, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
// History UI
|
||||
const historyBtn = document.getElementById('history-btn');
|
||||
const historyModal = document.getElementById('history-modal');
|
||||
|
||||
@@ -260,7 +260,6 @@ COMMON STYLES:
|
||||
// Update session state
|
||||
currentSession.xml = xml
|
||||
currentSession.version++
|
||||
currentSession.lastGetDiagramTime = Date.now()
|
||||
|
||||
// Push to embedded server state
|
||||
setState(currentSession.id, xml)
|
||||
|
||||
1
proxy.ts
1
proxy.ts
@@ -31,7 +31,6 @@ export function proxy(request: NextRequest) {
|
||||
if (
|
||||
pathname.startsWith("/api/") ||
|
||||
pathname.startsWith("/_next/") ||
|
||||
pathname.startsWith("/drawio") ||
|
||||
pathname.includes("/favicon") ||
|
||||
/\.(.*)$/.test(pathname)
|
||||
) {
|
||||
|
||||
@@ -1,52 +1,10 @@
|
||||
/**
|
||||
* electron-builder afterPack hook
|
||||
* Copies node_modules to the standalone directory in the packaged app
|
||||
* and ad-hoc signs macOS apps for offline draw.io bundle compatibility
|
||||
*/
|
||||
|
||||
const {
|
||||
copyFileSync,
|
||||
existsSync,
|
||||
lstatSync,
|
||||
mkdirSync,
|
||||
readdirSync,
|
||||
statSync,
|
||||
} = require("fs")
|
||||
const { cpSync, existsSync } = require("fs")
|
||||
const path = require("path")
|
||||
const { execSync } = require("child_process")
|
||||
|
||||
/**
|
||||
* Copy directory recursively, converting symlinks to regular files/directories.
|
||||
* This is needed because cpSync with dereference:true does NOT convert symlinks.
|
||||
* macOS codesign fails if bundle contains symlinks pointing outside the bundle.
|
||||
*/
|
||||
function copyDereferenced(src, dst) {
|
||||
const lstat = lstatSync(src)
|
||||
|
||||
if (lstat.isSymbolicLink()) {
|
||||
// Follow symlink and check what it points to
|
||||
const stat = statSync(src)
|
||||
if (stat.isDirectory()) {
|
||||
// Symlink to directory: recursively copy the directory contents
|
||||
mkdirSync(dst, { recursive: true })
|
||||
for (const entry of readdirSync(src)) {
|
||||
copyDereferenced(path.join(src, entry), path.join(dst, entry))
|
||||
}
|
||||
} else {
|
||||
// Symlink to file: copy the actual file content
|
||||
mkdirSync(path.join(dst, ".."), { recursive: true })
|
||||
copyFileSync(src, dst)
|
||||
}
|
||||
} else if (lstat.isDirectory()) {
|
||||
mkdirSync(dst, { recursive: true })
|
||||
for (const entry of readdirSync(src)) {
|
||||
copyDereferenced(path.join(src, entry), path.join(dst, entry))
|
||||
}
|
||||
} else {
|
||||
mkdirSync(path.join(dst, ".."), { recursive: true })
|
||||
copyFileSync(src, dst)
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = async (context) => {
|
||||
const appOutDir = context.appOutDir
|
||||
@@ -67,7 +25,7 @@ module.exports = async (context) => {
|
||||
console.log(`[afterPack] Copying node_modules to ${targetNodeModules}`)
|
||||
|
||||
if (existsSync(sourceNodeModules) && existsSync(standaloneDir)) {
|
||||
copyDereferenced(sourceNodeModules, targetNodeModules)
|
||||
cpSync(sourceNodeModules, targetNodeModules, { recursive: true })
|
||||
console.log("[afterPack] node_modules copied successfully")
|
||||
} else {
|
||||
console.error("[afterPack] Source or target directory not found!")
|
||||
@@ -82,22 +40,4 @@ module.exports = async (context) => {
|
||||
"Ensure 'npm run electron:prepare' was run before building.",
|
||||
)
|
||||
}
|
||||
|
||||
// Ad-hoc sign macOS apps to fix signature issues with bundled draw.io files
|
||||
if (context.packager.platform.name === "mac") {
|
||||
const appPath = path.join(
|
||||
appOutDir,
|
||||
`${context.packager.appInfo.productFilename}.app`,
|
||||
)
|
||||
console.log(`[afterPack] Ad-hoc signing macOS app: ${appPath}`)
|
||||
try {
|
||||
execSync(`codesign --force --deep --sign - "${appPath}"`, {
|
||||
stdio: "inherit",
|
||||
})
|
||||
console.log("[afterPack] Ad-hoc signing completed successfully")
|
||||
} catch (error) {
|
||||
console.error("[afterPack] Ad-hoc signing failed:", error.message)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,54 +6,13 @@
|
||||
* that electron-builder can properly include
|
||||
*/
|
||||
|
||||
import {
|
||||
copyFileSync,
|
||||
existsSync,
|
||||
lstatSync,
|
||||
mkdirSync,
|
||||
readdirSync,
|
||||
rmSync,
|
||||
statSync,
|
||||
} from "node:fs"
|
||||
import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs"
|
||||
import { join } from "node:path"
|
||||
import { fileURLToPath } from "node:url"
|
||||
|
||||
const __dirname = fileURLToPath(new URL(".", import.meta.url))
|
||||
const rootDir = join(__dirname, "..")
|
||||
|
||||
/**
|
||||
* Copy directory recursively, converting symlinks to regular files/directories.
|
||||
* This is needed because cpSync with dereference:true does NOT convert symlinks.
|
||||
* macOS codesign fails if bundle contains symlinks pointing outside the bundle.
|
||||
*/
|
||||
function copyDereferenced(src, dst) {
|
||||
const lstat = lstatSync(src)
|
||||
|
||||
if (lstat.isSymbolicLink()) {
|
||||
// Follow symlink and check what it points to
|
||||
const stat = statSync(src)
|
||||
if (stat.isDirectory()) {
|
||||
// Symlink to directory: recursively copy the directory contents
|
||||
mkdirSync(dst, { recursive: true })
|
||||
for (const entry of readdirSync(src)) {
|
||||
copyDereferenced(join(src, entry), join(dst, entry))
|
||||
}
|
||||
} else {
|
||||
// Symlink to file: copy the actual file content
|
||||
mkdirSync(join(dst, ".."), { recursive: true })
|
||||
copyFileSync(src, dst)
|
||||
}
|
||||
} else if (lstat.isDirectory()) {
|
||||
mkdirSync(dst, { recursive: true })
|
||||
for (const entry of readdirSync(src)) {
|
||||
copyDereferenced(join(src, entry), join(dst, entry))
|
||||
}
|
||||
} else {
|
||||
mkdirSync(join(dst, ".."), { recursive: true })
|
||||
copyFileSync(src, dst)
|
||||
}
|
||||
}
|
||||
|
||||
const standaloneDir = join(rootDir, ".next", "standalone")
|
||||
const staticDir = join(rootDir, ".next", "static")
|
||||
const targetDir = join(rootDir, "electron-standalone")
|
||||
@@ -71,19 +30,20 @@ mkdirSync(targetDir, { recursive: true })
|
||||
|
||||
// Copy standalone (includes node_modules)
|
||||
console.log("Copying standalone directory...")
|
||||
copyDereferenced(standaloneDir, targetDir)
|
||||
cpSync(standaloneDir, targetDir, { recursive: true })
|
||||
|
||||
// Copy static files
|
||||
console.log("Copying static files...")
|
||||
const targetStaticDir = join(targetDir, ".next", "static")
|
||||
copyDereferenced(staticDir, targetStaticDir)
|
||||
mkdirSync(targetStaticDir, { recursive: true })
|
||||
cpSync(staticDir, targetStaticDir, { recursive: true })
|
||||
|
||||
// Copy public folder (required for favicon-white.svg and other assets)
|
||||
console.log("Copying public folder...")
|
||||
const publicDir = join(rootDir, "public")
|
||||
const targetPublicDir = join(targetDir, "public")
|
||||
if (existsSync(publicDir)) {
|
||||
copyDereferenced(publicDir, targetPublicDir)
|
||||
cpSync(publicDir, targetPublicDir, { recursive: true })
|
||||
}
|
||||
|
||||
console.log("Done! Files prepared in electron-standalone/")
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
import { describe, expect, it } from "vitest"
|
||||
import {
|
||||
formatValidationFeedback,
|
||||
type ValidationResult,
|
||||
} from "@/lib/diagram-validator"
|
||||
|
||||
describe("formatValidationFeedback", () => {
|
||||
it("formats result with critical issues", () => {
|
||||
const result: ValidationResult = {
|
||||
valid: false,
|
||||
issues: [
|
||||
{
|
||||
type: "overlap",
|
||||
severity: "critical",
|
||||
description: "Box A overlaps with Box B",
|
||||
},
|
||||
],
|
||||
suggestions: ["Move Box A to the left"],
|
||||
}
|
||||
|
||||
const feedback = formatValidationFeedback(result)
|
||||
|
||||
expect(feedback).toContain("DIAGRAM VISUAL VALIDATION FAILED")
|
||||
expect(feedback).toContain("Critical Issues (must fix):")
|
||||
expect(feedback).toContain("[overlap] Box A overlaps with Box B")
|
||||
expect(feedback).toContain("Suggestions to fix:")
|
||||
expect(feedback).toContain("Move Box A to the left")
|
||||
expect(feedback).toContain(
|
||||
"Please regenerate the diagram with corrected layout",
|
||||
)
|
||||
})
|
||||
|
||||
it("formats result with warnings only", () => {
|
||||
const result: ValidationResult = {
|
||||
valid: true,
|
||||
issues: [
|
||||
{
|
||||
type: "text",
|
||||
severity: "warning",
|
||||
description: "Label text is small",
|
||||
},
|
||||
],
|
||||
suggestions: [],
|
||||
}
|
||||
|
||||
const feedback = formatValidationFeedback(result)
|
||||
|
||||
expect(feedback).toContain("Warnings:")
|
||||
expect(feedback).toContain("[text] Label text is small")
|
||||
expect(feedback).not.toContain("Critical Issues")
|
||||
})
|
||||
|
||||
it("formats result with both critical issues and warnings", () => {
|
||||
const result: ValidationResult = {
|
||||
valid: false,
|
||||
issues: [
|
||||
{
|
||||
type: "edge_routing",
|
||||
severity: "critical",
|
||||
description: "Edge crosses through node",
|
||||
},
|
||||
{
|
||||
type: "layout",
|
||||
severity: "warning",
|
||||
description: "Uneven spacing",
|
||||
},
|
||||
],
|
||||
suggestions: ["Reroute the edge", "Adjust spacing"],
|
||||
}
|
||||
|
||||
const feedback = formatValidationFeedback(result)
|
||||
|
||||
expect(feedback).toContain("Critical Issues (must fix):")
|
||||
expect(feedback).toContain("[edge_routing] Edge crosses through node")
|
||||
expect(feedback).toContain("Warnings:")
|
||||
expect(feedback).toContain("[layout] Uneven spacing")
|
||||
expect(feedback).toContain("Reroute the edge")
|
||||
expect(feedback).toContain("Adjust spacing")
|
||||
})
|
||||
|
||||
it("returns empty string for valid result with no issues", () => {
|
||||
const result: ValidationResult = {
|
||||
valid: true,
|
||||
issues: [],
|
||||
suggestions: [],
|
||||
}
|
||||
|
||||
const feedback = formatValidationFeedback(result)
|
||||
|
||||
expect(feedback).toBe("")
|
||||
})
|
||||
|
||||
it("formats result with multiple suggestions", () => {
|
||||
const result: ValidationResult = {
|
||||
valid: false,
|
||||
issues: [
|
||||
{
|
||||
type: "rendering",
|
||||
severity: "critical",
|
||||
description: "Missing element",
|
||||
},
|
||||
],
|
||||
suggestions: [
|
||||
"Check the XML syntax",
|
||||
"Ensure all elements are defined",
|
||||
"Verify parent-child relationships",
|
||||
],
|
||||
}
|
||||
|
||||
const feedback = formatValidationFeedback(result)
|
||||
|
||||
expect(feedback).toContain("Check the XML syntax")
|
||||
expect(feedback).toContain("Ensure all elements are defined")
|
||||
expect(feedback).toContain("Verify parent-child relationships")
|
||||
})
|
||||
})
|
||||
@@ -1,85 +0,0 @@
|
||||
import { afterEach, describe, expect, it } from "vitest"
|
||||
import {
|
||||
loadFlattenedServerModels,
|
||||
type ServerModelsConfig,
|
||||
ServerModelsConfigSchema,
|
||||
} from "@/lib/server-model-config"
|
||||
|
||||
const ORIGINAL_ENV = { ...process.env }
|
||||
|
||||
afterEach(() => {
|
||||
process.env.AI_PROVIDER = ORIGINAL_ENV.AI_PROVIDER
|
||||
process.env.AI_MODEL = ORIGINAL_ENV.AI_MODEL
|
||||
process.env.AI_MODELS_CONFIG_PATH = ORIGINAL_ENV.AI_MODELS_CONFIG_PATH
|
||||
process.env.AI_MODELS_CONFIG = ORIGINAL_ENV.AI_MODELS_CONFIG
|
||||
})
|
||||
|
||||
describe("ServerModelsConfigSchema", () => {
|
||||
it("accepts valid provider names", () => {
|
||||
const config: ServerModelsConfig = {
|
||||
providers: [
|
||||
{
|
||||
name: "OpenAI Server",
|
||||
provider: "openai",
|
||||
models: ["gpt-4o"],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
expect(() => ServerModelsConfigSchema.parse(config)).not.toThrow()
|
||||
})
|
||||
|
||||
it("rejects invalid provider names", () => {
|
||||
const invalidConfig = {
|
||||
providers: [
|
||||
{
|
||||
name: "Invalid Provider",
|
||||
// Cast to any so we can verify runtime validation, not TypeScript
|
||||
provider: "invalid-provider" as any,
|
||||
models: ["model-1"],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
expect(() =>
|
||||
ServerModelsConfigSchema.parse(invalidConfig as any),
|
||||
).toThrow()
|
||||
})
|
||||
})
|
||||
|
||||
describe("loadFlattenedServerModels", () => {
|
||||
it("returns empty array when config file is missing", async () => {
|
||||
// Point to a non-existent config path so fs.readFile throws ENOENT
|
||||
process.env.AI_MODELS_CONFIG_PATH = `non-existent-config-${Date.now()}.json`
|
||||
|
||||
const models = await loadFlattenedServerModels()
|
||||
expect(models).toEqual([])
|
||||
})
|
||||
|
||||
it("flattens providers and marks default model from env var config", async () => {
|
||||
// Use AI_MODELS_CONFIG env var instead of file
|
||||
const config: ServerModelsConfig = {
|
||||
providers: [
|
||||
{
|
||||
name: "OpenAI Server",
|
||||
provider: "openai",
|
||||
models: ["gpt-4o", "gpt-4o-mini"],
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
process.env.AI_MODELS_CONFIG = JSON.stringify(config)
|
||||
process.env.AI_MODELS_CONFIG_PATH = "" // Clear file path
|
||||
|
||||
const models = await loadFlattenedServerModels()
|
||||
|
||||
expect(models.length).toBe(2)
|
||||
|
||||
const defaults = models.filter((m) => m.isDefault)
|
||||
expect(defaults.length).toBe(1)
|
||||
|
||||
const defaultModel = defaults[0]
|
||||
expect(defaultModel.provider).toBe("openai")
|
||||
expect(defaultModel.modelId).toBe("gpt-4o") // First model of default provider
|
||||
})
|
||||
})
|
||||
@@ -30,11 +30,5 @@
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"packages",
|
||||
"electron",
|
||||
"electron-standalone",
|
||||
"dist-electron"
|
||||
]
|
||||
"exclude": ["node_modules", "packages", "electron", "dist-electron"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user