🖱️ fix: Message Scrolling UX; refactor: Frontend UX/DX Optimizations (#3733)

* refactor(DropdownPopup): set MenuButton `as` prop to `div` to prevent React warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

* refactor: memoize ChatGroupItem and ControlCombobox components

* refactor(OpenAIClient): await stream process finish before finalCompletion event handling

* refactor: update useSSE.ts typing to handle null and undefined values in data properties

* refactor: set abort scroll to false on SSE connection open

* refactor: improve logger functionality with filter support

* refactor: update handleScroll typing in MessageContainer component

* refactor: update logger.dir call in useChatFunctions to log 'message_stream' tag format instead of the entire submission object as first arg

* refactor: fix null check for message object in Message component

* refactor: throttle handleScroll to help prevent auto-scrolling issues on new message requests; fix type issues within useMessageProcess

* refactor: add abortScrollByIndex logging effect

* refactor: update MessageIcon and Icon components to use React.memo for performance optimization

* refactor: memoize ConvoIconURL component for performance optimization

* chore: type issues

* chore: update package version to 0.7.414

client/src/hooks/Chat/useChatFunctions.ts

@@ -251,8 +251,7 @@ export default function useChatFunctions({
     }
 
     setSubmission(submission);
-    logger.log('Submission:');
-    logger.dir(submission, { depth: null });
+    logger.dir('message_stream', submission, { depth: null });
   };
 
   const regenerate = ({ parentMessageId }) => {

client/src/hooks/Messages/useMessageHelpers.tsx

@@ -1,10 +1,10 @@
+import throttle from 'lodash/throttle';
 import { useEffect, useRef, useCallback, useMemo } from 'react';
 import { Constants, isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
 import useCopyToClipboard from './useCopyToClipboard';
 import { getTextKey, logger } from '~/utils';
-
 export default function useMessageHelpers(props: TMessageProps) {
   const latestText = useRef<string | number>('');
   const { message, currentEditId, setCurrentEditId } = props;
@@ -64,13 +64,23 @@ export default function useMessageHelpers(props: TMessageProps) {
     [messageId, setCurrentEditId],
   );
 
-  const handleScroll = useCallback(() => {
-    if (isSubmitting) {
-      setAbortScroll(true);
-    } else {
-      setAbortScroll(false);
-    }
-  }, [isSubmitting, setAbortScroll]);
+  const handleScroll = useCallback(
+    (event: unknown) => {
+      throttle(() => {
+        logger.log(
+          'message_scrolling',
+          `useMessageHelpers: setting abort scroll to ${isSubmitting}, handleScroll event`,
+          event,
+        );
+        if (isSubmitting) {
+          setAbortScroll(true);
+        } else {
+          setAbortScroll(false);
+        }
+      }, 500)();
+    },
+    [isSubmitting, setAbortScroll],
+  );
 
   const assistant = useMemo(() => {
     if (!isAssistantsEndpoint(conversation?.endpoint)) {

client/src/hooks/Messages/useMessageProcess.tsx

@@ -1,3 +1,4 @@
+import throttle from 'lodash/throttle';
 import { useRecoilValue } from 'recoil';
 import { Constants } from 'librechat-data-provider';
 import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
@@ -8,8 +9,8 @@ import store from '~/store';
 
 export default function useMessageProcess({ message }: { message?: TMessage | null }) {
   const latestText = useRef<string | number>('');
-  const hasNoChildren = useMemo(() => !message?.children?.length, [message]);
   const [siblingMessage, setSiblingMessage] = useState<TMessage | null>(null);
+  const hasNoChildren = useMemo(() => (message?.children?.length ?? 0) === 0, [message]);
 
   const {
     index,
@@ -44,12 +45,12 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
     const logInfo = {
       textKey,
       'latestText.current': latestText.current,
-      messageId: message?.messageId,
+      messageId: message.messageId,
       convoId,
     };
     if (
       textKey !== latestText.current ||
-      (convoId &&
+      (convoId != null &&
         latestText.current &&
         convoId !== latestText.current.split(Constants.COMMON_DIVIDER)[2])
     ) {
@@ -61,18 +62,28 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
     }
   }, [hasNoChildren, message, setLatestMessage, conversation?.conversationId]);
 
-  const handleScroll = useCallback(() => {
-    if (isSubmittingFamily) {
-      setAbortScroll(true);
-    } else {
-      setAbortScroll(false);
-    }
-  }, [isSubmittingFamily, setAbortScroll]);
+  const handleScroll = useCallback(
+    (event: unknown | TouchEvent | WheelEvent) => {
+      throttle(() => {
+        logger.log(
+          'message_scrolling',
+          `useMessageProcess: setting abort scroll to ${isSubmittingFamily}, handleScroll event`,
+          event,
+        );
+        if (isSubmittingFamily) {
+          setAbortScroll(true);
+        } else {
+          setAbortScroll(false);
+        }
+      }, 500)();
+    },
+    [isSubmittingFamily, setAbortScroll],
+  );
 
   const showSibling = useMemo(
     () =>
-      (hasNoChildren && latestMultiMessage && !latestMultiMessage?.children?.length) ||
-      siblingMessage,
+      (hasNoChildren && latestMultiMessage && (latestMultiMessage.children?.length ?? 0) === 0) ||
+      !!siblingMessage,
     [hasNoChildren, latestMultiMessage, siblingMessage],
   );
 
@@ -83,8 +94,8 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
       latestMultiMessage.conversationId === message?.conversationId
     ) {
       const newSibling = Object.assign({}, latestMultiMessage, {
-        parentMessageId: message?.parentMessageId,
-        depth: message?.depth,
+        parentMessageId: message.parentMessageId,
+        depth: message.depth,
       });
       setSiblingMessage(newSibling);
     }

client/src/hooks/SSE/useContentHandler.ts

@@ -6,10 +6,10 @@ import type {
   Text,
   TMessage,
   ImageFile,
-  TSubmission,
   ContentPart,
   PartMetadata,
   TContentData,
+  EventSubmission,
   TMessageContentParts,
 } from 'librechat-data-provider';
 import { addFileToCache } from '~/utils';
@@ -21,7 +21,7 @@ type TUseContentHandler = {
 
 type TContentHandler = {
   data: TContentData;
-  submission: TSubmission;
+  submission: EventSubmission;
 };
 
 export default function useContentHandler({ setMessages, getMessages }: TUseContentHandler) {
@@ -43,7 +43,7 @@ export default function useContentHandler({ setMessages, getMessages }: TUseCont
       let response = messageMap.get(messageId);
       if (!response) {
         response = {
-          ...initialResponse,
+          ...(initialResponse as TMessage),
           parentMessageId: userMessage?.messageId ?? '',
           conversationId,
           messageId,

client/src/hooks/SSE/useEventHandlers.ts

@@ -14,7 +14,7 @@ import {
 import type {
   TMessage,
   TConversation,
-  TSubmission,
+  EventSubmission,
   ConversationData,
 } from 'librechat-data-provider';
 import type { SetterOrUpdater, Resetter } from 'recoil';
@@ -76,7 +76,7 @@ export default function useEventHandlers({
   const contentHandler = useContentHandler({ setMessages, getMessages });
 
   const messageHandler = useCallback(
-    (data: string | undefined, submission: TSubmission) => {
+    (data: string | undefined, submission: EventSubmission) => {
       const {
         messages,
         userMessage,
@@ -122,7 +122,7 @@ export default function useEventHandlers({
   );
 
   const cancelHandler = useCallback(
-    (data: TResData, submission: TSubmission) => {
+    (data: TResData, submission: EventSubmission) => {
       const { requestMessage, responseMessage, conversation } = data;
       const { messages, isRegenerate = false } = submission;
 
@@ -171,7 +171,7 @@ export default function useEventHandlers({
   );
 
   const syncHandler = useCallback(
-    (data: TSyncData, submission: TSubmission) => {
+    (data: TSyncData, submission: EventSubmission) => {
       const { conversationId, thread_id, responseMessage, requestMessage } = data;
       const { initialResponse, messages: _messages, userMessage } = submission;
 
@@ -252,7 +252,7 @@ export default function useEventHandlers({
   );
 
   const createdHandler = useCallback(
-    (data: TResData, submission: TSubmission) => {
+    (data: TResData, submission: EventSubmission) => {
       const { messages, userMessage, isRegenerate = false } = submission;
       const initialResponse = {
         ...submission.initialResponse,
@@ -329,7 +329,7 @@ export default function useEventHandlers({
   );
 
   const finalHandler = useCallback(
-    (data: TFinalResData, submission: TSubmission) => {
+    (data: TFinalResData, submission: EventSubmission) => {
       const { requestMessage, responseMessage, conversation, runMessages } = data;
       const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
 
@@ -418,7 +418,7 @@ export default function useEventHandlers({
   );
 
   const errorHandler = useCallback(
-    ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
+    ({ data, submission }: { data?: TResData; submission: EventSubmission }) => {
       const { messages, userMessage, initialResponse } = submission;
 
       setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
@@ -500,7 +500,7 @@ export default function useEventHandlers({
   );
 
   const abortConversation = useCallback(
-    async (conversationId = '', submission: TSubmission, messages?: TMessage[]) => {
+    async (conversationId = '', submission: EventSubmission, messages?: TMessage[]) => {
       const runAbortKey = `${conversationId}:${messages?.[messages.length - 1]?.messageId ?? ''}`;
       console.log({ conversationId, submission, messages, runAbortKey });
       const { endpoint: _endpoint, endpointType } = submission.conversation || {};

client/src/hooks/SSE/useSSE.ts

@@ -9,7 +9,7 @@ import {
   isAssistantsEndpoint,
 } from 'librechat-data-provider';
 import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
-import type { TSubmission } from 'librechat-data-provider';
+import type { TMessage, TSubmission, EventSubmission } from 'librechat-data-provider';
 import type { EventHandlerParams } from './useEventHandlers';
 import type { TResData } from '~/common';
 import { useGenTitleMutation } from '~/data-provider';
@@ -38,6 +38,7 @@ export default function useSSE(
 
   const { token, isAuthenticated } = useAuthContext();
   const [completed, setCompleted] = useState(new Set());
+  const setAbortScroll = useSetRecoilState(store.abortScrollFamily(runIndex));
   const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(runIndex));
 
   const {
@@ -98,54 +99,57 @@ export default function useSSE(
     events.onmessage = (e: MessageEvent) => {
       const data = JSON.parse(e.data);
 
-      if (data.final) {
+      if (data.final != null) {
         const { plugins } = data;
-        finalHandler(data, { ...submission, plugins });
-        startupConfig?.checkBalance && balanceQuery.refetch();
+        finalHandler(data, { ...submission, plugins } as EventSubmission);
+        (startupConfig?.checkBalance ?? false) && balanceQuery.refetch();
         console.log('final', data);
       }
-      if (data.created) {
+      if (data.created != null) {
         const runId = v4();
         setActiveRunId(runId);
         userMessage = {
           ...userMessage,
           ...data.message,
-          overrideParentMessageId: userMessage?.overrideParentMessageId,
+          overrideParentMessageId: userMessage.overrideParentMessageId,
         };
 
-        createdHandler(data, { ...submission, userMessage });
-      } else if (data.sync) {
+        createdHandler(data, { ...submission, userMessage } as EventSubmission);
+      } else if (data.sync != null) {
         const runId = v4();
         setActiveRunId(runId);
         /* synchronize messages to Assistants API as well as with real DB ID's */
-        syncHandler(data, { ...submission, userMessage });
-      } else if (data.type) {
+        syncHandler(data, { ...submission, userMessage } as EventSubmission);
+      } else if (data.type != null) {
         const { text, index } = data;
-        if (text && index !== textIndex) {
+        if (text != null && index !== textIndex) {
           textIndex = index;
         }
 
-        contentHandler({ data, submission });
+        contentHandler({ data, submission: submission as EventSubmission });
       } else {
-        const text = data.text || data.response;
+        const text = data.text ?? data.response;
         const { plugin, plugins } = data;
 
         const initialResponse = {
-          ...submission.initialResponse,
+          ...(submission.initialResponse as TMessage),
           parentMessageId: data.parentMessageId,
           messageId: data.messageId,
         };
 
-        if (data.message) {
+        if (data.message != null) {
           messageHandler(text, { ...submission, plugin, plugins, userMessage, initialResponse });
         }
       }
     };
 
-    events.onopen = () => console.log('connection is opened');
+    events.onopen = () => {
+      setAbortScroll(false);
+      console.log('connection is opened');
+    };
 
     events.oncancel = async () => {
-      const streamKey = submission?.initialResponse?.messageId;
+      const streamKey = (submission as TSubmission | null)?.['initialResponse']?.messageId;
       if (completed.has(streamKey)) {
         setIsSubmitting(false);
         setCompleted((prev) => {
@@ -157,17 +161,17 @@ export default function useSSE(
 
       setCompleted((prev) => new Set(prev.add(streamKey)));
       const latestMessages = getMessages();
-      const conversationId = latestMessages?.[latestMessages?.length - 1]?.conversationId;
+      const conversationId = latestMessages?.[latestMessages.length - 1]?.conversationId;
       return await abortConversation(
-        conversationId ?? userMessage?.conversationId ?? submission?.conversationId,
-        submission,
+        conversationId ?? userMessage.conversationId ?? submission.conversationId,
+        submission as EventSubmission,
         latestMessages,
       );
     };
 
     events.onerror = function (e: MessageEvent) {
       console.log('error in server stream.');
-      startupConfig?.checkBalance && balanceQuery.refetch();
+      (startupConfig?.checkBalance ?? false) && balanceQuery.refetch();
 
       let data: TResData | undefined = undefined;
       try {
@@ -178,7 +182,7 @@ export default function useSSE(
         setIsSubmitting(false);
       }
 
-      errorHandler({ data, submission: { ...submission, userMessage } });
+      errorHandler({ data, submission: { ...submission, userMessage } as EventSubmission });
     };
 
     setIsSubmitting(true);