@pubuduth-aplicy/chat-ui 2.1.71 → 2.1.74

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

@@ -12,35 +12,42 @@ interface ChatUIState {
       firstname: string;
       idpic: string;
     };
+    unreadMessageIds?: string[];
     _id: string;
+    type?: 'personal' | 'service';
+    bookingId?: string;
+    title?: string;
+    serviceId?: string;
+    serviceTitle?: 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;
-  incrementUnreadCount: () => void;
   onlineUsers: string[];
   setOnlineUsers: (users: string[]) => void;
-  resetUnreadCount: () => void;
+  searchTerm: string;
+  setSearchTerm: (searchTerm: string) => void;
 }
 
 const useChatUIStore = create<ChatUIState>((set) => ({
@@ -62,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

@@ -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;
@@ -1560,6 +1567,7 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
   background-color: #f44336;
   color: white;
 }
+
 .system-message.booking-details {
   display: flex;
   flex-direction: column;
@@ -1637,4 +1645,172 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
     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

@@ -21,54 +21,51 @@ export interface ParticipantDetails {
 export interface Conversation {
   _id: string;
   createdAt: string;
-  lastMessage:{
+  lastMessage: {
     _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;
 }