@pubuduth-aplicy/chat-ui 2.1.43 → 2.1.44

package/package.json

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

@@ -0,0 +1,18 @@
+// config.ts
+export interface ChatConfig {
+    apiUrl: string;
+  }
+  
+  let chatConfig: ChatConfig;
+  
+  export function initChatConfig(config: ChatConfig) {
+    chatConfig = config;
+  }
+  
+  export function getChatConfig() {
+    if (!chatConfig) {
+      throw new Error("Chat config not initialized. Call initChatConfig first.");
+    }
+    return chatConfig;
+  }
+  

package/src/components/sidebar/Conversation.tsx

@@ -7,40 +7,42 @@ import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
 
 const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
-  const { setSelectedConversation, setOnlineUsers,onlineUsers } = useChatUIStore();
+  const { setSelectedConversation, setOnlineUsers, onlineUsers } =
+    useChatUIStore();
   const { socket } = useChatContext();
-console.log(conversation);
+  console.log(conversation);
 
-const handleSelectConversation = async () => {
-  setSelectedConversation(conversation);
+  const handleSelectConversation = async () => {
+    setSelectedConversation(conversation);
 
-  const unreadMessages = conversation.unreadMessageIds || []; // Get all unread message IDs
+    const unreadMessages = conversation.unreadMessageIds || []; // Get all unread message IDs
 
-  if (unreadMessages.length > 0) {
-    console.log("Emitting messageRead for messages:", unreadMessages);
+    if (unreadMessages.length > 0) {
+      console.log("Emitting messageRead for messages:", unreadMessages);
 
-    socket.emit("messageRead", {
-      messageIds: unreadMessages, // Send all unread message IDs
-      receiverId: conversation.participantDetails._id,
-    });
-  }
-};
+      socket.emit("messageRead", {
+        messageIds: unreadMessages, // Send all unread message IDs
+        receiverId: conversation.participantDetails._id,
+      });
+    }
+  };
 
-    useEffect(() => {
-        if (!socket) return;
+  useEffect(() => {
+    if (!socket) return;
 
-        const handleOnlineUsers = (users: string[]) => {
-            setOnlineUsers(users);
-        };
+    const handleOnlineUsers = (users: string[]) => {
+      setOnlineUsers(users);
+    };
 
-        socket.on("getOnlineUsers", handleOnlineUsers);
+    socket.on("getOnlineUsers", handleOnlineUsers);
 
-        return () => {
-            socket.off("getOnlineUsers", handleOnlineUsers);
-        };
-    }, [socket, setOnlineUsers]);
+    return () => {
+      socket.off("getOnlineUsers", handleOnlineUsers);
+    };
+  }, [socket, setOnlineUsers]);
 
-    const isUserOnline = conversation?.participantDetails?._id &&
+  const isUserOnline =
+    conversation?.participantDetails?._id &&
     onlineUsers?.includes(conversation.participantDetails._id);
   return (
     <>
@@ -51,23 +53,29 @@ const handleSelectConversation = async () => {
       >
         <img
           className="chatSidebarConversationImg"
-          src={conversation.participantDetails?.profilePic|| conversation.participantDetails?.idpic}
+          src={
+            conversation.participantDetails?.profilePic ||
+            conversation.participantDetails?.idpic
+          }
         />
-         <p className="text-sm text-[#12bbb5]">
-                                    {isUserOnline ? "Online" : "Offline"}
-                                    </p>
+        <p className="text-sm text-[#12bbb5]">
+          {isUserOnline ? "Online" : "Offline"}
+        </p>
         <div className="chatSidebarConversationContainer">
           {/* <div className="chatSidebarConversationInnerDiv"> */}
-            <p className="text-sm text-gray-500">
-              {conversation.participantDetails?.firstname}
-            </p>
-            <p className="chatSidebarConversationOuterDiv">
-           {conversation.lastMessage.message}
-            </p>
+          <p className="text-sm text-gray-500">
+            {conversation.participantDetails?.firstname}
+          </p>
+          <p className="chatSidebarConversationOuterDiv">
+            {conversation.lastMessage.message}
+          </p>
           {/* </div> */}
         </div>
         <span className="text-xs text-gray-500">
-        {new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+          {new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
         </span>
       </div>
 

package/src/lib/api/apiClient.ts

@@ -1,7 +1,9 @@
 import axios from "axios";
+import { getChatConfig } from "../../Chat.config";
 
+const { apiUrl } = getChatConfig();
 export const apiClient = axios.create({
-    baseURL: import.meta.env.VITE_APP_BACKEND_PORT,
+    baseURL: apiUrl,
     timeout: 5000,
     withCredentials:true,
     headers: {

package/src/providers/ChatProvider.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
 } from "react";
 import { Socket, io } from "socket.io-client";
+import { getChatConfig } from "../Chat.config";
 // import { apiClient } from '../lib/api/apiClient';
 // import { S3Client } from '../lib/storage/s3Client';
 // import { CryptoUtils } from '../lib/encryption/cryptoUtils';
@@ -20,7 +21,7 @@ interface ChatProviderProps {
   //     accessKeyId: string;
   //     secretAccessKey: string;
   //   };
-  userId: string; // User ID for identification
+  userId: string; 
   children: ReactNode;
 }
 
@@ -41,13 +42,14 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const socketRef = useRef<Socket | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
   const [onlineUsers, setOnlineUsers] = useState([]);
-  const apiUrl = import.meta.env.VITE_APP_BACKEND_PORT;
+  const { apiUrl } = getChatConfig();
+  // const apiUrl = import.meta.env.VITE_APP_BACKEND_PORT;
   console.log("API URL:", apiUrl);
 
   useEffect(() => {
     if (!socketRef.current) {
       console.log("🔌 Creating new socket connection...");
-      const socketInstance = io('http://localhost:3001', {
+      const socketInstance = io(apiUrl, {
         query: {
           userId: userId,
         },