From b247ebcc404a0ec7aa31e3fd3001205c318ca994 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Mon, 22 May 2023 17:26:34 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(chatInput):=20fix=20chat=20i?=
 =?UTF-8?q?nput=20resizing=20issue=20=E2=9C=A8=20feat(chatModal):=20add=20?=
 =?UTF-8?q?focus=20to=20chat=20input=20when=20modal=20is=20opened=20The=20?=
 =?UTF-8?q?chat=20input=20was=20not=20resizing=20properly=20when=20the=20u?=
 =?UTF-8?q?ser=20typed=20more=20than=20one=20line=20of=20text.=20This=20wa?=
 =?UTF-8?q?s=20fixed=20by=20setting=20the=20height=20of=20the=20input=20to?=
 =?UTF-8?q?=20the=20scrollHeight=20of=20the=20input=20element.=20Additiona?=
 =?UTF-8?q?lly,=20the=20chat=20input=20is=20now=20focused=20when=20the=20c?=
 =?UTF-8?q?hat=20modal=20is=20opened,=20which=20improves=20the=20user=20ex?=
 =?UTF-8?q?perience.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes Text area is broken #328
---
 .../src/modals/chatModal/chatInput/index.tsx  | 40 ++++++++++++-------
 src/frontend/src/modals/chatModal/index.tsx   |  9 ++++-
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 2fb600068..657b27f6f 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -1,43 +1,55 @@
 import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { classNames } from "../../../utils";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function ChatInput({
   lockChat,
   chatValue,
   sendMessage,
   setChatValue,
-}: {
-  lockChat: boolean;
-  chatValue: string;
-  sendMessage: Function;
-  setChatValue: Function;
+  inputRef,
 }) {
-  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = "inherit"; // Reset the height
+      inputRef.current.style.height = `${inputRef.current.scrollHeight}px`; // Set it to the scrollHeight
+    }
+  }, [chatValue]);
+
   return (
-    <>
+    <div className="relative">
       <textarea
         onKeyDown={(event) => {
           if (event.key === "Enter" && !lockChat && !event.shiftKey) {
             sendMessage();
           }
         }}
+        rows={1}
         ref={inputRef}
         disabled={lockChat}
-        style={{ resize: "none" }}
+        style={{
+          resize: "none",
+          bottom: `${inputRef?.current?.scrollHeight}px`,
+          maxHeight: "150px",
+          overflow: `${
+            inputRef.current && inputRef.current.scrollHeight > 150
+              ? "auto"
+              : "hidden"
+          }`,
+        }}
         value={lockChat ? "Thinking..." : chatValue}
         onChange={(e) => {
           setChatValue(e.target.value);
         }}
         className={classNames(
           lockChat
-            ? "bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
-            : "bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full  custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600  pr-10 sm:text-sm"
+            ? " bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
+            : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
+          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm"
         )}
         placeholder={"Send a message..."}
       />
-      <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+      <div className="absolute bottom-1 right-3">
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <LockClosedIcon
@@ -52,6 +64,6 @@ export default function ChatInput({
           )}
         </button>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index b310a36f9..d4f3849ee 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -303,6 +303,12 @@ export default function ChatModal({
 
   const ref = useRef(null);
 
+  useEffect(() => {
+    if (open && ref.current) {
+      ref.current.focus();
+    }
+  }, [open]);
+
   function sendMessage() {
     if (chatValue !== "") {
       let nodeValidationErrors = validateNodes();
@@ -413,12 +419,13 @@ export default function ChatModal({
                   <div ref={ref}></div>
                 </div>
                 <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
-                  <div className="relative w-full mt-1 rounded-md shadow-sm">
+                  <div className="relative w-full  mt-1 rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
                       lockChat={lockChat}
                       sendMessage={sendMessage}
                       setChatValue={setChatValue}
+                      inputRef={ref}
                     />
                   </div>
                 </div>