@pubuduth-aplicy/chat-ui 2.1.28 → 2.1.29

package/package.json

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import { useChatContext } from "../../providers/ChatProvider";
@@ -10,6 +11,7 @@ interface MessageProps {
   message: {
     senderId: string;
     message: string;
+    createdAt:any;
   };
 }
 
@@ -21,7 +23,13 @@ const Message = ({ message }: MessageProps) => {
 	const alignItems = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
 console.log('messagedis',message);
 
+const date = new Date(message.createdAt);
+const hours = date.getUTCHours();
+const minutes = date.getUTCMinutes();
+const seconds = date.getUTCSeconds();
 
+// Format the time as HH:mm:ss (24-hour format)
+const time = `${hours}.${minutes}`;
   return (
     <>
 	  <div className='chatMessage'>
@@ -29,7 +37,7 @@ console.log('messagedis',message);
       <div style={{color:"#374151"}}>
         <div className={`chatMessagesBubble_inner ${alignItems} ${bubbleBgColor} `}>
           <p style={{fontSize:"14px"}}>{message.message}</p>
-		  <div className='chatMessagesBubble_Time'>15.00</div>
+		  <div className='chatMessagesBubble_Time'>{time}</div>
         </div>
       </div>
       {/* <div className="clear-both flex text-gray-700" /> */}

package/src/components/messages/Messages.tsx

@@ -52,36 +52,6 @@ const Messages = () => {
 	  }
 
 	return (
-		// <div className='px-4 flex-1 overflow-auto'>
-		// 	{!loading &&
-		// 		messages.length > 0 &&
-		// 		messages.map((message) => (
-		// 			<div key={message._id} ref={lastMessageRef}>
-		// 				<Message message={message} />
-		// 			</div>
-		// 		))}
-
-		// 	{loading && [...Array(3)].map((_, idx) => <MessageSkeleton key={idx} />)}
-		// 	{!loading && messages.length === 0 && (
-		// 		<p className='text-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) => (

package/src/components/sidebar/Conversation.tsx

@@ -2,20 +2,7 @@
 // import useConversation from "../../zustand/useConversation";
 
 import useChatUIStore from "../../stores/Zustant";
-
-interface ConversationProps {
-  conversation: {
-    participantDetails:{
-      _id: string;
-    profilePic: string;
-    firstname: string; 
-    idpic:string;
-
-    }
-  _id:string;
-  };
-  lastIdx: boolean;
-}
+import { ConversationProps } from "../../types/type";
 
 const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
   const { setSelectedConversation } = useChatUIStore();

package/src/components/sidebar/SearchInput.tsx

@@ -22,7 +22,9 @@ const {userId} =useChatContext()
 			return 
 		}
 
-		const conversation = data.find((c: { username: string }) => c.username.toLowerCase().includes(search.toLowerCase()));
+		const conversation = data?.find((c: { _id: string; participantDetails: { username: string } }) => 
+			c.participantDetails.username.toLowerCase().includes(search.toLowerCase())
+		);
 
 		if (conversation) {
 			setSelectedConversation(conversation);

package/src/hooks/queries/useChatApi.ts

@@ -15,7 +15,7 @@ export const useGetConversations = (id: any) => {
   });
 };
 
-export const useMessages = (chatId: string, userid: string) => {
+export const useMessages = (chatId: string| undefined, userid: string) => {
   return useQuery({
     queryKey: ['messages', chatId, userid],
     queryFn: () => {

package/src/service/messageService.ts

@@ -10,7 +10,7 @@ export const sendMessage = async ({ chatId,senderId, message }: { chatId: any; s
 };
 
 
-export const fetchMessages = async (chatId: string, userid: string) => {
+export const fetchMessages = async (chatId: string|undefined, userid: string) => {
     try {
         const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`);
         console.log(response); // Check the full response

package/src/types/type.ts

@@ -1,37 +1,51 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export interface ChatWindowProps {
-    userId: string;
+  userId: string;
 }
 
 export interface ParticipantDetails {
-    _id: string;
-    username: string;
-    password: string;
-    acctype: string;
-    contactno: string;
-    country: string;
-    email: string;
-    verified: string;
-    profilePic: string;
-    createdAt: string;
-    updatedAt: string;
-    __v: number;
-  }
-  
+  _id: string;
+  username: string;
+  password: string;
+  acctype: string;
+  contactno: string;
+  country: string;
+  email: string;
+  verified: string;
+  profilePic: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
 export interface Conversation {
-    _id: string;
-    createdAt: string;
-    updatedAt: string;
-    __v: number;
-    participantDetails: ParticipantDetails;
-  }
-  
+  _id: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+  participantDetails: ParticipantDetails;
+}
+
 export interface ServiceInfo {
-    conversationsWithParticipantDetails: Conversation[];
-  }
-  
+  conversationsWithParticipantDetails: Conversation[];
+}
+
 export interface ApiResponse {
-    success: boolean;
-    message: string;
-    serviceInfo: ServiceInfo;
-  }
+  success: boolean;
+  message: string;
+  serviceInfo: ServiceInfo;
+}
+
+export interface ConversationProps {
+  conversation: {
+    participantDetails: {
+      _id: string;
+      profilePic: string;
+      firstname: string;
+      idpic: string;
+
+    }
+    _id: string;
+  };
+  lastIdx: boolean;
+}