diff --git a/src/client/components/ConversationWrapper.tsx b/src/client/components/ConversationWrapper.tsx index 1d0e2e3..15b5d0e 100644 --- a/src/client/components/ConversationWrapper.tsx +++ b/src/client/components/ConversationWrapper.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useState, useCallback } from "react"; +import { useState, useCallback, useRef, useEffect } from "react"; import { useParams } from "react-router"; import { Redirect } from "react-router-dom"; @@ -21,12 +21,13 @@ export default function ConversationWrapper() { const { id }: { id: string } = useParams(); const { socket, isConnected } = useSocket(); const [isLoading, setIsLoading] = useState(false); - const { data: conversations } = useQuery( + const chatWindowRef = useRef(null); + const { data: conversations, refetch } = useQuery( getConversations, { chatId: Number(id), }, - { enabled: !!id, refetchInterval: 1000 } + { enabled: !!id } ); const googleRedirectLoginMsg: any = getQueryParam("msg"); @@ -55,6 +56,27 @@ export default function ConversationWrapper() { ] ); + useSocketListener("newConversationAddedToDB", reFetchConversations); + + function reFetchConversations() { + refetch(); + } + + useEffect(() => { + scrollToBottom(); + }, [conversations]); + + const scrollToBottom = () => { + if (chatWindowRef.current) { + // @ts-ignore + chatWindowRef.current.scrollTo({ + // @ts-ignore + top: chatWindowRef.current.scrollHeight, + behavior: "smooth", + }); + } + }; + async function addMessagesToConversation( userQuery: string, conv_id?: number, @@ -137,7 +159,11 @@ export default function ConversationWrapper() {