From 51ce74400dfadbe718f388d29f232cbbcca996ec Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Wed, 19 Mar 2025 08:40:08 +0000
Subject: [PATCH] feat: add system message for flowchart assistance and improve
 message handling in chat API

---
 app/api/chat/route.ts | 19 ++++++++++++++++++-
 app/extract_xml.ts    |  3 ---
 app/page.tsx          |  5 +++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 69538f2..cd42b00 100644
--- a/app/api/chat/route.ts
+++ b/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,
diff --git a/app/extract_xml.ts b/app/extract_xml.ts
index 6c7132c..2630060 100644
--- a/app/extract_xml.ts
+++ b/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");
diff --git a/app/page.tsx b/app/page.tsx
index b2fbb09..0bbffd4 100644
--- a/app/page.tsx
+++ b/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;
                     }}
                 />