Refine Tools tab button states and text, and update the quick pick message handler to execute commands directly

Author: robertpiosik

packages/vscode/src/view/backend/message-handlers/handle-show-quick-pick.ts

@@ -1,31 +1,25 @@
-import { ViewProvider } from '@/view/backend/view-provider'
 import * as vscode from 'vscode'
-import { ExtensionMessage } from '@/view/types/messages'
+import { ShowQuickPickMessage } from '@/view/types/messages'
 
 export const handle_show_quick_pick = async (
-  provider: ViewProvider,
-  items: Array<{ label: string; description: string; command: string }>,
-  title: string
+  message: ShowQuickPickMessage
 ): Promise<void> => {
-  const quick_pick_items = items.map((item) => ({
+  const quick_pick_items = message.items.map((item) => ({
     label: item.label,
     description: item.description
   }))
 
   const selected_item = await vscode.window.showQuickPick(quick_pick_items, {
-    placeHolder: title
+    placeHolder: message.title
   })
 
   if (selected_item) {
-    const selectedCommand = items.find(
+    const selected_command = message.items.find(
       (item) => item.label == selected_item.label
     )?.command
 
-    if (selectedCommand) {
-      provider.send_message<ExtensionMessage>({
-        command: 'EXECUTE_COMMAND',
-        command_id: selectedCommand
-      })
+    if (selected_command) {
+      vscode.commands.executeCommand(selected_command)
     }
   }
 }

packages/vscode/src/view/backend/view-provider.ts

@@ -453,7 +453,7 @@ export class ViewProvider implements vscode.WebviewViewProvider {
           } else if (message.command == 'EXECUTE_COMMAND') {
             vscode.commands.executeCommand(message.command_id)
           } else if (message.command == 'SHOW_QUICK_PICK') {
-            await handle_show_quick_pick(this, message.items, message.title)
+            await handle_show_quick_pick(message)
           } else if (message.command == 'GET_EDIT_FORMAT') {
             this.send_message<ExtensionMessage>({
               command: 'EDIT_FORMAT',

packages/vscode/src/view/frontend/tabs/tools/ToolsTab.tsx

@@ -68,18 +68,15 @@ export const ToolsTab: React.FC<Props> = (props) => {
     })
   }
 
-  const code_completion_title = has_active_editor
-    ? 'Insert code completion at the caret position'
-    : 'Requires an active editor'
+  const code_completion_title =
+    has_active_editor && !has_active_selection
+      ? undefined
+      : has_active_selection
+      ? 'Unavailable with text selection'
+      : 'Requires an active editor'
 
   const refactor_title = has_active_editor
-    ? 'Refactor the content of the active file'
-    : 'Requires an active editor'
-
-  const apply_chat_response_title = has_active_editor
-    ? has_active_selection
-      ? 'Replace selection or insert at caret with chat response from clipboard'
-      : 'Insert at caret with chat response from clipboard'
+    ? undefined
     : 'Requires an active editor'
 
   const configuration_title = 'Configure API tool settings'
@@ -95,27 +92,25 @@ export const ToolsTab: React.FC<Props> = (props) => {
             handle_execute_command('codeWebChat.codeCompletionAutoAccept')
           }}
           on_quick_pick_trigger_click={handle_code_completions_more_actions}
-          disabled={!has_active_editor}
+          disabled={!has_active_editor || has_active_selection}
           title={code_completion_title}
         >
-          Insert Code Completion
+          Code Completion at Cursor
         </Button>
         <Button
           on_click={() => handle_execute_command('codeWebChat.refactor')}
           on_quick_pick_trigger_click={handle_file_refactoring_more_actions}
           disabled={!has_active_editor}
           title={refactor_title}
         >
-          Refactor Active File
+          Refactor File with Instructions
         </Button>
         <Button
           on_click={() =>
             handle_execute_command('codeWebChat.applyChatResponse')
           }
-          disabled={!has_active_editor}
-          title={apply_chat_response_title}
         >
-          Apply Chat Response
+          Apply Copied Chat Response
         </Button>
       </div>