RenderMarkdown: disable preprocessing in-progress messages

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}
               />
             );

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

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