Fix: UI Issues in Data Fetch Scroll, Text Area Overflow, and User Profile Navigation in notes tab

src/pages/Encounters/tabs/EncounterNotesTab.tsx

@@ -13,6 +13,7 @@
   Send,
   Users,
 } from "lucide-react";
+import { navigate } from "raviger";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useInView } from "react-intersection-observer";
@@ -47,6 +48,7 @@
 import Loading from "@/components/Common/Loading";
 
 import useAuthUser from "@/hooks/useAuthUser";
+import useSlug from "@/hooks/useSlug";
 
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
@@ -136,6 +138,11 @@
 const MessageItem = ({ message }: { message: Message }) => {
   const authUser = useAuthUser();
   const isCurrentUser = authUser?.external_id === message.created_by.id;
+  const facilityId = useSlug("facility");
+
+  const navigateToUser = () => {
+    navigate(`/facility/${facilityId}/users/${message.created_by.username}`);
+  };
 
   return (
     <div
@@ -153,7 +160,7 @@
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex">
+              <div className="flex cursor-pointer" onClick={navigateToUser}>
                 <Avatar
                   name={message.created_by.username}
                   imageUrl={message.created_by.profile_picture_url}
@@ -173,7 +180,7 @@
             isCurrentUser ? "items-end" : "items-start",
           )}
         >
-          <span className="text-xs text-gray-500 mb-1">
+         <span className="text-xs text-gray-500 mb-1 cursor-pointer" onClick={navigateToUser}>
             {message.created_by.username}
           </span>
           <div
@@ -316,6 +323,7 @@
   const [isThreadsExpanded, setIsThreadsExpanded] = useState(false);
   const [showNewThreadDialog, setShowNewThreadDialog] = useState(false);
   const [newMessage, setNewMessage] = useState("");
+  const [scrollToBottom, setScrollToBottom] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const { ref, inView } = useInView();
 
@@ -394,6 +402,7 @@
       setNewMessage("");
       setTimeout(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+        setScrollToBottom(true);
       }, 100);
     },
     onError: () => {
@@ -410,8 +419,14 @@
 
   // Scroll to bottom on initial load and thread change
   useEffect(() => {
-    if (messagesData && !messagesLoading && !isFetchingNextPage) {
+    if (
+      messagesData &&
+      !messagesLoading &&
+      !isFetchingNextPage &&
+      (messagesData.pages.length === 1 || scrollToBottom)
+    ) {
       messagesEndRef.current?.scrollIntoView();
+      setScrollToBottom(false);
     }
   }, [selectedThread, messagesData, messagesLoading, isFetchingNextPage]);
 
@@ -592,8 +607,16 @@
                         ))
                       )}
                       {isFetchingNextPage && (
-                        <div className="py-2">
-                          <MessageSkeleton />
+                        <div className="flex justify-center absolute top-2 inset-x-0">
+                          <div className="flex items-center space-x-2">
+                            <div className="w-26 flex gap-2 px-2 py-1 bg-primary-200 rounded-md">
+                              <div>{t("loading")}</div>
+                              <Loader2
+                                className="h-5 w-5 animate-spin top-0.5 relative"
+                                size={8}
+                              />
+                            </div>
+                          </div>
                         </div>
                       )}
                       <div ref={ref} />
@@ -616,6 +639,7 @@
                               }
                             }
                           }}
+                          className="max-h-[150px]"
                         />
                         <Button
                           type="submit"