Fix broken rendering of math equations via katex

src/interface/web/app/components/chatHistory/chatHistory.tsx

@@ -7,9 +7,6 @@ import ChatMessage, { ChatHistoryData, StreamMessage, TrainOfThought } from '../
 
 import { ScrollArea } from "@/components/ui/scroll-area"
 
-import renderMathInElement from 'katex/contrib/auto-render';
-import 'katex/dist/katex.min.css';
-
 import { InlineLoading } from '../loading/loading';
 
 import { Lightbulb } from "@phosphor-icons/react";
@@ -134,32 +131,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
 
     }, [props.incomingMessages]);
 
-    useEffect(() => {
-        const observer = new MutationObserver((mutationsList, observer) => {
-            // If the addedNodes property has one or more nodes
-            for (let mutation of mutationsList) {
-                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                    // Call your function here
-                    renderMathInElement(document.body, {
-                        delimiters: [
-                            { left: '$$', right: '$$', display: true },
-                            { left: '\\[', right: '\\]', display: true },
-                            { left: '$', right: '$', display: false },
-                            { left: '\\(', right: '\\)', display: false },
-                        ],
-                    });
-                }
-            }
-        });
-
-        if (chatHistoryRef.current) {
-            observer.observe(chatHistoryRef.current, { childList: true });
-        }
-
-        // Clean up the observer on component unmount
-        return () => observer.disconnect();
-    }, []);
-
     function fetchMoreMessages(currentPage: number) {
         if (!hasMoreMessages || fetchingData) return;
         const nextPage = currentPage + 1;

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -17,6 +17,9 @@ import { InlineLoading } from '../loading/loading';
 import { convertColorToTextClass } from '@/app/common/colorUtils';
 import { AgentData } from '@/app/agents/page';
 
+import renderMathInElement from 'katex/contrib/auto-render';
+import 'katex/dist/katex.min.css';
+
 const md = new markdownIt({
     html: true,
     linkify: true,
@@ -220,6 +223,38 @@ export default function ChatMessage(props: ChatMessageProps) {
         interruptedRef.current = interrupted;
     }, [interrupted]);
 
+    useEffect(() => {
+        const observer = new MutationObserver((mutationsList, observer) => {
+            console.log("called mutation observer");
+            // If the addedNodes property has one or more nodes
+            if (messageRef.current) {
+                for (let mutation of mutationsList) {
+                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                        // Call your function here
+
+                        console.log("render katex in body");
+
+                        renderMathInElement(messageRef.current, {
+                            delimiters: [
+                                { left: '$$', right: '$$', display: true },
+                                { left: '\\[', right: '\\]', display: true },
+                                { left: '$', right: '$', display: false },
+                                { left: '\\(', right: '\\)', display: false },
+                            ],
+                        });
+                    }
+                }
+            }
+        });
+
+        if (messageRef.current) {
+            observer.observe(messageRef.current, { childList: true });
+        }
+
+        // Clean up the observer on component unmount
+        return () => observer.disconnect();
+    }, [messageRef.current]);
+
     useEffect(() => {
         let message = props.chatMessage.message;
 
@@ -280,6 +315,17 @@ export default function ChatMessage(props: ChatMessageProps) {
                 });
                 preElement.prepend(copyButton);
             });
+
+            console.log("render katex within the chat message");
+
+            renderMathInElement(messageRef.current, {
+                delimiters: [
+                    { left: '$$', right: '$$', display: true },
+                    { left: '\\[', right: '\\]', display: true },
+                    { left: '$', right: '$', display: false },
+                    { left: '\\(', right: '\\)', display: false },
+                ],
+            });
         }
     }, [markdownRendered, isHovering, messageRef]);