Introduce use_is_mac hook to detect macOS and update UI components to use platform-specific keyboard shortcuts ⌘/Ctrl in dropdown menus and headers

Author: robertpiosik

packages/shared/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-is-narrow-viewport'
+export * from './use-is-mac'

packages/shared/src/hooks/use-is-mac.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+
+export const use_is_mac = (): boolean => {
+  return useMemo(() => {
+    if (typeof navigator == 'undefined') return false
+    const any_nav = navigator as any
+    const uach_platform: string | undefined = any_nav?.userAgentData?.platform
+    if (typeof uach_platform == 'string') {
+      return uach_platform.toLowerCase().includes('mac')
+    }
+    if (typeof navigator.userAgent == 'string') {
+      return /mac/i.test(navigator.userAgent)
+    }
+    return false
+  }, [])
+}

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -42,3 +42,7 @@
   color: var(--vscode-descriptionForeground);
   font-size: 12px;
 }
+
+.underlined {
+  text-decoration: underline;
+}

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -11,6 +11,7 @@ export namespace DropdownMenu {
 
   export type Props = {
     items: Item[]
+    underline_non_selected_items?: boolean
   }
 }
 
@@ -21,22 +22,39 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
   return (
     <div className={styles.menu}>
       <div className={styles.menu__inner}>
-        {props.items.map((item, index) => (
-          <div
-            key={index}
-            className={styles.item}
-            onClick={item.on_click}
-            data-selected={item.is_selected && is_preselection_respected}
-            onMouseEnter={() => {
-              set_is_preselection_respected(false)
-            }}
-          >
-            <span>{item.label}</span>
-            {item.shortcut && (
-              <span className={styles.shortcut}>{item.shortcut}</span>
-            )}
-          </div>
-        ))}
+        {props.items.map((item, index) => {
+          const is_selected = item.is_selected && is_preselection_respected
+          const should_underline =
+            props.underline_non_selected_items && !is_selected
+
+          return (
+            <div
+              key={index}
+              className={styles.item}
+              onClick={item.on_click}
+              data-selected={is_selected}
+              onMouseEnter={() => {
+                set_is_preselection_respected(false)
+              }}
+            >
+              <span>
+                {should_underline ? (
+                  <>
+                    <span className={styles.underlined}>
+                      {item.label.substring(0, 1)}
+                    </span>
+                    {item.label.substring(1)}
+                  </>
+                ) : (
+                  item.label
+                )}
+              </span>
+              {item.shortcut && (
+                <span className={styles.shortcut}>{item.shortcut}</span>
+              )}
+            </div>
+          )
+        })}
       </div>
     </div>
   )

packages/ui/src/components/editor/panel/Dropdown/Dropdown.tsx

@@ -23,18 +23,21 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
   const [is_open, set_is_open] = useState(false)
   const [just_opened, set_just_opened] = useState(false)
   const container_ref = useRef<HTMLDivElement>(null)
+  const opened_by_shortcut = useRef(false)
 
   const selected_option = props.options.find(
     (option) => option.value == props.selected_value
   )
 
   const handle_toggle = () => {
+    opened_by_shortcut.current = false
     set_is_open(!is_open)
     set_just_opened(!is_open)
   }
 
   const handle_select = (value: T) => {
     props.on_change(value)
+    opened_by_shortcut.current = false
     set_is_open(false)
     set_just_opened(false)
   }
@@ -63,6 +66,7 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
   }
 
   const handle_mouse_leave = () => {
+    opened_by_shortcut.current = false
     set_is_open(false)
     set_just_opened(false)
   }
@@ -73,6 +77,7 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
         container_ref.current &&
         !container_ref.current.contains(event.target as Node)
       ) {
+        opened_by_shortcut.current = false
         set_is_open(false)
         set_just_opened(false)
       }
@@ -84,6 +89,36 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
     }
   }, [])
 
+  useEffect(() => {
+    const handle_key_down = (event: KeyboardEvent) => {
+      if (event.altKey && event.shiftKey && !is_open) {
+        event.preventDefault()
+        set_is_open(true)
+        set_just_opened(true)
+        opened_by_shortcut.current = true
+      }
+    }
+
+    const handle_key_up = (event: KeyboardEvent) => {
+      if (
+        opened_by_shortcut.current &&
+        (event.key == 'Alt' || event.key == 'Shift')
+      ) {
+        set_is_open(false)
+        set_just_opened(false)
+        opened_by_shortcut.current = false
+      }
+    }
+
+    document.addEventListener('keydown', handle_key_down)
+    document.addEventListener('keyup', handle_key_up)
+
+    return () => {
+      document.removeEventListener('keydown', handle_key_down)
+      document.removeEventListener('keyup', handle_key_up)
+    }
+  }, [is_open])
+
   return (
     <div
       className={cn(styles.container, { [styles['button--open']]: is_open })}
@@ -125,6 +160,7 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
             on_click: () => handle_select(option.value),
             is_selected: just_opened && option.value == props.selected_value
           }))}
+          underline_non_selected_items={opened_by_shortcut.current}
         />
       )}
     </div>

packages/ui/src/components/editor/panel/PromptField/PromptField.tsx

@@ -7,7 +7,7 @@ import { use_handlers } from './hooks/use-handlers'
 import { use_dropdown } from './hooks/use-dropdown'
 import { use_drag_drop } from './hooks/use-drag-drop'
 import { DropdownMenu } from '../../common/DropdownMenu'
-import { use_is_narrow_viewport } from '@shared/hooks'
+import { use_is_narrow_viewport, use_is_mac } from '@shared/hooks'
 import { search_paths } from '@shared/utils/search-paths'
 import { get_display_text } from './utils/get-display-text'
 import {
@@ -135,19 +135,8 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     []
   )
 
-  const is_mac = useMemo(() => {
-    if (typeof navigator == 'undefined') return false
-    const any_nav = navigator as any
-    const uach_platform: string | undefined = any_nav?.userAgentData?.platform
-    if (typeof uach_platform == 'string') {
-      return uach_platform.toLowerCase().includes('mac')
-    }
-    if (typeof navigator.userAgent == 'string') {
-      return /mac/i.test(navigator.userAgent)
-    }
-    return false
-  }, [])
-  const mod_key = is_mac ? 'cmd' : 'ctrl'
+  const is_mac = use_is_mac()
+  const mod_key = is_mac ? '⌘' : 'Ctrl'
 
   const display_text = useMemo(() => {
     return get_display_text(props.value, props.context_file_paths ?? [])
@@ -521,12 +510,12 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
                       items={[
                         {
                           label: 'Select...',
-                          shortcut: `${mod_key}+${is_mac ? 'return' : 'enter'}`,
+                          shortcut: `${mod_key}+${is_mac ? 'Return' : 'Enter'}`,
                           on_click: handle_select_click
                         },
                         {
                           label: 'Copy prompt',
-                          shortcut: `${mod_key}+${is_mac ? 'option' : 'alt'}+c`,
+                          shortcut: `${mod_key}+${is_mac ? 'Option' : 'Alt'}+C`,
                           on_click: handle_copy_click
                         }
                       ]}

packages/ui/src/components/editor/panel/Responses/Responses.module.scss

@@ -62,7 +62,7 @@
           font-size: 12px !important;
         }
 
-        &__manual-entry {
+        &__no-instructions {
           font-style: italic;
           padding-right: 1px;
         }

packages/ui/src/components/editor/panel/Responses/Responses.tsx

@@ -73,11 +73,11 @@ export const Responses: React.FC<Props> = (props) => {
                 <span
                   className={
                     styles[
-                      'responses__item__content__instructions__manual-entry'
+                      'responses__item__content__instructions__no-instructions'
                     ]
                   }
                 >
-                  Added manually
+                  Response preview
                 </span>
               )}
             </div>

packages/vscode/src/constants/instructions.ts

@@ -6,7 +6,7 @@ export const code_completion_instructions_for_panel = (
   row: number,
   column: number
 ) =>
-  `Find correct replacement text for the <missing_text> symbol. Your response must begin with a code block containing the replacement text, followed by an explanation. The first line of the code block must be a comment containing: ${file_path} ${
+  `Find correct replacement text for the <missing_text> symbol. Your response must begin with a Markdown Code Block containing the replacement text, followed by an explanation. The first line of the Markdown Code Block must be a commented-out text: "${file_path}" ${
     row + 1
   }:${
     column + 1

packages/vscode/src/views/panel/frontend/Main/Main.tsx

@@ -41,8 +41,8 @@ type Props = {
   web_prompt_type: WebPromptType
   api_prompt_type: ApiPromptType
   on_mode_change: (mode: Mode) => void
-  on_web_mode_change: (mode: WebPromptType) => void
-  on_api_mode_change: (mode: ApiPromptType) => void
+  on_web_prompt_type_change: (mode: WebPromptType) => void
+  on_api_prompt_type_change: (mode: ApiPromptType) => void
   has_active_editor: boolean
   has_active_selection: boolean
   chat_input_focus_and_select_key: number
@@ -687,8 +687,8 @@ export const Main: React.FC<Props> = (props) => {
       web_prompt_type={props.web_prompt_type}
       api_prompt_type={props.api_prompt_type}
       context_size_warning_threshold={props.context_size_warning_threshold}
-      on_web_mode_change={props.on_web_mode_change}
-      on_api_mode_change={props.on_api_mode_change}
+      on_web_prompt_type_change={props.on_web_prompt_type_change}
+      on_api_prompt_type_change={props.on_api_prompt_type_change}
       chat_edit_format={chat_edit_format}
       api_edit_format={api_edit_format}
       edit_format_instructions={edit_format_instructions}