Update target selection keyboard shortcuts to use number keys across views

- instead of alt W/A/C, use alt 1/2/3
- the issue is that from home, for alt 1/2/3 shortcuts to work they have to be pressed twice
- remove keyboard shortcuts from home
- remove keyboard shortcuts from home, including keycaps on target button
- to home, add keyboard shortcuts alt 1/2/3 to set the target
- prompt field should ignore keyboard shortcuts when main view does

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.module.scss
│                       │   ├── Home.tsx
│                       │   └── hooks
│                       │       └── use-keyboard-shortcuts.ts
│                       ├── Main
│                       │   ├── Main.tsx
│                       │   └── MainView
│                       │       ├── MainView.tsx
│                       │       └── hooks
│                       │           └── use-keyboard-shortcuts.ts
│                       ├── Prompt.tsx
│                       └── hooks
│                           └── use-prompt
│                               └── use-prompt.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── common
                    │   └── prompts
                    │       └── PromptField
                    │           ├── PromptField.tsx
                    │           └── hooks
                    │               └── use-keyboard-shortcuts.ts
                    └── prompt
                        └── TargetButton
                            ├── TargetButton.stories.tsx
                            ├── TargetButton.tsx
                            └── index.ts

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.tsx

@@ -12,19 +12,18 @@ import { CompactableActionButton } from '@ui/components/editor/prompt/Compactabl
 import { Tasks as UiTasks } from '@ui/components/editor/prompt/Tasks'
 import { use_tasks } from './hooks/use-tasks'
 import { use_has_scrolled_past_target_button } from './hooks/use-has-scrolled-past-mode-button'
+import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
 import { use_compacting } from '@shared/hooks'
 import {
   ApiPromptType,
   WebPromptType,
   CliPromptType
 } from '@shared/types/prompt-types'
-import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
 import { use_is_landscape } from '../hooks/use-is-landscape'
 
 type Props = {
   vscode: any
   is_active: boolean
-  on_go_forward: () => void
   on_chatbots_click: () => void
   on_api_calls_click: () => void
   on_cli_calls_click: () => void
@@ -44,6 +43,13 @@ export const Home: React.FC<Props> = (props) => {
   const { has_scrolled_past_target_button, target_ref, handle_scroll } =
     use_has_scrolled_past_target_button(props.is_active)
 
+  const { is_alt_pressed } = use_keyboard_shortcuts({
+    is_active: props.is_active,
+    on_chatbots_click: props.on_chatbots_click,
+    on_api_calls_click: props.on_api_calls_click,
+    on_cli_calls_click: props.on_cli_calls_click
+  })
+
   const {
     tasks,
     handle_reorder,
@@ -65,9 +71,6 @@ export const Home: React.FC<Props> = (props) => {
 
   const header_targets_ref = useRef<HTMLDivElement>(null)
 
-  const [is_alt_pressed, set_is_alt_pressed] = useState(false)
-  const alt_interrupted_ref = useRef(false)
-
   const discord_label = 'Discord'
   const coffee_label = t('header.buy-me-a-coffee')
 
@@ -82,64 +85,6 @@ export const Home: React.FC<Props> = (props) => {
     return () => window.removeEventListener('message', handle_message)
   }, [])
 
-  useEffect(() => {
-    const handle_key_down = (event: KeyboardEvent) => {
-      if (
-        event.key == 'Alt' &&
-        !event.shiftKey &&
-        !event.ctrlKey &&
-        !event.metaKey
-      ) {
-        if (!alt_interrupted_ref.current) {
-          set_is_alt_pressed(true)
-        }
-      } else {
-        if (event.altKey) {
-          alt_interrupted_ref.current = true
-        }
-        set_is_alt_pressed(false)
-      }
-    }
-
-    const handle_key_up = (event: KeyboardEvent) => {
-      if (!event.altKey) {
-        alt_interrupted_ref.current = false
-      } else if (event.key != 'Alt') {
-        alt_interrupted_ref.current = true
-      }
-      set_is_alt_pressed(
-        event.altKey &&
-          !alt_interrupted_ref.current &&
-          !event.shiftKey &&
-          !event.ctrlKey &&
-          !event.metaKey
-      )
-    }
-
-    const handle_blur = () => {
-      set_is_alt_pressed(false)
-      alt_interrupted_ref.current = false
-    }
-
-    window.addEventListener('keydown', handle_key_down)
-    window.addEventListener('keyup', handle_key_up)
-    window.addEventListener('blur', handle_blur)
-
-    return () => {
-      window.removeEventListener('keydown', handle_key_down)
-      window.removeEventListener('keyup', handle_key_up)
-      window.removeEventListener('blur', handle_blur)
-    }
-  }, [])
-
-  use_keyboard_shortcuts({
-    is_active: props.is_active,
-    on_go_forward: props.on_go_forward,
-    on_chatbots_click: props.on_chatbots_click,
-    on_api_calls_click: props.on_api_calls_click,
-    on_cli_calls_click: props.on_cli_calls_click
-  })
-
   const header = (
     <div className={styles.header}>
       <div
@@ -192,7 +137,7 @@ export const Home: React.FC<Props> = (props) => {
           hover_color={
             props.web_prompt_type == 'edit-files' ? 'blue' : 'purple'
           }
-          keycap_char={is_alt_pressed ? 'W' : undefined}
+          keycap_char={is_alt_pressed ? '1' : undefined}
         />
         <UiTargetButton
           label="API"
@@ -201,7 +146,7 @@ export const Home: React.FC<Props> = (props) => {
           hover_color={
             props.api_prompt_type == 'edit-files' ? 'blue' : 'purple'
           }
-          keycap_char={is_alt_pressed ? 'A' : undefined}
+          keycap_char={is_alt_pressed ? '2' : undefined}
         />
         <UiTargetButton
           label="CLI"
@@ -210,7 +155,7 @@ export const Home: React.FC<Props> = (props) => {
           hover_color={
             props.cli_prompt_type == 'edit-files' ? 'blue' : 'purple'
           }
-          keycap_char={is_alt_pressed ? 'C' : undefined}
+          keycap_char={is_alt_pressed ? '3' : undefined}
         />
       </div>
     </div>
@@ -227,21 +172,21 @@ export const Home: React.FC<Props> = (props) => {
         }
         on_click={props.on_chatbots_click}
         hover_color={props.web_prompt_type == 'edit-files' ? 'blue' : 'purple'}
-        keycap_char={is_alt_pressed ? 'W' : undefined}
+        keycap_char={is_alt_pressed ? '1' : undefined}
       />
       <UiTargetButton
         label="API"
         description={t('home.target.api.description')}
         on_click={props.on_api_calls_click}
         hover_color={props.api_prompt_type == 'edit-files' ? 'blue' : 'purple'}
-        keycap_char={is_alt_pressed ? 'A' : undefined}
+        keycap_char={is_alt_pressed ? '2' : undefined}
       />
       <UiTargetButton
         label="CLI"
         description={t('home.target.cli.description')}
         on_click={props.on_cli_calls_click}
         hover_color={props.cli_prompt_type == 'edit-files' ? 'blue' : 'purple'}
-        keycap_char={is_alt_pressed ? 'C' : undefined}
+        keycap_char={is_alt_pressed ? '3' : undefined}
       />
     </div>
   )

apps/editor/src/views/prompt/frontend/Home/hooks/use-keyboard-shortcuts.ts

@@ -1,29 +1,46 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 
-type Params = {
+export const use_keyboard_shortcuts = (params: {
   is_active: boolean
-  on_go_forward: () => void
   on_chatbots_click: () => void
   on_api_calls_click: () => void
   on_cli_calls_click: () => void
-}
-
-export const use_keyboard_shortcuts = (params: Params) => {
+}) => {
+  const [is_alt_pressed, set_is_alt_pressed] = useState(false)
+  const alt_interrupted_ref = useRef(false)
   const left_alt_pressed_ref = useRef(false)
 
+  const update_alt_pressed = (val: boolean) => {
+    set_is_alt_pressed(val)
+  }
+
   useEffect(() => {
-    const handle_mouse_up = (event: MouseEvent) => {
-      if (params.is_active && event.button == 4) {
-        params.on_go_forward()
-      }
+    if (!params.is_active) {
+      update_alt_pressed(false)
+      return
     }
 
     const handle_key_down = (event: KeyboardEvent) => {
       if (event.code == 'AltLeft') {
         left_alt_pressed_ref.current = true
       }
 
-      if (!params.is_active) return
+      if (
+        event.code == 'AltLeft' &&
+        !event.shiftKey &&
+        !event.ctrlKey &&
+        !event.metaKey
+      ) {
+        if (!alt_interrupted_ref.current) {
+          update_alt_pressed(true)
+        }
+      } else {
+        if (event.altKey) {
+          alt_interrupted_ref.current = true
+        }
+
+        update_alt_pressed(false)
+      }
 
       if (
         event.altKey &&
@@ -32,13 +49,13 @@ export const use_keyboard_shortcuts = (params: Params) => {
         !event.metaKey &&
         !event.ctrlKey
       ) {
-        if (event.code == 'KeyW') {
+        if (event.code == 'Digit1' || event.code == 'Numpad1') {
           event.preventDefault()
           params.on_chatbots_click()
-        } else if (event.code == 'KeyA') {
+        } else if (event.code == 'Digit2' || event.code == 'Numpad2') {
           event.preventDefault()
           params.on_api_calls_click()
-        } else if (event.code == 'KeyC') {
+        } else if (event.code == 'Digit3' || event.code == 'Numpad3') {
           event.preventDefault()
           params.on_cli_calls_click()
         }
@@ -49,26 +66,43 @@ export const use_keyboard_shortcuts = (params: Params) => {
       if (event.code == 'AltLeft') {
         left_alt_pressed_ref.current = false
       }
+
+      if (!event.altKey) {
+        alt_interrupted_ref.current = false
+      } else if (event.code != 'AltLeft') {
+        alt_interrupted_ref.current = true
+      }
+      update_alt_pressed(
+        event.altKey &&
+          left_alt_pressed_ref.current &&
+          !alt_interrupted_ref.current &&
+          !event.shiftKey &&
+          !event.ctrlKey &&
+          !event.metaKey
+      )
     }
 
     const handle_blur = () => {
       left_alt_pressed_ref.current = false
+      update_alt_pressed(false)
+      alt_interrupted_ref.current = false
     }
 
-    window.addEventListener('mouseup', handle_mouse_up)
     window.addEventListener('keydown', handle_key_down)
     window.addEventListener('keyup', handle_key_up)
     window.addEventListener('blur', handle_blur)
+
     return () => {
-      window.removeEventListener('mouseup', handle_mouse_up)
       window.removeEventListener('keydown', handle_key_down)
       window.removeEventListener('keyup', handle_key_up)
       window.removeEventListener('blur', handle_blur)
     }
   }, [
     params.is_active,
-    params.on_go_forward,
     params.on_chatbots_click,
-    params.on_api_calls_click
+    params.on_api_calls_click,
+    params.on_cli_calls_click
   ])
+
+  return { is_alt_pressed }
 }

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -513,6 +513,9 @@ export const MainView: React.FC<Props> = (props) => {
           on_tabs_reorder={props.on_tabs_reorder}
           voice_input_push_to_talk={props.voice_input_push_to_talk}
           currently_open_file_path={props.currently_open_file_path}
+          are_keyboard_shortcuts_disabled={
+            props.are_keyboard_shortcuts_disabled
+          }
           translations={{
             voice_input: t('prompt-field.voice-input'),
             stop_recording: t('prompt-field.stop-recording'),
@@ -540,6 +543,7 @@ export const MainView: React.FC<Props> = (props) => {
             attach_selected_files: t('prompt-field.attach-selected-files'),
             more: t('prompt-field.more')
           }}
+          
         />
       </div>
 

apps/editor/src/views/prompt/frontend/Prompt.tsx

@@ -265,12 +265,6 @@ export const Prompt = () => {
   }
 
   const current_state = get_current_instructions_state()
-  const are_keyboard_shortcuts_disabled =
-    !!updating_web_configuration ||
-    !!updating_api_configuration ||
-    !!updating_cli_configuration ||
-    !!items_in_preview ||
-    active_view != 'main'
 
   const is_main_slot_hidden =
     !!updating_web_configuration ||
@@ -298,7 +292,11 @@ export const Prompt = () => {
                 set_api_configurations={set_api_configurations}
                 scroll_reset_key={main_view_scroll_reset_key}
                 are_keyboard_shortcuts_disabled={
-                  are_keyboard_shortcuts_disabled
+                  !!updating_web_configuration ||
+                  !!updating_api_configuration ||
+                  !!updating_cli_configuration ||
+                  !!items_in_preview ||
+                  active_view == 'home'
                 }
                 vscode={vscode}
                 on_web_configuration_edit={(web_configuration) => {
@@ -412,7 +410,6 @@ export const Prompt = () => {
                 web_prompt_type={web_prompt_type}
                 api_prompt_type={api_prompt_type}
                 cli_prompt_type={cli_prompt_type}
-                on_go_forward={() => set_active_view('main')}
                 on_chatbots_click={() => {
                   set_active_view('main')
                   set_main_view_scroll_reset_key((k) => k + 1)
@@ -544,13 +541,13 @@ export const Prompt = () => {
               }
               title="Edit Agent"
             >
-            <EditCliConfigurationForm
-              cli_configuration={updating_cli_configuration}
-              on_update={set_updated_cli_configuration}
-              pick_agent={(agent_id) => {
-                post_message(vscode, { command: 'PICK_AGENT', agent_id })
-              }}
-            />
+              <EditCliConfigurationForm
+                cli_configuration={updating_cli_configuration}
+                on_update={set_updated_cli_configuration}
+                pick_agent={(agent_id) => {
+                  post_message(vscode, { command: 'PICK_AGENT', agent_id })
+                }}
+              />
             </UiPage>
           </div>
         )}

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.tsx

@@ -91,6 +91,7 @@ export type PromptFieldProps = {
   target: Target
   on_target_change: (target: Target) => void
   active_border_color?: 'blue' | 'purple' | 'yellow'
+  are_keyboard_shortcuts_disabled?: boolean
   translations: {
     voice_input: string
     stop_recording: string
@@ -114,6 +115,7 @@ export type PromptFieldProps = {
     attach_selected_files: string
     more: string
   }
+  
 }
 
 export const PromptField: React.FC<PromptFieldProps> = (props) => {

packages/ui/src/components/editor/common/prompts/PromptField/hooks/use-keyboard-shortcuts.ts

@@ -27,6 +27,7 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
 
   useEffect(() => {
     const handle_key_down = (e: KeyboardEvent) => {
+      if (props.are_keyboard_shortcuts_disabled) return
       if (e.code == 'AltLeft') {
         left_alt_pressed_ref.current = true
       }
@@ -130,12 +131,14 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
   }, [
     props.show_edit_format_selector,
     props.on_edit_format_change,
-    props.edit_format
+    props.edit_format,
+    props.are_keyboard_shortcuts_disabled
   ])
 
   const handle_container_key_down = (
     e: React.KeyboardEvent<HTMLDivElement>
   ) => {
+    if (props.are_keyboard_shortcuts_disabled) return
     if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey && !e.altKey) {
       if (props.is_recording) {
         props.on_recording_finished()