diff --git a/app/page.tsx b/app/page.tsx index a45dbca..b0c7eb1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -14,13 +14,17 @@ export default function Home() { const { drawioRef, handleDiagramExport } = useDiagram() const [isMobile, setIsMobile] = useState(false) const [isChatVisible, setIsChatVisible] = useState(true) - const [drawioUi, setDrawioUi] = useState<"min" | "sketch">(() => { - if (typeof window !== "undefined") { - const saved = localStorage.getItem("drawio-theme") - if (saved === "min" || saved === "sketch") return saved + const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min") + const [isThemeLoaded, setIsThemeLoaded] = useState(false) + + // Load theme from localStorage after mount to avoid hydration mismatch + useEffect(() => { + const saved = localStorage.getItem("drawio-theme") + if (saved === "min" || saved === "sketch") { + setDrawioUi(saved) } - return "min" - }) + setIsThemeLoaded(true) + }, []) const chatPanelRef = useRef(null) useEffect(() => { @@ -86,18 +90,24 @@ export default function Home() { }`} >
- + {isThemeLoaded ? ( + + ) : ( +
+
+
+ )}
diff --git a/lib/system-prompts.ts b/lib/system-prompts.ts index 7c2c08a..7efef90 100644 --- a/lib/system-prompts.ts +++ b/lib/system-prompts.ts @@ -3,12 +3,15 @@ * Extended prompt is used for models with higher cache token minimums (Opus 4.5, Haiku 4.5) */ -// Default system prompt (~1400 tokens) - works with all models +// Default system prompt (~2700 tokens) - works with all models 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 the image that user uploaded. +When you are asked to create a diagram, you must first tell user you plan in text first. Plan the layout and structure that can avoid object overlapping or edge cross the objects. +Then use display_diagram tool to generate the full draw.io XML for the entire diagram. + ## App Context You are an AI agent (powered by {{MODEL_NAME}}) inside a web app. The interface has: - **Left panel**: Draw.io diagram editor where diagrams are rendered @@ -51,6 +54,8 @@ Core capabilities: - Optimize element positioning to prevent overlapping and maintain readability - Structure complex systems into clear, organized visual components + + Layout constraints: - CRITICAL: Keep all diagram elements within a single page viewport to avoid page breaks - Position all elements with x coordinates between 0-800 and y coordinates between 0-600 @@ -82,6 +87,11 @@ When using edit_diagram tool: - For multiple changes, use separate edits in array - RETRY POLICY: If pattern not found, retry up to 3 times with adjusted patterns. After 3 failures, use display_diagram instead. +⚠️ CRITICAL JSON ESCAPING: When outputting edit_diagram tool calls, you MUST escape ALL double quotes inside string values: +- CORRECT: "y=\\"119\\"" (both quotes escaped) +- WRONG: "y="119\\"" (missing backslash before first quote - causes JSON parse error!) +- Every " inside a JSON string value needs \\" - no exceptions! + ## Draw.io XML Structure Reference Basic structure: @@ -119,9 +129,11 @@ Common styles: - Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex - Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle - Text: fontSize=14, fontStyle=1 (bold), align=center/left/right + ` -// Extended additions (~2600 tokens) - appended for models with 4000 token cache minimum +// Extended additions (~1800 tokens) - appended for models with 4000 token cache minimum +// Total EXTENDED_SYSTEM_PROMPT = ~4500 tokens const EXTENDED_ADDITIONS = ` ## Extended Tool Reference @@ -213,6 +225,11 @@ Copy the search pattern EXACTLY from the current XML, including leading spaces, **BAD:** \`{"search": ""}\` - Uses unique id with full context +### ⚠️ JSON Escaping (CRITICAL) +Every double quote inside JSON string values MUST be escaped with backslash: +- **CORRECT:** \`"x=\\"100\\" y=\\"200\\""\` - both quotes escaped +- **WRONG:** \`"x=\\"100\\" y="200\\""\` - missing backslash causes JSON parse error! + ### Error Recovery If edit_diagram fails with "pattern not found": 1. **First retry**: Check attribute order - copy EXACTLY from current XML @@ -220,81 +237,97 @@ If edit_diagram fails with "pattern not found": 3. **Third retry**: Try matching on just \` - + + - - + + \`\`\` -## Example: Complete Flowchart - +### Edge with single waypoint (simple detour): \`\`\`xml - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + \`\`\` -` + +### Edge with waypoints (routing AROUND obstacles) - CRITICAL PATTERN: +**Scenario:** Hotfix(right,bottom) → Main(center,top), but Develop(center,middle) is in between. +**WRONG:** Direct diagonal line crosses over Develop +**CORRECT:** Route around the OUTSIDE (go right first, then up) +\`\`\`xml + + + + + + + + +\`\`\` +This routes the edge to the RIGHT of all shapes (x=750), then enters Main from the right side. + +**Key principle:** When connecting distant nodes diagonally, route along the PERIMETER of the diagram, not through the middle where other shapes exist.` // Extended system prompt = DEFAULT + EXTENDED_ADDITIONS export const EXTENDED_SYSTEM_PROMPT = DEFAULT_SYSTEM_PROMPT + EXTENDED_ADDITIONS