@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.75

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); 
+    return response.data; 
+  } catch (error) {
+    console.error("Error fetching messages:", error);
+    return []; 
+  }
 };
 
 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 } 
+      }
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error deleting message:", error);
+    throw error;
+  }
+};

package/src/service/sidebarApi.ts

@@ -9,19 +9,16 @@ export const getAllConversationData = async (userid: string) => {
   try {
     const {role} = getChatConfig();
     const apiClient = getApiClient();
-    //create common variable and assign the value of role
-    // check if the user is an admin
-    //create url for admon and user
+   
     const endpoint = role === 'admin' 
         ? `${Path.getConversationListByAdmin}` 
         : `${Path.getconversation}/${userid}`;
-    //create url for admon and user
+
     const res = await apiClient.get<ApiResponse>(endpoint);
     if (res.data) {
       console.log("API Response: ", res.data);
       
     }
-    // Access conversations with participant details from the API response
     const  conversationsWithParticipantDetails  = res.data.serviceInfo;
     console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
     

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,264 @@
     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; */
+}
+
+.confirm-button {
+  background: linear-gradient(135deg, #2AA8A6, #1E9C9A);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.confirm-button:hover {
+  background: linear-gradient(135deg, #1E9C9A, #168A88);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.confirm-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.confirm-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: 0.5s;
+}
+
+.confirm-button:hover::before {
+  left: 100%;
+}
+
+.confirm-button svg {
+  transition: transform 0.3s ease;
+}
+
+.confirm-button:hover svg {
+  transform: scale(1.1);
+}
+
+
+.message-option-btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.message-option-btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Tooltip styles */
+.message-option-btn {
+  position: relative;
+  overflow: hidden;
+}
+
+.message-option-btn:hover::before {
+  content: attr(title);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #333;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+  margin-bottom: 5px;
+}
+
+.message-option-btn.disabled:hover::before {
+  background: #666;
 }

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;
 }
 

package/src/ChatWindow.tsx

@@ -1,15 +0,0 @@
-// import { ChatWindowProps } from "./types/type";
-
-
-// export const ChatWindow: React.FC<ChatWindowProps> = ({ userId}) => {
-//     // const { messages, sendMessage, sendFile } = useChat(userId);
-//     // const [file, setFile] = useState<File | null>(null);
-
-//     return (
-//         <div className="w-full max-w-lg border p-4 rounded-lg shadow-lg bg-white">
-//             <MessageList messages={messages} />
-//             <FileUploader file={file} setFile={setFile} onUpload={sendFile} />
-//             <MessageInput onSend={sendMessage} />
-//         </div>
-//     );
-// };