feat : add support for math / science symbology via katex (#5773)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>

ui/desktop/src/components/MarkdownContent.tsx

@@ -2,6 +2,9 @@ import React, { useState, useEffect, useRef, memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 // Improved oneDark theme for better comment contrast and readability
@@ -177,7 +180,17 @@ const MarkdownContent = memo(function MarkdownContent({
       prose-li:m-0 prose-li:font-sans ${className}`}
     >
       <ReactMarkdown
-        remarkPlugins={[remarkGfm, remarkBreaks]}
+        remarkPlugins={[remarkGfm, remarkBreaks, remarkMath]}
+        rehypePlugins={[
+          [
+            rehypeKatex,
+            {
+              throwOnError: false,
+              errorColor: '#cc0000',
+              strict: false,
+            },
+          ],
+        ]}
         components={{
           a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
           code: MarkdownCode,

ui/desktop/src/styles/main.css

@@ -767,3 +767,34 @@ p > code.bg-inline-code {
 .animate-shimmer {
   animation: shimmer 6s ease-in-out infinite;
 }
+
+/* KaTeX Math Rendering */
+
+.prose .katex {
+  font-size: 1.05em;
+  color: inherit;
+}
+
+.katex-display {
+  margin: 0.75em 0;
+  padding: 1em;
+  background-color: var(--background-muted);
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  text-align: center;
+}
+
+.katex-display .katex {
+  color: var(--color-neutral-800);
+}
+
+.dark .katex-display .katex {
+  color: #e6e6e6;
+}
+
+.katex-error {
+  color: var(--text-danger);
+}