From d4c92572190fc73e6ccb832e4da6733349623084 Mon Sep 17 00:00:00 2001
From: kang-square <112981282+kang-square@users.noreply.github.com>
Date: Tue, 4 Mar 2025 11:51:26 -0500
Subject: [PATCH 1/3] shortcut and history message

---
 ui/desktop/src/components/ChatView.tsx | 11 +++++-
 ui/desktop/src/components/Input.tsx    | 51 ++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/ChatView.tsx b/ui/desktop/src/components/ChatView.tsx
index c11430815d59..c2c02f1f73f9 100644
--- a/ui/desktop/src/components/ChatView.tsx
+++ b/ui/desktop/src/components/ChatView.tsx
@@ -278,7 +278,16 @@ export default function ChatView({
 
         <div className="relative">
           {isLoading && <LoadingGoose />}
-          <Input handleSubmit={handleSubmit} isLoading={isLoading} onStop={onStopGoose} />
+          <Input
+            handleSubmit={handleSubmit}
+            isLoading={isLoading}
+            onStop={onStopGoose}
+            commandHistory={filteredMessages
+              .filter((m) => isUserMessage(m))
+              .map((m) => m.content.find((c) => c.type === 'text')?.text || '')
+              .filter((text) => text.trim())
+              .reverse()}
+          />
           <BottomMenu hasMessages={hasMessages} setView={setView} />
         </div>
       </Card>
diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
index b330d163924c..d163cead92ef 100644
--- a/ui/desktop/src/components/Input.tsx
+++ b/ui/desktop/src/components/Input.tsx
@@ -7,12 +7,19 @@ interface InputProps {
   handleSubmit: (e: React.FormEvent) => void;
   isLoading?: boolean;
   onStop?: () => void;
+  commandHistory?: string[];
 }
 
-export default function Input({ handleSubmit, isLoading = false, onStop }: InputProps) {
+export default function Input({
+  handleSubmit,
+  isLoading = false,
+  onStop,
+  commandHistory = [],
+}: InputProps) {
   const [value, setValue] = useState('');
-  // State to track if the IME is composing (i.e., in the middle of Japanese IME input)
   const [isComposing, setIsComposing] = useState(false);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [savedInput, setSavedInput] = useState('');
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -51,6 +58,40 @@ export default function Input({ handleSubmit, isLoading = false, onStop }: Input
   };
 
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Handle command history navigation
+    if ((evt.metaKey || evt.ctrlKey) && (evt.key === 'ArrowUp' || evt.key === 'ArrowDown')) {
+      evt.preventDefault();
+
+      // Save current input if we're just starting to navigate history
+      if (historyIndex === -1) {
+        setSavedInput(value);
+      }
+
+      // Calculate new history index
+      let newIndex = historyIndex;
+      if (evt.key === 'ArrowUp') {
+        // Move backwards through history
+        if (historyIndex < commandHistory.length - 1) {
+          newIndex = historyIndex + 1;
+        }
+      } else {
+        // Move forwards through history
+        if (historyIndex > -1) {
+          newIndex = historyIndex - 1;
+        }
+      }
+
+      // Update index and value
+      setHistoryIndex(newIndex);
+      if (newIndex === -1) {
+        // Restore saved input when going past the end of history
+        setValue(savedInput);
+      } else {
+        setValue(commandHistory[newIndex] || '');
+      }
+      return;
+    }
+
     if (evt.key === 'Enter') {
       // should not trigger submit on Enter if it's composing (IME input in progress) or shift is pressed
       if (evt.shiftKey || isComposing) {
@@ -66,6 +107,8 @@ export default function Input({ handleSubmit, isLoading = false, onStop }: Input
       if (!isLoading && value.trim()) {
         handleSubmit(new CustomEvent('submit', { detail: { value } }));
         setValue('');
+        setHistoryIndex(-1);
+        setSavedInput('');
       }
     }
   };
@@ -75,6 +118,8 @@ export default function Input({ handleSubmit, isLoading = false, onStop }: Input
     if (value.trim() && !isLoading) {
       handleSubmit(new CustomEvent('submit', { detail: { value } }));
       setValue('');
+      setHistoryIndex(-1);
+      setSavedInput('');
     }
   };
 
@@ -94,7 +139,7 @@ export default function Input({ handleSubmit, isLoading = false, onStop }: Input
       <textarea
         autoFocus
         id="dynamic-textarea"
-        placeholder="What can goose help with?"
+        placeholder="What can goose help with? (Cmd/Ctrl + ↑/↓ for history)"
         value={value}
         onChange={handleChange}
         onCompositionStart={handleCompositionStart}

From 86a9159222314cd3b8c5a459be91709faa858a96 Mon Sep 17 00:00:00 2001
From: kang-square <112981282+kang-square@users.noreply.github.com>
Date: Tue, 4 Mar 2025 15:51:11 -0500
Subject: [PATCH 2/3] improve the code

---
 ui/desktop/src/components/ChatView.tsx | 22 +++++++---
 ui/desktop/src/components/Input.tsx    | 60 ++++++++++++++------------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/ui/desktop/src/components/ChatView.tsx b/ui/desktop/src/components/ChatView.tsx
index c2c02f1f73f9..c1ed92696ba9 100644
--- a/ui/desktop/src/components/ChatView.tsx
+++ b/ui/desktop/src/components/ChatView.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { getApiUrl } from '../config';
 import { generateSessionId } from '../sessions';
 import BottomMenu from './BottomMenu';
@@ -226,6 +226,20 @@ export default function ChatView({
     return true;
   };
 
+  const commandHistory = useMemo(() => {
+    return filteredMessages
+      .reduce<string[]>((history, message) => {
+        if (isUserMessage(message)) {
+          const text = message.content.find((c) => c.type === 'text')?.text?.trim();
+          if (text) {
+            history.push(text);
+          }
+        }
+        return history;
+      }, [])
+      .reverse();
+  }, [filteredMessages, isUserMessage]);
+
   return (
     <div className="flex flex-col w-full h-screen items-center justify-center">
       <div className="relative flex items-center h-[36px] w-full bg-bgSubtle border-b border-borderSubtle">
@@ -282,11 +296,7 @@ export default function ChatView({
             handleSubmit={handleSubmit}
             isLoading={isLoading}
             onStop={onStopGoose}
-            commandHistory={filteredMessages
-              .filter((m) => isUserMessage(m))
-              .map((m) => m.content.find((c) => c.type === 'text')?.text || '')
-              .filter((text) => text.trim())
-              .reverse()}
+            commandHistory={commandHistory}
           />
           <BottomMenu hasMessages={hasMessages} setView={setView} />
         </div>
diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
index d163cead92ef..e82bb942989a 100644
--- a/ui/desktop/src/components/Input.tsx
+++ b/ui/desktop/src/components/Input.tsx
@@ -57,38 +57,42 @@ export default function Input({
     setIsComposing(false);
   };
 
-  const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Handle command history navigation
-    if ((evt.metaKey || evt.ctrlKey) && (evt.key === 'ArrowUp' || evt.key === 'ArrowDown')) {
-      evt.preventDefault();
+  const handleHistoryNavigation = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    evt.preventDefault();
 
-      // Save current input if we're just starting to navigate history
-      if (historyIndex === -1) {
-        setSavedInput(value);
-      }
+    // Save current input if we're just starting to navigate history
+    if (historyIndex === -1) {
+      setSavedInput(value);
+    }
 
-      // Calculate new history index
-      let newIndex = historyIndex;
-      if (evt.key === 'ArrowUp') {
-        // Move backwards through history
-        if (historyIndex < commandHistory.length - 1) {
-          newIndex = historyIndex + 1;
-        }
-      } else {
-        // Move forwards through history
-        if (historyIndex > -1) {
-          newIndex = historyIndex - 1;
-        }
+    // Calculate new history index
+    let newIndex = historyIndex;
+    if (evt.key === 'ArrowUp') {
+      // Move backwards through history
+      if (historyIndex < commandHistory.length - 1) {
+        newIndex = historyIndex + 1;
       }
-
-      // Update index and value
-      setHistoryIndex(newIndex);
-      if (newIndex === -1) {
-        // Restore saved input when going past the end of history
-        setValue(savedInput);
-      } else {
-        setValue(commandHistory[newIndex] || '');
+    } else {
+      // Move forwards through history
+      if (historyIndex > -1) {
+        newIndex = historyIndex - 1;
       }
+    }
+
+    // Update index and value
+    setHistoryIndex(newIndex);
+    if (newIndex === -1) {
+      // Restore saved input when going past the end of history
+      setValue(savedInput);
+    } else {
+      setValue(commandHistory[newIndex] || '');
+    }
+  };
+
+  const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Handle command history navigation
+    if ((evt.metaKey || evt.ctrlKey) && (evt.key === 'ArrowUp' || evt.key === 'ArrowDown')) {
+      handleHistoryNavigation(evt);
       return;
     }
 

From 26c80e158ea3f2902364a1bcf334df336c94b3ad Mon Sep 17 00:00:00 2001
From: kang-square <112981282+kang-square@users.noreply.github.com>
Date: Tue, 4 Mar 2025 15:53:06 -0500
Subject: [PATCH 3/3] add back comment

---
 ui/desktop/src/components/Input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
index e82bb942989a..3d3a33247799 100644
--- a/ui/desktop/src/components/Input.tsx
+++ b/ui/desktop/src/components/Input.tsx
@@ -17,6 +17,7 @@ export default function Input({
   commandHistory = [],
 }: InputProps) {
   const [value, setValue] = useState('');
+  // State to track if the IME is composing (i.e., in the middle of Japanese IME input)
   const [isComposing, setIsComposing] = useState(false);
   const [historyIndex, setHistoryIndex] = useState(-1);
   const [savedInput, setSavedInput] = useState('');