fix: send button auto height

heimoshuiyu · Jan 16, 2024 · a4d3091 · a4d3091
1 parent 0eabcc0
commit a4d3091
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
@@ -392,6 +392,7 @@ export default function ChatBOX(props: {
     );
     _setToolsTemplates(templateTools);
   };
+  const userInputRef = createRef();
 
   return (
     <div className="grow flex flex-col p-2 dark:text-black">
@@ -812,20 +813,21 @@ export default function ChatBOX(props: {
         )}
         <textarea
           value={inputMsg}
+          ref={userInputRef}
           onChange={(event: any) => {
             setInputMsg(event.target.value);
-            autoHeight(event);
+            autoHeight(event.target);
           }}
           onKeyPress={(event: any) => {
             console.log(event);
             if (event.ctrlKey && event.code === "Enter") {
               send(event.target.value, true);
               setInputMsg("");
               event.target.value = "";
-              autoHeight(event);
+              autoHeight(event.target);
               return;
             }
-            autoHeight(event);
+            autoHeight(event.target);
             setInputMsg(event.target.value);
           }}
           className="rounded grow m-1 p-1 border-2 border-gray-400 w-0"
@@ -836,6 +838,8 @@ export default function ChatBOX(props: {
           disabled={showGenerating}
           onClick={() => {
             send(inputMsg, true);
+            userInputRef.current.value = "";
+            autoHeight(userInputRef.current);
           }}
         >
           {Tr("Send")}

diff --git a/src/settings.tsx b/src/settings.tsx
@@ -81,10 +81,10 @@ const LongInput = (props: {
         onChange={(event: any) => {
           props.chatStore[props.field] = event.target.value;
           props.setChatStore({ ...props.chatStore });
-          autoHeight(event);
+          autoHeight(event.target);
         }}
         onKeyPress={(event: any) => {
-          autoHeight(event);
+          autoHeight(event.target);
         }}
       ></textarea>
     </Help>

diff --git a/src/textarea.tsx b/src/textarea.tsx
@@ -1,9 +1,9 @@
-export const autoHeight = (event: any) => {
-  event.target.style.height = "auto";
+export const autoHeight = (target: any) => {
+  target.style.height = "auto";
   // max 70% of screen height
-  event.target.style.height = `${Math.min(
-    event.target.scrollHeight,
+  target.style.height = `${Math.min(
+    target.scrollHeight,
     window.innerHeight * 0.7
   )}px`;
-  console.log("set auto height", event.target.style.height);
+  console.log("set auto height", target.style.height);
 };