From e1dd5ee2decb346cfa0ac4c0718afedcc958e6f8 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Wed, 10 Jan 2024 05:12:49 -0800 Subject: [PATCH] UI: focus on the chat input when switching to the chat tab --- js/main.js | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/js/main.js b/js/main.js index 45f5021f..e2fb850d 100644 --- a/js/main.js +++ b/js/main.js @@ -104,6 +104,7 @@ document.addEventListener("keydown", function(event) { var parametersButton = document.getElementById("parameters-button"); var parentContainer = parametersButton.parentNode; var selectedChild = parentContainer.querySelector(".selected"); + if (selectedChild.id == "parameters-button") { document.getElementById(previousTabId).click(); } else { @@ -318,7 +319,29 @@ document.getElementById("show-controls").parentNode.style.bottom = "0px"; //------------------------------------------------ // Focus on the chat input //------------------------------------------------ -document.querySelector("#chat-input textarea").focus(); +const chatTextArea = document.getElementById("chat-input").querySelector("textarea"); + +function respondToChatInputVisibility(element, callback) { + var options = { + root: document.documentElement, + }; + + var observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + callback(entry.intersectionRatio > 0); + }); + }, options); + + observer.observe(element); +} + +function handleChatInputVisibilityChange(isVisible) { + if (isVisible) { + chatTextArea.focus(); + } +} + +respondToChatInputVisibility(chatTextArea, handleChatInputVisibilityChange); //------------------------------------------------ // Show enlarged character picture when the profile @@ -403,7 +426,7 @@ window.addEventListener("resize", updateDocumentWidth); //------------------------------------------------ const renameTextArea = document.getElementById("rename-row").querySelector("textarea"); -function respondToVisibility(element, callback) { +function respondToRenameVisibility(element, callback) { var options = { root: document.documentElement, }; @@ -424,4 +447,4 @@ function handleVisibilityChange(isVisible) { } } -respondToVisibility(renameTextArea, handleVisibilityChange); +respondToRenameVisibility(renameTextArea, handleVisibilityChange);