fix: Million Lint Optimizations

plastic-labs · Dec 3, 2024 · f39682a · f39682a
1 parent 04e2c19
commit f39682a
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 449 deletions.
diff --git a/www/components/markdownWrapper.tsx b/www/components/markdownWrapper.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
+import React, { useState, useCallback, useMemo, memo, lazy, Suspense } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import Typing from './typing';
@@ -8,14 +7,16 @@ import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 import { FiCopy, FiCheck } from 'react-icons/fi';
 
-function CopyButton({ text }: { text: string }) {
+const ReactMarkdown = lazy(() => import('react-markdown'));
+
+const CopyButton = memo(({ text }: { text: string }) => {
   const [isCopied, setIsCopied] = useState(false);
 
-  const copyToClipboard = async () => {
+  const copyToClipboard = useCallback(async () => {
     await navigator.clipboard.writeText(text);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), 2000);
-  };
+  }, [text]);
 
   return (
     <button
@@ -29,9 +30,9 @@ function CopyButton({ text }: { text: string }) {
       )}
     </button>
   );
-}
+});
 
-function CodeBlock({ language, value }: { language: string; value: string }) {
+const CodeBlock = memo(({ language, value }: { language: string; value: string }) => {
   return (
     <div className="relative">
       <SyntaxHighlighter
@@ -45,43 +46,65 @@ function CodeBlock({ language, value }: { language: string; value: string }) {
       <CopyButton text={value} />
     </div>
   );
-}
+})
 
-export default function MarkdownWrapper({ text }: { text: string }) {
-  return text ? (
-    <ReactMarkdown
-      remarkPlugins={[remarkMath]}
-      // @ts-expect-error i think typing is wrong from the library itself, this comment should raise an error once its fixed. // TODO: remove this comment
-      rehypePlugins={[rehypeKatex]}
-      components={{
-        ol: ({ node, ordered, ...props }) => (
-          <ol className="list-decimal pl-6 space-y-2" {...props} />
-        ),
-        ul: ({ node, ordered, ...props }) => (
-          <ul className="list-disc pl-6 space-y-2" {...props} />
-        ),
-        li: ({ node, ordered, ...props }) => <li className="ml-2" {...props} />,
-        code({ node, inline, className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || '');
-          return !inline && match ? (
-            <CodeBlock
-              language={match[1]}
-              value={String(children).replace(/\n$/, '')}
-            />
-          ) : (
-            <code
-              {...props}
-              className={`${className} bg-gray-100 dark:bg-gray-800 rounded px-1`}
-            >
-              {children}
-            </code>
-          );
-        },
-      }}
-    >
-      {text}
-    </ReactMarkdown>
-  ) : (
-    <Typing />
+const MarkdownWrapper = memo(({ text }: { text: string }) => {
+  // Memoize components configuration
+  const components = useMemo(() => ({
+    ol: ({ ordered, ...props }: { ordered?: boolean } & React.ComponentPropsWithoutRef<'ol'>) => (
+      <ol className="list-decimal pl-6 space-y-2" {...props} />
+    ),
+    ul: ({ ordered, ...props }: { ordered?: boolean } & React.ComponentPropsWithoutRef<'ul'>) => (
+      <ul className="list-disc pl-6 space-y-2" {...props} />
+    ),
+    li: ({ ordered, ...props }: { ordered?: boolean } & React.ComponentPropsWithoutRef<'li'>) => (
+      <li className="ml-2" {...props} />
+    ),
+    code: ({ inline, className, children, ...props }: {
+      inline?: boolean;
+      className?: string;
+      children: React.ReactNode;
+      [key: string]: any;
+    }) => {
+      const match = /language-(\w+)/.exec(className || '');
+      return !inline && match ? (
+        <CodeBlock
+          language={match[1]}
+          value={String(children).replace(/\n$/, '')}
+        />
+      ) : (
+        <code
+          {...props}
+          className={`${className} bg-gray-100 dark:bg-gray-800 rounded px-1`}
+        >
+          {children}
+        </code>
+      );
+    },
+  }), []);
+
+  // Memoize plugins
+  const remarkPlugins = useMemo(() => [remarkMath], []);
+  const rehypePlugins = useMemo(() => [rehypeKatex], []);
+
+  if (!text) return <Typing />;
+
+  return (
+    <Suspense fallback={<div className="animate-pulse bg-gray-100 h-32" />}>
+      <ReactMarkdown
+        remarkPlugins={remarkPlugins}
+        // @ts-expect-error i think typing is wrong from the library itself, this comment should raise an error once its fixed. // TODO: remove this comment
+        rehypePlugins={rehypePlugins}
+        components={components}
+      >
+        {text}
+      </ReactMarkdown>
+    </Suspense>
   );
-}
+});
+
+CopyButton.displayName = 'CopyButton';
+CodeBlock.displayName = 'CodeBlock';
+MarkdownWrapper.displayName = 'MarkdownWrapper';
+
+export default MarkdownWrapper;
diff --git a/www/components/messagebox.tsx b/www/components/messagebox.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import Image from 'next/image';
 import icon from '@/public/bloomicon.jpg';
 import usericon from '@/public/usericon.svg';
@@ -87,6 +87,16 @@ export default function MessageBox({
     }
   };
 
+  const memoizedImage = useMemo(() => (
+    <Image
+      src={isUser ? usericon : icon}
+      alt="icon"
+      className="rounded-full w-6 h-6 lg:w-12 lg:h-12"
+    />
+  ), [isUser, usericon, icon]);
+
+  const memoizedSkeleton = useMemo(() => <Skeleton count={4} />, []);
+
   return (
     <article
       className={
@@ -95,16 +105,12 @@ export default function MessageBox({
       }
     >
       {loading ? (
-        <Skeleton circle={true} className="lg:!w-12 lg:!h-12 !w-6 !h-6 " />
+        memoizedSkeleton
       ) : (
-        <Image
-          src={isUser ? usericon : icon}
-          alt="icon"
-          className="rounded-full w-6 h-6 lg:w-12 lg:h-12"
-        />
+        memoizedImage
       )}
       <div className="flex flex-col gap-2 w-full">
-        {loading ? <Skeleton count={4} /> : <MarkdownWrapper text={content} />}
+        {loading ? memoizedSkeleton : <MarkdownWrapper text={content} />}
         {!loading && !isUser && shouldShowButtons && (
           <div className="flex justify-start gap-2 mt-2">
             <button

diff --git a/www/components/ui/dialog.tsx b/www/components/ui/dialog.tsx
diff --git a/www/next.config.mjs b/www/next.config.mjs
@@ -1,14 +1,9 @@
-// import MillionLint from '@million/lint';
 import { withSentryConfig } from "@sentry/nextjs";
 const nextConfig = {
   output: "standalone",
 };
 
-// export default MillionLint.next({
-//   rsc: true
-// })(
-
-export default withSentryConfig(nextConfig, {
+const sentryConfig = withSentryConfig(nextConfig, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
@@ -54,3 +49,6 @@ export default withSentryConfig(nextConfig, {
     ];
   },
 });
+
+export default sentryConfig;
+// export default MillionLint.next({ rsc: true })(sentryConfig);
diff --git a/www/package.json b/www/package.json
@@ -12,8 +12,6 @@
   },
   "dependencies": {
     "@openrouter/ai-sdk-provider": "^0.0.6",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",