sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/interface/web/app/components/chatHistory/chatHistory.tsx
View file

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

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