@pubuduth-aplicy/chat-ui 2.1.77 → 2.1.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.77",
+  "version": "2.1.79",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/Chat.config.ts

@@ -1,7 +1,7 @@
 // config.ts
 export interface ChatConfig {
     apiUrl: string;
-    role?: string;
+    role: string;
     cdnUrl?: string;
     webSocketUrl: string;
   }

package/src/components/Chat.tsx

@@ -5,7 +5,7 @@ import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
 export const Chat = () => {
-  const { setMessages, updateMessageStatus } = useChatUIStore();
+  const { setMessages, selectedConversation, updateMessageStatus } = useChatUIStore();
 
   const { socket, sendMessage } = useChatContext();
 
@@ -44,10 +44,14 @@ export const Chat = () => {
   return (
     <div className="container mx-auto mb-5">
       <div className="grid-container">
-        <div className={`sidebarContainer dark:bg-gray-800`}>
+        <div className={`sidebarContainer dark:bg-gray-800 ${
+            selectedConversation ? "mobile-hidden" : "mobile-visible"
+          }`}>
           <Sidebar />
         </div>
-        <div className="messageContainer">
+        <div className={`messageContainer ${
+            selectedConversation ? "mobile-visible" : "mobile-hidden"
+          }`}>
           <MessageContainer />
         </div>
       </div>

package/src/components/messages/MessageContainer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { MessageSquare } from "lucide-react";
+import { ChevronLeft, MessageSquare } from "lucide-react";
+import { FiArrowLeft } from "react-icons/fi";
 import { useEffect } from "react";
 import MessageInput from "./MessageInput";
 import Messages from "./Messages";
@@ -22,7 +23,7 @@ const MessageContainer = () => {
           event: "joinChat",
           data: {
             chatId: selectedConversation._id,
-            userId: userId
+            userId: userId,
           },
         })
       );
@@ -53,20 +54,18 @@ const MessageContainer = () => {
 
   // Listen for online users updates
 
-  
-
-  const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+  const participantDetails = Array.isArray(
+    selectedConversation?.participantDetails
+  )
     ? selectedConversation?.participantDetails
     : [selectedConversation?.participantDetails].filter(Boolean);
 
-  const participant = participantDetails.find(
-    (p: any) => p._id !== userId
-  );
+  const participant = participantDetails.find((p: any) => p._id !== userId);
 
   // const participant = selectedConversation?.participantDetails?.find(
   //   (p: any) => p._id !== userId
   // );
-  
+
   const isOnline = isUserOnline(participant?._id || "");
 
   // Cleanup on unmount
@@ -82,8 +81,11 @@ const MessageContainer = () => {
         <>
           <div className="chatMessageContainerInner">
             <div className="chatMessageContainerInnerDiv">
-              <button className="chatMessageContainerInnerDiv_button">
-                {/* <CaretLeft size={25} /> */}
+              <button
+                className="backButton"
+                onClick={() => setSelectedConversation(null)}
+              >
+                <ChevronLeft size={20} />
               </button>
               {selectedConversation.type === "service" ? (
                 <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">

package/src/components/messages/MessageInput.tsx

@@ -7,6 +7,7 @@ import { FilePreview, FileType } from "../common/FilePreview";
 import { getApiClient } from "../../lib/api/apiClient";
 import { MessageStatus } from "../../types/type";
 import { Path } from "../../lib/api/endpoint";
+import { getChatConfig } from "../../Chat.config";
 
 const MAX_FILE_SIZE_MB = 5;
 const MAX_FILE_COUNT = 5;
@@ -37,6 +38,7 @@ interface Attachment {
 
 const MessageInput = () => {
   const apiClient = getApiClient();
+  const {role} = getChatConfig();
   const { socket, sendMessage, userId } = useChatContext();
   const { selectedConversation, setMessages } = useChatUIStore();
   const [message, setMessage] = useState("");
@@ -349,6 +351,8 @@ const MessageInput = () => {
               selectedConversation?.type === "service"
                 ? selectedConversation?.serviceId
                 : undefined,
+            senderRole: role,
+            receiverRole: role === 'customer' ? 'provider' : 'customer',
           },
           {
             onSuccess: (data) => {

package/src/components/sidebar/Conversation.tsx

@@ -116,7 +116,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </p>
           <div className="flex items-center gap-2">
             {unreadCount > 0 && (
-              <span className="bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+             <span className="background text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                 {unreadCount}
               </span>
             )}

package/src/declarations.d.ts

@@ -22,6 +22,7 @@ declare module '@pubuduth-aplicy/chat-ui' {
     apiUrl: string;
     role?: string;
     webSocketUrl: string;
+    cdnUrl?: string;
   }
   
   interface ChatProviderProps {

package/src/providers/ChatProvider.tsx

@@ -41,7 +41,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const reconnectAttempts = useRef(0);
   const maxReconnectAttempts = 5;
   const reconnectInterval = 5000; // 5 seconds
-  const { webSocketUrl } = getChatConfig();
+  const { webSocketUrl,role } = getChatConfig();
 
   const connectWebSocket = useCallback(() => {
     // console.log("🔌 Creating new WebSocket connection...");
@@ -49,7 +49,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     // Convert HTTP URL to WebSocket URL
     const wsUrl = webSocketUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
     const socketInstance = new WebSocket(
-      `${wsUrl}?userId=${encodeURIComponent(userId)}`
+      `${wsUrl}?userId=${encodeURIComponent(userId)}&role=${encodeURIComponent(role)}`
     );
 
     socketInstance.onopen = () => {
@@ -62,6 +62,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
         JSON.stringify({
           event: "handshake",
           userId: userId,
+          role: role,
         })
       );
     };
@@ -86,7 +87,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       console.error("❌ WebSocket error:", error);
     };
 
-    socketInstance.onclose = (event) => {
+    socketInstance.onclose = () => {
       // console.log("🔌 WebSocket connection closed", event);
       // console.log("❌ WebSocket disconnected:", event.code, event.reason);
       setIsConnected(false);

package/src/service/messageService.ts

@@ -12,6 +12,8 @@ export const sendMessage = async (params: {
   serviceTitle?: string;
   type?: "personal" | "service";
   serviceId?: string;
+  senderRole?: string;
+  receiverRole?: string;
 }) => {
   const {
     receiverId,
@@ -22,6 +24,8 @@ export const sendMessage = async (params: {
     serviceTitle,
     type,
     serviceId,
+    senderRole,
+    receiverRole,
   } = params;
   const apiClient = getApiClient();
 
@@ -34,7 +38,9 @@ export const sendMessage = async (params: {
       serviceTitle,
       type,
       serviceId,
-      messageType: "user"
+      messageType: "user",
+      senderRole,
+      receiverRole
     }
   );
   return response.data;

package/src/service/sidebarApi.ts

@@ -12,7 +12,7 @@ export const getAllConversationData = async (userid: string) => {
    
     const endpoint = role === 'admin' 
         ? `${Path.getConversationListByAdmin}` 
-        : `${Path.getconversation}/${userid}`;
+        : `${Path.getconversation}/${userid}/${role}`;
 
     const res = await apiClient.get<ApiResponse>(endpoint);
     if (res.data) {

package/src/style/style.css

@@ -9,12 +9,14 @@
   /* background-color: #9CA3AF; */
   --bg-opacity: 0;
   backdrop-blur: blur(16px);
+  
+
 }
 
 .sidebarContainer {
   /* grid-column: span 3; */
   /* overflow-y: auto; */
-  border: 1px solid #ddd;
+  /* border: 1px solid #ddd; */
   max-height: 100vh;
 }
 
@@ -23,6 +25,29 @@
   /* border: 1px solid; */
   max-height: 100vh;
   overflow-y: auto;
+  
+}
+
+.sidebarContainer,
+.messageContainer {
+  height: 100%;
+}
+
+.hide-on-mobile {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+/* Back button visible only on mobile */
+.back-button {
+  display: none;
+}
+
+.background {
+  background-color: #317490;
 }
 
 .chatSidebarMain {
@@ -58,7 +83,7 @@
   justify-content: flex-start;
   align-items: center;
   height: 2.5rem;
-  background-color: rgb(248, 249, 249);
+  background-color: #FEFEFF;
   /* Move bg color here */
 }
 
@@ -167,6 +192,7 @@
   flex-direction: column;
   justify-content: center;
   height: 100%;
+  background-color: #FEFEFF;
 }
 
 .chatMessageContainerInner {
@@ -379,7 +405,7 @@
 }
 
 .chatMessageInputSubmit {
-  background-color: #12bbb5;
+  background-color: #317490;
   border: none;
   width: 40px;
   height: 40px;
@@ -412,6 +438,8 @@
   width: 100%;
   font-family: Arial, sans-serif;
   margin-bottom: 8px;
+  margin: 0 auto;
+  max-width: 1200px;
 }
 
 .message-row {
@@ -468,14 +496,14 @@
 }
 
 .outgoing .chat-bubble {
-  background-color: #aef7e883;
-  color: #595c61;
+  background-color: #317490;
+  color: #DDE8ED;
 
 }
 
 .incoming .chat-bubble {
-  background-color: #EBEDF0;
-  color: #595c61;
+  background-color: #F4F3F6;
+  color: #476179;
 }
 
 .timestamp_incomeing {
@@ -551,15 +579,15 @@
   .sidebarContainer {
     /* display: grid; */
     grid-column: span 3;
-    background-color: rgb(248, 249, 249);
-    border-radius: 1%;
+    background-color: #FEFEFF;
+    border-radius: 2%;
   }
 
   .messageContainer {
     display: grid;
     grid-column: span 6;
-    border: 1px solid #ddd;
-    border-radius: 1%;
+    /* border: 1px solid #ddd; */
+    border-radius: 3%;
   }
 
   .chatMessageContainerInnerDiv_button {
@@ -1905,4 +1933,159 @@
 
 .message-option-btn.disabled:hover::before {
   background: #666;
+}
+
+.backButton {
+  display: none; 
+  align-items: center;
+  gap: 4px;
+}
+
+
+@media (max-width: 768px) {
+  .grid-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .sidebarContainer {
+    max-height: auto;
+    order: 1;
+  }
+
+  .messageContainer {
+    max-height: auto;
+    order: 2;
+  }
+
+  .chatSidebarSearchbar {
+    padding: 1rem;
+    flex-wrap: wrap;
+    height: auto;
+  }
+
+  .chatMessagesBubble_inner {
+    max-width: 70%; /* allow wider bubbles on small screens */
+  }
+}
+
+/* Mobile Layout (≤ 480px) */
+@media (max-width: 480px) {
+  .grid-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .chatSidebarMain {
+    flex-direction: column;
+    padding: 0.5rem;
+  }
+
+  .chatSidebarSearchbarContainer {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+  }
+
+  .chatMessageContainerInner {
+    padding: 1rem;
+    font-size: 0.8rem;
+  }
+
+  .chatMessagesBubble_inner {
+    max-width: 85%;
+    font-size: 13px;
+  }
+
+  .chatMessageInput {
+    font-size: 0.9rem;
+    padding: 6px 4px;
+  }
+
+  .chatMessageInputSubmit {
+    width: 35px;
+    height: 35px;
+  }
+
+  .chat-bubble {
+    font-size: 13px;
+    max-width: 90%;
+  }
+
+  .timestamp_incomeing,
+  .timestamp_outgoing {
+    font-size: 10px;
+  }
+
+   .attachments-preview {
+    width: 100%;
+   }
+    
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .grid-container {
+    display: block;
+  }
+
+  .chatMessageContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  background-color: #FEFEFF;
+  width: 100%;
+}
+
+  .sidebarContainer,
+  .messageContainer {
+    width: 100%;
+  }
+
+  .back-button {
+    display: block;
+  }
+  .messageContainer.active {
+    display: block;
+  }
+
+  .sidebarContainer.hidden {
+    display: none;
+  }
+
+  .backButton {
+    display: inline-block;
+    margin-right: 10px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  .mobile-hidden {
+    display: none !important;
+  }
+  .mobile-visible {
+    display: block !important;
+  }
+
+  .chatMessageInputform{
+    padding-left: 0rem;
+  }
+
+  .message-input-container{
+    padding: 0px;
+  }
+
+  .media-item{
+    width: 100%;
+  }
+
+  .chatMessageInputSubmit {
+        /* width: 25px; */
+        height: 35px;
+    }
+  
+
 }