Fix: Fixed an issue where math formulas could not be displayed correctly #4405 (#4506)

### What problem does this PR solve?

[remarkjs/react-markdown/issues/785](https://github.com/remarkjs/react-markdown/issues/785)
Fix: Fixed an issue where math formulas could not be displayed correctly
#4405

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/highlight-markdown/index.tsx

@@ -8,6 +8,7 @@ import remarkMath from 'remark-math';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
+import { preprocessLaTeX } from '@/utils/chat';
 import styles from './index.less';
 
 const HightLightMarkdown = ({
@@ -43,7 +44,7 @@ const HightLightMarkdown = ({
         } as any
       }
     >
-      {children}
+      {children ? preprocessLaTeX(children) : children}
     </Markdown>
   );
 };

web/src/pages/chat/markdown-content/index.tsx

@@ -20,7 +20,9 @@ import { useTranslation } from 'react-i18next';
 
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
+import { preprocessLaTeX } from '@/utils/chat';
 import { replaceTextByOldReg } from '../utils';
+
 import styles from './index.less';
 
 const reg = /(~{2}\d+={2})/g;
@@ -48,7 +50,7 @@ const MarkdownContent = ({
       text = t('chat.searching');
     }
     const nextText = replaceTextByOldReg(text);
-    return loading ? nextText?.concat('~~2$$') : nextText;
+    return loading ? nextText?.concat('~~2$$') : preprocessLaTeX(nextText);
   }, [content, loading, t]);
 
   useEffect(() => {

web/src/utils/chat.ts

@@ -34,3 +34,18 @@ export const buildMessageUuidWithRole = (
 ) => {
   return `${message.role}_${message.id}`;
 };
+
+// Preprocess LaTeX equations to be rendered by KaTeX
+// ref: https://github.com/remarkjs/react-markdown/issues/785
+
+export const preprocessLaTeX = (content: string) => {
+  const blockProcessedContent = content.replace(
+    /\\\[([\s\S]*?)\\\]/g,
+    (_, equation) => `$$${equation}$$`,
+  );
+  const inlineProcessedContent = blockProcessedContent.replace(
+    /\\\(([\s\S]*?)\\\)/g,
+    (_, equation) => `$${equation}$`,
+  );
+  return inlineProcessedContent;
+};