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

🎨 fix: Update MessagesView Styling (#1254)

Browse source 
* style: update MessagesView to exact ChatGPT styling

* style(ScrollToBottom): make fixed for larger screens

* fix(ScrollToBottom): revert to absolute from fixed and change bottom values
This commit is contained in:
Danny Avila 2023-12-01 10:11:39 -05:00 • committed by GitHub
parent 98827440eb
commit 3e7a29c9dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

65
client/src/components/Chat/Messages/MessagesView.tsx
View file

@ -14,11 +14,12 @@ export default function MessagesView({
messagesTree?: TMessage[] | null; messagesTree?: TMessage[] | null;
Header?: ReactNode; Header?: ReactNode;
}) { }) {
const timeoutIdRef = useRef<NodeJS.Timeout>();
const scrollableRef = useRef<HTMLDivElement | null>(null); const scrollableRef = useRef<HTMLDivElement | null>(null);
const messagesEndRef = useRef<HTMLDivElement | null>(null); const messagesEndRef = useRef<HTMLDivElement | null>(null);
const [showScrollButton, setShowScrollButton] = useState(false); const [showScrollButton, setShowScrollButton] = useState(false);
const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1); const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
const { conversation, showPopover, setAbortScroll } = useChatContext(); const { conversation, setAbortScroll } = useChatContext();
const { conversationId } = conversation ?? {}; const { conversationId } = conversation ?? {};
const { screenshotTargetRef } = useScreenshot(); const { screenshotTargetRef } = useScreenshot();
@ -36,24 +37,21 @@ export default function MessagesView({
}, [scrollableRef]); }, [scrollableRef]);
useLayoutEffect(() => { useLayoutEffect(() => {
const timeoutId = setTimeout(() => { const scrollableElement = scrollableRef.current;
checkIfAtBottom(); if (!scrollableElement) {
}, 650); return;
}
// Add a listener on the window object const timeoutId = setTimeout(checkIfAtBottom, 650);
window.addEventListener('scroll', checkIfAtBottom);
return () => { return () => {
clearTimeout(timeoutId); clearTimeout(timeoutId);
window.removeEventListener('scroll', checkIfAtBottom);
}; };
}, [_messagesTree, checkIfAtBottom]); }, [checkIfAtBottom]);
let timeoutId: ReturnType<typeof setTimeout> | undefined; const debouncedHandleScroll = useCallback(() => {
const debouncedHandleScroll = () => { clearTimeout(timeoutIdRef.current);
clearTimeout(timeoutId); timeoutIdRef.current = setTimeout(checkIfAtBottom, 100);
timeoutId = setTimeout(checkIfAtBottom, 100); }, [checkIfAtBottom]);
};
const scrollCallback = () => setShowScrollButton(false); const scrollCallback = () => setShowScrollButton(false);
const { scrollToRef: scrollToBottom, handleSmoothToRef } = useScrollToRef({ const { scrollToRef: scrollToBottom, handleSmoothToRef } = useScrollToRef({
@ -66,13 +64,17 @@ export default function MessagesView({
}); });
return ( return (
<div <div className="flex-1 overflow-hidden overflow-y-auto">
className="flex-1 overflow-y-auto pt-0" <div className="dark:gpt-dark-gray relative h-full">
ref={scrollableRef} <div
onScroll={debouncedHandleScroll} onScroll={debouncedHandleScroll}
> ref={scrollableRef}
<div className="dark:gpt-dark-gray h-full"> style={{
<div> height: '100%',
overflowY: 'auto',
width: '100%',
}}
>
<div className="flex flex-col pb-9 text-sm dark:bg-transparent"> <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
{(_messagesTree && _messagesTree?.length == 0) || _messagesTree === null ? ( {(_messagesTree && _messagesTree?.length == 0) || _messagesTree === null ? (
<div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300"> <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300">
@ -90,18 +92,6 @@ export default function MessagesView({
setCurrentEditId={setCurrentEditId} setCurrentEditId={setCurrentEditId}
currentEditId={currentEditId ?? null} currentEditId={currentEditId ?? null}
/> />
<CSSTransition
in={showScrollButton}
timeout={400}
classNames="scroll-down"
unmountOnExit={false}
// appear
>
{() =>
showScrollButton &&
!showPopover && <ScrollToBottom scrollHandler={handleSmoothToRef} />
}
</CSSTransition>
</div> </div>
</> </>
)} )}
@ -111,6 +101,15 @@ export default function MessagesView({
/> />
</div> </div>
</div> </div>
<CSSTransition
in={showScrollButton}
timeout={400}
classNames="scroll-down"
unmountOnExit={false}
// appear
>
{() => showScrollButton && <ScrollToBottom scrollHandler={handleSmoothToRef} />}
</CSSTransition>
</div> </div>
</div> </div>
); );

2
client/src/components/Messages/ScrollToBottom.tsx
View file

@ -6,7 +6,7 @@ export default function ScrollToBottom({ scrollHandler }: Props) {
return ( return (
<button <button
onClick={scrollHandler} onClick={scrollHandler}
className="absolute bottom-[124px] right-6 z-[62] cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[180px] lg:bottom-[120px]" className="absolute bottom-2 right-6 z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200"
> >
<svg <svg
stroke="currentColor" stroke="currentColor"