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 = [] + } + } +})