@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.75

package/src/components/sidebar/Conversations.tsx

@@ -1,56 +1,295 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
+import { useEffect, useState } from "react";
 import { useGetConversations } from "../../hooks/queries/useChatApi";
 import { useChatContext } from "../../providers/ChatProvider";
-import Conversation from "./Conversation";
+import {
+  Conversation as ConversationType,
+  ParticipantGroup,
+} from "../../types/type";
+import CollapsibleSection from "../common/CollapsibleSection";
+import useChatUIStore from "../../stores/Zustant";
+import VirtualizedChatList from "../common/VirtualizedChatList";
+
+type GroupedServiceChats = {
+  [serviceId: string]: {
+    serviceTitle: string;
+    conversations: ConversationType[];
+  };
+};
 
 const Conversations = () => {
-  const { userId } = useChatContext();
-  const { data: conversations } = useGetConversations(userId);
-  console.log("conversations", conversations);
-  console.log("userId", userId);
-  // const { loading, conversations } = useGetConversations();
+  const { userId, socket } = useChatContext();
+  const { data: participantGroups } = useGetConversations(userId);
+  const { searchTerm } = useChatUIStore();
+  const [conversations, setConversations] = useState<{
+    generalChats: ConversationType[];
+    groupedServiceChats: GroupedServiceChats;
+  }>({ generalChats: [], groupedServiceChats: {} });
+
+  // Process fetched data
+  useEffect(() => {
+    if (!participantGroups) return;
+
+    const processConversations = (groups: ParticipantGroup[]) => {
+      const allGeneralChats: ConversationType[] = [];
+      const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
+
+      groups.forEach((group) => {
+        if (group.personalConversation) {
+          allGeneralChats.push(group.personalConversation);
+        }
+
+        group.serviceConversations.forEach((serviceGroup) => {
+          if (!allServiceChatsMap.has(serviceGroup.serviceId)) {
+            allServiceChatsMap.set(serviceGroup.serviceId, {
+              serviceTitle: serviceGroup.serviceTitle,
+              conversations: [],
+            });
+          }
+          allServiceChatsMap
+            .get(serviceGroup.serviceId)!
+            .conversations.push(...serviceGroup.conversations);
+        });
+      });
+
+      const sortConversations = (convos: ConversationType[]) =>
+        convos.sort(
+          (a, b) =>
+            new Date(b.lastMessage?.createdAt || b.updatedAt).getTime() -
+            new Date(a.lastMessage?.createdAt || a.updatedAt).getTime()
+        );
+
+      sortConversations(allGeneralChats);
+      allServiceChatsMap.forEach((value) =>
+        sortConversations(value.conversations)
+      );
+
+      return {
+        generalChats: allGeneralChats,
+        groupedServiceChats: Object.fromEntries(allServiceChatsMap),
+      };
+    };
+
+    setConversations(processConversations(participantGroups));
+  }, [participantGroups]);
+
+  // Real-time update listeners
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleMessageReadAck = (data: {
+      messageIds: string[];
+      chatId: string;
+    }) => {
+      const { chatId, messageIds } = data;
+
+      setConversations((prev) => {
+        const generalChats = [...prev.generalChats];
+        const groupedServiceChats = { ...prev.groupedServiceChats };
+
+        const updateRead = (convo: ConversationType) => {
+          if (convo._id !== chatId) return convo;
+          const updatedUnread = (convo.unreadMessageIds || []).filter(
+            (id) => !messageIds.includes(id)
+          );
+          return {
+            ...convo,
+            unreadMessageIds: updatedUnread,
+            unreadMessageCount: updatedUnread.length,
+          };
+        };
+
+        const generalIndex = generalChats.findIndex((c) => c._id === chatId);
+        if (generalIndex >= 0) {
+          generalChats[generalIndex] = updateRead(generalChats[generalIndex]);
+          return { generalChats, groupedServiceChats };
+        }
+
+        for (const serviceId in groupedServiceChats) {
+          const convos = groupedServiceChats[serviceId].conversations;
+          const convoIndex = convos.findIndex((c) => c._id === chatId);
+          if (convoIndex >= 0) {
+            const updatedConvos = [...convos];
+            updatedConvos[convoIndex] = updateRead(updatedConvos[convoIndex]);
+            groupedServiceChats[serviceId] = {
+              ...groupedServiceChats[serviceId],
+              conversations: updatedConvos,
+            };
+            return { generalChats, groupedServiceChats };
+          }
+        }
+
+        return prev;
+      });
+    };
+
+    const handleNewMessage = (newMessage: any) => {
+      if (!newMessage?.conversationId) return;
+
+      setConversations((prev) => {
+        const generalChats = [...prev.generalChats];
+        const groupedServiceChats = { ...prev.groupedServiceChats };
+
+        const updateConversation = (convo: ConversationType) => ({
+          ...convo,
+          lastMessage: newMessage,
+          updatedAt: new Date().toISOString(),
+          unreadMessageIds:
+            userId !== newMessage.senderId
+              ? [...(convo.unreadMessageIds || []), newMessage._id]
+              : convo.unreadMessageIds || [],
+          unreadMessageCount:
+            userId !== newMessage.senderId
+              ? (convo.unreadMessageCount || 0) + 1
+              : convo.unreadMessageCount || 0,
+        });
+
+        const generalIndex = generalChats.findIndex(
+          (c) => c._id === newMessage.conversationId
+        );
+        if (generalIndex >= 0) {
+          generalChats[generalIndex] = updateConversation(
+            generalChats[generalIndex]
+          );
+          return { generalChats, groupedServiceChats };
+        }
+
+        for (const serviceId in groupedServiceChats) {
+          const serviceIndex = groupedServiceChats[
+            serviceId
+          ].conversations.findIndex((c) => c._id === newMessage.conversationId);
+          if (serviceIndex >= 0) {
+            const updatedConversations = [
+              ...groupedServiceChats[serviceId].conversations,
+            ];
+            updatedConversations[serviceIndex] = updateConversation(
+              updatedConversations[serviceIndex]
+            );
+            groupedServiceChats[serviceId] = {
+              ...groupedServiceChats[serviceId],
+              conversations: updatedConversations,
+            };
+            return { generalChats, groupedServiceChats };
+          }
+        }
+
+        generalChats.push({
+          _id: newMessage.conversationId,
+          participants: [newMessage.senderId, newMessage.receiverId],
+          lastMessage: newMessage,
+          updatedAt: new Date().toISOString(),
+          unreadMessageIds:
+            userId !== newMessage.senderId ? [newMessage._id] : [],
+          unreadMessageCount: userId !== newMessage.senderId ? 1 : 0,
+          type: "personal",
+          readReceipts: [],
+          createdAt: new Date().toISOString(),
+        });
+
+        return { generalChats, groupedServiceChats };
+      });
+    };
+
+    const messageListener = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.event === "newMessage") {
+          handleNewMessage(data.data);
+        } else if (
+          data.event === "messageStatusUpdated" &&
+          data.data.status === "read"
+        ) {
+          handleMessageReadAck({
+            messageIds: Array.isArray(data.data.messageId)
+              ? data.data.messageId
+              : [data.data.messageId],
+            chatId: data.data.chatId,
+          });
+        }
+      } catch (e) {
+        console.error("Error parsing socket message:", e);
+      }
+    };
+
+    socket.addEventListener("message", messageListener);
+    return () => socket.removeEventListener("message", messageListener);
+  }, [socket, userId]);
+
+  const isEmpty =
+    conversations.generalChats.length === 0 &&
+    Object.keys(conversations.groupedServiceChats).length === 0;
+
+  const lowerSearch = searchTerm?.toLowerCase().trim();
+
+  const filteredGeneralChats = conversations.generalChats.filter((convo) =>
+    convo.participantDetails?.some((p:any) =>
+      typeof p === "string"
+        ? p.toLowerCase().includes(lowerSearch)
+        : p.firstname?.toLowerCase().includes(lowerSearch)
+    )
+  );
+
+  const filteredGroupedServiceChats: GroupedServiceChats = Object.fromEntries(
+    Object.entries(conversations.groupedServiceChats)
+      .map(([serviceId, group]) => {
+        const filteredConvos = group.conversations.filter((convo) =>
+          convo.participants?.some((p:any) =>
+            typeof p === "string"
+              ? p.toLowerCase().includes(lowerSearch)
+              : p.name?.toLowerCase().includes(lowerSearch)
+          )
+        );
+        return [serviceId, { ...group, conversations: filteredConvos }];
+      })
+      .filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
+  );
+
   return (
-    <div className="chatSidebarConversations">
-      <h2
-        className="text-lg font-semibold text-gray-700"
-        style={{ paddingLeft: "1rem" }}
-      >
-        All Messages
-      </h2>
-      {(!conversations || conversations.length === 0) && (
+    <div className="chatSidebarConversations" style={{height:'100%'}}>
+      {isEmpty ? (
         <div className="flex flex-col items-center justify-center p-8 text-center">
-          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 mb-4">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="32"
-              height="32"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-gray-500"
-            >
-              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
-            </svg>
-          </div>
           <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
           <p className="text-gray-500 text-sm mb-4">
-            There are no conversations under &quot;All messages&quot;
+            You have no messages yet.
           </p>
         </div>
+      ) : (
+        <>
+         <div 
+          className="overflow-y-auto"
+          style={{ 
+            maxHeight: 'calc(5 * 5rem)', // Adjust 3.5rem to match your chat item height
+            scrollbarWidth: 'thin'
+          }}
+        >
+           {filteredGeneralChats.length > 0 && (
+            <CollapsibleSection title="General Chats">
+              <VirtualizedChatList conversations={filteredGeneralChats} />
+            </CollapsibleSection>
+          )}
+
+          {Object.entries(filteredGroupedServiceChats).length > 0 && (
+            <CollapsibleSection title="Service Chats">
+              {Object.entries(filteredGroupedServiceChats).map(
+                ([
+                  serviceId,
+                  { serviceTitle, conversations: serviceConvos },
+                ]) => (
+                  <CollapsibleSection
+                    key={serviceId}
+                    title={serviceTitle}
+                    defaultOpen={false}
+                  >
+                    <VirtualizedChatList conversations={serviceConvos} />
+                  </CollapsibleSection>
+                )
+              )}
+            </CollapsibleSection>
+          )} 
+        </div>
+        
+        </>
       )}
-      {conversations?.map((conversation: any, idx: any) => (
-        <Conversation
-          key={conversation._id}
-          conversation={conversation}
-          lastIdx={idx === conversations.length - 1}
-        />
-      ))}
-
-      {/* {loading ? <span className='loading loading-spinner mx-auto'></span> : null} */}
     </div>
   );
 };

package/src/components/sidebar/SearchInput.tsx

@@ -2,71 +2,33 @@
 import { useState } from "react";
 import searchicon from "../../assets/icons8-search.svg";
 import useChatUIStore from "../../stores/Zustant";
-import { useGetConversations } from "../../hooks/queries/useChatApi";
-import { useChatContext } from "../../providers/ChatProvider";
 // import { MagnifyingGlass } from "@phosphor-icons/react"
 // import useGetConversations from "../../hooks/useGetConversations";
 // import useConversation from '../../zustand/useConversation'
 // import toast from 'react-hot-toast';
 
 const SearchInput = () => {
-  const { userId } = useChatContext();
-  const [search, setSearch] = useState("");
-  const { setSelectedConversation } = useChatUIStore();
-  const { data } = useGetConversations(userId);
+  const { searchTerm, setSearchTerm } = useChatUIStore();
+  const [search, setSearch] = useState(searchTerm);
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
-    if (!search) return;
-    if (search.length < 3) {
-      return;
-    }
-
-    const conversation = data?.find(
-      (c: {
-        _id: string;
-        participantDetails: {
-          username: string;
-          firstname?: string;
-          idpic?: string;
-        };
-      }) =>
-        c.participantDetails.username
-          .toLowerCase()
-          .includes(search.toLowerCase())
-    );
-
-    if (conversation) {
-      const updatedConversation = {
-        ...conversation,
-        participantDetails: {
-          ...conversation.participantDetails,
-          firstname: conversation.participantDetails.username || "Unknown",
-          idpic:
-            conversation.participantDetails.profilePic || "default-idpic.png",
-        },
-      };
-      setSelectedConversation(updatedConversation);
-      setSearch("");
-    }
-    console.error("No such user found!");
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const term = e.target.value;
+    setSearch(term);
+    setSearchTerm(term);
   };
-
   return (
     <>
-      <form onSubmit={handleSubmit}>
-        <div className="chatSidebarSearchbar">
-          <div className="chatSidebarSearchbarContainer">
-            <img src={searchicon} className="chatSidebarSearchbarImg" />
-            <input
-              className="chatSidebarInput"
-              placeholder="Search…"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-          </div>
+      <div className="chatSidebarSearchbar bg-{FFFFFF} dark:bg-gray-800 text-gray-900 dark:text-gray-300">
+        <div className="chatSidebarSearchbarContainer  bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-300">
+          <img src={searchicon} className="chatSidebarSearchbarImg" />
+          <input
+            className="chatSidebarInput"
+            placeholder="Search…"
+            value={search}
+            onChange={handleChange}
+          />
         </div>
-      </form>
+      </div>
     </>
   );
 };

package/src/hooks/useMessageStatus.ts

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import { useChatContext } from "../providers/ChatProvider";
+import useChatUIStore from '../stores/Zustant';
+
+export const useMessageStatus = () => {
+    const { socket,userId } = useChatContext();
+    const { messages, setMessages, selectedConversation } = useChatUIStore();
+
+    useEffect(() => {
+        if (!socket) return;
+
+        const handleStatusUpdate = (event: MessageEvent) => {
+            try {
+                const parsed = JSON.parse(event.data);
+                
+                if (parsed.event === 'messageStatusUpdated') {
+                    const { messageId, status, chatId } = parsed.data;
+                    
+                    setMessages(prev => prev.map(msg => {
+                        if (msg._id === messageId) {
+                            const statusOrder = ['sent', 'delivered', 'read'];
+                            const currentIdx = statusOrder.indexOf(msg.status);
+                            const newIdx = statusOrder.indexOf(status);
+                            
+                            if (newIdx > currentIdx) {
+                                return { ...msg, status };
+                            }
+                        }
+                        return msg;
+                    }));
+                }
+            } catch (error) {
+                console.error('Error handling status update:', error);
+            }
+        };
+
+        socket.addEventListener('message', handleStatusUpdate);
+        return () => socket.removeEventListener('message', handleStatusUpdate);
+    }, [socket, setMessages]);
+
+    useEffect(() => {
+        if (!socket || !selectedConversation) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const messageId = entry.target.getAttribute('data-message-id');
+                        if (messageId) {
+                            const message = messages.find(m => m._id === messageId);
+                            if (message && message.status === 'sent') {
+                                socket.send(JSON.stringify({
+                                    event: 'confirmDelivery',
+                                    data: {
+                                        messageId,
+                                        chatId: selectedConversation._id
+                                    }
+                                }));
+                            }
+                        }
+                    }
+                });
+            },
+            { threshold: 0.7 }
+        );
+
+        const messageElements = document.querySelectorAll('[data-message-id]');
+        messageElements.forEach(el => observer.observe(el));
+
+        return () => observer.disconnect();
+    }, [messages, socket, selectedConversation]);
+
+    useEffect(() => {
+        if (!socket || !selectedConversation) return;
+
+        const unreadMessages = messages.filter(
+            msg => msg.status !== 'read' && 
+                  msg.conversationId === selectedConversation._id &&
+                  msg.senderId !== userId
+        );
+
+        if (unreadMessages.length > 0) {
+            socket.send(JSON.stringify({
+                event: 'messageRead',
+                data: {
+                    messageIds: unreadMessages.map(m => m._id),
+                    chatId: selectedConversation._id
+                }
+            }));
+        }
+    }, [messages, socket, selectedConversation, userId]);
+};

package/src/providers/ChatProvider.tsx

@@ -9,6 +9,7 @@ import React, {
   useCallback,
 } from "react";
 import { getChatConfig } from "../Chat.config";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 interface ChatProviderProps {
   userId: string;
@@ -26,6 +27,7 @@ interface ChatContextType {
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
+const queryClient = new QueryClient();
 
 export const ChatProvider: React.FC<ChatProviderProps> = ({
   userId,
@@ -131,18 +133,20 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   );
 
   return (
-    <ChatContext.Provider
-      value={{
-        socket,
-        userId,
-        onlineUsers,
-        sendMessage,
-        isConnected,
-        isUserOnline,
-      }}
-    >
-      {children}
-    </ChatContext.Provider>
+    <QueryClientProvider client={queryClient}>
+      <ChatContext.Provider
+        value={{
+          socket,
+          userId,
+          onlineUsers,
+          sendMessage,
+          isConnected,
+          isUserOnline,
+        }}
+      >
+        {children}
+      </ChatContext.Provider>
+    </QueryClientProvider>
   );
 };