From 855e9ee9df5a2a782dbe27e9685b6b596b24a321 Mon Sep 17 00:00:00 2001
From: 0xSage <n@pragmatic.vc>
Date: Fri, 13 Oct 2023 14:55:00 +0800
Subject: [PATCH] style: textarea resizes

---
 .../_components/BasicPromptInput/index.tsx    | 39 ++++++++++++++-----
 web/app/_components/InputToolbar/index.tsx    |  2 +-
 .../_components/SimpleTextMessage/index.tsx   |  2 +-
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/web/app/_components/BasicPromptInput/index.tsx b/web/app/_components/BasicPromptInput/index.tsx
index 2dfa4e71a..7490aa993 100644
--- a/web/app/_components/BasicPromptInput/index.tsx
+++ b/web/app/_components/BasicPromptInput/index.tsx
@@ -7,7 +7,7 @@ import useCreateConversation from "@/_hooks/useCreateConversation";
 import useInitModel from "@/_hooks/useInitModel";
 import useSendChatMessage from "@/_hooks/useSendChatMessage";
 import { useAtom, useAtomValue } from "jotai";
-import { ChangeEvent } from "react";
+import { ChangeEvent, useEffect, useRef } from "react";
 
 const BasicPromptInput: React.FC = () => {
   const activeConversationId = useAtomValue(getActiveConvoIdAtom);
@@ -18,10 +18,6 @@ const BasicPromptInput: React.FC = () => {
 
   const { initModel } = useInitModel();
 
-  const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setCurrentPrompt(event.target.value);
-  };
-
   const handleKeyDown = async (
     event: React.KeyboardEvent<HTMLTextAreaElement>
   ) => {
@@ -44,20 +40,45 @@ const BasicPromptInput: React.FC = () => {
     }
   };
 
+  // Auto adjust textarea height based on content
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const MAX_ROWS = 10;
+  const adjustTextareaHeight = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      const scrollHeight = textareaRef.current.scrollHeight;
+      const maxScrollHeight =
+        parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
+        MAX_ROWS;
+      textareaRef.current.style.height = `${Math.min(
+        scrollHeight,
+        maxScrollHeight
+      )}px`;
+    }
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, []);
+
+  const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setCurrentPrompt(event.target.value);
+    adjustTextareaHeight();
+  };
+
   return (
     <div className="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
-      <label htmlFor="comment" className="sr-only">
-        Message ...
-      </label>
       <textarea
+        ref={textareaRef}
         onKeyDown={handleKeyDown}
         value={currentPrompt}
         onChange={handleMessageChange}
-        rows={2}
         name="comment"
         id="comment"
         className="block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
         placeholder="Message ..."
+        rows={1}
+        style={{ overflow: "auto" }}
       />
       {/* Spacer element to match the height of the toolbar */}
       <div className="py-2" aria-hidden="true">
diff --git a/web/app/_components/InputToolbar/index.tsx b/web/app/_components/InputToolbar/index.tsx
index 7008b4ded..a47aab477 100644
--- a/web/app/_components/InputToolbar/index.tsx
+++ b/web/app/_components/InputToolbar/index.tsx
@@ -59,7 +59,7 @@ const InputToolbar: React.FC = () => {
         />
       </div>
       {/* My text input */}
-      <div className="flex items-start space-x-4 mx-12 md:mx-32 2xl:mx-80 mb-3">
+      <div className="flex items-start space-x-4 mx-12 md:mx-32 2xl:mx-64 mb-3">
         <div className="min-w-0 flex-1 relative">
           <BasicPromptInput />
           <BasicPromptAccessories />
diff --git a/web/app/_components/SimpleTextMessage/index.tsx b/web/app/_components/SimpleTextMessage/index.tsx
index 0d3a9185f..7c503c9af 100644
--- a/web/app/_components/SimpleTextMessage/index.tsx
+++ b/web/app/_components/SimpleTextMessage/index.tsx
@@ -25,7 +25,7 @@ const SimpleTextMessage: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex items-start gap-2 px-12 md:px-32 2xl:px-80 ${backgroundColor} py-5`}
+      className={`flex items-start gap-2 px-12 md:px-32 2xl:px-64 ${backgroundColor} py-5`}
     >
       <Image
         className="rounded-full"