feat: add system message for flowchart assistance and improve message handling in chat API

app/api/chat/route.ts

@@ -15,7 +15,24 @@ interface ToolContext {
 }
 
 export async function POST(req: Request) {
-  const { messages } = await req.json();
+  let { messages } = await req.json();
+  const systemMessage = `
+  You are a helpful assistant that can create, edit, and display flowcharts using draw.io.
+  You can use the following tools:
+  - display_flow_chart: Display a flowchart on draw.io.
+  - fetch_flow_chart: Get the current flowchart XML from draw.io.
+  You can use the tools to create and manipulate flowcharts.
+  You can also answer questions and provide explanations.
+  `;
+  if (messages.length === 1) {
+    messages = [
+      {
+        "role": "system",
+        "content": systemMessage,
+      },
+      ...messages,
+    ];
+  }
   const response = streamText({
     model: google("gemini-2.0-flash"),
     messages,

app/extract_xml.ts

@@ -11,7 +11,6 @@ export function extractDiagramXML(xml_svg_string: string): string {
         if (!svgElement) {
             throw new Error("No SVG element found in the input string.");
         }
-        console.log("svgElement", svgElement);
         // 2. Extract the 'content' attribute
         const encodedContent = svgElement.getAttribute('content');
 
@@ -34,10 +33,8 @@ export function extractDiagramXML(xml_svg_string: string): string {
         if (!diagramElement) {
             throw new Error("No diagram element found");
         }
-        console.log("diagramElement", diagramElement);
         // 5. Extract base64 encoded data
         const base64EncodedData = diagramElement.textContent;
-        console.log("base64EncodedData", base64EncodedData);
 
         if (!base64EncodedData) {
             throw new Error("No encoded data found in the diagram element");

app/page.tsx

@@ -16,6 +16,7 @@ export default function Home() {
                 format: "xmlsvg",
             });
         }
+        console.log("chartXML from page", chartXML);
     };
 
     const loadDiagram = (chart: string) => {
@@ -40,11 +41,15 @@ export default function Home() {
                     }}
                 />
             </div>
+            <Button
+                onClick={handleExport}
+            >export </Button>
             <div className="w-1/3 p-1 border-gray-300">
                 <ChatPanel
                     onDisplayChart={(xml) => loadDiagram(xml)}
                     onFetchChart={() => {
                         handleExport();
+                        console.log("chartXML from page", chartXML);
                         return chartXML;
                     }}
                 />