@pubuduth-aplicy/chat-ui 2.1.75 → 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.75",
+  "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/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 || "");
 
@@ -120,13 +122,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({
@@ -94,6 +103,7 @@ const MessageInput = () => {
         data: {
           chatId: selectedConversation._id,
           userId,
+          reciverId: otherParticipant?._id,
         },
       });
     }
@@ -106,6 +116,7 @@ const MessageInput = () => {
           data: {
             chatId: selectedConversation._id,
             userId,
+            reciverId: otherParticipant?._id,
           },
         });
       }
@@ -227,13 +238,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 +538,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 +581,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 +686,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/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/service/messageService.ts

@@ -34,6 +34,7 @@ export const sendMessage = async (params: {
       serviceTitle,
       type,
       serviceId,
+      messageType: "user"
     }
   );
   return response.data;