@pubuduth-aplicy/chat-ui 2.1.75 → 2.1.77

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.75",
+  "version": "2.1.77",
   "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

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

package/src/components/Chat.tsx

@@ -15,16 +15,9 @@ export const Chat = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data);
-        console.log("Parsed WebSocket message:", parsed);
 
         if (parsed.event === "newMessage") {
           const message = parsed.data;
-          console.log(
-            "📨 Message received at:",
-            message.createdAt,
-            "from:",
-            message
-          );
           // Send delivery confirmation
           // Update UI immediately
           setMessages((prev) => [...prev, message]);

package/src/components/messages/Message.tsx

@@ -114,7 +114,6 @@ const Message = ({ message }: MessageProps) => {
   // const handleDownload = (url: string, name: string) => {
   //   saveAs(url, name);
   // };
-  console.log("check message status", message.status);
 
   const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
   const [downloadProgress, setDownloadProgress] = useState<number>(0);

package/src/components/messages/MessageContainer.tsx

@@ -8,56 +8,11 @@ import { useChatContext } from "../../providers/ChatProvider";
 import { getChatConfig } from "../../Chat.config";
 
 const MessageContainer = () => {
+  const { userId } = useChatContext();
   const { selectedConversation, setSelectedConversation, setOnlineUsers } =
     useChatUIStore();
   const { socket, isUserOnline } = useChatContext();
   const { role } = getChatConfig();
-  //   useEffect(() => {
-  //   if (!socket) return;
-
-  //   const handleMessage = (event) => {
-  //     try {
-  //       const parsed = JSON.parse(event.data);
-
-  //      if (parsed.event === 'newMessage') {
-  //   const message = parsed.data;
-  //   console.log('Received message:', message);
-
-  //   if (selectedConversation?._id !== message.chatId) return;
-
-  //   const messageId = message._id || message.messageId;
-  //   console.log('Message ID for unread:', messageId);
-
-  //   if (!messageId) {
-  //     console.warn('Message has no _id or messageId, skipping unread tracking');
-  //     return;
-  //   }
-
-  //   const updatedUnread = [
-  //     ...(selectedConversation?.unreadMessageIds || []),
-  //     messageId,
-  //   ];
-
-  //   console.log('Updated unreadMessageIds:', updatedUnread);
-
-  //   setSelectedConversation({
-  //     ...selectedConversation,
-  //     unreadMessageIds: updatedUnread,
-  //   });
-  // }
-
-  //       // Handle other events...
-
-  //     } catch (error) {
-  //       console.error("WebSocket message parse error:", error);
-  //     }
-  //   };
-
-  //   socket.addEventListener("message", handleMessage);
-  //   return () => socket.removeEventListener("message", handleMessage);
-  // }, [socket, setMessages, selectedConversation, setSelectedConversation]);
-
-  // Join chat room when conversation is selected
 
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
@@ -67,6 +22,7 @@ const MessageContainer = () => {
           event: "joinChat",
           data: {
             chatId: selectedConversation._id,
+            userId: userId
           },
         })
       );
@@ -79,7 +35,6 @@ const MessageContainer = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        console.log("Parsed WebSocket message in mc:", data);
 
         if (data.event === "getOnlineUsers") {
           setOnlineUsers(data.payload); // payload should be an array of user IDs
@@ -98,19 +53,19 @@ const MessageContainer = () => {
 
   // Listen for online users updates
 
-  const { userId } = useChatContext();
-
-  // const participantDetails = Array.isArray(selectedConversation?.participantDetails)
-  //   ? selectedConversation?.participantDetails
-  //   : [selectedConversation?.participantDetails].filter(Boolean);
+  
 
-  // const participant = participantDetails.find(
-  //   (p: any) => p._id !== userId
-  // );
+  const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation?.participantDetails
+    : [selectedConversation?.participantDetails].filter(Boolean);
 
-  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 || "");
 
@@ -120,13 +75,13 @@ const MessageContainer = () => {
   }, [setSelectedConversation]);
 
   return (
-    <div className="chatMessageContainer bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+    <div className="chatMessageContainer">
       {!selectedConversation ? (
         <EmptyInbox />
       ) : (
         <>
-          <div className="chatMessageContainerInner bg-[FFFFFF] dark:bg-gray-800">
-            <div className="chatMessageContainerInnerDiv text-gray-900 dark:text-gray-200">
+          <div className="chatMessageContainerInner">
+            <div className="chatMessageContainerInnerDiv">
               <button className="chatMessageContainerInnerDiv_button">
                 {/* <CaretLeft size={25} /> */}
               </button>

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,6 @@ const MessageInput = () => {
       });
     }
   }, [selectedConversation?._id, socket, sendMessage]);
-  console.log('selected', selectedConversation);
   
   useEffect(() => {
     // Clear all input state when conversation changes
@@ -94,6 +102,7 @@ const MessageInput = () => {
         data: {
           chatId: selectedConversation._id,
           userId,
+          reciverId: otherParticipant?._id,
         },
       });
     }
@@ -106,6 +115,7 @@ const MessageInput = () => {
           data: {
             chatId: selectedConversation._id,
             userId,
+            reciverId: otherParticipant?._id,
           },
         });
       }
@@ -125,12 +135,10 @@ const MessageInput = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        console.log("Received WebSocket message:", data);
         if (
           data.event === "typing" &&
           data.data.chatId === selectedConversation._id
         ) {
-          console.log("Setting typing user:", data.data.userId);
           setTypingUser(data.data.userId);
         } else if (
           data.event === "stopTyping" &&
@@ -227,13 +235,7 @@ 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
@@ -533,7 +535,7 @@ const MessageInput = () => {
   };
 
   return (
-    <div className="message-input-container bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-200">
+    <div className="message-input-container">
       {attachments.length > 0 && (
         <div className="attachments-preview-container">
           <button
@@ -576,12 +578,12 @@ const MessageInput = () => {
         </div>
       )}
 
-      <form className="chatMessageInputform bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-200" onSubmit={handleSubmit}>
+      <form className="chatMessageInputform" onSubmit={handleSubmit}>
         {inputError && (
           <p style={{ color: "red", fontSize: "12px" }}>{inputError}</p>
         )}
 
-        <div className="chatMessageInputdiv bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-200">
+        <div className="chatMessageInputdiv">
           <input
             type="file"
             ref={fileInputRef}
@@ -681,7 +683,7 @@ const MessageInput = () => {
           </div>
 
           <textarea
-            className="chatMessageInput bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-300"
+            className="chatMessageInput"
             placeholder="Send a message"
             value={message}
             onChange={handleChange}

package/src/components/messages/Messages.tsx

@@ -44,14 +44,13 @@ const Messages = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data);
-        console.log("Parsed WebSocket message1:", parsed);
         if (parsed.type === "newMessage" || parsed.event === "newMessage") {
           const newMessage = parsed.data;
           if (!newMessage) {
-            console.warn(
-              "Received newMessage event without a message payload",
-              parsed
-            );
+            // console.warn(
+            //   "Received newMessage event without a message payload",
+            //   parsed
+            // );
             return;
           }
 
@@ -74,7 +73,7 @@ const Messages = () => {
         if (parsed.event === "messageStatusUpdated") {
           const { messageId, status } = parsed.data || {};
           if (!messageId) {
-            console.error("Missing messageId in status update", parsed);
+            // console.error("Missing messageId in status update", parsed);
             return;
           }
 
@@ -88,7 +87,7 @@ const Messages = () => {
                 return msg;
 
               if (newIdx > currentIdx) {
-                console.log(`Updating status for ${messageId} to ${status}`);
+                // console.log(`Updating status for ${messageId} to ${status}`);
                 return { ...msg, status };
               }
 
@@ -98,7 +97,7 @@ const Messages = () => {
         }
 
         if (parsed.event === "messageEdited") {
-          console.log("Received messageEdited event:", parsed);
+          // console.log("Received messageEdited event:", parsed);
 
           const updatedMessage = parsed.data;
           if (!updatedMessage || !updatedMessage.messageId) return;
@@ -113,7 +112,7 @@ const Messages = () => {
         }
 
         if (parsed.event === "messageDeleted") {
-          console.log("Received messageDeleted event:", parsed);
+          // console.log("Received messageDeleted event:", parsed);
 
           const { messageId } = parsed.data || {};
           if (!messageId) return;

package/src/components/sidebar/Conversation.tsx

@@ -21,14 +21,14 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
 
   const handleSelectConversation = () => {
-    console.log(
-      "Selected Conversation Data:",
-      JSON.stringify(conversation, null, 2)
-    );
+    // console.log(
+    //   "Selected Conversation Data:",
+    //   JSON.stringify(conversation, null, 2)
+    // );
     setSelectedConversation(conversation);
     const unreadMessageIds = conversation.unreadMessageIds || [];
     if (unreadMessageIds.length > 0 && socket?.readyState === WebSocket.OPEN) {
-      console.log("unread messages", unreadMessageIds);
+      // console.log("unread messages", unreadMessageIds);
 
       const message = {
         event: "messageRead",
@@ -64,9 +64,9 @@ const Conversation = ({ conversation }: ConversationProps) => {
     };
   }, [socket, setOnlineUsers]);
 
-  useEffect(() => {
-    console.log("Current conversation state:", conversation);
-  }, [conversation]);
+  // useEffect(() => {
+  //   // console.log("Current conversation state:", conversation);
+  // }, [conversation]);
 
   const isOnline = isUserOnline(participant?._id || "");
   const isSelected = selectedConversation?._id === conversation._id;

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,8 +246,11 @@ const Conversations = () => {
       .filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
   );
 
+  // console.log("filteredGeneralChats",filteredGeneralChats);
+  // console.log("filteredGroupedServiceChats");
+
   return (
-    <div className="chatSidebarConversations" style={{height:'100%'}}>
+    <div className="chatSidebarConversations">
       {isEmpty ? (
         <div className="flex flex-col items-center justify-center p-8 text-center">
           <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
@@ -255,14 +260,7 @@ const Conversations = () => {
         </div>
       ) : (
         <>
-         <div 
-          className="overflow-y-auto"
-          style={{ 
-            maxHeight: 'calc(5 * 5rem)', // Adjust 3.5rem to match your chat item height
-            scrollbarWidth: 'thin'
-          }}
-        >
-           {filteredGeneralChats.length > 0 && (
+          {filteredGeneralChats.length > 0 && (
             <CollapsibleSection title="General Chats">
               <VirtualizedChatList conversations={filteredGeneralChats} />
             </CollapsibleSection>
@@ -285,9 +283,7 @@ const Conversations = () => {
                 )
               )}
             </CollapsibleSection>
-          )} 
-        </div>
-        
+          )}
         </>
       )}
     </div>

package/src/declarations.d.ts

@@ -21,6 +21,7 @@ declare module '@pubuduth-aplicy/chat-ui' {
   interface ChatConfig {
     apiUrl: string;
     role?: string;
+    webSocketUrl: string;
   }
   
   interface ChatProviderProps {

package/src/hooks/mutations/useDeleteMessage.ts

@@ -8,7 +8,7 @@ export const useDeleteMessageMutation = () => {
   return useMutation({
     mutationFn: deleteMessage,
     onSuccess: () => {
-      console.log("Message deleted successfully!", "success");
+      // console.log("Message deleted successfully!", "success");
       // Invalidate both messages and conversations queries
       queryClient.invalidateQueries({ queryKey: ['messages'] });
       queryClient.invalidateQueries({ queryKey: ['conversations'] });
@@ -16,11 +16,11 @@ export const useDeleteMessageMutation = () => {
     onError: (error: any) => {
       console.error("Failed to delete message:", error);
 
-      const errorMessage =
-        error?.response?.data?.errors[0]?.msg ||
-        "An error occurred while deleting the message.";
+      // const errorMessage =
+      //   error?.response?.data?.errors[0]?.msg ||
+      //   "An error occurred while deleting the message.";
 
-      console.log("useDeleteMessageMutation error:", errorMessage);
+      // console.log("useDeleteMessageMutation error:", errorMessage);
     },
   });
 };

package/src/hooks/mutations/useEditMessage.ts

@@ -8,15 +8,15 @@ export const useEditMessageMutation = () => {
     return useMutation({
         mutationFn: setEditMessage,
         onSuccess: () => {
-        console.log("Message edited successfully!", "success");
+        // console.log("Message edited successfully!", "success");
         queryClient.invalidateQueries({ queryKey: ['messages'] });
         },
         onError: (error: any) => {
         console.error("Failed to edit message:", error);
-        const errorMessage =
-            error?.response?.data?.errors[0]?.msg ||
-            "An error occurred while editing the message.";
-        console.log("useMessageMutation edit error:", errorMessage);
+        // const errorMessage =
+        //     error?.response?.data?.errors[0]?.msg ||
+        //     "An error occurred while editing the message.";
+        // console.log("useMessageMutation edit error:", errorMessage);
         },
     });
 

package/src/hooks/mutations/useSendMessage.ts

@@ -7,17 +7,17 @@ export const useMessageMutation = () => {
     return useMutation({
       mutationFn: sendMessage,
       onSuccess: () => {
-        console.log("Service submitted successfully!", "success");
+        // console.log("Service submitted successfully!", "success");
         queryClient.invalidateQueries({ queryKey: ['messages'] });
       },
       onError: (error: any) => {
         console.error("Failed to submit service data:", error);
   
-        const errorMessage =
-          error?.response?.data?.errors[0]?.msg ||
-          "An error occurred while submitting service data.";
+        // const errorMessage =
+        //   error?.response?.data?.errors[0]?.msg ||
+        //   "An error occurred while submitting service data.";
 
-        console.log("useSumbitServiceMutation :", errorMessage);
+        // console.log("useSumbitServiceMutation :", errorMessage);
       },
     });
   };

package/src/providers/ChatProvider.tsx

@@ -41,19 +41,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const reconnectAttempts = useRef(0);
   const maxReconnectAttempts = 5;
   const reconnectInterval = 5000; // 5 seconds
-  const { apiUrl } = getChatConfig();
+  const { webSocketUrl } = getChatConfig();
 
   const connectWebSocket = useCallback(() => {
-    console.log("🔌 Creating new WebSocket connection...");
+    // console.log("🔌 Creating new WebSocket connection...");
 
     // Convert HTTP URL to WebSocket URL
-    const wsUrl = apiUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
+    const wsUrl = webSocketUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
     const socketInstance = new WebSocket(
       `${wsUrl}?userId=${encodeURIComponent(userId)}`
     );
 
     socketInstance.onopen = () => {
-      console.log("✅ WebSocket connected");
+      // console.log("✅ WebSocket connected");
       setIsConnected(true);
       reconnectAttempts.current = 0;
 
@@ -71,12 +71,12 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
         const data = JSON.parse(event.data);
 
         if (data.event === "getOnlineUsers") {
-          console.log("Online users update:", data.data);
+          // 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);
       }
@@ -87,23 +87,23 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     };
 
     socketInstance.onclose = (event) => {
-      console.log("🔌 WebSocket connection closed", event);
-      console.log("❌ WebSocket disconnected:", event.code, event.reason);
+      // 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);
       }
     };
 
     socketRef.current = socketInstance;
     setSocket(socketInstance);
-  }, [apiUrl, userId]);
+  }, [webSocketUrl, userId]);
 
   const sendMessage = useCallback((data: any) => {
     if (socketRef.current?.readyState === WebSocket.OPEN) {
@@ -117,7 +117,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     connectWebSocket();
 
     return () => {
-      console.log("❌ Closing WebSocket connection...");
+      // console.log("❌ Closing WebSocket connection...");
       if (socketRef.current) {
         socketRef.current.close(1000, "Component unmounted");
         socketRef.current = null;

package/src/service/messageService.ts

@@ -34,6 +34,7 @@ export const sendMessage = async (params: {
       serviceTitle,
       type,
       serviceId,
+      messageType: "user"
     }
   );
   return response.data;
@@ -46,7 +47,7 @@ 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); 
+    // console.log(response); 
     return response.data; 
   } catch (error) {
     console.error("Error fetching messages:", error);

package/src/service/sidebarApi.ts

@@ -16,11 +16,11 @@ export const getAllConversationData = async (userid: string) => {
 
     const res = await apiClient.get<ApiResponse>(endpoint);
     if (res.data) {
-      console.log("API Response: ", res.data);
+      // console.log("API Response: ", res.data);
       
     }
     const  conversationsWithParticipantDetails  = res.data.serviceInfo;
-    console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
+    // console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
     
     // If needed, you can map the conversations in the specific structure
 //     const formattedConversations = conversationsWithParticipantDetails?.map((conversation) => ({