chore(deps): update react-markdown to version 10.1.0 and enhance MemoizedReactMarkdown component

- Upgraded `react-markdown` from version 9.1.0 to 10.1.0 in both `bun.lock` and `package.json`.
- Improved the `MemoizedReactMarkdown` component by adding additional props checks for `components`, `remarkPlugins`, and `rehypePlugins` to optimize rendering.

This update ensures compatibility with the latest version of `react-markdown` and enhances performance by reducing unnecessary re-renders.

Author: Marfuen

apps/app/package.json

@@ -76,7 +76,7 @@
     "react-hook-form": "^7.61.1",
     "react-hotkeys-hook": "^5.1.0",
     "react-intersection-observer": "^9.16.0",
-    "react-markdown": "^9.1.0",
+    "react-markdown": "10.1.0",
     "react-textarea-autosize": "^8.5.9",
     "react-use-draggable-scroll": "^0.4.7",
     "react-wrap-balancer": "^1.1.1",

apps/app/src/components/ai/markdown.tsx

@@ -4,5 +4,8 @@ import ReactMarkdown, { type Options } from 'react-markdown';
 export const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
   (prevProps, nextProps) =>
-    prevProps.children === nextProps.children && prevProps.className === nextProps.className,
+    prevProps.children === nextProps.children &&
+    prevProps.components === nextProps.components &&
+    prevProps.remarkPlugins === nextProps.remarkPlugins &&
+    prevProps.rehypePlugins === nextProps.rehypePlugins,
 );

apps/app/src/components/ai/message.tsx

@@ -112,25 +112,26 @@ const StreamableMarkdown = memo(({ text }: { text: string | StreamableValue<stri
   const streamedText = useStreamableText(text);
 
   return (
-    <MemoizedReactMarkdown
-      className="prose text-xs prose-p:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0"
-      components={{
-        p({ children }) {
-          return <p className="my-1 last:mb-0">{children}</p>;
-        },
-        ol({ children }) {
-          return <ol className="list-decimal list-inside space-y-0.5 my-1">{children}</ol>;
-        },
-        ul({ children }) {
-          return <ul className="list-disc list-inside space-y-0.5 my-1">{children}</ul>;
-        },
-        li({ children }) {
-          return <li className="leading-tight my-0">{children}</li>;
-        },
-      }}
-    >
-      {streamedText}
-    </MemoizedReactMarkdown>
+    <div className="prose text-xs prose-p:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0">
+      <MemoizedReactMarkdown
+        components={{
+          p({ children }) {
+            return <p className="my-1 last:mb-0">{children}</p>;
+          },
+          ol({ children }) {
+            return <ol className="list-decimal list-inside space-y-0.5 my-1">{children}</ol>;
+          },
+          ul({ children }) {
+            return <ul className="list-disc list-inside space-y-0.5 my-1">{children}</ul>;
+          },
+          li({ children }) {
+            return <li className="leading-tight my-0">{children}</li>;
+          },
+        }}
+      >
+        {streamedText}
+      </MemoizedReactMarkdown>
+    </div>
   );
 });
 

apps/app/src/components/markdown.tsx

@@ -4,5 +4,8 @@ import ReactMarkdown, { type Options } from 'react-markdown';
 export const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
   (prevProps, nextProps) =>
-    prevProps.children === nextProps.children && prevProps.className === nextProps.className,
+    prevProps.children === nextProps.children &&
+    prevProps.components === nextProps.components &&
+    prevProps.remarkPlugins === nextProps.remarkPlugins &&
+    prevProps.rehypePlugins === nextProps.rehypePlugins,
 );