@pubuduth-aplicy/chat-ui 2.1.6 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "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/Chat.tsx

@@ -1,4 +1,5 @@
 import useChatUIStore from '../stores/Zustant';
+import MessageContainer from './messages/MessageContainer';
 import { Sidebar } from './sidebar/Sidebar'
 // import MessageContainer from './components/messages/MessageContainer'
 // import useConversation from '../../zustand/useConversation';
@@ -6,7 +7,7 @@ import { Sidebar } from './sidebar/Sidebar'
 
 
 export const Chat = () => {
-	const { selectedConversation, setSelectedConversation } = useChatUIStore();
+	const { selectedConversation } = useChatUIStore();
 	return (
 		<>
 			<div className='container mx-auto mb-5'>
@@ -16,14 +17,14 @@ export const Chat = () => {
 						<>
 							<div className={`xs:hidden md:grid md:col-span-3 border max-h-screen overflow-y-auto`}><Sidebar /></div>
 							<div className='md:col-span-4 border max-h-screen overflow-y-auto '>
-								{/* <MessageContainer /> */}
+								<MessageContainer />
 							</div>
 						</>
 					) : (
 						<>
 							<div className='md:col-span-3 border max-h-screen overflow-y-auto '><Sidebar /></div>
 							<div className='xs:hidden  md:grid md:col-span-4 border '>
-								{/* <MessageContainer /> */}
+								<MessageContainer />
 							</div>
 						</>
 					)}

package/src/components/messages/Message.tsx

@@ -1,39 +1,42 @@
-// /* eslint-disable @typescript-eslint/no-unused-vars */
-
-// // import { useAuthContext } from "../../context/AuthContext";
-// // import { extractTime } from "../../utils/extractTime";
-// // import useConversation from "../../zustand/useConversation";
-// const Message = ({message:any}) => {
-
-//     // const { authUser } = useAuthContext();
-// 	// const { selectedConversation } = useConversation();
-// 	// const fromMe = message.senderId === authUser._id;
-// 	// const formattedTime = extractTime(message.createdAt);
-// 	// const timeside = fromMe ? "float-right" : "float-left";
-// 	// const profilePic = fromMe ? authUser.profilePic : selectedConversation?.profilePic;
-// 	// const bubbleBgColor = fromMe ? "bg-green-400" : "bg-blue-700";
-// 	// const alignItems = fromMe ? "float-right" : "float-left";
-// 	// const shakeClass = message.shouldShake ? "shake" : "";
-// 	// const imageside= fromMe ? "inset-x-0" :"left-0";
-
-//   return (
-//     <>
-// 	  <div className='flex-grow px-8 pt-8  max-h-screen text-left text-gray-700 overflow-y-auto'>
-// 		<div className="relative mb-6 text-left">
-//       <div className="text-gray-700">
-//         <div className={`relative   block rounded-md py-3 px-4 text-white break-all overflow-wrap`}>
-//           <p className="text-sm">dgfddfgfdg</p>
-// 		  <div className='chat-footer opacity-50 text-xs flex gap-1 items-center float-right'>
-// 			15.44
-// 		  </div>
-//         </div>
-//       </div>
-//       {/* <div className="clear-both flex text-gray-700" /> */}
-// 		</div>
-// 	  </div>
-
-//  </>
-//   )
-// }
-
-// export default Message
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import { useChatContext } from "../../providers/ChatProvider";
+import useChatUIStore from "../../stores/Zustant";
+
+// import { useAuthContext } from "../../context/AuthContext";
+// import { extractTime } from "../../utils/extractTime";
+// import useConversation from "../../zustand/useConversation";
+interface MessageProps {
+  message: {
+    senderId: string;
+    message: string;
+  };
+}
+
+const Message = ({ message }: MessageProps) => {
+
+    const { userId } = useChatContext();
+	const fromMe = message.senderId === userId;
+	const bubbleBgColor = fromMe ? "bg-green-400" : "bg-blue-700";
+	const alignItems = fromMe ? "float-right" : "float-left";
+
+
+  return (
+    <>
+	  <div className='flex-grow px-8 pt-8  max-h-screen text-left text-gray-700 overflow-y-auto'>
+		<div className="relative mb-6 text-left">
+      <div className="text-gray-700">
+        <div className={`relative ${alignItems}   block rounded-md ${bubbleBgColor} py-3 px-4 text-white break-all overflow-wrap`}>
+          <p className="text-sm">{message.message}</p>
+		  <div className='chat-footer opacity-50 text-xs flex gap-1 items-center float-right'>15.00</div>
+        </div>
+      </div>
+      {/* <div className="clear-both flex text-gray-700" /> */}
+		</div>
+	  </div>
+
+ </>
+  )
+}
+
+export default Message

package/src/components/messages/MessageContainer.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 // import useConversation from "../../zustand/useConversation";
 import MessageInput from "./MessageInput";
-// import Messages from "./Messages";
+import Messages from "./Messages";
 import useChatUIStore from "../../stores/Zustant";
 // import { Chat, CaretLeft } from "@phosphor-icons/react";
 // import { useAuthContext } from "../../context/AuthContext";
@@ -31,7 +31,7 @@ const MessageContainer = () => {
                             <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">
-                                        {selectedConversation.username}
+                                        {selectedConversation.firstname}
                                     </div>
                                 </div>
                             </div>
@@ -57,7 +57,7 @@ const MessageContainer = () => {
                         </div>
                     </div> */}
 
-                    {/* <Messages /> */}
+                    <Messages />
                     <MessageInput />
                 </>
             )}

package/src/components/messages/MessageInput.tsx

@@ -1,21 +1,27 @@
 import React, { useState } from 'react';
+import { useMessageMutation } from '../../hooks/mutations/useSendMessage';
+import { useChatContext } from '../../providers/ChatProvider';
+import useChatUIStore from '../../stores/Zustant';
 // 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, userId } = useChatContext();
+    const { selectedConversation } = useChatUIStore();
   const [message, setMessage] = useState(""); // State for storing the message input
-  // const { loading, sendMessage } = useSendMessage(); // Custom hook for sending messages
+  const { mutate: sendMessage } = useMessageMutation();
 
-  // const handleSubmit = async (e) => {
-  //   e.preventDefault();
-  //   if (!message) 
-	// return; 
-  //   await sendMessage(message); 
-  //   setMessage(""); 
-  // };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!message) 
+	return; 
+    sendMessage({selectedConversation?._id,message}); 
+    socket.emit('sendMessage', { selectedConversation._id, message })
+    setMessage(""); 
+  };
 
   return (
-    <form className='px-4 my-3 sticky  bottom-0'>
+    <form className='px-4 my-3 sticky  bottom-0' onSubmit={handleSubmit}>
      
       <div className='w-full '>
         <input

package/src/components/messages/Messages.tsx

@@ -1,51 +1,54 @@
-// import { useEffect, useRef } from "react";
-// // import useGetMessages from "../../hooks/useGetMessages";
-// // import MessageSkeleton from "../skeletons/MessageSkeleton";
-// import Message from "./Message";
-// // import useListenMessages from "../../hooks/useListenMessages";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef } from "react";
+// import useGetMessages from "../../hooks/useGetMessages";
+// import MessageSkeleton from "../skeletons/MessageSkeleton";
+import Message from "./Message";
+import { useChatContext } from "../../providers/ChatProvider";
+import { useMessages } from "../../hooks/queries/useChatApi";
+// import useListenMessages from "../../hooks/useListenMessages";
 
-// const Messages = () => {
-// 	// const { messages, loading } = useGetMessages();
-// 	// useListenMessages();
-// 	// const lastMessageRef = useRef();
+const Messages = () => {
+	const { userId } = useChatContext();
+      const { data: messages } = useMessages(userId);
+	// useListenMessages();
+	const lastMessageRef = useRef<HTMLDivElement>(null);
 
-// 	// useEffect(() => {
-// 	// 	setTimeout(() => {
-// 	// 		lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
-// 	// 	}, 100);
-// 	// }, [messages]);
+	useEffect(() => {
+		setTimeout(() => {
+			lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+		}, 100);
+	}, [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>
-// 		// 		))}
+	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>
+		// 	{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='px-4 flex-1 overflow-auto sm:px-6 lg:px-8'>
-//   {/* {!loading &&
-//     messages.length > 0 &&
-//     messages.map((message) => ( */}
-//       {/* <div key={message._id} ref={lastMessageRef}>
-//         <Message message={message} />
-//       </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} />)}
-//   {!loading && messages.length === 0 && (
-//     <p className='text-center'>Send a message to start the conversation</p>
-//   )} */}
-// </div>
-// 	);
-// };
-// export default Messages;
+  {/* {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

@@ -28,12 +28,12 @@ console.log(conversation);
       >
         <img
           className="w-12 h-12 relative rounded-[100px]"
-          src={conversation.profilePic}
+          src={conversation.profilePic|| conversation.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.username}
+              {conversation.firstname}
             </div>
           </div>
         </div>

package/src/hooks/mutations/useSendMessage.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { sendMessage } from "../../service/messageService";
+
+export const useMessageMutation = () => {
+    const queryClient = useQueryClient();
+    return useMutation({
+      mutationFn: sendMessage,
+      onSuccess: () => {
+        console.log("Service submitted successfully!", "success");
+        queryClient.invalidateQueries({ queryKey: ['GET_ALL_CONVERSATION'] });
+      },
+      onError: (error: any) => {
+        console.error("Failed to submit service data:", error);
+  
+        const errorMessage =
+          error?.response?.data?.errors[0]?.msg ||
+          "An error occurred while submitting service data.";
+
+        console.log("useSumbitServiceMutation :", errorMessage);
+      },
+    });
+  };
+
+

package/src/hooks/queries/useChatApi.ts

@@ -1,15 +1,22 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useQuery } from "@tanstack/react-query";
 import { getAllConversationData } from "../../service/sidebarApi";
+import { fetchMessages } from "../../service/messageService";
 
 
-export const useGetConversations = (id:any) => {
-    return useQuery({
-      queryKey: ['GET_ALL_CONVERSATION',id],
-      queryFn: () =>
-        id ? getAllConversationData(id) : Promise.reject("No ID provided"),
-      staleTime: 1 * 60 * 1000,
-      enabled: !!id,
-      refetchOnWindowFocus: false,
-    });
-  };
+export const useGetConversations = (id: any) => {
+  return useQuery({
+    queryKey: ['GET_ALL_CONVERSATION', id],
+    queryFn: () =>
+      id ? getAllConversationData(id) : Promise.reject("No ID provided"),
+    staleTime: 1 * 60 * 1000,
+    enabled: !!id,
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const useMessages = (chatId: string) => {
+  return useQuery({
+    queryKey:['messages', chatId],
+    queryFn: () => fetchMessages(chatId)});
+};

package/src/lib/api/endpoint.ts

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

package/src/service/messageService.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { apiClient } from "../lib/api/apiClient";
+import { Path } from "../lib/api/endpoint";
+
+export const sendMessage = async ({ chatId, message }: { chatId: any; message: string }) => {
+    const response = await apiClient.post(`${Path.sendmessage}/${chatId}`, {
+        message
+    })
+    return response.data;
+};
+
+
+export const fetchMessages = async (chatId: string) => {
+    const response = await apiClient.get(`${Path.getconversation}/${chatId}`);
+    return response.data();
+};