From 335114fd7eb5f45014a4b5d78dd7089cf7f990ea Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Sun, 28 Sep 2025 15:13:04 +0800
Subject: [PATCH] Add KaTeX mhchem extension support and improve math rendering

- Import mhchem globally
- Add TypeScript declarations
- Fix KaTeX overflow styling
- Change p tags to div in markdown
- Update tsconfig includes
---
 lightrag_webui/src/AppRouter.tsx                        | 1 +
 lightrag_webui/src/components/retrieval/ChatMessage.tsx | 4 ++--
 lightrag_webui/src/lib/extensions.ts                    | 4 ++++
 lightrag_webui/src/types/katex.d.ts                     | 1 +
 lightrag_webui/tsconfig.json                            | 2 +-
 5 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 lightrag_webui/src/lib/extensions.ts
 create mode 100644 lightrag_webui/src/types/katex.d.ts

diff --git a/lightrag_webui/src/AppRouter.tsx b/lightrag_webui/src/AppRouter.tsx
index e7130ad6..3d474d2a 100644
--- a/lightrag_webui/src/AppRouter.tsx
+++ b/lightrag_webui/src/AppRouter.tsx
@@ -1,3 +1,4 @@
+import '@/lib/extensions'; // Import all global extensions
 import { HashRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import { useAuthStore } from '@/stores/state'
diff --git a/lightrag_webui/src/components/retrieval/ChatMessage.tsx b/lightrag_webui/src/components/retrieval/ChatMessage.tsx
index 544b65c2..a3cba698 100644
--- a/lightrag_webui/src/components/retrieval/ChatMessage.tsx
+++ b/lightrag_webui/src/components/retrieval/ChatMessage.tsx
@@ -79,7 +79,7 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
         messageRole={message.role}
       />
     ),
-    p: ({ children }: { children?: ReactNode }) => <p className="my-2">{children}</p>,
+    p: ({ children }: { children?: ReactNode }) => <div className="my-2">{children}</div>,
     h1: ({ children }: { children?: ReactNode }) => <h1 className="text-xl font-bold mt-4 mb-2">{children}</h1>,
     h2: ({ children }: { children?: ReactNode }) => <h2 className="text-lg font-bold mt-4 mb-2">{children}</h2>,
     h3: ({ children }: { children?: ReactNode }) => <h3 className="text-base font-bold mt-3 mb-2">{children}</h3>,
@@ -160,7 +160,7 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
       {finalDisplayContent && (
         <div className="relative">
           <ReactMarkdown
-            className={`prose dark:prose-invert max-w-none text-sm break-words prose-headings:mt-4 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 [&_.katex]:text-current [&_.katex-display]:my-4 [&_.katex-display]:overflow-x-auto [&_sup]:text-[0.75em] [&_sup]:align-[0.1em] [&_sup]:leading-[0] [&_sub]:text-[0.75em] [&_sub]:align-[-0.2em] [&_sub]:leading-[0] [&_mark]:bg-yellow-200 [&_mark]:dark:bg-yellow-800 [&_u]:underline [&_del]:line-through [&_ins]:underline [&_ins]:decoration-green-500 [&_.footnotes]:mt-8 [&_.footnotes]:pt-4 [&_.footnotes]:border-t [&_.footnotes_ol]:text-sm [&_.footnotes_li]:my-1 ${
+            className={`prose dark:prose-invert max-w-none text-sm break-words prose-headings:mt-4 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 [&_.katex]:text-current [&_.katex-display]:my-4 [&_.katex-display]:max-w-full [&_.katex-display_>.base]:overflow-x-auto [&_sup]:text-[0.75em] [&_sup]:align-[0.1em] [&_sup]:leading-[0] [&_sub]:text-[0.75em] [&_sub]:align-[-0.2em] [&_sub]:leading-[0] [&_mark]:bg-yellow-200 [&_mark]:dark:bg-yellow-800 [&_u]:underline [&_del]:line-through [&_ins]:underline [&_ins]:decoration-green-500 [&_.footnotes]:mt-8 [&_.footnotes]:pt-4 [&_.footnotes]:border-t [&_.footnotes_ol]:text-sm [&_.footnotes_li]:my-1 ${
               message.role === 'user'
                 ? '[&_.footnotes]:border-primary-foreground/30 [&_a[href^="#fn"]]:text-primary-foreground [&_a[href^="#fn"]]:no-underline [&_a[href^="#fn"]]:hover:underline [&_a[href^="#fnref"]]:text-primary-foreground [&_a[href^="#fnref"]]:no-underline [&_a[href^="#fnref"]]:hover:underline'
                 : '[&_.footnotes]:border-border [&_a[href^="#fn"]]:text-primary [&_a[href^="#fn"]]:no-underline [&_a[href^="#fn"]]:hover:underline [&_a[href^="#fnref"]]:text-primary [&_a[href^="#fnref"]]:no-underline [&_a[href^="#fnref"]]:hover:underline'
diff --git a/lightrag_webui/src/lib/extensions.ts b/lightrag_webui/src/lib/extensions.ts
new file mode 100644
index 00000000..9e0de0ae
--- /dev/null
+++ b/lightrag_webui/src/lib/extensions.ts
@@ -0,0 +1,4 @@
+// This file is for importing libraries that have global side effects.
+
+// Load KaTeX mhchem extension globally
+import 'katex/contrib/mhchem';
diff --git a/lightrag_webui/src/types/katex.d.ts b/lightrag_webui/src/types/katex.d.ts
new file mode 100644
index 00000000..de362150
--- /dev/null
+++ b/lightrag_webui/src/types/katex.d.ts
@@ -0,0 +1 @@
+declare module 'katex/contrib/mhchem';
diff --git a/lightrag_webui/tsconfig.json b/lightrag_webui/tsconfig.json
index 86006fc1..3b340313 100644
--- a/lightrag_webui/tsconfig.json
+++ b/lightrag_webui/tsconfig.json
@@ -26,5 +26,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "vite.config.ts", "src/vite-env.d.ts"]
+  "include": ["src", "src/types", "vite.config.ts", "src/vite-env.d.ts"]
 }