From 5aa87ee41e2a4c360f0ad0f3697ab00f1f118cc4 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 17 Dec 2024 18:20:38 -0300 Subject: [PATCH] feat: improve chat scroll behavior during tab switches (#5308) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 📝 (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 --- .../chatView/chatMessage/newChatMessage.tsx | 5 ++++- .../components/chatView/newChatView.tsx | 9 ++++++-- .../src/shared/hooks/use-tab-visibility.tsx | 21 +++++++++++++++++++ 3 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 src/frontend/src/shared/hooks/use-tab-visibility.tsx 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;