@pubuduth-aplicy/chat-ui 2.1.67 → 2.1.69

package/src/components/messages/Messages.tsx

@@ -13,101 +13,83 @@ const Messages = () => {
   const { selectedConversation, setMessages, messages } = useChatUIStore();
   const { userId, socket } = useChatContext();
   const { ref, inView } = useInView();
-  // const { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
-
   const lastMessageRef = useRef<HTMLDivElement>(null);
 
   const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
     queryKey: ["messages", selectedConversation?._id, userId],
     queryFn: ({ pageParam = 1 }) =>
       fetchMessages(selectedConversation?._id, userId, pageParam),
-    getNextPageParam: (lastPage) => {
-      return lastPage.nextPage; // Use the nextPage from API response
-    },
+    getNextPageParam: (lastPage) => lastPage.nextPage,
     initialPageParam: 1,
   });
 
+  // Handle infinite scroll
   useEffect(() => {
-    if (inView) {
-      fetchNextPage();
-    }
+    if (inView) fetchNextPage();
   }, [fetchNextPage, inView]);
 
+  // Update messages when data changes
   useEffect(() => {
     if (data) {
-      console.log("message fetching data", data);
-
       const allMessages = data.pages.flatMap((page) => page.messages).reverse();
       setMessages(allMessages);
     }
-  }, [data]);
+  }, [data, setMessages]);
 
-  // Listen for new messages from the server
+  // Listen for WebSocket messages
   useEffect(() => {
     if (!socket || !selectedConversation?._id) return;
 
-    const handleNewMessage = (newMessage: any) => {
-      newMessage.shouldShake = true;
-      console.log("📩 New message received:", newMessage);
-      // setMessages((prevMessages) => [...prevMessages, newMessage[1]]);
-      setMessages((prevMessages) => {
-        console.log("prevMessages", prevMessages);
-
-        const isDuplicate = prevMessages.some(
-          (msg) =>
-            msg._id === newMessage[1]._id ||
-            (msg.isOptimistic &&
-              msg.senderId === userId &&
-              msg.message === newMessage[1].message)
-        );
-        console.log("isDuplicate", isDuplicate);
-
-        if (isDuplicate) {
-          return prevMessages;
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        
+        if (data.type === "newMessage") {
+          const newMessage = data.message;
+          newMessage.shouldShake = true;
+          
+          setMessages((prevMessages) => {
+            const isDuplicate = prevMessages.some(
+              (msg) =>
+                msg._id === newMessage._id ||
+                (msg.isOptimistic &&
+                  msg.senderId === userId &&
+                  msg.message === newMessage.message)
+            );
+
+            return isDuplicate ? prevMessages : [...prevMessages, newMessage];
+          });
         }
 
-        return [...prevMessages, newMessage[1]];
-      });
-    };
-
-    // const handleNewMessage = (newMessage: any) => {
-    // 	newMessage.shouldShake = true;
-    // 	console.log("📩 New message received:", newMessage);
-    // 	setMessages((prevMessages) => {
-    // 	  const updatedMessages = [...prevMessages, newMessage];
-    // 	  return [...new Map(updatedMessages.map(m => [m._id, m])).values()]; // Prevent duplicates
-    // 	});
-    //   };
-
-    const handleStatusUpdate = ({
-      messageId,
-      status,
-    }: {
-      messageId: string;
-      status: string;
-    }) => {
-      setMessages((prev) =>
-        prev.map((msg) => (msg._id === messageId ? { ...msg, status } : msg))
-      );
+        if (data.type === "messageStatusUpdated") {
+          setMessages((prev) =>
+            prev.map((msg) => 
+              msg._id === data.messageId ? { ...msg, status: data.status } : msg
+            )
+          );
+        }
+      } catch (error) {
+        console.error("Error parsing WebSocket message:", error);
+      }
     };
 
-    socket.on("newMessage", handleNewMessage);
-    socket.on("messageStatusUpdated", handleStatusUpdate);
+    socket.addEventListener("message", handleMessage);
 
     return () => {
-      socket.off("newMessage", handleNewMessage);
-      socket.off("messageStatusUpdated", handleStatusUpdate);
+      socket.removeEventListener("message", handleMessage);
     };
-  }, [socket, setMessages, messages]);
+  }, [socket, selectedConversation?._id, setMessages, userId]);
 
+  // Scroll to bottom when messages change
   useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
-        lastMessageRef.current?.scrollIntoView({ behavior: "smooth",block:'nearest' });
+        lastMessageRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
       }, 100);
     }
   }, [messages.length]);
 
+  // Track message visibility for read receipts
   useEffect(() => {
     if (!socket || !messages.length) return;
 
@@ -117,7 +99,7 @@ const Messages = () => {
           if (entry.isIntersecting) {
             const messageId = entry.target.getAttribute("data-message-id");
             if (messageId) {
-              socket.emit("confirmDelivery", { messageId });
+              sendDeliveryConfirmation(messageId);
             }
           }
         });
@@ -131,51 +113,35 @@ const Messages = () => {
     return () => observer.disconnect();
   }, [messages, socket]);
 
-  // const handleScroll = useCallback(() => {
-  //   if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
-
-  //   const { scrollTop } = scrollContainerRef.current;
-  //   // Load more when scrolled near the top (10% threshold)
-  //   if (scrollTop < 100) {
-  //     fetchNextPage();
-  //   }
-  // }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
-
-  // useEffect(() => {
-  //   const container = scrollContainerRef.current;
-  //   if (container) {
-  //     container.addEventListener('scroll', handleScroll);
-  //     return () => container.removeEventListener('scroll', handleScroll);
-  //   }
-  // }, [handleScroll]);
-
-  //   useEffect(() => {
-  //     const scrollContainer = scrollContainerRef.current;
-  //     if (scrollContainer) {
-  //       scrollContainer.addEventListener("scroll", handleScroll);
-  //       return () => scrollContainer.removeEventListener("scroll", handleScroll);
-  //     }
-  //   }, [handleScroll]);
-
-  console.log("📩 Messages:", messages);
-  console.log("📩 Messages Length:", messages?.length);
+
+  const sendDeliveryConfirmation = (messageId: string) => {
+  if (!socket) return;
+  
+  const message = {
+    type: "confirmDelivery",
+    messageId,
+    // timestamp: Date.now()
+  };
+  
+  socket.send(JSON.stringify(message));
+};
 
   return (
     <div
       className="chatMessages"
       style={{ overflowY: "auto", height: "100%", position: "relative" }}
     >
-      <SystemNotice/>
+      <SystemNotice />
       <div ref={ref} className="my-8">
         {isFetchingNextPage ? <Loader /> : null}
       </div>
       {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}
+              data-message-id={message._id}
               style={{ flex: 1, minHeight: 0, overflowY: "auto" }}
             >
               <Message message={message} />
@@ -190,4 +156,5 @@ const Messages = () => {
     </div>
   );
 };
-export default Messages;
+
+export default Messages;

package/src/components/sidebar/Conversation.tsx

@@ -1,68 +1,82 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// import { useSocketContext } from "../../context/SocketContext";
-// import useConversation from "../../zustand/useConversation";
-
 import { useEffect } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
+import { getChatConfig } from "@pubuduth-aplicy/chat-ui";
 
-const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
-  const { setSelectedConversation, setOnlineUsers, onlineUsers } =
+const Conversation = ({ conversation }: ConversationProps) => {
+  const { setSelectedConversation, setOnlineUsers, onlineUsers,selectedConversation } =
     useChatUIStore();
-  const { socket } = useChatContext();
-  console.log(conversation);
-
+  const { socket, sendMessage } = useChatContext();
+ const {role} =getChatConfig()
   const handleSelectConversation = async () => {
     setSelectedConversation(conversation);
 
-    const unreadMessages = conversation.unreadMessageIds || []; // Get all unread message IDs
-
+    const unreadMessages = conversation.unreadMessageIds || [];
     if (unreadMessages.length > 0) {
-      console.log("Emitting messageRead for messages:", unreadMessages);
-
-      socket.emit("messageRead", {
-        messageIds: unreadMessages, // Send all unread message IDs
-        receiverId: conversation.participantDetails._id,
+      console.log("Marking messages as read:", unreadMessages);
+      
+      sendMessage({
+        event: "messageRead",
+        data:{
+          messageIds: unreadMessages,
+        chatId: conversation._id
+        }
+        
       });
     }
   };
 
+  // Listen for online users updates
   useEffect(() => {
     if (!socket) return;
 
-    const handleOnlineUsers = (users: string[]) => {
-      setOnlineUsers(users);
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.event === "getOnlineUsers") {
+          setOnlineUsers(data.data);
+        }
+      } catch (error) {
+        console.error("Error parsing online users update:", error);
+      }
     };
 
-    socket.on("getOnlineUsers", handleOnlineUsers);
+    socket.addEventListener("message", handleMessage);
 
     return () => {
-      socket.off("getOnlineUsers", handleOnlineUsers);
+      socket.removeEventListener("message", handleMessage);
     };
   }, [socket, setOnlineUsers]);
 
   const isUserOnline =
     conversation?.participantDetails?._id &&
     onlineUsers?.includes(conversation.participantDetails._id);
+
+    const isSelected = selectedConversation?._id === conversation._id;
+
   return (
     <>
       <div
-        className="conversation-container"
+        className={`conversation-container ${isSelected ? "selected" : ""} `}
         onClick={handleSelectConversation}
       >
         <div className="conversation-avatar">
           <img
             className="conversation-img"
             src={
-              conversation.participantDetails?.profilePic ||
-              conversation.participantDetails?.idpic
+             role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation.participantDetails[1]?.profilePic
+    : !Array.isArray(selectedConversation?.participantDetails)
+      ? selectedConversation?.participantDetails?.profilePic
+      : undefined 
             }
+            
             alt="User Avatar"
           />
           <span
             className={`chatSidebarStatusDot ${
-              isUserOnline ? "online" : "offline"
+              isUserOnline && "online"
             }`}
           ></span>
         </div>
@@ -70,7 +84,13 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
         <div className="conversation-info">
           <div className="conversation-header">
             <p className="conversation-name">
-              {conversation.participantDetails?.firstname}
+                {
+                   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation.participantDetails[1]?.firstname
+    : !Array.isArray(selectedConversation?.participantDetails)
+      ? selectedConversation?.participantDetails?.firstname
+      : undefined
+                      }
             </p>
             <span className="conversation-time">
               {new Date(conversation.lastMessage.createdAt).toLocaleTimeString(
@@ -83,24 +103,21 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
             </span>
           </div>
           <p className="conversation-message">
-          {conversation.lastMessage.message.length > 50
+            {conversation.lastMessage.message.length > 50
               ? conversation.lastMessage.message.slice(0, 50) + "..."
-              :conversation.lastMessage.media.length > 0 ?
-              <div style={{display:"flex",alignItems:"center", gap:"5px"}}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-            </svg>
-            attachment
-              </div>
-              
-               :conversation.lastMessage.message}
+              : conversation.lastMessage.media.length > 0 ? (
+                  <div style={{display:"flex",alignItems:"center", gap:"5px"}}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                    </svg>
+                    attachment
+                  </div>
+                ) : conversation.lastMessage.message}
           </p>
         </div>
       </div>
-
-      {/* {!lastIdx && <div className="divider my-0 py-0 h-1" />} */}
     </>
   );
 };
 
-export default Conversation;
+export default Conversation;

package/src/hooks/mutations/useDeleteMessage.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deleteMessage } from "../../service/messageService";
+
+export const useDeleteMessageMutation = () => {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: deleteMessage,
+    onSuccess: () => {
+      console.log("Message deleted successfully!", "success");
+      // Invalidate both messages and conversations queries
+      queryClient.invalidateQueries({ queryKey: ['messages'] });
+      queryClient.invalidateQueries({ queryKey: ['conversations'] });
+    },
+    onError: (error: any) => {
+      console.error("Failed to delete message:", error);
+
+      const errorMessage =
+        error?.response?.data?.errors[0]?.msg ||
+        "An error occurred while deleting the message.";
+
+      console.log("useDeleteMessageMutation error:", errorMessage);
+    },
+  });
+};

package/src/hooks/mutations/useEditMessage.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { setEditMessage } from "../../service/messageService";
+
+export const useEditMessageMutation = () => {
+  const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: setEditMessage,
+        onSuccess: () => {
+        console.log("Message edited successfully!", "success");
+        queryClient.invalidateQueries({ queryKey: ['messages'] });
+        },
+        onError: (error: any) => {
+        console.error("Failed to edit message:", error);
+        const errorMessage =
+            error?.response?.data?.errors[0]?.msg ||
+            "An error occurred while editing the message.";
+        console.log("useMessageMutation edit error:", errorMessage);
+        },
+    });
+
+
+
+};

package/src/lib/api/apiClient.ts

@@ -5,7 +5,7 @@ import { getChatConfig } from "../../Chat.config";
 export const getApiClient = () => {
   const { apiUrl } = getChatConfig(); // ✅ safe: runs after init
   return axios.create({
-    baseURL: `${apiUrl}/chat`,
+    baseURL: `${apiUrl}`,
     timeout: 5000,
     withCredentials: true,
     headers: {

package/src/lib/api/endpoint.ts

@@ -4,5 +4,7 @@ export const Path = {
   sendmessage:"/api/chat",
   apiProxy:'/api/proxy-download',
   preSignUrl:"/api/chat/generatePresignedUrl",
-  getConversationListByAdmin:"/api/chat/getConversationListByAdmin"
+  getConversationListByAdmin:"/api/chat/getConversationListByAdmin",
+  editMessage: "api/chat/message",
+  deleteMessage: "api/chat/deleteMessage"
 };

package/src/providers/ChatProvider.tsx

@@ -6,31 +6,21 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useCallback,
 } from "react";
-import { Socket, io } from "socket.io-client";
 import { getChatConfig } from "../Chat.config";
-// import { apiClient } from '../lib/api/apiClient';
-// import { S3Client } from '../lib/storage/s3Client';
-// import { CryptoUtils } from '../lib/encryption/cryptoUtils';
 
 interface ChatProviderProps {
-  //   apiUrl: string;
-  //   s3Config: {
-  //     bucket: string;
-  //     region: string;
-  //     accessKeyId: string;
-  //     secretAccessKey: string;
-  //   };
-  userId: string; 
+  userId: string;
   children: ReactNode;
 }
 
 interface ChatContextType {
-  //   s3Client: S3Client;
-  socket: Socket;
-  //   cryptoUtils: CryptoUtils;
+  socket: WebSocket | null;
   userId: string;
-  onlineUsers: any;
+  onlineUsers: any[];
+  sendMessage: (data: any) => void;
+  isConnected: boolean;
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -39,61 +29,98 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   userId,
   children,
 }) => {
-  const socketRef = useRef<Socket | null>(null);
-  const [socket, setSocket] = useState<Socket | null>(null);
-  const [onlineUsers, setOnlineUsers] = useState([]);
+  const socketRef = useRef<WebSocket | null>(null);
+  const [socket, setSocket] = useState<WebSocket | null>(null);
+  const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  const [isConnected, setIsConnected] = useState(false);
+  const reconnectAttempts = useRef(0);
+  const maxReconnectAttempts = 5;
+  const reconnectInterval = 5000; // 5 seconds
   const { apiUrl } = getChatConfig();
-  // 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, {
-        path: "/chat/socket.io",
-        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();
-      socketRef.current = null;
+  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}`);
+
+    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.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        
+        if (data.type === 'getOnlineUsers') {
+          setOnlineUsers(data.users);
+        }
+        
+        // Handle other message types here
+        console.log('Received message:', data);
+      } catch (error) {
+        console.error('Error parsing message:', error);
+      }
+    };
+
+    socketInstance.onerror = (error) => {
+      console.error("❌ WebSocket error:", error);
     };
+
+    socketInstance.onclose = (event) => {
+      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})...`);
+        setTimeout(connectWebSocket, reconnectInterval);
+      }
+    };
+
+    socketRef.current = socketInstance;
+    setSocket(socketInstance);
   }, [apiUrl, userId]);
 
-  if (!socket) return null;
+  const sendMessage = useCallback((data: any) => {
+    if (socketRef.current?.readyState === WebSocket.OPEN) {
+      socketRef.current.send(JSON.stringify(data));
+    } else {
+      console.error("Cannot send message - WebSocket not connected");
+    }
+  }, []);
 
+  useEffect(() => {
+    connectWebSocket();
 
-  //   const apiClient = new ApiClient(apiUrl);
-  //   const s3Client = new S3Client(s3Config);
-  //   const cryptoUtils = new CryptoUtils();
+    return () => {
+      console.log("❌ Closing WebSocket connection...");
+      if (socketRef.current) {
+        socketRef.current.close(1000, "Component unmounted");
+        socketRef.current = null;
+      }
+    };
+  }, [connectWebSocket]);
 
   return (
-    <ChatContext.Provider value={{ socket, userId,onlineUsers }}>
+    <ChatContext.Provider value={{ 
+      socket, 
+      userId, 
+      onlineUsers, 
+      sendMessage,
+      isConnected 
+    }}>
       {children}
     </ChatContext.Provider>
   );
@@ -105,4 +132,4 @@ export const useChatContext = () => {
     throw new Error("useChatContext must be used within a ChatProvider");
   }
   return context;
-};
+};