Made diagramming working using kroki.io

Author: preeesha

ai-assistant/package.json

@@ -6,10 +6,9 @@
         "@rocket.chat/apps-cli": "^1.11.1",
         "@rocket.chat/apps-engine": "^1.19.0",
         "@types/node": "14.14.6",
+        "esbuild": "^0.19.4",
         "tslint": "^5.10.0",
         "tsx": "^4.17.0",
-        "typescript": "^4.0.5",
-        "esbuild": "^0.19.4"
-    },
-    "dependencies": {}
-}
+        "typescript": "^4.0.5"
+    }
+}

ai-assistant/src/commands/DiagramCommand.ts

@@ -8,10 +8,10 @@ import {
     SlashCommandContext,
 } from "@rocket.chat/apps-engine/definition/slashcommands";
 
-import { Neo4j } from "../core/services/db/neo4j";
-// import { renderDiagramToBase64URI } from "../core/diagram";
+import { renderDiagramToBase64URI } from "../core/diagram";
 import { PromptFactory } from "../core/prompt.factory";
 import { Query } from "../core/query";
+import { Neo4j } from "../core/services/db/neo4j";
 import { MiniLML6 } from "../core/services/embeddings/minilml6";
 import { Llama3_70B } from "../core/services/llm/llama3_70B";
 import { handleCommandResponse } from "../utils/handleCommandResponse";
@@ -61,19 +61,21 @@ export class DiagramCommand implements ISlashCommand {
                 query
             )
         );
-        console.log(diagram);
         if (!diagram) return null;
 
+        // @ts-ignore
         const diagramContent = diagram
             .replace("```mermaid", "")
             .replace("```", "")
             .split("<DIAGRAM_START>")[1]
             .split("<DIAGRAM_END>")[0]
             .trim();
-        console.log("DIAGRAM:\n", diagramContent);
 
-        // const base64Diagram = await renderDiagramToBase64URI(diagramContent);
-        return "";
+        const base64Diagram = await renderDiagramToBase64URI(
+            http,
+            diagramContent
+        );
+        return base64Diagram;
     }
 
     public async executor(

ai-assistant/src/core/diagram.ts

@@ -1,47 +1,33 @@
-export default {}
-// import { exec } from "child_process";
-// // import { randomUUID } from "crypto"
-// import { unlinkSync, writeFileSync } from "fs";
+import { IHttp } from "@rocket.chat/apps-engine/definition/accessors";
 
-// export async function renderDiagramToBase64URI(
-//     diagram: string
-// ): Promise<string> {
-//     const diagramID = "diagram";
-//     // ?? randomUUID()
-//     const diagramSourceFileName = `${diagramID}.txt`;
-//     const diagramSVGFileName = `${diagramID}.svg`;
+export async function renderDiagramToBase64URI(
+    http: IHttp,
+    source: string
+): Promise<string> {
+    source = source.trim();
 
-//     writeFileSync(diagramSourceFileName, diagram);
+    let svgContent = "";
+    try {
+        const response = await http.post("https://kroki.io", {
+            headers: {
+                Accept: "image/svg+xml",
+                "Content-Type": "text/json",
+            },
+            content: JSON.stringify({
+                diagram_source: source,
+                diagram_type: "mermaid",
+                output_format: "svg",
+            }),
+        });
+        svgContent = response.content as string;
+    } catch (error) {
+        console.error("Error while rendering diagram", error);
+        return "";
+    }
 
-//     await new Promise<void>((resolve, reject) => {
-//         const diagram = exec(
-//             `npx mmdc -i ${diagramSourceFileName} -o ${diagramSVGFileName}`,
-//             {
-//                 cwd: process.cwd(),
-//                 timeout: 10000,
-//             }
-//         );
+    console.log(svgContent);
 
-//         diagram.on("exit", async (code) => {
-//             //			unlinkSync(diagramSourceFileName)
-//             if (code === 0) {
-//                 resolve();
-//             } else {
-//                 console.log(`Error: ${code}`);
-//                 reject();
-//             }
-//         });
-//     });
-
-//     const base64 = await new Promise<string>((resolve, reject) => {
-//         exec(`base64 ${diagramSVGFileName}`, async (err, stdout) => {
-//             unlinkSync(diagramSVGFileName);
-//             if (err) reject(err);
-//             resolve(stdout);
-//         });
-//     });
-
-//     const uri = `data:image/svg+xml;base64,${base64.trim()}`;
-
-//     return uri;
-// }
+    const svgContentBase64 = Buffer.from(svgContent).toString("base64");
+    const uri = `data:image/svg+xml;base64,${svgContentBase64}`;
+    return uri;
+}