📜 refactor: Optimize Longer Message Thread Performance (#3610)

client/src/components/Chat/Messages/Content/Part.tsx

@@ -4,9 +4,11 @@ import {
   imageGenTools,
   isImageVisionTool,
 } from 'librechat-data-provider';
+import { useMemo } from 'react';
 import type { TMessageContentParts, TMessage } from 'librechat-data-provider';
 import type { TDisplayProps } from '~/common';
 import { ErrorMessage } from './MessageContent';
+import { useChatContext } from '~/Providers';
 import RetrievalCall from './RetrievalCall';
 import CodeAnalyze from './CodeAnalyze';
 import Container from './Container';
@@ -20,16 +22,30 @@ import { cn } from '~/utils';
 
 // Display Message Component
 const DisplayMessage = ({ text, isCreatedByUser = false, message, showCursor }: TDisplayProps) => {
+  const { isSubmitting, latestMessage } = useChatContext();
+  const showCursorState = useMemo(
+    () => showCursor === true && isSubmitting,
+    [showCursor, isSubmitting],
+  );
+  const isLatestMessage = useMemo(
+    () => message.messageId === latestMessage?.messageId,
+    [message.messageId, latestMessage?.messageId],
+  );
   return (
     <div
       className={cn(
-        showCursor && !!text.length ? 'result-streaming' : '',
+        showCursorState && !!text.length ? 'result-streaming' : '',
         'markdown prose message-content dark:prose-invert light w-full break-words',
         isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
       )}
     >
       {!isCreatedByUser ? (
-        <Markdown content={text} message={message} showCursor={showCursor} />
+        <Markdown
+          content={text}
+          isEdited={message.isEdited}
+          showCursor={showCursorState}
+          isLatestMessage={isLatestMessage}
+        />
       ) : (
         <>{text}</>
       )}