Add toast message on execution interrupted (#490)

* Move toast to top level

* Toast store

Author: huchenlei

src/App.vue

@@ -2,6 +2,7 @@
   <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
   <BlockUI full-screen :blocked="isLoading" />
   <GlobalDialog />
+  <GlobalToast />
   <GraphCanvas />
 </template>
 
@@ -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'

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -36,15 +36,13 @@
       </div>
     </template>
   </SideBarTabTemplate>
-  <Toast />
   <ConfirmPopup />
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
-import Toast from 'primevue/toast'
 import ContextMenu from 'primevue/contextmenu'
 import TaskItem from './queue/TaskItem.vue'
 import SideBarTabTemplate from './SidebarTabTemplate.vue'

src/components/toast/GlobalToast.vue

@@ -0,0 +1,28 @@
+<template>
+  <Toast />
+</template>
+
+<script setup lang="ts">
+import { useToastStore } from '@/stores/toastStore'
+import Toast from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+import { watch } from 'vue'
+
+const toast = useToast()
+const toastStore = useToastStore()
+
+watch(
+  () => toastStore.messages,
+  (newMessages) => {
+    if (newMessages.length === 0) {
+      return
+    }
+
+    newMessages.forEach((message) => {
+      toast.add(message)
+    })
+    toastStore.removeAll()
+  },
+  { deep: true }
+)
+</script>

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

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]
   })

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