Adjust typing and error handling for incorrect diagrams

src/interface/web/app/components/mermaid/mermaid.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import mermaid from "mermaid";
+import { Info } from "@phosphor-icons/react";
 
 interface MermaidProps {
     chart: string;
@@ -18,8 +19,23 @@ const Mermaid: React.FC<MermaidProps> = ({ chart }) => {
         mermaid.parseError = (error) => {
             console.error("Mermaid errors:", error);
             // Extract error message from error object
-            const errorMessage = JSON.stringify(error);
-            setMermaidError(errorMessage);
+            // Parse error message safely
+            let errorMessage;
+            try {
+                errorMessage = typeof error === "string" ? JSON.parse(error) : error;
+            } catch (e) {
+                errorMessage = error?.toString() || "Unknown error";
+            }
+
+            console.log("Mermaid error message:", errorMessage);
+
+            if (errorMessage.str !== "element is null") {
+                setMermaidError(
+                    "Something went wrong while rendering the diagram. Please try again later or downvote the message if the issue persists.",
+                );
+            } else {
+                setMermaidError(null);
+            }
         };
 
         mermaid.contentLoaded();
@@ -37,30 +53,32 @@ const Mermaid: React.FC<MermaidProps> = ({ chart }) => {
                 .then(() => {
                     setMermaidError(null);
                 })
-                .catch((error) => {
-                    console.error("Mermaid error:", error);
-                    // Extract error message from error object
-                    const errorMessage = error?.str || error?.message || JSON.stringify(error);
-                    console.log("Mermaid error message:", errorMessage);
-                });
+                .catch((error) => {});
         }
     }, [chart]);
 
     return (
         <div>
-            <div
-                id={mermaidId}
-                ref={elementRef}
-                className="mermaid"
-                style={{
-                    width: "auto",
-                    height: "auto",
-                    boxSizing: "border-box",
-                    overflow: "auto",
-                }}
-            >
-                {chart}
-            </div>
+            {mermaidError ? (
+                <div className="flex items-center gap-2 bg-red-100 border border-red-500 rounded-md p-3 mt-3 text-red-900 text-sm">
+                    <Info className="w-12 h-12" />
+                    <span>Error rendering diagram: {mermaidError}</span>
+                </div>
+            ) : (
+                <div
+                    id={mermaidId}
+                    ref={elementRef}
+                    className="mermaid"
+                    style={{
+                        width: "auto",
+                        height: "auto",
+                        boxSizing: "border-box",
+                        overflow: "auto",
+                    }}
+                >
+                    {chart}
+                </div>
+            )}
         </div>
     );
 };