feat: improve chat scroll behavior during tab switches (#5308)

* 📝 (newChatMessage.tsx): add event listener to handle tab visibility change and update state accordingly
📝 (newChatMessage.tsx): remove event listener when component unmounts to prevent memory leaks

* ✨ (use-tab-visibility.tsx): introduce custom hook useTabVisibility to track tab visibility changes in the browser
📝 (newChatMessage.tsx, newChatView.tsx): import and use useTabVisibility hook to handle tab visibility changes and update chat behavior accordingly

* 📝 (newChatMessage.tsx): remove duplicate import of useTabVisibility and update import path
📝 (newChatView.tsx): remove duplicate import of useTabVisibility and update import path
✨ (use-tab-visibility.tsx): create a new custom hook to track tab visibility changes in the browser

* refactor: Update logic to clear chat value when tab is hidden

The code changes in newChatView.tsx refactor the logic for clearing the chat value when the tab is hidden. Previously, the chat value was only cleared when there were no messages and the chat was not locked. Now, the chat value will also be cleared if the tab is hidden. This ensures that the chat input is empty when the user switches tabs.

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx

@@ -23,6 +23,7 @@ import {
   EMPTY_INPUT_SEND_MESSAGE,
   EMPTY_OUTPUT_SEND_MESSAGE,
 } from "../../../../../constants/constants";
+import useTabVisibility from "../../../../../shared/hooks/use-tab-visibility";
 import useAlertStore from "../../../../../stores/alertStore";
 import { chatMessagePropsType } from "../../../../../types/components";
 import { cn } from "../../../../../utils/utils";
@@ -131,9 +132,11 @@ export default function ChatMessage({
     };
   }, []);
 
+  const isTabHidden = useTabVisibility();
+
   useEffect(() => {
     const element = document.getElementById("last-chat-message");
-    if (element) {
+    if (element && isTabHidden) {
       if (playgroundScrollBehaves === "instant") {
         element.scrollIntoView({ behavior: playgroundScrollBehaves });
         setPlaygroundScrollBehaves("smooth");

src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx

@@ -5,6 +5,7 @@ import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { useMessagesStore } from "@/stores/messagesStore";
 import { useEffect, useMemo, useRef, useState } from "react";
+import useTabVisibility from "../../../../shared/hooks/use-tab-visibility";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import useFlowStore from "../../../../stores/flowStore";
 import { ChatMessageType } from "../../../../types/chat";
@@ -43,6 +44,8 @@ export default function ChatView({
   const inputTypes = inputs.map((obj) => obj.type);
   const updateFlowPool = useFlowStore((state) => state.updateFlowPool);
 
+  const isTabHidden = useTabVisibility();
+
   //build chat history
   useEffect(() => {
     const messagesFromMessagesStore: ChatMessageType[] = messages
@@ -86,9 +89,11 @@ export default function ChatView({
       return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
     });
 
-    if (messages.length === 0 && !lockChat && chatInputNode)
+    if (messages.length === 0 && !lockChat && chatInputNode) {
       setChatValue(chatInputNode.data.node.template["input_value"].value ?? "");
-    else setChatValue("");
+    } else if (isTabHidden) {
+      setChatValue("");
+    }
 
     setChatHistory(finalChatHistory);
   }, [flowPool, messages, visibleSession]);

src/frontend/src/shared/hooks/use-tab-visibility.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+const useTabVisibility = () => {
+  const [tabChanged, setTabChanged] = useState(true);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      setTabChanged(document.hidden);
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
+
+  return tabChanged;
+};
+
+export default useTabVisibility;