🐛 fix(chatInput): fix chat input resizing issue

✨ feat(chatModal): add focus to chat input when modal is opened
The chat input was not resizing properly when the user typed more than one line of text. This was fixed by setting the height of the input to the scrollHeight of the input element. Additionally, the chat input is now focused when the chat modal is opened, which improves the user experience.

Fixes Text area is broken #328

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>
   );
 }

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>