mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-03 23:02:31 +08:00
Compare commits
1 Commits
main
...
fix/image-
| Author | SHA1 | Date | |
|---|---|---|---|
|
e598891322 |
2
.github/workflows/electron-release.yml
vendored
2
.github/workflows/electron-release.yml
vendored
@@ -38,7 +38,7 @@ jobs:
|
||||
cache: "npm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install
|
||||
run: npm ci
|
||||
|
||||
- name: Build and publish Electron app
|
||||
run: npm run dist:${{ matrix.platform }}
|
||||
|
||||
@@ -35,7 +35,6 @@ export default function Home() {
|
||||
const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const [isDrawioReady, setIsDrawioReady] = useState(false)
|
||||
const [closeProtection, setCloseProtection] = useState(false)
|
||||
|
||||
const chatPanelRef = useRef<ImperativePanelHandle>(null)
|
||||
@@ -105,18 +104,12 @@ export default function Home() {
|
||||
setIsLoaded(true)
|
||||
}, [pathname, router])
|
||||
|
||||
const handleDrawioLoad = useCallback(() => {
|
||||
setIsDrawioReady(true)
|
||||
onDrawioLoad()
|
||||
}, [onDrawioLoad])
|
||||
|
||||
const handleDarkModeChange = async () => {
|
||||
await saveDiagramToStorage()
|
||||
const newValue = !darkMode
|
||||
setDarkMode(newValue)
|
||||
localStorage.setItem("next-ai-draw-io-dark-mode", String(newValue))
|
||||
document.documentElement.classList.toggle("dark", newValue)
|
||||
setIsDrawioReady(false)
|
||||
resetDrawioReady()
|
||||
}
|
||||
|
||||
@@ -125,7 +118,6 @@ export default function Home() {
|
||||
const newUi = drawioUi === "min" ? "sketch" : "min"
|
||||
localStorage.setItem("drawio-theme", newUi)
|
||||
setDrawioUi(newUi)
|
||||
setIsDrawioReady(false)
|
||||
resetDrawioReady()
|
||||
}
|
||||
|
||||
@@ -139,7 +131,6 @@ export default function Home() {
|
||||
newIsMobile !== isMobileRef.current
|
||||
) {
|
||||
saveDiagramToStorage().catch(() => {})
|
||||
setIsDrawioReady(false)
|
||||
resetDrawioReady()
|
||||
}
|
||||
isMobileRef.current = newIsMobile
|
||||
@@ -215,21 +206,18 @@ export default function Home() {
|
||||
mouseOverDrawioRef.current = false
|
||||
}}
|
||||
>
|
||||
<div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 relative">
|
||||
{isLoaded && (
|
||||
<div
|
||||
className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
|
||||
>
|
||||
<div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30">
|
||||
{isLoaded ? (
|
||||
<DrawIoEmbed
|
||||
key={`${drawioUi}-${darkMode}-${currentLang}`}
|
||||
ref={drawioRef}
|
||||
onExport={handleDiagramExport}
|
||||
onLoad={handleDrawioLoad}
|
||||
onLoad={onDrawioLoad}
|
||||
onSave={handleDrawioSave}
|
||||
baseUrl={drawioBaseUrl}
|
||||
urlParameters={{
|
||||
ui: drawioUi,
|
||||
spin: false,
|
||||
spin: true,
|
||||
libraries: false,
|
||||
saveAndExit: false,
|
||||
noExitBtn: true,
|
||||
@@ -237,13 +225,9 @@ export default function Home() {
|
||||
lang: currentLang,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{(!isLoaded || !isDrawioReady) && (
|
||||
<div className="h-full w-full bg-background flex items-center justify-center">
|
||||
<span className="text-muted-foreground">
|
||||
Draw.io panel is loading...
|
||||
</span>
|
||||
) : (
|
||||
<div className="h-full w-full flex items-center justify-center bg-background">
|
||||
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
|
||||
"$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
|
||||
@@ -193,7 +193,6 @@ interface ChatMessageDisplayProps {
|
||||
onRegenerate?: (messageIndex: number) => void
|
||||
onEditMessage?: (messageIndex: number, newText: string) => void
|
||||
status?: "streaming" | "submitted" | "idle" | "error" | "ready"
|
||||
isRestored?: boolean
|
||||
}
|
||||
|
||||
export function ChatMessageDisplay({
|
||||
@@ -206,7 +205,6 @@ export function ChatMessageDisplay({
|
||||
onRegenerate,
|
||||
onEditMessage,
|
||||
status = "idle",
|
||||
isRestored = false,
|
||||
}: ChatMessageDisplayProps) {
|
||||
const dict = useDictionary()
|
||||
const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
|
||||
@@ -252,15 +250,6 @@ export function ChatMessageDisplay({
|
||||
const [expandedPdfSections, setExpandedPdfSections] = useState<
|
||||
Record<string, boolean>
|
||||
>({})
|
||||
// Track message IDs that were restored from localStorage (skip animation for these)
|
||||
const restoredMessageIdsRef = useRef<Set<string> | null>(null)
|
||||
|
||||
// Capture restored message IDs once when isRestored becomes true
|
||||
useEffect(() => {
|
||||
if (isRestored && restoredMessageIdsRef.current === null) {
|
||||
restoredMessageIdsRef.current = new Set(messages.map((m) => m.id))
|
||||
}
|
||||
}, [isRestored, messages])
|
||||
|
||||
const setCopyState = (
|
||||
messageId: string,
|
||||
@@ -294,7 +283,7 @@ export function ChatMessageDisplay({
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopyState(messageId, isToolCall, true)
|
||||
} catch (_err) {
|
||||
} catch (err) {
|
||||
// Fallback for non-secure contexts (HTTP) or permission denied
|
||||
const textarea = document.createElement("textarea")
|
||||
textarea.value = text
|
||||
@@ -680,8 +669,7 @@ export function ChatMessageDisplay({
|
||||
const renderToolPart = (part: ToolPartLike) => {
|
||||
const callId = part.toolCallId
|
||||
const { state, input, output } = part
|
||||
// Default to collapsed if tool is complete, expanded if still streaming
|
||||
const isExpanded = expandedTools[callId] ?? state !== "output-available"
|
||||
const isExpanded = expandedTools[callId] ?? true
|
||||
const toolName = part.type?.replace("tool-", "")
|
||||
const isCopied = copiedToolCallId === callId
|
||||
|
||||
@@ -871,9 +859,9 @@ export function ChatMessageDisplay({
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full w-full scrollbar-thin">
|
||||
{messages.length === 0 && isRestored ? (
|
||||
{messages.length === 0 ? (
|
||||
<ExamplePanel setInput={setInput} setFiles={setFiles} />
|
||||
) : messages.length === 0 ? null : (
|
||||
) : (
|
||||
<div className="py-4 px-4 space-y-4">
|
||||
{messages.map((message, messageIndex) => {
|
||||
const userMessageText =
|
||||
@@ -893,23 +881,13 @@ export function ChatMessageDisplay({
|
||||
.slice(messageIndex + 1)
|
||||
.every((m) => m.role !== "user"))
|
||||
const isEditing = editingMessageId === message.id
|
||||
// Skip animation for restored messages
|
||||
// If isRestored but ref not set yet, we're in first render after restoration - treat all as restored
|
||||
const isRestoredMessage =
|
||||
isRestored &&
|
||||
(restoredMessageIdsRef.current === null ||
|
||||
restoredMessageIdsRef.current.has(message.id))
|
||||
return (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex w-full ${message.role === "user" ? "justify-end" : "justify-start"} ${isRestoredMessage ? "" : "animate-message-in"}`}
|
||||
style={
|
||||
isRestoredMessage
|
||||
? undefined
|
||||
: {
|
||||
className={`flex w-full ${message.role === "user" ? "justify-end" : "justify-start"} animate-message-in`}
|
||||
style={{
|
||||
animationDelay: `${messageIndex * 50}ms`,
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{message.role === "user" &&
|
||||
userMessageText &&
|
||||
@@ -1006,9 +984,6 @@ export function ChatMessageDisplay({
|
||||
isStreaming={
|
||||
isStreamingReasoning
|
||||
}
|
||||
defaultOpen={
|
||||
!isRestoredMessage
|
||||
}
|
||||
>
|
||||
<ReasoningTrigger />
|
||||
<ReasoningContent>
|
||||
|
||||
@@ -10,13 +10,7 @@ import {
|
||||
} from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import type React from "react"
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { flushSync } from "react-dom"
|
||||
import { Toaster, toast } from "sonner"
|
||||
import { ButtonWithTooltip } from "@/components/button-with-tooltip"
|
||||
@@ -34,7 +28,7 @@ import { formatMessage } from "@/lib/i18n/utils"
|
||||
import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
|
||||
import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
|
||||
import { useQuotaManager } from "@/lib/use-quota-manager"
|
||||
import { cn, formatXML } from "@/lib/utils"
|
||||
import { formatXML } from "@/lib/utils"
|
||||
import { ChatMessageDisplay } from "./chat-message-display"
|
||||
import { DevXmlSimulator } from "./dev-xml-simulator"
|
||||
|
||||
@@ -207,18 +201,6 @@ export default function ChatPanel({
|
||||
|
||||
// Flag to track if we've restored from localStorage
|
||||
const hasRestoredRef = useRef(false)
|
||||
const [isRestored, setIsRestored] = useState(false)
|
||||
|
||||
// Track previous isVisible to only animate when toggling (not on page load)
|
||||
const prevIsVisibleRef = useRef(isVisible)
|
||||
const [shouldAnimatePanel, setShouldAnimatePanel] = useState(false)
|
||||
useEffect(() => {
|
||||
// Only animate when visibility changes from false to true (not on initial load)
|
||||
if (!prevIsVisibleRef.current && isVisible) {
|
||||
setShouldAnimatePanel(true)
|
||||
}
|
||||
prevIsVisibleRef.current = isVisible
|
||||
}, [isVisible])
|
||||
|
||||
// Ref to track latest chartXML for use in callbacks (avoids stale closure)
|
||||
const chartXMLRef = useRef(chartXML)
|
||||
@@ -447,8 +429,7 @@ export default function ChatPanel({
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Restore messages and XML snapshots from localStorage on mount
|
||||
// useLayoutEffect runs synchronously before browser paint, so messages appear immediately
|
||||
useLayoutEffect(() => {
|
||||
useEffect(() => {
|
||||
if (hasRestoredRef.current) return
|
||||
hasRestoredRef.current = true
|
||||
|
||||
@@ -476,10 +457,8 @@ export default function ChatPanel({
|
||||
localStorage.removeItem(STORAGE_MESSAGES_KEY)
|
||||
localStorage.removeItem(STORAGE_XML_SNAPSHOTS_KEY)
|
||||
toast.error(dict.errors.sessionCorrupted)
|
||||
} finally {
|
||||
setIsRestored(true)
|
||||
}
|
||||
}, [setMessages, dict.errors.sessionCorrupted])
|
||||
}, [setMessages])
|
||||
|
||||
// Save messages to localStorage whenever they change (debounced to prevent blocking during streaming)
|
||||
useEffect(() => {
|
||||
@@ -936,16 +915,12 @@ export default function ChatPanel({
|
||||
|
||||
// Full view
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"h-full flex flex-col bg-card shadow-soft rounded-xl border border-border/30 relative",
|
||||
shouldAnimatePanel && "animate-slide-in-right",
|
||||
)}
|
||||
>
|
||||
<div className="h-full flex flex-col bg-card shadow-soft animate-slide-in-right rounded-xl border border-border/30 relative">
|
||||
<Toaster
|
||||
position="bottom-left"
|
||||
position="bottom-center"
|
||||
richColors
|
||||
expand
|
||||
style={{ position: "absolute" }}
|
||||
toastOptions={{
|
||||
style: {
|
||||
maxWidth: "480px",
|
||||
@@ -1031,7 +1006,6 @@ export default function ChatPanel({
|
||||
onRegenerate={handleRegenerate}
|
||||
status={status}
|
||||
onEditMessage={handleEditMessage}
|
||||
isRestored={isRestored}
|
||||
/>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
Zap,
|
||||
} from "lucide-react"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -516,6 +517,7 @@ export function ModelConfigDialog({
|
||||
{/* Provider Details (Right Panel) */}
|
||||
<div className="flex-1 min-w-0 flex flex-col overflow-auto [&::-webkit-scrollbar]:hidden ">
|
||||
{selectedProvider ? (
|
||||
<>
|
||||
<ScrollArea className="flex-1" ref={scrollRef}>
|
||||
<div className="p-6 space-y-8">
|
||||
{/* Provider Header */}
|
||||
@@ -557,7 +559,10 @@ export function ModelConfigDialog({
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-success-muted text-success">
|
||||
<Check className="h-3.5 w-3.5 animate-check-pop" />
|
||||
<span className="text-xs font-medium">
|
||||
{dict.modelConfig.verified}
|
||||
{
|
||||
dict.modelConfig
|
||||
.verified
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -570,13 +575,18 @@ export function ModelConfigDialog({
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1.5" />
|
||||
{dict.modelConfig.deleteProvider}
|
||||
{
|
||||
dict.modelConfig
|
||||
.deleteProvider
|
||||
}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Configuration Section */}
|
||||
<ConfigSection
|
||||
title={dict.modelConfig.configuration}
|
||||
title={
|
||||
dict.modelConfig.configuration
|
||||
}
|
||||
icon={Settings2}
|
||||
>
|
||||
<ConfigCard>
|
||||
@@ -626,7 +636,8 @@ export function ModelConfigDialog({
|
||||
>
|
||||
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.awsAccessKeyId
|
||||
}
|
||||
</Label>
|
||||
@@ -661,7 +672,8 @@ export function ModelConfigDialog({
|
||||
>
|
||||
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.awsSecretAccessKey
|
||||
}
|
||||
</Label>
|
||||
@@ -677,10 +689,13 @@ export function ModelConfigDialog({
|
||||
selectedProvider.awsSecretAccessKey ||
|
||||
""
|
||||
}
|
||||
onChange={(e) =>
|
||||
onChange={(
|
||||
e,
|
||||
) =>
|
||||
handleProviderUpdate(
|
||||
"awsSecretAccessKey",
|
||||
e.target
|
||||
e
|
||||
.target
|
||||
.value,
|
||||
)
|
||||
}
|
||||
@@ -722,7 +737,8 @@ export function ModelConfigDialog({
|
||||
>
|
||||
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.awsRegion
|
||||
}
|
||||
</Label>
|
||||
@@ -801,7 +817,8 @@ export function ModelConfigDialog({
|
||||
</SelectItem>
|
||||
<SelectItem value="sa-east-1">
|
||||
sa-east-1
|
||||
(São Paulo)
|
||||
(São
|
||||
Paulo)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
@@ -848,7 +865,8 @@ export function ModelConfigDialog({
|
||||
}
|
||||
</>
|
||||
) : (
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.test
|
||||
)}
|
||||
</Button>
|
||||
@@ -904,7 +922,8 @@ export function ModelConfigDialog({
|
||||
}
|
||||
</>
|
||||
) : (
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.test
|
||||
)}
|
||||
</Button>
|
||||
@@ -930,7 +949,8 @@ export function ModelConfigDialog({
|
||||
>
|
||||
<Key className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.apiKey
|
||||
}
|
||||
</Label>
|
||||
@@ -1047,7 +1067,8 @@ export function ModelConfigDialog({
|
||||
>
|
||||
<Link2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.baseUrl
|
||||
}
|
||||
<span className="text-muted-foreground font-normal">
|
||||
@@ -1077,7 +1098,8 @@ export function ModelConfigDialog({
|
||||
.provider
|
||||
]
|
||||
.defaultBaseUrl ||
|
||||
dict.modelConfig
|
||||
dict
|
||||
.modelConfig
|
||||
.customEndpoint
|
||||
}
|
||||
className="h-9 rounded-xl font-mono text-xs"
|
||||
@@ -1100,10 +1122,13 @@ export function ModelConfigDialog({
|
||||
dict.modelConfig
|
||||
.customModelId
|
||||
}
|
||||
value={customModelInput}
|
||||
value={
|
||||
customModelInput
|
||||
}
|
||||
onChange={(e) => {
|
||||
setCustomModelInput(
|
||||
e.target.value,
|
||||
e.target
|
||||
.value,
|
||||
)
|
||||
if (
|
||||
duplicateError
|
||||
@@ -1123,7 +1148,9 @@ export function ModelConfigDialog({
|
||||
handleAddModel(
|
||||
customModelInput.trim(),
|
||||
)
|
||||
if (success) {
|
||||
if (
|
||||
success
|
||||
) {
|
||||
setCustomModelInput(
|
||||
"",
|
||||
)
|
||||
@@ -1168,7 +1195,9 @@ export function ModelConfigDialog({
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
onValueChange={(
|
||||
value,
|
||||
) => {
|
||||
if (value) {
|
||||
handleAddModel(
|
||||
value,
|
||||
@@ -1204,7 +1233,9 @@ export function ModelConfigDialog({
|
||||
}
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
{modelId}
|
||||
{
|
||||
modelId
|
||||
}
|
||||
</SelectItem>
|
||||
),
|
||||
)}
|
||||
@@ -1215,8 +1246,8 @@ export function ModelConfigDialog({
|
||||
>
|
||||
{/* Model List */}
|
||||
<div className="rounded-2xl border border-border-subtle bg-surface-2/30 overflow-hidden min-h-[120px]">
|
||||
{selectedProvider.models.length ===
|
||||
0 ? (
|
||||
{selectedProvider.models
|
||||
.length === 0 ? (
|
||||
<div className="p-6 text-center h-full flex flex-col items-center justify-center">
|
||||
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-surface-2 mb-3">
|
||||
<Sparkles className="h-5 w-5 text-muted-foreground" />
|
||||
@@ -1233,7 +1264,9 @@ export function ModelConfigDialog({
|
||||
{selectedProvider.models.map(
|
||||
(model, index) => (
|
||||
<div
|
||||
key={model.id}
|
||||
key={
|
||||
model.id
|
||||
}
|
||||
className={cn(
|
||||
"transition-colors duration-150 hover:bg-interactive-hover/50",
|
||||
)}
|
||||
@@ -1467,6 +1500,7 @@ export function ModelConfigDialog({
|
||||
</ConfigSection>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
<div className="h-full flex flex-col items-center justify-center p-8 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-surface-2 mb-4">
|
||||
|
||||
@@ -11,7 +11,7 @@ services:
|
||||
# - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
|
||||
ports: ["3000:3000"]
|
||||
env_file: .env
|
||||
# environment:
|
||||
# # For subdirectory deployment, uncomment and set your path:
|
||||
environment:
|
||||
# For subdirectory deployment, uncomment and set your path:
|
||||
# NEXT_PUBLIC_BASE_PATH: /nextaidrawio
|
||||
depends_on: [drawio]
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
flattenModels,
|
||||
type ModelConfig,
|
||||
type MultiModelConfig,
|
||||
PROVIDER_INFO,
|
||||
type ProviderConfig,
|
||||
type ProviderName,
|
||||
} from "@/lib/types/model-config"
|
||||
|
||||
@@ -786,7 +786,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
|
||||
`data: ${JSON.stringify(data)}\n\n`,
|
||||
),
|
||||
)
|
||||
} catch (_e) {
|
||||
} catch (e) {
|
||||
// If parsing fails, forward the original message to avoid breaking the stream.
|
||||
controller.enqueue(
|
||||
new TextEncoder().encode(
|
||||
|
||||
3759
package-lock.json
generated
3759
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.8",
|
||||
"version": "0.4.7",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"main": "dist-electron/main/index.js",
|
||||
@@ -71,7 +71,7 @@
|
||||
"motion": "^12.23.25",
|
||||
"negotiator": "^1.0.0",
|
||||
"next": "^16.0.7",
|
||||
"ollama-ai-provider-v2": "^2.0.0",
|
||||
"ollama-ai-provider-v2": "^1.5.4",
|
||||
"pako": "^2.1.0",
|
||||
"prism-react-renderer": "^2.4.1",
|
||||
"react": "^19.1.2",
|
||||
|
||||
@@ -64,24 +64,6 @@ Add to Cursor MCP config (`~/.cursor/mcp.json`):
|
||||
}
|
||||
```
|
||||
|
||||
### Cline (VS Code Extension)
|
||||
|
||||
1. Click the **MCP Servers** icon in Cline's top menu bar
|
||||
2. Select the **Configure** tab
|
||||
3. Click **Configure MCP Servers** to edit `cline_mcp_settings.json`
|
||||
4. Add the drawio server:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"drawio": {
|
||||
"command": "npx",
|
||||
"args": ["@next-ai-drawio/mcp-server@latest"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
@@ -108,7 +90,7 @@ Use the standard MCP configuration with:
|
||||
- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
|
||||
- **Edit Support**: Modify existing diagrams with natural language instructions
|
||||
- **Export**: Save diagrams as `.drawio` files
|
||||
- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from `embed.diagrams.net` by default, configurable via `DRAWIO_BASE_URL`)
|
||||
- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
|
||||
|
||||
## Available Tools
|
||||
|
||||
@@ -148,33 +130,6 @@ Use the standard MCP configuration with:
|
||||
| Variable | Default | Description |
|
||||
|----------|---------|-------------|
|
||||
| `PORT` | `6002` | Port for the embedded HTTP server |
|
||||
| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for the draw.io embed. Set this to use a self-hosted draw.io instance for private deployments. |
|
||||
|
||||
### Private Deployment (Self-hosted draw.io)
|
||||
|
||||
For security-sensitive environments that require private deployment of draw.io:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"drawio": {
|
||||
"command": "npx",
|
||||
"args": ["@next-ai-drawio/mcp-server@latest"],
|
||||
"env": {
|
||||
"DRAWIO_BASE_URL": "https://drawio.your-company.com"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can deploy your own draw.io instance using the official Docker image:
|
||||
|
||||
```bash
|
||||
docker run -d -p 8080:8080 jgraph/drawio
|
||||
```
|
||||
|
||||
Then set `DRAWIO_BASE_URL=http://localhost:8080` (or your server's URL).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@next-ai-drawio/mcp-server",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.10",
|
||||
"description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@@ -13,45 +13,6 @@ import {
|
||||
} from "./history.js"
|
||||
import { log } from "./logger.js"
|
||||
|
||||
// Configurable draw.io embed URL for private deployments
|
||||
const DRAWIO_BASE_URL =
|
||||
process.env.DRAWIO_BASE_URL || "https://embed.diagrams.net"
|
||||
|
||||
// Extract origin (scheme + host + port) from URL for postMessage security check
|
||||
function getOrigin(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url)
|
||||
return `${parsed.protocol}//${parsed.host}`
|
||||
} catch {
|
||||
return url // Fallback if parsing fails
|
||||
}
|
||||
}
|
||||
|
||||
const DRAWIO_ORIGIN = getOrigin(DRAWIO_BASE_URL)
|
||||
|
||||
// Minimal blank diagram used to bootstrap new sessions.
|
||||
// This avoids the draw.io embed spinner (spin=1) getting stuck when no `load(xml)` is ever sent.
|
||||
const DEFAULT_DIAGRAM_XML = `<mxfile host="app.diagrams.net"><diagram id="blank" name="Page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
|
||||
|
||||
// Normalize URL for iframe src - ensure no double slashes
|
||||
function normalizeUrl(url: string): string {
|
||||
// Remove trailing slash to avoid double slashes
|
||||
return url.replace(/\/$/, "")
|
||||
}
|
||||
|
||||
function isLikelyMcpSessionId(sessionId: string): boolean {
|
||||
// Keep this cheap and conservative to avoid creating state for arbitrary IDs.
|
||||
return sessionId.startsWith("mcp-") && sessionId.length <= 128
|
||||
}
|
||||
|
||||
function ensureSessionStateInitialized(sessionId: string): void {
|
||||
if (!sessionId) return
|
||||
if (!isLikelyMcpSessionId(sessionId)) return
|
||||
if (stateStore.has(sessionId)) return
|
||||
|
||||
setState(sessionId, DEFAULT_DIAGRAM_XML)
|
||||
}
|
||||
|
||||
interface SessionState {
|
||||
xml: string
|
||||
version: number
|
||||
@@ -166,12 +127,7 @@ function cleanupExpiredSessions(): void {
|
||||
}
|
||||
}
|
||||
|
||||
const cleanupIntervalId = setInterval(cleanupExpiredSessions, 5 * 60 * 1000)
|
||||
|
||||
export function shutdown(): void {
|
||||
clearInterval(cleanupIntervalId)
|
||||
stopHttpServer()
|
||||
}
|
||||
setInterval(cleanupExpiredSessions, 5 * 60 * 1000)
|
||||
|
||||
export function getServerPort(): number {
|
||||
return serverPort
|
||||
@@ -194,11 +150,8 @@ function handleRequest(
|
||||
}
|
||||
|
||||
if (url.pathname === "/" || url.pathname === "/index.html") {
|
||||
const sessionId = url.searchParams.get("mcp") || ""
|
||||
ensureSessionStateInitialized(sessionId)
|
||||
|
||||
res.writeHead(200, { "Content-Type": "text/html" })
|
||||
res.end(getHtmlPage(sessionId))
|
||||
res.end(getHtmlPage(url.searchParams.get("mcp") || ""))
|
||||
} else if (url.pathname === "/api/state") {
|
||||
handleStateApi(req, res, url)
|
||||
} else if (url.pathname === "/api/history") {
|
||||
@@ -225,7 +178,6 @@ function handleStateApi(
|
||||
res.end(JSON.stringify({ error: "sessionId required" }))
|
||||
return
|
||||
}
|
||||
ensureSessionStateInitialized(sessionId)
|
||||
const state = stateStore.get(sessionId)
|
||||
res.writeHead(200, { "Content-Type": "application/json" })
|
||||
res.end(
|
||||
@@ -446,7 +398,7 @@ function getHtmlPage(sessionId: string): string {
|
||||
</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"></iframe>
|
||||
<iframe id="drawio" src="https://embed.diagrams.net/?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">
|
||||
@@ -476,7 +428,7 @@ function getHtmlPage(sessionId: string): string {
|
||||
let pendingAiSvg = false;
|
||||
|
||||
window.addEventListener('message', (e) => {
|
||||
if (e.origin !== '${DRAWIO_ORIGIN}') return;
|
||||
if (e.origin !== 'https://embed.diagrams.net') return;
|
||||
try {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.event === 'init') {
|
||||
|
||||
@@ -39,7 +39,6 @@ import {
|
||||
getState,
|
||||
requestSync,
|
||||
setState,
|
||||
shutdown,
|
||||
startHttpServer,
|
||||
waitForSync,
|
||||
} from "./http-server.js"
|
||||
@@ -48,7 +47,7 @@ import { validateAndFixXml } from "./xml-validation.js"
|
||||
|
||||
// Server configuration
|
||||
const config = {
|
||||
port: parseInt(process.env.PORT || "6002", 10),
|
||||
port: parseInt(process.env.PORT || "6002"),
|
||||
}
|
||||
|
||||
// Session state (single session for simplicity)
|
||||
@@ -619,31 +618,6 @@ server.registerTool(
|
||||
},
|
||||
)
|
||||
|
||||
// Graceful shutdown handler
|
||||
let isShuttingDown = false
|
||||
function gracefulShutdown(reason: string) {
|
||||
if (isShuttingDown) return
|
||||
isShuttingDown = true
|
||||
log.info(`Shutting down: ${reason}`)
|
||||
shutdown()
|
||||
process.exit(0)
|
||||
}
|
||||
|
||||
// Handle stdin close (primary method - works on all platforms including Windows)
|
||||
process.stdin.on("close", () => gracefulShutdown("stdin closed"))
|
||||
process.stdin.on("end", () => gracefulShutdown("stdin ended"))
|
||||
|
||||
// Handle signals (may not work reliably on Windows)
|
||||
process.on("SIGINT", () => gracefulShutdown("SIGINT"))
|
||||
process.on("SIGTERM", () => gracefulShutdown("SIGTERM"))
|
||||
|
||||
// Handle broken pipe (writing to closed stdout)
|
||||
process.stdout.on("error", (err) => {
|
||||
if (err.code === "EPIPE" || err.code === "ERR_STREAM_DESTROYED") {
|
||||
gracefulShutdown("stdout error")
|
||||
}
|
||||
})
|
||||
|
||||
// Start the MCP server
|
||||
async function main() {
|
||||
log.info("Starting MCP server for Next AI Draw.io (embedded mode)...")
|
||||
|
||||
@@ -253,7 +253,7 @@ async function main() {
|
||||
},
|
||||
)
|
||||
console.log("👀 Watching for preset configuration changes...")
|
||||
} catch (_err) {
|
||||
} catch (err) {
|
||||
// File might not exist yet, that's ok
|
||||
setTimeout(setupConfigWatcher, 5000)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user