scroll chat down when non user scroll action (#2315)

* scroll chat down when non user scroll action resolves #2281 * fix test --------- Co-authored-by: Fred Lefévère-Laoide <[email protected]>
Avaiga · Dec 12, 2024 · 2e8c6ba · 2e8c6ba
1 parent bf6c3a4
commit 2e8c6ba
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx
@@ -212,7 +212,7 @@ describe("Chat Component", () => {
         });
         jest.restoreAllMocks();
     });
-    it("Not upload image over a file size limit", async () => {
+    it("does not upload image over a file size limit", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
         const { getByText, getByAltText } = render(

diff --git a/frontend/taipy-gui/src/components/Taipy/Chat.tsx b/frontend/taipy-gui/src/components/Taipy/Chat.tsx
@@ -22,6 +22,7 @@ import React, {
     ReactNode,
     lazy,
     ChangeEvent,
+    UIEvent,
 } from "react";
 import { SxProps, Theme, darken, lighten } from "@mui/material/styles";
 import Avatar from "@mui/material/Avatar";
@@ -250,6 +251,7 @@ const Chat = (props: ChatProps) => {
     const [imagePreview, setImagePreview] = useState<string | null>(null);
     const [objectURLs, setObjectURLs] = useState<string[]>([]);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const userScrolled = useRef(false);
 
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
@@ -424,7 +426,7 @@ const Chat = (props: ChatProps) => {
     );
 
     const showBottom = useCallback(() => {
-        anchorDivRef.current?.scrollIntoView();
+        anchorDivRef.current?.scrollIntoView && anchorDivRef.current?.scrollIntoView();
         setShowMessage(false);
     }, []);
 
@@ -450,8 +452,9 @@ const Chat = (props: ChatProps) => {
                 }
             }
             page.current.key = getChatKey(0, pageSize);
+            !userScrolled.current && showBottom();
         }
-    }, [refresh, pageSize, props.messages]);
+    }, [refresh, pageSize, props.messages, showBottom]);
 
     useEffect(() => {
         if (showMessage && !isAnchorDivVisible) {
@@ -490,10 +493,14 @@ const Chat = (props: ChatProps) => {
         [loadMoreItems]
     );
 
+    const handleOnScroll = useCallback((evt: UIEvent) => {
+        userScrolled.current = (evt.target as HTMLDivElement).scrollHeight - (evt.target as HTMLDivElement).offsetHeight - (evt.target as HTMLDivElement).scrollTop > 1;
+    }, []);
+
     return (
         <Tooltip title={hover || ""}>
             <Paper className={`${className} ${getComponentClassName(props.children)}`} sx={boxSx} id={id}>
-                <Grid container rowSpacing={2} sx={gridSx} ref={scrollDivRef}>
+                <Grid container rowSpacing={2} sx={gridSx} ref={scrollDivRef} onScroll={handleOnScroll}>
                     {rows.length && !rows[0] ? (
                         <Grid className={getSuffixedClassNames(className, "-load")} size={12} sx={noAnchorSx}>
                             <Box sx={loadMoreSx}>