diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index 9e354c1..f5247c2 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -115,6 +115,7 @@ export function ChatBody({
messenger ? (
) : (
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index f98daff..5be98db 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -10,11 +10,16 @@ import { ChatMessageContent } from "./ChatMessageContent";
type ChatMessagesProps = {
messages: ChatMessage[];
+ loadNextDay: () => void;
fetchMetadata?: (url: string) => Promise;
};
-export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
- const [scrollOnBot, setScrollOnBot] = useState(false);
+export function ChatMessages({
+ messages,
+ loadNextDay,
+ fetchMetadata,
+}: ChatMessagesProps) {
+ const [scrollOnBot, setScrollOnBot] = useState(true);
const ref = useRef(null);
const today = useMemo(() => new Date().getDay(), []);
useEffect(() => {
@@ -26,6 +31,9 @@ export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
useEffect(() => {
const setScroll = () => {
if (ref && ref.current) {
+ if (ref.current.scrollTop <= 0) {
+ loadNextDay();
+ }
if (
ref.current.scrollTop + ref.current.clientHeight ==
ref.current.scrollHeight