@pubuduth-aplicy/chat-ui 2.1.54 → 2.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.54",
+  "version": "2.1.56",
   "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,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MessageStatus } from "../../types/type";
 import { useChatContext } from "../../providers/ChatProvider";
-// import { saveAs } from 'file-saver';
 import { useEffect, useState } from "react";
 import { FileType } from "../common/FilePreview";
 
+
 interface MessageProps {
   message: {
     _id?: string;
@@ -42,23 +42,23 @@ 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;
@@ -70,7 +70,7 @@ const Message = ({ message }: MessageProps) => {
     try {
       const response = await fetch(url);
       const blob = await response.blob();
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = URL.createObjectURL(blob);
       link.download = name;
       link.click();
@@ -86,107 +86,132 @@ const Message = ({ message }: MessageProps) => {
     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 +220,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,7 +527,9 @@ 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>

package/src/style/style.css

@@ -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) */