@pubuduth-aplicy/chat-ui 2.1.51 → 2.1.53

package/package.json

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

@@ -1,77 +1,198 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 import { MessageStatus } from "../../types/type";
 import { useChatContext } from "../../providers/ChatProvider";
-import useChatUIStore from "../../stores/Zustant";
+// import { saveAs } from 'file-saver';
+import { useEffect, useState } from "react";
+import { FileType } from "../common/FilePreview";
 
-// import { useAuthContext } from "../../context/AuthContext";
-// import { extractTime } from "../../utils/extractTime";
-// import useConversation from "../../zustand/useConversation";
 interface MessageProps {
   message: {
+    _id?: string;
     senderId: string;
     message: string;
     status: MessageStatus;
-    createdAt:any;
+    createdAt: any;
+    media?: {
+      type: FileType;
+      url: string;
+      name: string;
+      size: number;
+      uploadProgress?: number;
+      uploadError: string | null;
+    }[];
+    isUploading?: boolean;
   };
 }
 
 const Message = ({ message }: MessageProps) => {
+  const { userId } = useChatContext();
+  const fromMe = message.senderId === userId;
+  const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
+  const alignItems = fromMe ? "outgoing" : "incoming";
+  const [localStatus, setLocalStatus] = useState(message.status);
+  const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
 
-    const { userId } = useChatContext();
-	const fromMe = message.senderId === userId;
-	const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
-	const alignItems = fromMe ? "outgoing" : "incoming";
+  useEffect(() => {
+    setLocalStatus(message.status);
+  }, [message.status]);
 
-const date = new Date(message.createdAt);
-const hours = date.getUTCHours();
-const minutes = date.getUTCMinutes();
-const seconds = date.getUTCSeconds();
+  // const handleDownload = (url: string, name: string) => {
+  //   saveAs(url, name);
+  // };
 
-// Format the time as HH:mm:ss (24-hour format)
-const time = `${hours}.${minutes}`;
+  const getStatusIcon = () => {
+    if (!fromMe) return null;
+    
+    if (message.isUploading || message.status === 'sending') {
+      return <span className="message-status uploading">🔄</span>;
+    }
+    
+    if (message.status === 'failed') {
+      return <span className="message-status failed">❌</span>;
+    }
+    
+    switch (localStatus) {
+      case 'sending':
+        return <span className="message-status sending">🔄</span>;
+      case 'sent':
+        return <span className="message-status sent">✓</span>;
+      case 'delivered':
+        return <span className="message-status delivered">✓✓</span>;
+      case 'read':
+        return <span className="message-status read">✓✓</span>;
+      default:
+        return null;
+    }
+  };
 
-const getStatusIcon = () => {
-  if (!fromMe) return null;
-  
-  switch (message.status) {
-    case 'sent':
-      return <span className="message-status sent">✓</span>;
-    case 'delivered':
-      return <span className="message-status delivered">✓✓</span>;
-    case 'read':
-      return <span className="message-status read">✓✓ (blue)</span>;
-    default:
-      return null;
-  }
-};
+  const handleDownload = async (url: string, name: string, index: number) => {
+    setDownloadingIndex(index);
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = name;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    } catch (error) {
+      console.error("Download failed:", error);
+    } finally {
+      setDownloadingIndex(null);
+    }
+  };
 
-  return (
-    <>
-     {/* <div className="w-max grid">
-  <div className="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none justify-start  items-center gap-3 inline-flex">
-    <h5 className="text-gray-900 text-sm font-normal leading-snug">{message.message}</h5>
-  </div>
-  <div className="justify-end items-center inline-flex mb-2.5">
-    <h6 className="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
-  </div>
-</div> */}
+  const renderMedia = () => {
+    if (!message.media || message.media.length === 0) return null;
+
+    return (
+      <div className={`media-grid ${message.media.length > 1 ? 'multi-media' : 'single-media'}`}>
+           {message.media.map((media, index) => (
+        <div key={index} className="media-item">
+          
+          {/* Progress indicator */}
+          {(media.uploadProgress !== undefined && media.uploadProgress < 100) && (
+            <div className="circular-progress-container">
+               <div className="media-preview-background">
+              <img 
+                src={media.url} 
+                alt={media.name} 
+                className="blurred-preview"
+              />
+            </div>
+              <div className="circular-progress">
+                <svg className="circular-progress-svg" viewBox="0 0 36 36">
+                  <path
+                    className="circular-progress-track"
+                    d="M18 2.0845
+                      a 15.9155 15.9155 0 0 1 0 31.831
+                      a 15.9155 15.9155 0 0 1 0 -31.831"
+                  />
+                  <path
+                    className="circular-progress-bar"
+                    strokeDasharray={`${media.uploadProgress}, 100`}
+                    d="M18 2.0845
+                      a 15.9155 15.9155 0 0 1 0 31.831
+                      a 15.9155 15.9155 0 0 1 0 -31.831"
+                  />
+                </svg>
+                <span className="circular-progress-text">
+                  {media.uploadProgress}%
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Error state */}
+          {media.uploadError && (
+            <div className="upload-error">
+              <span>⚠️ Upload failed</span>
+            </div>
+          )}
 
-<div className="chat-container">
-  <div className={`message-row ${alignItems}`}>
-    <div className="bubble-container">
-      <div className="chat-bubble">{message.message}</div>
-      <div className={`${timestamp}`}>{new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-      <span className="status-icon">{getStatusIcon()}</span>
+          {/* Actual media (shown when upload complete) */}
+          {(!media.uploadProgress || media.uploadProgress >= 100) && !media.uploadError && (
+            <>
+              {media.type === 'image' ? (
+                <img 
+                  src={media.url} 
+                  alt={media.name} 
+                  className="media-content"
+                  onClick={() => window.open(media.url, '_blank')}
+                />
+              ) : media.type === 'video' ? (
+                <video controls className="media-content">
+                  <source src={media.url} type={`video/${media.url.split('.').pop()}`} />
+                </video>
+              ) : (
+                <div className="document-preview">
+                  <div className="file-icon">
+                  {media.type === 'document' && '📄'}
+                  </div>
+                  <div className="file-info">
+                    <span className="file-name">{media.name}</span>
+                    <span className="file-size">{(media.size / 1024).toFixed(1)} KB</span>
+                  </div>
+              
+                </div>
+              )}
+                <button 
+              className="download-btn"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDownload(media.url, media.name, index);
+              }}
+              title="Download"
+              disabled={downloadingIndex === index}
+            >
+              {downloadingIndex === index ? <span className="loader" /> : '⬇️'}
+            </button>
+            </>
+          )}
+        </div>
+      ))}
       </div>
+    );
+  };
+
+  return (
+   <div className="chat-container">
+      <div className={`message-row ${alignItems}`}>
+        <div className="bubble-container">
+          {(message.message || (message.media && message.media.length > 0)) && (
+            <div className="chat-bubble compact-bubble">
+              {renderMedia()}
+              {message.message && <div className="message-text">{message.message}</div>}
+            </div>
+          )}
+          <div className={`${timestamp}`}>
+            {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            <span className="status-icon">{getStatusIcon()}</span>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-
-
- </>
-  )
-}
+  );
+};
 
-export default Message
+export default Message;

package/src/components/messages/MessageContainer.tsx

@@ -46,7 +46,7 @@ const MessageContainer = () => {
         <div className='chatMessageContainer'>
             
             {!selectedConversation ? (
-                <NoChatSelected />
+                <EmptyInbox />
             ) : (
                 <>
                     <div className="chatMessageContainerInner">
@@ -97,16 +97,86 @@ const MessageContainer = () => {
 
 export default MessageContainer;
 
-const NoChatSelected = () => {
-    // const { authUser } = useAuthContext();
-
+interface EmptyInboxProps {
+    title?: string;
+    description?: string;
+  }
+  
+  const EmptyInbox: React.FC<EmptyInboxProps> = ({
+    title = "Ah, a fresh new inbox",
+    description = "You haven't started any conversations yet, but when you do, you'll find them here.",
+  }) => {
     return (
-        <div className='chatMessageContainerNoChat'>
-            <div className='chatMessageContainerNoChat_div'>
-                <p>Welcome   </p> {/* Safely access username */}
-                <p>Select a chat to start messaging</p>
-                {/* <Chat className='text-3xl md:text-6xl text-center' /> */}
-            </div>
+      <div className="flex flex-col items-center justify-center h-full p-6 text-center">
+        <div className="w-48 h-48 mb-6 relative">
+          <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-full h-full"
+          >
+            <line x1="100" y1="100" x2="100" y2="160" stroke="black" strokeWidth="2" />
+            <line x1="40" y1="160" x2="160" y2="160" stroke="black" strokeWidth="1" />
+            <path
+              d="M70 160C75 150 80 155 85 160"
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+            />
+            <path
+              d="M115 160C120 150 125 155 130 160"
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+            />
+            <rect
+              x="70"
+              y="80"
+              width="60"
+              height="30"
+              stroke="black"
+              strokeWidth="1"
+              fill="white"
+            />
+            <path
+              d="M70 80C70 65 130 65 130 80"
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+            />
+            <rect
+              x="70"
+              y="80"
+              width="60"
+              height="20"
+              stroke="black"
+              strokeWidth="1"
+              fill="white"
+            />
+            <path d="M120 90H125V95H120V90Z" fill="#10B981" />
+            <path
+              d="M120 90H125V95H120V90Z"
+              stroke="black"
+              strokeWidth="0.5"
+            />
+            <path d="M125 92L130 87" stroke="#10B981" strokeWidth="1" />
+            <path d="M125 92L130 97" stroke="#10B981" strokeWidth="1" />
+            <path
+              d="M130 60C140 55 150 65 140 70"
+              stroke="black"
+              strokeWidth="1"
+              strokeDasharray="2"
+              fill="none"
+            />
+            <text x="140" y="60" fontSize="12" fill="black">
+              ✉
+            </text>
+            <circle cx="85" cy="175" r="5" fill="#10B981" />
+            <circle cx="115" cy="175" r="5" fill="#10B981" />
+          </svg>
         </div>
+        <h3 className="text-xl font-medium text-gray-800 mb-2">{title}</h3>
+        <p className="text-gray-500 max-w-sm">{description}</p>
+      </div>
     );
-};
+  };