@pubuduth-aplicy/chat-ui 2.1.26 → 2.1.28

package/package.json

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

@@ -1,46 +1,64 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState } from 'react';
-import { useMessageMutation } from '../../hooks/mutations/useSendMessage';
-import { useChatContext } from '../../providers/ChatProvider';
-import useChatUIStore from '../../stores/Zustant';
-import paperplane from '../../assets/icons8-send-50.png'
+import React, { useCallback, useState } from "react";
+import { useMessageMutation } from "../../hooks/mutations/useSendMessage";
+import { useChatContext } from "../../providers/ChatProvider";
+import useChatUIStore from "../../stores/Zustant";
+import paperplane from "../../assets/icons8-send-50.png";
 // import { PaperPlaneRight } from '@phosphor-icons/react'; // Assuming you're using icons from Phosphor Icons library
 // import useSendMessage from '../../hooks/useSendMessage'; // Importing the useSendMessage hook
 
 const MessageInput = () => {
-    const { socket } = useChatContext();
-    const {userId}=useChatContext()
-    const { selectedConversation } = useChatUIStore();
+  const { socket } = useChatContext();
+  const { userId } = useChatContext();
+  const { selectedConversation } = useChatUIStore();
   const [message, setMessage] = useState(""); // State for storing the message input
   const { mutate: sendMessage } = useMessageMutation();
 
-  const handleSubmit = async (e:any) => {
-    e.preventDefault();
-    if (!message) 
-	return; 
-    if (selectedConversation?._id) {
-        // Send message
-        sendMessage({ chatId:selectedConversation.participantDetails._id,senderId:userId, message });
-        
-        // Emit message to socket
-        socket.emit('sendMessage', { chatId: selectedConversation._id, message });
+  const [isSending, setIsSending] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (e: any) => {
+      e.preventDefault();
+      if (!message || isSending) return;
+
+      setIsSending(true);
+      try {
+        console.log("📤 Sending message:", message);
+
+        if (selectedConversation?._id) {
+           sendMessage({
+            chatId: selectedConversation.participantDetails._id,
+            senderId: userId,
+            message,
+          });
+
+          socket.emit("sendMessage", {
+            chatId: selectedConversation._id,
+            message,
+          });
+        }
+      } catch (error) {
+        console.error("❌ Error sending message:", error);
+      } finally {
+        setIsSending(false);
+        setMessage("");
       }
-    setMessage("");
-  };
+    },
+    [message, selectedConversation, userId, isSending]
+  );
 
   return (
-    <form className='chatMessageInputform'  onSubmit={handleSubmit}>
-     
-      <div className='chatMessageInputdiv' >
+    <form className="chatMessageInputform" onSubmit={handleSubmit}>
+      <div className="chatMessageInputdiv">
         <input
-          type='text'
-          className='chatMessageInput'
-          placeholder='Send a message'
+          type="text"
+          className="chatMessageInput"
+          placeholder="Send a message"
           value={message}
           onChange={(e) => setMessage(e.target.value)} // Update message state as the user types
         />
-        <button type='submit' className='chatMessageInputSubmit'>
-          <img src={paperplane} alt="send" />
+        <button type="submit" className="chatMessageInputSubmit">
+          <img width={10} height={10} src={paperplane} alt="send" />
           {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
         </button>
       </div>

package/src/components/messages/Messages.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 // import useGetMessages from "../../hooks/useGetMessages";
 // import MessageSkeleton from "../skeletons/MessageSkeleton";
 import Message from "./Message";
@@ -10,22 +10,47 @@ import useChatUIStore from "../../stores/Zustant";
 
 const Messages = () => {
 	const { selectedConversation } = useChatUIStore()
-	const {userId}=useChatContext()
-console.log(userId);
+	const {userId,socket}=useChatContext()
 	const { data: messages, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
-	// useListenMessages();
-	console.log("isLoading",isLoading);
-	console.log("error",error);
-	console.log("messages",messages);
+	const [localMessages, setLocalMessages] = useState<any[]>([]);
 
 	const lastMessageRef = useRef<HTMLDivElement>(null);
 
+	useEffect(() => {
+		if (messages?.messages) {
+		  setLocalMessages(messages.messages);
+		}
+	  }, [messages]);
+	
+	  // Listen for new messages from the server
+	  useEffect(() => {
+		if (!socket) return;
+	
+		const handleNewMessage = (newMessage: any) => {
+		  setLocalMessages((prevMessages) => [...prevMessages, newMessage]);
+		};
+	
+		socket.on("newMessage", handleNewMessage);
+	
+		return () => {
+		  socket.off("newMessage", handleNewMessage);
+		};
+	  }, [socket]);
+
 	useEffect(() => {
 		setTimeout(() => {
 			lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
 		}, 100);
 	}, [messages]);
 
+	if (isLoading) {
+		return <p>Loading messages...</p>;
+	  }
+	
+	  if (isError) {
+		return <p>Error: {error?.message}</p>;
+	  }
+
 	return (
 		// <div className='px-4 flex-1 overflow-auto'>
 		// 	{!loading &&
@@ -42,19 +67,33 @@ console.log(userId);
 		// 	)}
 		// </div>
 
-		<div className='chatMessages'>
-			{messages?.messages.length > 0 &&
-				messages?.messages.map((message: any) => (
-					<div key={message._id} ref={lastMessageRef}>
-						<Message message={message} />
-					</div>
-				))}
-
-			{/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)} */}
-			{messages?.length === 0 && (
-				<p style={{textAlign:"center"}}>Send a message to start the conversation</p>
-			)}
-		</div>
+		// <div className='chatMessages'>
+		// 	{messages?.messages.length > 0 &&
+		// 		messages?.messages.map((message: any) => (
+		// 			<div key={message._id} ref={lastMessageRef}>
+		// 				<Message message={message} />
+		// 			</div>
+		// 		))}
+
+		// 	{/* {loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)} */}
+		// 	{messages?.length === 0 && (
+		// 		<p style={{textAlign:"center"}}>Send a message to start the conversation</p>
+		// 	)}
+		// </div>
+
+
+		<div className="chatMessages">
+		{localMessages.length > 0 ? (
+		  localMessages.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>
+
 	);
 };
 export default Messages;

package/src/hooks/mutations/useSendMessage.ts

@@ -8,7 +8,7 @@ export const useMessageMutation = () => {
       mutationFn: sendMessage,
       onSuccess: () => {
         console.log("Service submitted successfully!", "success");
-        queryClient.invalidateQueries({ queryKey: ['GET_ALL_CONVERSATION'] });
+        queryClient.invalidateQueries({ queryKey: ['messages'] });
       },
       onError: (error: any) => {
         console.error("Failed to submit service data:", error);

package/src/providers/ChatProvider.tsx

@@ -1,48 +1,65 @@
-import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
-import { Socket, io } from 'socket.io-client';
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useEffect,
+  useState,
+  useRef,
+} from "react";
+import { Socket, io } from "socket.io-client";
 // 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;
-//   };
+  //   apiUrl: string;
+  //   s3Config: {
+  //     bucket: string;
+  //     region: string;
+  //     accessKeyId: string;
+  //     secretAccessKey: string;
+  //   };
   userId: string; // User ID for identification
   children: ReactNode;
 }
 
 interface ChatContextType {
-//   s3Client: S3Client;
+  //   s3Client: S3Client;
   socket: Socket;
-//   cryptoUtils: CryptoUtils;
+  //   cryptoUtils: CryptoUtils;
   userId: string;
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
 
-export const ChatProvider: React.FC<ChatProviderProps> = ({ userId, children }) => {
+export const ChatProvider: React.FC<ChatProviderProps> = ({
+  userId,
+  children,
+}) => {
+  const socketRef = useRef<Socket | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
-const apiUrl=import.meta.env.VITE_APP_BACKEND_PORT
+  const apiUrl = import.meta.env.VITE_APP_BACKEND_PORT;
 
   useEffect(() => {
-    const socketInstance = io(apiUrl, { auth: { userId } });
-    setSocket(socketInstance);
+    if (!socketRef.current) {
+      console.log("🔌 Creating new socket connection...");
+      const socketInstance = io(apiUrl, { auth: { userId } });
+      socketRef.current = socketInstance;
+      setSocket(socketInstance);
+    }
 
     return () => {
-      socketInstance.disconnect();
+      console.log("❌ Disconnecting socket...");
+      socketRef.current?.disconnect();
+      socketRef.current = null;
     };
   }, [apiUrl, userId]);
 
   if (!socket) return null;
 
-//   const apiClient = new ApiClient(apiUrl);
-//   const s3Client = new S3Client(s3Config);
-//   const cryptoUtils = new CryptoUtils();
+  //   const apiClient = new ApiClient(apiUrl);
+  //   const s3Client = new S3Client(s3Config);
+  //   const cryptoUtils = new CryptoUtils();
 
   return (
     <ChatContext.Provider value={{ socket, userId }}>
@@ -54,7 +71,7 @@ const apiUrl=import.meta.env.VITE_APP_BACKEND_PORT
 export const useChatContext = () => {
   const context = useContext(ChatContext);
   if (!context) {
-    throw new Error('useChatContext must be used within a ChatProvider');
+    throw new Error("useChatContext must be used within a ChatProvider");
   }
   return context;
-};
+};

package/src/style/style.css

@@ -299,11 +299,13 @@
 .chatMessageInputform {
     position: sticky;
     bottom: 0;
-    background: #dbdbdbc0;
+    background: #dbdbdb;
     padding-left: 1rem;
     padding-right: 1rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
     margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
+    /* margin-bottom: 0.75rem; */
 }
 .chatMessageInputdiv {
     display: flex;
@@ -335,6 +337,7 @@
     bottom: 0;
     align-items: center; */
     padding: 8px;
+    border-radius: 100%;
     background: #12bbb5;
 }