@pubuduth-aplicy/chat-ui 2.2.13 → 2.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.13",
+  "version": "2.2.15",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/Chat.tsx

@@ -5,7 +5,7 @@ import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
 export const Chat = () => {
-  const { setMessages, selectedConversation, updateMessageStatus } = useChatUIStore();
+  const { selectedConversation, updateMessageStatus } = useChatUIStore();
 
   const { socket, sendMessage } = useChatContext();
 
@@ -25,7 +25,7 @@ export const Chat = () => {
             event: "confirmDelivery",
             data: {
               messageIds: [message._id],
-              chatId: message.conversationId, // make sure this is sent from backend
+              chatId: message.conversationId,
               senderRole: message.senderRole,
               receiverRole: message.receiverRole,
               senderId: message.senderId,
@@ -38,9 +38,6 @@ export const Chat = () => {
 
           // Only append to the message list if the message belongs to the currently open conversation
           if (message.conversationId === selectedConversation?._id) {
-            setMessages((prev) => [...prev, message]);
-
-            // Send read receipt only when the user is viewing this conversation
             sendMessage({
               event: "messageRead",
               data: {
@@ -61,7 +58,7 @@ export const Chat = () => {
 
     socket.addEventListener("message", handleMessage);
     return () => socket.removeEventListener("message", handleMessage);
-  }, [socket, setMessages, sendMessage, updateMessageStatus, selectedConversation]);
+  }, [socket, sendMessage, updateMessageStatus, selectedConversation]);
 
   return (
     <div className="container mx-auto mb-5">

package/src/components/messages/MessageContainer.tsx

@@ -16,8 +16,9 @@ const MessageContainer = () => {
   const { role } = getChatConfig();
 
   useEffect(() => {
-    if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
-      // Send joinChat command to server via WebSocket
+    if (!socket || !selectedConversation?._id) return;
+
+    const sendJoinChat = () => {
       socket.send(
         JSON.stringify({
           event: "joinChat",
@@ -28,8 +29,35 @@ const MessageContainer = () => {
           },
         })
       );
+
+      // Bulk-mark all existing unread messages as read when the conversation is opened
+      const unreadIds = selectedConversation.unreadMessageIds ?? [];
+      const lastMsg = selectedConversation.lastMessage;
+      if (unreadIds.length > 0 && lastMsg) {
+        socket.send(
+          JSON.stringify({
+            event: "messageRead",
+            data: {
+              messageIds: unreadIds,
+              chatId: selectedConversation._id,
+              senderId: lastMsg.senderId,
+              receiverId: userId,
+              // roles are not always available here — backend should infer from chatId if needed
+            },
+          })
+        );
+      }
+    };
+
+    if (socket.readyState === WebSocket.OPEN) {
+      // Socket already open — fire immediately
+      sendJoinChat();
+    } else if (socket.readyState === WebSocket.CONNECTING) {
+      // Socket still connecting — wait for it to open, then fire once
+      socket.addEventListener("open", sendJoinChat, { once: true });
+      return () => socket.removeEventListener("open", sendJoinChat);
     }
-  }, [selectedConversation?._id, socket]);
+  }, [selectedConversation?._id, socket, userId, role]);
 
   useEffect(() => {
     if (!socket) return;

package/src/components/messages/MessageInput.tsx

@@ -39,7 +39,7 @@ const MessageInput = () => {
   const apiClient = getApiClient();
   const { role } = getChatConfig();
   const { socket, sendMessage, userId } = useChatContext();
-  const { selectedConversation, setMessages } = useChatUIStore();
+  const { selectedConversation, setMessages, setLastSentMessage } = useChatUIStore();
 
   const [message, setMessage] = useState("");
   const [message1, setMessage1] = useState("");
@@ -47,8 +47,6 @@ const MessageInput = () => {
 
   const [typingUser, setTypingUser] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [isTyping, setIsTyping] = useState(false);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
 
@@ -474,6 +472,8 @@ const MessageInput = () => {
           },
           {
             onSuccess: (data) => {
+              const confirmedMessage = data[1];
+
               setMessages((prev) => {
                 const filtered = prev.filter(
                   (msg) => msg._id !== tempMessageId
@@ -481,20 +481,32 @@ const MessageInput = () => {
                 return [
                   ...filtered,
                   {
-                    ...data[1],
+                    ...confirmedMessage,
                     isUploading: false,
                     isOptimistic: false,
                   },
                 ];
               });
 
+              // Update the sidebar last message for the sender immediately
+              setLastSentMessage({
+                _id: confirmedMessage._id,
+                conversationId: selectedConversation?._id ?? "",
+                message: message1,
+                senderId: userId,
+                media: successfulUploads,
+                status: confirmedMessage.status ?? "sent",
+                createdAt: confirmedMessage.createdAt ?? new Date().toISOString(),
+                updatedAt: confirmedMessage.updatedAt ?? new Date().toISOString(),
+              });
+
               // Send message via WebSocket
               sendMessage({
                 event: "sendMessage",
                 data: {
                   chatId: selectedConversation?._id,
                   message: message1,
-                  messageId: data[1]._id,
+                  messageId: confirmedMessage._id,
                   attachments: successfulUploads,
                   senderId: userId,
                   receiverId: otherParticipant._id,

package/src/components/sidebar/Conversation.tsx

@@ -160,13 +160,16 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </div>
           {/* <span className="text-xs text-gray-500">{lastMessageTimestamp}</span> */}
         </div>
-        <p className="text-xs text-gray-600 truncate dark:text-gray-500">
-          {conversation.lastMessage?.status === "deleted"
-            ? "This message was deleted"
-            : conversation.lastMessage?.media?.length > 0
-            ? "Attachment"
-            : conversation.lastMessage?.message}
-        </p>
+       <p className="text-xs text-gray-600 dark:text-gray-500">
+  {conversation.lastMessage?.status === "deleted"
+    ? "This message was deleted"
+    : conversation.lastMessage?.media?.length > 0
+    ? "Attachment"
+    : conversation.lastMessage?.message?.length > 30
+    ? conversation.lastMessage.message.slice(0, 30) + "..."
+    : conversation.lastMessage?.message}
+</p>
+
       </div>
     </div>
   );

package/src/components/sidebar/Conversations.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useGetConversations } from "../../hooks/queries/useChatApi";
 import { useChatContext } from "../../providers/ChatProvider";
 import {
@@ -22,7 +22,7 @@ type TabType = "personal" | "service";
 const Conversations = () => {
   const { userId, socket } = useChatContext();
   const { data: participantGroups } = useGetConversations(userId);
-  const { searchTerm } = useChatUIStore();
+  const { searchTerm, lastSentMessage, setLastSentMessage } = useChatUIStore();
   const [activeTab, setActiveTab] = useState<TabType>("personal");
   const [conversations, setConversations] = useState<{
     personalChats: ConversationType[];
@@ -77,6 +77,68 @@ const Conversations = () => {
     setConversations(processConversations(participantGroups));
   }, [participantGroups]);
 
+  // ── Hoisted to component scope so both the socket listener AND the
+  //    lastSentMessage effect can call it ─────────────────────────────
+  const handleNewMessage = useCallback((newMessage: any) => {
+    if (!newMessage?.conversationId) return;
+
+    setConversations((prev) => {
+      const personalChats = [...prev.personalChats];
+      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 personalIndex = personalChats.findIndex(
+        (c) => c._id === newMessage.conversationId
+      );
+      if (personalIndex >= 0) {
+        personalChats[personalIndex] = updateConversation(personalChats[personalIndex]);
+        return { personalChats, 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 { personalChats, groupedServiceChats };
+        }
+      }
+
+      // Fallback: brand-new conversation not yet in local state
+      personalChats.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",
+        createdAt: new Date().toISOString(),
+      } as any);
+
+      return { personalChats, groupedServiceChats };
+    });
+  }, [userId]);
+
   // Real-time update listeners
   useEffect(() => {
     if (!socket) return;
@@ -129,87 +191,18 @@ const Conversations = () => {
       });
     };
 
-    const handleNewMessage = (newMessage: any) => {
-      if (!newMessage?.conversationId) return;
-
-      setConversations((prev) => {
-        const personalChats = [...prev.personalChats];
-        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 personalIndex = personalChats.findIndex(
-          (c) => c._id === newMessage.conversationId
-        );
-        if (personalIndex >= 0) {
-          personalChats[personalIndex] = updateConversation(
-            personalChats[personalIndex]
-          );
-          return { personalChats, 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 { personalChats, groupedServiceChats };
-          }
-        }
-
-        personalChats.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 { personalChats, 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"
-        ) {
+        const parsed = JSON.parse(event.data);
+
+        if (parsed.event === "newMessage") {
+          // Actual message is nested at parsed.data.data — same structure as Messages.tsx
+          handleNewMessage(parsed?.data?.data);
+        } else if (parsed.event === "messageStatusUpdated" && parsed.data?.status === "read") {
+          const rawId = parsed.data.messageId ?? parsed.data.messageIds;
           handleMessageReadAck({
-            messageIds: Array.isArray(data.data.messageId)
-              ? data.data.messageId
-              : [data.data.messageId],
-            chatId: data.data.chatId,
+            messageIds: Array.isArray(rawId) ? rawId : [rawId].filter(Boolean),
+            chatId: parsed.data.chatId,
           });
         }
       } catch (e) {
@@ -219,7 +212,14 @@ const Conversations = () => {
 
     socket.addEventListener("message", messageListener);
     return () => socket.removeEventListener("message", messageListener);
-  }, [socket, userId]);
+  }, [socket, handleNewMessage]);
+
+  // React to messages sent by the current user (no server echo needed)
+  useEffect(() => {
+    if (!lastSentMessage) return;
+    handleNewMessage(lastSentMessage);
+    setLastSentMessage(null);
+  }, [lastSentMessage, handleNewMessage, setLastSentMessage]);
 
   // const isEmpty =
   //   activeTab === "personal"
@@ -231,11 +231,12 @@ const Conversations = () => {
   // Filter personal chats
   const filteredPersonalChats = !lowerSearch
     ? conversations.personalChats
-    : conversations.personalChats.filter((convo) =>
-        convo.participantDetails?.some((p: any) =>
-          p?.name?.toLowerCase().includes(lowerSearch)
-        )
-      );
+    : conversations.personalChats.filter((convo) => {
+        const details = Array.isArray(convo.participantDetails)
+          ? convo.participantDetails
+          : [convo.participantDetails].filter(Boolean);
+        return details.some((p: any) => p?.name?.toLowerCase().includes(lowerSearch));
+      });
 
   // Filter service chats
   const filteredGroupedServiceChats: GroupedServiceChats = !lowerSearch
@@ -243,17 +244,21 @@ const Conversations = () => {
     : Object.fromEntries(
         Object.entries(conversations.groupedServiceChats)
           .map(([serviceId, group]) => {
+            const details = (convo: ConversationType) => {
+              const d = Array.isArray(convo.participantDetails)
+                ? convo.participantDetails
+                : [convo.participantDetails].filter(Boolean);
+              return d.some((p: any) => p?.name?.toLowerCase().includes(lowerSearch));
+            };
             const filteredConvos = group.conversations.filter(
               (convo) =>
-                convo.participantDetails?.some((p: any) =>
-                  p?.name?.toLowerCase().includes(lowerSearch)
-                ) ||
+                details(convo) ||
                 group.serviceTitle?.toLowerCase().includes(lowerSearch) ||
                 convo.serviceTitle?.toLowerCase().includes(lowerSearch)
             );
-            return [serviceId, { ...group, conversations: filteredConvos }];
+            return [serviceId, { ...group, conversations: filteredConvos }] as [string, GroupedServiceChats[string]];
           })
-          .filter(([_, group]) => group.conversations.length > 0)
+          .filter(([, group]) => group.conversations.length > 0)
       );
 
   // Improved empty state logic

package/src/stores/Zustant.ts

@@ -2,6 +2,18 @@
 import { FileType } from "../components/common/FilePreview";
 import { create } from "zustand";
 
+/** Minimal shape needed to update the sidebar after a send */
+export interface SentMessageSignal {
+  _id: string;
+  conversationId: string;
+  message: string;
+  senderId: string;
+  media?: any[];
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
 interface ChatUIState {
   isChatOpen: boolean;
   unreadCount: number;
@@ -51,6 +63,9 @@ interface ChatUIState {
   setOnlineUsers: (users: string[]) => void;
   searchTerm: string;
   setSearchTerm: (searchTerm: string) => void;
+  /** Signal published by MessageInput after a successful send so the sidebar can update */
+  lastSentMessage: SentMessageSignal | null;
+  setLastSentMessage: (msg: SentMessageSignal | null) => void;
 }
 
 const useChatUIStore = create<ChatUIState>((set) => ({
@@ -74,6 +89,8 @@ const useChatUIStore = create<ChatUIState>((set) => ({
   setOnlineUsers: (users) => set({ onlineUsers: users }),
   searchTerm: "",
   setSearchTerm: (searchTerm) => set({ searchTerm }),
+  lastSentMessage: null,
+  setLastSentMessage: (msg) => set({ lastSentMessage: msg }),
 }));
 
 export default useChatUIStore;