Merge branch 'bot_ui_mermaid_diagram' into 'master'

Bot UI: Render mermaid diagram

See merge request postgres-ai/database-lab!904

Author: NikolayS

ui/packages/platform/package.json

@@ -51,6 +51,7 @@
     "jwt-encode": "^1.0.1",
     "lodash": "^4.17.15",
     "md5": "^2.2.1",
+    "mermaid": "^11.0.2",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
     "moment": "^2.24.0",

ui/packages/platform/src/pages/Bot/Messages/Message/MermaidDiagram.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import mermaid from 'mermaid';
+
+type MermaidDiagramProps = {
+  chart: string
+}
+
+export const MermaidDiagram = React.memo((props: MermaidDiagramProps) => {
+  const { chart } = props;
+  mermaid.initialize({ startOnLoad: true });
+  useEffect(() => {
+    mermaid.contentLoaded();
+  }, [chart]);
+  return <div className="mermaid">{chart}</div>;
+})

ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx

@@ -10,6 +10,7 @@ import { DebugDialog } from "../../DebugDialog/DebugDialog";
 import { CodeBlock } from "./CodeBlock";
 import { disallowedHtmlTagsForMarkdown, permalinkLinkBuilder } from "../../utils";
 import { StateMessage } from "../../../../types/api/entities/bot";
+import { MermaidDiagram } from "./MermaidDiagram";
 
 
 type BaseMessageProps = {
@@ -275,11 +276,17 @@ export const Message = React.memo((props: MessageProps) => {
     img: ({ node, ...props }) => <img style={{ maxWidth: '60%' }} {...props} />,
     code: ({ node, inline, className, children, ...props }) => {
       const match = /language-(\w+)/.exec(className || '');
-      return !inline ? (
-        <CodeBlock value={String(children).replace(/\n$/, '')} language={match?.[1]} />
-      ) : (
-        <code {...props}>{children}</code>
-      );
+      const matchMermaid = /language-mermaid/.test(className || '');
+      if (!inline) {
+        return (
+          <>
+            {matchMermaid && <MermaidDiagram chart={String(children).replace(/\n$/, '')} />}
+            <CodeBlock value={String(children).replace(/\n$/, '')} language={match?.[1]} />
+          </>
+        )
+      } else {
+        return <code {...props}>{children}</code>
+      }
     },
   }), []);