From 8a0e2890dd44efe55ba9368f865aac49475bcdfb Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 4 Aug 2024 13:23:35 +0800
Subject: [PATCH] fix: math code format

---
 .../home/components/markdown/Markdown.tsx     | 23 +++++++++----------
 src/renderer/src/utils/index.ts               |  5 ++++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/pages/home/components/markdown/Markdown.tsx b/src/renderer/src/pages/home/components/markdown/Markdown.tsx
index 91b81159..44871830 100644
--- a/src/renderer/src/pages/home/components/markdown/Markdown.tsx
+++ b/src/renderer/src/pages/home/components/markdown/Markdown.tsx
@@ -1,8 +1,9 @@
 import 'katex/dist/katex.min.css'
 
 import { Message } from '@renderer/types'
+import { convertMathFormula } from '@renderer/utils'
 import { isEmpty } from 'lodash'
-import { FC, useCallback, useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
@@ -19,31 +20,29 @@ interface Props {
 const Markdown: FC<Props> = ({ message }) => {
   const { t } = useTranslation()
 
-  const getMessageContent = useCallback(
-    (message: Message) => {
-      const empty = isEmpty(message.content)
-      const paused = message.status === 'paused'
-      return empty && paused ? t('message.chat.completion.paused') : message.content
-    },
-    [t]
-  )
+  const messageContent = useMemo(() => {
+    const empty = isEmpty(message.content)
+    const paused = message.status === 'paused'
+    const content = empty && paused ? t('message.chat.completion.paused') : message.content
+    return convertMathFormula(content)
+  }, [message.content, message.status, t])
 
   return useMemo(() => {
     return (
       <ReactMarkdown
         className="markdown"
+        rehypePlugins={[rehypeKatex]}
         remarkPlugins={[[remarkMath, { singleDollarTextMath: false }], remarkGfm]}
         remarkRehypeOptions={{
           footnoteLabel: t('common.footnotes'),
           footnoteLabelTagName: 'h4',
           footnoteBackContent: ' '
         }}
-        rehypePlugins={[rehypeKatex]}
         components={{ code: CodeBlock as any, a: Link as any }}>
-        {getMessageContent(message)}
+        {messageContent}
       </ReactMarkdown>
     )
-  }, [getMessageContent, message, t])
+  }, [messageContent, t])
 }
 
 export default Markdown
diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts
index 5106b364..d495c59b 100644
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@@ -225,3 +225,8 @@ export function loadScript(url: string) {
     document.head.appendChild(script)
   })
 }
+
+export function convertMathFormula(input) {
+  // 使用正则表达式匹配并替换公式格式
+  return input.replaceAll(/\\\[/g, '$$$$').replaceAll(/\\\]/g, '$$$$')
+}