Add reset functionality and standardize quick pick dialogs with consistent back button behavior

Author: robertpiosik

packages/vscode/src/views/settings/backend/message-handlers/handle-upsert-configuration.ts

@@ -116,12 +116,15 @@ export const handle_upsert_configuration = async (
   }
 
   const updated_config = config_to_edit
+  const starting_config = { ...updated_config }
 
-  // Editing loop
   // eslint-disable-next-line no-constant-condition
   while (true) {
+    const has_changes =
+      JSON.stringify(updated_config) !== JSON.stringify(starting_config)
+
     const items: vscode.QuickPickItem[] = [
-      { label: 'Provider', detail: updated_config.provider_name },
+      { label: 'Model Provider', detail: updated_config.provider_name },
       { label: 'Model', detail: updated_config.model },
       { label: 'Advanced', detail: advanced_details }
     ]
@@ -135,11 +138,17 @@ export const handle_upsert_configuration = async (
           : 'Create New Configuration'
         quick_pick.placeholder =
           'Select a property to edit, or press Esc to save'
-        const closeButton: vscode.QuickInputButton = {
+        const close_button: vscode.QuickInputButton = {
           iconPath: new vscode.ThemeIcon('close'),
           tooltip: 'Save and Close'
         }
-        quick_pick.buttons = [closeButton]
+        const redo_button: vscode.QuickInputButton = {
+          iconPath: new vscode.ThemeIcon('redo'),
+          tooltip: 'Reset Changes'
+        }
+        quick_pick.buttons = has_changes
+          ? [redo_button, close_button]
+          : [close_button]
         let accepted = false
         const disposables: vscode.Disposable[] = []
 
@@ -150,8 +159,22 @@ export const handle_upsert_configuration = async (
             quick_pick.hide()
           }),
           quick_pick.onDidTriggerButton((button) => {
-            if (button === closeButton) {
+            if (button === close_button) {
               quick_pick.hide()
+            } else if (button === redo_button) {
+              Object.keys(updated_config).forEach(
+                (key) => delete (updated_config as any)[key]
+              )
+              Object.assign(updated_config, starting_config)
+              quick_pick.items = [
+                {
+                  label: 'Model Provider',
+                  detail: updated_config.provider_name
+                },
+                { label: 'Model', detail: updated_config.model },
+                { label: 'Advanced', detail: advanced_details }
+              ]
+              quick_pick.buttons = [close_button]
             }
           }),
           quick_pick.onDidHide(() => {
@@ -170,7 +193,7 @@ export const handle_upsert_configuration = async (
 
     const selected_option = selected_item.label
 
-    if (selected_option === 'Provider') {
+    if (selected_option === 'Model Provider') {
       const new_provider = await edit_provider_for_config(providers_manager)
       if (new_provider) {
         updated_config.provider_name = new_provider.provider_name

packages/vscode/src/views/settings/utils/config-editing.ts

@@ -25,10 +25,36 @@ export const initial_select_provider = async (
   }
 
   const provider_items = providers.map((p) => ({ label: p.name, provider: p }))
-  const selected = await vscode.window.showQuickPick(provider_items, {
-    title: 'Model Providers'
-  })
+  const selected = await new Promise<(typeof provider_items)[0] | undefined>(
+    (resolve) => {
+      const quick_pick =
+        vscode.window.createQuickPick<(typeof provider_items)[0]>()
+      quick_pick.items = provider_items
+      quick_pick.title = 'Model Providers'
+      quick_pick.buttons = [vscode.QuickInputButtons.Back]
+      let accepted = false
+      const disposables: vscode.Disposable[] = []
 
+      disposables.push(
+        quick_pick.onDidAccept(() => {
+          accepted = true
+          resolve(quick_pick.selectedItems[0])
+          quick_pick.hide()
+        }),
+        quick_pick.onDidTriggerButton((button) => {
+          if (button === vscode.QuickInputButtons.Back) {
+            quick_pick.hide()
+          }
+        }),
+        quick_pick.onDidHide(() => {
+          if (!accepted) resolve(undefined)
+          disposables.forEach((d) => d.dispose())
+          quick_pick.dispose()
+        })
+      )
+      quick_pick.show()
+    }
+  )
   return selected?.provider
 }
 
@@ -125,10 +151,37 @@ export const edit_provider_for_config = async (
     detail: p.type,
     provider: p
   }))
-  const selected_provider_item = await vscode.window.showQuickPick(
-    provider_items,
-    { title: 'Model Providers' }
-  )
+  const selected_provider_item = await new Promise<
+    (typeof provider_items)[0] | undefined
+  >((resolve) => {
+    const quick_pick =
+      vscode.window.createQuickPick<(typeof provider_items)[0]>()
+    quick_pick.items = provider_items
+    quick_pick.title = 'Model Providers'
+    quick_pick.buttons = [vscode.QuickInputButtons.Back]
+    let accepted = false
+    const disposables: vscode.Disposable[] = []
+
+    disposables.push(
+      quick_pick.onDidAccept(() => {
+        accepted = true
+        resolve(quick_pick.selectedItems[0])
+        quick_pick.hide()
+      }),
+      quick_pick.onDidTriggerButton((button) => {
+        if (button === vscode.QuickInputButtons.Back) {
+          quick_pick.hide()
+        }
+      }),
+      quick_pick.onDidHide(() => {
+        if (!accepted) resolve(undefined)
+        disposables.forEach((d) => d.dispose())
+        quick_pick.dispose()
+      })
+    )
+    quick_pick.show()
+  })
+
   if (selected_provider_item) {
     return {
       provider_name: selected_provider_item.provider.name,
@@ -167,9 +220,6 @@ export const edit_model_for_config = async (
     return undefined
   }
 
-  let new_model_value: string | undefined
-  let model_selected = false
-
   try {
     const models = await model_fetcher.get_models({
       base_url,
@@ -182,15 +232,43 @@ export const edit_model_for_config = async (
         description: model.name ? model.id : undefined,
         detail: model.description
       }))
-      const selected_model_item = await vscode.window.showQuickPick(
-        model_items,
-        { title: 'Models', placeHolder: 'Choose a model' }
-      )
+      const selected_model_item = await new Promise<
+        (typeof model_items)[0] | undefined
+      >((resolve) => {
+        const quick_pick =
+          vscode.window.createQuickPick<(typeof model_items)[0]>()
+        quick_pick.items = model_items
+        quick_pick.title = 'Models'
+        quick_pick.placeholder = 'Choose a model'
+        quick_pick.buttons = [vscode.QuickInputButtons.Back]
+        let accepted = false
+        const disposables: vscode.Disposable[] = []
+
+        disposables.push(
+          quick_pick.onDidAccept(() => {
+            accepted = true
+            resolve(quick_pick.selectedItems[0])
+            quick_pick.hide()
+          }),
+          quick_pick.onDidTriggerButton((button) => {
+            if (button === vscode.QuickInputButtons.Back) {
+              quick_pick.hide()
+            }
+          }),
+          quick_pick.onDidHide(() => {
+            if (!accepted) resolve(undefined)
+            disposables.forEach((d) => d.dispose())
+            quick_pick.dispose()
+          })
+        )
+        quick_pick.show()
+      })
       if (selected_model_item) {
-        new_model_value =
+        return (
           selected_model_item.description || selected_model_item.label
-        model_selected = true
+        ).trim()
       }
+      return undefined
     } else {
       vscode.window.showWarningMessage(
         dictionary.warning_message.NO_MODELS_FOUND_MANUAL_ENTRY(
@@ -223,19 +301,13 @@ export const edit_model_for_config = async (
     }
   }
 
-  if (!model_selected) {
-    const new_model_input = await vscode.window.showInputBox({
-      title: 'Enter Model Name',
-      value: config.model,
-      prompt: `Enter a model name (ID)`
-    })
-    if (new_model_input !== undefined) {
-      new_model_value = new_model_input
-    }
-  }
-
-  if (new_model_value !== undefined) {
-    return new_model_value.trim()
+  const new_model_input = await vscode.window.showInputBox({
+    title: 'Enter Model Name',
+    value: config.model,
+    prompt: `Enter a model name (ID)`
+  })
+  if (new_model_input !== undefined) {
+    return new_model_input.trim()
   }
   return undefined
 }