fix: Allow Mobile Scroll During Message Stream (danny-avila#984)

* fix(Icon/types): pick types from TMessage and TConversation

* refactor: make abortScroll a global recoil state and change props/types for useScrollToRef

* refactor(Message): invoke abort setter onTouchMove and onWheel, refactor(Messages): remove redundancy, reset abortScroll when scroll button is clicked

Author: danny-avila

client/src/common/types.ts

@@ -179,16 +179,11 @@ export type TAuthConfig = {
   loginRedirect: string;
 };
 
-export type IconProps = {
-  size?: number;
-  isCreatedByUser?: boolean;
-  button?: boolean;
-  model?: string;
-  message?: boolean;
-  className?: string;
-  endpoint?: string | null;
-  error?: boolean;
-  chatGptLabel?: string;
-  modelLabel?: string;
-  jailbreak?: boolean;
-};
+export type IconProps = Pick<TMessage, 'isCreatedByUser' | 'model' | 'error'> &
+  Pick<TConversation, 'chatGptLabel' | 'modelLabel' | 'jailbreak'> & {
+    size?: number;
+    button?: boolean;
+    message?: boolean;
+    className?: string;
+    endpoint?: string | null;
+  };

client/src/components/Endpoints/Icon.tsx

@@ -19,7 +19,7 @@ const Icon: React.FC<IconProps> = (props) => {
           width: size,
           height: size,
         }}
-        className={`relative flex items-center justify-center ${props.className || ''}`}
+        className={`relative flex items-center justify-center ${props.className ?? ''}`}
       >
         <img
           className="rounded-sm"
@@ -73,7 +73,7 @@ const Icon: React.FC<IconProps> = (props) => {
       default: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'UNKNOWN' },
     };
 
-    const { icon, bg, name } = endpointIcons[endpoint] || endpointIcons.default;
+    const { icon, bg, name } = endpointIcons[endpoint ?? ''] ?? endpointIcons.default;
 
     return (
       <div

client/src/components/Messages/Message.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useGetConversationByIdQuery } from 'librechat-data-provider';
-import { useState, useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useEffect } from 'react';
+import { useSetRecoilState, useRecoilState } from 'recoil';
 import copy from 'copy-to-clipboard';
 import { SubRow, Plugin, MessageContent } from './Content';
 // eslint-disable-next-line import/no-cycle
@@ -25,7 +25,7 @@ export default function Message({
   setSiblingIdx,
 }: TMessageProps) {
   const setLatestMessage = useSetRecoilState(store.latestMessage);
-  const [abortScroll, setAbort] = useState(false);
+  const [abortScroll, setAbortScroll] = useRecoilState(store.abortScroll);
   const { isSubmitting, ask, regenerate, handleContinue } = useMessageHandler();
   const { switchToConversation } = useConversation();
   const {
@@ -71,11 +71,11 @@ export default function Message({
   const enterEdit = (cancel?: boolean) =>
     setCurrentEditId && setCurrentEditId(cancel ? -1 : messageId);
 
-  const handleWheel = () => {
+  const handleScroll = () => {
     if (blinker) {
-      setAbort(true);
+      setAbortScroll(true);
     } else {
-      setAbort(false);
+      setAbortScroll(false);
     }
   };
 
@@ -133,7 +133,7 @@ export default function Message({
 
   return (
     <>
-      <div {...props} onWheel={handleWheel}>
+      <div {...props} onWheel={handleScroll} onTouchMove={handleScroll}>
         <div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
           <div className="relative flex h-[30px] w-[30px] flex-col items-end text-right text-xs md:text-sm">
             {typeof icon === 'string' && /[^\\x00-\\x7F]+/.test(icon as string) ? (

client/src/components/Messages/Messages.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { CSSTransition } from 'react-transition-group';
-import { useRecoilValue } from 'recoil';
 
 import ScrollToBottom from './ScrollToBottom';
 import MessageHeader from './MessageHeader';
@@ -18,6 +18,7 @@ export default function Messages({ isSearchView = false }) {
 
   const messagesTree = useRecoilValue(store.messagesTree);
   const showPopover = useRecoilValue(store.showPopover);
+  const setAbortScroll = useSetRecoilState(store.abortScroll);
   const searchResultMessagesTree = useRecoilValue(store.searchResultMessagesTree);
 
   const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree;
@@ -27,50 +28,47 @@ export default function Messages({ isSearchView = false }) {
 
   const { screenshotTargetRef } = useScreenshot();
 
-  const handleScroll = () => {
+  const checkIfAtBottom = useCallback(() => {
     if (!scrollableRef.current) {
       return;
     }
+
     const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
     const diff = Math.abs(scrollHeight - scrollTop);
     const percent = Math.abs(clientHeight - diff) / clientHeight;
-    if (percent <= 0.2) {
-      setShowScrollButton(false);
-    } else {
-      setShowScrollButton(true);
-    }
-  };
+    const hasScrollbar = scrollHeight > clientHeight && percent >= 0.15;
+    setShowScrollButton(hasScrollbar);
+  }, [scrollableRef]);
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      if (!scrollableRef.current) {
-        return;
-      }
-      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
-      const diff = Math.abs(scrollHeight - scrollTop);
-      const percent = Math.abs(clientHeight - diff) / clientHeight;
-      const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
-      setShowScrollButton(hasScrollbar);
+      checkIfAtBottom();
     }, 650);
 
     // Add a listener on the window object
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', checkIfAtBottom);
 
     return () => {
       clearTimeout(timeoutId);
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('scroll', checkIfAtBottom);
     };
-  }, [_messagesTree]);
+  }, [_messagesTree, checkIfAtBottom]);
 
   let timeoutId: ReturnType<typeof setTimeout> | undefined;
   const debouncedHandleScroll = () => {
     clearTimeout(timeoutId);
-    timeoutId = setTimeout(handleScroll, 100);
+    timeoutId = setTimeout(checkIfAtBottom, 100);
   };
 
-  const { scrollToRef: scrollToBottom, handleSmoothToRef } = useScrollToRef(messagesEndRef, () =>
-    setShowScrollButton(false),
-  );
+  const scrollCallback = () => setShowScrollButton(false);
+  const { scrollToRef: scrollToBottom, handleSmoothToRef } = useScrollToRef({
+    targetRef: messagesEndRef,
+    callback: scrollCallback,
+    smoothCallback: () => {
+      scrollCallback();
+      setAbortScroll(false);
+    },
+  });
 
   return (
     <div

client/src/hooks/useScrollToRef.ts

@@ -1,7 +1,13 @@
 import { RefObject, useCallback } from 'react';
 import throttle from 'lodash/throttle';
 
-export default function useScrollToRef(targetRef: RefObject<HTMLDivElement>, callback: () => void) {
+type TUseScrollToRef = {
+  targetRef: RefObject<HTMLDivElement>;
+  callback: () => void;
+  smoothCallback: () => void;
+};
+
+export default function useScrollToRef({ targetRef, callback, smoothCallback }: TUseScrollToRef) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const scrollToRef = useCallback(
     throttle(
@@ -20,7 +26,7 @@ export default function useScrollToRef(targetRef: RefObject<HTMLDivElement>, cal
     throttle(
       () => {
         targetRef.current?.scrollIntoView({ behavior: 'smooth' });
-        callback();
+        smoothCallback();
       },
       750,
       { leading: true },

client/src/store/index.ts

@@ -8,7 +8,7 @@ import submission from './submission';
 import search from './search';
 import preset from './preset';
 import lang from './language';
-import optionSettings from './optionSettings';
+import settings from './settings';
 
 export default {
   ...conversation,
@@ -21,5 +21,5 @@ export default {
   ...search,
   ...preset,
   ...lang,
-  ...optionSettings,
+  ...settings,
 };

client/src/store/optionSettings.ts renamed to client/src/store/settings.ts

@@ -5,6 +5,11 @@ type TOptionSettings = {
   isCodeChat?: boolean;
 };
 
+const abortScroll = atom<boolean>({
+  key: 'abortScroll',
+  default: false,
+});
+
 const optionSettings = atom<TOptionSettings>({
   key: 'optionSettings',
   default: {},
@@ -31,6 +36,7 @@ const showPopover = atom<boolean>({
 });
 
 export default {
+  abortScroll,
   optionSettings,
   showPluginStoreDialog,
   showAgentSettings,