From 8f5785659ce064f398dec09d277e4a5992e81de9 Mon Sep 17 00:00:00 2001
From: Pritipriya Singh <mail2pritipriya@gmail.com>
Date: Mon, 13 Nov 2023 17:47:39 +0530
Subject: [PATCH] fix: socket issue & moving to the top on sending a message

---
 .../src/lib/components/supportChat/Chat.tsx   |  2 +-
 .../src/lib/components/supportChat/Modal.tsx  | 31 ++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/uiweb/src/lib/components/supportChat/Chat.tsx b/packages/uiweb/src/lib/components/supportChat/Chat.tsx
index b2e2b2a04..4686f204b 100644
--- a/packages/uiweb/src/lib/components/supportChat/Chat.tsx
+++ b/packages/uiweb/src/lib/components/supportChat/Chat.tsx
@@ -58,7 +58,7 @@ export type ButtonStyleProps = {
     setChats(uniqueChats);
   };
   const socketData = useSDKSocket({
-    account: account,
+    account: accountadd,
     env,
     apiKey,
   });
diff --git a/packages/uiweb/src/lib/components/supportChat/Modal.tsx b/packages/uiweb/src/lib/components/supportChat/Modal.tsx
index 6abed42d8..a989df506 100644
--- a/packages/uiweb/src/lib/components/supportChat/Modal.tsx
+++ b/packages/uiweb/src/lib/components/supportChat/Modal.tsx
@@ -59,17 +59,32 @@ export const Modal: React.FC = () => {
     timestamp: undefined,
     icon: <HandWaveSvg fill={theme.btnColorPrimary}/>,
   };
-  const onScroll = () => {
+  const onScroll = async () => {
     if (listInnerRef.current) {
       const { scrollTop } = listInnerRef.current;
       if (scrollTop === 0) {
-        // This will be triggered after hitting the first element.
-        // pagination
-        getChatCall();
+        const content = listInnerRef.current;
+        const curScrollPos = content.scrollTop;
+        const oldScroll = content.scrollHeight - content.clientHeight;
+
+        await getChatCall();
+
+        const newScroll = content.scrollHeight - content.clientHeight;
+        content.scrollTop = curScrollPos + (newScroll - oldScroll);
       }
     }
   };
 
+  const scrollToBottom = () => {
+    setTimeout(()=>{
+      if (listInnerRef.current) {
+        listInnerRef.current.scrollTop = listInnerRef.current.scrollHeight +100;
+
+      }
+    },0)
+  
+  };
+
   const getChatCall = async () => {
     if (!connectedUser) return;
     if (wasLastListPresent && !lastThreadHashFetched) return;
@@ -86,6 +101,7 @@ export const Modal: React.FC = () => {
     setLastThreadHashFetched(lastThreadHash);
     setWasLastListPresent(lastListPresent);
     setLoading(false);
+    scrollToBottom();
   };
 
   const connectUser = async () => {
@@ -109,6 +125,7 @@ export const Modal: React.FC = () => {
       const chat = await decryptChat({ message, connectedUser, env });
       socketData.messagesSinceLastConnection.decrypted = true;
       setChatsSorted([...chats, chat]);
+      scrollToBottom();
     }
   }
 
@@ -120,7 +137,11 @@ export const Modal: React.FC = () => {
 
   useEffect(() => {
     getChatCall();
-  }, [connectedUser]);
+  }, [connectedUser, env, account]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [connectedUser, env, account, lastThreadHashFetched]);
 
   return (
     <Container theme={theme}>