@pubuduth-aplicy/chat-ui 2.1.53 → 2.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.53",
+  "version": "2.1.55",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",
@@ -14,6 +14,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.67.2",
     "axios": "^1.8.2",
+    "file-saver": "^2.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-intersection-observer": "^9.16.0",
@@ -22,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@types/file-saver": "^2.0.7",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",

package/src/components/messages/Message.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MessageStatus } from "../../types/type";
 import { useChatContext } from "../../providers/ChatProvider";
-// import { saveAs } from 'file-saver';
+import { saveAs } from 'file-saver';
 import { useEffect, useState } from "react";
 import { FileType } from "../common/FilePreview";
 
+
 interface MessageProps {
   message: {
     _id?: string;
@@ -42,151 +43,188 @@ const Message = ({ message }: MessageProps) => {
 
   const getStatusIcon = () => {
     if (!fromMe) return null;
-    
-    if (message.isUploading || message.status === 'sending') {
+
+    if (message.isUploading || message.status === "sending") {
       return <span className="message-status uploading">🔄</span>;
     }
-    
-    if (message.status === 'failed') {
+
+    if (message.status === "failed") {
       return <span className="message-status failed">❌</span>;
     }
-    
+
     switch (localStatus) {
-      case 'sending':
+      case "sending":
         return <span className="message-status sending">🔄</span>;
-      case 'sent':
+      case "sent":
         return <span className="message-status sent">✓</span>;
-      case 'delivered':
+      case "delivered":
         return <span className="message-status delivered">✓✓</span>;
-      case 'read':
+      case "read":
         return <span className="message-status read">✓✓</span>;
       default:
         return null;
     }
   };
 
-  const handleDownload = async (url: string, name: string, index: number) => {
+  const handleDownload = (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);
+      saveAs(url, name);
     } catch (error) {
       console.error("Download failed:", error);
     } finally {
       setDownloadingIndex(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);
+  //   }
+  // };
+
   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
+      <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 */}
+            {message.isUploading &&
+              media.uploadProgress !== undefined &&
+              media.uploadProgress < 100 && (
+                <>
+                  {console.log("media.uploadProgress", media.uploadProgress)};
+                  <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
+                        />
+                        <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>
-          )}
+                        />
+                      </svg>
+                      <span className="circular-progress-text">
+                        {media.uploadProgress}%
+                      </span>
+                    </div>
+                  </div>
+                </>
+              )}
 
-          {/* Error state */}
-          {media.uploadError && (
-            <div className="upload-error">
-              <span>⚠️ Upload failed</span>
-            </div>
-          )}
+            {/* Error state */}
+            {media.uploadError && (
+              <div className="upload-error">
+                <span>⚠️ Upload failed</span>
+              </div>
+            )}
 
-          {/* 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>
+            {/* Actual media (shown when upload complete) */}
+            {(!message.isUploading || 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>
+                </>
               )}
-                <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>
+        ))}
       </div>
     );
   };
 
   return (
-   <div className="chat-container">
+    <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>}
+              {message.message && (
+                <div className="message-text">{message.message}</div>
+              )}
             </div>
           )}
           <div className={`${timestamp}`}>
-            {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            {new Date(message.createdAt).toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
             <span className="status-icon">{getStatusIcon()}</span>
           </div>
         </div>
@@ -195,4 +233,4 @@ const Message = ({ message }: MessageProps) => {
   );
 };
 
-export default Message;
+export default Message;

package/src/components/messages/MessageInput.tsx

@@ -38,14 +38,15 @@ const MessageInput = () => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const attachmentsRef = useRef<Attachment[]>([]);
   const [tempMessageId, setTempMessageId] = useState<string | null>(null);
+  const [inputError, setInputError] = useState<string | null>(null);
 
   const generateTempId = () => `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
   // Function to auto-resize the textarea
-  const autoResizeTextarea = (element: HTMLTextAreaElement) => {
-    element.style.height = "auto"
-    element.style.height = Math.min(150, element.scrollHeight) + "px"
-  }
+  // const autoResizeTextarea = (element: HTMLTextAreaElement) => {
+  //   element.style.height = "auto"
+  //   element.style.height = Math.min(150, element.scrollHeight) + "px"
+  // }
 
   useEffect(() => {
     if (selectedConversation?._id) {
@@ -75,6 +76,42 @@ const MessageInput = () => {
   }, [message, socket, selectedConversation?._id, userId]);
 
 
+  const validateInput = (text: string) => {
+    // Check for email
+    const emailRegex = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i;
+    if (emailRegex.test(text)) {
+      return "Email addresses are not allowed.";
+    }
+  
+    // Check for phone number (very basic)
+    const phoneRegex = /(\+?\d{1,4}[\s-]?)?(\(?\d{3}\)?[\s-]?)?\d{3}[\s-]?\d{4}/;
+    if (phoneRegex.test(text)) {
+      return "Phone numbers are not allowed.";
+    }
+  
+    // // Check for bad words
+    // for (const word of badWords) {
+    //   if (text.toLowerCase().includes(word)) {
+    //     return "Inappropriate language is not allowed.";
+    //   }
+    // }
+  
+    return null; // No errors
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    const validationError = validateInput(newValue);
+  
+    if (validationError) {
+      setInputError(validationError);
+    } else {
+      setInputError(null);
+      setMessage(newValue);
+    }
+  };
+  
+
   useEffect(() => {
     if (!socket || !selectedConversation?._id) return;
 
@@ -476,10 +513,11 @@ const MessageInput = () => {
           className="chatMessageInput"
           placeholder="Send a message"
           value={message}
-          onChange={(e) => {
-            setMessage(e.target.value)
-            autoResizeTextarea(e.target)
-          }}
+          // onChange={(e) => {
+          //   setMessage(e.target.value)
+          //   autoResizeTextarea(e.target)
+          // }}
+          onChange={handleChange}
           rows={1}
           style={{ resize: "none" }}
           onKeyDown={(e) => {
@@ -489,14 +527,16 @@ const MessageInput = () => {
             }
           }}
         />
-        <button type="submit" className="chatMessageInputSubmit" disabled={isSending}>
+
+{inputError && <p style={{ color: 'red', fontSize: '12px' }}>{inputError}</p>}
+        <button type="submit" className="chatMessageInputSubmit" disabled={!!inputError || isSending}>
           <img width={10} height={10} src={paperplane} alt="send" />
         </button>
       </div>
 
       {typingUser && typingUser !== userId && typingUser === selectedConversation?.participantDetails?._id && !isSending && (
         <div className="typingIndicator">
-          <div className="loader">
+          <div className="typing-loader">
             <div className="ball" />
             <div className="ball" />
             <div className="ball" />

package/src/style/style.css

@@ -33,12 +33,12 @@
 
 .chatSidebarSearchbar {
   display: inline-flex;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
+  padding-top: 2.3rem;
+  padding-bottom: 2.4rem;
+  /* padding-left: 1rem; */
   padding-right: 1rem;
   gap: 1rem;
-  border-bottom: 1px;
+  border-bottom: 0.5px solid lightgray;
   width: 100%;
   justify-content: flex-start;
   align-items: center;
@@ -512,7 +512,7 @@ font-size: .875rem;
 }
 
 /* From Uiverse.io by ashish-yadv */ 
-.loader {
+.typing-loader {
   width: 60px;
   display: flex;
   align-items: center;
@@ -1198,25 +1198,63 @@ background-color: #ccc;
 
 
 
-/* Blurred background preview */
+.circular-progress-container {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .media-preview-background {
   position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  filter: blur(5px);
+  opacity: 0.7;
 }
 
+.blurred-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-/* Circular progress container (updated to be on top of blurred background) */
-.circular-progress-container {
+.circular-progress {
   position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 80px;
+  height: 80px;
+}
+
+.circular-progress-svg {
   width: 100%;
   height: 100%;
+  transform: rotate(-90deg);
+}
+
+.circular-progress-track {
+  fill: none;
+  stroke: #eee;
+  stroke-width: 4;
+}
+
+.circular-progress-bar {
+  fill: none;
+  stroke: #4CAF50;
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.circular-progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
 }
 
 /* Error message (on top of blurred background) */