fix: loading messages

src/components/FloatingSupportChat/Chat.tsx

@@ -17,7 +17,6 @@ import {
   useTicketMessages,
   getMessageFromFetchError,
   useSSESubscription,
-  useEventListener,
   createTicket,
 } from "@frontend/kitui";
 import { enqueueSnackbar } from "notistack";
@@ -40,7 +39,7 @@ import {
   addOrUpdateUnauthMessages,
   setUnauthTicketMessageFetchState,
   setUnauthIsPreventAutoscroll,
-  incrementUnauthMessageApiPage,
+  incrementUnauthMessage,
   setIsMessageSending,
 } from "@root/stores/tickets";
 import { useUserStore } from "@root/stores/user";
@@ -49,6 +48,8 @@ import ChatDocument from "./ChatDocument";
 import ChatImage from "./ChatImage";
 import ChatVideo from "./ChatVideo";
 
+import type { WheelEvent, TouchEvent } from "react";
+
 type ModalWarningType =
   | "errorType"
   | "errorSize"
@@ -171,14 +172,12 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
         if (fetchState !== "idle") return;
 
         if (chatBox.scrollTop < chatBox.clientHeight) {
-          incrementUnauthMessageApiPage();
+          incrementUnauthMessage();
         }
       }, 200),
     [fetchState]
   );
 
-  useEventListener("scroll", throttledScrollHandler, chatBoxRef);
-
   useEffect(
     function scrollOnNewMessage() {
       if (!chatBoxRef.current) return;
@@ -202,6 +201,14 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
     }
   }, [open, messages]);
 
+  const loadNewMessages = (
+    event: WheelEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>
+  ) => {
+    event.stopPropagation();
+
+    throttledScrollHandler();
+  };
+
   async function handleSendMessage() {
     if (!messageField || isMessageSending) return;
 
@@ -386,6 +393,8 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
             }}
           >
             <Box
+              onWheel={loadNewMessages}
+              onTouchMove={loadNewMessages}
               ref={chatBoxRef}
               sx={{
                 display: "flex",

src/stores/tickets.ts

@@ -169,11 +169,10 @@ export const setUnauthIsPreventAutoscroll = (isPreventAutoscroll: boolean) =>
     ticket.isPreventAutoscroll = isPreventAutoscroll;
   });
 
-export const incrementUnauthMessageApiPage = () => {
-  const state = useTicketStore.getState();
-
-  useTicketStore.setState({ apiPage: state.apiPage + 1 });
-};
+export const incrementUnauthMessage = () =>
+  updateTicket((ticket) => {
+    ticket.apiPage++;
+  });
 
 export const setIsMessageSending = (
   isMessageSending: AuthData["isMessageSending"]