From 58b956f7cc6f8b93d5a84fa60f91cc347a6962f7 Mon Sep 17 00:00:00 2001
From: Mokou <jackzhongmz@gmail.com>
Date: Fri, 7 Apr 2023 12:26:22 +0800
Subject: [PATCH] feat: Hot keys: Escape to close settings, Up Arrow to get
 last input

---
 app/components/chat.tsx     |  8 ++++++++
 app/components/settings.tsx | 13 +++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 4ab61644..dabe103c 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -343,6 +343,7 @@ export function Chat(props: {
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [userInput, setUserInput] = useState("");
+  const [beforeInput, setBeforeInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { submitKey, shouldSubmit } = useSubmitHandler();
   const { scrollRef, setAutoScroll } = useScrollToBottom();
@@ -407,6 +408,7 @@ export function Chat(props: {
     if (userInput.length <= 0) return;
     setIsLoading(true);
     chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+    setBeforeInput(userInput);
     setUserInput("");
     setPromptHints([]);
     if (!isMobileScreen()) inputRef.current?.focus();
@@ -420,6 +422,12 @@ export function Chat(props: {
 
   // check if should send message
   const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // if ArrowUp and no userInput
+    if (e.key === "ArrowUp" && userInput.length <= 0) {
+      setUserInput(beforeInput);
+      e.preventDefault();
+      return;
+    }
     if (shouldSubmit(e)) {
       onUserSubmit();
       e.preventDefault();
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index ed1c28ee..d1d217ea 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -128,6 +128,19 @@ export function Settings(props: { closeSettings: () => void }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const keydownEvent = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        props.closeSettings();
+      }
+    };
+    document.addEventListener("keydown", keydownEvent);
+    return () => {
+      document.removeEventListener("keydown", keydownEvent);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <ErrorBoundary>
       <div className={styles["window-header"]}>