@pubuduth-aplicy/chat-ui 2.1.56 → 2.1.58

package/src/components/messages/MessageContainer.tsx

@@ -7,69 +7,78 @@ import { useChatContext } from "../../providers/ChatProvider";
 // import { Chat, CaretLeft } from "@phosphor-icons/react";
 // import { useAuthContext } from "../../context/AuthContext";
 
-
 const MessageContainer = () => {
-    const { selectedConversation, setSelectedConversation ,onlineUsers, setOnlineUsers } = useChatUIStore();
-    const {socket} = useChatContext();
+  const {
+    selectedConversation,
+    setSelectedConversation,
+    onlineUsers,
+    setOnlineUsers,
+  } = useChatUIStore();
+  const { socket } = useChatContext();
 
-    useEffect(() => {
-        if (selectedConversation?._id && socket) {
-          socket.emit("joinChat", selectedConversation._id); // Join chat room
-        }
-      }, [selectedConversation?._id, socket]);
-      
+  useEffect(() => {
+    if (selectedConversation?._id && socket) {
+      socket.emit("joinChat", selectedConversation._id); // Join chat room
+    }
+  }, [selectedConversation?._id, socket]);
 
-    useEffect(() => {
-        if (!socket) return;
+  useEffect(() => {
+    if (!socket) return;
 
-        const handleOnlineUsers = (users: string[]) => {
-            setOnlineUsers(users);
-        };
+    const handleOnlineUsers = (users: string[]) => {
+      setOnlineUsers(users);
+    };
 
-        socket.on("getOnlineUsers", handleOnlineUsers);
+    socket.on("getOnlineUsers", handleOnlineUsers);
 
-        return () => {
-            socket.off("getOnlineUsers", handleOnlineUsers);
-        };
-    }, [socket, setOnlineUsers]);
+    return () => {
+      socket.off("getOnlineUsers", handleOnlineUsers);
+    };
+  }, [socket, setOnlineUsers]);
 
-    const isUserOnline = selectedConversation?.participantDetails?._id &&
+  const isUserOnline =
+    selectedConversation?.participantDetails?._id &&
     onlineUsers?.includes(selectedConversation.participantDetails._id);
 
+  useEffect(() => {
+    // cleanup function (unmounts)
+    return () => setSelectedConversation(null);
+  }, [setSelectedConversation]);
 
-    useEffect(() => {
-        // cleanup function (unmounts)
-        return () => setSelectedConversation(null);
-    }, [setSelectedConversation]);
-
-    return (
-        <div className='chatMessageContainer'>
-            
-            {!selectedConversation ? (
-                <EmptyInbox />
-            ) : (
-                <>
-                    <div className="chatMessageContainerInner">
-                        <div className="chatMessageContainerInnerDiv">
-                            <button  className="chatMessageContainerInnerDiv_button">
-                                {/* <CaretLeft size={25} /> */}
-                            </button>
-                            <img className="chatMessageContainerInnerImg"  alt="Profile" src={selectedConversation.participantDetails.idpic}/>
-                            <div className="chatMessageContainerOutter">
-                                <div className="chatMessageContainerOutterDiv">
-                                    <p className="chatMessageContainerOutterDiv_name">
-                                        {selectedConversation.participantDetails.firstname}
-                                    </p>
-                                    <p className="text-sm text-[#12bbb5]">
-                                    {isUserOnline ? "Online" : "Offline"}
-                                    </p>
-                                </div>
-                            </div>
-                            {/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}
-                        </div>
-                    </div>
+  return (
+    <div className="chatMessageContainer">
+      {!selectedConversation ? (
+        <EmptyInbox />
+      ) : (
+        <>
+          <div className="chatMessageContainerInner">
+            <div className="chatMessageContainerInnerDiv">
+              <button className="chatMessageContainerInnerDiv_button">
+                {/* <CaretLeft size={25} /> */}
+              </button>
+              <img
+                className="chatMessageContainerInnerImg"
+                alt="Profile"
+                src={
+                  selectedConversation.participantDetails?.profilePic ||
+                  selectedConversation.participantDetails?.idpic
+                }
+              />
+              <div className="chatMessageContainerOutter">
+                <div className="chatMessageContainerOutterDiv">
+                  <p className="chatMessageContainerOutterDiv_name">
+                    {selectedConversation.participantDetails.firstname}
+                  </p>
+                  <p className="text-sm ">
+                    {isUserOnline ? "Online" : "Offline"}
+                  </p>
+                </div>
+              </div>
+              {/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}
+            </div>
+          </div>
 
-                    {/* <div className="h-14 overflow-x-hidden">
+          {/* <div className="h-14 overflow-x-hidden">
                         <div className="top-0 h-14 px-4 py-4 w-full border-b border-gray-300 justify-start items-start gap-2 inline-flex sticky  z-10">
                             <div className="grow shrink basis-0 self-stretch py-2 justify-start items-center gap-4 flex">
                                 <button onClick={() => setSelectedConversation(null)} className="text-blue-500 md:hidden">
@@ -87,96 +96,106 @@ const MessageContainer = () => {
                         </div>
                     </div> */}
 
-                    <Messages />
-                    <MessageInput />
-                </>
-            )}
-        </div>
-    );
-}
+          <Messages />
+          <MessageInput />
+        </>
+      )}
+    </div>
+  );
+};
 
 export default MessageContainer;
 
 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="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"
+  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="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"
-            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>
+          />
+          <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

@@ -9,7 +9,9 @@ import paperplane from "../../assets/icons8-send-50.png";
 import { FilePreview, FileType } from "../common/FilePreview";
 import { getApiClient } from "../../lib/api/apiClient";
 import { MessageStatus } from "../../types/type";
-const MAX_FILE_SIZE_MB = 25; // 10MB max file size
+import { Path } from "../../lib/api/endpoint";
+const MAX_FILE_SIZE_MB = 5; // 5MB max file size
+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'];
@@ -28,6 +30,7 @@ const MessageInput = () => {
   const { 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);
@@ -39,7 +42,7 @@ const MessageInput = () => {
   const attachmentsRef = useRef<Attachment[]>([]);
   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
@@ -108,6 +111,8 @@ const MessageInput = () => {
     } else {
       setInputError(null);
       setMessage(newValue);
+      setMessage1(newValue);
+      
     }
   };
   
@@ -144,7 +149,7 @@ const MessageInput = () => {
   };
 
   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', {
+    const response = await apiClient.post(`${Path.preSignUrl}`, {
         fileName: file.name,
         fileType: file.type,
       }
@@ -207,14 +212,15 @@ const MessageInput = () => {
       e.preventDefault();
       if (!message && attachmentsRef.current.length === 0 || isSending) return;
       setIsSending(true);
-
+      setAttachments([]);
+      setMessage("");
       const tempId = generateTempId();
       setTempMessageId(tempId);
 
       const optimisticMessage = {
         _id: tempId,
-        text: message, // Added text property to match the expected type
-        message: message,
+        text: message1, // Added text property to match the expected type
+        message: message1,
         senderId: userId,
         status: 'sending' as MessageStatus,
         createdAt: new Date().toISOString(),
@@ -289,7 +295,7 @@ const MessageInput = () => {
         mutation.mutate({
           chatId: selectedConversation?.participantDetails._id,
           senderId: userId,
-          message,
+          message: message1,
           attachments: successfulUploads,
         }, {
           onSuccess: (data) => {
@@ -297,7 +303,7 @@ const MessageInput = () => {
 
             socket.emit("sendMessage", {
               chatId: selectedConversation?._id,
-              message,
+              message: message1,
               messageId: data[1]._id,
               attachments: successfulUploads,
               senderId: userId,
@@ -333,7 +339,7 @@ const MessageInput = () => {
         ));
       } finally {
         setIsSending(false);
-        setMessage("");
+        setMessage1("");
         setAttachments([]);
         setTempMessageId(null);
       }
@@ -383,6 +389,22 @@ const MessageInput = () => {
     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);
+    
+    // Check if total size would exceed the limit
+    if (currentAttachmentsSize + newFilesSize > MAX_FILE_SIZE_MB * 1024 * 1024) {
+      alert(`Total file size cannot exceed ${MAX_FILE_SIZE_MB}MB`);
+      return;
+    }
+
     const newAttachments: Attachment[] = [];
 
     for (let i = 0; i < files.length; i++) {
@@ -399,7 +421,6 @@ const MessageInput = () => {
         continue;
       }
 
-    
       const previewUrl = fileType === 'document' 
         ? URL.createObjectURL(new Blob([''], { type: 'application/pdf' })) // Placeholder for documents
         : URL.createObjectURL(file);
@@ -417,6 +438,15 @@ const MessageInput = () => {
     }
   };
   
+  const scrollAttachments = (direction: 'left' | 'right') => {
+    if (attachmentsContainerRef.current) {
+      const scrollAmount = direction === 'right' ? 200 : -200;
+      attachmentsContainerRef.current.scrollBy({
+        left: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
 
   const removeAttachment = (index: number) => {
     setAttachments(prev => {
@@ -431,7 +461,16 @@ const MessageInput = () => {
     <div className="message-input-container">
     {/* Preview area for attachments */}
     {attachments.length > 0 && (
-      <div className="attachments-preview">
+      <div className="attachments-preview-container">
+        <button 
+          className="scroll-button left" 
+          onClick={() => scrollAttachments('left')}
+          disabled={attachments.length <= 3}
+        >
+          &lt;
+        </button>
+
+        <div className="attachments-preview" ref={attachmentsContainerRef}>
         {attachments.map((attachment, index) => (
           <FilePreview
             key={index}
@@ -441,6 +480,22 @@ const MessageInput = () => {
             onRemove={() => removeAttachment(index)}
           />
         ))}
+
+{attachments.length < MAX_FILE_COUNT && (
+            <div className="add-more-files" onClick={() => fileInputRef.current?.click()}>
+              <div className="plus-icon">+</div>
+              <div className="add-more-text">Add more</div>
+            </div>
+          )}
+      </div>
+
+      <button 
+          className="scroll-button right" 
+          onClick={() => scrollAttachments('right')}
+          disabled={attachments.length <= 3}
+        >
+          &gt;
+        </button>
       </div>
     )}
 

package/src/components/messages/Messages.tsx

@@ -16,17 +16,15 @@ const Messages = () => {
 
   const lastMessageRef = useRef<HTMLDivElement>(null);
 
-  const { data, fetchNextPage, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: ["messages", selectedConversation?._id, userId],
-      queryFn: ({ pageParam = 1 }) =>
-        fetchMessages(selectedConversation?._id, userId, pageParam),
-      getNextPageParam: (lastPage) => {
-        return lastPage.nextPage; // Use the nextPage from API response
-      },
-      initialPageParam: 1,
-    })
-
+  const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
+    queryKey: ["messages", selectedConversation?._id, userId],
+    queryFn: ({ pageParam = 1 }) =>
+      fetchMessages(selectedConversation?._id, userId, pageParam),
+    getNextPageParam: (lastPage) => {
+      return lastPage.nextPage; // Use the nextPage from API response
+    },
+    initialPageParam: 1,
+  });
 
   useEffect(() => {
     if (inView) {
@@ -34,12 +32,11 @@ const Messages = () => {
     }
   }, [fetchNextPage, inView]);
 
-
   useEffect(() => {
     if (data) {
-      console.log('message fetching data', data);
+      console.log("message fetching data", data);
 
-      const allMessages = data.pages.flatMap(page => page.messages).reverse();
+      const allMessages = data.pages.flatMap((page) => page.messages).reverse();
       setMessages(allMessages);
     }
   }, [data]);
@@ -52,19 +49,22 @@ const Messages = () => {
       newMessage.shouldShake = true;
       console.log("📩 New message received:", newMessage);
       // 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)
+      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);
-        
+        console.log("isDuplicate", isDuplicate);
+
         if (isDuplicate) {
           return prevMessages;
         }
-        
+
         return [...prevMessages, newMessage[1]];
       });
     };
@@ -78,7 +78,6 @@ const Messages = () => {
     // 	});
     //   };
 
-
     const handleStatusUpdate = ({
       messageId,
       status,
@@ -157,17 +156,14 @@ const Messages = () => {
   //     }
   //   }, [handleScroll]);
 
-
   console.log("📩 Messages:", messages);
   console.log("📩 Messages Length:", messages?.length);
 
-
-
   return (
-    <div className="chatMessages"
-      style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
+    <div
+      className="chatMessages"
+      style={{ overflowY: "auto", height: "100%", position: "relative" }}
     >
-
       <div ref={ref} className="my-8">
         {isFetchingNextPage ? <Loader /> : null}
       </div>
@@ -175,8 +171,10 @@ const Messages = () => {
         messages?.map((message: any) =>
           // Check if the message object is valid and has an _id before rendering
           message ? (
-            <div key={message._id} ref={lastMessageRef}
-              style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}
+            <div
+              key={message._id}
+              ref={lastMessageRef}
+              style={{ flex: 1, minHeight: 0, overflowY: "auto" }}
             >
               <Message message={message} />
             </div>
@@ -187,7 +185,6 @@ const Messages = () => {
           Send a message to start the conversation
         </p>
       )}
-
     </div>
   );
 };

package/src/components/sidebar/Conversation.tsx

@@ -47,14 +47,24 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
     onlineUsers?.includes(conversation.participantDetails._id);
   return (
     <>
-      <div className="conversation-container" onClick={handleSelectConversation}>
+      <div
+        className="conversation-container"
+        onClick={handleSelectConversation}
+      >
         <div className="conversation-avatar">
           <img
             className="conversation-img"
-            src={conversation.participantDetails?.profilePic || conversation.participantDetails?.idpic}
+            src={
+              conversation.participantDetails?.profilePic ||
+              conversation.participantDetails?.idpic
+            }
             alt="User Avatar"
           />
-          <span className={`chatSidebarStatusDot ${isUserOnline ? "online" : "offline"}`}></span>
+          <span
+            className={`chatSidebarStatusDot ${
+              isUserOnline ? "online" : "offline"
+            }`}
+          ></span>
         </div>
 
         <div className="conversation-info">
@@ -63,10 +73,13 @@ const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
               {conversation.participantDetails?.firstname}
             </p>
             <span className="conversation-time">
-              {new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })}
+              {new Date(conversation.lastMessage.createdAt).toLocaleTimeString(
+                [],
+                {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                }
+              )}
             </span>
           </div>
           <p className="conversation-message">