Improve quick pick navigation consistency for presets and prompt templates, and dim the chat input TAB hint

Author: robertpiosik

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

@@ -120,6 +120,7 @@
     border: 1px solid var(--cwc-border-color);
     border-radius: var(--border-radius-5px);
     pointer-events: none;
+    opacity: var(--dimmed-opacity);
   }
 }
 

packages/vscode/src/views/panel/backend/message-handlers/handle-send-prompt.ts

@@ -310,6 +310,7 @@ async function show_presets_in_group_quick_pick(params: {
 
   quick_pick.items = items
   quick_pick.placeholder = 'Search presets by name'
+  quick_pick.title = 'Select Preset'
   quick_pick.matchOnDescription = true
 
   const last_preset_key = get_last_selected_preset_key(panel_provider.web_mode)
@@ -463,7 +464,7 @@ async function show_preset_quick_pick(params: {
 
   if (last_choice === 'Preset' && last_selected_preset) {
     const preset = presets.find((p) => p.name === last_selected_preset)
-    if (preset) {
+    if (preset && !preset.isPinned) {
       let group_name = 'Ungrouped'
       if (preset.chatbot) {
         const preset_index = presets.findIndex(
@@ -542,6 +543,11 @@ async function show_preset_quick_pick(params: {
     tooltip: 'Run selected presets'
   }
 
+  const run_without_submission_button: vscode.QuickInputButton = {
+    iconPath: new vscode.ThemeIcon('debug-continue-small'),
+    tooltip: 'Run without submission'
+  }
+
   const quick_pick = vscode.window.createQuickPick<
     vscode.QuickPickItem & { preset_name?: string; group_name?: string }
   >()
@@ -551,6 +557,36 @@ async function show_preset_quick_pick(params: {
     group_name?: string
   })[] = []
 
+  const pinned_presets = presets.filter((p) => p.isPinned && p.chatbot)
+
+  if (pinned_presets.length > 0) {
+    items.push({ label: 'Pinned', kind: vscode.QuickPickItemKind.Separator })
+    pinned_presets.forEach((preset) => {
+      const is_unnamed = !preset.name || /^\(\d+\)$/.test(preset.name.trim())
+      const chatbot_models = CHATBOTS[preset.chatbot as keyof typeof CHATBOTS]
+        .models as any
+      const model = preset.model
+        ? chatbot_models[preset.model]?.label || preset.model
+        : ''
+      items.push({
+        label: `$(pinned) ${is_unnamed ? preset.chatbot! : preset.name}`,
+        preset_name: preset.name,
+        description: is_unnamed
+          ? model
+          : `${preset.chatbot}${model ? ` · ${model}` : ''}`,
+        buttons: [run_without_submission_button]
+      })
+    })
+  }
+
+  const has_groups =
+    (presets.length > 0 && presets[0].chatbot) ||
+    presets.some((p) => !p.chatbot)
+
+  if (has_groups) {
+    items.push({ label: 'Groups', kind: vscode.QuickPickItemKind.Separator })
+  }
+
   if (presets.length > 0 && presets[0].chatbot) {
     let group_presets_count = 0
     let selected_presets_count = 0
@@ -607,6 +643,7 @@ async function show_preset_quick_pick(params: {
 
   quick_pick.items = items
   quick_pick.placeholder = 'Select a group to run presets from'
+  quick_pick.title = 'Select Group'
   quick_pick.matchOnDescription = true
 
   if (group_to_highlight_on_back) {
@@ -642,7 +679,7 @@ async function show_preset_quick_pick(params: {
     }
 
     quick_pick.onDidTriggerItemButton(async (e) => {
-      const item = e.item as any & { group_name?: string }
+      const item = e.item as any & { group_name?: string; preset_name?: string }
       if (item.group_name && e.button === run_group_button) {
         quick_pick.hide()
 
@@ -659,6 +696,30 @@ async function show_preset_quick_pick(params: {
           })
         }
         do_resolve(resolution)
+      } else if (
+        item.preset_name &&
+        e.button === run_without_submission_button
+      ) {
+        quick_pick.hide()
+        const preset = presets.find((p) => p.name === item.preset_name)!
+        if (params.get_is_preset_disabled(preset)) {
+          if (
+            !params.is_in_code_completions_mode &&
+            !params.current_instructions &&
+            !preset.promptPrefix &&
+            !preset.promptSuffix
+          ) {
+            vscode.window.showWarningMessage(
+              dictionary.warning_message.TYPE_SOMETHING_TO_USE_PRESET
+            )
+          }
+          do_resolve(null)
+        } else {
+          do_resolve({
+            preset_names: [item.preset_name],
+            without_submission: true
+          })
+        }
       }
     })
 
@@ -671,7 +732,42 @@ async function show_preset_quick_pick(params: {
         return
       }
 
-      if (selected.group_name) {
+      if (selected.preset_name) {
+        quick_pick.hide()
+        const preset = presets.find((p) => p.name === selected.preset_name)!
+        if (params.get_is_preset_disabled(preset)) {
+          if (
+            !params.is_in_code_completions_mode &&
+            !params.current_instructions &&
+            !preset.promptPrefix &&
+            !preset.promptSuffix
+          ) {
+            vscode.window.showWarningMessage(
+              dictionary.warning_message.TYPE_SOMETHING_TO_USE_PRESET
+            )
+          }
+          do_resolve(null)
+        } else {
+          let group_name = 'Ungrouped'
+          const preset_index = presets.findIndex(
+            (p) => p.name === selected.preset_name
+          )
+          if (preset_index > -1) {
+            for (let i = preset_index - 1; i >= 0; i--) {
+              if (!presets[i].chatbot) {
+                group_name = presets[i].name
+                break
+              }
+            }
+          }
+          update_last_used_preset_or_group({
+            panel_provider,
+            preset_name: selected.preset_name,
+            group_name: group_name
+          })
+          do_resolve({ preset_names: [selected.preset_name] })
+        }
+      } else if (selected.group_name) {
         is_navigating = true
         quick_pick.hide()
         const result = await show_presets_in_group_quick_pick({

packages/vscode/src/views/panel/backend/message-handlers/handle-show-prompt-template-quick-pick.ts

@@ -123,14 +123,11 @@ export const handle_show_prompt_template_quick_pick = async (
     template: PromptTemplate,
     index: number
   ): Promise<boolean> => {
-    const BACK_LABEL = '$(arrow-left) Back'
     const NAME_LABEL = 'Name'
     const TEMPLATE_LABEL = 'Template'
 
     const create_edit_options = () => {
       return [
-        { label: BACK_LABEL },
-        { label: '', kind: vscode.QuickPickItemKind.Separator },
         {
           label: NAME_LABEL,
           description: template.name || 'Not set'
@@ -149,18 +146,27 @@ export const handle_show_prompt_template_quick_pick = async (
     edit_quick_pick.items = create_edit_options()
     edit_quick_pick.title = 'Edit Template'
     edit_quick_pick.placeholder = 'Select what to edit'
+    edit_quick_pick.buttons = [vscode.QuickInputButtons.Back]
 
     return new Promise<boolean>((resolve) => {
       let is_accepted = false
+      let did_trigger_back = false
       const edit_disposables: vscode.Disposable[] = []
 
       edit_disposables.push(
+        edit_quick_pick.onDidTriggerButton((button) => {
+          if (button === vscode.QuickInputButtons.Back) {
+            did_trigger_back = true
+            edit_quick_pick.hide()
+            resolve(false) // User clicked 'Back', do not cancel the main quick pick
+          }
+        }),
         edit_quick_pick.onDidAccept(async () => {
           is_accepted = true
           const selected = edit_quick_pick.selectedItems[0]
-          if (!selected || selected.label === BACK_LABEL) {
+          if (!selected) {
             edit_quick_pick.hide()
-            resolve(false) // User clicked 'Back', do not cancel the main quick pick
+            resolve(false) // User cancelled, do not cancel the main quick pick
             return
           }
 
@@ -189,17 +195,13 @@ export const handle_show_prompt_template_quick_pick = async (
                 vscode.ConfigurationTarget.Global
               )
               next_template_state = updated_template
-            } else {
-              // User cancelled the input box (pressed Escape)
-              resolve(true) // Indicate full cancellation
-              return
             }
 
             const should_cancel_entirely = await edit_template(
               next_template_state,
               index
             )
-            resolve(should_cancel_entirely) // Pass through the result of the recursive call
+            resolve(should_cancel_entirely)
           } else if (selected.label == TEMPLATE_LABEL) {
             const new_template_text = await vscode.window.showInputBox({
               prompt: 'Enter the prompt template',
@@ -221,22 +223,18 @@ export const handle_show_prompt_template_quick_pick = async (
                 vscode.ConfigurationTarget.Global
               )
               next_template_state = updated_template
-            } else if (new_template_text === undefined) {
-              // User cancelled the input box
-              resolve(true) // Indicate full cancellation
-              return
             }
 
             const should_cancel_entirely = await edit_template(
               next_template_state,
               index
             )
-            resolve(should_cancel_entirely) // Pass through the result of the recursive call
+            resolve(should_cancel_entirely)
           }
         }),
         edit_quick_pick.onDidHide(() => {
-          if (!is_accepted) {
-            resolve(true) // If quick pick is hidden without accepting, it means user cancelled entirely
+          if (!is_accepted && !did_trigger_back) {
+            resolve(false) // If quick pick is hidden without accepting (e.g. Escape), treat as 'Back'
           }
           edit_disposables.forEach((d) => d.dispose())
         })
@@ -380,6 +378,13 @@ export const handle_show_prompt_template_quick_pick = async (
           // User clicked 'Back' from the edit quick pick, or successfully edited and returned to it.
           // We need to re-show the main templates_quick_pick.
           templates_quick_pick.items = create_template_items(prompt_templates)
+          // Highlight the item that was just edited
+          const edited_item = templates_quick_pick.items.find(
+            (i) => i.index === item.index
+          )
+          if (edited_item) {
+            templates_quick_pick.activeItems = [edited_item]
+          }
           if (!is_disposed) {
             templates_quick_pick.show()
           }