Performance (#602)

components/Chat/Chat.tsx

@@ -28,11 +28,11 @@ import HomeContext from '@/pages/api/home/home.context';
 import Spinner from '../Spinner';
 import { ChatInput } from './ChatInput';
 import { ChatLoader } from './ChatLoader';
-import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
 import { TemperatureSlider } from './Temperature';
+import { MemoizedChatMessage } from './MemoizedChatMessage';
 
 interface Props {
   stopConversationRef: MutableRefObject<boolean>;
@@ -464,7 +464,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
                 )}
 
                 {selectedConversation?.messages.map((message, index) => (
-                  <ChatMessage
+                  <MemoizedChatMessage
                     key={index}
                     message={message}
                     messageIndex={index}

components/Chat/ChatMessage.tsx

@@ -23,7 +23,7 @@ import rehypeMathjax from 'rehype-mathjax';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
-interface Props {
+export interface Props {
   message: Message;
   messageIndex: number;
   onEdit?: (editedMessage: Message) => void

components/Chat/MemoizedChatMessage.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from "react";
+import { ChatMessage, Props } from "./ChatMessage";
+
+export const MemoizedChatMessage: FC<Props> = memo(
+    ChatMessage,
+    (prevProps, nextProps) => (
+        prevProps.message.content === nextProps.message.content
+    )
+);

components/Markdown/MemoizedReactMarkdown.tsx

@@ -1,4 +1,9 @@
 import { FC, memo } from 'react';
 import ReactMarkdown, { Options } from 'react-markdown';
 
-export const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);
+export const MemoizedReactMarkdown: FC<Options> = memo(
+    ReactMarkdown,
+    (prevProps, nextProps) => (
+        prevProps.children === nextProps.children
+    )
+);