nie wiem co, cos zepsulem z nieprzeczytanymi wiadomosci i nie wiem jak naprawic

client/src/components/chat/chatArea/MessagesArea.tsx

@@ -27,7 +27,6 @@ function MessagesArea() {
   const previousMessagesLength = useRef(messages.length);
   const isFocused = useWindowFocus();
   const previousTitle = useRef(document.title);
-
   const scrollToBottom = () => {
     const container = containerRef.current;
     if (container && shouldScrollToBottom) {
@@ -132,6 +131,7 @@ function MessagesArea() {
                 last_message_id: msg.message_id,
                 last_message_sender: msg.sender,
                 last_message_time: new Date().toString(),
+                last_read_message_id: prevContacts[0]?.last_message_id || null,
               },
             ];
           }
@@ -211,7 +211,7 @@ function MessagesArea() {
     const timeout = setTimeout(() => {
       setContactsList((prevContacts) => {
         return prevContacts.map((contact) =>
-          contact.conversation_id === currentContact?.conversation_id
+          contact?.conversation_id === currentContact?.conversation_id
             ? {
                 ...contact,
                 read: true,
@@ -224,6 +224,19 @@ function MessagesArea() {
     return () => clearTimeout(timeout);
   }, [isFocused]);
 
+  useEffect(() => {
+    if (!socket) return;
+    if (currentContact?.read == true) return;
+    socket.emit('message read', {
+      conversation_id: currentContact?.conversation_id,
+      message_id: messages[messages?.length - 1].message_id,
+    });
+    console.info('MESSAGE READ: ', {
+      conversation_id: currentContact?.conversation_id,
+      message_id: messages[messages?.length - 1].message_id,
+    });
+  }, [isFocused]);
+
   useEffect(() => {
     const hasNewMessages = messages.length > previousMessagesLength.current;
     previousMessagesLength.current = messages.length;
@@ -241,6 +254,8 @@ function MessagesArea() {
 
   return (
     <div ref={containerRef} className="flex flex-col h-full overflow-y-auto">
+      <p>READ STATUS: {currentContact?.read ? <p>true</p> : <p>false</p>}</p>
+      <p>ISFOCUSED: {isFocused ? <p>tak</p> : <p>nie</p>}</p>
       <p className="text-center text-gray-400">{errorMessage}</p>
       <ul className="flex-grow list-none">
         {isLoading ? <LoadingWheel /> : null}

client/src/components/chat/chatHeader/AddGroupMember.tsx

@@ -134,7 +134,7 @@ function AddGroupMember() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <button className="p-2 hover:bg-zinc-800 rounded-lg">
+        <button className="p-2 hover:bg-zinc-800 rounded-lg" title="Add member">
           <UserRoundPlus />
         </button>
       </DialogTrigger>

client/src/components/chat/chatHeader/CreateGroupButton.tsx

@@ -47,7 +47,10 @@ function CreateGroupButton() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <button className="p-2 hover:bg-zinc-800 rounded-lg">
+        <button
+          className="p-2 hover:bg-zinc-800 rounded-lg"
+          title="Create group"
+        >
           <Plus />
         </button>
       </DialogTrigger>

client/src/components/chat/leftSidebar/ContactsList.tsx

@@ -48,6 +48,22 @@ function ContactsList() {
     };
   }, [socket]);
 
+  useEffect(() => {
+    contactsList.forEach((contact) => {
+      if (contact.last_message_id && contact.last_read_message_id) {
+        if (contact.last_message_id > contact.last_read_message_id) {
+          setContactsList((prevContacts) =>
+            prevContacts.map((prevContact) =>
+              prevContact.id === contact.id
+                ? { ...prevContact, read: false }
+                : prevContact,
+            ),
+          );
+        }
+      }
+    });
+  }, [contactsList]);
+
   const fetchContacts = async () => {
     console.log('Fetching contacts list');
     const response = await axiosClient.get(`/api/chat/contacts`);

client/src/context/chat/ChatProvider.tsx

@@ -23,7 +23,7 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
   async function initializeContact(newContact: ContactsProps) {
     setMessages([]); // Clear messages from previous contact
     localStorage.setItem('contact', JSON.stringify(newContact)); // Set current contact in localstorage
-    setCurrentContact(newContact);
+    setCurrentContact({ ...newContact, read: true });
     console.log('Initialized contact: ', newContact);
     try {
       const joinResult = await joinRoom(newContact.conversation_id);

client/src/types/types.ts

@@ -26,6 +26,7 @@ export type ContactsProps = {
   last_message_id: number | null;
   last_message_time: string | null;
   last_message_sender: string | null;
+  last_read_message_id: number | null;
 };
 
 export type ParticipantsProps = {