Add Alt plus digit shortcuts and keycap indicators for switching targets

- replace shortcut alt+esc with 'alt+1' (web) 'alt+2' (api) and 'alt+3' (cli). Regarding keycaps: once alt is pressed, open the 'target dropdown', and render keycaps over the items
- don't show numeric keycap over current target

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            ├── PromptField
                            │   ├── PromptField.module.scss
                            │   ├── PromptField.stories.tsx
                            │   ├── PromptField.tsx
                            │   ├── hooks
                            │   │   ├── use-drag-drop.ts
                            │   │   ├── use-dropdown.ts
                            │   │   ├── use-ghost-text.ts
                            │   │   ├── use-handlers
                            │   │   │   ├── handle-copy.ts
                            │   │   │   ├── handle-cut.ts
                            │   │   │   ├── handle-input-change.ts
                            │   │   │   ├── handle-input-click.ts
                            │   │   │   ├── handle-key-down.ts
                            │   │   │   ├── handle-paste.ts
                            │   │   │   ├── handle-submit.ts
                            │   │   │   ├── index.ts
                            │   │   │   ├── types.ts
                            │   │   │   ├── use-handlers.ts
                            │   │   │   └── utils.ts
                            │   │   └── use-keyboard-shortcuts.ts
                            │   └── index.ts
                            ├── Template
                            │   ├── Template.module.scss
                            │   ├── Template.tsx
                            │   └── index.ts
                            └── shared
                                └── symbols
                                    ├── caret.ts
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

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

@@ -673,7 +673,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
                 onMouseEnter={() => set_is_target_dropdown_open(true)}
                 onMouseLeave={() => set_is_target_dropdown_open(false)}
               >
-                {is_target_dropdown_open && (
+                {(is_target_dropdown_open || is_alt_pressed) && (
                   <div
                     className={
                       styles['footer__right__target-switch__dropdown-wrapper']
@@ -683,7 +683,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
                       className={styles['footer__right__target-switch__dropdown']}
                       onClick={(e) => e.stopPropagation()}
                     >
-                      {(['WEB', 'API', 'CLI'] as Target[]).map((t) => (
+                      {(['WEB', 'API', 'CLI'] as Target[]).map((t, idx) => (
                         <button
                           key={t}
                           className={
@@ -696,34 +696,38 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
                           }}
                           disabled={t == props.target}
                         >
-                          {t}
+                          {is_alt_pressed && t != props.target ? (
+                            <KeycapWrapper char={(idx + 1).toString()}>
+                              <span style={{ padding: '0 2px' }}>{t}</span>
+                            </KeycapWrapper>
+                          ) : (
+                            t
+                          )}
                         </button>
                       ))}
                     </div>
                   </div>
                 )}
-                <KeycapWrapper char={is_alt_pressed ? 'Esc' : undefined}>
-                  <button
-                    className={cn(
-                      styles['footer__right__submit__button'],
-                      styles['footer__right__target-switch__button'],
-                      {
-                        [styles['footer__right__submit__button--hovered']]:
-                          is_target_dropdown_open
-                      }
-                    )}
+                <button
+                  className={cn(
+                    styles['footer__right__submit__button'],
+                    styles['footer__right__target-switch__button'],
+                    {
+                      [styles['footer__right__submit__button--hovered']]:
+                        is_target_dropdown_open || is_alt_pressed
+                    }
+                  )}
+                >
+                  <span
+                    className={styles['footer__right__target-switch__label']}
                   >
-                    <span
-                      className={styles['footer__right__target-switch__label']}
-                    >
-                      {props.target == 'WEB'
-                        ? 'WEB'
-                        : props.target == 'API'
-                          ? 'API'
-                          : 'CLI'}
-                    </span>
-                  </button>
-                </KeycapWrapper>
+                    {props.target == 'WEB'
+                      ? 'WEB'
+                      : props.target == 'API'
+                        ? 'API'
+                        : 'CLI'}
+                  </span>
+                </button>
               </div>
             )}
             {!props.is_copy_only &&

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

@@ -39,17 +39,19 @@ export const use_keyboard_shortcuts = (props: PromptFieldProps) => {
         !e.ctrlKey &&
         !e.metaKey
       ) {
-        if (e.code == 'Escape') {
+        if (e.code == 'Digit1') {
           e.preventDefault()
-          if (props.on_target_change) {
-            props.on_target_change(
-              props.target == 'WEB'
-                ? 'API'
-                : props.target == 'API'
-                  ? 'CLI'
-                  : 'WEB'
-            )
-          }
+          props.on_target_change?.('WEB')
+          return
+        }
+        if (e.code == 'Digit2') {
+          e.preventDefault()
+          props.on_target_change?.('API')
+          return
+        }
+        if (e.code == 'Digit3') {
+          e.preventDefault()
+          props.on_target_change?.('CLI')
           return
         }