@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.74

package/src/components/sidebar/SearchInput.tsx

@@ -2,71 +2,33 @@
 import { useState } from "react";
 import searchicon from "../../assets/icons8-search.svg";
 import useChatUIStore from "../../stores/Zustant";
-import { useGetConversations } from "../../hooks/queries/useChatApi";
-import { useChatContext } from "../../providers/ChatProvider";
 // import { MagnifyingGlass } from "@phosphor-icons/react"
 // import useGetConversations from "../../hooks/useGetConversations";
 // import useConversation from '../../zustand/useConversation'
 // import toast from 'react-hot-toast';
 
 const SearchInput = () => {
-  const { userId } = useChatContext();
-  const [search, setSearch] = useState("");
-  const { setSelectedConversation } = useChatUIStore();
-  const { data } = useGetConversations(userId);
+  const { searchTerm, setSearchTerm } = useChatUIStore();
+  const [search, setSearch] = useState(searchTerm);
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
-    if (!search) return;
-    if (search.length < 3) {
-      return;
-    }
-
-    const conversation = data?.find(
-      (c: {
-        _id: string;
-        participantDetails: {
-          username: string;
-          firstname?: string;
-          idpic?: string;
-        };
-      }) =>
-        c.participantDetails.username
-          .toLowerCase()
-          .includes(search.toLowerCase())
-    );
-
-    if (conversation) {
-      const updatedConversation = {
-        ...conversation,
-        participantDetails: {
-          ...conversation.participantDetails,
-          firstname: conversation.participantDetails.username || "Unknown",
-          idpic:
-            conversation.participantDetails.profilePic || "default-idpic.png",
-        },
-      };
-      setSelectedConversation(updatedConversation);
-      setSearch("");
-    }
-    console.error("No such user found!");
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const term = e.target.value;
+    setSearch(term);
+    setSearchTerm(term);
   };
-
   return (
     <>
-      <form onSubmit={handleSubmit}>
-        <div className="chatSidebarSearchbar">
-          <div className="chatSidebarSearchbarContainer">
-            <img src={searchicon} className="chatSidebarSearchbarImg" />
-            <input
-              className="chatSidebarInput"
-              placeholder="Search…"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-          </div>
+      <div className="chatSidebarSearchbar">
+        <div className="chatSidebarSearchbarContainer">
+          <img src={searchicon} className="chatSidebarSearchbarImg" />
+          <input
+            className="chatSidebarInput"
+            placeholder="Search…"
+            value={search}
+            onChange={handleChange}
+          />
         </div>
-      </form>
+      </div>
     </>
   );
 };

package/src/hooks/useMessageStatus.ts

@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { useChatContext } from "../providers/ChatProvider";
+import useChatUIStore from '../stores/Zustant';
+
+export const useMessageStatus = () => {
+    const { socket,userId } = useChatContext();
+    const { messages, setMessages, selectedConversation } = useChatUIStore();
+
+    // Handle status updates from server
+    useEffect(() => {
+        if (!socket) return;
+
+        const handleStatusUpdate = (event: MessageEvent) => {
+            try {
+                const parsed = JSON.parse(event.data);
+                
+                if (parsed.event === 'messageStatusUpdated') {
+                    const { messageId, status, chatId } = parsed.data;
+                    
+                    setMessages(prev => prev.map(msg => {
+                        if (msg._id === messageId) {
+                            // Only update if new status is higher priority
+                            const statusOrder = ['sent', 'delivered', 'read'];
+                            const currentIdx = statusOrder.indexOf(msg.status);
+                            const newIdx = statusOrder.indexOf(status);
+                            
+                            if (newIdx > currentIdx) {
+                                return { ...msg, status };
+                            }
+                        }
+                        return msg;
+                    }));
+                }
+            } catch (error) {
+                console.error('Error handling status update:', error);
+            }
+        };
+
+        socket.addEventListener('message', handleStatusUpdate);
+        return () => socket.removeEventListener('message', handleStatusUpdate);
+    }, [socket, setMessages]);
+
+    // Send delivery confirmations for visible messages
+    useEffect(() => {
+        if (!socket || !selectedConversation) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const messageId = entry.target.getAttribute('data-message-id');
+                        if (messageId) {
+                            const message = messages.find(m => m._id === messageId);
+                            if (message && message.status === 'sent') {
+                                socket.send(JSON.stringify({
+                                    event: 'confirmDelivery',
+                                    data: {
+                                        messageId,
+                                        chatId: selectedConversation._id
+                                    }
+                                }));
+                            }
+                        }
+                    }
+                });
+            },
+            { threshold: 0.7 }
+        );
+
+        // Observe all messages in current chat
+        const messageElements = document.querySelectorAll('[data-message-id]');
+        messageElements.forEach(el => observer.observe(el));
+
+        return () => observer.disconnect();
+    }, [messages, socket, selectedConversation]);
+
+    // Mark messages as read when chat is active
+    useEffect(() => {
+        if (!socket || !selectedConversation) return;
+
+        const unreadMessages = messages.filter(
+            msg => msg.status !== 'read' && 
+                  msg.conversationId === selectedConversation._id &&
+                  msg.senderId !== userId
+        );
+
+        if (unreadMessages.length > 0) {
+            socket.send(JSON.stringify({
+                event: 'messageRead',
+                data: {
+                    messageIds: unreadMessages.map(m => m._id),
+                    chatId: selectedConversation._id
+                }
+            }));
+        }
+    }, [messages, socket, selectedConversation, userId]);
+};

package/src/service/messageService.ts

@@ -3,73 +3,98 @@ import { FileType } from "../components/common/FilePreview";
 import { getApiClient } from "../lib/api/apiClient";
 import { Path } from "../lib/api/endpoint";
 
-export const sendMessage = async ({ chatId,senderId, message,attachments }: { chatId: any; senderId:any; message: string,attachments: { type: FileType; url: string; name: string; size: number; }[] }) => {
-    const apiClient = getApiClient();
-    console.log("sendMessage", chatId, senderId, message, attachments); // Log the parameters
-    
-    const response = await apiClient.post(`${Path.sendmessage}/${chatId}/${senderId}`, {
-        message:message,
-        attachments:attachments
-    })
-    return response.data;
+export const sendMessage = async (params: {
+  receiverId: string;
+  senderId: string;
+  message: string;
+  attachments: { type: FileType; url: string; name: string; size: number }[];
+  bookingId?: string;
+  serviceTitle?: string;
+  type?: "personal" | "service";
+  serviceId?: string;
+}) => {
+  const {
+    receiverId,
+    senderId,
+    message,
+    attachments,
+    bookingId,
+    serviceTitle,
+    type,
+    serviceId,
+  } = params;
+  const apiClient = getApiClient();
+
+  const response = await apiClient.post(
+    `${Path.sendmessage}/${receiverId}/${senderId}`,
+    {
+      message,
+      attachments,
+      bookingId,
+      serviceTitle,
+      type,
+      serviceId,
+    }
+  );
+  return response.data;
 };
 
 
-export const fetchMessages = async (chatId: string|undefined, userid: string,pagenum:number) => {
-    const apiClient = getApiClient();
-    try {
-        const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`,{
-            params: { pagenum, limit: 20 },
-        });
-        console.log(response); // Check the full response
-        return response.data; // Ensure 'data' exists or adjust accordingly
-    } catch (error) {
-        console.error("Error fetching messages:", error);
-        return []; // Return a default empty array on error
-    }
+export const fetchMessages = async (chatId: string | undefined, userid: string, pagenum: number) => {
+  const apiClient = getApiClient();
+  try {
+    const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`, {
+      params: { pagenum, limit: 20 },
+    });
+    console.log(response); // Check the full response
+    return response.data; // Ensure 'data' exists or adjust accordingly
+  } catch (error) {
+    console.error("Error fetching messages:", error);
+    return []; // Return a default empty array on error
+  }
 };
 
 export const setEditMessage = async ({
-    messageId,
-    userId,
-    newMessage
-  }: {
-    messageId: string;
-    userId: string;
-    newMessage: string;
-  }) => {
-    const apiClient = getApiClient();
-    try {
-      const response = await apiClient.put(`${Path.editMessage}/${messageId}`, {
-        userId,
-        newMessage
-      });
-      return response.data;
-    } catch (error) {
-      console.error("Error editing message:", error);
-      throw error;
-    }
-  };
+  messageId,
+  userId,
+  newMessage
+}: {
+  messageId: string;
+  userId: string;
+  newMessage: string;
+}) => {
+  const apiClient = getApiClient();
+  try {
+    const response = await apiClient.put(`${Path.editMessage}/${messageId}`, {
+      userId,
+      newMessage
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Error editing message:", error);
+    throw error;
+  }
+};
 
 
 export const deleteMessage = async ({
-    messageId,
-    userId
-  }: {
-    messageId: string;
-    userId: string;
-  }) => {
-    const apiClient = getApiClient();
-    try {
-      const response = await apiClient.delete(
-        `${Path.deleteMessage}/${messageId}`,
-        {
-          data: { userId } // Sending userId in the request body
-        }
-      );
-      return response.data;
-    } catch (error) {
-      console.error("Error deleting message:", error);
-      throw error;
-    }
-  };
+  messageId,
+  userId
+}: {
+  messageId: string;
+  userId: string;
+}) => {
+  const apiClient = getApiClient();
+  try {
+    const response = await apiClient.delete(
+      `${Path.deleteMessage}/${messageId}`,
+      {
+        data: { userId } // Sending userId in the request body
+      }
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error deleting message:", error);
+    throw error;
+  }
+};

package/src/stores/Zustant.ts

@@ -14,6 +14,11 @@ interface ChatUIState {
     };
     unreadMessageIds?: string[];
     _id: string;
+    type?: 'personal' | 'service';
+    bookingId?: string;
+    title?: string;
+    serviceId?: string;
+    serviceTitle?: string;
   } | null;
   setSelectedConversation: (
     selectedConversation: ChatUIState["selectedConversation"]
@@ -39,10 +44,10 @@ interface ChatUIState {
   setMessages: (messages: ChatUIState["messages"] | ((prev: ChatUIState["messages"]) => ChatUIState["messages"])) => void;
   updateMessageStatus: (messageId: string, status: string) => void;
   toggleChat: () => void;
-  incrementUnreadCount: () => void;
   onlineUsers: string[];
   setOnlineUsers: (users: string[]) => void;
-  resetUnreadCount: () => void;
+  searchTerm: string;
+  setSearchTerm: (searchTerm: string) => void;
 }
 
 const useChatUIStore = create<ChatUIState>((set) => ({
@@ -64,8 +69,8 @@ const useChatUIStore = create<ChatUIState>((set) => ({
   toggleChat: () => set((state) => ({ isChatOpen: !state.isChatOpen })),
   onlineUsers: [],
   setOnlineUsers: (users) => set({ onlineUsers: users }),
-  incrementUnreadCount: () => set((state) => ({ unreadCount: state.unreadCount + 1 })),
-  resetUnreadCount: () => set({ unreadCount: 0 }),
+  searchTerm: "",
+  setSearchTerm: (searchTerm) => set({ searchTerm }),
 }));
 
 export default useChatUIStore;

package/src/style/style.css

@@ -1645,4 +1645,172 @@
     margin: 16px auto;
     padding: 20px;
   }
+}
+
+.circular-progress-container {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.media-preview-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* z-index: 1; */
+}
+
+.blurred-preview {
+  width: 100%;
+  object-fit: cover;
+  filter: blur(3px) brightness(0.6);
+}
+
+.circular-progress {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+}
+
+.circular-progress-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.circular-progress-track {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.3);
+  stroke-width: 3;
+}
+
+.circular-progress-bar {
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 3;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.5s ease-in-out;
+  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
+}
+
+.circular-progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Smooth animation for progress updates */
+.circular-progress-bar {
+  animation: progress-smooth 0.3s ease-out;
+}
+
+@keyframes progress-smooth {
+  from {
+    opacity: 0.7;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* Pulse animation while uploading */
+.circular-progress-container:not([data-complete="true"]) .circular-progress {
+  animation: upload-pulse 2s ease-in-out infinite;
+}
+
+@keyframes upload-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+/* Completion state */
+.circular-progress-container[data-complete="true"] .circular-progress-bar {
+  stroke: #22c55e;
+  animation: completion-flash 0.6s ease-out;
+}
+
+.circular-progress-container[data-complete="true"] .circular-progress-text {
+  color: #22c55e;
+}
+
+@keyframes completion-flash {
+  0% {
+    stroke: #ffffff;
+  }
+
+  50% {
+    stroke: #22c55e;
+    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8));
+  }
+
+  100% {
+    stroke: #22c55e;
+    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
+  }
+}
+
+/* Error state */
+.circular-progress-container[data-error="true"] .circular-progress-bar {
+  stroke: #ef4444;
+}
+
+.circular-progress-container[data-error="true"] .circular-progress-text {
+  color: #ef4444;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .circular-progress-container {
+    width: 100px;
+    height: 100px;
+  }
+
+  .circular-progress {
+    width: 70px;
+    height: 70px;
+  }
+
+  .circular-progress-text {
+    font-size: 14px;
+  }
+}
+
+/* Optional: Add a subtle background overlay */
+.circular-progress-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  /* z-index: 1; */
 }

package/src/types/type.ts

@@ -25,50 +25,47 @@ export interface Conversation {
     _id: string;
     senderId: string;
     message: string;
+    media: string[];
+    type?: 'user' | 'system' | 'system-completion';
+    status: MessageStatus;
     chatId: string;
     createdAt: string;
     updatedAt: string;
     __v: number;
-  },
+  };
   updatedAt: string;
   __v: number;
   participantDetails: ParticipantDetails;
+  participants?: string[];
+  // readReceipts?: string[] | [];
+  unreadMessageIds: string[];
+  type?: string | undefined;
+  bookingId?: string;
+  serviceId?: string;
+  unreadMessageCount?: number
+  serviceTitle?: string;
+}
+
+export interface ServiceConversationGroup {
+  serviceId: string;
+  serviceTitle: string;
+  conversations: Conversation[];
 }
 
-export interface ServiceInfo {
-  conversationsWithParticipantDetails: Conversation[];
+export interface ParticipantGroup {
+  participantDetails: ParticipantDetails;
+  personalConversation: Conversation | null;
+  serviceConversations: ServiceConversationGroup[];
 }
 
 export interface ApiResponse {
   success: boolean;
   message: string;
-  serviceInfo: Conversation[];
+  serviceInfo: ParticipantGroup[];
 }
 
 export interface ConversationProps {
-  conversation: {
-    lastMessage: {
-      _id: string;
-      senderId: string;
-      message: string;
-      media: string[];
-      type?: 'user' | 'system' | 'system-completion';
-      status: MessageStatus;
-      chatId: string;
-      createdAt: string;
-      updatedAt: string;
-      __v: number;
-    },
-    participantDetails: {
-      _id: string;
-      profilePic: string;
-      firstname: string;
-      idpic: string;
-
-    },
-    unreadMessageIds: string[];
-    _id: string;
-  };
+  conversation: Conversation;
   lastIdx: boolean;
 }