feat: CSL-778

src/components/shared/chat-list/chat-list-item.component.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useMemo } from 'react';
 
-import { Flex, List, Skeleton } from 'antd';
+import { Badge, Flex, List, Skeleton } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import emptyAvatar from 'assets/emptyAvatar.svg';
@@ -31,12 +31,18 @@ interface ContactListItemProps {
   lastMessage: MessageInterface;
   onNameExtracted?: (chatId: string, name: string) => void;
   showDescription?: boolean;
+  unreadCount?: number;
+  onClearUnread?: () => void;
 }
 
+const WABA_POOLS = ['7835', '9908'];
+
 const ChatListItem: FC<ContactListItemProps> = ({
   lastMessage,
   onNameExtracted,
   showDescription = true,
+  unreadCount,
+  onClearUnread,
 }) => {
   const {
     t,
@@ -151,6 +157,10 @@ const ChatListItem: FC<ContactListItemProps> = ({
     });
 
     setSearchQuery('');
+
+    if (onClearUnread) {
+      onClearUnread();
+    }
   };
 
   return (
@@ -196,7 +206,21 @@ const ChatListItem: FC<ContactListItemProps> = ({
           }
         />
         {showDescription && (
-          <span style={{ textAlign: 'end', alignSelf: 'start' }}>{messageDate}</span>
+          <Flex vertical align="end" style={{ alignSelf: 'start' }} gap={4}>
+            <span style={{ textAlign: 'end' }}>{messageDate}</span>
+            {unreadCount &&
+              unreadCount > 0 &&
+              WABA_POOLS.includes(instanceCredentials.idInstance.toString().slice(0, 4)) && (
+                <Badge
+                  count={unreadCount}
+                  style={{
+                    backgroundColor: 'var(--primary-color)',
+                    boxShadow: '0 0 0 1px #fff',
+                    textAlign: 'center',
+                  }}
+                />
+              )}
+          </Flex>
         )}
       </Skeleton>
     </List.Item>

src/components/shared/chat-list/chat-list.component.tsx

@@ -38,6 +38,10 @@ const ChatList: FC = () => {
   const [page, setPage] = useState(1);
   const [contactsPage, setContactsPage] = useState(1);
   const [messagesPage, setMessagesPage] = useState(1);
+  const [initialLoaded, setInitialLoaded] = useState(false);
+
+  const [initialMessageIds, setInitialMessageIds] = useState<Set<string>>(new Set());
+  const [unreadCounts, setUnreadCounts] = useState<Record<string, number>>({});
 
   const limit = isMiniVersion ? 5 : matchMedia ? 16 : 12;
 
@@ -59,6 +63,46 @@ const ChatList: FC = () => {
   const pagedFilteredContacts = filteredContacts.slice(0, contactsPage * limit);
   const pagedFilteredMessages = filteredMessages.slice(0, messagesPage * limit);
 
+  useEffect(() => {
+    if (!initialLoaded && allMessages.length > 0) {
+      const messageIds = new Set(
+        allMessages.map((msg) => msg.idMessage || `${msg.chatId}-${msg.timestamp}`)
+      );
+      setInitialMessageIds(messageIds);
+      setInitialLoaded(true);
+    }
+  }, [allMessages, initialLoaded]);
+
+  useEffect(() => {
+    if (!initialLoaded || allMessages.length === 0) return;
+
+    const prevIds = initialMessageIds;
+    const newIds = new Set(prevIds);
+
+    const newUnreadCounts: Record<string, number> = { ...unreadCounts };
+
+    allMessages.forEach((msg) => {
+      const messageId = msg.idMessage || `${msg.chatId}-${msg.timestamp}`;
+
+      if (!prevIds.has(messageId)) {
+        newUnreadCounts[msg.chatId] = (newUnreadCounts[msg.chatId] || 0) + 1;
+      }
+
+      newIds.add(messageId);
+    });
+
+    setInitialMessageIds(newIds);
+    setUnreadCounts(newUnreadCounts);
+  }, [allMessages, initialLoaded]);
+
+  const clearUnreadCount = (chatId: string) => {
+    setUnreadCounts((prev) => {
+      const updated = { ...prev };
+      delete updated[chatId];
+      return updated;
+    });
+  };
+
   useEffect(() => {
     if (!allMessages.length) return;
 
@@ -188,6 +232,8 @@ const ChatList: FC = () => {
                       key={`${msg.chatId}-${msg.idMessage}`}
                       lastMessage={msg}
                       onNameExtracted={handleNameExtracted}
+                      unreadCount={unreadCounts[msg.chatId]}
+                      onClearUnread={() => clearUnreadCount(msg.chatId)}
                     />
                   )}
                   split={false}
@@ -210,6 +256,8 @@ const ChatList: FC = () => {
                 key={message.chatId}
                 lastMessage={message}
                 onNameExtracted={handleNameExtracted}
+                unreadCount={unreadCounts[message.chatId]}
+                onClearUnread={() => clearUnreadCount(message.chatId)}
               />
             )}
             loading={{