@pubuduth-aplicy/chat-ui 2.1.70 → 2.1.73

package/src/providers/ChatProvider.tsx

@@ -18,9 +18,11 @@ interface ChatProviderProps {
 interface ChatContextType {
   socket: WebSocket | null;
   userId: string;
-  onlineUsers: any[];
+  // onlineUsers: any[];
   sendMessage: (data: any) => void;
   isConnected: boolean;
+  onlineUsers: Set<string>; // Change to Set for better performance
+  isUserOnline: (userId: string) => boolean; // Add helper function
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -31,7 +33,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 }) => {
   const socketRef = useRef<WebSocket | null>(null);
   const [socket, setSocket] = useState<WebSocket | null>(null);
-  const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  // const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  const [onlineUsers, setOnlineUsers] = useState<Set<string>>(new Set());
   const [isConnected, setIsConnected] = useState(false);
   const reconnectAttempts = useRef(0);
   const maxReconnectAttempts = 5;
@@ -40,35 +43,40 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
   const connectWebSocket = useCallback(() => {
     console.log("🔌 Creating new WebSocket connection...");
-    
+
     // Convert HTTP URL to WebSocket URL
-    const wsUrl = apiUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:');
-    const socketInstance = new WebSocket(`${wsUrl}?userId=${userId}`);
+    const wsUrl = apiUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
+    const socketInstance = new WebSocket(
+      `${wsUrl}?userId=${encodeURIComponent(userId)}`
+    );
 
     socketInstance.onopen = () => {
       console.log("✅ WebSocket connected");
       setIsConnected(true);
       reconnectAttempts.current = 0;
-      
+
       // Send initial handshake if needed
-      socketInstance.send(JSON.stringify({
-        type: 'handshake',
-        userId: userId
-      }));
+      socketInstance.send(
+        JSON.stringify({
+          event: "handshake",
+          userId: userId,
+        })
+      );
     };
 
     socketInstance.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
-        
-        if (data.type === 'getOnlineUsers') {
-          setOnlineUsers(data.users);
+
+        if (data.event === "getOnlineUsers") {
+          console.log("Online users update:", data.data);
+          setOnlineUsers(new Set(data.data));
         }
-        
+
         // Handle other message types here
-        console.log('Received message:', data);
+        console.log("Received message:", data);
       } catch (error) {
-        console.error('Error parsing message:', error);
+        console.error("Error parsing message:", error);
       }
     };
 
@@ -80,11 +88,13 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       console.log("🔌 WebSocket connection closed", event);
       console.log("❌ WebSocket disconnected:", event.code, event.reason);
       setIsConnected(false);
-      
+
       // Attempt reconnection
       if (reconnectAttempts.current < maxReconnectAttempts) {
         reconnectAttempts.current += 1;
-        console.log(`Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`);
+        console.log(
+          `Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`
+        );
         setTimeout(connectWebSocket, reconnectInterval);
       }
     };
@@ -113,14 +123,24 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     };
   }, [connectWebSocket]);
 
+  const isUserOnline = useCallback(
+    (userId: string) => {
+      return onlineUsers.has(userId);
+    },
+    [onlineUsers]
+  );
+
   return (
-    <ChatContext.Provider value={{ 
-      socket, 
-      userId, 
-      onlineUsers, 
-      sendMessage,
-      isConnected 
-    }}>
+    <ChatContext.Provider
+      value={{
+        socket,
+        userId,
+        onlineUsers,
+        sendMessage,
+        isConnected,
+        isUserOnline,
+      }}
+    >
       {children}
     </ChatContext.Provider>
   );
@@ -132,4 +152,4 @@ export const useChatContext = () => {
     throw new Error("useChatContext must be used within a ChatProvider");
   }
   return context;
-};
+};

package/src/stores/Zustant.ts

@@ -12,28 +12,30 @@ interface ChatUIState {
       firstname: string;
       idpic: string;
     };
+    unreadMessageIds?: string[];
     _id: string;
   } | null;
   setSelectedConversation: (
     selectedConversation: ChatUIState["selectedConversation"]
   ) => void;
-  messages: { 
-    _id: string; 
-    text: string; 
-    senderId: string; 
-    status: string ;
-     isOptimistic:boolean;
-      message:string;
-      createdAt: string;
-      media: {
-          type: FileType;
-          url: string;
-          name: string;
-          size: number;
-          uploadProgress: number;
-          uploadError:string
-      }[];
-      isUploading: boolean;}[];
+  messages: {
+    _id: string;
+    text: string;
+    senderId: string;
+    status: string;
+    isOptimistic: boolean;
+    message: string;
+    createdAt: string;
+    media: {
+      type: FileType;
+      url: string;
+      name: string;
+      size: number;
+      uploadProgress: number;
+      uploadError: string
+    }[];
+    isUploading: boolean;
+  }[];
   setMessages: (messages: ChatUIState["messages"] | ((prev: ChatUIState["messages"]) => ChatUIState["messages"])) => void;
   updateMessageStatus: (messageId: string, status: string) => void;
   toggleChat: () => void;

package/src/style/style.css

@@ -51,13 +51,15 @@
   display: flex;
   padding: 0.5rem 1rem;
   width: 100%;
-  border: 1px solid #ccc; /* Consistent border color */
+  border: 1px solid #ccc;
+  /* Consistent border color */
   border-radius: 4px;
   gap: 1rem;
   justify-content: flex-start;
   align-items: center;
   height: 2.5rem;
-  background-color: rgb(248, 249, 249); /* Move bg color here */
+  background-color: rgb(248, 249, 249);
+  /* Move bg color here */
 }
 
 .chatSidebarSearchbarImg {
@@ -77,9 +79,12 @@
   font-weight: 400;
   width: 100%;
   max-width: 600px;
-  border: none !important; /* Force no border */
-  background: transparent; /* Inherit from container */
-  box-shadow: none !important; /* Remove any shadow */
+  border: none !important;
+  /* Force no border */
+  background: transparent;
+  /* Inherit from container */
+  box-shadow: none !important;
+  /* Remove any shadow */
 }
 
 .chatSidebarSearchbarContainer:focus-within {
@@ -379,7 +384,8 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  border-radius: 6px; /* or 0px for sharp corners */
+  border-radius: 6px;
+  /* or 0px for sharp corners */
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -435,23 +441,23 @@
   position: relative;
 }
 
-.amk7{
-position: absolute;
-top: 0;
-display: block;
-width: 8px;
-height: 13px;
-right: -8px;
+.amk7 {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 8px;
+  height: 13px;
+  right: -8px;
 }
 
-:root{
-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+:root {
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .chat-bubble {
 
   background-color: #f3f4f6;
-  border-radius: 0.5rem ;
+  border-radius: 0.5rem;
   /* padding: 0.5rem; */
   font-size: 14px;
   max-width: 20rem;
@@ -1191,17 +1197,17 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
   /* margin-top: 0.5rem; */
 }
 
- .media-item {
+.media-item {
   background: #f3f4f6;
   border-radius: 0.375rem;
   /* reduced from 0.75rem */
-   padding: 0.5rem;
+  padding: 0.5rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: start;
   width: 246px;
-} 
+}
 
 /* .media-grid {
   display: grid;
@@ -1243,15 +1249,15 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
   position: relative;
   width: 246px;
   height: 100%; */
-  /* aspect-ratio: 1; */
-  /* overflow: hidden;
+/* aspect-ratio: 1; */
+/* overflow: hidden;
 } */
 
 /* .media-item img {
   width: 100%;
   height: 100%;
   object-fit: cover; */
-  /* display: block; */
+/* display: block; */
 /* } */
 
 /* Adjust aspect ratio for single media */
@@ -1277,7 +1283,8 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
 .four-media-item
 {
   width: 100%;
-} */ */
+} */
+*/
 
 /* Optional: Add overlay for additional items count */
 .media-item.count-overlay {
@@ -1351,7 +1358,7 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
 
 .document-preview {
   position: relative;
-  width: 226px; 
+  width: 226px;
   height: 60px;
   /* Increased height to accommodate filename */
   border-radius: 12px;
@@ -1559,4 +1566,83 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
 .cancel-edit {
   background-color: #f44336;
   color: white;
+}
+
+.system-message.booking-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 400px;
+  margin: 20px auto;
+  padding: 24px;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.system-message.booking-details h4 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.system-message.booking-details h4::before {
+  content: "✓";
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background: #2cb1aa;
+  color: white;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.system-message.booking-details .details {
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid #dee2e6;
+}
+
+.system-message.booking-details .details p {
+  margin: 8px 0;
+  padding: 8px 0;
+  border-bottom: 1px solid #f1f3f4;
+  font-size: 14px;
+  color: #495057;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.system-message.booking-details .details p:last-child {
+  border-bottom: none;
+  font-weight: 600;
+  color: #2cb1aa;
+  font-size: 16px;
+}
+
+.system-message.booking-details .details p strong {
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+  .system-message.booking-details {
+    max-width: 90%;
+    margin: 16px auto;
+    padding: 20px;
+  }
 }

package/src/types/type.ts

@@ -21,7 +21,7 @@ export interface ParticipantDetails {
 export interface Conversation {
   _id: string;
   createdAt: string;
-  lastMessage:{
+  lastMessage: {
     _id: string;
     senderId: string;
     message: string;
@@ -47,11 +47,13 @@ export interface ApiResponse {
 
 export interface ConversationProps {
   conversation: {
-    lastMessage:{
+    lastMessage: {
       _id: string;
       senderId: string;
       message: string;
-      media:string[];
+      media: string[];
+      type?: 'user' | 'system' | 'system-completion';
+      status: MessageStatus;
       chatId: string;
       createdAt: string;
       updatedAt: string;
@@ -70,4 +72,4 @@ export interface ConversationProps {
   lastIdx: boolean;
 }
 
-export type MessageStatus = 'sent' | 'delivered' | 'read' | 'sending' | 'failed';
+export type MessageStatus = 'sent' | 'delivered' | 'read' | 'sending' | 'failed' | 'edited' | 'deleted';