@pubuduth-aplicy/chat-ui 2.1.50 → 2.1.52

package/src/components/messages/MessageInput.tsx

@@ -1,23 +1,51 @@
 /* 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";
+import { MessageStatus } from "../../types/type";
+const MAX_FILE_SIZE_MB = 25; // 10MB max file size
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp','video/mp4', 'video/webm', 'video/ogg'];
+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();
-  const [message, setMessage] = useState(""); // State for storing the message input
-  // const { mutate: sendMessage } = useMessageMutation();
-  const mutation = useMessageMutation(); // useMutation hook to send message
+  const { selectedConversation,setMessages } = useChatUIStore();
+  const [message, setMessage] = useState(""); 
+  const mutation = useMessageMutation(); 
   const [typingUser, setTypingUser] = useState<string | null>(null);
   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 [isTyping, setIsTyping] = useState(false); 
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const attachmentsRef = useRef<Attachment[]>([]);
+  const [tempMessageId, setTempMessageId] = 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"
+  }
 
   useEffect(() => {
     if (selectedConversation?._id) {
@@ -71,58 +99,398 @@ 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, onProgress?:(progress:number)=> void): Promise<{ url: string, name: string, size: number, type: FileType }> => {
+    const response = await apiClient.post('api/chat/generatePresignedUrl', {
+        fileName: file.name,
+        fileType: file.type,
+      }
+    );
+  
+    const { signedUrl, fileUrl } = await response.data;
+  
+    // const uploadResponse = await fetch(signedUrl, {
+    //   method: 'PUT',
+    //   body: file,
+    //   headers: {
+    //     'Content-Type': file.type,
+    //     // 'x-amz-acl': 'public-read'
+    //   },
+    // });
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('PUT', signedUrl, true);
+    xhr.setRequestHeader('Content-Type', file.type);
+
+    return new Promise((resolve, reject) => {
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable && onProgress) {
+          const progress = Math.round((event.loaded / event.total) * 100);
+          onProgress(progress);
+        }
+      };
+
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve({
+            url: fileUrl,
+            name: file.name,
+            size: file.size,
+            type: getFileType(file.type),
+          });
+        } else {
+          reject(new Error('Upload failed'));
+        }
+      };
+
+      xhr.onerror = () => reject(new Error('Upload failed'));
+      xhr.send(file);
+    });
+  
+    // 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 && attachmentsRef.current.length === 0 || isSending) return;
       setIsSending(true);
+
+      const tempId = generateTempId();
+      setTempMessageId(tempId);
+
+      const optimisticMessage = {
+        _id: tempId,
+        text: message, // Added text property to match the expected type
+        message: message,
+        senderId: userId,
+        status: 'sending' as MessageStatus,
+        createdAt: new Date().toISOString(),
+        media: attachmentsRef.current.map(att => ({
+          type: att.type,
+          url: att.previewUrl,
+          name: att.file.name,
+          size: att.file.size,
+          uploadProgress: 0,
+          uploadError: "",
+        })),
+        isUploading: true,
+        isOptimistic: true
+      };
+
+      setMessages(prev => [...prev, optimisticMessage]);
+
       try {
-        console.log("📤 Sending message:", message);
+
+        const uploadedFiles = await Promise.all(
+          attachmentsRef.current.map(async (attachment,index) => {
+            try {
+              const result = await uploadToS3(attachment.file,(progress)=>{
+                setMessages(prev => prev.map(msg =>{
+                  if(msg._id === tempId){
+                    const updatedMedia = [...msg.media!];
+                    updatedMedia[index] = {
+                      ...updatedMedia[index],
+                      uploadProgress: progress
+                    };
+                    return {
+                      ...msg,
+                      media: updatedMedia
+                    };
+                  }
+                  return msg;
+                }))
+              });
+              console.log("Uploaded file:", result);
+              return result;
+              // return {
+              //   type: attachment.type,
+              //   url: result.url,
+              //   name: result.name,
+              //   size: result.size
+              // };
+            } catch (error) {
+              console.error(`Error uploading file ${attachment.file.name}:`, error);
+              setMessages(prev => prev.map(msg => {
+                if(msg._id === tempId){
+                  const updatedMedia = [...msg.media!];
+                  updatedMedia[index] = {
+                    ...updatedMedia[index],
+                    uploadError: "Upload failed"
+                  };
+                  return {
+                    ...msg,
+                    media: updatedMedia
+                  };
+                }
+                return msg;
+              }))
+              return null;
+            }
+          })
+        );
+  
+   
+        const successfulUploads = uploadedFiles.filter(file => file !== null);
+
+        console.log("📤 Sending message:", successfulUploads);
         mutation.mutate({
           chatId: selectedConversation?.participantDetails._id,
           senderId: userId,
           message,
+          attachments: successfulUploads,
         }, {
           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,
+              attachments: successfulUploads,
               senderId: userId,
               receiverId: selectedConversation?.participantDetails._id,
             });
+            setMessages(prev => {
+              console.log("Removing optimistic message:", prev);
+              
+              // Definitely remove the optimistic message
+              const filtered = prev.filter(msg => msg._id !== tempMessageId);
+              // Add the real message from server
+              console.log("Adding real message:", filtered);
+              
+              return [...filtered, {
+                ...data[1],
+              isUploading: false,
+              isOptimistic: false}
+            ];
+            });
           },
           onError: (error) => {
             console.error("❌ Error in sending message:", error);
+            setMessages(prev => prev.map(msg => 
+              msg._id === tempId ? { ...msg, status: 'failed' } : msg
+            ));
           },
         });
 
       } catch (error) {
         console.error("❌ Error sending message:", error);
+        setMessages(prev => prev.map(msg => 
+          msg._id === tempId ? { ...msg, status: 'failed' } : msg
+        ));
       } finally {
         setIsSending(false);
         setMessage("");
+        setAttachments([]);
+        setTempMessageId(null);
       }
     },
     [message, selectedConversation, userId, isSending]
   );
 
+  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 '*';
+    }
+  };
+
+
+  useEffect(() => {
+    attachmentsRef.current = attachments;
+  }, [attachments]);
+
+  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);
+
+      if (!fileType) {
+        console.error(`Unsupported file type: ${file.type}`);
+        continue;
+      }
+
+      if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
+        console.error(`File too large: ${file.name}`);
+        continue;
+      }
+
+    
+      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 (
+    <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 className="chatMessageInputform" onSubmit={handleSubmit}>
       <div className="chatMessageInputdiv">
+        {/* Hidden file input */}
         <input
-          type="text"
+          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>
+
+        <textarea
           className="chatMessageInput"
           placeholder="Send a message"
           value={message}
-          onChange={(e) => setMessage(e.target.value)} // Update message state as the user types
+          onChange={(e) => {
+            setMessage(e.target.value)
+            autoResizeTextarea(e.target)
+          }}
+          rows={1}
+          style={{ resize: "none" }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault()
+              handleSubmit(e)
+            }
+          }}
         />
-        <button type="submit" className="chatMessageInputSubmit">
+        <button type="submit" className="chatMessageInputSubmit" disabled={isSending}>
           <img width={10} height={10} src={paperplane} alt="send" />
-          {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
         </button>
       </div>
 
@@ -136,8 +504,8 @@ const MessageInput = () => {
           </div>
         </div>
       )}
-
     </form>
+  </div>
   );
 };
 

package/src/components/messages/Messages.tsx

@@ -51,7 +51,22 @@ const Messages = () => {
     const handleNewMessage = (newMessage: any) => {
       newMessage.shouldShake = true;
       console.log("📩 New message received:", newMessage);
-      setMessages((prevMessages) => [...prevMessages, newMessage[1]]);
+      // setMessages((prevMessages) => [...prevMessages, newMessage[1]]);
+      setMessages(prevMessages => {
+       console.log("prevMessages", prevMessages);
+       
+        const isDuplicate = prevMessages.some(msg => 
+          msg._id === newMessage[1]._id || 
+          (msg.isOptimistic && msg.senderId === userId && msg.message === newMessage[1].message)
+        );
+        console.log('isDuplicate', isDuplicate);
+        
+        if (isDuplicate) {
+          return prevMessages;
+        }
+        
+        return [...prevMessages, newMessage[1]];
+      });
     };
 
     // const handleNewMessage = (newMessage: any) => {
@@ -72,7 +87,7 @@ const Messages = () => {
       status: string;
     }) => {
       setMessages((prev) =>
-        prev.map((msg) => (msg.id === messageId ? { ...msg, status } : msg))
+        prev.map((msg) => (msg._id === messageId ? { ...msg, status } : msg))
       );
     };
 

package/src/components/sidebar/Conversation.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 // import { useSocketContext } from "../../context/SocketContext";
 // import useConversation from "../../zustand/useConversation";
 
@@ -76,7 +77,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/Conversations.tsx

@@ -12,7 +12,29 @@ const Conversations = () => {
   // const { loading, conversations } = useGetConversations();
   return (
     <div className="chatSidebarConversations">
-      <h2 className="text-lg font-semibold text-gray-700">All Chats</h2>
+      <h2 className="text-lg font-semibold text-gray-700">All Messages</h2>
+      {(!conversations || conversations.length === 0) && (
+         <div className="flex flex-col items-center justify-center p-8 text-center">
+         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 mb-4">
+           <svg
+             xmlns="http://www.w3.org/2000/svg"
+             width="32"
+             height="32"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             strokeWidth="2"
+             strokeLinecap="round"
+             strokeLinejoin="round"
+             className="text-gray-500"
+           >
+             <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+           </svg>
+         </div>
+         <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
+         <p className="text-gray-500 text-sm mb-4">There are no conversations under &quot;All messages&quot;</p>
+       </div>
+  )}
       {conversations?.map((conversation: any, idx: any) => (
         <Conversation
           key={conversation._id}
@@ -21,9 +43,11 @@ const Conversations = () => {
         />
       ))}
 
+      
+
       {/* {loading ? <span className='loading loading-spinner mx-auto'></span> : null} */}
     </div>
   );
 };
 
-export default Conversations;
+export default Conversations;

package/src/components/sidebar/SearchInput.tsx

@@ -22,12 +22,20 @@ const {userId} =useChatContext()
 			return 
 		}
 
-		const conversation = data?.find((c: { _id: string; participantDetails: { username: string } }) => 
+		const conversation = data?.find((c: { _id: string; participantDetails: { username: string; firstname?: string; idpic?: string } }) => 
 			c.participantDetails.username.toLowerCase().includes(search.toLowerCase())
 		);
 
 		if (conversation) {
-			setSelectedConversation(conversation);
+			const updatedConversation = {
+				...conversation,
+				participantDetails: {
+					...conversation.participantDetails,
+					firstname: conversation.participantDetails.username || "Unknown",
+					idpic: conversation.participantDetails.profilePic || "default-idpic.png",
+				},
+			};
+			setSelectedConversation(updatedConversation);
 			setSearch("");
 		} 
         console.error("No such user found!");

package/src/components/sidebar/Sidebar.tsx

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

package/src/service/messageService.ts

@@ -1,11 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { FileType } from "../components/common/FilePreview";
 import { getApiClient } from "../lib/api/apiClient";
 import { Path } from "../lib/api/endpoint";
 
-export const sendMessage = async ({ chatId,senderId, message }: { chatId: any; senderId:any; message: string }) => {
+export const sendMessage = async ({ chatId,senderId, message,attachments }: { chatId: any; senderId:any; message: string,attachments: { type: FileType; url: string; name: string; size: number; }[] }) => {
     const apiClient = getApiClient();
+    console.log("sendMessage", chatId, senderId, message, attachments); // Log the parameters
+    
     const response = await apiClient.post(`${Path.sendmessage}/${chatId}/${senderId}`, {
-        message:message
+        message:message,
+        attachments:attachments
     })
     return response.data;
 };

package/src/stores/Zustant.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { FileType } from "../components/common/FilePreview";
 import { create } from "zustand";
 
 interface ChatUIState {
@@ -16,7 +17,23 @@ interface ChatUIState {
   setSelectedConversation: (
     selectedConversation: ChatUIState["selectedConversation"]
   ) => void;
-  messages: { id: string; text: string; sender: string; status: string }[];
+  messages: { 
+    _id: string; 
+    text: string; 
+    senderId: string; 
+    status: string ;
+     isOptimistic:boolean;
+      message:string;
+      createdAt: string;
+      media: {
+          type: FileType;
+          url: string;
+          name: string;
+          size: number;
+          uploadProgress: number;
+          uploadError:string
+      }[];
+      isUploading: boolean;}[];
   setMessages: (messages: ChatUIState["messages"] | ((prev: ChatUIState["messages"]) => ChatUIState["messages"])) => void;
   updateMessageStatus: (messageId: string, status: string) => void;
   toggleChat: () => void;
@@ -38,7 +55,7 @@ const useChatUIStore = create<ChatUIState>((set) => ({
   updateMessageStatus: (messageId, status) =>
     set((state) => ({
       messages: state.messages.map((msg) =>
-        msg.id === messageId ? { ...msg, status } : msg
+        msg._id === messageId ? { ...msg, status } : msg
       ),
     })),
   setSelectedConversation: (selectedConversation) => set({ selectedConversation }),