Refactor progress indicators to use consistent defaults and enable cancellation where appropriate

Author: robertpiosik

apps/editor/src/commands/apply-chat-response-command/apply-chat-response-command.ts

@@ -144,9 +144,7 @@ export const apply_chat_response_command = (params: {
           params.panel_provider.send_message({
             command: 'SHOW_PROGRESS',
             title: 'Preparing response preview...',
-            show_elapsed_time: false,
-            delay_visibility: file_count < 5,
-            cancellable: false
+            delay_visibility: file_count < 5
           })
         }
 

apps/editor/src/commands/apply-chat-response-command/handlers/active-editor-intelligent-update-handler.ts

@@ -102,7 +102,8 @@ export const handle_active_editor_intelligent_update = async (params: {
     params.panel_provider.send_message({
       command: 'SHOW_PROGRESS',
       title: 'Thinking...',
-      show_elapsed_time: true
+      show_elapsed_time: true,
+      cancellable: true
     })
   }
 
@@ -147,7 +148,8 @@ export const handle_active_editor_intelligent_update = async (params: {
           params.panel_provider.send_message({
             command: 'SHOW_PROGRESS',
             title: 'Thinking...',
-            show_elapsed_time: true
+            show_elapsed_time: true,
+            cancellable: true
           })
         }
       },
@@ -156,7 +158,8 @@ export const handle_active_editor_intelligent_update = async (params: {
           params.panel_provider.send_message({
             command: 'SHOW_PROGRESS',
             title: 'Retrying...',
-            show_elapsed_time: true
+            show_elapsed_time: true,
+            cancellable: true
           })
         }
       }

apps/editor/src/commands/checkpoints-command/actions/create-checkpoint.ts

@@ -233,9 +233,7 @@ export const create_checkpoint = async (
         did_show_modal = true
         panel_provider.send_message({
           command: 'SHOW_PROGRESS',
-          title: 'Creating checkpoint...',
-          cancellable: false,
-          show_elapsed_time: false
+          title: 'Creating checkpoint...'
         })
       }, 1000)
 

apps/editor/src/commands/checkpoints-command/actions/restore-checkpoint.ts

@@ -425,8 +425,6 @@ export const restore_checkpoint = async (params: {
         command: 'SHOW_PROGRESS',
         title,
         progress: current_progress,
-        cancellable: false,
-        show_elapsed_time: false,
         delay_visibility: true
       })
       const progress: vscode.Progress<{
@@ -440,8 +438,6 @@ export const restore_checkpoint = async (params: {
               command: 'SHOW_PROGRESS',
               title,
               progress: Math.min(current_progress, 100),
-              cancellable: false,
-              show_elapsed_time: false,
               delay_visibility: true
             })
           }

apps/editor/src/views/panel/backend/message-handlers/handle-voice-input.ts

@@ -181,6 +181,7 @@ const stop_recording = async (panel_provider: PanelProvider) => {
       panel_provider.send_message({
         command: 'SHOW_PROGRESS',
         title: 'Transcribing...',
+        show_elapsed_time: true,
         cancellable: true
       })
 

apps/editor/src/views/panel/frontend/hooks/use-panel.ts

@@ -349,7 +349,7 @@ export const use_panel = (vscode: any) => {
           title: message.title,
           progress: message.progress,
           tokens_per_second: message.tokens_per_second,
-          cancellable: message.cancellable ?? true,
+          cancellable: message.cancellable ?? false,
           show_elapsed_time: message.show_elapsed_time,
           delay_visibility: message.delay_visibility
         })

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

@@ -25,7 +25,7 @@ export const BrowserExtensionMessage: React.FC = () => {
 
   return (
     <div ref={container_ref} className={styles.container}>
-      <div className={styles.heading}>Enable autofill in your browser</div>
+      <div className={styles.heading}>Enable autofill in chatbots</div>
       <div ref={links_ref} className={styles.links}>
         <a href="https://chromewebstore.google.com/detail/code-web-chat-connector/ljookipcanaglfaocjbgdicfbdhhjffp">
           {compact_step >= 2 ? 'Chrome' : 'Chrome Web Store'}

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

@@ -110,7 +110,9 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     on_copy: props.on_copy,
     on_invocation_count_change: props.on_invocation_count_change,
     is_invocation_dropdown_open,
-    on_toggle_invocation_dropdown: toggle_invocation_dropdown
+    on_toggle_invocation_dropdown: toggle_invocation_dropdown,
+    is_recording: props.is_recording,
+    on_recording_finished: props.on_recording_finished
   })
 
   const {

packages/ui/src/components/editor/panel/PromptField/hooks/use-handlers.ts

@@ -1514,8 +1514,10 @@ export const use_handlers = (
     }
 
     if (key == 'Escape') {
-      if (input_ref.current) {
-        input_ref.current.blur()
+      if (props.is_recording) {
+        props.on_recording_finished()
+      } else {
+        input_ref.current?.blur()
       }
       return
     }

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

@@ -7,6 +7,8 @@ type UseKeyboardShortcutsParams = Pick<
   | 'on_edit_format_change'
   | 'on_copy'
   | 'on_invocation_count_change'
+  | 'is_recording'
+  | 'on_recording_finished'
 > & {
   on_toggle_invocation_dropdown?: () => void
   is_invocation_dropdown_open?: boolean
@@ -124,6 +126,9 @@ export const use_keyboard_shortcuts = (params: UseKeyboardShortcutsParams) => {
     e: React.KeyboardEvent<HTMLDivElement>
   ) => {
     if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey) {
+      if (params.is_recording) {
+        params.on_recording_finished()
+      }
       e.stopPropagation()
       return
     }