From d822f333c2e7291b21217e7fa3933adbd773aa47 Mon Sep 17 00:00:00 2001
From: xiaotianxt <tianyp@pku.edu.cn>
Date: Tue, 28 Mar 2023 00:22:33 +0800
Subject: [PATCH 1/4] feat(SubmitKey): add MetaEnter option

Add another option for MacOS user who prefer Cmd+Enter
or Linux user who prefer Meta+Enter.
---
 app/components/home.tsx | 1 +
 app/store/app.ts        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 8396438a..9c7e45f1 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -131,6 +131,7 @@ function useSubmitHandler() {
       (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
       (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
       (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
+      (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
       (config.submitKey === SubmitKey.Enter &&
         !e.altKey &&
         !e.ctrlKey &&
diff --git a/app/store/app.ts b/app/store/app.ts
index 703078ad..d7ff2ff7 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -21,6 +21,7 @@ export enum SubmitKey {
   CtrlEnter = "Ctrl + Enter",
   ShiftEnter = "Shift + Enter",
   AltEnter = "Alt + Enter",
+  MetaEnter = "Meta + Enter",
 }
 
 export enum Theme {

From a2807c9815d88febad341e23b55f553e73234c27 Mon Sep 17 00:00:00 2001
From: xiaotianxt <tianyp@pku.edu.cn>
Date: Tue, 28 Mar 2023 01:26:49 +0800
Subject: [PATCH 2/4] fix(scroll): scroll after click submit button

The behavior of SubmitKey and SubmitButton should be the same
---
 app/components/home.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 9c7e45f1..74434eb0 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -204,9 +204,21 @@ export function Chat(props: { showSideBar?: () => void }) {
 
   // for auto-scroll
   const latestMessageRef = useRef<HTMLDivElement>(null);
+  const inputPanelRef = useRef<HTMLDivElement>(null);
 
   // wont scroll while hovering messages
   const [autoScroll, setAutoScroll] = useState(false);
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      // check if click on input panel
+      setAutoScroll(
+        !!inputPanelRef.current &&
+          inputPanelRef.current.contains(e.target as HTMLElement)
+      );
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  });
 
   // preview messages
   const messages = (session.messages as RenderMessage[])
@@ -369,7 +381,7 @@ export function Chat(props: { showSideBar?: () => void }) {
         </div>
       </div>
 
-      <div className={styles["chat-input-panel"]}>
+      <div className={styles["chat-input-panel"]} ref={inputPanelRef}>
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
             className={styles["chat-input"]}
@@ -378,8 +390,6 @@ export function Chat(props: { showSideBar?: () => void }) {
             onInput={(e) => setUserInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={(e) => onInputKeyDown(e as any)}
-            onFocus={() => setAutoScroll(true)}
-            onBlur={() => setAutoScroll(false)}
             autoFocus
           />
           <IconButton

From 6c82f804aeeec6f8ae117d1341cea5ccc34a4b8a Mon Sep 17 00:00:00 2001
From: xiaotianxt <tianyupei@kuaishou.com>
Date: Tue, 28 Mar 2023 11:07:59 +0800
Subject: [PATCH 3/4] fix: Enter key bug

---
 app/components/home.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 74434eb0..9d20c32c 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -135,7 +135,8 @@ function useSubmitHandler() {
       (config.submitKey === SubmitKey.Enter &&
         !e.altKey &&
         !e.ctrlKey &&
-        !e.shiftKey)
+        !e.shiftKey &&
+        !e.metaKey)
     );
   };
 

From 493aa8c5917b70fbd50e05fd68ff16af887e8217 Mon Sep 17 00:00:00 2001
From: xiaotianxt <tianyupei@kuaishou.com>
Date: Tue, 28 Mar 2023 13:02:49 +0800
Subject: [PATCH 4/4] refactor: refocus textarea after btn clicked

---
 app/components/home.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 9d20c32c..850c5177 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -165,6 +165,7 @@ export function Chat(props: { showSideBar?: () => void }) {
     setIsLoading(true);
     onUserInput(userInput).then(() => setIsLoading(false));
     setUserInput("");
+    inputRef.current?.focus();
   };
 
   // stop response
@@ -205,21 +206,10 @@ export function Chat(props: { showSideBar?: () => void }) {
 
   // for auto-scroll
   const latestMessageRef = useRef<HTMLDivElement>(null);
-  const inputPanelRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   // wont scroll while hovering messages
   const [autoScroll, setAutoScroll] = useState(false);
-  useEffect(() => {
-    const handleMouseDown = (e: MouseEvent) => {
-      // check if click on input panel
-      setAutoScroll(
-        !!inputPanelRef.current &&
-          inputPanelRef.current.contains(e.target as HTMLElement)
-      );
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => document.removeEventListener("mousedown", handleMouseDown);
-  });
 
   // preview messages
   const messages = (session.messages as RenderMessage[])
@@ -382,15 +372,18 @@ export function Chat(props: { showSideBar?: () => void }) {
         </div>
       </div>
 
-      <div className={styles["chat-input-panel"]} ref={inputPanelRef}>
+      <div className={styles["chat-input-panel"]}>
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
+            ref={inputRef}
             className={styles["chat-input"]}
             placeholder={Locale.Chat.Input(submitKey)}
             rows={3}
             onInput={(e) => setUserInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={(e) => onInputKeyDown(e as any)}
+            onFocus={() => setAutoScroll(true)}
+            onBlur={() => setAutoScroll(false)}
             autoFocus
           />
           <IconButton