feat: support Latex (#5001)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/base/markdown.tsx

@@ -39,6 +39,11 @@ const getCorrectCapitalizationLanguageName = (language: string) => {
 
   return language.charAt(0).toUpperCase() + language.substring(1)
 }
+
+const preprocessLaTeX = (content: string) =>
+  content.replace(/\\\[(.*?)\\\]/gs, (_, equation) => `$$${equation}$$`)
+    .replace(/\\\((.*?)\\\)/gs, (_, equation) => `$${equation}$`)
+
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null)
 
@@ -82,12 +87,13 @@ const useLazyLoad = (ref: RefObject<Element>): boolean => {
 
 export function Markdown(props: { content: string; className?: string }) {
   const [isSVG, setIsSVG] = useState(false)
+  const latexContent = preprocessLaTeX(props.content)
   return (
     <div className={cn(props.className, 'markdown-body')}>
       <ReactMarkdown
         remarkPlugins={[[RemarkMath, { singleDollarTextMath: false }], RemarkGfm, RemarkBreaks]}
         rehypePlugins={[
-          RehypeKatex,
+          RehypeKatex as any,
         ]}
         components={{
           code({ inline, className, children, ...props }) {
@@ -179,7 +185,7 @@ export function Markdown(props: { content: string; className?: string }) {
         linkTarget='_blank'
       >
         {/* Markdown detect has problem. */}
-        {props.content}
+        {latexContent}
       </ReactMarkdown>
     </div>
   )