@pubuduth-aplicy/chat-ui 2.1.32 → 2.1.33

package/package.json

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

@@ -21,7 +21,6 @@ const Message = ({ message }: MessageProps) => {
 	const fromMe = message.senderId === userId;
 	const bubbleBgColor = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
 	const alignItems = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
-console.log('messagedis',message);
 
 const date = new Date(message.createdAt);
 const hours = date.getUTCHours();

package/src/components/messages/MessageContainer.tsx

@@ -3,12 +3,32 @@ import { useEffect } from "react";
 import MessageInput from "./MessageInput";
 import Messages from "./Messages";
 import useChatUIStore from "../../stores/Zustant";
+import { useChatContext } from "../../providers/ChatProvider";
 // import { Chat, CaretLeft } from "@phosphor-icons/react";
 // import { useAuthContext } from "../../context/AuthContext";
 
 
 const MessageContainer = () => {
-    const { selectedConversation, setSelectedConversation } = useChatUIStore();
+    const { selectedConversation, setSelectedConversation ,onlineUsers, setOnlineUsers } = useChatUIStore();
+    const {socket} = useChatContext();
+
+    useEffect(() => {
+        if (!socket) return;
+
+        const handleOnlineUsers = (users: string[]) => {
+            setOnlineUsers(users);
+        };
+
+        socket.on("getOnlineUsers", handleOnlineUsers);
+
+        return () => {
+            socket.off("getOnlineUsers", handleOnlineUsers);
+        };
+    }, [socket, setOnlineUsers]);
+
+    const isUserOnline = selectedConversation?.participantDetails?._id &&
+    onlineUsers?.includes(selectedConversation.participantDetails._id);
+
 
     useEffect(() => {
         // cleanup function (unmounts)
@@ -33,7 +53,9 @@ const MessageContainer = () => {
                                     <p className="chatMessageContainerOutterDiv_name">
                                         {selectedConversation.participantDetails.firstname}
                                     </p>
-                                    <p className="text-sm text-[#12bbb5]">Online</p>
+                                    <p className="text-sm text-[#12bbb5]">
+                                    {isUserOnline ? "Online" : "Offline"}
+                                    </p>
                                 </div>
                             </div>
                             {/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}

package/src/components/messages/MessageInput.tsx

@@ -26,48 +26,64 @@ const MessageInput = () => {
 
   useEffect(() => {
     if (!socket) return;
-  
-    const handleTyping = ({ userid }: { userid: string }) => {
-      if (userid !== userId) {
-        setTypingUser(userid);
+
+    if (message.trim() !== "") {
+      setIsTyping(true);
+      socket.emit("typing", { chatId: selectedConversation?._id, userId });
+    }
+
+    const typingTimeout = setTimeout(() => {
+      if (message.trim() === "") {
+        setIsTyping(false);
+        socket.emit("stopTyping", {
+          chatId: selectedConversation?._id,
+          userId,
+        });
       }
+    }, 2000);
+
+    return () => clearTimeout(typingTimeout);
+  }, [message, socket, selectedConversation?._id, userId]);
+
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleTyping = ({ userId }: { userId: string }) => {
+      setTypingUser(userId);
     };
-  
-    const handleStopTyping = ({ userid }: { userid: string }) => {
-      if (userid === typingUser) {
-        setTypingUser(null);
-      }
+
+    const handleStopTyping = ({ userId }: { userId: string }) => {
+      setTypingUser((prev) => (prev === userId ? null : prev));
     };
-  
+
     socket.on("typing", handleTyping);
     socket.on("stopTyping", handleStopTyping);
-  
+
     return () => {
       socket.off("typing", handleTyping);
       socket.off("stopTyping", handleStopTyping);
     };
-  }, [socket, typingUser, userId]);
+  }, [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]);
-  
+  // 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]);
 
   const handleSubmit = useCallback(
     async (e: any) => {
@@ -79,7 +95,7 @@ const MessageInput = () => {
         console.log("📤 Sending message:", message);
 
         if (selectedConversation?._id) {
-           sendMessage({
+          sendMessage({
             chatId: selectedConversation.participantDetails._id,
             senderId: userId,
             message,
@@ -100,6 +116,7 @@ const MessageInput = () => {
     [message, selectedConversation, userId, isSending]
   );
 
+
   return (
     <form className="chatMessageInputform" onSubmit={handleSubmit}>
       <div className="chatMessageInputdiv">
@@ -116,10 +133,18 @@ const MessageInput = () => {
         </button>
       </div>
 
-      {typingUser && typingUser !== userId && !isSending &&(
-        <div className="typingIndicator">Someone is typing...</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>
       )}
-
     </form>
   );
 };

package/src/components/messages/Messages.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 // import useGetMessages from "../../hooks/useGetMessages";
 // import MessageSkeleton from "../skeletons/MessageSkeleton";
 import Message from "./Message";
@@ -9,25 +9,27 @@ import useChatUIStore from "../../stores/Zustant";
 // import useListenMessages from "../../hooks/useListenMessages";
 
 const Messages = () => {
-	const { selectedConversation } = useChatUIStore()
+	const { selectedConversation,setMessages,messages } = useChatUIStore()
 	const {userId,socket}=useChatContext()
-	const { data: messages, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
-	const [localMessages, setLocalMessages] = useState<any[]>([]);
+	const { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 
 	const lastMessageRef = useRef<HTMLDivElement>(null);
 
-	useEffect(() => {
-		if (messages?.messages) {
-		  setLocalMessages(messages.messages);
+
+	useEffect(() => {	
+		if (data) {
+		  setMessages(data.messages);
 		}
-	  }, [messages]);
+	  }, [selectedConversation?._id,data]);
 	
 	  // Listen for new messages from the server
 	  useEffect(() => {
-		if (!socket) return;
+		if (!socket || !selectedConversation?._id) return;
 	
-		const handleNewMessage = (newMessage: any) => {
-		  setLocalMessages((prevMessages) => [...prevMessages, newMessage]);
+		const handleNewMessage = (newMessage:any) => {
+			newMessage.shouldShake = true;
+			console.log("📩 New message received:", newMessage);
+		  setMessages([...messages, newMessage[1]]);
 		};
 	
 		socket.on("newMessage", handleNewMessage);
@@ -35,13 +37,13 @@ const Messages = () => {
 		return () => {
 		  socket.off("newMessage", handleNewMessage);
 		};
-	  }, [socket]);
+	  }, [socket,setMessages, messages]);
 
-	useEffect(() => {
+	  useEffect(() => {
 		setTimeout(() => {
-			lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+		  lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
 		}, 100);
-	}, [messages]);
+	  }, [messages]);
 
 	if (isLoading) {
 		return <p>Loading messages...</p>;
@@ -51,10 +53,13 @@ const Messages = () => {
 		return <p>Error: {error?.message}</p>;
 	  }
 
+	  console.log("📩 Messages:", messages);
+	  console.log("📩 Messages Length:", messages?.length);
+	  
 	return (
 		<div className="chatMessages">
-		{localMessages.length > 0 ? (
-		  localMessages.map((message: any) => (
+		{messages?.length > 0 ? (
+		  messages?.map((message: any) => (
 			<div key={message._id} ref={lastMessageRef}>
 			  <Message message={message} />
 			</div>

package/src/providers/ChatProvider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, {
   createContext,
   useContext,
@@ -28,6 +29,7 @@ interface ChatContextType {
   socket: Socket;
   //   cryptoUtils: CryptoUtils;
   userId: string;
+  onlineUsers: any;
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -38,16 +40,41 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 }) => {
   const socketRef = useRef<Socket | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
+  const [onlineUsers, setOnlineUsers] = useState([]);
   const apiUrl = import.meta.env.VITE_APP_BACKEND_PORT;
+  console.log("API URL:", apiUrl);
 
   useEffect(() => {
     if (!socketRef.current) {
       console.log("🔌 Creating new socket connection...");
-      const socketInstance = io(apiUrl, { auth: { userId } });
+      const socketInstance = io('http://localhost:3001', {
+        query: {
+          userId: userId,
+        },
+        transports: ["websocket"],
+      });
+  
+      // Log connection events
+      socketInstance.on("connect", () => {
+        console.log("✅ Connected to server with socket ID:", socketInstance.id);
+      });
+  
+      socketInstance.on("connect_error", (error) => {
+        console.error("❌ Connection error:", error);
+      });
+  
+      socketInstance.on("disconnect", () => {
+        console.log("❌ Disconnected from server");
+      });
+  
       socketRef.current = socketInstance;
       setSocket(socketInstance);
     }
-
+  
+    socket?.on("getOnlineUsers", (users) => {
+      setOnlineUsers(users);
+    });
+  
     return () => {
       console.log("❌ Disconnecting socket...");
       socketRef.current?.disconnect();
@@ -57,12 +84,13 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
   if (!socket) return null;
 
+
   //   const apiClient = new ApiClient(apiUrl);
   //   const s3Client = new S3Client(s3Config);
   //   const cryptoUtils = new CryptoUtils();
 
   return (
-    <ChatContext.Provider value={{ socket, userId }}>
+    <ChatContext.Provider value={{ socket, userId,onlineUsers }}>
       {children}
     </ChatContext.Provider>
   );

package/src/stores/Zustant.ts

@@ -1,13 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {create} from 'zustand';
 
-// interface ChatUIState {
-//   isChatOpen: boolean;
-//   unreadCount: number;
-//   toggleChat: () => void;
-//   incrementUnreadCount: () => void;
-//   resetUnreadCount: () => void;
-// }
-
 interface ChatUIState {
   isChatOpen: boolean;
   unreadCount: number;
@@ -20,9 +13,13 @@ interface ChatUIState {
     }
     _id:string;
   } | null;
-  setSelectedConversation: (selectedConversation: { _id: string; profilePic: string; username: string; } | null) => void;
+  setSelectedConversation: (selectedConversation: { participantDetails: { _id: string; profilePic: string; firstname: string; idpic: string; }; _id: string; } | null) => void;
+  messages: any[];
+  setMessages: (messages: any[]) => void;
   toggleChat: () => void;
   incrementUnreadCount: () => void;
+  onlineUsers: string[];
+  setOnlineUsers: (users: string[]) => void;
   resetUnreadCount: () => void;
 }
 
@@ -30,8 +27,12 @@ const useChatUIStore = create<ChatUIState>((set) => ({
   isChatOpen: false,
   unreadCount: 0,
   selectedConversation: null,
+  messages: [],
+	setMessages: (messages: any) => set({ messages }),
   setSelectedConversation: (selectedConversation) => set({ selectedConversation }),
   toggleChat: () => set((state) => ({ isChatOpen: !state.isChatOpen })),
+  onlineUsers: [],
+  setOnlineUsers: (users) => set({ onlineUsers: users }),
   incrementUnreadCount: () => set((state) => ({ unreadCount: state.unreadCount + 1 })),
   resetUnreadCount: () => set({ unreadCount: 0 }),
 }));

package/src/style/style.css

@@ -387,4 +387,59 @@
         padding-right: 2rem;
     }
 
-}
+}
+
+
+/* From Uiverse.io by adamgiebl */ 
+.dots-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+  
+  .dot {
+    height: 20px;
+    width: 20px;
+    margin-right: 10px;
+    border-radius: 10px;
+    background-color: #b3d4fc;
+    animation: pulse 1.5s infinite ease-in-out;
+  }
+  
+  .dot:last-child {
+    margin-right: 0;
+  }
+  
+  .dot:nth-child(1) {
+    animation-delay: -0.3s;
+  }
+  
+  .dot:nth-child(2) {
+    animation-delay: -0.1s;
+  }
+  
+  .dot:nth-child(3) {
+    animation-delay: 0.1s;
+  }
+  
+  @keyframes pulse {
+    0% {
+      transform: scale(0.8);
+      background-color: #b3d4fc;
+      box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
+    }
+  
+    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);
+    }
+  }