@pubuduth-aplicy/chat-ui 2.1.49 → 2.1.51

package/package.json

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

@@ -0,0 +1,91 @@
+import React from 'react';
+
+export type FileType = 'image' | 'video' | 'document' | null;
+
+interface FilePreviewProps {
+  file: File;
+  type: FileType;
+  previewUrl: string;
+  onRemove: () => void;
+  uploadProgress?: number;
+  uploadError?: string;
+}
+
+export const FilePreview: React.FC<FilePreviewProps> = ({
+  file,
+  type,
+  previewUrl,
+  onRemove,
+  uploadProgress,
+  uploadError
+}) => {
+  const getFileIcon = () => {
+    switch (type) {
+      case 'document':
+        return (
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+            <polyline points="14 2 14 8 20 8"></polyline>
+          </svg>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="file-preview">
+      <div className="file-preview-content">
+        {type === 'image' && (
+          <img src={previewUrl} alt={file.name} className="file-preview-image" />
+        )}
+        {type === 'video' && (
+          <video controls className="file-preview-video">
+            <source src={previewUrl} type={file.type} />
+          </video>
+        )}
+        {type === 'document' && (
+          <div className="file-preview-document">
+            {getFileIcon()}
+            <span>{file.name}</span>
+          </div>
+        )}
+        
+        <div className="file-info">
+          <span className="file-name">{file.name}</span>
+          <span className="file-size">{formatFileSize(file.size)}</span>
+        </div>
+        
+        {uploadProgress !== undefined && uploadProgress < 100 && (
+          <div className="upload-progress">
+            <div 
+              className="progress-bar" 
+              style={{ width: `${uploadProgress}%` }}
+            ></div>
+          </div>
+        )}
+        
+        {uploadError && (
+          <div className="upload-error">{uploadError}</div>
+        )}
+      </div>
+      
+      <button 
+        type="button" 
+        className="remove-file" 
+        onClick={onRemove}
+        aria-label="Remove file"
+      >
+        &times;
+      </button>
+    </div>
+  );
+};

package/src/components/messages/Message.tsx

@@ -21,8 +21,8 @@ const Message = ({ message }: MessageProps) => {
 
     const { userId } = useChatContext();
 	const fromMe = message.senderId === userId;
-	const bubbleBgColor = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
-	const alignItems = fromMe ? "chatMessagesBubble_me" : "chatMessagesBubble_Other";
+	const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
+	const alignItems = fromMe ? "outgoing" : "incoming";
 
 const date = new Date(message.createdAt);
 const hours = date.getUTCHours();
@@ -58,19 +58,17 @@ const getStatusIcon = () => {
   </div>
 </div> */}
 
-	  <div className='chatMessage'>
-		<div className="chatMessagesContainer">
-      <div style={{color:"#374151"}}>
-        <div className={`chatMessagesBubble_inner ${alignItems} ${bubbleBgColor} `}>
-          <p style={{fontSize:"14px"}}>{message.message}</p>
-		  <div className='chatMessagesBubble_Time'>  {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
-        {getStatusIcon()}
-        </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>
       </div>
-      
-      {/* <div className="clear-both flex text-gray-700" /> */}
-		</div>
-	  </div>
+      </div>
+    </div>
+  </div>
+
 
  </>
   )

package/src/components/messages/MessageInput.tsx

@@ -1,13 +1,38 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useMessageMutation } from "../../hooks/mutations/useSendMessage";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import paperplane from "../../assets/icons8-send-50.png";
 // import { PaperPlaneRight } from '@phosphor-icons/react'; // Assuming you're using icons from Phosphor Icons library
 // import useSendMessage from '../../hooks/useSendMessage'; // Importing the useSendMessage hook
+import { FilePreview, FileType } from "../common/FilePreview";
+import { getApiClient } from "../../lib/api/apiClient";
+const MAX_FILE_SIZE_MB = 10; // 10MB max file size
+const ACCEPTED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+];
+const ACCEPTED_VIDEO_TYPES = ["video/mp4", "video/webm", "video/ogg"];
+const ACCEPTED_DOCUMENT_TYPES = [
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/plain",
+];
+
+interface Attachment {
+  file: File;
+  type: FileType;
+  previewUrl: string;
+  uploadProgress?: number;
+  uploadError?: string;
+}
 
 const MessageInput = () => {
+  const apiClient = getApiClient();
   const { socket } = useChatContext();
   const { userId } = useChatContext();
   const { selectedConversation } = useChatUIStore();
@@ -18,6 +43,7 @@ const MessageInput = () => {
   const [isSending, setIsSending] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isTyping, setIsTyping] = useState(false); // Track if the user is typing
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
 
   useEffect(() => {
     if (selectedConversation?._id) {
@@ -46,17 +72,28 @@ const MessageInput = () => {
     return () => clearTimeout(typingTimeout);
   }, [message, socket, selectedConversation?._id, userId]);
 
-
   useEffect(() => {
     if (!socket || !selectedConversation?._id) return;
 
-    const handleTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
+    const handleTyping = ({
+      userId,
+      chatId,
+    }: {
+      userId: string;
+      chatId: string;
+    }) => {
       if (chatId === selectedConversation._id) {
         setTypingUser(userId);
       }
     };
-  
-    const handleStopTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
+
+    const handleStopTyping = ({
+      userId,
+      chatId,
+    }: {
+      userId: string;
+      chatId: string;
+    }) => {
       if (chatId === selectedConversation._id) {
         setTypingUser((prev) => (prev === userId ? null : prev));
       }
@@ -71,35 +108,99 @@ const MessageInput = () => {
     };
   }, [socket, selectedConversation?._id]);
 
+  const getFileType = (mimeType: string): FileType | null => {
+    if (ACCEPTED_IMAGE_TYPES.includes(mimeType)) return "image";
+    if (ACCEPTED_VIDEO_TYPES.includes(mimeType)) return "video";
+    if (ACCEPTED_DOCUMENT_TYPES.includes(mimeType)) return "document";
+    return null;
+  };
+
+  const uploadToS3 = async (
+    file: File
+  ): Promise<{ url: string; name: string; size: number; type: FileType }> => {
+    // Get pre-signed URL from your backend
+    const response = await apiClient.post("api/chat/generatePresignedUrl", {
+      fileName: file.name,
+      fileType: file.type,
+    });
+
+    const { signedUrl, fileUrl } = await response.data();
+
+    // Upload file directly to S3 using the pre-signed URL
+    const uploadResponse = await fetch(signedUrl, {
+      method: "PUT",
+      body: file,
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+
+    if (!uploadResponse.ok) {
+      throw new Error("Upload failed");
+    }
+
+    return {
+      url: fileUrl,
+      name: file.name,
+      size: file.size,
+      type: getFileType(file.type),
+    };
+  };
+
   const handleSubmit = useCallback(
     async (e: any) => {
       e.preventDefault();
-      if (!message || isSending) return;
+      // if (!message || isSending) return;
 
       setIsSending(true);
       try {
+        const uploadedFiles = await Promise.all(
+          attachments.map(async (attachment) => {
+            try {
+              const result = await uploadToS3(attachment.file);
+              return {
+                type: attachment.type,
+                url: result.url,
+                name: result.name,
+                size: result.size,
+              };
+            } catch (error) {
+              console.error(
+                `Error uploading file ${attachment.file.name}:`,
+                error
+              );
+              return null;
+            }
+          })
+        );
+
+        // Filter out any failed uploads
+        const successfulUploads = uploadedFiles.filter((file) => file !== null);
+
         console.log("📤 Sending message:", message);
-        mutation.mutate({
-          chatId: selectedConversation?.participantDetails._id,
-          senderId: userId,
-          message,
-        }, {
-          onSuccess: (data) => {
-            console.log('Response from sendMessage:', data);
-            // After successfully sending the message, emit the socket event
-            socket.emit("sendMessage", {
-              chatId: selectedConversation?._id,
-              message,
-              messageId:data[1]._id,
-              senderId: userId,
-              receiverId: selectedConversation?.participantDetails._id,
-            });
-          },
-          onError: (error) => {
-            console.error("❌ Error in sending message:", error);
+        mutation.mutate(
+          {
+            chatId: selectedConversation?.participantDetails._id,
+            senderId: userId,
+            message,
           },
-        });
-
+          {
+            onSuccess: (data) => {
+              console.log("Response from sendMessage:", data);
+              // After successfully sending the message, emit the socket event
+              socket.emit("sendMessage", {
+                chatId: selectedConversation?._id,
+                message,
+                messageId: data[1]._id,
+                senderId: userId,
+                receiverId: selectedConversation?.participantDetails._id,
+              });
+            },
+            onError: (error) => {
+              console.error("❌ Error in sending message:", error);
+            },
+          }
+        );
       } catch (error) {
         console.error("❌ Error sending message:", error);
       } finally {
@@ -110,34 +211,242 @@ const MessageInput = () => {
     [message, selectedConversation, userId, isSending]
   );
 
+  const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    return () => {
+      attachments.forEach((attachment) => {
+        URL.revokeObjectURL(attachment.previewUrl);
+      });
+    };
+  }, [attachments]);
+
+  const handleAttachmentClick = () => {
+    setShowAttachmentOptions(!showAttachmentOptions);
+  };
+
+  const handleFileSelect = (type: FileType) => {
+    if (fileInputRef.current) {
+      fileInputRef.current.accept = getAcceptString(type);
+      fileInputRef.current.click();
+    }
+    setShowAttachmentOptions(false);
+  };
+
+  const getAcceptString = (type: FileType): string => {
+    switch (type) {
+      case "image":
+        return ACCEPTED_IMAGE_TYPES.join(",");
+      case "video":
+        return ACCEPTED_VIDEO_TYPES.join(",");
+      case "document":
+        return ACCEPTED_DOCUMENT_TYPES.join(",");
+      default:
+        return "*";
+    }
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    const newAttachments: Attachment[] = [];
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const fileType = getFileType(file.type);
+
+      // Validate file type
+      if (!fileType) {
+        console.error(`Unsupported file type: ${file.type}`);
+        continue;
+      }
+
+      // Validate file size
+      if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
+        console.error(`File too large: ${file.name}`);
+        continue;
+      }
+
+      // Create preview URL
+      const previewUrl =
+        fileType === "document"
+          ? URL.createObjectURL(new Blob([""], { type: "application/pdf" })) // Placeholder for documents
+          : URL.createObjectURL(file);
+
+      newAttachments.push({
+        file,
+        type: fileType,
+        previewUrl,
+      });
+    }
+
+    setAttachments((prev) => [...prev, ...newAttachments]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const removeAttachment = (index: number) => {
+    setAttachments((prev) => {
+      const newAttachments = [...prev];
+      URL.revokeObjectURL(newAttachments[index].previewUrl);
+      newAttachments.splice(index, 1);
+      return newAttachments;
+    });
+  };
+
   return (
-    <form className="chatMessageInputform" onSubmit={handleSubmit}>
-      <div className="chatMessageInputdiv">
-        <input
-          type="text"
-          className="chatMessageInput"
-          placeholder="Send a message"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)} // Update message state as the user types
-        />
-        <button type="submit" className="chatMessageInputSubmit">
-          <img width={10} height={10} src={paperplane} alt="send" />
-          {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
-        </button>
-      </div>
-
-      {typingUser && typingUser !== userId && typingUser === selectedConversation?.participantDetails?._id && !isSending && (
-  <div className="typingIndicator">
-    <div className="loader">
-      <div className="ball" />
-      <div className="ball" />
-      <div className="ball" />
-      typing
-    </div>
-  </div>
-)}
+    <div className="message-input-container">
+      {/* Preview area for attachments */}
+      {attachments.length > 0 && (
+        <div className="attachments-preview">
+          {attachments.map((attachment, index) => (
+            <FilePreview
+              key={index}
+              file={attachment.file}
+              type={attachment.type}
+              previewUrl={attachment.previewUrl}
+              onRemove={() => removeAttachment(index)}
+            />
+          ))}
+        </div>
+      )}
 
-    </form>
+      <form className="chatMessageInputform" onSubmit={handleSubmit}>
+        <div className="chatMessageInputdiv">
+          {/* Hidden file input */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: "none" }}
+            onChange={handleFileChange}
+            multiple
+          />
+
+          {/* Attachment button and options */}
+          <div
+            className="attachment-container"
+            style={{ position: "relative" }}
+          >
+            <button
+              type="button"
+              className="attachment-button"
+              onClick={handleAttachmentClick}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: "8px",
+              }}
+            >
+              <div className="attachment-icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                </svg>
+              </div>
+            </button>
+
+            {showAttachmentOptions && (
+              <div className="attachment-options">
+                <button type="button" onClick={() => handleFileSelect("image")}>
+                  <div className="icon">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <rect
+                        x="3"
+                        y="3"
+                        width="18"
+                        height="18"
+                        rx="2"
+                        ry="2"
+                      ></rect>
+                      <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                      <polyline points="21 15 16 10 5 21"></polyline>
+                    </svg>
+                  </div>
+                  <span>Photos & videos</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleFileSelect("document")}
+                >
+                  <div className="icon">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                      <polyline points="14 2 14 8 20 8"></polyline>
+                      <line x1="16" y1="13" x2="8" y2="13"></line>
+                      <line x1="16" y1="17" x2="8" y2="17"></line>
+                      <polyline points="10 9 9 9 8 9"></polyline>
+                    </svg>
+                  </div>
+                  <span>Document</span>
+                </button>
+              </div>
+            )}
+          </div>
+
+          <input
+            type="text"
+            className="chatMessageInput"
+            placeholder="Send a message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+          <button
+            type="submit"
+            className="chatMessageInputSubmit"
+            disabled={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="ball" />
+                <div className="ball" />
+                <div className="ball" />
+                typing
+              </div>
+            </div>
+          )}
+      </form>
+    </div>
   );
 };