Fix rendering performances issues related to scrolling events (#174)

* memoize chat related components

* Avoid re-rendering ChatInput on every message udpate

* change the way the horizontal scrollbar is hidden

* make the scroll event listener passive

* perf(Chat): fix performances issues related to autoscroll

Uses the intersection API to determine autoscroll mode instead of listening for scroll events

* tuning detection of autoscroll

components/Chat/Chat.tsx

@@ -7,6 +7,7 @@ import {
 } from '@/types';
 import {
   FC,
+  memo,
   MutableRefObject,
   useCallback,
   useEffect,
@@ -21,6 +22,7 @@ import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
 import { IconSettings } from '@tabler/icons-react';
+import { throttle } from '@/utils';
 
 interface Props {
   conversation: Conversation;
@@ -40,7 +42,8 @@ interface Props {
   stopConversationRef: MutableRefObject<boolean>;
 }
 
-export const Chat: FC<Props> = ({
+export const Chat: FC<Props> = memo(
+  ({
     conversation,
     models,
     apiKey,
@@ -53,7 +56,7 @@ export const Chat: FC<Props> = ({
     onUpdateConversation,
     onEditMessage,
     stopConversationRef,
-}) => {
+  }) => {
     const { t } = useTranslation('chat');
     const [currentMessage, setCurrentMessage] = useState<Message>();
     const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
@@ -63,47 +66,47 @@ export const Chat: FC<Props> = ({
     const chatContainerRef = useRef<HTMLDivElement>(null);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const scrollToBottom = useCallback(() => {
-    if (autoScrollEnabled) {
-      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-      textareaRef.current?.focus();
-    }
-  }, [autoScrollEnabled]);
-
-  const handleScroll = () => {
-    if (chatContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } =
-        chatContainerRef.current;
-      const bottomTolerance = 5;
-
-      if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
-        setAutoScrollEnabled(false);
-      } else {
-        setAutoScrollEnabled(true);
-      }
-    }
-  };
-
     const handleSettings = () => {
       setShowSettings(!showSettings);
     };
 
-  useEffect(() => {
+    const scrollDown = () => {
-    scrollToBottom();
+      if (autoScrollEnabled) {
-    setCurrentMessage(conversation.messages[conversation.messages.length - 2]);
+        messagesEndRef.current?.scrollIntoView(true);
-  }, [conversation.messages, scrollToBottom]);
-
-  useEffect(() => {
-    const chatContainer = chatContainerRef.current;
-
-    if (chatContainer) {
-      chatContainer.addEventListener('scroll', handleScroll);
-
-      return () => {
-        chatContainer.removeEventListener('scroll', handleScroll);
-      };
       }
-  }, []);
+    };
+    const throttledScrollDown = throttle(scrollDown, 250);
+
+    useEffect(() => {
+      throttledScrollDown();
+      setCurrentMessage(
+        conversation.messages[conversation.messages.length - 2],
+      );
+    }, [conversation.messages, throttledScrollDown]);
+
+    useEffect(() => {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          setAutoScrollEnabled(entry.isIntersecting);
+          if (entry.isIntersecting) {
+            textareaRef.current?.focus();
+          }
+        },
+        {
+          root: null,
+          threshold: 0.5,
+        },
+      );
+      const messagesEndElement = messagesEndRef.current;
+      if (messagesEndElement) {
+        observer.observe(messagesEndElement);
+      }
+      return () => {
+        if (messagesEndElement) {
+          observer.unobserve(messagesEndElement);
+        }
+      };
+    }, [messagesEndRef]);
 
     return (
       <div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
@@ -133,7 +136,10 @@ export const Chat: FC<Props> = ({
           <ErrorMessageDiv error={modelError} />
         ) : (
           <>
-          <div className="max-h-full overflow-scroll" ref={chatContainerRef}>
+            <div
+              className="max-h-full overflow-x-hidden"
+              ref={chatContainerRef}
+            >
               {conversation.messages.length === 0 ? (
                 <>
                   <div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
@@ -217,7 +223,7 @@ export const Chat: FC<Props> = ({
               stopConversationRef={stopConversationRef}
               textareaRef={textareaRef}
               messageIsStreaming={messageIsStreaming}
-            messages={conversation.messages}
+              conversationIsEmpty={conversation.messages.length > 0}
               model={conversation.model}
               onSend={(message) => {
                 setCurrentMessage(message);
@@ -233,4 +239,6 @@ export const Chat: FC<Props> = ({
         )}
       </div>
     );
-};
+  },
+);
+Chat.displayName = 'Chat';

components/Chat/ChatInput.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next';
 interface Props {
   messageIsStreaming: boolean;
   model: OpenAIModel;
-  messages: Message[];
+  conversationIsEmpty: boolean;
   onSend: (message: Message) => void;
   onRegenerate: () => void;
   stopConversationRef: MutableRefObject<boolean>;
@@ -22,7 +22,7 @@ interface Props {
 export const ChatInput: FC<Props> = ({
   messageIsStreaming,
   model,
-  messages,
+  conversationIsEmpty,
   onSend,
   onRegenerate,
   stopConversationRef,
@@ -102,11 +102,11 @@ export const ChatInput: FC<Props> = ({
   }
 
   return (
-    <div className="absolute bottom-0 left-0 w-full border-transparent pt-6 dark:border-white/20 bg-gradient-to-b from-transparent via-white to-white dark:via-[#343541] dark:to-[#343541] md:pt-2">
+    <div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
       <div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
         {messageIsStreaming && (
           <button
-            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
+            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
             onClick={handleStopConversation}
           >
             <IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
@@ -114,9 +114,9 @@ export const ChatInput: FC<Props> = ({
           </button>
         )}
 
-        {!messageIsStreaming && messages.length > 0 && (
+        {!messageIsStreaming && !conversationIsEmpty && (
           <button
-            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
+            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
             onClick={onRegenerate}
           >
             <IconRepeat size={16} className="mb-[2px] inline-block" />{' '}

components/Chat/ChatMessage.tsx

@@ -1,12 +1,12 @@
 import { Message } from '@/types';
 import { IconEdit } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState, memo } from 'react';
-import ReactMarkdown from 'react-markdown';
 import rehypeMathjax from 'rehype-mathjax';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import { CodeBlock } from '../Markdown/CodeBlock';
+import { MemoizedReactMarkdown } from '../Markdown/MemoizedReactMarkdown';
 import { CopyButton } from './CopyButton';
 
 interface Props {
@@ -15,11 +15,8 @@ interface Props {
   onEditMessage: (message: Message, messageIndex: number) => void;
 }
 
-export const ChatMessage: FC<Props> = ({
+export const ChatMessage: FC<Props> = memo(
-  message,
+  ({ message, messageIndex, onEditMessage }) => {
-  messageIndex,
-  onEditMessage,
-}) => {
     const { t } = useTranslation('chat');
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const [isHovering, setIsHovering] = useState<boolean>(false);
@@ -32,7 +29,9 @@ export const ChatMessage: FC<Props> = ({
       setIsEditing(!isEditing);
     };
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const handleInputChange = (
+      event: React.ChangeEvent<HTMLTextAreaElement>,
+    ) => {
       setMessageContent(event.target.value);
       if (textareaRef.current) {
         textareaRef.current.style.height = 'inherit';
@@ -74,7 +73,8 @@ export const ChatMessage: FC<Props> = ({
 
     return (
       <div
-      className={`group ${message.role === 'assistant'
+        className={`group ${
+          message.role === 'assistant'
             ? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
             : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
         }`}
@@ -135,7 +135,8 @@ export const ChatMessage: FC<Props> = ({
 
                 {(isHovering || window.innerWidth < 640) && !isEditing && (
                   <button
-                  className={`absolute ${window.innerWidth < 640
+                    className={`absolute ${
+                      window.innerWidth < 640
                         ? 'right-3 bottom-1'
                         : 'right-[-20px] top-[26px]'
                     }`}
@@ -150,7 +151,7 @@ export const ChatMessage: FC<Props> = ({
               </div>
             ) : (
               <>
-              <ReactMarkdown
+                <MemoizedReactMarkdown
                   className="prose dark:prose-invert"
                   remarkPlugins={[remarkGfm, remarkMath]}
                   rehypePlugins={[rehypeMathjax]}
@@ -195,7 +196,7 @@ export const ChatMessage: FC<Props> = ({
                   }}
                 >
                   {message.content}
-              </ReactMarkdown>
+                </MemoizedReactMarkdown>
 
                 {(isHovering || window.innerWidth < 640) && (
                   <CopyButton
@@ -209,4 +210,6 @@ export const ChatMessage: FC<Props> = ({
         </div>
       </div>
     );
-};
+  },
+);
+ChatMessage.displayName = 'ChatMessage';

components/Markdown/CodeBlock.tsx

@@ -3,7 +3,7 @@ import {
   programmingLanguages,
 } from '@/utils/app/codeblock';
 import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react';
-import { FC, useState } from 'react';
+import { FC, useState, memo } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -13,7 +13,7 @@ interface Props {
   value: string;
 }
 
-export const CodeBlock: FC<Props> = ({ language, value }) => {
+export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const { t } = useTranslation('markdown');
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
@@ -92,4 +92,5 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
       </SyntaxHighlighter>
     </div>
   );
-};
+});
+CodeBlock.displayName = 'CodeBlock';

components/Markdown/MemoizedReactMarkdown.tsx

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

utils/index.ts

@@ -0,0 +1,19 @@
+export function throttle<T extends (...args: any[]) => any>(func: T, limit: number): T {
+    let lastFunc: ReturnType<typeof setTimeout>;
+    let lastRan: number;
+
+    return ((...args) => {
+        if (!lastRan) {
+            func(...args);
+            lastRan = Date.now();
+        } else {
+            clearTimeout(lastFunc);
+            lastFunc = setTimeout(() => {
+                if (Date.now() - lastRan >= limit) {
+                    func(...args);
+                    lastRan = Date.now();
+                }
+            }, limit - (Date.now() - lastRan));
+        }
+    }) as T;
+}