@pubuduth-aplicy/chat-ui 2.1.21 → 2.1.23

package/package.json

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

@@ -12,14 +12,18 @@ export const Chat = () => {
 				<div className='grid-container'>
 					{selectedConversation ? (
 						<>
-							<div className={`sidebarContainer`}><Sidebar /></div>
+							<div className={`sidebarContainer`}>
+								<Sidebar />
+								</div>
 							<div className='messageContainer'>
 								<MessageContainer />
 							</div>
 						</>
 					) : (
 						<>
-							<div className='sidebarContainer'><Sidebar /></div>
+							<div className='sidebarContainer'>
+								<Sidebar />
+								</div>
 							<div className='messageContainer'>
 								<MessageContainer />
 							</div>

package/src/components/messages/MessageContainer.tsx

@@ -30,9 +30,10 @@ const MessageContainer = () => {
                             <img className="chatMessageContainerInnerImg"  alt="Profile" src={selectedConversation.participantDetails.idpic}/>
                             <div className="chatMessageContainerOutter">
                                 <div className="chatMessageContainerOutterDiv">
-                                    <div className="chatMessageContainerOutterDiv_name">
+                                    <p className="chatMessageContainerOutterDiv_name">
                                         {selectedConversation.participantDetails.firstname}
-                                    </div>
+                                    </p>
+                                    <p className="text-sm text-[#12bbb5]">Online</p>
                                 </div>
                             </div>
                             {/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}

package/src/components/messages/MessageInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState } from 'react';
 import { useMessageMutation } from '../../hooks/mutations/useSendMessage';
 import { useChatContext } from '../../providers/ChatProvider';
@@ -7,17 +8,18 @@ import useChatUIStore from '../../stores/Zustant';
 
 const MessageInput = () => {
     const { socket } = useChatContext();
+    const {userId}=useChatContext()
     const { selectedConversation } = useChatUIStore();
   const [message, setMessage] = useState(""); // State for storing the message input
   const { mutate: sendMessage } = useMessageMutation();
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e:any) => {
     e.preventDefault();
     if (!message) 
 	return; 
     if (selectedConversation?._id) {
         // Send message
-        sendMessage({ chatId:selectedConversation._id, message });
+        sendMessage({ chatId:selectedConversation._id,senderId:userId, message });
         
         // Emit message to socket
         socket.emit('sendMessage', { chatId: selectedConversation._id, message });

package/src/components/messages/Messages.tsx

@@ -11,7 +11,6 @@ import useChatUIStore from "../../stores/Zustant";
 const Messages = () => {
 	const { selectedConversation } = useChatUIStore()
 	const {userId}=useChatContext()
-	console.log(selectedConversation); // Ensure chatId is correct
 console.log(userId);
 	const { data: messages, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 	// useListenMessages();

package/src/components/sidebar/Conversation.tsx

@@ -33,15 +33,19 @@ console.log(conversation);
       >
         <img
           className="chatSidebarConversationImg"
-          src={conversation.participantDetails.profilePic|| conversation.participantDetails.idpic}
+          src={conversation.participantDetails?.profilePic|| conversation.participantDetails?.idpic}
         />
         <div className="chatSidebarConversationContainer">
-          <div className="chatSidebarConversationInnerDiv">
-            <div className="chatSidebarConversationOuterDiv">
+          {/* <div className="chatSidebarConversationInnerDiv"> */}
+            <p className="text-sm text-gray-500">
               {conversation.participantDetails.firstname}
-            </div>
-          </div>
+            </p>
+            <p className="chatSidebarConversationOuterDiv">
+            Do you know which
+            </p>
+          {/* </div> */}
         </div>
+        <span className="text-xs text-gray-500">08:12 AM</span>
       </div>
 
       {!lastIdx && <div className="divider my-0 py-0 h-1" />}

package/src/components/sidebar/Conversations.tsx

@@ -12,6 +12,7 @@ const Conversations = () => {
   // const { loading, conversations } = useGetConversations();
   return (
     <div className="chatSidebarConversations">
+      <h2 className="text-lg font-semibold text-gray-700">All Chats</h2>
       {conversations?.map((conversation: any, idx: any) => (
         <Conversation
           key={conversation._id}

package/src/service/messageService.ts

@@ -2,8 +2,8 @@
 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}`, {
+export const sendMessage = async ({ chatId,senderId, message }: { chatId: any; senderId:any; message: string }) => {
+    const response = await apiClient.post(`${Path.sendmessage}/${chatId}/${senderId}`, {
         message
     })
     return response.data;

package/src/style/style.css

@@ -37,6 +37,8 @@
     padding-left: 1rem;
     padding-right: 1rem;
     gap: 1rem;
+    border-bottom: 1px;
+    width: 100%;
     justify-content: flex-start;
     align-items: center;
     align-self: stretch;
@@ -72,11 +74,13 @@
 .chatSidebarInput {
     outline-style: none;
     width: 100%;
-    height: 1.25rem;
+    padding: 8px 4px;
     font-size: 1rem;
+    border-radius: 4px;
     line-height: 1.5rem;
     font-weight: 400;
     line-height: 1.25;
+
 }
 
 .chatSidebarConversations {
@@ -90,14 +94,15 @@
 .chatSidebarConversationMain {
     display: inline-flex;
     padding: 0.5rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    gap: 1rem;
-    justify-content: flex-start;
+    margin-top: 0.875rem; 
+    /* padding-top: 0.75rem;
+    padding-bottom: 0.75rem; */
+    gap: 0.75rem;
+    /* justify-content: flex-start; */
     align-items: center;
     border-radius: 0.25rem;
     cursor: pointer;
-    height: 72px;
+    /* height: 72px; */
 
     :hover {
         background-color: #0ea5e9;
@@ -112,13 +117,14 @@
 }
 
 .chatSidebarConversationContainer {
-    display: inline-flex;
-    flex-basis: 0px;
+    /* display: inline-flex; */
+    flex: 1 1 0%;
+    /* flex-basis: 0px;
     flex-direction: column;
     shrink: 1;
     gap: 0.25rem;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: flex-start; */
 }
 
 .chatSidebarConversationInnerDiv {
@@ -130,7 +136,8 @@
 
 .chatSidebarConversationOuterDiv {
     flex-basis: 0px;
-    shrink: 1;
+    /* shrink: 1; */
+    color: #374151;
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: 600;
@@ -233,88 +240,88 @@
 }
 
 .chatMessages {
-    overflow: auto;
+    overflow-y: auto;
     padding-left: 1rem;
     padding-right: 1rem;
     flex: 1 1 0%;
 }
 
-.chatMessagesBubble_me{
-    float: right; 
-background-color: #34D399; 
-}
-
-.chatMessagesBubble_Other{
-    float: left; 
-    background-color: #1D4ED8; 
-}
-
-.chatMessage{
-    overflow-y: auto; 
-padding-left: 2rem;
-padding-right: 2rem; 
-padding-top: 2rem; 
-flex-grow: 1; 
-max-height: 100vh; 
-text-align: left; 
-color: #374151; 
-}
-
-.chatMessagesContainer{
-    position: relative; 
-margin-bottom: 1.5rem; 
-text-align: left; 
-}
-
-.chatMessagesBubble_inner{
-    display: block; 
-position: relative; 
-padding-top: 0.75rem;
-padding-bottom: 0.75rem; 
-padding-left: 1rem;
-padding-right: 1rem; 
-border-radius: 0.375rem; 
-color: #ffffff; 
-word-break: break-all; 
-}
-
-.chatMessagesBubble_Time{
-    display: flex; 
-float: right; 
-gap: 0.25rem; 
-align-items: center; 
-font-size: 0.75rem;
-line-height: 1rem; 
-opacity: 0.5; 
-}
-
-.chatMessageInputDiv{
-    position: sticky; 
-bottom: 0; 
-padding-left: 1rem;
-padding-right: 1rem; 
-margin-top: 0.75rem;
-margin-bottom: 0.75rem; 
-}
-
-.chatMessageInput{
-    display: block; 
-padding: 0.625rem; 
-border-radius: 1rem; 
-border-width: 1px; 
-border-style: none; 
-outline-style: none; 
-width: 100%; 
-font-size: 0.875rem;
-line-height: 1.25rem; 
-}
-
-.chatMessageInputSubmit{
-    display: flex; 
-position: absolute; 
-top: 0;
-bottom: 0; 
-align-items: center; 
+.chatMessagesBubble_me {
+    float: right;
+    background-color: #34D399;
+}
+
+.chatMessagesBubble_Other {
+    float: left;
+    background-color: #1D4ED8;
+}
+
+.chatMessage {
+    overflow-y: auto;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 2rem;
+    flex-grow: 1;
+    max-height: 100vh;
+    text-align: left;
+    color: #374151;
+}
+
+.chatMessagesContainer {
+    position: relative;
+    margin-bottom: 1.5rem;
+    text-align: left;
+}
+
+.chatMessagesBubble_inner {
+    display: block;
+    position: relative;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: 0.375rem;
+    color: #ffffff;
+    word-break: break-all;
+}
+
+.chatMessagesBubble_Time {
+    display: flex;
+    float: right;
+    gap: 0.25rem;
+    align-items: center;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    opacity: 0.5;
+}
+
+.chatMessageInputDiv {
+    position: sticky;
+    bottom: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.chatMessageInput {
+    display: block;
+    padding: 0.625rem;
+    border-radius: 1rem;
+    border-width: 1px;
+    border-style: none;
+    outline-style: none;
+    width: 100%;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+.chatMessageInputSubmit {
+    display: flex;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    align-items: center;
 }
 
 @media (min-width: 640px) {