klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 05:29:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix broken rendering of math equations via katex

Browse Source
This commit is contained in:
sabaimran
2024-08-05 00:20:43 +05:30
parent b803ed19d3
commit f7840782a4
2 changed files with 46 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -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]);