@pubuduth-aplicy/chat-ui 2.1.51 → 2.1.53

package/src/components/messages/MessageInput.tsx

@@ -8,20 +8,11 @@ import paperplane from "../../assets/icons8-send-50.png";
 // 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",
-];
+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;
@@ -35,15 +26,26 @@ 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) {
@@ -72,28 +74,17 @@ 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));
       }
@@ -109,114 +100,213 @@ 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";
+    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,
-      },
+  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),
-    };
+  
+    // 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 {
+
         const uploadedFiles = await Promise.all(
-          attachments.map(async (attachment) => {
+          attachmentsRef.current.map(async (attachment,index) => {
             try {
-              const result = await uploadToS3(attachment.file);
-              return {
-                type: attachment.type,
-                url: result.url,
-                name: result.name,
-                size: result.size,
-              };
+              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
-              );
+              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;
             }
           })
         );
-
-        // 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,
+  
+   
+        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);
+
+            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}
+            ];
+            });
           },
-          {
-            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);
-            },
-          }
-        );
+          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]
   );
 
-  const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
   useEffect(() => {
     return () => {
-      attachments.forEach((attachment) => {
+      attachments.forEach(attachment => {
         URL.revokeObjectURL(attachment.previewUrl);
       });
     };
@@ -236,17 +326,22 @@ const MessageInput = () => {
 
   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(",");
+      case 'image':
+        return ACCEPTED_IMAGE_TYPES.join(',');
+      case 'video':
+        return ACCEPTED_VIDEO_TYPES.join(',');
+      case 'document':
+        return ACCEPTED_DOCUMENT_TYPES.join(',');
       default:
-        return "*";
+        return '*';
     }
   };
 
+
+  useEffect(() => {
+    attachmentsRef.current = attachments;
+  }, [attachments]);
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
@@ -257,39 +352,37 @@ const MessageInput = () => {
       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);
+    
+      const previewUrl = fileType === 'document' 
+        ? URL.createObjectURL(new Blob([''], { type: 'application/pdf' })) // Placeholder for documents
+        : URL.createObjectURL(file);
 
       newAttachments.push({
         file,
         type: fileType,
-        previewUrl,
+        previewUrl
       });
     }
 
-    setAttachments((prev) => [...prev, ...newAttachments]);
+    setAttachments(prev => [...prev, ...newAttachments]);
     if (fileInputRef.current) {
-      fileInputRef.current.value = "";
+      fileInputRef.current.value = '';
     }
   };
+  
 
   const removeAttachment = (index: number) => {
-    setAttachments((prev) => {
+    setAttachments(prev => {
       const newAttachments = [...prev];
       URL.revokeObjectURL(newAttachments[index].previewUrl);
       newAttachments.splice(index, 1);
@@ -299,154 +392,120 @@ const MessageInput = () => {
 
   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="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)}
+    {/* 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="file"
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          onChange={handleFileChange}
+          multiple
+        />
+
+        {/* Attachment button and options */}
+        <div className="attachment-container" style={{ position: 'relative' }}>
           <button
-            type="submit"
-            className="chatMessageInputSubmit"
-            disabled={isSending}
+            type="button"
+            className="attachment-button"
+            onClick={handleAttachmentClick}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '8px',
+            }}
           >
-            <img width={10} height={10} src={paperplane} alt="send" />
+            <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>
-        </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>
+          {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>
           )}
-      </form>
-    </div>
+        </div>
+
+        <textarea
+          className="chatMessageInput"
+          placeholder="Send a message"
+          value={message}
+          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" 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>
   );
 };