Add PromptDialog to replace window.prompt (#1104)

* Save file prompt dialog

* Don't download if dialog dismissed

* refactor

* style dialog

* nit

* Autofocus

src/scripts/app.ts

@@ -2231,8 +2231,7 @@ export class ComfyApp {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
       showLoadWorkflowWarning({
         missingNodeTypes,
-        hasAddedNodes,
-        maximizable: true
+        hasAddedNodes
       })
     }
 
@@ -2245,8 +2244,7 @@ export class ComfyApp {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')) {
       showMissingModelsWarning({
         missingModels,
-        paths,
-        maximizable: true
+        paths
       })
     }
 

src/scripts/ui.ts

@@ -6,6 +6,7 @@ import { ComfyApp, app } from './app'
 import { TaskItem } from '@/types/apiTypes'
 import { showSettingsDialog } from '@/services/dialogService'
 import { useSettingStore } from '@/stores/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
 
 export const ComfyDialog = _ComfyDialog
 
@@ -585,30 +586,7 @@ export class ComfyUI {
         id: 'comfy-save-button',
         textContent: 'Save',
         onclick: () => {
-          let filename = 'workflow.json'
-          if (useSettingStore().get('Comfy.PromptFilename')) {
-            filename = prompt('Save workflow as:', filename)
-            if (!filename) return
-            if (!filename.toLowerCase().endsWith('.json')) {
-              filename += '.json'
-            }
-          }
-          app.graphToPrompt().then((p) => {
-            const json = JSON.stringify(p.workflow, null, 2) // convert the data to a JSON string
-            const blob = new Blob([json], { type: 'application/json' })
-            const url = URL.createObjectURL(blob)
-            const a = $el('a', {
-              href: url,
-              download: filename,
-              style: { display: 'none' },
-              parent: document.body
-            })
-            a.click()
-            setTimeout(function () {
-              a.remove()
-              window.URL.revokeObjectURL(url)
-            }, 0)
-          })
+          useCommandStore().execute('Comfy.ExportWorkflow')
         }
       }),
       $el('button', {
@@ -616,30 +594,7 @@ export class ComfyUI {
         textContent: 'Save (API Format)',
         style: { width: '100%', display: 'none' },
         onclick: () => {
-          let filename = 'workflow_api.json'
-          if (useSettingStore().get('Comfy.PromptFilename')) {
-            filename = prompt('Save workflow (API) as:', filename)
-            if (!filename) return
-            if (!filename.toLowerCase().endsWith('.json')) {
-              filename += '.json'
-            }
-          }
-          app.graphToPrompt().then((p) => {
-            const json = JSON.stringify(p.output, null, 2) // convert the data to a JSON string
-            const blob = new Blob([json], { type: 'application/json' })
-            const url = URL.createObjectURL(blob)
-            const a = $el('a', {
-              href: url,
-              download: filename,
-              style: { display: 'none' },
-              parent: document.body
-            })
-            a.click()
-            setTimeout(function () {
-              a.remove()
-              window.URL.revokeObjectURL(url)
-            }, 0)
-          })
+          useCommandStore().execute('Comfy.ExportWorkflowAPI')
         }
       }),
       $el('button', {

src/scripts/ui/menu/index.ts

@@ -2,6 +2,8 @@ import type { ComfyApp } from '@/scripts/app'
 import { $el } from '../../ui'
 import { downloadBlob } from '../../utils'
 import { ComfyButtonGroup } from '../components/buttonGroup'
+import { showPromptDialog } from '@/services/dialogService'
+import { useSettingStore } from '@/stores/settingStore'
 import './menu.css'
 
 // Export to make sure following components are shimmed and exported by vite
@@ -32,13 +34,18 @@ export class ComfyAppMenu {
     ])
   }
 
-  getFilename(defaultName: string) {
-    if (this.app.ui.settings.getSettingValue('Comfy.PromptFilename', true)) {
-      defaultName = prompt('Save workflow as:', defaultName)
-      if (!defaultName) return
-      if (!defaultName.toLowerCase().endsWith('.json')) {
-        defaultName += '.json'
+  async getFilename(defaultName: string): Promise<string | null> {
+    if (useSettingStore().get('Comfy.PromptFilename')) {
+      let filename = await showPromptDialog({
+        title: 'Export Workflow',
+        message: 'Enter the filename:',
+        defaultValue: defaultName
+      })
+      if (!filename) return null
+      if (!filename.toLowerCase().endsWith('.json')) {
+        filename += '.json'
       }
+      return filename
     }
     return defaultName
   }
@@ -46,14 +53,14 @@ export class ComfyAppMenu {
   async exportWorkflow(
     filename: string,
     promptProperty: 'workflow' | 'output'
-  ) {
+  ): Promise<void> {
     if (this.app.workflowManager.activeWorkflow?.path) {
       filename = this.app.workflowManager.activeWorkflow.name
     }
     const p = await this.app.graphToPrompt()
     const json = JSON.stringify(p[promptProperty], null, 2)
     const blob = new Blob([json], { type: 'application/json' })
-    const file = this.getFilename(filename)
+    const file = await this.getFilename(filename)
     if (!file) return
     downloadBlob(file, blob)
   }