📝 fix: Resolve Markdown Rendering Issues (#8352)

* 🔧 fix: Handle optional arguments in `useParseArgs` and improve tool call condition

* chore: Remove math plugins from `MarkdownLite`

* ✨ feat: Add Error Boundary to Markdown Component for Enhanced Error Handling

- Introduced `MarkdownErrorBoundary` to catch and display errors during Markdown rendering.
- Updated the `Markdown` component to utilize the new error boundary, improving user experience by handling rendering issues gracefully.

* Revert "chore: Remove math plugins from `MarkdownLite`"

This reverts commit d393099d52.

* ✨ feat: Introduce MarkdownErrorBoundary for improved error handling in Markdown components

* refactor: include most markdown elements in error boundary fallback, aside from problematic plugins

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -19,6 +19,7 @@ import { Citation, CompositeCitation, HighlightedText } from '~/components/Web/C
 import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
+import MarkdownErrorBoundary from './MarkdownErrorBoundary';
 import useHasAccess from '~/hooks/Roles/useHasAccess';
 import { unicodeCitation } from '~/components/Web';
 import { useFileDownload } from '~/data-provider';
@@ -219,31 +220,33 @@ const Markdown = memo(({ content = '', isLatestMessage }: TContentProps) => {
   }
 
   return (
-    <ArtifactProvider>
-      <CodeBlockProvider>
-        <ReactMarkdown
-          /** @ts-ignore */
-          remarkPlugins={remarkPlugins}
-          /* @ts-ignore */
-          rehypePlugins={rehypePlugins}
-          components={
-            {
-              code,
-              a,
-              p,
-              artifact: Artifact,
-              citation: Citation,
-              'highlighted-text': HighlightedText,
-              'composite-citation': CompositeCitation,
-            } as {
-              [nodeType: string]: React.ElementType;
+    <MarkdownErrorBoundary content={content} codeExecution={true}>
+      <ArtifactProvider>
+        <CodeBlockProvider>
+          <ReactMarkdown
+            /** @ts-ignore */
+            remarkPlugins={remarkPlugins}
+            /* @ts-ignore */
+            rehypePlugins={rehypePlugins}
+            components={
+              {
+                code,
+                a,
+                p,
+                artifact: Artifact,
+                citation: Citation,
+                'highlighted-text': HighlightedText,
+                'composite-citation': CompositeCitation,
+              } as {
+                [nodeType: string]: React.ElementType;
+              }
             }
-          }
-        >
-          {currentContent}
-        </ReactMarkdown>
-      </CodeBlockProvider>
-    </ArtifactProvider>
+          >
+            {currentContent}
+          </ReactMarkdown>
+        </CodeBlockProvider>
+      </ArtifactProvider>
+    </MarkdownErrorBoundary>
   );
 });
 

client/src/components/Chat/Messages/Content/MarkdownErrorBoundary.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import remarkGfm from 'remark-gfm';
+import supersub from 'remark-supersub';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import type { PluggableList } from 'unified';
+import { code, codeNoExecution, a, p } from './Markdown';
+import { CodeBlockProvider } from '~/Providers';
+import { langSubset } from '~/utils';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface MarkdownErrorBoundaryProps {
+  children: React.ReactNode;
+  content: string;
+  codeExecution?: boolean;
+}
+
+class MarkdownErrorBoundary extends React.Component<
+  MarkdownErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: MarkdownErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Markdown rendering error:', error, errorInfo);
+  }
+
+  componentDidUpdate(prevProps: MarkdownErrorBoundaryProps) {
+    if (prevProps.content !== this.props.content && this.state.hasError) {
+      this.setState({ hasError: false, error: undefined });
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const { content, codeExecution = true } = this.props;
+
+      const rehypePlugins: PluggableList = [
+        [
+          rehypeHighlight,
+          {
+            detect: true,
+            ignoreMissing: true,
+            subset: langSubset,
+          },
+        ],
+      ];
+
+      return (
+        <CodeBlockProvider>
+          <ReactMarkdown
+            remarkPlugins={[
+              /** @ts-ignore */
+              supersub,
+              remarkGfm,
+            ]}
+            /** @ts-ignore */
+            rehypePlugins={rehypePlugins}
+            components={
+              {
+                code: codeExecution ? code : codeNoExecution,
+                a,
+                p,
+              } as {
+                [nodeType: string]: React.ElementType;
+              }
+            }
+          >
+            {content}
+          </ReactMarkdown>
+        </CodeBlockProvider>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default MarkdownErrorBoundary;

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -8,6 +8,7 @@ import rehypeHighlight from 'rehype-highlight';
 import type { PluggableList } from 'unified';
 import { code, codeNoExecution, a, p } from './Markdown';
 import { CodeBlockProvider, ArtifactProvider } from '~/Providers';
+import MarkdownErrorBoundary from './MarkdownErrorBoundary';
 import { langSubset } from '~/utils';
 
 const MarkdownLite = memo(
@@ -25,32 +26,34 @@ const MarkdownLite = memo(
     ];
 
     return (
-      <ArtifactProvider>
-        <CodeBlockProvider>
-          <ReactMarkdown
-            remarkPlugins={[
+      <MarkdownErrorBoundary content={content} codeExecution={codeExecution}>
+        <ArtifactProvider>
+          <CodeBlockProvider>
+            <ReactMarkdown
+              remarkPlugins={[
+                /** @ts-ignore */
+                supersub,
+                remarkGfm,
+                [remarkMath, { singleDollarTextMath: false }],
+              ]}
               /** @ts-ignore */
-              supersub,
-              remarkGfm,
-              [remarkMath, { singleDollarTextMath: false }],
-            ]}
-            /** @ts-ignore */
-            rehypePlugins={rehypePlugins}
-            // linkTarget="_new"
-            components={
-              {
-                code: codeExecution ? code : codeNoExecution,
-                a,
-                p,
-              } as {
-                [nodeType: string]: React.ElementType;
+              rehypePlugins={rehypePlugins}
+              // linkTarget="_new"
+              components={
+                {
+                  code: codeExecution ? code : codeNoExecution,
+                  a,
+                  p,
+                } as {
+                  [nodeType: string]: React.ElementType;
+                }
               }
-            }
-          >
-            {content}
-          </ReactMarkdown>
-        </CodeBlockProvider>
-      </ArtifactProvider>
+            >
+              {content}
+            </ReactMarkdown>
+          </CodeBlockProvider>
+        </ArtifactProvider>
+      </MarkdownErrorBoundary>
     );
   },
 );

client/src/components/Chat/Messages/Content/Part.tsx

@@ -85,7 +85,7 @@ const Part = memo(
 
       const isToolCall =
         'args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL);
-      if (isToolCall && toolCall.name === Tools.execute_code) {
+      if (isToolCall && toolCall.name === Tools.execute_code && toolCall.args) {
         return (
           <ExecuteCode
             args={typeof toolCall.args === 'string' ? toolCall.args : ''}

client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx

@@ -10,23 +10,23 @@ import { cn } from '~/utils';
 import store from '~/store';
 
 interface ParsedArgs {
-  lang: string;
-  code: string;
+  lang?: string;
+  code?: string;
 }
 
-export function useParseArgs(args: string): ParsedArgs {
+export function useParseArgs(args?: string): ParsedArgs | null {
   return useMemo(() => {
-    let parsedArgs: ParsedArgs | string = args;
+    let parsedArgs: ParsedArgs | string | undefined | null = args;
     try {
-      parsedArgs = JSON.parse(args);
+      parsedArgs = JSON.parse(args || '');
     } catch {
       // console.error('Failed to parse args:', e);
     }
     if (typeof parsedArgs === 'object') {
       return parsedArgs;
     }
-    const langMatch = args.match(/"lang"\s*:\s*"(\w+)"/);
-    const codeMatch = args.match(/"code"\s*:\s*"(.+?)(?="\s*,\s*"(session_id|args)"|"\s*})/s);
+    const langMatch = args?.match(/"lang"\s*:\s*"(\w+)"/);
+    const codeMatch = args?.match(/"code"\s*:\s*"(.+?)(?="\s*,\s*"(session_id|args)"|"\s*})/s);
 
     let code = '';
     if (codeMatch) {
@@ -51,7 +51,7 @@ export default function ExecuteCode({
   attachments,
 }: {
   initialProgress: number;
-  args: string;
+  args?: string;
   output?: string;
   attachments?: TAttachment[];
 }) {
@@ -65,7 +65,7 @@ export default function ExecuteCode({
   const outputRef = useRef<string>(output);
   const prevShowCodeRef = useRef<boolean>(showCode);
 
-  const { lang, code } = useParseArgs(args);
+  const { lang, code } = useParseArgs(args) ?? ({} as ParsedArgs);
   const progress = useProgress(initialProgress);
 
   useEffect(() => {
@@ -144,7 +144,7 @@ export default function ExecuteCode({
           onClick={() => setShowCode((prev) => !prev)}
           inProgressText={localize('com_ui_analyzing')}
           finishedText={localize('com_ui_analyzing_finished')}
-          hasInput={!!code.length}
+          hasInput={!!code?.length}
           isExpanded={showCode}
         />
       </div>