@pubuduth-aplicy/chat-ui 2.2.14 → 2.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.14",
+  "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/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/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,86 +191,14 @@ 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 parsed = JSON.parse(event.data);
 
         if (parsed.event === "newMessage") {
           // Actual message is nested at parsed.data.data — same structure as Messages.tsx
-          const newMessage = parsed?.data?.data;
-          handleNewMessage(newMessage);
-        } else if (
-          parsed.event === "messageStatusUpdated" &&
-          parsed.data?.status === "read"
-        ) {
-          // messageId can come as a single id or an array depending on backend
+          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(rawId) ? rawId : [rawId].filter(Boolean),
@@ -222,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"
@@ -234,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
@@ -246,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;