From 24a7462c9f99d2721cb9a240a194c7286379d50f Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 11 Jul 2024 13:53:49 -0400
Subject: [PATCH] support enter to update, shift + enter to create a new line
 and focus on update textarea after coding

---
 frontend/src/App.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 952d9d3..daf845b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -56,6 +56,8 @@ function App() {
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
 
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
   const { disableInSelectAndEditMode } = useAppStore();
 
   // Settings
@@ -403,6 +405,13 @@ function App() {
     setAppState(AppState.CODE_READY);
   }
 
+  // When coding is complete, focus on the update instruction textarea
+  useEffect(() => {
+    if (appState === AppState.CODE_READY && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [appState]);
+
   return (
     <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@@ -501,8 +510,14 @@ function App() {
                 <div>
                   <div className="grid w-full gap-2">
                     <Textarea
+                      ref={textareaRef}
                       placeholder="Tell the AI what to change..."
                       onChange={(e) => setUpdateInstruction(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          doUpdate(updateInstruction);
+                        }
+                      }}
                       value={updateInstruction}
                     />
                     <div className="flex justify-between items-center gap-x-2">