BUGS

package.json

@@ -13,7 +13,6 @@
     "@reduxjs/toolkit": "^2.2.1",
     "emoji-picker-react": "^4.12.0",
     "firebase": "^10.8.1",
-    "heic2any": "^0.0.4",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",

src/components/Chat/Chat.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ChatHeader from "./ChatHeader";
 import ChatInput from "./ChatInput";
 import Message from "./Message";
@@ -31,29 +31,43 @@ export default function Chat() {
         activeChannelId,
         "messages"
       );
-      onSnapshot(query(messageRef,orderBy("timestamp","desc")), (snapshot) => {
-        setMessages(
-          snapshot.docs.map((doc) => {
-            return doc.data();
-          })
-        );
-        // console.log(messages);
-      });
+      onSnapshot(
+        query(messageRef, orderBy("timestamp", "desc")),
+        (snapshot) => {
+          setMessages(
+            snapshot.docs.map((doc) => {
+              return doc.data();
+            })
+          );
+          // console.log(messages);
+        }
+      );
     }
   }, [newMessageFromStore && activeChannelId]);
 
+  // AUTO SCROLL 
+
+  const messagesEndRef = useRef(null);
+
+
   return (
     <div className="lg:w-4/5 w-full max-h-screen min-h-screen flex flex-col justify-between">
-      <div className="flex flex-col">
+      <div className="flex flex-col justify-between h-full w-full">
         <ChatHeader></ChatHeader>
-        <div className="overflow-scroll  h-[88vh]  no-scrollbar">
-        {messages &&
-          messages.map((messageInfo) => {
-            return <Message key={messageInfo.timestamp} messageInfo={messageInfo}></Message>;
-          })}
-        </div>
+          <div className="overflow-scroll basis-[75%] max-lg:basis-[78%] no-scrollbar">
+            {messages &&
+              messages.map((messageInfo) => {
+                return (
+                  <Message
+                    key={messageInfo.timestamp}
+                    messageInfo={messageInfo}
+                  ></Message>
+                );
+              })}
+          </div>
+          <div className=""></div>
+        <ChatInput handleMessageUpdate={onMessageUpdate}></ChatInput>
       </div>
-      <ChatInput handleMessageUpdate={onMessageUpdate}></ChatInput>
     </div>
   );
 }

src/components/Chat/ChatHeader.jsx

@@ -3,7 +3,7 @@ import ChatHeaderTitle from "./ChatHeaderTitle";
 
 export default function ChatHeader() {
   return (
-    <div className="flex items-center px-3 md:px-4 py-2 md:py-3 justify-between border-b border-color-1 ">
+    <div className="flex items-center px-3 md:px-4 py-2 md:py-3 justify-between border-b border-color-1 basis-[10%] max-lg:basis-[7%]">
       <ChatHeaderTitle></ChatHeaderTitle>
       <ChatHeaderSearchbar></ChatHeaderSearchbar>
 

src/components/Chat/ChatInput.jsx

@@ -16,8 +16,6 @@ import db, { storage } from "@/firebase";
 import { selectMenu } from "@/lib/features/menuSlice";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { TbLoader2 } from "react-icons/tb";
-// import dynamic from "next/dynamic";
-import heic2any from "heic2any";
 import EmojiPicker from "emoji-picker-react";
 
 
@@ -81,9 +79,7 @@ export default function ChatInput({ handleMessageUpdate }) {
     const file = event.target.files?.[0];
     if (file) {
       if (file.name.includes(".heic") || file.name.includes(".HEIC")) {
-        // alert("heic file type is not supported on web, please use a different format.")
-        const convertedImage = await heic2any({ blob: file, toType: "image/jpeg" });
-        setImage(convertedImage);
+        alert("heic file type is not supported on web, please use a different format.")
       } else {
         setImage(file);
         console.log(file);
@@ -160,7 +156,7 @@ export default function ChatInput({ handleMessageUpdate }) {
         onClick={() =>
           !activeChannel && alert("please select a channel before typing!")
         }
-        className={`lg:w-[78%] w-[98%] backdrop-blur-xl fixed bottom-0 right-[1%] mx-auto my-1 md:my-3 rounded-lg shadow-lg bg-color-2 flex items-center py-1 lg:py-2 px-2 lg:px-4 justify-between
+        className={`w-[98%] backdrop-blur-xl mx-auto my-1 md:my-3 rounded-lg shadow-lg bg-color-2 flex items-center py-1 lg:py-2 px-2 lg:px-4 justify-between basis-[10%] max-lg:basis-[8%]
         ${menuState ? "hidden lg:flex" : "visible"}
         `}
       >