fixed notifications for reactions

src/components/Chat/ChatGroup.tsx

@@ -19,6 +19,7 @@ import { Box, ButtonBase } from '@mui/material'
 import ShortUniqueId from "short-unique-id";
 import { ReplyPreview } from './MessageItem'
 import { ExitIcon } from '../../assets/Icons/ExitIcon'
+import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resourceTypes'
 
 
 const uid = new ShortUniqueId({ length: 5 });
@@ -123,6 +124,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
               if(hasInitialized.current){
                
                 const formatted = response.filter((rawItem)=> !rawItem?.chatReference).map((item: any)=> {
+                  
                   return {
                     ...item,
                     id: item.signature,
@@ -376,12 +378,13 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
     }, [messages])
   
 
-  const encryptChatMessage = async (data: string, secretKeyObject: any)=> {
+  const encryptChatMessage = async (data: string, secretKeyObject: any, reactiontypeNumber?: number)=> {
     try {
       return new Promise((res, rej)=> {
         chrome?.runtime?.sendMessage({ action: "encryptSingle", payload: {
           data,
-          secretKeyObject
+          secretKeyObject,
+          typeNumber: reactiontypeNumber
       }}, (response) => {
      
           if (!response?.error) {
@@ -535,8 +538,8 @@ const clearEditorContent = () => {
         ...(otherData || {})
       }
       const message64: any = await objectToBase64(objectMessage)
-   
-      const encryptSingle = await encryptChatMessage(message64, secretKeyObject)
+      const reactiontypeNumber = RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS
+      const encryptSingle = await encryptChatMessage(message64, secretKeyObject, reactiontypeNumber)
       // const res = await sendChatGroup({groupId: selectedGroup,messageText: encryptSingle})
      
       const sendMessageFunc = async () => {

src/components/Chat/ChatList.tsx

@@ -155,6 +155,10 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
 
   const handleAtBottomStateChange = (atBottom) => {
     isAtBottomRef.current = atBottom;
+    if(atBottom){
+      handleMessageSeen();
+      setShowScrollButton(false)
+    }
   };
 
   return (
@@ -165,7 +169,6 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
         itemContent={rowRenderer}
         atBottomThreshold={50}
         followOutput="smooth"
-        onScroll={handleScroll}
         atBottomStateChange={handleAtBottomStateChange}  // Detect bottom status
         increaseViewportBy={3000}
         

src/components/Group/Group.tsx

@@ -76,7 +76,7 @@ import { WebSocketActive } from "./WebsocketActive";
 import { flushSync } from "react-dom";
 import { useMessageQueue } from "../../MessageQueueContext";
 import { DrawerComponent } from "../Drawer/Drawer";
-import { isExtMsg } from "../../background";
+import { isExtMsg, isUpdateMsg } from "../../background";
 import { ContextMenu } from "../ContextMenu";
 import { MobileFooter } from "../Mobile/MobileFooter";
 import Header from "../Mobile/MobileHeader";
@@ -420,6 +420,7 @@ export const Group = ({
   const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState("");
   const [desktopSideView, setDesktopSideView] = useState('groups')
   const isFocusedRef = useRef(true);
+  const timestampEnterDataRef = useRef({});
   const selectedGroupRef = useRef(null);
   const selectedDirectRef = useRef(null);
   const groupSectionRef = useRef(null);
@@ -429,9 +430,11 @@ export const Group = ({
   const settimeoutForRefetchSecretKey = useRef(null);
   const { clearStatesMessageQueueProvider } = useMessageQueue();
   const initiatedGetMembers = useRef(false);
-  // useEffect(()=> {
-  //   setFullHeight()
-  // }, [])
+  const [groupChatTimestamps, setGroupChatTimestamps] = React.useState({});
+
+  useEffect(()=> {
+    timestampEnterDataRef.current = timestampEnterData
+  }, [timestampEnterData])
 
   useEffect(() => {
     isFocusedRef.current = isFocused;
@@ -616,12 +619,14 @@ export const Group = ({
   const groupChatHasUnread = useMemo(() => {
     let hasUnread = false;
     groups.forEach((group) => {
+      console.log('isUpdateMsg(group?.data)', isUpdateMsg(group?.data))
+
       if (
         group?.data &&
         isExtMsg(group?.data) &&
         group?.sender !== myAddress &&
-        group?.timestamp &&
-        ((!timestampEnterData[group?.groupId] && !group?.chatReference &&
+        group?.timestamp && (!isUpdateMsg(group?.data) || groupChatTimestamps[group?.groupId]) &&
+        ((!timestampEnterData[group?.groupId]  &&
           Date.now() - group?.timestamp < timeDifferenceForNotificationChats) ||
           timestampEnterData[group?.groupId] < group?.timestamp)
       ) {
@@ -918,13 +923,52 @@ export const Group = ({
     } catch (error) {}
   };
 
+  const getCountNewMesg = async (groupId, after)=> {
+    try {
+      const response = await fetch(
+        `${getBaseApiReact()}/chat/messages?after=${after}&txGroupId=${groupId}&haschatreference=false&encoding=BASE64&limit=1`
+      );
+      const data = await response.json();
+      if(data && data[0]) return data[0].timestamp
+    } catch (error) {
+      
+    }
+  }
+
+  const getLatestRegularChat = async (groups)=> {
+    try {
+      
+      const groupData = {}
+
+     const getGroupData = groups.map(async(group)=> {
+        const isUpdate = isUpdateMsg(group?.data)
+        if(!group.groupId || !group?.timestamp) return null
+        if(isUpdate && (!groupData[group.groupId] || groupData[group.groupId] < group.timestamp)){
+          const hasMoreRecentMsg = await getCountNewMesg(group.groupId, timestampEnterDataRef.current[group?.groupId] || Date.now() - 24 * 60 * 60 * 1000)
+          if(hasMoreRecentMsg){
+            groupData[group.groupId] = hasMoreRecentMsg
+          }
+        } else {
+          return null
+        }
+      })
+
+      await Promise.all(getGroupData)
+      setGroupChatTimestamps(groupData)
+    } catch (error) {
+      
+    }
+  }
+
+ 
+
   useEffect(() => {
     // Listen for messages from the background script
     chrome?.runtime?.onMessage.addListener((message, sender, sendResponse) => {
       if (message.action === "SET_GROUPS") {
         // Update the component state with the received 'sendqort' state
         setGroups(message.payload);
-
+        getLatestRegularChat(message.payload)
         setMemberGroups(message.payload);
 
         if (selectedGroupRef.current && groupSectionRef.current === "chat") {
@@ -1102,13 +1146,13 @@ export const Group = ({
     if (!findGroup) return false;
     if (!findGroup?.data || !isExtMsg(findGroup?.data)) return false;
     return (
-      findGroup?.timestamp && !findGroup?.chatReference &&
+      findGroup?.timestamp && (!isUpdateMsg(findGroup?.data) || groupChatTimestamps[findGroup?.groupId]) &&
       ((!timestampEnterData[selectedGroup?.groupId] &&
         Date.now() - findGroup?.timestamp <
           timeDifferenceForNotificationChats) ||
         timestampEnterData?.[selectedGroup?.groupId] < findGroup?.timestamp)
     );
-  }, [timestampEnterData, selectedGroup]);
+  }, [timestampEnterData, selectedGroup, groupChatTimestamps]);
 
   const isUnread = useMemo(() => {
     if (!selectedGroup) return false;
@@ -2101,7 +2145,7 @@ export const Group = ({
                         />
                       )}
                     {group?.data &&
-                      isExtMsg(group?.data) && !group?.chatReference &&
+                      isExtMsg(group?.data) && (!isUpdateMsg(group?.data) || groupChatTimestamps[group?.groupId]) &&
                       group?.sender !== myAddress &&
                       group?.timestamp &&
                       ((!timestampEnterData[group?.groupId] &&

src/components/Group/GroupMenu.tsx

@@ -128,7 +128,7 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
             
             minWidth: '24px !important'
           }}>
-            <ChatIcon sx={{ color: hasUnreadChat ? 'var(--unread)' : "#fff" }} />
+            <ChatIcon color={hasUnreadChat ? 'var(--unread)' : "#fff"}  />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
@@ -147,7 +147,7 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
             
             minWidth: '24px !important'
           }}>
-          <NotificationIcon2 sx={{ color: hasUnreadAnnouncements ? 'var(--unread)' : "#fff" }} />
+          <NotificationIcon2 color={hasUnreadAnnouncements ? 'var(--unread)' : "#fff" } />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
@@ -165,7 +165,7 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
           <ListItemIcon sx={{
             minWidth: '24px !important'
           }}>
-                     <ThreadsIcon sx={{ color: "#fff" }} />
+                     <ThreadsIcon  color={"#fff"} />
 
           </ListItemIcon>
           <ListItemText sx={{

src/components/ReactionPicker.tsx

@@ -67,8 +67,8 @@ export const ReactionPicker = ({ onReaction }) => {
       {showPicker && (
         <div className="emoji-picker" ref={pickerRef} onClick={(e) => e.preventDefault()}>
           <Picker
-            height={isMobile ? 300 : 450}
-            width={isMobile ? 250 : 350 }
+            height={isMobile ? 350 : 450}
+            width={isMobile ? 300 : 350 }
             reactionsDefaultOpen={true}
             onReactionClick={handleReaction}
             onEmojiClick={handlePicker}