Add default confirm dialog (#2114)

README.md

@@ -61,10 +61,10 @@ Stable releases are published bi-weekly in the ComfyUI main repository.
 <details>
   <summary>v1.5: Native translation (i18n)</summary>
 
-  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language 
+  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
-  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native 
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
   implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
-  
+
   More details available here: https://blog.comfy.org/p/native-localization-support-i18n
 </details>
 
@@ -230,11 +230,18 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 ### Developer APIs
 
 <details>
-  <summary>v1.6.13: Prompt dialog</summary>
+  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
 
-`window.prompt` is not available in ComfyUI desktop's electron environment. Please use the following API to show a prompt dialog.
+Several browser-only APIs are not available in ComfyUI desktop's electron environment.
+
+- `window.prompt`
+- `window.confirm`
+- `window.alert`
+
+Please use the following APIs as replacements.
 
 ```js
+// window.prompt
 window['app'].extensionManager.dialog
   .prompt({
     title: 'Test Prompt',
@@ -247,6 +254,28 @@ window['app'].extensionManager.dialog
 
 ![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
 
+```js
+// window.confirm
+window['app'].extensionManager.dialog
+  .confirm({
+    title: 'Test Confirm',
+    message: 'Test Confirm Message'
+  })
+  .then((value: boolean) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
+
+```js
+// window.alert
+window['app'].extensionManager.toast
+  .addAlert("Test Alert")
+```
+
+![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
+
 </details>
 
 <details>

browser_tests/extensionAPI.spec.ts

@@ -177,5 +177,23 @@ test.describe('Topbar commands', () => {
         'Hello, world!'
       )
     })
+
+    test('Should allow showing a confirmation dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('confirm')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(true)
+    })
   })
 })

browser_tests/fixtures/ComfyPage.ts

@@ -91,11 +91,13 @@ class ConfirmDialog {
   public readonly delete: Locator
   public readonly overwrite: Locator
   public readonly reject: Locator
+  public readonly confirm: Locator
 
   constructor(public readonly page: Page) {
     this.delete = page.locator('button.p-button[aria-label="Delete"]')
     this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
     this.reject = page.locator('button.p-button[aria-label="Cancel"]')
+    this.confirm = page.locator('button.p-button[aria-label="Confirm"]')
   }
 
   async click(locator: KeysOfType<ConfirmDialog, Locator>) {

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -13,7 +13,14 @@
         autofocus
       />
       <Button
-        v-if="type === 'delete'"
+        v-if="type === 'default'"
+        :label="$t('g.confirm')"
+        severity="primary"
+        @click="onConfirm"
+        icon="pi pi-check"
+      />
+      <Button
+        v-else-if="type === 'delete'"
         :label="$t('g.delete')"
         severity="danger"
         @click="onConfirm"

src/services/dialogService.ts

@@ -12,6 +12,7 @@ import type { ExecutionErrorWsMessage } from '@/types/apiTypes'
 import type { MissingNodeType } from '@/types/comfy'
 
 export type ConfirmationDialogType =
+  | 'default'
   | 'overwrite'
   | 'delete'
   | 'dirtyClose'
@@ -121,16 +122,16 @@ export const useDialogService = () => {
    */
   async function confirm({
     title,
-    type,
     message,
+    type = 'default',
     itemList = []
   }: {
     /** Dialog heading */
     title: string
-    /** Pre-configured dialog type */
-    type: ConfirmationDialogType
     /** The main message body */
     message: string
+    /** Pre-configured dialog type */
+    type?: ConfirmationDialogType
     /** Displayed as an unorderd list immediately below the message body */
     itemList?: string[]
   }): Promise<boolean | null> {