@pubuduth-aplicy/chat-ui 2.1.74 → 2.1.76

package/README.md

@@ -1,50 +1,153 @@
-# React + TypeScript + Vite
+# @pubuduth-aplicy/chat-ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A flexible and easy-to-use React chat UI component.
 
-Currently, two official plugins are available:
+## Description
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+`@pubuduth-aplicy/chat-ui` provides a complete chat interface that can be easily integrated into any React application. It includes features like real-time messaging, user presence, and a customizable interface. The component is built with TypeScript, React, and Zustand for state management.
 
-## Expanding the ESLint configuration
+## Installation
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+To install the package, use npm or yarn:
 
-- Configure the top-level `parserOptions` property like this:
+```bash
+npm install @pubuduth-aplicy/chat-ui
+```
+
+or
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```bash
+yarn add @pubuduth-aplicy/chat-ui
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+## Usage
+
+To use the chat component, you need to initialize the configuration, wrap your application with the `ChatProvider`, and then render the `Chat` component.
+
+### 1. Initialize the Configuration
+
+First, you need to initialize the chat configuration at the entry point of your application (e.g., `index.tsx` or `main.tsx`).
+
+```tsx
+// src/main.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { initChatConfig } from '@pubuduth-aplicy/chat-ui';
+
+// Initialize the chat configuration
+initChatConfig({
+  apiUrl: 'YOUR_API_URL', // Your backend API URL
+  role: 'user', // Optional: 'user' or 'admin'
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+```
+
+### 2. Wrap with ChatProvider
+
+Next, wrap your component tree with `ChatProvider`. This provider manages the chat state and WebSocket connection.
+
+```tsx
+// src/App.tsx
+import { ChatProvider, Chat } from '@pubuduth-aplicy/chat-ui';
+
+function App() {
+  const userId = 'CURRENT_USER_ID'; // The ID of the currently logged-in user
+
+  return (
+    <ChatProvider userId={userId}>
+      <div className="App">
+        {/* Your other components */}
+        <Chat />
+      </div>
+    </ChatProvider>
+  );
+}
+
+export default App;
 ```
+
+### 3. Render the Chat Component
+
+Finally, render the `<Chat />` component wherever you want the chat interface to appear.
+
+## Configuration
+
+### `initChatConfig(config)`
+
+This function initializes the chat component's configuration. It must be called once before any chat components are rendered.
+
+**Parameters:**
+
+*   `config` (object):
+    *   `apiUrl` (string, required): The base URL of your chat backend. The WebSocket connection will be derived from this URL.
+    *   `role` (string, optional): The role of the user, e.g., 'user' or 'admin'.
+
+## API Reference
+
+### `<ChatProvider />`
+
+This component provides the chat context to its children.
+
+**Props:**
+
+*   `userId` (string, required): The unique identifier for the current user.
+*   `children` (ReactNode, required): The child components. The `<Chat />` component must be a descendant of `ChatProvider`.
+
+### `<Chat />`
+
+This component renders the main chat interface. It takes no props.
+
+## Development
+
+To set up the project for local development:
+
+1.  **Clone the repository:**
+    ```bash
+    git clone https://github.com/pubuduth-aplicy/chat-ui.git
+    cd chat-ui
+    ```
+
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+
+3.  **Run the development server:**
+    This project uses Vite. To run the development server, you can add a `dev` script to your `package.json`:
+    ```json
+    "scripts": {
+      "dev": "vite",
+      "build": "tsc",
+      "prepare": "npm run build"
+    }
+    ```
+    Then run:
+    ```bash
+    npm run dev
+    ```
+
+## Building
+
+To build the component for production, run the following command. This will transpile the TypeScript code.
+
+```bash
+npm run build
+```
+
+For a full production build, you should use `vite build`. You can add this to your `package.json`:
+
+```json
+"scripts": {
+  "build:vite": "vite build"
+}
+```
+
+## License
+
+This project is licensed under the [ISC License](LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.74",
+  "version": "2.1.76",
   "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

@@ -2,6 +2,7 @@
 export interface ChatConfig {
     apiUrl: string;
     role?: string;
+    cdnUrl?: string;
   }
   
   let chatConfig: ChatConfig;

package/src/components/Chat.tsx

@@ -51,7 +51,7 @@ export const Chat = () => {
   return (
     <div className="container mx-auto mb-5">
       <div className="grid-container">
-        <div className={`sidebarContainer`}>
+        <div className={`sidebarContainer dark:bg-gray-800`}>
           <Sidebar />
         </div>
         <div className="messageContainer">

package/src/components/common/CollapsibleSection.tsx

@@ -24,7 +24,7 @@ const CollapsibleSection = ({
         className="flex justify-between items-center p-2 cursor-pointer hover:bg-gray-50"
         onClick={toggleOpen}
       >
-        <p className="text-xs uppercase">{title}</p>
+        <p className="text-xs uppercase text-gray-900 dark:text-gray-200">{title}</p>
         <ChevronDown
           size={20}
           className={`transform transition-transform duration-200 ${
@@ -32,7 +32,7 @@ const CollapsibleSection = ({
           }`}
         />
       </div>
-      {isOpen && <div className="p-2">{children}</div>}
+      {isOpen && <div className="p-2 text-gray-900 dark:text-gray-200">{children}</div>}
     </div>
   );
 };

package/src/components/messages/Message.tsx

@@ -34,6 +34,7 @@ interface MessageProps {
     type?: "user" | "system" | "system-completion";
     meta?: {
       bookingDetails?: {
+        status: string; // e.g., "confirmed", "pending", "cancelled"
         serviceId: string;
         date: string;
         time: string;
@@ -47,18 +48,30 @@ interface MessageProps {
 
 const Message = ({ message }: MessageProps) => {
   const { userId } = useChatContext();
-  const { apiUrl } = getChatConfig();
+  const { apiUrl,cdnUrl } = getChatConfig();
 
   if (message.type === "system") {
     return (
       <div className="system-message booking-details">
-        <h4>Booking Confirmed</h4>
+        <h4>{message.meta?.bookingDetails?.status || 'Unknown'}</h4>
         <div className="details">
           <p>Service: {message.meta?.bookingDetails?.serviceId}</p>
           <p>Date: {message.meta?.bookingDetails?.date}</p>
           <p>Time: {message.meta?.bookingDetails?.time}</p>
           <p>Price: ${message.meta?.bookingDetails?.price}</p>
         </div>
+        <button
+          className="confirm-button"
+          onClick={() => {
+            // Add your confirmation logic here
+            console.log('Booking confirmed!');
+          }}
+        >
+          Confirm Booking
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
+          </svg>
+        </button>
       </div>
     );
   }
@@ -194,27 +207,6 @@ const Message = ({ message }: MessageProps) => {
     }
   };
 
-  // const handleDownload = async (url: string, name: string, index: number) => {
-  //   setDownloadingIndex(index);
-  //   try {
-  //     var xhr = new XMLHttpRequest()
-  //     xhr.open('HEAD', url, false)
-  //     xhr.send()
-  //     const blob = await response.blob();
-  //     const link = document.createElement("a");
-  //     link.href = URL.createObjectURL(blob);
-  //     link.download = name;
-  //     link.click();
-  //     URL.revokeObjectURL(link.href);
-  //   } catch (error) {
-  //     console.error("Download failed:", error);
-  //   } finally {
-  //     setDownloadingIndex(null);
-  //   }
-  // };
-
-  // const renderMedia = () => {
-  //   if (!message.media || message.media.length === 0) return null;
 
   const handleDownload = async (url: string, name: string, index: number) => {
     setDownloadingIndex(index);
@@ -224,7 +216,6 @@ const Message = ({ message }: MessageProps) => {
     setDownloadController(controller);
 
     try {
-      // First try to download directly
       try {
         const response = await fetch(
           `${apiUrl}${Path.apiProxy}?url=${encodeURIComponent(
@@ -320,7 +311,7 @@ const Message = ({ message }: MessageProps) => {
                   <div className="circular-progress-container">
                     <div className="media-preview-background">
                       <img
-                        src={media.url}
+                        src={`${cdnUrl}${`${cdnUrl}${media.url}`}`}
                         alt={media.name}
                         className="blurred-preview"
                       />
@@ -365,16 +356,16 @@ const Message = ({ message }: MessageProps) => {
                 <>
                   {media.type === "image" ? (
                     <img
-                      src={media.url}
+                      src={`${cdnUrl}${media.url}`}
                       alt={media.name}
                       className="media-content"
-                      onClick={() => window.open(media.url, "_blank")}
+                      onClick={() => window.open(`${cdnUrl}${media.url}`, "_blank")}
                     />
                   ) : media.type === "video" ? (
                     <video controls className="media-content">
                       <source
-                        src={media.url}
-                        type={`video/${media.url.split(".").pop()}`}
+                        src={`${cdnUrl}${media.url}`}
+                        type={`video/${`${cdnUrl}${media.url}`.split(".").pop()}`}
                       />
                     </video>
                   ) : (
@@ -397,7 +388,7 @@ const Message = ({ message }: MessageProps) => {
                       if (downloadingIndex === index) {
                         cancelDownload();
                       } else {
-                        handleDownload(media.url, media.name, index);
+                        handleDownload(`${cdnUrl}${media.url}`, media.name, index);
                       }
                     }}
                     title={downloadingIndex === index ? "Cancel" : "Download"}
@@ -490,19 +481,28 @@ const Message = ({ message }: MessageProps) => {
     }
   };
 
+  const isMessageOlderThanOneDay = (createdAt: string | Date) => {
+    const messageDate = new Date(createdAt);
+    const now = new Date();
+    const oneDayInMs = 24 * 60 * 60 * 1000;
+    return now.getTime() - messageDate.getTime() > oneDayInMs;
+  };
+
+    const hasMedia = message.media && message.media.length > 0;
+
   return (
     <div className="chat-container">
       <div className={`message-row ${alignItems}`}>
         <div
           className="bubble-container"
-          onMouseEnter={() => fromMe && setShowOptions(true)}
+          onMouseEnter={() => fromMe && !hasMedia && setShowOptions(true)}
           onMouseLeave={() =>
             fromMe && !showDeleteOption && setShowOptions(false)
           }
         >
           {message.status === "deleted" ? (
             <div className="chat-bubble compact-bubble deleted-message">
-              <div className="message-text">This message was deleted</div>
+              <div className="message-text text-gray-900 dark:text-gray-100">This message was deleted</div>
             </div>
           ) : (
             (message.message ||
@@ -533,7 +533,7 @@ const Message = ({ message }: MessageProps) => {
                   </div>
                 ) : (
                   message.message && (
-                    <div className="message-text">{message.message}</div>
+                    <div className="message-text text-gray-900 dark:text-gray-100">{message.message}</div>
                   )
                 )}
 
@@ -541,7 +541,9 @@ const Message = ({ message }: MessageProps) => {
                 {fromMe &&
                   showOptions &&
                   !isEditingMode &&
-                  !message.isDeleted && (
+                  !message.isDeleted &&
+                  !hasMedia &&
+                  !isMessageOlderThanOneDay(message.createdAt) && (
                     <div className="message-options">
                       <button
                         className="message-option-btn edit-btn"

package/src/components/messages/MessageContainer.tsx

@@ -8,6 +8,7 @@ import { useChatContext } from "../../providers/ChatProvider";
 import { getChatConfig } from "../../Chat.config";
 
 const MessageContainer = () => {
+  const { userId } = useChatContext();
   const { selectedConversation, setSelectedConversation, setOnlineUsers } =
     useChatUIStore();
   const { socket, isUserOnline } = useChatContext();
@@ -67,6 +68,7 @@ const MessageContainer = () => {
           event: "joinChat",
           data: {
             chatId: selectedConversation._id,
+            userId: userId
           },
         })
       );
@@ -98,19 +100,19 @@ const MessageContainer = () => {
 
   // Listen for online users updates
 
-  const { userId } = useChatContext();
+  
 
-  // const participantDetails = Array.isArray(selectedConversation?.participantDetails)
-  //   ? selectedConversation?.participantDetails
-  //   : [selectedConversation?.participantDetails].filter(Boolean);
+  const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation?.participantDetails
+    : [selectedConversation?.participantDetails].filter(Boolean);
 
-  // const participant = participantDetails.find(
-  //   (p: any) => p._id !== userId
-  // );
-
-  const participant = selectedConversation?.participantDetails?.find(
+  const participant = participantDetails.find(
     (p: any) => p._id !== userId
   );
+
+  // const participant = selectedConversation?.participantDetails?.find(
+  //   (p: any) => p._id !== userId
+  // );
   
   const isOnline = isUserOnline(participant?._id || "");
 
@@ -138,7 +140,7 @@ const MessageContainer = () => {
                 <img
                   className="chatMessageContainerInnerImg"
                   alt="Profile"
-                  src={participant?.profilePic}
+                  src={participant?.profilePicture}
                 />
               )}
               <div className="chatMessageContainerOutter">
@@ -155,7 +157,7 @@ const MessageContainer = () => {
                   ) : (
                     <>
                       <p className="chatMessageContainerOutterDiv_name">
-                        {participant?.firstname || ""}
+                        {participant?.name || ""}
                       </p>
                       <p className="text-sm">
                         {isOnline ? "Online" : "Offline"}

package/src/components/messages/MessageInput.tsx

@@ -57,6 +57,15 @@ const MessageInput = () => {
   const generateTempId = () =>
     `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   // Join chat room when conversation is selected
+
+  const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation?.participantDetails
+    : [selectedConversation?.participantDetails].filter(Boolean);
+
+  const otherParticipant = participantDetails.find(
+    (p: any) => p._id !== userId
+  );
+
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
       sendMessage({
@@ -67,7 +76,8 @@ const MessageInput = () => {
       });
     }
   }, [selectedConversation?._id, socket, sendMessage]);
-
+  console.log('selected', selectedConversation);
+  
   useEffect(() => {
     // Clear all input state when conversation changes
     setMessage("");
@@ -93,6 +103,7 @@ const MessageInput = () => {
         data: {
           chatId: selectedConversation._id,
           userId,
+          reciverId: otherParticipant?._id,
         },
       });
     }
@@ -105,6 +116,7 @@ const MessageInput = () => {
           data: {
             chatId: selectedConversation._id,
             userId,
+            reciverId: otherParticipant?._id,
           },
         });
       }
@@ -192,6 +204,7 @@ const MessageInput = () => {
     const response = await apiClient.post(`${Path.preSignUrl}`, {
       fileName: file.name,
       fileType: file.type,
+      conversationId: selectedConversation?._id
     });
 
     const { signedUrl, fileUrl } = await response.data;
@@ -225,18 +238,12 @@ const MessageInput = () => {
     });
   };
 
-  // const participantDetails = Array.isArray(selectedConversation?.participantDetails)
-  //   ? selectedConversation?.participantDetails
-  //   : [selectedConversation?.participantDetails].filter(Boolean);
+  
 
-  // const otherParticipant = participantDetails.find(
-  //   (p: any) => p._id !== userId
+  //   const otherParticipant = selectedConversation?.participantDetails?.find(
+  //   (p:any) => p._id !== userId
   // );
 
-    const otherParticipant = selectedConversation?.participantDetails?.find(
-    (p:any) => p._id !== userId
-  );
-
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();

package/src/components/sidebar/Conversation.tsx

@@ -16,32 +16,10 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
   const { userId } = useChatContext();
 
-  // This should return the other participant
   const participant = conversation.participantDetails?.find(
     (p:any) => p._id !== userId
   );
 
-
-  // const handleSelectConversation = () => {
-  //   console.log("Selected Conversation Data:", JSON.stringify(conversation, null, 2));
-  //   setSelectedConversation(conversation);
-
-  //   const unreadMessages = conversation.unreadMessageIds || [];
-  //   if (unreadMessages.length > 0 && socket?.readyState === WebSocket.OPEN) {
-  //     console.log('unread meassge',unreadMessages);
-
-  //     const message = {
-  //       event: "messageRead",
-  //       data: {
-  //         messageIds: unreadMessages,
-  //         senderId: participant?._id,
-  //         chatId: conversation._id,
-  //       },
-  //     };
-  //     socket.send(JSON.stringify(message));
-  //   }
-  // };
-
   const handleSelectConversation = () => {
     console.log(
       "Selected Conversation Data:",
@@ -62,7 +40,6 @@ const Conversation = ({ conversation }: ConversationProps) => {
         },
       };
       socket.send(JSON.stringify(message));
-      //  updateConversationReadStatus(conversation._id, unreadMessageIds);
     }
   };
 
@@ -87,7 +64,6 @@ const Conversation = ({ conversation }: ConversationProps) => {
     };
   }, [socket, setOnlineUsers]);
 
-  // Temporary debug in your component
   useEffect(() => {
     console.log("Current conversation state:", conversation);
   }, [conversation]);
@@ -98,7 +74,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
   const conversationName =
     conversation.type === "service" && conversation.bookingId
       ? `Booking #${conversation.bookingId}`
-      : participant?.firstname || "Conversation";
+      : participant?.name || "Conversation";
 
   const lastMessageTimestamp = new Date(
     conversation.lastMessage?.updatedAt || conversation.lastMessage?.createdAt
@@ -123,7 +99,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <>
             <img
               className="w-10 h-10 rounded-full"
-              src={participant?.profilePic}
+              src={participant?.profilePicture}
               alt="User Avatar"
             />
             <span
@@ -150,7 +126,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </div>
           {/* <span className="text-xs text-gray-500">{lastMessageTimestamp}</span> */}
         </div>
-        <p className="text-xs text-gray-600 truncate">
+        <p className="text-xs text-gray-600 truncate dark:text-gray-500">
           {conversation.lastMessage?.status === "deleted"
             ? "This message was deleted"
             : conversation.lastMessage?.media?.length > 0

package/src/components/sidebar/Conversations.tsx

@@ -35,6 +35,8 @@ const Conversations = () => {
       const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
 
       groups.forEach((group) => {
+        console.log("group", group.personalConversation);
+
         if (group.personalConversation) {
           allGeneralChats.push(group.personalConversation);
         }
@@ -225,7 +227,7 @@ const Conversations = () => {
     convo.participantDetails?.some((p:any) =>
       typeof p === "string"
         ? p.toLowerCase().includes(lowerSearch)
-        : p.firstname?.toLowerCase().includes(lowerSearch)
+        : p.name?.toLowerCase().includes(lowerSearch)
     )
   );
 
@@ -244,6 +246,9 @@ const Conversations = () => {
       .filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
   );
 
+  console.log("filteredGeneralChats",filteredGeneralChats);
+  console.log("filteredGroupedServiceChats");
+
   return (
     <div className="chatSidebarConversations">
       {isEmpty ? (

package/src/components/sidebar/SearchInput.tsx

@@ -18,8 +18,8 @@ const SearchInput = () => {
   };
   return (
     <>
-      <div className="chatSidebarSearchbar">
-        <div className="chatSidebarSearchbarContainer">
+      <div className="chatSidebarSearchbar bg-{FFFFFF} dark:bg-gray-800 text-gray-900 dark:text-gray-300">
+        <div className="chatSidebarSearchbarContainer  bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-300">
           <img src={searchicon} className="chatSidebarSearchbarImg" />
           <input
             className="chatSidebarInput"

package/src/hooks/useMessageStatus.ts

@@ -6,7 +6,6 @@ export const useMessageStatus = () => {
     const { socket,userId } = useChatContext();
     const { messages, setMessages, selectedConversation } = useChatUIStore();
 
-    // Handle status updates from server
     useEffect(() => {
         if (!socket) return;
 
@@ -19,7 +18,6 @@ export const useMessageStatus = () => {
                     
                     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);
@@ -40,7 +38,6 @@ export const useMessageStatus = () => {
         return () => socket.removeEventListener('message', handleStatusUpdate);
     }, [socket, setMessages]);
 
-    // Send delivery confirmations for visible messages
     useEffect(() => {
         if (!socket || !selectedConversation) return;
 
@@ -67,14 +64,12 @@ export const useMessageStatus = () => {
             { 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;
 

package/src/providers/ChatProvider.tsx

@@ -9,6 +9,7 @@ import React, {
   useCallback,
 } from "react";
 import { getChatConfig } from "../Chat.config";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 interface ChatProviderProps {
   userId: string;
@@ -26,6 +27,7 @@ interface ChatContextType {
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
+const queryClient = new QueryClient();
 
 export const ChatProvider: React.FC<ChatProviderProps> = ({
   userId,
@@ -131,18 +133,20 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   );
 
   return (
-    <ChatContext.Provider
-      value={{
-        socket,
-        userId,
-        onlineUsers,
-        sendMessage,
-        isConnected,
-        isUserOnline,
-      }}
-    >
-      {children}
-    </ChatContext.Provider>
+    <QueryClientProvider client={queryClient}>
+      <ChatContext.Provider
+        value={{
+          socket,
+          userId,
+          onlineUsers,
+          sendMessage,
+          isConnected,
+          isUserOnline,
+        }}
+      >
+        {children}
+      </ChatContext.Provider>
+    </QueryClientProvider>
   );
 };
 

package/src/service/messageService.ts

@@ -34,6 +34,7 @@ export const sendMessage = async (params: {
       serviceTitle,
       type,
       serviceId,
+      messageType: "user"
     }
   );
   return response.data;
@@ -46,11 +47,11 @@ export const fetchMessages = async (chatId: string | undefined, userid: string,
     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
+    console.log(response); 
+    return response.data; 
   } catch (error) {
     console.error("Error fetching messages:", error);
-    return []; // Return a default empty array on error
+    return []; 
   }
 };
 
@@ -89,7 +90,7 @@ export const deleteMessage = async ({
     const response = await apiClient.delete(
       `${Path.deleteMessage}/${messageId}`,
       {
-        data: { userId } // Sending userId in the request body
+        data: { userId } 
       }
     );
     return response.data;

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/style/style.css

@@ -1813,4 +1813,96 @@
   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/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>
-//     );
-// };