From 49d0acd18846b44497f4384e50911fdc384f6cdf Mon Sep 17 00:00:00 2001
From: Hao Cheng <hcheng636@gmail.com>
Date: Tue, 11 Mar 2025 05:40:55 +0100
Subject: [PATCH] fix: replace old-style <br> tags to fix Mermaid rendering
 issues (#13792)

---
 web/app/components/base/mermaid/index.tsx     | 3 ++-
 web/app/components/base/mermaid/utils.spec.ts | 8 ++++++++
 web/app/components/base/mermaid/utils.ts      | 3 +++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/mermaid/utils.spec.ts
 create mode 100644 web/app/components/base/mermaid/utils.ts

diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index af5c010ac2..8e8296697e 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -3,6 +3,7 @@ import mermaid from 'mermaid'
 import { usePrevious } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import { cleanUpSvgCode } from './utils'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import cn from '@/utils/classnames'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
@@ -44,7 +45,7 @@ const Flowchart = React.forwardRef((props: {
     try {
       if (typeof window !== 'undefined' && mermaidAPI) {
         const svgGraph = await mermaidAPI.render('flowchart', PrimitiveCode)
-        const base64Svg: any = await svgToBase64(svgGraph.svg)
+        const base64Svg: any = await svgToBase64(cleanUpSvgCode(svgGraph.svg))
         setSvgCode(base64Svg)
         setIsLoading(false)
       }
diff --git a/web/app/components/base/mermaid/utils.spec.ts b/web/app/components/base/mermaid/utils.spec.ts
new file mode 100644
index 0000000000..6ea7f17bfa
--- /dev/null
+++ b/web/app/components/base/mermaid/utils.spec.ts
@@ -0,0 +1,8 @@
+import { cleanUpSvgCode } from './utils'
+
+describe('cleanUpSvgCode', () => {
+  it('replaces old-style <br> tags with the new style', () => {
+    const result = cleanUpSvgCode('<br>test<br>')
+    expect(result).toEqual('<br/>test<br/>')
+  })
+})
diff --git a/web/app/components/base/mermaid/utils.ts b/web/app/components/base/mermaid/utils.ts
new file mode 100644
index 0000000000..1f07690cea
--- /dev/null
+++ b/web/app/components/base/mermaid/utils.ts
@@ -0,0 +1,3 @@
+export function cleanUpSvgCode(svgCode: string): string {
+  return svgCode.replaceAll('<br>', '<br/>')
+}