fix input lag when the messages grow larger by using memo for Message…

…Item object
deiucanta · Mar 19, 2024 · be8397d · be8397d
1 parent 86843e6
commit be8397d
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 273 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/react-window": "^1.8.8",
     "buffer": "^5.7.1",
     "parcel": "^2.8.3",
     "parcel-reporter-static-files-copy": "^1.5.0",
@@ -53,6 +54,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-markdown": "^8.0.6",
+    "react-window": "^1.8.10",
     "remark-gfm": "^3.0.1",
     "typescript": "4.9.5"
   }

diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
@@ -1,3 +1,4 @@
+import { memo, useMemo } from 'react';
 import {
   ActionIcon,
   Box,
@@ -9,61 +10,61 @@ import {
   Text,
   ThemeIcon,
   Tooltip,
-} from "@mantine/core";
-import { Prism } from "@mantine/prism";
-import { IconCopy, IconUser } from "@tabler/icons-react";
-import { useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { Message } from "../db";
-import "../styles/markdown.scss";
-import { CreatePromptModal } from "./CreatePromptModal";
-import { LogoIcon } from "./Logo";
-import { ScrollIntoView } from "./ScrollIntoView";
-import "../utils/prisma-setup";
+} from '@mantine/core';
+import { Prism } from '@mantine/prism';
+import { IconCopy, IconUser } from '@tabler/icons-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Message } from '../db';
+import '../styles/markdown.scss';
+import { CreatePromptModal } from './CreatePromptModal';
+import { LogoIcon } from './Logo';
+import { ScrollIntoView } from './ScrollIntoView';
+import '../utils/prisma-setup';
 
-export function MessageItem({ message }: { message: Message }) {
+export const MessageItem = memo(({ message }: { message: Message }) => {
   const wordCount = useMemo(() => {
-    var matches = message.content.match(/[\w\d\’\'-\(\)]+/gi);
+    const matches = message.content.match(/[\w\d\’\'-\(\)]+/gi);
     return matches ? matches.length : 0;
   }, [message.content]);
 
   return (
     <ScrollIntoView>
       <Card withBorder>
         <Flex gap="sm">
-          {message.role === "user" && (
+          {message.role === 'user' && (
             <ThemeIcon color="gray" size="lg">
               <IconUser size={20} />
             </ThemeIcon>
           )}
-          {message.role === "assistant" && <LogoIcon style={{ height: 32 }} />}
+          {message.role === 'assistant' && <LogoIcon style={{ height: 32 }} />}
           <Box sx={{ flex: 1, width: 0 }} className="markdown">
             <ReactMarkdown
-              children={message.content}
               remarkPlugins={[remarkGfm]}
               components={{
-                table: ({ node, ...props }) => (
+                table: (props) => (
                   <Table verticalSpacing="sm" highlightOnHover {...props} />
                 ),
-                code: ({ node, inline, className, lang, ...props }) => {
-                  const languageMatch = /language-(\w+)/.exec(className || "");
-                  const language = languageMatch ? languageMatch[1] : undefined;
-
+                code: ({ node, inline, className, ...props }) => {
+                  const languageMatch = /language-(\w+)/.exec(className || '');
+                  const language = languageMatch ? languageMatch[1] : '';
                   return inline ? (
                     <Code {...props} />
                   ) : (
                     <Box sx={{ position: "relative" }}>
-                      <Prism
-                        language={language as any}
-                        children={`${props.children as string}`}
-                      />
-                    </Box>
+                    <Prism
+                      language={language as any}
+                    >
+              {String(props.children)}
+            </Prism>
+          </Box>
                   );
                 },
               }}
-            />
-            {message.role === "assistant" && (
+            >
+              {message.content}
+            </ReactMarkdown>
+            {message.role === 'assistant' && (
               <Box>
                 <Text size="sm" color="dimmed">
                   {wordCount} words
@@ -75,21 +76,17 @@ export function MessageItem({ message }: { message: Message }) {
             <CreatePromptModal content={message.content} />
             <CopyButton value={message.content}>
               {({ copied, copy }) => (
-                <Tooltip label={copied ? "Copied" : "Copy"} position="left">
+                <Tooltip label={copied ? 'Copied' : 'Copy'} position="left">
                   <ActionIcon onClick={copy}>
                     <IconCopy opacity={0.5} size={20} />
                   </ActionIcon>
                 </Tooltip>
               )}
             </CopyButton>
-            {/* <Tooltip label={`${wordCount} words`} position="left">
-              <ActionIcon>
-                <IconInfoCircle opacity={0.5} size={20} />
-              </ActionIcon>
-            </Tooltip> */}
           </Box>
         </Flex>
       </Card>
     </ScrollIntoView>
   );
-}
+});
+
diff --git a/src/routes/ChatRoute.tsx b/src/routes/ChatRoute.tsx
@@ -116,7 +116,7 @@ export function ChatRoute() {
         `}</style>
       </div>
     );
-  };  
+  }; 
 
   const submit = async () => {
     if (submitting) return;
@@ -320,7 +320,7 @@ export function ChatRoute() {
               })}
               data={[
                 { label: 'GPT-3.5', value: 'gpt-3.5-turbo' },
-                { label: 'GPT-4', value: 'gpt-4' }
+                { label: 'GPT-4', value: 'gpt-4-1106-preview' }
               ]}
               onChange={async (value: 'gpt-3.5-turbo' | 'gpt-4') => {
                 const model = value;