Get Mermaid charts rendering

i-dot-ai · Oct 7, 2024 · c352003 · c352003
1 parent ae48696
commit c352003
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/django_app/frontend/package.json b/django_app/frontend/package.json
@@ -36,6 +36,10 @@
     {
       "distDir": "./dist/js/libs",
       "staticPath": "./src/js/libs"
+    },
+    {
+      "distDir": "./dist/js/libs/mermaid",
+      "staticPath": "./node_modules/mermaid/dist"
     }
   ],
   "scripts": {
@@ -46,6 +50,7 @@
   "dependencies": {
     "govuk-frontend": "^5.2.0",
     "i.ai-design-system": "^0.4.8",
+    "mermaid": "^11.2.1",
     "posthog-js": "^1.143.0"
   },
   "devDependencies": {
@@ -56,6 +61,7 @@
     "parcel-reporter-static-files-copy": "^1.5.3",
     "postcss": "^8.4.39",
     "postcss-url": "^10.1.3",
+    "process": "^0.11.10",
     "url": "^0.11.3"
   }
 }
diff --git a/django_app/frontend/src/js/web-components/chats/chat-message.js b/django_app/frontend/src/js/web-components/chats/chat-message.js
@@ -133,6 +133,7 @@ class ChatMessage extends HTMLElement {
     const stopStreaming = () => {
       this.dataset.status = "stopped";
       webSocket.close();
+      window["mermaid"]?.run();
     };
     this.addEventListener("keydown", (evt) => {
       if (evt.key === "Escape" && this.dataset.status === "streaming") {

diff --git a/django_app/redbox_app/settings.py b/django_app/redbox_app/settings.py
@@ -156,19 +156,20 @@
 CSP_SCRIPT_SRC = (
     "'self'",
     "'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw='",
+    "'sha256-TnW3b3osC+i1wd8tjlnl6QJOeYc4oc7edkmhziTLEfk='", # Mermaid
     "plausible.io",
     "eu.i.posthog.com",
     "eu-assets.i.posthog.com",
 )
 CSP_OBJECT_SRC = ("'none'",)
 CSP_REQUIRE_TRUSTED_TYPES_FOR = ("'script'",)
-CSP_TRUSTED_TYPES = ("dompurify", "default")
+CSP_TRUSTED_TYPES = ("dompurify", "default", "'allow-duplicates'")
 CSP_REPORT_TO = "csp-endpoint"
 CSP_FONT_SRC = (
     "'self'",
     "s3.amazonaws.com",
 )
-CSP_STYLE_SRC = ("'self'",)
+CSP_STYLE_SRC = ("'self'", "'unsafe-inline'") # TO DO: Not happy about this change - look at workarounds (KE)
 CSP_FRAME_ANCESTORS = ("'none'",)
 CSP_CONNECT_SRC = [
     "'self'",

diff --git a/django_app/redbox_app/templates/chats.html b/django_app/redbox_app/templates/chats.html
@@ -187,4 +187,16 @@ <h2 class="chat-title__heading govuk-visually-hidden" hidden>Current chat</h2>
 <script type="module" src="{{ static('js/chats.js') }}"></script>
 <script src="{{ static('js/libs/lottie.min.js') }}"></script>
 
+<script type="module">
+  import mermaid from '/static/js/libs/mermaid/mermaid.esm.min.mjs';
+  mermaid.initialize({
+    startOnLoad: true,
+    securityLevel: "loose",
+    flowchart: {
+      htmlLabels: false
+    }
+  });
+  window.mermaid = mermaid;
+</script>
+
 {% endblock %}