fix: socket issue & moving to the top on sending a message

push-protocol · Nov 13, 2023 · 8f57856 · 8f57856
1 parent 6c86270
commit 8f57856
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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}>