@pubuduth-aplicy/chat-ui 2.2.15 → 2.2.17

package/package.json

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

@@ -1,9 +1,12 @@
+import { AxiosInstance } from "axios";
+
 // config.ts
 export interface ChatConfig {
     apiUrl: string;
     role: string;
     cdnUrl?: string;
     webSocketUrl: string;
+    apiClient:AxiosInstance
   }
   
   let chatConfig: ChatConfig;

package/src/components/messages/Message.tsx

@@ -40,6 +40,7 @@ interface MessageProps {
         bookingId: string;
         status: string; // e.g., "confirmed", "pending", "cancelled"
         serviceId: string;
+        serviceName: string;
         date: string;
         time: string;
         price: number;
@@ -91,7 +92,7 @@ const Message = ({ message }: MessageProps) => {
       <div className="system-message booking-details">
         <h4>{status}</h4>
         <div className="details">
-          <p>Service: {booking?.serviceId}</p>
+          <p>Service: {booking?.serviceName}</p>
           <p>Date: {booking?.date.split("T")[0]}</p>
           <p>Time: {booking?.time}</p>
         </div>
@@ -115,7 +116,7 @@ const Message = ({ message }: MessageProps) => {
           </button>
         )}
 
-        {status === "Completed" && (
+        {status === "Completed" && role !== "provider" && (
           <button className="confirm-button" onClick={handleReview}>
             Leave a Review ✍️
           </button>
@@ -159,6 +160,26 @@ const Message = ({ message }: MessageProps) => {
     setLocalStatus(message.status);
   }, [message.status]);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        optionsRef.current &&
+        !optionsRef.current.contains(e.target as Node)
+      ) {
+        setShowOptions(false);
+        setShowDeleteOption(false);
+      }
+    };
+
+    if (showOptions || showDeleteOption) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showOptions, showDeleteOption]);
+
   // const handleDownload = (url: string, name: string) => {
   //   saveAs(url, name);
   // };
@@ -597,6 +618,7 @@ const Message = ({ message }: MessageProps) => {
       <div className={`message-row ${alignItems}`}>
         <div
           className="bubble-container"
+          ref={optionsRef}
           onMouseEnter={() => fromMe && !hasMedia && setShowOptions(true)}
           onMouseLeave={() =>
             fromMe && !showDeleteOption && setShowOptions(false)
@@ -658,7 +680,7 @@ const Message = ({ message }: MessageProps) => {
                       >
                         <Pencil size={16} />
                       </button>
-                      <div className="more-options-container" ref={optionsRef}>
+                      <div className="more-options-container">
                         <button
                           className="message-option-btn more-btn"
                           onClick={() => setShowDeleteOption(!showDeleteOption)}

package/src/components/messages/MessageInput.tsx

@@ -36,8 +36,8 @@ interface Attachment {
 }
 
 const MessageInput = () => {
-  const apiClient = getApiClient();
-  const { role } = getChatConfig();
+  // const apiClient = getApiClient();
+  const { role, apiClient } = getChatConfig();
   const { socket, sendMessage, userId } = useChatContext();
   const { selectedConversation, setMessages, setLastSentMessage } = useChatUIStore();
 
@@ -359,7 +359,7 @@ const MessageInput = () => {
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
-      if ((!message && attachmentsRef.current.length === 0) || isSending)
+      if ((!message.trim() && attachmentsRef.current.length === 0) || isSending)
         return;
       setIsSending(true);
       setAttachments([]);

package/src/declarations.d.ts

@@ -23,6 +23,7 @@ declare module '@pubuduth-aplicy/chat-ui' {
     role?: string;
     webSocketUrl: string;
     cdnUrl?: string;
+    apiClient:AxiosInstance
   }
   
   interface ChatProviderProps {

package/src/service/messageService.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { getChatConfig } from "../Chat.config";
 import { FileType } from "../components/common/FilePreview";
-import { getApiClient } from "../lib/api/apiClient";
 import { Path } from "../lib/api/endpoint";
 
 export const sendMessage = async (params: {
@@ -27,7 +27,8 @@ export const sendMessage = async (params: {
     senderRole,
     receiverRole,
   } = params;
-  const apiClient = getApiClient();
+  // const apiClient = getApiClient();
+const {apiClient} = getChatConfig();
 
   const response = await apiClient.post(
     `${Path.sendmessage}/${receiverId}/${senderId}`,
@@ -48,7 +49,7 @@ export const sendMessage = async (params: {
 
 
 export const fetchMessages = async (chatId: string | undefined, userid: string, pagenum: number) => {
-  const apiClient = getApiClient();
+  const {apiClient} = getChatConfig();
   try {
     const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`, {
       params: { pagenum, limit: 20 },
@@ -70,7 +71,7 @@ export const setEditMessage = async ({
   userId: string;
   newMessage: string;
 }) => {
-  const apiClient = getApiClient();
+  const {apiClient} = getChatConfig();
   try {
     const response = await apiClient.put(`${Path.editMessage}/${messageId}`, {
       userId,
@@ -91,7 +92,7 @@ export const deleteMessage = async ({
   messageId: string;
   userId: string;
 }) => {
-  const apiClient = getApiClient();
+  const {apiClient} = getChatConfig();
   try {
     const response = await apiClient.delete(
       `${Path.deleteMessage}/${messageId}`,

package/src/service/sidebarApi.ts

@@ -1,14 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { getChatConfig } from "../Chat.config";
-import { getApiClient } from "../lib/api/apiClient";
 import { Path } from "../lib/api/endpoint";
 import { ApiResponse } from "../types/type";
 
 
 export const getAllConversationData = async (userid: string) => {
   try {
-    const {role} = getChatConfig();
-    const apiClient = getApiClient();
+    const {role, apiClient} = getChatConfig();
+    // const apiClient = getApiClient();
    
     const endpoint = role === 'admin' 
         ? `${Path.getConversationListByAdmin}` 

package/src/style/style.css

@@ -939,6 +939,7 @@
   padding: 10px;
   position: sticky;
   bottom: 0;
+  z-index: 2;
   background: #fff;
   border-top: 1px solid #eaeaea;
 }
@@ -1190,6 +1191,7 @@
 }
 
 .attachment-options {
+  width: 150px;
   position: absolute;
   bottom: 100%;
   left: 0;
@@ -1492,7 +1494,7 @@
   border-radius: 18px;
   padding: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 10;
+  z-index: 1;
   transition: opacity 0.2s ease;
 }