diff --git a/src/App.vue b/src/App.vue
index ba00d55eb4..f8b8bcf70d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
+
@@ -24,6 +25,7 @@ import { useI18n } from 'vue-i18n'
import { useWorkspaceStore } from './stores/workspaceStateStore'
import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue'
import GlobalDialog from './components/dialog/GlobalDialog.vue'
+import GlobalToast from './components/toast/GlobalToast.vue'
import { api } from './scripts/api'
import { StatusWsMessageStatus } from './types/apiTypes'
import { useQueuePendingTaskCountStore } from './stores/queueStore'
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index d2c3cdc7fe..bd048d5f42 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -36,7 +36,6 @@
-
@@ -44,7 +43,6 @@
diff --git a/src/extensions/core/keybinds.ts b/src/extensions/core/keybinds.ts
index be210041ca..8b2c0cdbfc 100644
--- a/src/extensions/core/keybinds.ts
+++ b/src/extensions/core/keybinds.ts
@@ -1,17 +1,24 @@
import { app } from '../../scripts/app'
import { api } from '../../scripts/api'
+import { useToastStore } from '@/stores/toastStore'
app.registerExtension({
name: 'Comfy.Keybinds',
init() {
- const keybindListener = function (event) {
+ const keybindListener = async function (event) {
const modifierPressed = event.ctrlKey || event.metaKey
// Queue prompt using (ctrl or command) + enter
if (modifierPressed && event.key === 'Enter') {
// Cancel current prompt using (ctrl or command) + alt + enter
if (event.altKey) {
- api.interrupt()
+ await api.interrupt()
+ useToastStore().add({
+ severity: 'info',
+ summary: 'Interrupted',
+ detail: 'Execution has been interrupted',
+ life: 1000
+ })
return
}
// Queue prompt as first for generation using (ctrl or command) + shift + enter
diff --git a/src/scripts/ui/menu/interruptButton.ts b/src/scripts/ui/menu/interruptButton.ts
index a82f07de81..4d48af6554 100644
--- a/src/scripts/ui/menu/interruptButton.ts
+++ b/src/scripts/ui/menu/interruptButton.ts
@@ -1,14 +1,21 @@
import { StatusWsMessageStatus } from '@/types/apiTypes'
import { api } from '../../api'
import { ComfyButton } from '../components/button'
+import { useToastStore } from '@/stores/toastStore'
export function getInterruptButton(visibility: string) {
const btn = new ComfyButton({
icon: 'close',
tooltip: 'Cancel current generation',
enabled: false,
- action: () => {
- api.interrupt()
+ action: async () => {
+ await api.interrupt()
+ useToastStore().add({
+ severity: 'info',
+ summary: 'Interrupted',
+ detail: 'Execution has been interrupted',
+ life: 1000
+ })
},
classList: ['comfyui-button', 'comfyui-interrupt-button', visibility]
})
diff --git a/src/stores/toastStore.ts b/src/stores/toastStore.ts
new file mode 100644
index 0000000000..2833496672
--- /dev/null
+++ b/src/stores/toastStore.ts
@@ -0,0 +1,23 @@
+// Within Vue component context, you can directly call useToast().add()
+// instead of going through the store.
+// The store is useful when you need to call it from outside the Vue component context.
+import { defineStore } from 'pinia'
+import type { ToastMessageOptions } from 'primevue/toast'
+
+export const useToastStore = defineStore('toast', {
+ state: () => ({
+ messages: [] as ToastMessageOptions[]
+ }),
+
+ actions: {
+ add(message: ToastMessageOptions) {
+ this.messages = [...this.messages, message]
+ },
+ remove(message: ToastMessageOptions) {
+ this.messages = this.messages.filter((msg) => msg !== message)
+ },
+ removeAll() {
+ this.messages = []
+ }
+ }
+})