added loading wheel on images, and fixed auto scroll

client/src/components/chat/MessagesArea.tsx

@@ -47,7 +47,6 @@ function MessagesArea({
       fetchPreviousMessages(currentContact.conversation_id)
         .then(() => setIsLoading(false))
         .catch(() => {
-          //console.error('Failed to fetch messages: ', e);
           setIsLoading(false);
         });
     }
@@ -66,6 +65,7 @@ function MessagesArea({
       console.error('Failed to delete message');
     }
   };
+
   useEffect(() => {
     if (!socket) return;
 
@@ -108,7 +108,6 @@ function MessagesArea({
           },
           false,
         );
-        console.log('changed status to false for: ', msg.sender);
       }
       if (
         msg.conversation_id == currentContact?.conversation_id &&
@@ -139,22 +138,46 @@ function MessagesArea({
     }
   }, [messages]);
 
+  const scrollToBottom = () => {
+    const container = containerRef.current;
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+    }
+  };
+
+  // Scroll to bottom when messages change
   useEffect(() => {
     if (!isFetchingHistory) {
-      messagesEndRef.current?.scrollIntoView();
+      scrollToBottom();
+
+      setTimeout(scrollToBottom, 100);
     }
-  }, [messages]);
+  }, [messages, isFetchingHistory]);
 
   const AttachmentPreview = ({ url }: { url: string }) => {
     const isImage = url.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i);
-    return isImage ? (
-      <img
-        src={url}
-        alt="attachment"
-        className="max-w-full max-h-64 object-contain rounded"
-      />
-    ) : (
-      <FileBox url={url} />
+    const [isLoading, setIsLoading] = useState(true);
+
+    if (!isImage) {
+      return <FileBox url={url} />;
+    }
+
+    return (
+      <div className="relative min-h-64 w-full">
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 rounded">
+            <LoadingWheel />
+          </div>
+        )}
+        <img
+          src={url}
+          alt="attachment"
+          className={`max-w-full max-h-64 object-contain rounded transition-opacity duration-200 ${
+            isLoading ? 'opacity-0' : 'opacity-100'
+          }`}
+          onLoad={() => setIsLoading(false)}
+        />
+      </div>
     );
   };
 
@@ -193,7 +216,7 @@ function MessagesArea({
 
   return (
     <div ref={containerRef} className="flex flex-col h-full overflow-y-auto">
-      <p className=" text-center text-gray-400">{errorMessage}</p>
+      <p className="text-center text-gray-400">{errorMessage}</p>
       <ul className="flex-grow list-none">
         {isLoading ? <LoadingWheel /> : null}
         {messageList}

client/src/pages/Chat.tsx

@@ -38,6 +38,7 @@ function Chat() {
   const [cursor, setCursor] = useState<number>(0);
   const [messages, setMessages] = useState<ChatMessages[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
     const token = Cookies.get('token');
@@ -50,6 +51,7 @@ function Chat() {
         const parsedContact = JSON.parse(storedContact);
         if (parsedContact) {
           initializeContact(parsedContact);
+          setIsLoading(true);
         }
       } catch (error) {
         console.error('Failed to parse stored contact:', error);
@@ -88,6 +90,7 @@ function Chat() {
         });
 
         messages.messages.forEach(messageHandler);
+        setIsLoading(false);
       })
       .catch((error) => setErrorMessage(error.response.data.message));
   };

server/socket/socket.js

@@ -71,10 +71,10 @@ function initializeSocket(io) {
     }
 
     socket.on("chat message", async (msg, callback) => {
-      const { message, recipient, recipient_id, attachment_url } = msg;
+      const { message, recipient, recipient_id, attachment_urls } = msg;
       const sender = socket.username;
 
-      if (!message && !attachment_url) {
+      if (!message && !attachment_urls) {
         callback({
           status: "error",
           tempId: msg.tempId,
@@ -96,7 +96,7 @@ function initializeSocket(io) {
           socket.user_id,
           recipient,
           message,
-          attachment_url,
+          attachment_urls,
         );
         if (!insertedMessage) {
           callback({
@@ -120,7 +120,7 @@ function initializeSocket(io) {
         io.to(username).to(recipient).to(recipient_id).emit("chat message", {
           sender,
           message: content,
-          attachment_url,
+          attachment_urls,
           recipient,
           message_id,
           sender_id,
@@ -130,7 +130,7 @@ function initializeSocket(io) {
         console.log("(socket) sent on 'chat message' socket: ", {
           sender,
           message,
-          attachment_url,
+          attachment_urls,
           recipient,
           timestamp,
           message_id,