🖱️ 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
2025-09-22 06:00:56 +02:00 · 2024-08-21 18:18:45 -04:00 · 2024-08-21 18:18:45 -04:00 · 98b437edd5
commit 98b437edd5
parent ba9c351435
20 changed files with 282 additions and 176 deletions
--- a/api/app/clients/OpenAIClient.js
+++ b/api/app/clients/OpenAIClient.js
@ -1182,7 +1182,15 @@ ${convo}
      }

      let UnexpectedRoleError = false;
+      /** @type {Promise<void>} */
+      let streamPromise;
+      /** @type {(value: void | PromiseLike<void>) => void} */
+      let streamResolve;
+
      if (modelOptions.stream) {
+        streamPromise = new Promise((resolve) => {
+          streamResolve = resolve;
+        });
        const stream = await openai.beta.chat.completions
          .stream({
            ...modelOptions,
@ -1194,13 +1202,17 @@ ${convo}
          .on('error', (err) => {
            handleOpenAIErrors(err, errorCallback, 'stream');
          })
-          .on('finalChatCompletion', (finalChatCompletion) => {
+          .on('finalChatCompletion', async (finalChatCompletion) => {
            const finalMessage = finalChatCompletion?.choices?.[0]?.message;
-            if (finalMessage && finalMessage?.role !== 'assistant') {
+            if (!finalMessage) {
+              return;
+            }
+            await streamPromise;
+            if (finalMessage?.role !== 'assistant') {
              finalChatCompletion.choices[0].message.role = 'assistant';
            }

-            if (finalMessage && !finalMessage?.content?.trim()) {
+            if (typeof finalMessage.content !== 'string' || finalMessage.content.trim() === '') {
              finalChatCompletion.choices[0].message.content = intermediateReply;
            }
          })
@ -1223,6 +1235,8 @@ ${convo}
          await sleep(streamRate);
        }

+        streamResolve();
+
        if (!UnexpectedRoleError) {
          chatCompletion = await stream.finalChatCompletion().catch((err) => {
            handleOpenAIErrors(err, errorCallback, 'finalChatCompletion');
--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@ -6,7 +6,13 @@ import MessageRender from './ui/MessageRender';
 import MultiMessage from './MultiMessage';

 const MessageContainer = React.memo(
-  ({ handleScroll, children }: { handleScroll: () => void; children: React.ReactNode }) => {
+  ({
+    handleScroll,
+    children,
+  }: {
+    handleScroll: (event?: unknown) => void;
+    children: React.ReactNode;
+  }) => {
    return (
      <div
        className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"
@ -30,11 +36,11 @@ export default function Message(props: TMessageProps) {
  } = useMessageProcess({ message: props.message });
  const { message, currentEditId, setCurrentEditId } = props;

-  if (!message) {
+  if (!message || typeof message !== 'object') {
    return null;
  }

-  const { children, messageId = null } = message ?? {};
+  const { children, messageId = null } = message;

  return (
    <>
--- a/client/src/components/Chat/Messages/MessageIcon.tsx
+++ b/client/src/components/Chat/Messages/MessageIcon.tsx
@ -1,4 +1,4 @@
-import { useMemo, memo } from 'react';
+import React, { useMemo, memo } from 'react';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { TMessage, TPreset, Assistant } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
@ -6,55 +6,66 @@ import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
 import { getEndpointField, getIconEndpoint } from '~/utils';
 import Icon from '~/components/Endpoints/Icon';

-function MessageIcon(
-  props: Pick<TMessageProps, 'message' | 'conversation'> & {
-    assistant?: Assistant;
-  },
-) {
-  const { data: endpointsConfig } = useGetEndpointsQuery();
-  const { message, conversation, assistant } = props;
+const MessageIcon = memo(
+  (
+    props: Pick<TMessageProps, 'message' | 'conversation'> & {
+      assistant?: Assistant;
+    },
+  ) => {
+    const { data: endpointsConfig } = useGetEndpointsQuery();
+    const { message, conversation, assistant } = props;

-  const assistantName = assistant ? (assistant.name as string | undefined) : '';
-  const assistantAvatar = assistant ? (assistant.metadata?.avatar as string | undefined) : '';
+    const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
+    const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
+    const isCreatedByUser = useMemo(() => message?.isCreatedByUser ?? false, [message]);

-  const messageSettings = useMemo(
-    () => ({
-      ...(conversation ?? {}),
-      ...({
-        ...(message ?? {}),
-        iconURL: message?.iconURL ?? '',
-      } as TMessage),
-    }),
-    [conversation, message],
-  );
+    const messageSettings = useMemo(
+      () => ({
+        ...(conversation ?? {}),
+        ...({
+          ...(message ?? {}),
+          iconURL: message?.iconURL ?? '',
+        } as TMessage),
+      }),
+      [conversation, message],
+    );

-  const iconURL = messageSettings.iconURL;
-  let endpoint = messageSettings.endpoint;
-  endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
-  const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
+    const iconURL = messageSettings.iconURL;
+    const endpoint = useMemo(
+      () => getIconEndpoint({ endpointsConfig, iconURL, endpoint: messageSettings.endpoint }),
+      [endpointsConfig, iconURL, messageSettings.endpoint],
+    );
+
+    const endpointIconURL = useMemo(
+      () => getEndpointField(endpointsConfig, endpoint, 'iconURL'),
+      [endpointsConfig, endpoint],
+    );
+
+    if (isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
+      return (
+        <ConvoIconURL
+          preset={messageSettings as typeof messageSettings & TPreset}
+          context="message"
+          assistantAvatar={assistantAvatar}
+          endpointIconURL={endpointIconURL}
+          assistantName={assistantName}
+        />
+      );
+    }

-  if (message?.isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
    return (
-      <ConvoIconURL
-        preset={messageSettings as typeof messageSettings & TPreset}
-        context="message"
-        assistantAvatar={assistantAvatar}
-        endpointIconURL={endpointIconURL}
+      <Icon
+        isCreatedByUser={isCreatedByUser}
+        endpoint={endpoint}
+        iconURL={!assistant ? endpointIconURL : assistantAvatar}
+        model={message?.model ?? conversation?.model}
        assistantName={assistantName}
+        size={28.8}
      />
    );
-  }
+  },
+);

-  return (
-    <Icon
-      {...messageSettings}
-      endpoint={endpoint}
-      iconURL={!assistant ? endpointIconURL : assistantAvatar}
-      model={message?.model ?? conversation?.model}
-      assistantName={assistantName}
-      size={28.8}
-    />
-  );
-}
+MessageIcon.displayName = 'MessageIcon';

-export default memo(MessageIcon);
+export default MessageIcon;
--- a/client/src/components/Endpoints/ConvoIconURL.tsx
+++ b/client/src/components/Endpoints/ConvoIconURL.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import type { TPreset } from 'librechat-data-provider';
 import type { IconMapProps } from '~/common';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
@ -41,7 +41,7 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
    },
  ) => React.JSX.Element;

-  const isURL = iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/'));
+  const isURL = !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/')));

  if (!isURL) {
    Icon = icons[iconURL] ?? icons.unknown;
@ -77,4 +77,4 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
  );
 };

-export default ConvoIconURL;
+export default memo(ConvoIconURL);
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@ -1,4 +1,5 @@
-import { memo } from 'react';
+import React, { memo } from 'react';
+import type { TUser } from 'librechat-data-provider';
 import type { IconProps } from '~/common';
 import MessageEndpointIcon from './MessageEndpointIcon';
 import { useAuthContext } from '~/hooks/AuthContext';
@ -7,7 +8,44 @@ import useLocalize from '~/hooks/useLocalize';
 import { UserIcon } from '~/components/svg';
 import { cn } from '~/utils';

-const Icon: React.FC<IconProps> = (props) => {
+type UserAvatarProps = {
+  size: number;
+  user?: TUser;
+  avatarSrc: string;
+  username: string;
+  className?: string;
+};
+
+const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAvatarProps) => (
+  <div
+    title={username}
+    style={{
+      width: size,
+      height: size,
+    }}
+    className={cn('relative flex items-center justify-center', className ?? '')}
+  >
+    {!(user?.avatar ?? '') && (!(user?.username ?? '') || user?.username.trim() === '') ? (
+      <div
+        style={{
+          backgroundColor: 'rgb(121, 137, 255)',
+          width: '20px',
+          height: '20px',
+          boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
+        }}
+        className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
+      >
+        <UserIcon />
+      </div>
+    ) : (
+      <img className="rounded-full" src={user?.avatar ?? avatarSrc} alt="avatar" />
+    )}
+  </div>
+));
+
+UserAvatar.displayName = 'UserAvatar';
+
+const Icon: React.FC<IconProps> = memo((props) => {
  const { user } = useAuthContext();
  const { size = 30, isCreatedByUser } = props;

@ -15,36 +53,20 @@ const Icon: React.FC<IconProps> = (props) => {
  const localize = useLocalize();

  if (isCreatedByUser) {
-    const username = user?.name || user?.username || localize('com_nav_user');
-
+    const username = user?.name ?? user?.username ?? localize('com_nav_user');
    return (
-      <div
-        title={username}
-        style={{
-          width: size,
-          height: size,
-        }}
-        className={cn('relative flex items-center justify-center', props.className ?? '')}
-      >
-        {!user?.avatar && !user?.username ? (
-          <div
-            style={{
-              backgroundColor: 'rgb(121, 137, 255)',
-              width: '20px',
-              height: '20px',
-              boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
-            }}
-            className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
-          >
-            <UserIcon />
-          </div>
-        ) : (
-          <img className="rounded-full" src={user?.avatar || avatarSrc} alt="avatar" />
-        )}
-      </div>
+      <UserAvatar
+        size={size}
+        user={user}
+        avatarSrc={avatarSrc}
+        username={username}
+        className={props.className}
+      />
    );
  }
  return <MessageEndpointIcon {...props} />;
-};
+});

-export default memo(Icon);
+Icon.displayName = 'Icon';
+
+export default Icon;
--- a/client/src/components/Prompts/Groups/ChatGroupItem.tsx
+++ b/client/src/components/Prompts/Groups/ChatGroupItem.tsx
@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, memo } from 'react';
 import { Menu as MenuIcon, Edit as EditIcon, EarthIcon, TextSearch } from 'lucide-react';
 import type { TPromptGroup } from 'librechat-data-provider';
 import {
@ -14,7 +14,7 @@ import PreviewPrompt from '~/components/Prompts/PreviewPrompt';
 import ListCard from '~/components/Prompts/Groups/ListCard';
 import { detectVariables } from '~/utils';

-export default function ChatGroupItem({
+function ChatGroupItem({
  group,
  instanceProjectId,
 }: {
@ -116,3 +116,5 @@ export default function ChatGroupItem({
    </>
  );
 }
+
+export default memo(ChatGroupItem);
--- a/client/src/components/ui/ControlCombobox.tsx
+++ b/client/src/components/ui/ControlCombobox.tsx
@ -1,6 +1,6 @@
 import * as Ariakit from '@ariakit/react';
 import { matchSorter } from 'match-sorter';
-import { startTransition, useMemo, useState, useEffect, useRef } from 'react';
+import { startTransition, useMemo, useState, useEffect, useRef, memo } from 'react';
 import { cn } from '~/utils';
 import type { OptionWithIcon } from '~/common';
 import { Search } from 'lucide-react';
@ -17,7 +17,7 @@ interface ControlComboboxProps {
  SelectIcon?: React.ReactNode;
 }

-export default function ControlCombobox({
+function ControlCombobox({
  selectedValue,
  displayValue,
  items,
@ -121,3 +121,5 @@ export default function ControlCombobox({
    </div>
  );
 }
+
+export default memo(ControlCombobox);
--- a/client/src/components/ui/DropdownPopup.tsx
+++ b/client/src/components/ui/DropdownPopup.tsx
@ -37,6 +37,10 @@ const DropdownPopup: React.FC<DropdownProps> = ({
          <MenuButton
            onClick={handleButtonClick}
            className={`inline-flex items-center gap-2 rounded-md ${className}`}
+            /** This is set as `div` since triggers themselves are buttons;
+             * prevents React Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
+             */
+            as="div"
          >
            {trigger}
          </MenuButton>
--- a/client/src/hooks/Chat/useChatFunctions.ts
+++ b/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 }) => {
--- a/client/src/hooks/Messages/useMessageHelpers.tsx
+++ b/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)) {
--- a/client/src/hooks/Messages/useMessageProcess.tsx
+++ b/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);
    }
--- a/client/src/hooks/SSE/useContentHandler.ts
+++ b/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,
--- a/client/src/hooks/SSE/useEventHandlers.ts
+++ b/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 || {};
--- a/client/src/hooks/SSE/useSSE.ts
+++ b/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);
--- a/client/src/store/families.ts
+++ b/client/src/store/families.ts
@ -75,7 +75,7 @@ const conversationByIndex = atomFamily<TConversation | null, string | number>({
        const index = Number(node.key.split('__')[1]);
        if (newValue?.assistant_id) {
          localStorage.setItem(
-            `${LocalStorageKeys.ASST_ID_PREFIX}${index}${newValue?.endpoint}`,
+            `${LocalStorageKeys.ASST_ID_PREFIX}${index}${newValue.endpoint}`,
            newValue.assistant_id,
          );
        }
@ -139,6 +139,17 @@ const showStopButtonByIndex = atomFamily<boolean, string | number>({
 const abortScrollFamily = atomFamily({
  key: 'abortScrollByIndex',
  default: false,
+  effects: [
+    ({ onSet, node }) => {
+      onSet(async (newValue) => {
+        const key = Number(node.key.split(Constants.COMMON_DIVIDER)[1]);
+        logger.log('message_scrolling', 'Recoil Effect: Setting abortScrollByIndex', {
+          key,
+          newValue,
+        });
+      });
+    },
+  ] as const,
 });

 const isSubmittingFamily = atomFamily({
--- a/client/src/utils/logger.ts
+++ b/client/src/utils/logger.ts
@ -1,37 +1,44 @@
 const isDevelopment = import.meta.env.MODE === 'development';
 const isLoggerEnabled = import.meta.env.VITE_ENABLE_LOGGER === 'true';
+const loggerFilter = import.meta.env.VITE_LOGGER_FILTER || '';

-const logger = {
-  log: (...args: unknown[]) => {
+type LogFunction = (...args: unknown[]) => void;
+
+const createLogFunction = (consoleMethod: LogFunction): LogFunction => {
+  return (...args: unknown[]) => {
    if (isDevelopment || isLoggerEnabled) {
-      console.log(...args);
+      const tag = typeof args[0] === 'string' ? args[0] : '';
+      if (shouldLog(tag)) {
+        if (tag && args.length > 1) {
+          consoleMethod(`[${tag}]`, ...args.slice(1));
+        } else {
+          consoleMethod(...args);
+        }
+      }
    }
-  },
-  warn: (...args: unknown[]) => {
-    if (isDevelopment || isLoggerEnabled) {
-      console.warn(...args);
-    }
-  },
-  error: (...args: unknown[]) => {
-    if (isDevelopment || isLoggerEnabled) {
-      console.error(...args);
-    }
-  },
-  info: (...args: unknown[]) => {
-    if (isDevelopment || isLoggerEnabled) {
-      console.info(...args);
-    }
-  },
-  debug: (...args: unknown[]) => {
-    if (isDevelopment || isLoggerEnabled) {
-      console.debug(...args);
-    }
-  },
-  dir: (...args: unknown[]) => {
-    if (isDevelopment || isLoggerEnabled) {
-      console.dir(...args);
-    }
-  },
+  };
 };

+const logger = {
+  log: createLogFunction(console.log),
+  warn: createLogFunction(console.warn),
+  error: createLogFunction(console.error),
+  info: createLogFunction(console.info),
+  debug: createLogFunction(console.debug),
+  dir: createLogFunction(console.dir),
+};
+
+function shouldLog(tag: string): boolean {
+  if (!loggerFilter) {
+    return true;
+  }
+  /* If no tag is provided, always log */
+  if (!tag) {
+    return true;
+  }
+  return loggerFilter
+    .split(',')
+    .some((filter) => tag.toLowerCase().includes(filter.trim().toLowerCase()));
+}
+
 export default logger;
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
@ -2,6 +2,7 @@

 interface ImportMetaEnv {
  readonly VITE_ENABLE_LOGGER: string;
+  readonly VITE_LOGGER_FILTER: string;
  // Add other env variables here
 }

--- a/package-lock.json
+++ b/package-lock.json
@ -31493,7 +31493,7 @@
    },
    "packages/data-provider": {
      "name": "librechat-data-provider",
-      "version": "0.7.413",
+      "version": "0.7.414",
      "license": "ISC",
      "dependencies": {
        "@types/js-yaml": "^4.0.9",
--- a/packages/data-provider/package.json
+++ b/packages/data-provider/package.json
@ -1,6 +1,6 @@
 {
  "name": "librechat-data-provider",
-  "version": "0.7.413",
+  "version": "0.7.414",
  "description": "data services for librechat apps",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
--- a/packages/data-provider/src/types.ts
+++ b/packages/data-provider/src/types.ts
@ -58,11 +58,13 @@ export type TSubmission = {
  messages: TMessage[];
  isRegenerate?: boolean;
  conversationId?: string;
-  initialResponse: TMessage;
+  initialResponse?: TMessage;
  conversation: Partial<TConversation>;
  endpointOption: TEndpointOption;
 };

+export type EventSubmission = Omit<TSubmission, 'initialResponse'> & { initialResponse: TMessage };
+
 export type TPluginAction = {
  pluginKey: string;
  action: 'install' | 'uninstall';