fix(chat): fix issues with LaTeX rendering (Issue #2925) (#3741)

Author: Alexander-Kezik

apps/chat/src/components/Markdown/ChatMDComponent.tsx

@@ -3,8 +3,12 @@ import { PluggableList } from 'react-markdown/lib/react-markdown';
 
 import classnames from 'classnames';
 
+import { useScreenState } from '@/src/hooks/useScreenState';
+
 import { getMappedAttachmentUrl } from '@/src/utils/app/attachments';
-import { convertLaTeXToMarkdownMath } from '@/src/utils/converters';
+import { convertLaTeXToMarkdownMath } from '@/src/utils/app/converters';
+
+import { ScreenState } from '@/src/types/common';
 
 import { useAppSelector } from '@/src/store/hooks';
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
@@ -118,10 +122,13 @@ const ChatMDComponent = ({
   const isChatFullWidth = useAppSelector(UISelectors.selectIsChatFullWidth);
   const isOverlay = useAppSelector(SettingsSelectors.selectIsOverlay);
 
+  const screenState = useScreenState();
+
   const mdClassNames = classnames(
-    'prose min-w-full leading-[150%] dark:prose-invert prose-a:text-primary prose-a:underline',
+    'prose min-w-full dark:prose-invert prose-a:text-primary prose-a:underline',
     isChatFullWidth && 'max-w-none',
-    isOverlay ? 'text-sm' : 'md:leading-normal',
+    isOverlay && 'text-sm',
+    (screenState === ScreenState.SM || isOverlay) && 'leading-[150%]',
   );
 
   const processedContent = convertLaTeXToMarkdownMath(content);

apps/chat/src/styles/globals.css

@@ -231,3 +231,7 @@ pre:has(div.codeblock) {
   min-height: calc(var(--vh, 1vh) * 100);
   height: calc(var(--vh, 1vh) * 100);
 }
+
+span.katex-mathml {
+  display: none;
+}

apps/chat/src/utils/converters.ts renamed to apps/chat/src/utils/app/converters.ts

@@ -1,11 +1,11 @@
 export const convertLaTeXToMarkdownMath = (content: string) => {
   const transformedContent = content.replace(
     /\\\[([\s\S]*?)\\\]/g,
-    (_, mathContent) => `$$$$ ${mathContent} $$$$`,
+    (_, mathContent: string) => `$$\n${mathContent.trim()}\n$$`,
   );
 
   return transformedContent.replace(
     /\\\((.*?)\\\)/g,
-    (_, inlineMathContent) => `$$ ${inlineMathContent} $$`,
+    (_, inlineMathContent: string) => `$${inlineMathContent.trim()}$`,
   );
 };