@pubuduth-aplicy/chat-ui 2.1.51 → 2.1.52

package/package.json

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

@@ -1,77 +1,198 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 import { MessageStatus } from "../../types/type";
 import { useChatContext } from "../../providers/ChatProvider";
-import useChatUIStore from "../../stores/Zustant";
+// import { saveAs } from 'file-saver';
+import { useEffect, useState } from "react";
+import { FileType } from "../common/FilePreview";
 
-// import { useAuthContext } from "../../context/AuthContext";
-// import { extractTime } from "../../utils/extractTime";
-// import useConversation from "../../zustand/useConversation";
 interface MessageProps {
   message: {
+    _id?: string;
     senderId: string;
     message: string;
     status: MessageStatus;
-    createdAt:any;
+    createdAt: any;
+    media?: {
+      type: FileType;
+      url: string;
+      name: string;
+      size: number;
+      uploadProgress?: number;
+      uploadError: string | null;
+    }[];
+    isUploading?: boolean;
   };
 }
 
 const Message = ({ message }: MessageProps) => {
+  const { userId } = useChatContext();
+  const fromMe = message.senderId === userId;
+  const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
+  const alignItems = fromMe ? "outgoing" : "incoming";
+  const [localStatus, setLocalStatus] = useState(message.status);
+  const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
 
-    const { userId } = useChatContext();
-	const fromMe = message.senderId === userId;
-	const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
-	const alignItems = fromMe ? "outgoing" : "incoming";
+  useEffect(() => {
+    setLocalStatus(message.status);
+  }, [message.status]);
 
-const date = new Date(message.createdAt);
-const hours = date.getUTCHours();
-const minutes = date.getUTCMinutes();
-const seconds = date.getUTCSeconds();
+  // const handleDownload = (url: string, name: string) => {
+  //   saveAs(url, name);
+  // };
 
-// Format the time as HH:mm:ss (24-hour format)
-const time = `${hours}.${minutes}`;
+  const getStatusIcon = () => {
+    if (!fromMe) return null;
+    
+    if (message.isUploading || message.status === 'sending') {
+      return <span className="message-status uploading">🔄</span>;
+    }
+    
+    if (message.status === 'failed') {
+      return <span className="message-status failed">❌</span>;
+    }
+    
+    switch (localStatus) {
+      case 'sending':
+        return <span className="message-status sending">🔄</span>;
+      case 'sent':
+        return <span className="message-status sent">✓</span>;
+      case 'delivered':
+        return <span className="message-status delivered">✓✓</span>;
+      case 'read':
+        return <span className="message-status read">✓✓</span>;
+      default:
+        return null;
+    }
+  };
 
-const getStatusIcon = () => {
-  if (!fromMe) return null;
-  
-  switch (message.status) {
-    case 'sent':
-      return <span className="message-status sent">✓</span>;
-    case 'delivered':
-      return <span className="message-status delivered">✓✓</span>;
-    case 'read':
-      return <span className="message-status read">✓✓ (blue)</span>;
-    default:
-      return null;
-  }
-};
+  const handleDownload = async (url: string, name: string, index: number) => {
+    setDownloadingIndex(index);
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = name;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    } catch (error) {
+      console.error("Download failed:", error);
+    } finally {
+      setDownloadingIndex(null);
+    }
+  };
 
-  return (
-    <>
-     {/* <div className="w-max grid">
-  <div className="px-3.5 py-2 bg-gray-100 rounded-3xl rounded-tl-none justify-start  items-center gap-3 inline-flex">
-    <h5 className="text-gray-900 text-sm font-normal leading-snug">{message.message}</h5>
-  </div>
-  <div className="justify-end items-center inline-flex mb-2.5">
-    <h6 className="text-gray-500 text-xs font-normal leading-4 py-1">05:14 PM</h6>
-  </div>
-</div> */}
+  const renderMedia = () => {
+    if (!message.media || message.media.length === 0) return null;
+
+    return (
+      <div className={`media-grid ${message.media.length > 1 ? 'multi-media' : 'single-media'}`}>
+           {message.media.map((media, index) => (
+        <div key={index} className="media-item">
+          
+          {/* Progress indicator */}
+          {(media.uploadProgress !== undefined && media.uploadProgress < 100) && (
+            <div className="circular-progress-container">
+               <div className="media-preview-background">
+              <img 
+                src={media.url} 
+                alt={media.name} 
+                className="blurred-preview"
+              />
+            </div>
+              <div className="circular-progress">
+                <svg className="circular-progress-svg" viewBox="0 0 36 36">
+                  <path
+                    className="circular-progress-track"
+                    d="M18 2.0845
+                      a 15.9155 15.9155 0 0 1 0 31.831
+                      a 15.9155 15.9155 0 0 1 0 -31.831"
+                  />
+                  <path
+                    className="circular-progress-bar"
+                    strokeDasharray={`${media.uploadProgress}, 100`}
+                    d="M18 2.0845
+                      a 15.9155 15.9155 0 0 1 0 31.831
+                      a 15.9155 15.9155 0 0 1 0 -31.831"
+                  />
+                </svg>
+                <span className="circular-progress-text">
+                  {media.uploadProgress}%
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Error state */}
+          {media.uploadError && (
+            <div className="upload-error">
+              <span>⚠️ Upload failed</span>
+            </div>
+          )}
 
-<div className="chat-container">
-  <div className={`message-row ${alignItems}`}>
-    <div className="bubble-container">
-      <div className="chat-bubble">{message.message}</div>
-      <div className={`${timestamp}`}>{new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-      <span className="status-icon">{getStatusIcon()}</span>
+          {/* Actual media (shown when upload complete) */}
+          {(!media.uploadProgress || media.uploadProgress >= 100) && !media.uploadError && (
+            <>
+              {media.type === 'image' ? (
+                <img 
+                  src={media.url} 
+                  alt={media.name} 
+                  className="media-content"
+                  onClick={() => window.open(media.url, '_blank')}
+                />
+              ) : media.type === 'video' ? (
+                <video controls className="media-content">
+                  <source src={media.url} type={`video/${media.url.split('.').pop()}`} />
+                </video>
+              ) : (
+                <div className="document-preview">
+                  <div className="file-icon">
+                  {media.type === 'document' && '📄'}
+                  </div>
+                  <div className="file-info">
+                    <span className="file-name">{media.name}</span>
+                    <span className="file-size">{(media.size / 1024).toFixed(1)} KB</span>
+                  </div>
+              
+                </div>
+              )}
+                <button 
+              className="download-btn"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDownload(media.url, media.name, index);
+              }}
+              title="Download"
+              disabled={downloadingIndex === index}
+            >
+              {downloadingIndex === index ? <span className="loader" /> : '⬇️'}
+            </button>
+            </>
+          )}
+        </div>
+      ))}
       </div>
+    );
+  };
+
+  return (
+   <div className="chat-container">
+      <div className={`message-row ${alignItems}`}>
+        <div className="bubble-container">
+          {(message.message || (message.media && message.media.length > 0)) && (
+            <div className="chat-bubble compact-bubble">
+              {renderMedia()}
+              {message.message && <div className="message-text">{message.message}</div>}
+            </div>
+          )}
+          <div className={`${timestamp}`}>
+            {new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+            <span className="status-icon">{getStatusIcon()}</span>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-
-
- </>
-  )
-}
+  );
+};
 
-export default Message
+export default Message;

package/src/components/messages/MessageContainer.tsx

@@ -46,7 +46,7 @@ const MessageContainer = () => {
         <div className='chatMessageContainer'>
             
             {!selectedConversation ? (
-                <NoChatSelected />
+                <EmptyInbox />
             ) : (
                 <>
                     <div className="chatMessageContainerInner">
@@ -97,16 +97,86 @@ const MessageContainer = () => {
 
 export default MessageContainer;
 
-const NoChatSelected = () => {
-    // const { authUser } = useAuthContext();
-
+interface EmptyInboxProps {
+    title?: string;
+    description?: string;
+  }
+  
+  const EmptyInbox: React.FC<EmptyInboxProps> = ({
+    title = "Ah, a fresh new inbox",
+    description = "You haven't started any conversations yet, but when you do, you'll find them here.",
+  }) => {
     return (
-        <div className='chatMessageContainerNoChat'>
-            <div className='chatMessageContainerNoChat_div'>
-                <p>Welcome   </p> {/* Safely access username */}
-                <p>Select a chat to start messaging</p>
-                {/* <Chat className='text-3xl md:text-6xl text-center' /> */}
-            </div>
+      <div className="flex flex-col items-center justify-center h-full p-6 text-center">
+        <div className="w-48 h-48 mb-6 relative">
+          <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-full h-full"
+          >
+            <line x1="100" y1="100" x2="100" y2="160" stroke="black" strokeWidth="2" />
+            <line x1="40" y1="160" x2="160" y2="160" stroke="black" strokeWidth="1" />
+            <path
+              d="M70 160C75 150 80 155 85 160"
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+            />
+            <path
+              d="M115 160C120 150 125 155 130 160"
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+            />
+            <rect
+              x="70"
+              y="80"
+              width="60"
+              height="30"
+              stroke="black"
+              strokeWidth="1"
+              fill="white"
+            />
+            <path
+              d="M70 80C70 65 130 65 130 80"
+              stroke="black"
+              strokeWidth="1"
+              fill="none"
+            />
+            <rect
+              x="70"
+              y="80"
+              width="60"
+              height="20"
+              stroke="black"
+              strokeWidth="1"
+              fill="white"
+            />
+            <path d="M120 90H125V95H120V90Z" fill="#10B981" />
+            <path
+              d="M120 90H125V95H120V90Z"
+              stroke="black"
+              strokeWidth="0.5"
+            />
+            <path d="M125 92L130 87" stroke="#10B981" strokeWidth="1" />
+            <path d="M125 92L130 97" stroke="#10B981" strokeWidth="1" />
+            <path
+              d="M130 60C140 55 150 65 140 70"
+              stroke="black"
+              strokeWidth="1"
+              strokeDasharray="2"
+              fill="none"
+            />
+            <text x="140" y="60" fontSize="12" fill="black">
+              ✉
+            </text>
+            <circle cx="85" cy="175" r="5" fill="#10B981" />
+            <circle cx="115" cy="175" r="5" fill="#10B981" />
+          </svg>
         </div>
+        <h3 className="text-xl font-medium text-gray-800 mb-2">{title}</h3>
+        <p className="text-gray-500 max-w-sm">{description}</p>
+      </div>
     );
-};
+  };

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>
   );
 };
 

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";
 

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!");
@@ -50,6 +58,10 @@ const {userId} =useChatContext()
 	</div>
 	</form>
 	</>
+
+
+
+
   )
 }
 

package/src/components/sidebar/Sidebar.tsx

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

package/src/types/type.ts

@@ -69,4 +69,4 @@ export interface ConversationProps {
   lastIdx: boolean;
 }
 
-export type MessageStatus = 'sent' | 'delivered' | 'read';
+export type MessageStatus = 'sent' | 'delivered' | 'read' | 'sending' | 'failed';