Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Danny Avila 2023-09-22 16:16:57 -04:00 • committed by GitHub
parent 5d4b168df5
commit 7c0379ba51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 55 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Endpoints/Icon.tsx
View file

@ -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

14
client/src/components/Messages/Message.tsx
View file

@ -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) ? (

46
client/src/components/Messages/Messages.tsx
View file

@ -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