|
@@ -22,6 +22,7 @@ import React, {
|
|
ReactNode,
|
|
ReactNode,
|
|
lazy,
|
|
lazy,
|
|
ChangeEvent,
|
|
ChangeEvent,
|
|
|
|
+ UIEvent,
|
|
} from "react";
|
|
} from "react";
|
|
import { SxProps, Theme, darken, lighten } from "@mui/material/styles";
|
|
import { SxProps, Theme, darken, lighten } from "@mui/material/styles";
|
|
import Avatar from "@mui/material/Avatar";
|
|
import Avatar from "@mui/material/Avatar";
|
|
@@ -250,6 +251,7 @@ const Chat = (props: ChatProps) => {
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
|
const [objectURLs, setObjectURLs] = useState<string[]>([]);
|
|
const [objectURLs, setObjectURLs] = useState<string[]>([]);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
+ const userScrolled = useRef(false);
|
|
|
|
|
|
const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
|
|
const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
|
|
const active = useDynamicProperty(props.active, props.defaultActive, true);
|
|
const active = useDynamicProperty(props.active, props.defaultActive, true);
|
|
@@ -424,7 +426,7 @@ const Chat = (props: ChatProps) => {
|
|
);
|
|
);
|
|
|
|
|
|
const showBottom = useCallback(() => {
|
|
const showBottom = useCallback(() => {
|
|
- anchorDivRef.current?.scrollIntoView();
|
|
|
|
|
|
+ anchorDivRef.current?.scrollIntoView && anchorDivRef.current?.scrollIntoView();
|
|
setShowMessage(false);
|
|
setShowMessage(false);
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
@@ -450,8 +452,9 @@ const Chat = (props: ChatProps) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
page.current.key = getChatKey(0, pageSize);
|
|
page.current.key = getChatKey(0, pageSize);
|
|
|
|
+ !userScrolled.current && showBottom();
|
|
}
|
|
}
|
|
- }, [refresh, pageSize, props.messages]);
|
|
|
|
|
|
+ }, [refresh, pageSize, props.messages, showBottom]);
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
if (showMessage && !isAnchorDivVisible) {
|
|
if (showMessage && !isAnchorDivVisible) {
|
|
@@ -490,10 +493,14 @@ const Chat = (props: ChatProps) => {
|
|
[loadMoreItems]
|
|
[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 (
|
|
return (
|
|
<Tooltip title={hover || ""}>
|
|
<Tooltip title={hover || ""}>
|
|
<Paper className={`${className} ${getComponentClassName(props.children)}`} sx={boxSx} id={id}>
|
|
<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] ? (
|
|
{rows.length && !rows[0] ? (
|
|
<Grid className={getSuffixedClassNames(className, "-load")} size={12} sx={noAnchorSx}>
|
|
<Grid className={getSuffixedClassNames(className, "-load")} size={12} sx={noAnchorSx}>
|
|
<Box sx={loadMoreSx}>
|
|
<Box sx={loadMoreSx}>
|