From 20c9f1a78346a58d7700b9c15e10d74ecdb09c5a Mon Sep 17 00:00:00 2001
From: andresgit <9771158+andresgit@users.noreply.github.com>
Date: Tue, 6 May 2025 17:50:09 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Improve=20KaTeX=20Rende?=
 =?UTF-8?q?ring=20for=20LaTeX=20Equations=20(#7223)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Artifacts/Code.tsx                     | 2 +-
 client/src/components/Chat/Messages/Content/Markdown.tsx     | 2 +-
 client/src/components/Chat/Messages/Content/MarkdownLite.tsx | 2 +-
 client/src/components/Prompts/Groups/VariableForm.tsx        | 2 +-
 client/src/components/Prompts/PromptDetails.tsx              | 2 +-
 client/src/components/Prompts/PromptEditor.tsx               | 2 +-
 client/src/main.jsx                                          | 1 +
 7 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Artifacts/Code.tsx b/client/src/components/Artifacts/Code.tsx
index de92c4c0da..21db2055d7 100644
--- a/client/src/components/Artifacts/Code.tsx
+++ b/client/src/components/Artifacts/Code.tsx
@@ -35,7 +35,7 @@ export const CodeMarkdown = memo(
     const [userScrolled, setUserScrolled] = useState(false);
     const currentContent = content;
     const rehypePlugins = [
-      [rehypeKatex, { output: 'mathml' }],
+      [rehypeKatex],
       [
         rehypeHighlight,
         {
diff --git a/client/src/components/Chat/Messages/Content/Markdown.tsx b/client/src/components/Chat/Messages/Content/Markdown.tsx
index c0664adfe7..d668405d5d 100644
--- a/client/src/components/Chat/Messages/Content/Markdown.tsx
+++ b/client/src/components/Chat/Messages/Content/Markdown.tsx
@@ -184,7 +184,7 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
 
   const rehypePlugins = useMemo(
     () => [
-      [rehypeKatex, { output: 'mathml' }],
+      [rehypeKatex],
       [
         rehypeHighlight,
         {
diff --git a/client/src/components/Chat/Messages/Content/MarkdownLite.tsx b/client/src/components/Chat/Messages/Content/MarkdownLite.tsx
index b92ab2e7ce..972395c425 100644
--- a/client/src/components/Chat/Messages/Content/MarkdownLite.tsx
+++ b/client/src/components/Chat/Messages/Content/MarkdownLite.tsx
@@ -13,7 +13,7 @@ import { langSubset } from '~/utils';
 const MarkdownLite = memo(
   ({ content = '', codeExecution = true }: { content?: string; codeExecution?: boolean }) => {
     const rehypePlugins: PluggableList = [
-      [rehypeKatex, { output: 'mathml' }],
+      [rehypeKatex],
       [
         rehypeHighlight,
         {
diff --git a/client/src/components/Prompts/Groups/VariableForm.tsx b/client/src/components/Prompts/Groups/VariableForm.tsx
index f89e7c3e3f..2b2eba7f62 100644
--- a/client/src/components/Prompts/Groups/VariableForm.tsx
+++ b/client/src/components/Prompts/Groups/VariableForm.tsx
@@ -146,7 +146,7 @@ export default function VariableForm({
             remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
             rehypePlugins={[
               /** @ts-ignore */
-              [rehypeKatex, { output: 'mathml' }],
+              [rehypeKatex],
               /** @ts-ignore */
               [rehypeHighlight, { ignoreMissing: true }],
             ]}
diff --git a/client/src/components/Prompts/PromptDetails.tsx b/client/src/components/Prompts/PromptDetails.tsx
index c2647cbba2..e686386417 100644
--- a/client/src/components/Prompts/PromptDetails.tsx
+++ b/client/src/components/Prompts/PromptDetails.tsx
@@ -59,7 +59,7 @@ const PromptDetails = ({ group }: { group?: TPromptGroup }) => {
                 ]}
                 rehypePlugins={[
                   /** @ts-ignore */
-                  [rehypeKatex, { output: 'mathml' }],
+                  [rehypeKatex],
                   /** @ts-ignore */
                   [rehypeHighlight, { ignoreMissing: true }],
                 ]}
diff --git a/client/src/components/Prompts/PromptEditor.tsx b/client/src/components/Prompts/PromptEditor.tsx
index 5227f934f3..7db89c7078 100644
--- a/client/src/components/Prompts/PromptEditor.tsx
+++ b/client/src/components/Prompts/PromptEditor.tsx
@@ -43,7 +43,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
   }, [isEditing, prompt]);
 
   const rehypePlugins: PluggableList = [
-    [rehypeKatex, { output: 'mathml' }],
+    [rehypeKatex],
     [
       rehypeHighlight,
       {
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 265a7eefc9..4c7bde0270 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -5,6 +5,7 @@ import App from './App';
 import './style.css';
 import './mobile.css';
 import { ApiErrorBoundaryProvider } from './hooks/ApiErrorBoundaryContext';
+import 'katex/dist/katex.min.css';
 
 const container = document.getElementById('root');
 const root = createRoot(container);