diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
index 2d3cdc87a..67deec4cd 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/newChatMessage.tsx
+++ b/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");
diff --git a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx b/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
index 551fd33d7..3d26268db 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
+++ b/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]);
diff --git a/src/frontend/src/shared/hooks/use-tab-visibility.tsx b/src/frontend/src/shared/hooks/use-tab-visibility.tsx
new file mode 100644
index 000000000..d8b510b99
--- /dev/null
+++ b/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;