@pubuduth-aplicy/chat-ui 2.1.33 → 2.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.33",
+  "version": "2.1.35",
   "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/Message.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
+import { MessageStatus } from "../../types/type";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 
@@ -11,6 +12,7 @@ interface MessageProps {
   message: {
     senderId: string;
     message: string;
+    status: MessageStatus;
     createdAt:any;
   };
 }
@@ -29,16 +31,43 @@ const seconds = date.getUTCSeconds();
 
 // Format the time as HH:mm:ss (24-hour format)
 const time = `${hours}.${minutes}`;
+
+const getStatusIcon = () => {
+  if (!fromMe) return null;
+  
+  switch (message.status) {
+    case 'sent':
+      return <span className="message-status sent">✓</span>;
+    case 'delivered':
+      return <span className="message-status delivered">✓✓</span>;
+    case 'read':
+      return <span className="message-status read">✓✓ (blue)</span>;
+    default:
+      return null;
+  }
+};
+
   return (
     <>
+     {/* <div className="w-max grid">
+  <div className="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none justify-start  items-center gap-3 inline-flex">
+    <h5 className="text-gray-900 text-sm font-normal leading-snug">{message.message}</h5>
+  </div>
+  <div className="justify-end items-center inline-flex mb-2.5">
+    <h6 className="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
+  </div>
+</div> */}
+
 	  <div className='chatMessage'>
 		<div className="chatMessagesContainer">
       <div style={{color:"#374151"}}>
         <div className={`chatMessagesBubble_inner ${alignItems} ${bubbleBgColor} `}>
           <p style={{fontSize:"14px"}}>{message.message}</p>
-		  <div className='chatMessagesBubble_Time'>{time}</div>
+		  <div className='chatMessagesBubble_Time'>  {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
+        {getStatusIcon()}
         </div>
       </div>
+      
       {/* <div className="clear-both flex text-gray-700" /> */}
 		</div>
 	  </div>

package/src/components/messages/MessageContainer.tsx

@@ -12,6 +12,13 @@ const MessageContainer = () => {
     const { selectedConversation, setSelectedConversation ,onlineUsers, setOnlineUsers } = useChatUIStore();
     const {socket} = useChatContext();
 
+    useEffect(() => {
+        if (selectedConversation?._id && socket) {
+          socket.emit("joinChat", selectedConversation._id); // Join chat room
+        }
+      }, [selectedConversation?._id, socket]);
+      
+
     useEffect(() => {
         if (!socket) return;
 

package/src/components/messages/MessageInput.tsx

@@ -12,7 +12,8 @@ const MessageInput = () => {
   const { userId } = useChatContext();
   const { selectedConversation } = useChatUIStore();
   const [message, setMessage] = useState(""); // State for storing the message input
-  const { mutate: sendMessage } = useMessageMutation();
+  // const { mutate: sendMessage } = useMessageMutation();
+  const mutation = useMessageMutation(); // useMutation hook to send message
   const [typingUser, setTypingUser] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -40,20 +41,25 @@ const MessageInput = () => {
           userId,
         });
       }
-    }, 2000);
+    }, 200);
 
     return () => clearTimeout(typingTimeout);
   }, [message, socket, selectedConversation?._id, userId]);
 
+
   useEffect(() => {
-    if (!socket) return;
+    if (!socket || !selectedConversation?._id) return;
 
-    const handleTyping = ({ userId }: { userId: string }) => {
-      setTypingUser(userId);
+    const handleTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
+      if (chatId === selectedConversation._id) {
+        setTypingUser(userId);
+      }
     };
-
-    const handleStopTyping = ({ userId }: { userId: string }) => {
-      setTypingUser((prev) => (prev === userId ? null : prev));
+  
+    const handleStopTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
+      if (chatId === selectedConversation._id) {
+        setTypingUser((prev) => (prev === userId ? null : prev));
+      }
     };
 
     socket.on("typing", handleTyping);
@@ -63,27 +69,7 @@ const MessageInput = () => {
       socket.off("typing", handleTyping);
       socket.off("stopTyping", handleStopTyping);
     };
-  }, [socket]);
-
-  // useEffect(() => {
-  //   if (message) {
-  //     setIsTyping(true);
-  //     socket.emit("typing", {
-  //       chatId: selectedConversation?._id,
-  //       userId,
-  //     });
-  //   }
-
-  //   // Clear typing indicator when user stops typing
-  //   const typingTimeout = setTimeout(() => {
-  //     if (message === "") {
-  //       setIsTyping(false);
-  //       socket.emit("stopTyping", { chatId: selectedConversation?._id, userId });
-  //     }
-  //   }, 2000);
-
-  //   return () => clearTimeout(typingTimeout);
-  // }, [message, socket, selectedConversation?._id, userId]);
+  }, [socket, selectedConversation?._id]);
 
   const handleSubmit = useCallback(
     async (e: any) => {
@@ -94,18 +80,48 @@ const MessageInput = () => {
       try {
         console.log("📤 Sending message:", message);
 
-        if (selectedConversation?._id) {
-          sendMessage({
-            chatId: selectedConversation.participantDetails._id,
-            senderId: userId,
-            message,
-          });
-
-          socket.emit("sendMessage", {
-            chatId: selectedConversation._id,
-            message,
-          });
-        }
+        // if (selectedConversation?._id) {
+        //   const response = await sendMessage({
+        //     chatId: selectedConversation.participantDetails._id,
+        //     senderId: userId,
+        //     message,
+        //   });
+          
+        //   // You can log or handle the response here
+        //   console.log('Response from sendMessage:', response);
+  
+          
+        //   socket.emit("sendMessage", {
+        //     chatId: selectedConversation._id,
+        //     message,
+        //     senderId: userId,
+        //     receiverId: selectedConversation.participantDetails._id,
+        //   });
+        // }
+
+       
+
+        mutation.mutate({
+          chatId: selectedConversation?.participantDetails._id,
+          senderId: userId,
+          message,
+        }, {
+          onSuccess: (data) => {
+            console.log('Response from sendMessage:', data);
+            // After successfully sending the message, emit the socket event
+            socket.emit("sendMessage", {
+              chatId: selectedConversation?._id,
+              message,
+              messageId:data[1]._id,
+              senderId: userId,
+              receiverId: selectedConversation?.participantDetails._id,
+            });
+          },
+          onError: (error) => {
+            console.error("❌ Error in sending message:", error);
+          },
+        });
+
       } catch (error) {
         console.error("❌ Error sending message:", error);
       } finally {
@@ -116,7 +132,6 @@ const MessageInput = () => {
     [message, selectedConversation, userId, isSending]
   );
 
-
   return (
     <form className="chatMessageInputform" onSubmit={handleSubmit}>
       <div className="chatMessageInputdiv">
@@ -133,18 +148,17 @@ const MessageInput = () => {
         </button>
       </div>
 
-      {typingUser && typingUser !== userId && !isSending && (
-        <div className="typingIndicator">
-          <section className="dots-container">
-            <div className="dot" />
-            <div className="dot" />
-            <div className="dot" />
-            <div className="dot" />
-            <div className="dot" />
-          </section>
-          typing...
-        </div>
-      )}
+      {typingUser && typingUser !== userId && typingUser === selectedConversation?.participantDetails?._id && !isSending && (
+  <div className="typingIndicator">
+    <div className="loader">
+      <div className="ball" />
+      <div className="ball" />
+      <div className="ball" />
+      typing
+    </div>
+  </div>
+)}
+
     </form>
   );
 };

package/src/components/messages/Messages.tsx

@@ -29,13 +29,22 @@ const Messages = () => {
 		const handleNewMessage = (newMessage:any) => {
 			newMessage.shouldShake = true;
 			console.log("📩 New message received:", newMessage);
-		  setMessages([...messages, newMessage[1]]);
+		//   setMessages([...messages, newMessage[1]]);
+		setMessages((prevMessages) => [...prevMessages, newMessage]);
 		};
+
+		const handleStatusUpdate = ({ messageId, status }) => {
+			setMessages(prev => prev.map(msg => 
+			  msg._id === messageId ? { ...msg, status } : msg
+			));
+		  };
 	
-		socket.on("newMessage", handleNewMessage);
+		  socket.on("newMessage", handleNewMessage);
+		  socket.on("messageStatusUpdated", handleStatusUpdate);
 	
 		return () => {
-		  socket.off("newMessage", handleNewMessage);
+			socket.off("newMessage", handleNewMessage);
+			socket.off("messageStatusUpdated", handleStatusUpdate);
 		};
 	  }, [socket,setMessages, messages]);
 
@@ -43,7 +52,27 @@ const Messages = () => {
 		setTimeout(() => {
 		  lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
 		}, 100);
-	  }, [messages]);
+	  }, [ messages]);
+
+	  useEffect(() => {
+		if (!socket || !messages.length) return;
+	  
+		const observer = new IntersectionObserver((entries) => {
+		  entries.forEach(entry => {
+			if (entry.isIntersecting) {
+			  const messageId = entry.target.getAttribute('data-message-id');
+			  if (messageId) {
+				socket.emit('confirmDelivery', { messageId });
+			  }
+			}
+		  });
+		}, { threshold: 0.5 });
+	  
+		const messageElements = document.querySelectorAll('[data-message-id]');
+		messageElements.forEach(el => observer.observe(el));
+	  
+		return () => observer.disconnect();
+	  }, [messages, socket]);
 
 	if (isLoading) {
 		return <p>Loading messages...</p>;
@@ -57,18 +86,33 @@ const Messages = () => {
 	  console.log("📩 Messages Length:", messages?.length);
 	  
 	return (
-		<div className="chatMessages">
-		{messages?.length > 0 ? (
-		  messages?.map((message: any) => (
-			<div key={message._id} ref={lastMessageRef}>
-			  <Message message={message} />
-			</div>
-		  ))
-		) : (
-		  <p style={{ textAlign: "center" }}>Send a message to start the conversation</p>
-		)}
-	  </div>
-
+	// 	<div className="chatMessages">
+	// 	{messages?.length > 0 ? (
+	// 	  messages?.map((message: any) => (
+	// 		<div key={message._id} ref={lastMessageRef}>
+	// 		  <Message message={message} />
+	// 		</div>
+	// 	  ))
+	// 	) : (
+	// 	  <p style={{ textAlign: "center" }}>Send a message to start the conversation</p>
+	// 	)}
+	//   </div>
+<div className="chatMessages">
+      {messages?.length > 0 ? (
+        messages?.map((message: any) =>
+          // Check if the message object is valid and has an _id before rendering
+          message ? (
+            <div key={message._id} ref={lastMessageRef}>
+              <Message message={message} />
+            </div>
+          ) : null
+        )
+      ) : (
+        <p style={{ textAlign: "center" }}>
+          Send a message to start the conversation
+        </p>
+      )}
+    </div>
 	);
 };
 export default Messages;

package/src/components/sidebar/Conversation.tsx

@@ -1,13 +1,31 @@
 // import { useSocketContext } from "../../context/SocketContext";
 // import useConversation from "../../zustand/useConversation";
 
+import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
 
 const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
   const { setSelectedConversation } = useChatUIStore();
+  const { socket } = useChatContext();
 console.log(conversation);
 
+const handleSelectConversation = async () => {
+  setSelectedConversation(conversation);
+
+  const lastMessageId = conversation.lastMessageId; // You should have this in conversation data
+
+  if (lastMessageId) {
+    // ✅ Notify server via socket
+    socket.emit("messageRead", {
+      messageId: lastMessageId,
+      receiverId: conversation.participantDetails._id, // or receiverId
+    });
+
+
+  }
+};
+
 //   const isSelected = selectedConversation?._id === conversation._id;
   // const { onlineUsers } = useSocketContext();
   // const isOnline = onlineUsers.includes(conversation._id);

package/src/service/sidebarApi.ts

@@ -7,18 +7,23 @@ import { ApiResponse } from "../types/type";
 export const getAllConversationData = async (userid: string) => {
   try {
     const res = await apiClient.get<ApiResponse>(`${Path.getconversation}/${userid}`);
-    
+    if (res.data) {
+      console.log("API Response: ", res.data);
+      
+    }
     // Access conversations with participant details from the API response
-    const { conversationsWithParticipantDetails } = res.data.serviceInfo;
-
+    const  conversationsWithParticipantDetails  = res.data.serviceInfo;
+    console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
+    
     // If needed, you can map the conversations in the specific structure
-    const formattedConversations = conversationsWithParticipantDetails.map((conversation) => ({
-      _id: conversation._id,
-      participantDetails: conversation.participantDetails,
-    }));
+//     const formattedConversations = conversationsWithParticipantDetails?.map((conversation) => ({
+//       _id: conversation._id,
+//       participantDetails: conversation.participantDetails,
+//     }));
+// console.log("formattedConversations", formattedConversations);
 
     // Return the formatted conversations
-    return formattedConversations;
+    return conversationsWithParticipantDetails;
   } catch (error: any) {
     console.error("ERROR: ", error);
     // Optionally log the error to an external logger

package/src/stores/Zustant.ts

@@ -1,21 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {create} from 'zustand';
+import { create } from "zustand";
 
 interface ChatUIState {
   isChatOpen: boolean;
   unreadCount: number;
   selectedConversation: {
-    participantDetails:{
+    participantDetails: {
       _id: string;
-    profilePic: string;
-    firstname: string; 
-    idpic:string;
-    }
-    _id:string;
+      profilePic: string;
+      firstname: string;
+      idpic: string;
+    };
+    _id: string;
   } | null;
-  setSelectedConversation: (selectedConversation: { participantDetails: { _id: string; profilePic: string; firstname: string; idpic: string; }; _id: string; } | null) => void;
-  messages: any[];
-  setMessages: (messages: any[]) => void;
+  setSelectedConversation: (
+    selectedConversation: ChatUIState["selectedConversation"]
+  ) => void;
+  messages: { id: string; text: string; sender: string; status: string }[];
+  setMessages: (messages: ChatUIState["messages"] | ((prev: ChatUIState["messages"]) => ChatUIState["messages"])) => void;
+  updateMessageStatus: (messageId: string, status: string) => void;
   toggleChat: () => void;
   incrementUnreadCount: () => void;
   onlineUsers: string[];
@@ -28,7 +31,16 @@ const useChatUIStore = create<ChatUIState>((set) => ({
   unreadCount: 0,
   selectedConversation: null,
   messages: [],
-	setMessages: (messages: any) => set({ messages }),
+  setMessages: (updater: any) =>
+    set((state) => ({
+      messages: typeof updater === "function" ? updater(state.messages) : updater,
+    })),
+  updateMessageStatus: (messageId, status) =>
+    set((state) => ({
+      messages: state.messages.map((msg) =>
+        msg.id === messageId ? { ...msg, status } : msg
+      ),
+    })),
   setSelectedConversation: (selectedConversation) => set({ selectedConversation }),
   toggleChat: () => set((state) => ({ isChatOpen: !state.isChatOpen })),
   onlineUsers: [],
@@ -37,4 +49,4 @@ const useChatUIStore = create<ChatUIState>((set) => ({
   resetUnreadCount: () => set({ unreadCount: 0 }),
 }));
 
-export default useChatUIStore;
+export default useChatUIStore;

package/src/style/style.css

@@ -299,7 +299,7 @@
 .chatMessageInputform {
     position: sticky;
     bottom: 0;
-    background: #dbdbdb;
+    background: #eee7e7;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.25rem;
@@ -389,57 +389,57 @@
 
 }
 
+.typingIndicator{
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 
-/* From Uiverse.io by adamgiebl */ 
-.dots-container {
+/* From Uiverse.io by ashish-yadv */ 
+.loader {
+    width: 60px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  margin-right: 10px;
+  width: 100%;
+    font-size: smaller;
+    gap: 0.5rem;
   }
   
-  .dot {
-    height: 20px;
-    width: 20px;
-    margin-right: 10px;
-    border-radius: 10px;
-    background-color: #b3d4fc;
-    animation: pulse 1.5s infinite ease-in-out;
+  .ball {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #3b2dfd;
   }
   
-  .dot:last-child {
-    margin-right: 0;
+  .ball:nth-child(1) {
+    animation: bounce-1 2.1s ease-in-out infinite;
   }
   
-  .dot:nth-child(1) {
-    animation-delay: -0.3s;
+  @keyframes bounce-1 {
+    50% {
+      transform: translateY(-3px);
+    }
   }
   
-  .dot:nth-child(2) {
-    animation-delay: -0.1s;
+  .ball:nth-child(2) {
+    animation: bounce-3 2.1s ease-in-out 0.3s infinite;
   }
   
-  .dot:nth-child(3) {
-    animation-delay: 0.1s;
+  @keyframes bounce-2 {
+    50% {
+      transform: translateY(-3px);
+    }
   }
   
-  @keyframes pulse {
-    0% {
-      transform: scale(0.8);
-      background-color: #b3d4fc;
-      box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
-    }
+  .ball:nth-child(3) {
+    animation: bounce-3 2.1s ease-in-out 0.6s infinite;
+  }
   
+  @keyframes bounce-3 {
     50% {
-      transform: scale(1.2);
-      background-color: #6793fb;
-      box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
-    }
-  
-    100% {
-      transform: scale(0.8);
-      background-color: #b3d4fc;
-      box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
+      transform: translateY(-3px);
     }
   }

package/src/types/type.ts

@@ -21,6 +21,15 @@ export interface ParticipantDetails {
 export interface Conversation {
   _id: string;
   createdAt: string;
+  lastMessage:{
+    _id: string;
+    senderId: string;
+    message: string;
+    chatId: string;
+    createdAt: string;
+    updatedAt: string;
+    __v: number;
+  },
   updatedAt: string;
   __v: number;
   participantDetails: ParticipantDetails;
@@ -33,7 +42,7 @@ export interface ServiceInfo {
 export interface ApiResponse {
   success: boolean;
   message: string;
-  serviceInfo: ServiceInfo;
+  serviceInfo: Conversation[];
 }
 
 export interface ConversationProps {
@@ -48,4 +57,6 @@ export interface ConversationProps {
     _id: string;
   };
   lastIdx: boolean;
-}
+}
+
+export type MessageStatus = 'sent' | 'delivered' | 'read';