@pubuduth-aplicy/chat-ui 2.1.87 → 2.1.89

package/package.json

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

@@ -26,6 +26,10 @@ export const Chat = () => {
             data: {
               messageIds: [message._id],
               chatId: message.conversationId, // make sure this is sent from backend
+              senderRole: message.senderRole,
+              receiverRole: message.receiverRole,
+              senderId: message.senderId,
+              receiverId: message.receiverId,
             },
           });
 

package/src/components/messages/MessageContainer.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ChevronLeft, MessageSquare } from "lucide-react";
-import { FiArrowLeft } from "react-icons/fi";
+import { ChevronLeft, MessageCircle } from "lucide-react";
 import { useEffect } from "react";
 import MessageInput from "./MessageInput";
 import Messages from "./Messages";
 import useChatUIStore from "../../stores/Zustant";
 import { useChatContext } from "../../providers/ChatProvider";
 import { getChatConfig } from "../../Chat.config";
+import defaultProfilePicture from "../../assets/pngegg.png";
 
 const MessageContainer = () => {
   const { userId } = useChatContext();
@@ -90,13 +90,13 @@ const MessageContainer = () => {
               </button>
               {selectedConversation.type === "service" ? (
                 <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                  <MessageSquare size={24} className="text-gray-600" />
+                  <MessageCircle size={24} className="text-gray-600" />
                 </div>
               ) : (
                 <img
                   className="chatMessageContainerInnerImg"
                   alt="Profile"
-                  src={participant?.profilePicture}
+                  src={participant?.profilePicture || defaultProfilePicture}
                 />
               )}
               <div className="chatMessageContainerOutter">

package/src/components/messages/MessageInput.tsx

@@ -106,7 +106,8 @@ const MessageInput = () => {
         data: {
           chatId: selectedConversation._id,
           userId,
-          reciverId: otherParticipant?._id,
+          receiverId: otherParticipant?._id,
+          receiverRole: role === "customer" ? "provider" : "customer",
         },
       });
     }
@@ -119,7 +120,8 @@ const MessageInput = () => {
           data: {
             chatId: selectedConversation._id,
             userId,
-            reciverId: otherParticipant?._id,
+            receiverId: otherParticipant?._id,
+            receiverRole: role === "customer" ? "provider" : "customer",
           },
         });
       }
@@ -383,6 +385,8 @@ const MessageInput = () => {
                   attachments: successfulUploads,
                   senderId: userId,
                   receiverId: otherParticipant._id,
+                  receiverRole: role === "customer" ? "provider" : "customer",
+                  senderRole: role,
                 },
               });
             },

package/src/components/sidebar/Conversation.tsx

@@ -5,6 +5,7 @@ import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
 import { getChatConfig } from "../../Chat.config";
+import defaultProfilePicture from "../../assets/pngegg.png";
 
 const Conversation = ({ conversation }: ConversationProps) => {
   const {
@@ -39,6 +40,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           senderId: participant?._id,
           receiverId: userId,
           receiverRole: role,
+          senderRole: role === "customer" ? "provider" : "customer",
           chatId: conversation._id,
         },
       };
@@ -102,7 +104,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <>
             <img
               className="w-10 h-10 rounded-full"
-              src={participant?.profilePicture}
+              src={participant?.profilePicture || defaultProfilePicture}
               alt="User Avatar"
             />
             <span