@pubuduth-aplicy/chat-ui 2.1.48 → 2.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.48",
+  "version": "2.1.50",
   "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,8 +21,8 @@ const Message = ({ message }: MessageProps) => {
 
     const { userId } = useChatContext();
 	const fromMe = message.senderId === userId;
-	const bubbleBgColor = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
-	const alignItems = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
+	const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
+	const alignItems = fromMe ? "outgoing" : "incoming";
 
 const date = new Date(message.createdAt);
 const hours = date.getUTCHours();
@@ -58,19 +58,17 @@ const getStatusIcon = () => {
   </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'>  {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
-        {getStatusIcon()}
-        </div>
+<div className="chat-container">
+  <div className={`message-row ${alignItems}`}>
+    <div className="bubble-container">
+      <div className="chat-bubble">{message.message}</div>
+      <div className={`${timestamp}`}>{new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+      <span className="status-icon">{getStatusIcon()}</span>
       </div>
-      
-      {/* <div className="clear-both flex text-gray-700" /> */}
-		</div>
-	  </div>
+      </div>
+    </div>
+  </div>
+
 
  </>
   )

package/src/components/messages/MessageInput.tsx

@@ -55,7 +55,7 @@ const MessageInput = () => {
         setTypingUser(userId);
       }
     };
-  
+
     const handleStopTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
       if (chatId === selectedConversation._id) {
         setTypingUser((prev) => (prev === userId ? null : prev));
@@ -90,7 +90,7 @@ const MessageInput = () => {
             socket.emit("sendMessage", {
               chatId: selectedConversation?._id,
               message,
-              messageId:data[1]._id,
+              messageId: data[1]._id,
               senderId: userId,
               receiverId: selectedConversation?.participantDetails._id,
             });
@@ -127,15 +127,15 @@ const MessageInput = () => {
       </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>
-)}
+        <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

@@ -17,31 +17,31 @@ const Messages = () => {
   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
-    },
-    initialPageParam: 1,
-  })
-
-
-	useEffect(() => {
-		if (inView) {
-		  fetchNextPage();
-		}
-	  }, [fetchNextPage, inView]);
-
-
-useEffect(() => {
-	if (data) {
-		console.log('message fetching data',data);
-		
-	  const allMessages = data.pages.flatMap(page => page.messages).reverse();
-	  setMessages(allMessages);
-	}
+    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
+      },
+      initialPageParam: 1,
+    })
+
+
+  useEffect(() => {
+    if (inView) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, inView]);
+
+
+  useEffect(() => {
+    if (data) {
+      console.log('message fetching data', data);
+
+      const allMessages = data.pages.flatMap(page => page.messages).reverse();
+      setMessages(allMessages);
+    }
   }, [data]);
 
   // Listen for new messages from the server
@@ -54,15 +54,15 @@ useEffect(() => {
       setMessages((prevMessages) => [...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 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,
@@ -87,10 +87,10 @@ useEffect(() => {
 
   useEffect(() => {
     if (messages.length > 0) {
-		setTimeout(() => {
-		  lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
-		}, 100);
-	  }
+      setTimeout(() => {
+        lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
+    }
   }, [messages.length]);
 
   useEffect(() => {
@@ -134,27 +134,26 @@ useEffect(() => {
   //   }
   // }, [handleScroll]);
 
-//   useEffect(() => {
-//     const scrollContainer = scrollContainerRef.current;
-//     if (scrollContainer) {
-//       scrollContainer.addEventListener("scroll", handleScroll);
-//       return () => scrollContainer.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:", messages);
   console.log("📩 Messages Length:", messages?.length);
 
 
 
   return (
     <div className="chatMessages"
+      style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
+    >
 
-	style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
-	>
-
-<div ref={ref} className="my-8">
+      <div ref={ref} className="my-8">
         {isFetchingNextPage ? <Loader /> : null}
       </div>
       {messages?.length > 0 ? (
@@ -162,8 +161,8 @@ console.log("📩 Messages:", messages);
           // Check if the message object is valid and has an _id before rendering
           message ? (
             <div key={message._id} ref={lastMessageRef}
-			style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}
-			>
+              style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}
+            >
               <Message message={message} />
             </div>
           ) : null

package/src/components/sidebar/Conversation.tsx

@@ -46,37 +46,34 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
     onlineUsers?.includes(conversation.participantDetails._id);
   return (
     <>
-      <div
-        className={` chatSidebarConversationMain
-			`}
-        onClick={handleSelectConversation}
-      >
-        <img
-          className="chatSidebarConversationImg"
-          src={
-            conversation.participantDetails?.profilePic ||
-            conversation.participantDetails?.idpic
-          }
-        />
-        <p className="text-sm text-[#12bbb5]">
-          {isUserOnline ? "Online" : "Offline"}
-        </p>
-        <div className="chatSidebarConversationContainer">
-          {/* <div className="chatSidebarConversationInnerDiv"> */}
-          <p className="text-sm text-gray-500">
-            {conversation.participantDetails?.firstname}
-          </p>
-          <p className="chatSidebarConversationOuterDiv">
-            {conversation.lastMessage.message}
+      <div className="conversation-container" onClick={handleSelectConversation}>
+        <div className="conversation-avatar">
+          <img
+            className="conversation-img"
+            src={conversation.participantDetails?.profilePic || conversation.participantDetails?.idpic}
+            alt="User Avatar"
+          />
+          <span className={`chatSidebarStatusDot ${isUserOnline ? "online" : "offline"}`}></span>
+        </div>
+
+        <div className="conversation-info">
+          <div className="conversation-header">
+            <p className="conversation-name">
+              {conversation.participantDetails?.firstname}
+            </p>
+            <span className="conversation-time">
+              {new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </span>
+          </div>
+          <p className="conversation-message">
+            {conversation.lastMessage.message.length > 50
+              ? conversation.lastMessage.message.slice(0, 50) + "..."
+              : conversation.lastMessage.message}
           </p>
-          {/* </div> */}
         </div>
-        <span className="text-xs text-gray-500">
-          {new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], {
-            hour: "2-digit",
-            minute: "2-digit",
-          })}
-        </span>
       </div>
 
       {!lastIdx && <div className="divider my-0 py-0 h-1" />}

package/src/lib/api/apiClient.ts

@@ -1,14 +1,17 @@
+// apiClient.ts
 import axios from "axios";
 import { getChatConfig } from "../../Chat.config";
 
-const { apiUrl } = getChatConfig();
-export const apiClient = axios.create({
+export const getApiClient = () => {
+  const { apiUrl } = getChatConfig(); // ✅ safe: runs after init
+  return axios.create({
     baseURL: apiUrl,
     timeout: 5000,
-    withCredentials:true,
+    withCredentials: true,
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
     },
   });
-  
+};
+
   

package/src/lib/api/endpoint.ts

@@ -1,5 +1,5 @@
 export const Path = {
-    getconversation: "/chat/getConversation",
-    getmessage: "/chat/getMessage",
-    sendmessage:"/chat"
+    getconversation: "api/chat/getConversation",
+    getmessage: "api/chat/getMessage",
+    sendmessage:"api/chat"
   };

package/src/service/messageService.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { apiClient } from "../lib/api/apiClient";
+import { getApiClient } from "../lib/api/apiClient";
 import { Path } from "../lib/api/endpoint";
 
 export const sendMessage = async ({ chatId,senderId, message }: { chatId: any; senderId:any; message: string }) => {
+    const apiClient = getApiClient();
     const response = await apiClient.post(`${Path.sendmessage}/${chatId}/${senderId}`, {
         message:message
     })
@@ -11,6 +12,7 @@ export const sendMessage = async ({ chatId,senderId, message }: { chatId: any; s
 
 
 export const fetchMessages = async (chatId: string|undefined, userid: string,pagenum:number) => {
+    const apiClient = getApiClient();
     try {
         const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`,{
             params: { pagenum, limit: 20 },

package/src/service/sidebarApi.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { apiClient } from "../lib/api/apiClient";
+import { getApiClient } from "../lib/api/apiClient";
 import { Path } from "../lib/api/endpoint";
 import { ApiResponse } from "../types/type";
 
 
 export const getAllConversationData = async (userid: string) => {
   try {
+    const apiClient = getApiClient();
     const res = await apiClient.get<ApiResponse>(`${Path.getconversation}/${userid}`);
     if (res.data) {
       console.log("API Response: ", res.data);