From f2a516db02cfdc1cdfad6ef201d4deb5155999ea Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 23 Aug 2024 21:41:37 -0400
Subject: [PATCH] refactor: optimize Markdown rendering and add support for
 code artifacts

---
 .../Chat/Messages/Content/Markdown.tsx        | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/Markdown.tsx b/client/src/components/Chat/Messages/Content/Markdown.tsx
index 44172189d8..4f0e8efeff 100644
--- a/client/src/components/Chat/Messages/Content/Markdown.tsx
+++ b/client/src/components/Chat/Messages/Content/Markdown.tsx
@@ -8,6 +8,7 @@ import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import remarkDirective from 'remark-directive';
 import type { PluggableList, Pluggable } from 'unified';
+import type { Pluggable } from 'unified';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
 import { CodeBlockArtifact, CodeMarkdown } from '~/components/Artifacts/Code';
 import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
@@ -124,6 +125,7 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
   const artifactIdRef = useRef<string | null>(null);
   const codeBlocksRef = useRef<number | null>(null);
   const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
+  const codeArtifacts = useRecoilValue<boolean>(store.codeArtifacts);
 
   const isInitializing = content === '';
 
@@ -155,18 +157,20 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
     );
   }
 
+  const remarkPlugins: Pluggable[] = codeArtifacts
+    ? [
+      supersub,
+      remarkGfm,
+      [remarkMath, { singleDollarTextMath: true }],
+      remarkDirective,
+      artifactPlugin,
+    ]
+    : [supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];
+
   return (
     <ReactMarkdown
-      remarkPlugins={[
-        /* @ts-ignore */
-        supersub,
-        remarkGfm,
-        /* @ts-ignore */
-        [remarkMath, { singleDollarTextMath: true }],
-        remarkDirective,
-        /* @ts-ignore */
-        artifactPlugin,
-      ]}
+      /** @ts-ignore */
+      remarkPlugins={remarkPlugins}
       /* @ts-ignore */
       rehypePlugins={rehypePlugins}
       // linkTarget="_new"