@pubuduth-aplicy/chat-ui 2.1.90 → 2.1.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.90",
+  "version": "2.1.92",
   "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/Message.tsx

@@ -51,31 +51,31 @@ interface MessageProps {
 
 const Message = ({ message }: MessageProps) => {
   const { userId } = useChatContext();
-  const { apiUrl,cdnUrl ,role: role1} = getChatConfig();
+  const { apiUrl, cdnUrl, role: role1 } = getChatConfig();
 
   if (message.type === "system") {
     const booking = message.meta?.bookingDetails;
     const status = booking?.status || "Pending"; // Default to Pending
     const role = role1; // "provider" or "customer"
-  
+
     const handleConfirm = () => {
       console.log("Booking confirmed!");
       window.location.href = `/booking/all`;
       // Update booking status to Confirmed
     };
-  
+
     const handleInProgress = () => {
       console.log("Booking started (In Progress)");
       window.location.href = `/booking/all`;
       // Update booking status to InProgress
     };
-  
+
     const handleComplete = () => {
       console.log("Booking completed!");
       window.location.href = `/booking/all`;
       // Update booking status to Completed
     };
-  
+
     const handleReview = () => {
       if (role === "customer") {
         console.log("Navigate to review page for customer → provider");
@@ -85,35 +85,35 @@ const Message = ({ message }: MessageProps) => {
         window.location.href = `/booking/all`;
       }
     };
-  
+
     return (
       <div className="system-message booking-details">
         <h4>{status}</h4>
         <div className="details">
           <p>Service: {booking?.serviceId}</p>
-          <p>Date: {booking?.date.split('T')[0]}</p>
+          <p>Date: {booking?.date.split("T")[0]}</p>
           <p>Time: {booking?.time}</p>
         </div>
-  
+
         {/* Actions based on role + status */}
         {role === "provider" && status === "Pending" && (
           <button className="confirm-button" onClick={handleConfirm}>
             Confirm Booking ✅
           </button>
         )}
-  
+
         {role === "provider" && status === "Confirmed" && (
           <button className="confirm-button" onClick={handleInProgress}>
             Start Service ▶️
           </button>
         )}
-  
+
         {role === "provider" && status === "InProgress" && (
           <button className="confirm-button" onClick={handleComplete}>
             Mark as Completed ✔️
           </button>
         )}
-  
+
         {status === "Completed" && (
           <button className="confirm-button" onClick={handleReview}>
             Leave a Review ✍️
@@ -253,7 +253,6 @@ const Message = ({ message }: MessageProps) => {
     }
   };
 
-
   const handleDownload = async (url: string, name: string, index: number) => {
     setDownloadingIndex(index);
     setDownloadProgress(0);
@@ -357,7 +356,7 @@ const Message = ({ message }: MessageProps) => {
                   <div className="circular-progress-container">
                     <div className="media-preview-background">
                       <img
-                        src={`${cdnUrl}${`${cdnUrl}${media.url}`}`}
+                        src={`${`${cdnUrl}${media.url}`}`}
                         alt={media.name}
                         className="blurred-preview"
                       />
@@ -405,16 +404,37 @@ const Message = ({ message }: MessageProps) => {
                       src={`${cdnUrl}${media.url}`}
                       alt={media.name}
                       className="media-content"
-                      onClick={() => window.open(`${cdnUrl}${media.url}`, "_blank")}
+                      onClick={() =>
+                        window.open(`${cdnUrl}${media.url}`, "_blank")
+                      }
                     />
                   ) : media.type === "video" ? (
-                    <video controls className="media-content">
-                      <source
-                        src={`${cdnUrl}${media.url}`}
-                        type={`video/${`${cdnUrl}${media.url}`.split(".").pop()}`}
-                      />
-                    </video>
+                    <>
+                      <div
+                        className="video-file-preview"
+                        onClick={() =>
+                          window.open(`${cdnUrl}${media.url}`, "_blank")
+                        }
+                      >
+                        <div className="file-icon video-icon">🎥</div>
+
+                        <div className="file-info">
+                          <span className="file-name">{media.name}</span>
+                          <span className="file-size">
+                            {(media.size / 1024 / 1024).toFixed(1)} MB
+                          </span>
+                        </div>
+
+                        <div className="play-overlay">▶</div>
+                      </div>
+                    </>
                   ) : (
+                    // <video controls className="media-content" preload="metadata">
+                    //   <source
+                    //     src={`${cdnUrl}${media.url}`}
+                    //     type={`video/${`${cdnUrl}${media.url}`.split(".").pop()?.toLocaleLowerCase()}`}
+                    //   />
+                    // </video>
                     <div className="document-preview">
                       <div className="file-icon">
                         {media.type === "document" && "📄"}
@@ -434,7 +454,11 @@ const Message = ({ message }: MessageProps) => {
                       if (downloadingIndex === index) {
                         cancelDownload();
                       } else {
-                        handleDownload(`${cdnUrl}${media.url}`, media.name, index);
+                        handleDownload(
+                          `${cdnUrl}${media.url}`,
+                          media.name,
+                          index
+                        );
                       }
                     }}
                     title={downloadingIndex === index ? "Cancel" : "Download"}
@@ -491,12 +515,14 @@ const Message = ({ message }: MessageProps) => {
       );
     } else {
       setIsEditingMode(false);
+      setShowOptions(false);
     }
   };
 
   const handleCancelEdit = () => {
     setEditedMessage(message.message);
     setIsEditingMode(false);
+    setShowOptions(false);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -534,7 +560,7 @@ const Message = ({ message }: MessageProps) => {
     return now.getTime() - messageDate.getTime() > oneDayInMs;
   };
 
-    const hasMedia = message.media && message.media.length > 0;
+  const hasMedia = message.media && message.media.length > 0;
 
   return (
     <div className="chat-container">
@@ -548,7 +574,9 @@ const Message = ({ message }: MessageProps) => {
         >
           {message.status === "deleted" ? (
             <div className="chat-bubble compact-bubble deleted-message">
-              <div className="message-text text-gray-900 dark:text-gray-100">This message was deleted</div>
+              <div className="message-text text-gray-900 dark:text-gray-100">
+                This message was deleted
+              </div>
             </div>
           ) : (
             (message.message ||
@@ -579,7 +607,9 @@ const Message = ({ message }: MessageProps) => {
                   </div>
                 ) : (
                   message.message && (
-                    <div className="message-text text-gray-900 dark:text-gray-100">{message.message}</div>
+                    <div className="message-text text-gray-900 dark:text-gray-100">
+                      {message.message}
+                    </div>
                   )
                 )}
 

package/src/components/messages/MessageContainer.tsx

@@ -96,7 +96,7 @@ const MessageContainer = () => {
                 <img
                   className="chatMessageContainerInnerImg"
                   alt="Profile"
-                  src={participant?.profilePicture || defaultProfilePicture}
+                  src={participant?.profilePicture ? participant?.profilePicture: defaultProfilePicture}
                 />
               )}
               <div className="chatMessageContainerOutter">

package/src/components/sidebar/Conversation.tsx

@@ -104,7 +104,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <>
             <img
               className="w-10 h-10 rounded-full"
-              src={participant?.profilePicture || defaultProfilePicture}
+              src={participant?.profilePicture ? participant?.profilePicture: defaultProfilePicture}
               alt="User Avatar"
             />
             <span

package/src/style/style.css

@@ -1568,6 +1568,7 @@
 .edit-message-input {
   width: 100%;
   padding: 8px;
+  color: #666666;
   border: 1px solid #ddd;
   border-radius: 4px;
   margin-bottom: 5px;