@pubuduth-aplicy/chat-ui 2.1.50 → 2.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.50",
+  "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/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,
-            });
+        mutation.mutate(
+          {
+            chatId: selectedConversation?.participantDetails._id,
+            senderId: userId,
+            message,
           },
-          onError: (error) => {
-            console.error("❌ Error in sending message:", error);
-          },
-        });
-
+          {
+            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 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>
   );
 };
 

package/src/components/sidebar/Conversation.tsx

@@ -76,7 +76,7 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
         </div>
       </div>
 
-      {!lastIdx && <div className="divider my-0 py-0 h-1" />}
+      {/* {!lastIdx && <div className="divider my-0 py-0 h-1" />} */}
     </>
   );
 };

package/src/components/sidebar/SearchInput.tsx

@@ -50,10 +50,6 @@ const {userId} =useChatContext()
 	</div>
 	</form>
 	</>
-
-
-
-
   )
 }
 

package/src/components/sidebar/Sidebar.tsx

@@ -2,12 +2,12 @@ import Conversations from "./Conversations";
 import SearchInput from "./SearchInput";
 
 export const Sidebar = () => {
-  return (
- <div className='chatSidebarMain'>
+	return (
+		<div className='chatSidebarMain'>
 			<SearchInput />
 			<div className='divider px-3'></div>
 			<Conversations />
-		
-		</div> 
-  )
+
+		</div>
+	)
 }

package/src/style/style.css

@@ -1,8 +1,9 @@
 .grid-container {
   display: grid;
   overflow: hidden;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  /* grid-template-columns: repeat(12, minmax(0, 1fr)); */
   border-radius: 0.5rem;
+  width: '100%';
   background-clip: padding-box;
   /* background-color: #9CA3AF; */
   --bg-opacity: 0;
@@ -10,14 +11,14 @@
 }
 
 .sidebarContainer {
-  grid-column: span 3;
-  overflow-y: auto;
+  /* grid-column: span 3; */
+  /* overflow-y: auto; */
   border: 1px solid #ddd;
   max-height: 100vh;
 }
 
 .messageContainer {
-  grid-column: span 4;
+  /* grid-column: span 4; */
   /* border: 1px solid; */
   max-height: 100vh;
   overflow-y: auto;
@@ -51,7 +52,7 @@
   padding-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  flex-basis: 0px;
+  /* flex-basis: 0px; */
   shrink: 1;
   gap: 1rem;
   justify-content: flex-start;
@@ -80,8 +81,8 @@ line-height: 1.5rem;
 font-weight: 400;
 border: 1px solid #ccc;
 width: 100%;              /* Ensure full width */
-min-width: 400px;         /* Set minimum horizontal length */
-max-width: 600px;         /* Optional: Set maximum width if needed */
+/* min-width: 400px;       */
+max-width: 600px;         
 }
 
 .chatSidebarInput:focus {
@@ -452,7 +453,7 @@ font-size: 12px;
 color: blue;
 }
 
-@media (min-width: 640px) {
+/* @media (min-width: 640px) {
   .grid-container {
       height: 450px;
   }
@@ -471,22 +472,22 @@ color: blue;
       padding-right: 1.5rem;
   }
 
-}
+} */
 
 @media (min-width: 768px) {
   .grid-container {
-      height: 550px;
+      /* height: 550px; */
       grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
   .sidebarContainer {
-      display: grid;
-      grid-column: span 3 / span 3;
+      /* display: grid; */
+      grid-column: span 4 ;
   }
 
   .messageContainer {
       display: grid;
-      grid-column: span 4 / span 4;
+      grid-column: span 5;
   }
 
   .chatMessageContainerInnerDiv_button {
@@ -819,3 +820,157 @@ background-color: #ccc;
     opacity: 1;
   }
 }
+
+
+/*          chat input medial          */
+
+
+
+.message-input-container {
+  width: 100%;
+  padding: 10px;
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.attachments-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.file-preview {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f5f5f5;
+  border: 1px solid #eaeaea;
+}
+
+.file-preview-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-preview-image {
+  width: 100%;
+  height: 80px;
+  object-fit: cover;
+}
+
+.file-preview-video {
+  width: 100%;
+  height: 80px;
+  background: #000;
+}
+
+.file-preview-document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  padding: 10px;
+}
+
+.file-preview-document svg {
+  width: 40px;
+  height: 40px;
+  color: #555;
+}
+
+.file-info {
+  padding: 5px;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-size {
+  color: #777;
+}
+
+.remove-file {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.remove-file:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.upload-progress {
+  width: 100%;
+  height: 4px;
+  background: #eaeaea;
+  position: absolute;
+  bottom: 0;
+}
+
+.progress-bar {
+  height: 100%;
+  background: #4CAF50;
+  transition: width 0.3s;
+}
+
+.upload-error {
+  color: #f44336;
+  font-size: 12px;
+  padding: 5px;
+  text-align: center;
+}
+
+.attachment-options {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  padding: 8px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.attachment-options button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.attachment-options button:hover {
+  background: #f5f5f5;
+}