From ffff5720d884864c4189951aa99635919de6ae19 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 28 Aug 2024 09:50:48 -0300
Subject: [PATCH] fix: Ensure Correct Focus on Playground Chat Input (#3582)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (textAreaWrapper/index.tsx): add useEffect hook to focus on input when conditions are met
♻️ (AppWrapperPage/index.tsx): remove unnecessary console.log statement
---
 .../chatInput/components/textAreaWrapper/index.tsx         | 7 +++++++
 src/frontend/src/pages/AppWrapperPage/index.tsx            | 2 --
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
index 0a9ba4a7e..e34469b6c 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Textarea } from "../../../../../../../components/ui/textarea";
 import { classNames } from "../../../../../../../utils/utils";
 
@@ -43,6 +44,12 @@ const TextAreaWrapper = ({
 
   const additionalClassNames = "form-modal-lockchat pl-14";
 
+  useEffect(() => {
+    if (!lockChat && !noInput && !saveLoading) {
+      inputRef.current?.focus();
+    }
+  }, [lockChat, noInput, saveLoading]);
+
   return (
     <Textarea
       data-testid="input-chat-playground"
diff --git a/src/frontend/src/pages/AppWrapperPage/index.tsx b/src/frontend/src/pages/AppWrapperPage/index.tsx
index 154a82733..595ccbd19 100644
--- a/src/frontend/src/pages/AppWrapperPage/index.tsx
+++ b/src/frontend/src/pages/AppWrapperPage/index.tsx
@@ -49,8 +49,6 @@ export function AppWrapperPage() {
 
   const [retryCount, setRetryCount] = useState(0);
 
-  console.log(healthCheckMaxRetries);
-
   useEffect(() => {
     const isServerBusy =
       (error as AxiosError)?.response?.status === 503 ||