Allow extensions to raise their own Vue dialogs (#4008)

src/services/dialogService.ts

@@ -379,6 +379,24 @@ export const useDialogService = () => {
     })
   }
 
+  /**
+   * Shows a dialog from a third party extension.
+   * @param options - The dialog options.
+   * @param options.key - The dialog key.
+   * @param options.title - The dialog title.
+   * @param options.headerComponent - The dialog header component.
+   * @param options.footerComponent - The dialog footer component.
+   * @param options.component - The dialog component.
+   * @param options.props - The dialog props.
+   * @returns The dialog instance and a function to close the dialog.
+   */
+  function showExtensionDialog(options: ShowDialogOptions & { key: string }) {
+    return {
+      dialog: dialogStore.showExtensionDialog(options),
+      closeDialog: () => dialogStore.closeDialog({ key: options.key })
+    }
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -394,6 +412,7 @@ export const useDialogService = () => {
     showSignInDialog,
     showTopUpCreditsDialog,
     showUpdatePasswordDialog,
+    showExtensionDialog,
     prompt,
     confirm
   }

src/stores/dialogStore.ts

@@ -147,10 +147,33 @@ export const useDialogStore = defineStore('dialog', () => {
     return dialog
   }
 
+  /**
+   * Shows a dialog from a third party extension.
+   * Explicitly keys extension dialogs with `extension-` prefix,
+   * to avoid conflicts & prevent use of internal dialogs (available via `dialogService`).
+   */
+  function showExtensionDialog(options: ShowDialogOptions & { key: string }) {
+    const { key } = options
+    if (!key) {
+      console.error('Extension dialog key is required')
+      return
+    }
+
+    const extKey = key.startsWith('extension-') ? key : `extension-${key}`
+
+    const dialog = dialogStack.value.find((d) => d.key === extKey)
+    if (!dialog) return createDialog({ ...options, key: extKey })
+
+    dialog.visible = true
+    riseDialog(dialog)
+    return dialog
+  }
+
   return {
     dialogStack,
     riseDialog,
     showDialog,
-    closeDialog
+    closeDialog,
+    showExtensionDialog
   }
 })