feat: add markdown plugins remark-gfm remark-math rehype-katex

src/renderer/src/pages/home/components/Message.tsx

@@ -20,10 +20,8 @@ import dayjs from 'dayjs'
 import { isEmpty, upperFirst } from 'lodash'
 import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Markdown from 'react-markdown'
 import styled from 'styled-components'
-import CodeBlock from './CodeBlock'
-import Link from './Link'
+import Markdown from './markdown/Markdown'
 
 interface Props {
   message: Message
@@ -136,11 +134,7 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
             <SyncOutlined spin size={24} />
           </MessageContentLoading>
         )}
-        {message.status !== 'sending' && (
-          <Markdown className="markdown" components={{ code: CodeBlock as any, a: Link as any }}>
-            {getMessageContent(message)}
-          </Markdown>
-        )}
+        {message.status !== 'sending' && <Markdown message={message} />}
         {message.usage && !generating && (
           <MessageMetadata>
             Tokens: {message.usage.total_tokens} | ↑{message.usage.prompt_tokens}↓{message.usage.completion_tokens}

src/renderer/src/pages/home/components/markdown/CodeBlock.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { atomDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'
-import Mermaid from './Mermaid'
+import Mermaid from '../Mermaid'
 
 interface CodeBlockProps {
   children: string

src/renderer/src/pages/home/components/markdown/Markdown.tsx

@@ -0,0 +1,42 @@
+import { FC, useCallback, useMemo } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Message } from '@renderer/types'
+import { isEmpty } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import CodeBlock from './CodeBlock'
+import Link from './Link'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+import 'katex/dist/katex.min.css'
+
+interface Props {
+  message: Message
+}
+
+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]
+  )
+
+  return useMemo(() => {
+    return (
+      <ReactMarkdown
+        className="markdown"
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex]}
+        components={{ code: CodeBlock as any, a: Link as any }}>
+        {getMessageContent(message)}
+      </ReactMarkdown>
+    )
+  }, [getMessageContent, message])
+}
+
+export default Markdown