Use toast on reconnection message (#530)

src/App.vue

@@ -29,6 +29,8 @@ import GlobalToast from './components/toast/GlobalToast.vue'
 import { api } from './scripts/api'
 import { StatusWsMessageStatus } from './types/apiTypes'
 import { useQueuePendingTaskCountStore } from './stores/queueStore'
+import type { ToastMessageOptions } from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
 
 const isLoading = computed<boolean>(() => useWorkspaceStore().spinner)
 const theme = computed<string>(() =>
@@ -86,8 +88,28 @@ const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
 const onStatus = (e: CustomEvent<StatusWsMessageStatus>) =>
   queuePendingTaskCountStore.update(e)
 
+const toast = useToast()
+const reconnectingMessage: ToastMessageOptions = {
+  severity: 'error',
+  summary: t('reconnecting')
+}
+const onReconnecting = () => {
+  toast.remove(reconnectingMessage)
+  toast.add(reconnectingMessage)
+}
+const onReconnected = () => {
+  toast.remove(reconnectingMessage)
+  toast.add({
+    severity: 'success',
+    summary: t('reconnected'),
+    life: 2000
+  })
+}
+
 onMounted(() => {
   api.addEventListener('status', onStatus)
+  api.addEventListener('reconnecting', onReconnecting)
+  api.addEventListener('reconnected', onReconnected)
   try {
     init()
   } catch (e) {
@@ -97,6 +119,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   api.removeEventListener('status', onStatus)
+  api.removeEventListener('reconnecting', onReconnecting)
+  api.removeEventListener('reconnected', onReconnected)
 })
 </script>
 

src/i18n.ts

@@ -2,6 +2,8 @@ import { createI18n } from 'vue-i18n'
 
 const messages = {
   en: {
+    reconnecting: 'Reconnecting',
+    reconnected: 'Reconnected',
     delete: 'Delete',
     experimental: 'BETA',
     loadWorkflow: 'Load Workflow',
@@ -25,6 +27,8 @@ const messages = {
     }
   },
   zh: {
+    reconnecting: '重新连接中',
+    reconnected: '已重新连接',
     delete: '删除',
     loadWorkflow: '加载工作流',
     settings: '设置',

src/scripts/app.ts

@@ -1598,14 +1598,6 @@ export class ComfyApp {
       }
     )
 
-    api.addEventListener('reconnecting', () => {
-      this.ui.dialog.show('Reconnecting...')
-    })
-
-    api.addEventListener('reconnected', () => {
-      this.ui.dialog.close()
-    })
-
     api.addEventListener('progress', ({ detail }) => {
       if (
         this.workflowManager.activePrompt?.workflow &&