@pubuduth-aplicy/chat-ui 2.1.9 → 2.1.11

package/package.json

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

@@ -6,7 +6,7 @@ import useChatUIStore from '../../stores/Zustant';
 // import useSendMessage from '../../hooks/useSendMessage'; // Importing the useSendMessage hook
 
 const MessageInput = () => {
-    const { socket, userId } = useChatContext();
+    const { socket } = useChatContext();
     const { selectedConversation } = useChatUIStore();
   const [message, setMessage] = useState(""); // State for storing the message input
   const { mutate: sendMessage } = useMessageMutation();

package/src/components/messages/Messages.tsx

@@ -5,12 +5,16 @@ import { useEffect, useRef } from "react";
 import Message from "./Message";
 import { useChatContext } from "../../providers/ChatProvider";
 import { useMessages } from "../../hooks/queries/useChatApi";
+import useChatUIStore from "../../stores/Zustant";
 // import useListenMessages from "../../hooks/useListenMessages";
 
 const Messages = () => {
-	const { userId } = useChatContext();
-      const { data: messages } = useMessages(userId);
+	const { selectedConversation } = useChatUIStore()
+	const {userId}=useChatContext()
+	const { data: messages } = useMessages(selectedConversation?._id,userId);
 	// useListenMessages();
+	console.log(messages);
+
 	const lastMessageRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
@@ -35,19 +39,19 @@ const Messages = () => {
 		// 	)}
 		// </div>
 
-<div className='px-4 flex-1 overflow-auto sm:px-6 lg:px-8'>
-  {messages.length > 0 &&
-    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 className='text-center'>Send a message to start the conversation</p>
-  )}
-</div>
+		<div className='px-4 flex-1 overflow-auto sm:px-6 lg:px-8'>
+			{messages.length > 0 &&
+				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 className='text-center'>Send a message to start the conversation</p>
+			)}
+		</div>
 	);
 };
 export default Messages;

package/src/components/sidebar/Conversation.tsx

@@ -5,9 +5,14 @@ import useChatUIStore from "../../stores/Zustant";
 
 interface ConversationProps {
   conversation: {
-    _id: string;
+    participantDetails:{
+      _id: string;
     profilePic: string;
-    username: string;
+    firstname: string; 
+    idpic:string;
+
+    }
+  _id:string;
   };
   lastIdx: boolean;
 }
@@ -28,12 +33,12 @@ console.log(conversation);
       >
         <img
           className="w-12 h-12 relative rounded-[100px]"
-          src={conversation.profilePic|| conversation.idpic}
+          src={conversation.participantDetails.profilePic|| conversation.participantDetails.idpic}
         />
         <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
           <div className="self-stretch justify-start items-center inline-flex">
             <div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-['Inter'] leading-tight">
-              {conversation.firstname}
+              {conversation.participantDetails.firstname}
             </div>
           </div>
         </div>

package/src/hooks/queries/useChatApi.ts

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

package/src/service/messageService.ts

@@ -10,7 +10,7 @@ export const sendMessage = async ({ chatId, message }: { chatId: any; message: s
 };
 
 
-export const fetchMessages = async (chatId: string) => {
-    const response = await apiClient.get(`${Path.getconversation}/${chatId}`);
+export const fetchMessages = async (chatId: string,userid:string) => {
+    const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`);
     return response.data();
 };

package/src/stores/Zustant.ts

@@ -12,9 +12,13 @@ interface ChatUIState {
   isChatOpen: boolean;
   unreadCount: number;
   selectedConversation: {
-    _id: string;
+    participantDetails:{
+      _id: string;
     profilePic: string;
-    username: string;
+    firstname: string; 
+    idpic:string;
+    }
+    _id:string;
   } | null;
   setSelectedConversation: (selectedConversation: { _id: string; profilePic: string; username: string; } | null) => void;
   toggleChat: () => void;