@pubuduth-aplicy/chat-ui 2.1.49 → 2.1.51

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,40 +46,37 @@ 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" />}
+      {/* {!lastIdx && <div className="divider my-0 py-0 h-1" />} */}
     </>
   );
 };

package/src/components/sidebar/SearchInput.tsx

@@ -50,10 +50,6 @@ const {userId} =useChatContext()
 	</div>
 	</form>
 	</>
-
-
-
-
   )
 }
 

package/src/components/sidebar/Sidebar.tsx

@@ -2,12 +2,12 @@ import Conversations from "./Conversations";
 import SearchInput from "./SearchInput";
 
 export const Sidebar = () => {
-  return (
- <div className='chatSidebarMain'>
+	return (
+		<div className='chatSidebarMain'>
 			<SearchInput />
 			<div className='divider px-3'></div>
 			<Conversations />
-		
-		</div> 
-  )
+
+		</div>
+	)
 }

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"
   };