Add toast message on refresh button click (#492)

Author: huchenlei

src/components/toast/GlobalToast.vue

@@ -12,7 +12,7 @@ const toast = useToast()
 const toastStore = useToastStore()
 
 watch(
-  () => toastStore.messages,
+  () => toastStore.messagesToAdd,
   (newMessages) => {
     if (newMessages.length === 0) {
       return
@@ -21,8 +21,33 @@ watch(
     newMessages.forEach((message) => {
       toast.add(message)
     })
-    toastStore.removeAll()
+    toastStore.messagesToAdd = []
   },
   { deep: true }
 )
+
+watch(
+  () => toastStore.messagesToRemove,
+  (messagesToRemove) => {
+    if (messagesToRemove.length === 0) {
+      return
+    }
+
+    messagesToRemove.forEach((message) => {
+      toast.remove(message)
+    })
+    toastStore.messagesToRemove = []
+  },
+  { deep: true }
+)
+
+watch(
+  () => toastStore.removeAllRequested,
+  (requested) => {
+    if (requested) {
+      toast.removeAllGroups()
+      toastStore.removeAllRequested = false
+    }
+  }
+)
 </script>

src/scripts/app.ts

@@ -45,6 +45,8 @@ import { Vector2 } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { showLoadWorkflowWarning } from '@/services/dialogService'
 import { useSettingStore } from '@/stores/settingStore'
+import { useToastStore } from '@/stores/toastStore'
+import type { ToastMessageOptions } from 'primevue/toast'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -2851,6 +2853,13 @@ export class ComfyApp {
    * Refresh combo list on whole nodes
    */
   async refreshComboInNodes() {
+    const requestToastMessage: ToastMessageOptions = {
+      severity: 'info',
+      summary: 'Update',
+      detail: 'Update requested'
+    }
+    if (this.vueAppReady) useToastStore().add(requestToastMessage)
+
     const defs = await api.getNodeDefs()
 
     for (const nodeId in defs) {
@@ -2888,6 +2897,16 @@ export class ComfyApp {
     }
 
     await this.#invokeExtensionsAsync('refreshComboInNodes', defs)
+
+    if (this.vueAppReady) {
+      useToastStore().remove(requestToastMessage)
+      useToastStore().add({
+        severity: 'success',
+        summary: 'Updated',
+        detail: 'Node definitions updated',
+        life: 1000
+      })
+    }
   }
 
   resetView() {

src/stores/toastStore.ts

@@ -6,18 +6,20 @@ import type { ToastMessageOptions } from 'primevue/toast'
 
 export const useToastStore = defineStore('toast', {
   state: () => ({
-    messages: [] as ToastMessageOptions[]
+    messagesToAdd: [] as ToastMessageOptions[],
+    messagesToRemove: [] as ToastMessageOptions[],
+    removeAllRequested: false
   }),
 
   actions: {
     add(message: ToastMessageOptions) {
-      this.messages = [...this.messages, message]
+      this.messagesToAdd = [...this.messagesToAdd, message]
     },
     remove(message: ToastMessageOptions) {
-      this.messages = this.messages.filter((msg) => msg !== message)
+      this.messagesToRemove = [...this.messagesToRemove, message]
     },
     removeAll() {
-      this.messages = []
+      this.removeAllRequested = true
     }
   }
 })