From 2b7f72deec7dec5ccbe5583c10e81af7cf136808 Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Tue, 9 May 2023 23:01:17 +0800
Subject: [PATCH] feat: close #1055 cmd/alt/ctrl + arrow up/down to switch
 window

---
 app/components/chat.tsx    | 14 ++++----------
 app/components/sidebar.tsx | 25 ++++++++++++++++++++++++-
 app/constant.ts            |  2 ++
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 8786877b..54def01c 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -53,7 +53,7 @@ import chatStyle from "./chat.module.scss";
 
 import { ListItem, Modal, showModal } from "./ui-lib";
 import { useLocation, useNavigate } from "react-router-dom";
-import { Path } from "../constant";
+import { LAST_INPUT_KEY, Path } from "../constant";
 import { Avatar } from "./emoji";
 import { MaskAvatar, MaskConfig } from "./mask";
 import { useMaskStore } from "../store/mask";
@@ -404,7 +404,6 @@ export function Chat() {
 
   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, scrollToBottom } = useScrollToBottom();
@@ -477,7 +476,7 @@ export function Chat() {
     if (userInput.trim() === "") return;
     setIsLoading(true);
     chatStore.onUserInput(userInput).then(() => setIsLoading(false));
-    setBeforeInput(userInput);
+    localStorage.setItem(LAST_INPUT_KEY, userInput);
     setUserInput("");
     setPromptHints([]);
     if (!isMobileScreen) inputRef.current?.focus();
@@ -491,9 +490,9 @@ export function Chat() {
 
   // check if should send message
   const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // if ArrowUp and no userInput
+    // if ArrowUp and no userInput, fill with last input
     if (e.key === "ArrowUp" && userInput.length <= 0) {
-      setUserInput(beforeInput);
+      setUserInput(localStorage.getItem(LAST_INPUT_KEY) ?? "");
       e.preventDefault();
       return;
     }
@@ -503,11 +502,6 @@ export function Chat() {
     }
   };
   const onRightClick = (e: any, message: Message) => {
-    // auto fill user input
-    if (message.role === "user") {
-      setUserInput(message.content);
-    }
-
     // copy to clipboard
     if (selectOrCopy(e.currentTarget, message.content)) {
       e.preventDefault();
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index e3273925..63614ffa 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -32,6 +32,28 @@ const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
 });
 
+function useHotKey() {
+  const chatStore = useChatStore();
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.metaKey || e.altKey || e.ctrlKey) {
+        const n = chatStore.sessions.length;
+        const limit = (x: number) => (x + n) % n;
+        const i = chatStore.currentSessionIndex;
+        if (e.key === "ArrowUp") {
+          chatStore.selectSession(limit(i - 1));
+        } else if (e.key === "ArrowDown") {
+          chatStore.selectSession(limit(i + 1));
+        }
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  });
+}
+
 function useDragSideBar() {
   const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);
 
@@ -86,9 +108,10 @@ export function SideBar(props: { className?: string }) {
   // drag side bar
   const { onDragMouseDown, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
-
   const config = useAppConfig();
 
+  useHotKey();
+
   return (
     <div
       className={`${styles.sidebar} ${props.className} ${
diff --git a/app/constant.ts b/app/constant.ts
index fed20caf..d0f9fc74 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -38,3 +38,5 @@ export const MIN_SIDEBAR_WIDTH = 230;
 export const NARROW_SIDEBAR_WIDTH = 100;
 
 export const ACCESS_CODE_PREFIX = "ak-";
+
+export const LAST_INPUT_KEY = "last-input";