Feature mermaid rendering

.gitignore

@@ -35,3 +35,4 @@ next-env.d.ts
 .azure/
 infra/aad_setup.sh
 .vscode
+infra/main.parameters.example.json

src/features/chat-page/mermaid-diagram.tsx

@@ -0,0 +1,53 @@
+import mermaid from "mermaid";
+import { useEffect, useRef } from "react";
+import { Button } from "@/features/ui/button";  // Import your custom Button component
+
+mermaid.initialize({});
+
+const MermaidComponent = ({ source, id }: { source: string; id: string }) => {
+    const mermaidRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const initializeMermaid = async () => {
+            if (mermaidRef.current) {
+                mermaidRef.current.innerHTML = source;
+                const { svg, bindFunctions } = await mermaid.render(`mermaid-diagram-${id}`, source);
+                mermaidRef.current.innerHTML = svg;
+                bindFunctions?.(mermaidRef.current);
+            }
+        };
+
+        initializeMermaid();
+
+        // Clean up mermaid instance when unmounting; doing nothing at the moment
+        return () => {};
+    }, [source]);
+
+    const downloadSVG = () => {
+        if (mermaidRef.current) {
+            const svgContent = mermaidRef.current.innerHTML;
+            const blob = new Blob([svgContent], { type: "image/svg+xml" });
+            const url = URL.createObjectURL(blob);
+
+            const downloadLink = document.createElement("a");
+            downloadLink.href = url;
+            downloadLink.download = `${id}.svg`;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+
+            URL.revokeObjectURL(url);
+        }
+    };
+
+    return (
+        <div>
+            <div id={id} ref={mermaidRef}></div>
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}>
+                <Button variant="outline" onClick={downloadSVG}>Download SVG</Button>
+            </div>
+        </div>
+    );
+};
+
+export default MermaidComponent;

src/features/chat-page/message-content.tsx

@@ -1,6 +1,7 @@
 import { Markdown } from "@/features/ui/markdown/markdown";
 import { FunctionSquare } from "lucide-react";
-import React from "react";
+import React, { useMemo } from "react";
+
 import {
   Accordion,
   AccordionContent,
@@ -9,6 +10,8 @@ import {
 } from "../ui/accordion";
 import { RecursiveUI } from "../ui/recursive-ui";
 import { CitationAction } from "./citation/citation-action";
+import MermaidComponent from "./mermaid-diagram";
+
 
 interface MessageContentProps {
   message: {
@@ -20,14 +23,28 @@ interface MessageContentProps {
 }
 
 const MessageContent: React.FC<MessageContentProps> = ({ message }) => {
+  const getMermaidCode = (content: string): string | null => {
+    const mermaidRegex = /```mermaid((.*\n)+?)```/; // Adjust regex based on how Mermaid diagrams are identified
+    const match = content.match(mermaidRegex);
+    return match ? match[1] : null;
+  };
+
   if (message.role === "assistant" || message.role === "user") {
+    const mermaidCode = getMermaidCode(message.content);
+    const mermaidDiagramId = useMemo(() => `mermaid-${Date.now()}`, []); // Generate a unique ID
+
     return (
       <>
-        <Markdown
-          content={message.content}
-          onCitationClick={CitationAction}
-        ></Markdown>
-        {message.multiModalImage && <img src={message.multiModalImage} />}
+        {/* Render message content and optionally a mermaid diagram */}
+        <Markdown content={message.content} onCitationClick={CitationAction} />
+        {mermaidCode && (
+          <>
+            <br />
+            {/* Render Mermaid diagram with the extracted code and unique ID */}
+            <MermaidComponent source={mermaidCode.trim()} id={mermaidDiagramId} />
+          </>
+        )}
+        {message.multiModalImage && <img src={message.multiModalImage} alt="Multimodal" />}
       </>
     );
   }
@@ -72,3 +89,4 @@ const toJson = (value: string) => {
 };
 
 export default MessageContent;
+