From 2ff060ba385dac31ecbf13dde2dca3259139ac87 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Fri, 25 Oct 2024 09:15:07 -0700
Subject: [PATCH] Ctrl+Up/Down message navigation: improve 3

---
 src/apps/chat/AppChat.tsx                         | 15 +++++++++------
 src/apps/settings-modal/ShortcutsModal.tsx        |  4 ++--
 .../components/shortcuts/useGlobalShortcuts.ts    |  2 ++
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx
index 97a84813b..c2b95a228 100644
--- a/src/apps/chat/AppChat.tsx
+++ b/src/apps/chat/AppChat.tsx
@@ -489,7 +489,7 @@ export function AppChat() {
     optimaActions().openModelOptions(chatLLMId);
   }, []);
 
-  const handleMoveFocus = React.useCallback((direction: number) => {
+  const handleMoveFocus = React.useCallback((direction: number, wholeList?: boolean) => {
     // find the parent list
     let messageListElement: HTMLElement | null;
     const activeElement = document.activeElement as HTMLElement;
@@ -509,11 +509,12 @@ export function AppChat() {
     const currentIndex = messageElements.findIndex(el => el.contains(activeElement));
 
     // if going down and we're at/past the last message, scroll to bottom
-    const snapToBottom = direction > 0 && (currentIndex === -1 || currentIndex >= messageElements.length - 1);
-    const nextIndex = snapToBottom ? messageElements.length - 1
-      : (isAtBottom && direction < 0) ? currentIndex
-        : currentIndex === -1 ? (direction < 0 ? 0 : messageElements.length - 1)
-          : currentIndex + direction;
+    const snapToBottom = direction > 0 && (wholeList || (currentIndex === -1 || currentIndex >= messageElements.length - 1));
+    const nextIndex = (wholeList && direction < 0) ? 0
+      : snapToBottom ? messageElements.length - 1
+        : (isAtBottom && direction < 0) ? currentIndex
+          : currentIndex === -1 ? (direction < 0 ? 0 : messageElements.length - 1)
+            : currentIndex + direction;
     if (nextIndex < 0 || nextIndex >= messageElements.length) return;
 
     // perform the smooth scroll and focus
@@ -536,6 +537,8 @@ export function AppChat() {
     // change active message (in any possible panel)
     { key: ShortcutKey.Up, ctrl: true, action: () => handleMoveFocus(-1) },
     { key: ShortcutKey.Down, ctrl: true, action: () => handleMoveFocus(1) },
+    { key: ShortcutKey.Up, ctrl: true, shift: true, action: () => handleMoveFocus(-1, true) },
+    { key: ShortcutKey.Down, ctrl: true, shift: true, action: () => handleMoveFocus(1, true) },
     // open the dropdowns
     { key: 'l', ctrl: true, action: () => llmDropdownRef.current?.openListbox() /*, description: 'Open Models Dropdown'*/ },
     { key: 'p', ctrl: true, action: () => personaDropdownRef.current?.openListbox() /*, description: 'Open Persona Dropdown'*/ },
diff --git a/src/apps/settings-modal/ShortcutsModal.tsx b/src/apps/settings-modal/ShortcutsModal.tsx
index 8048b3122..e55081f24 100644
--- a/src/apps/settings-modal/ShortcutsModal.tsx
+++ b/src/apps/settings-modal/ShortcutsModal.tsx
@@ -28,8 +28,8 @@ const shortcutsMd = platformAwareKeystrokes(`
 | Ctrl + Shift + N | **New** chat                            |
 | Ctrl + Shift + X | **Reset** chat                          |
 | Ctrl + Shift + D | **Delete** chat                         |
-| Ctrl + Up        | Previous message                        |
-| Ctrl + Down      | Next message                            |
+| Ctrl + Up        | Previous message (hold shift for top)   |
+| Ctrl + Down      | Next message (hold shift to bottom)     |
 | Ctrl + [         | **Previous** chat (in history)          |
 | Ctrl + ]         | **Next** chat (in history)              |
 | **Settings**     |                                         |
diff --git a/src/common/components/shortcuts/useGlobalShortcuts.ts b/src/common/components/shortcuts/useGlobalShortcuts.ts
index 601abbfd3..f9cf5dbb9 100644
--- a/src/common/components/shortcuts/useGlobalShortcuts.ts
+++ b/src/common/components/shortcuts/useGlobalShortcuts.ts
@@ -14,6 +14,8 @@ export const ShortcutKey = {
   Right: 'ArrowRight',
   Up: 'ArrowUp',
   Down: 'ArrowDown',
+  PageUp: 'PageUp',
+  PageDown: 'PageDown',
 };
 
 export interface ShortcutObject {