diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index 15440f9..d2f57b6 100644 --- a/app/api/chat/route.ts +++ b/app/api/chat/route.ts @@ -282,13 +282,31 @@ Notes: }, edit_diagram: { description: `Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML. -CRITICAL: Copy-paste the EXACT search pattern from the "Current diagram XML" in system context. Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly. -IMPORTANT: Keep edits concise: -- COPY the exact mxCell line from the current XML (attribute order matters!) -- Only include the lines that are changing, plus 1-2 surrounding lines for context if needed -- Break large changes into multiple smaller edits -- Each search must contain complete lines (never truncate mid-line) -- First match only - be specific enough to target the right element`, + +WHEN TO USE: +- Changing text labels or values +- Modifying colors, styles, or visual properties +- Adding or removing individual elements (1-3 elements) +- Repositioning specific elements +- Any small, targeted modification + +WHEN TO USE display_diagram INSTEAD: +- Creating a new diagram from scratch +- Major restructuring (reorganizing layout, changing diagram type) +- Adding many new elements (more than 3) +- After 3 failed edit_diagram attempts + +CRITICAL RULES: +1. Copy-paste the EXACT search pattern from the "Current diagram XML" in system context +2. Do NOT reorder attributes - attribute order in draw.io XML varies, you MUST match exactly +3. Always include the element's id attribute for unique targeting +4. Include complete lines (never truncate mid-line) +5. For multiple changes, use separate edits in the array + +ERROR RECOVERY: +- If pattern not found, check attribute order matches current XML exactly +- Retry up to 3 times with adjusted patterns +- After 3 failures, use display_diagram instead`, inputSchema: z.object({ edits: z.array(z.object({ search: z.string().describe("EXACT lines copied from current XML (preserve attribute order!)"), diff --git a/lib/system-prompts.ts b/lib/system-prompts.ts index de654be..3bc90fa 100644 --- a/lib/system-prompts.ts +++ b/lib/system-prompts.ts @@ -9,6 +9,20 @@ You are an expert diagram creation assistant specializing in draw.io XML generat 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. +## 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 +- **Right panel**: Chat interface where you communicate with the user + +You can read and modify diagrams by generating draw.io XML code through tool calls. + +## App Features +1. **Diagram History** (clock icon, bottom-left of chat input): The app automatically saves a snapshot before each AI edit. Users can view the history panel and restore any previous version. Feel free to make changes - nothing is permanently lost. +2. **Theme Toggle** (palette icon, bottom-left of chat input): Users can switch between minimal UI and sketch-style UI for the draw.io editor. +3. **Image Upload** (paperclip icon, bottom-left of chat input): Users can upload images for you to analyze and replicate as diagrams. +4. **Export** (via draw.io toolbar): Users can save diagrams as .drawio, .svg, or .png files. +5. **Clear Chat** (trash icon, bottom-right of chat input): Clears the conversation and resets the diagram. + You utilize the following tools: ---Tool1--- tool name: display_diagram @@ -113,6 +127,20 @@ You are an expert diagram creation assistant specializing in draw.io XML generat Your primary function is to chat with user and craft clear, well-organized visual diagrams through precise XML specifications. You can see images that users upload and can replicate or modify them as diagrams. +## 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 +- **Right panel**: Chat interface where you communicate with the user + +You can read and modify diagrams by generating draw.io XML code through tool calls. + +## App Features +1. **Diagram History** (clock icon, bottom-left of chat input): The app automatically saves a snapshot before each AI edit. Users can view the history panel and restore any previous version. Feel free to make changes - nothing is permanently lost. +2. **Theme Toggle** (palette icon, bottom-left of chat input): Users can switch between minimal UI and sketch-style UI for the draw.io editor. +3. **Image Upload** (paperclip icon, bottom-left of chat input): Users can upload images for you to analyze and replicate as diagrams. +4. **Export** (via draw.io toolbar): Users can save diagrams as .drawio, .svg, or .png files. +5. **Clear Chat** (trash icon, bottom-right of chat input): Clears the conversation and resets the diagram. + ## Available Tools ### Tool 1: display_diagram @@ -507,10 +535,16 @@ const EXTENDED_PROMPT_MODEL_PATTERNS = [ * @returns The system prompt string */ export function getSystemPrompt(modelId?: string): string { + const modelName = modelId || "AI"; + + let prompt: string; if (modelId && EXTENDED_PROMPT_MODEL_PATTERNS.some(pattern => modelId.includes(pattern))) { console.log(`[System Prompt] Using EXTENDED prompt for model: ${modelId}`); - return EXTENDED_SYSTEM_PROMPT; + prompt = EXTENDED_SYSTEM_PROMPT; + } else { + console.log(`[System Prompt] Using DEFAULT prompt for model: ${modelId || 'unknown'}`); + prompt = DEFAULT_SYSTEM_PROMPT; } - console.log(`[System Prompt] Using DEFAULT prompt for model: ${modelId || 'unknown'}`); - return DEFAULT_SYSTEM_PROMPT; + + return prompt.replace("{{MODEL_NAME}}", modelName); }