Added Reaction support,

packages/examples/boilerplate/index.js

@@ -8,7 +8,7 @@ const signerAlice = ethers.Wallet.createRandom();
 const userAlice = await PushAPI.initialize(signerAlice, {
   env: CONSTANTS.ENV.PROD,
 });
-const userBobAddress = '0x60cD05eb31cc16cC37163D514bEF162406d482e1';
+const userBobAddress = '0x0149C2723496fEF62e6e7fa79A31E5ea22bA70C7';
 
 const generateRandomWordsWithTimestamp = () => {
   return `${Math.random()
@@ -17,7 +17,13 @@ const generateRandomWordsWithTimestamp = () => {
 };
 
 userAlice.chat.send(userBobAddress, {
-  content: "Gm gm! It's a me... Alice! - " + generateRandomWordsWithTimestamp(),
+  type: 'Reaction',
+  content: '👍',
+  reference: 'bafyreia2okco5ocdxmoxon72erviypaht74u3dqunf3vydu237ybju4kw4',
 });
 
 console.log('Message sent from Alice to ', userBobAddress);
+// const groupPermissions = await userAlice.chat.group.info(
+//   'a7d0581affdaea7b80be836ea5f8a982c0dfd56fb30ee2b01c64980afb152af7'
+// );
+// console.log('info', groupPermissions);

packages/uiweb/.babelrc

@@ -15,7 +15,8 @@
       {
         "root": ["./src"],
         "alias": {
-          "components": "./src/lib/components"
+          "@components": "./src/lib/components",
+          "@icons": "./src/lib/icons"
           // Add more aliases as needed
         }
       }

packages/uiweb/package.json

@@ -37,7 +37,7 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "@pushprotocol/restapi": "1.7.17",
+    "@pushprotocol/restapi": "1.7.19",
     "@pushprotocol/socket": "^0.5.0",
     "react": ">=16.8.0",
     "styled-components": "^6.0.8"

packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx

@@ -174,7 +174,9 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
         overrideAccount,
       });
 
-      console.debug('UIWeb::ChatPreviewList::loadMoreChats:: Fetched', type, nextpage, currentNonce, chatList);
+      console.debug(
+        `UIWeb::ChatPreviewList::loadMoreChats:: Fetched type - ${type} - nextpage - ${nextpage} - currentNonce - ${currentNonce} - chatList - ${chatList}`
+      );
 
       if (chatList) {
         // get and transform chats
@@ -489,12 +491,25 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
 
   useEffect(() => {
     if (
+      chatPreviewList.page !== 0 &&
       listInnerRef &&
       listInnerRef?.current &&
       listInnerRef?.current?.parentElement &&
-      !chatPreviewList.loading &&
-      !chatPreviewList.loaded
+      !chatPreviewList.loading
     ) {
+      console.debug(
+        'UIWeb::ChatPreviewList::useEffect[chatPreviewList.items]::Checking if we need to load more chats::',
+        chatPreviewList,
+        listInnerRef.current.clientHeight,
+        SCROLL_LIMIT,
+        listInnerRef.current.parentElement.clientHeight,
+        listInnerRef.current.clientHeight + SCROLL_LIMIT < listInnerRef.current.parentElement.clientHeight
+      );
+
+      if (chatPreviewList.loaded) {
+        return;
+      }
+
       if (listInnerRef.current.clientHeight + SCROLL_LIMIT < listInnerRef.current.parentElement.clientHeight) {
         // set loading to true
         setChatPreviewList((prev) => ({
@@ -504,7 +519,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
         }));
       }
     }
-  }, [chatPreviewList.page]);
+  }, [chatPreviewList.items]);
 
   // If badges count change
   useEffect(() => {
@@ -610,7 +625,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
               message: 'Invalid search',
             };
           }
-          console.debug(error);
+
           if (!error) {
             const chatInfo = await fetchChat({ chatId: formattedChatId });
             if (chatInfo && chatInfo?.meta?.group)

packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx

@@ -355,7 +355,6 @@ export const ChatProfile: React.FC<IChatProfile> = ({
 const Container = styled(Section)`
   width: auto;
   max-width: 100%;
-  overflow: hidden;
   background: ${(props) => props.theme.backgroundColor.chatProfileBackground};
   border: ${(props) => props.theme.border?.chatProfile};
   border-radius: ${(props) => props.theme.borderRadius?.chatProfile};