@pubuduth-aplicy/chat-ui 2.1.67 → 2.1.69

package/src/components/messages/MessageInput.tsx

@@ -1,20 +1,31 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 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";
 import { Path } from "../../lib/api/endpoint";
-const MAX_FILE_SIZE_MB = 5; // 5MB max file size
+
+const MAX_FILE_SIZE_MB = 5;
 const MAX_FILE_COUNT = 5;
-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'];
+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;
@@ -26,15 +37,13 @@ interface Attachment {
 
 const MessageInput = () => {
   const apiClient = getApiClient();
-  const { socket } = useChatContext();
-  const { userId } = useChatContext();
+  const { socket, sendMessage, userId } = useChatContext();
   const { selectedConversation, setMessages } = useChatUIStore();
   const [message, setMessage] = useState("");
   const [message1, setMessage1] = 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);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
@@ -43,63 +52,101 @@ const MessageInput = () => {
   const [tempMessageId, setTempMessageId] = useState<string | null>(null);
   const [inputError, setInputError] = useState<string | null>(null);
   const attachmentsContainerRef = useRef<HTMLDivElement>(null);
-  const generateTempId = () => `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-  // Function to auto-resize the textarea
-  // const autoResizeTextarea = (element: HTMLTextAreaElement) => {
-  //   element.style.height = "auto"
-  //   element.style.height = Math.min(150, element.scrollHeight) + "px"
-  // }
+  const typingTimeoutRef = useRef<number | null>(null);
+  const generateTempId = () =>
+    `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
+  // Join chat room when conversation is selected
   useEffect(() => {
-    if (selectedConversation?._id) {
-      socket.emit("joinChat", selectedConversation._id);
+    if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
+      sendMessage({
+        event: "joinChat",
+        data: {
+          chatId: selectedConversation._id,
+        },
+      });
     }
-  }, [selectedConversation, socket]);
+  }, [selectedConversation?._id, socket, sendMessage]);
 
+  // Typing indicator logic
   useEffect(() => {
-    if (!socket) return;
+    if (!socket || !selectedConversation?._id) return;
 
     if (message.trim() !== "") {
       setIsTyping(true);
-      socket.emit("typing", { chatId: selectedConversation?._id, userId });
+      sendMessage({
+        event: "typing",
+        data: {
+          chatId: selectedConversation._id,
+          userId,
+        },
+      });
     }
 
-    const typingTimeout = setTimeout(() => {
+    typingTimeoutRef.current = setTimeout(() => {
       if (message.trim() === "") {
         setIsTyping(false);
-        socket.emit("stopTyping", {
-          chatId: selectedConversation?._id,
-          userId,
+        sendMessage({
+          event: "stopTyping",
+          data: {
+            chatId: selectedConversation._id,
+            userId,
+          },
         });
       }
     }, 200);
 
-    return () => clearTimeout(typingTimeout);
-  }, [message, socket, selectedConversation?._id, userId]);
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, [message, socket, selectedConversation?._id, userId, sendMessage]);
+
+  // Listen for typing indicators from others
+  useEffect(() => {
+    if (!socket || !selectedConversation?._id) return;
 
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log("Received WebSocket message:", data);
+        if (
+          data.event === "typing" &&
+          data.data.chatId === selectedConversation._id
+        ) {
+          console.log("Setting typing user:", data.data.userId);
+          setTypingUser(data.data.userId);
+        } else if (
+          data.event === "stopTyping" &&
+          data.data.chatId === selectedConversation._id
+        ) {
+          setTypingUser((prev) => (prev === data.data.userId ? null : prev));
+        }
+      } catch (error) {
+        console.error("Error parsing typing message:", error);
+      }
+    };
+
+    socket.addEventListener("message", handleMessage);
+    return () => {
+      socket.removeEventListener("message", handleMessage);
+    };
+  }, [socket, selectedConversation?._id]);
 
   const validateInput = (text: string) => {
-    // Check for email
     const emailRegex = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i;
     if (emailRegex.test(text)) {
       return "To protect your account, make sure not to share any personal or sensitive information.";
     }
 
-    // Check for phone number (very basic)
-    const phoneRegex = /(\+?\d{1,4}[\s-]?)?(\(?\d{3}\)?[\s-]?)?\d{3}[\s-]?\d{4}/;
+    const phoneRegex =
+      /(\+?\d{1,4}[\s-]?)?(\(?\d{3}\)?[\s-]?)?\d{3}[\s-]?\d{4}/;
     if (phoneRegex.test(text)) {
       return "To protect your account, make sure not to share any personal or sensitive information.";
     }
 
-    // // Check for bad words
-    // for (const word of badWords) {
-    //   if (text.toLowerCase().includes(word)) {
-    //     return "Inappropriate language is not allowed.";
-    //   }
-    // }
-
-    return null; // No errors
+    return null;
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -114,63 +161,29 @@ const MessageInput = () => {
       setInputError(null);
       setMessage(newValue);
       setMessage1(newValue);
-
     }
   };
 
-
-  useEffect(() => {
-    if (!socket || !selectedConversation?._id) return;
-
-    const handleTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
-      if (chatId === selectedConversation._id) {
-        setTypingUser(userId);
-      }
-    };
-
-    const handleStopTyping = ({ userId, chatId }: { userId: string; chatId: string }) => {
-      if (chatId === selectedConversation._id) {
-        setTypingUser((prev) => (prev === userId ? null : prev));
-      }
-    };
-
-    socket.on("typing", handleTyping);
-    socket.on("stopTyping", handleStopTyping);
-
-    return () => {
-      socket.off("typing", handleTyping);
-      socket.off("stopTyping", handleStopTyping);
-    };
-  }, [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, onProgress?: (progress: number) => void): Promise<{ url: string, name: string, size: number, type: FileType }> => {
+  const uploadToS3 = async (
+    file: File,
+    onProgress?: (progress: number) => void
+  ): Promise<{ url: string; name: string; size: number; type: FileType }> => {
     const response = await apiClient.post(`${Path.preSignUrl}`, {
       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);
+    xhr.open("PUT", signedUrl, true);
+    xhr.setRequestHeader("Content-Type", file.type);
 
     return new Promise((resolve, reject) => {
       xhr.upload.onprogress = (event) => {
@@ -189,30 +202,20 @@ const MessageInput = () => {
             type: getFileType(file.type),
           });
         } else {
-          reject(new Error('Upload failed'));
+          reject(new Error("Upload failed"));
         }
       };
 
-      xhr.onerror = () => 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) => {
+    async (e: React.FormEvent) => {
       e.preventDefault();
-      if (!message && attachmentsRef.current.length === 0 || isSending) return;
+      if ((!message && attachmentsRef.current.length === 0) || isSending)
+        return;
       setIsSending(true);
       setAttachments([]);
       setMessage("");
@@ -221,12 +224,12 @@ const MessageInput = () => {
 
       const optimisticMessage = {
         _id: tempId,
-        text: message1, // Added text property to match the expected type
+        text: message1,
         message: message1,
         senderId: userId,
-        status: 'sending' as MessageStatus,
+        status: "sending" as MessageStatus,
         createdAt: new Date().toISOString(),
-        media: attachmentsRef.current.map(att => ({
+        media: attachmentsRef.current.map((att) => ({
           type: att.type,
           url: att.previewUrl,
           name: att.file.name,
@@ -235,111 +238,117 @@ const MessageInput = () => {
           uploadError: "",
         })),
         isUploading: true,
-        isOptimistic: true
+        isOptimistic: true,
       };
 
-      setMessages(prev => [...prev, optimisticMessage]);
+      setMessages((prev) => [...prev, optimisticMessage]);
 
       try {
-
         const uploadedFiles = await Promise.all(
           attachmentsRef.current.map(async (attachment, index) => {
             try {
               const result = await uploadToS3(attachment.file, (progress) => {
-                setMessages(prev => prev.map(msg => {
+                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;
+                  })
+                );
+              });
+              return result;
+            } 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],
-                      uploadProgress: progress
+                      uploadError: "Upload failed",
                     };
                     return {
                       ...msg,
-                      media: updatedMedia
+                      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);
 
-        const successfulUploads = uploadedFiles.filter(file => file !== null);
-
-        console.log("📤 Sending message:", successfulUploads);
-        mutation.mutate({
-          chatId: selectedConversation?.participantDetails._id,
-          senderId: userId,
-          message: message1,
-          attachments: successfulUploads,
-        }, {
-          onSuccess: (data) => {
-            console.log('Response from sendMessage:', data);
-            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
-              }
-              ];
-            });
-            socket.emit("sendMessage", {
-              chatId: selectedConversation?._id,
-              message: message1,
-              messageId: data[1]._id,
-              attachments: successfulUploads,
-              senderId: userId,
-              receiverId: selectedConversation?.participantDetails._id,
-            });
-
+        mutation.mutate(
+          {
+            chatId:
+              !Array.isArray(selectedConversation?.participantDetails) &&
+              selectedConversation?.participantDetails._id,
+            senderId: userId,
+            message: message1,
+            attachments: successfulUploads,
           },
-          onError: (error) => {
-            console.error("❌ Error in sending message:", error);
-            setMessages(prev => prev.map(msg =>
-              msg._id === tempId ? { ...msg, status: 'failed' } : msg
-            ));
-          },
-        });
+          {
+            onSuccess: (data) => {
+              setMessages((prev) => {
+                const filtered = prev.filter(
+                  (msg) => msg._id !== tempMessageId
+                );
+                return [
+                  ...filtered,
+                  {
+                    ...data[1],
+                    isUploading: false,
+                    isOptimistic: false,
+                  },
+                ];
+              });
 
+              // Send message via WebSocket
+              sendMessage({
+                type: "sendMessage",
+                chatId: selectedConversation?._id,
+                message: message1,
+                messageId: data[1]._id,
+                attachments: successfulUploads,
+                senderId: userId,
+                receiverId:
+                  !Array.isArray(selectedConversation?.participantDetails) &&
+                  selectedConversation?.participantDetails._id,
+              });
+            },
+            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
-        ));
+        console.error("Error sending message:", error);
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg._id === tempId ? { ...msg, status: "failed" } : msg
+          )
+        );
       } finally {
         setIsSending(false);
         setMessage1("");
@@ -347,17 +356,33 @@ const MessageInput = () => {
         setTempMessageId(null);
       }
     },
-    [message, selectedConversation, userId, isSending]
+    [
+      message,
+      message1,
+      selectedConversation,
+      userId,
+      isSending,
+      mutation,
+      setMessages,
+      sendMessage,
+    ]
   );
 
+  // Clean up object URLs when component unmounts
   useEffect(() => {
     return () => {
-      attachments.forEach(attachment => {
+      attachments.forEach((attachment) => {
         URL.revokeObjectURL(attachment.previewUrl);
       });
     };
   }, [attachments]);
 
+  // Update attachments ref
+  useEffect(() => {
+    attachmentsRef.current = attachments;
+  }, [attachments]);
+
+  // File attachment handlers
   const handleAttachmentClick = () => {
     setShowAttachmentOptions(!showAttachmentOptions);
   };
@@ -372,38 +397,39 @@ 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;
 
-    // Check if adding these files would exceed the maximum count
     if (attachments.length + files.length > MAX_FILE_COUNT) {
       alert(`You can only attach up to ${MAX_FILE_COUNT} files`);
       return;
     }
 
-    // Calculate total size of new files
-    const newFilesSize = Array.from(files).reduce((total, file) => total + file.size, 0);
-    const currentAttachmentsSize = attachments.reduce((total, att) => total + att.file.size, 0);
+    const newFilesSize = Array.from(files).reduce(
+      (total, file) => total + file.size,
+      0
+    );
+    const currentAttachmentsSize = attachments.reduce(
+      (total, att) => total + att.file.size,
+      0
+    );
 
-    // Check if total size would exceed the limit
-    if (currentAttachmentsSize + newFilesSize > MAX_FILE_SIZE_MB * 1024 * 1024) {
+    if (
+      currentAttachmentsSize + newFilesSize >
+      MAX_FILE_SIZE_MB * 1024 * 1024
+    ) {
       alert(`Total file size cannot exceed ${MAX_FILE_SIZE_MB}MB`);
       return;
     }
@@ -424,35 +450,36 @@ const MessageInput = () => {
         continue;
       }
 
-      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" }))
+          : 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 scrollAttachments = (direction: 'left' | 'right') => {
+  const scrollAttachments = (direction: "left" | "right") => {
     if (attachmentsContainerRef.current) {
-      const scrollAmount = direction === 'right' ? 200 : -200;
+      const scrollAmount = direction === "right" ? 200 : -200;
       attachmentsContainerRef.current.scrollBy({
         left: scrollAmount,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }
   };
 
   const removeAttachment = (index: number) => {
-    setAttachments(prev => {
+    setAttachments((prev) => {
       const newAttachments = [...prev];
       URL.revokeObjectURL(newAttachments[index].previewUrl);
       newAttachments.splice(index, 1);
@@ -462,12 +489,11 @@ const MessageInput = () => {
 
   return (
     <div className="message-input-container">
-      {/* Preview area for attachments */}
       {attachments.length > 0 && (
         <div className="attachments-preview-container">
           <button
             className="scroll-button left"
-            onClick={() => scrollAttachments('left')}
+            onClick={() => scrollAttachments("left")}
             disabled={attachments.length <= 3}
           >
             &lt;
@@ -485,7 +511,10 @@ const MessageInput = () => {
             ))}
 
             {attachments.length < MAX_FILE_COUNT && (
-              <div className="add-more-files" onClick={() => fileInputRef.current?.click()}>
+              <div
+                className="add-more-files"
+                onClick={() => fileInputRef.current?.click()}
+              >
                 <div className="plus-icon">+</div>
                 <div className="add-more-text">Add more</div>
               </div>
@@ -494,7 +523,7 @@ const MessageInput = () => {
 
           <button
             className="scroll-button right"
-            onClick={() => scrollAttachments('right')}
+            onClick={() => scrollAttachments("right")}
             disabled={attachments.length <= 3}
           >
             &gt;
@@ -503,33 +532,46 @@ const MessageInput = () => {
       )}
 
       <form className="chatMessageInputform" onSubmit={handleSubmit}>
-        {inputError && <p style={{ color: 'red', fontSize: '12px' }}>{inputError}</p>}
+        {inputError && (
+          <p style={{ color: "red", fontSize: "12px" }}>{inputError}</p>
+        )}
 
         <div className="chatMessageInputdiv">
-          {/* Hidden file input */}
           <input
             type="file"
             ref={fileInputRef}
-            style={{ display: 'none' }}
+            style={{ display: "none" }}
             onChange={handleFileChange}
             multiple
           />
 
-          {/* Attachment button and options */}
-          <div className="attachment-container" style={{ position: 'relative' }}>
+          <div
+            className="attachment-container"
+            style={{ position: "relative" }}
+          >
             <button
               type="button"
               className="attachment-button"
               onClick={handleAttachmentClick}
               style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                padding: '8px',
+                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">
+                <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>
@@ -537,13 +579,27 @@ const MessageInput = () => {
 
             {showAttachmentOptions && (
               <div className="attachment-options">
-                <button
-                  type="button"
-                  onClick={() => handleFileSelect('image')}
-                >
+                <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>
+                    <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>
@@ -552,10 +608,20 @@ const MessageInput = () => {
                 </button>
                 <button
                   type="button"
-                  onClick={() => handleFileSelect('document')}
+                  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">
+                    <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>
@@ -573,36 +639,55 @@ const MessageInput = () => {
             className="chatMessageInput"
             placeholder="Send a message"
             value={message}
-            // onChange={(e) => {
-            //   setMessage(e.target.value)
-            //   autoResizeTextarea(e.target)
-            // }}
             onChange={handleChange}
             rows={1}
             style={{ resize: "none" }}
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault()
-                handleSubmit(e)
+                e.preventDefault();
+                handleSubmit(e);
               }
             }}
           />
 
-          <button type="submit" className="chatMessageInputSubmit" disabled={!!inputError || isSending}>
-            <img width={10} height={10} src={paperplane} alt="send" />
+          <button
+            type="submit"
+            className="chatMessageInputSubmit"
+            disabled={!!inputError || isSending}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#ffffff"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="22" y1="2" x2="11" y2="13"></line>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
           </button>
         </div>
 
-        {typingUser && typingUser !== userId && typingUser === selectedConversation?.participantDetails?._id && !isSending && (
-          <div className="typingIndicator">
-            <div className="typing-loader">
-              <div className="ball" />
-              <div className="ball" />
-              <div className="ball" />
-              typing
+        {typingUser &&
+          typingUser !== userId &&
+          typingUser ===
+            (!Array.isArray(selectedConversation?.participantDetails) &&
+              selectedConversation?.participantDetails?._id) &&
+          !isSending && (
+            <div className="typingIndicator">
+              <div className="typing-loader">
+                <div className="ball" />
+                <div className="ball" />
+                <div className="ball" />
+                typing
+              </div>
             </div>
-          </div>
-        )}
+          )}
       </form>
     </div>
   );