From f7fb8c780b32e3cb718af5c2ca7a08ed0ebd9874 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Sun, 20 Apr 2025 18:02:43 -0700
Subject: [PATCH] RenderMarkdown: disable preprocessing in-progress messages

---
 src/modules/blocks/AutoBlocksRenderer.tsx              | 7 +++++++
 src/modules/blocks/markdown/CustomMarkdownRenderer.tsx | 4 ++--
 src/modules/blocks/markdown/RenderMarkdown.tsx         | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/modules/blocks/AutoBlocksRenderer.tsx b/src/modules/blocks/AutoBlocksRenderer.tsx
index b37b24165..c857f397f 100644
--- a/src/modules/blocks/AutoBlocksRenderer.tsx
+++ b/src/modules/blocks/AutoBlocksRenderer.tsx
@@ -16,6 +16,10 @@ import { useAutoBlocksMemoSemiStable, useTextCollapser } from './blocks.hooks';
 import { useScaledCodeSx, useScaledImageSx, useScaledTypographySx, useToggleExpansionButtonSx } from './blocks.styles';
 
 
+// configuration
+const DISABLE_MARKDOWN_PROGRESSIVE_PREPROCESS = true; // set to false to render LaTeX inline formulas as they come in, not at the end of the message
+
+
 // To get to the 'ref' version (which doesn't seem to be used anymore, and was used to isolate the source of the bubble bar):
 // export const AutoBlocksRenderer = React.forwardRef<HTMLDivElement, BlocksRendererProps>((props, ref) => {
 // AutoBlocksRenderer.displayName = 'AutoBlocksRenderer';
@@ -115,6 +119,8 @@ export function AutoBlocksRenderer(props: {
 
         // Optimization: only memo the non-currently-rendered components, if the message is still in flux
         const optimizeMemoBeforeLastBlock = props.optiAllowSubBlocksMemo === true && index < (autoBlocksStable.length - 1);
+        // Optimization: disable the markdown preprocessor on the last block, only do it at the end not while in progress
+        const optimizeDisableProcessorsOnLast = DISABLE_MARKDOWN_PROGRESSIVE_PREPROCESS && props.optiAllowSubBlocksMemo === true && index === (autoBlocksStable.length - 1);
 
         switch (bkInput.bkt) {
 
@@ -132,6 +138,7 @@ export function AutoBlocksRenderer(props: {
               <RenderMarkdownMemoOrNot
                 key={'md-bk-' + index}
                 content={bkInput.content}
+                disablePreprocessor={optimizeDisableProcessorsOnLast}
                 sx={scaledTypographySx}
               />
             );
diff --git a/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx b/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx
index 814f4b0ed..7e2718f0a 100644
--- a/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx
+++ b/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx
@@ -272,14 +272,14 @@ function preprocessMarkdown(markdownText: string) {
   }
 }
 
-export default function CustomMarkdownRenderer(props: { content: string }) {
+export default function CustomMarkdownRenderer(props: { content: string, disablePreprocessor?: boolean }) {
   return (
     <ReactMarkdown
       components={reactMarkdownComponents}
       remarkPlugins={remarkPluginsStable}
       rehypePlugins={rehypePluginsStable}
     >
-      {preprocessMarkdown(props.content)}
+      {props.disablePreprocessor ? props.content : preprocessMarkdown(props.content)}
     </ReactMarkdown>
   );
 }
\ No newline at end of file
diff --git a/src/modules/blocks/markdown/RenderMarkdown.tsx b/src/modules/blocks/markdown/RenderMarkdown.tsx
index ded6ab746..4e6d16b14 100644
--- a/src/modules/blocks/markdown/RenderMarkdown.tsx
+++ b/src/modules/blocks/markdown/RenderMarkdown.tsx
@@ -23,14 +23,14 @@ const RenderMarkdownBox = styled(Box)({
 
 const DynamicMarkdownRenderer = React.lazy(() => import('./CustomMarkdownRenderer'));
 
-export function RenderMarkdown(props: { content: string; sx?: SxProps; }) {
+export function RenderMarkdown(props: { content: string; disablePreprocessor?: boolean, sx?: SxProps; }) {
   return (
     <RenderMarkdownBox
       className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */
       sx={props.sx}
     >
       <React.Suspense fallback={<div>Loading...</div>}>
-        <DynamicMarkdownRenderer content={props.content} />
+        <DynamicMarkdownRenderer content={props.content} disablePreprocessor={props.disablePreprocessor} />
       </React.Suspense>
     </RenderMarkdownBox>
   );