@pubuduth-aplicy/chat-ui 2.1.71 → 2.1.74

package/src/components/sidebar/Conversations.tsx

@@ -1,51 +1,286 @@
 /* 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) && (
+      {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>
+      ) : (
+        <>
+          {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>
+          )}
+        </>
       )}
-      {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">
+        <div className="chatSidebarSearchbarContainer">
+          <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,97 @@
+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();
+
+    // Handle status updates from server
+    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) {
+                            // Only update if new status is higher priority
+                            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]);
+
+    // Send delivery confirmations for visible messages
+    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 }
+        );
+
+        // Observe all messages in current chat
+        const messageElements = document.querySelectorAll('[data-message-id]');
+        messageElements.forEach(el => observer.observe(el));
+
+        return () => observer.disconnect();
+    }, [messages, socket, selectedConversation]);
+
+    // Mark messages as read when chat is active
+    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

@@ -18,9 +18,11 @@ interface ChatProviderProps {
 interface ChatContextType {
   socket: WebSocket | null;
   userId: string;
-  onlineUsers: any[];
+  // onlineUsers: any[];
   sendMessage: (data: any) => void;
   isConnected: boolean;
+  onlineUsers: Set<string>; // Change to Set for better performance
+  isUserOnline: (userId: string) => boolean; // Add helper function
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -31,7 +33,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 }) => {
   const socketRef = useRef<WebSocket | null>(null);
   const [socket, setSocket] = useState<WebSocket | null>(null);
-  const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  // const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  const [onlineUsers, setOnlineUsers] = useState<Set<string>>(new Set());
   const [isConnected, setIsConnected] = useState(false);
   const reconnectAttempts = useRef(0);
   const maxReconnectAttempts = 5;
@@ -40,35 +43,40 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
   const connectWebSocket = useCallback(() => {
     console.log("🔌 Creating new WebSocket connection...");
-    
+
     // Convert HTTP URL to WebSocket URL
-    const wsUrl = apiUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:');
-    const socketInstance = new WebSocket(`${wsUrl}?userId=${userId}`);
+    const wsUrl = apiUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
+    const socketInstance = new WebSocket(
+      `${wsUrl}?userId=${encodeURIComponent(userId)}`
+    );
 
     socketInstance.onopen = () => {
       console.log("✅ WebSocket connected");
       setIsConnected(true);
       reconnectAttempts.current = 0;
-      
+
       // Send initial handshake if needed
-      socketInstance.send(JSON.stringify({
-        type: 'handshake',
-        userId: userId
-      }));
+      socketInstance.send(
+        JSON.stringify({
+          event: "handshake",
+          userId: userId,
+        })
+      );
     };
 
     socketInstance.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
-        
-        if (data.type === 'getOnlineUsers') {
-          setOnlineUsers(data.users);
+
+        if (data.event === "getOnlineUsers") {
+          console.log("Online users update:", data.data);
+          setOnlineUsers(new Set(data.data));
         }
-        
+
         // Handle other message types here
-        console.log('Received message:', data);
+        console.log("Received message:", data);
       } catch (error) {
-        console.error('Error parsing message:', error);
+        console.error("Error parsing message:", error);
       }
     };
 
@@ -80,11 +88,13 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       console.log("🔌 WebSocket connection closed", event);
       console.log("❌ WebSocket disconnected:", event.code, event.reason);
       setIsConnected(false);
-      
+
       // Attempt reconnection
       if (reconnectAttempts.current < maxReconnectAttempts) {
         reconnectAttempts.current += 1;
-        console.log(`Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`);
+        console.log(
+          `Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`
+        );
         setTimeout(connectWebSocket, reconnectInterval);
       }
     };
@@ -113,14 +123,24 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     };
   }, [connectWebSocket]);
 
+  const isUserOnline = useCallback(
+    (userId: string) => {
+      return onlineUsers.has(userId);
+    },
+    [onlineUsers]
+  );
+
   return (
-    <ChatContext.Provider value={{ 
-      socket, 
-      userId, 
-      onlineUsers, 
-      sendMessage,
-      isConnected 
-    }}>
+    <ChatContext.Provider
+      value={{
+        socket,
+        userId,
+        onlineUsers,
+        sendMessage,
+        isConnected,
+        isUserOnline,
+      }}
+    >
       {children}
     </ChatContext.Provider>
   );
@@ -132,4 +152,4 @@ export const useChatContext = () => {
     throw new Error("useChatContext must be used within a ChatProvider");
   }
   return context;
-};
+};