Type WS messages (#375)

src/scripts/app.ts

@@ -19,7 +19,7 @@ import {
   type ComfyWorkflowJSON,
   validateComfyWorkflow
 } from '../types/comfyWorkflow'
-import { ComfyNodeDef } from '@/types/apiTypes'
+import { ComfyNodeDef, StatusWsMessageStatus } from '@/types/apiTypes'
 import { lightenColor } from '@/utils/colorUtil'
 import { ComfyAppMenu } from './ui/menu/index'
 import { getStorageValue } from './utils'
@@ -1586,9 +1586,12 @@ export class ComfyApp {
    * Handles updates from the API socket
    */
   #addApiUpdateHandlers() {
-    api.addEventListener('status', ({ detail }) => {
-      this.ui.setStatus(detail)
-    })
+    api.addEventListener(
+      'status',
+      ({ detail }: CustomEvent<StatusWsMessageStatus>) => {
+        this.ui.setStatus(detail)
+      }
+    )
 
     api.addEventListener('reconnecting', () => {
       this.ui.dialog.show('Reconnecting...')

src/scripts/ui.ts

@@ -3,7 +3,7 @@ import { ComfyDialog as _ComfyDialog } from './ui/dialog'
 import { toggleSwitch } from './ui/toggleSwitch'
 import { ComfySettingsDialog } from './ui/settings'
 import { ComfyApp, app } from './app'
-import { TaskItem } from '@/types/apiTypes'
+import { StatusWsMessageStatus, TaskItem } from '@/types/apiTypes'
 
 export const ComfyDialog = _ComfyDialog
 

src/scripts/ui/menu/interruptButton.ts

@@ -1,3 +1,4 @@
+import { StatusWsMessageStatus } from '@/types/apiTypes'
 import { api } from '../../api'
 import { ComfyButton } from '../components/button'
 
@@ -12,10 +13,13 @@ export function getInteruptButton(visibility: string) {
     classList: ['comfyui-button', 'comfyui-interrupt-button', visibility]
   })
 
-  api.addEventListener('status', ({ detail }) => {
-    const sz = detail?.exec_info?.queue_remaining
-    btn.enabled = sz > 0
-  })
+  api.addEventListener(
+    'status',
+    ({ detail }: CustomEvent<StatusWsMessageStatus>) => {
+      const sz = detail.exec_info.queue_remaining
+      btn.enabled = sz > 0
+    }
+  )
 
   return btn
 }

src/scripts/ui/menu/queueButton.ts

@@ -5,6 +5,7 @@ import { ComfySplitButton } from '../components/splitButton'
 import { ComfyQueueOptions } from './queueOptions'
 import { prop } from '../../utils'
 import type { ComfyApp } from '@/scripts/app'
+import { StatusWsMessageStatus } from '@/types/apiTypes'
 
 export class ComfyQueueButton {
   element = $el('div.comfyui-queue-button')
@@ -86,22 +87,25 @@ export class ComfyQueueButton {
       }
     })
 
-    api.addEventListener('status', ({ detail }) => {
-      this.#internalQueueSize = detail?.exec_info?.queue_remaining
-      if (this.#internalQueueSize != null) {
-        this.queueSizeElement.textContent =
-          this.#internalQueueSize > 99 ? '99+' : this.#internalQueueSize + ''
-        this.queueSizeElement.title = `${this.#internalQueueSize} prompts in queue`
-        if (!this.#internalQueueSize && !app.lastExecutionError) {
-          if (
-            this.autoQueueMode === 'instant' ||
-            (this.autoQueueMode === 'change' && this.graphHasChanged)
-          ) {
-            this.graphHasChanged = false
-            this.queuePrompt()
+    api.addEventListener(
+      'status',
+      ({ detail }: CustomEvent<StatusWsMessageStatus>) => {
+        this.#internalQueueSize = detail.exec_info.queue_remaining
+        if (this.#internalQueueSize != null) {
+          this.queueSizeElement.textContent =
+            this.#internalQueueSize > 99 ? '99+' : this.#internalQueueSize + ''
+          this.queueSizeElement.title = `${this.#internalQueueSize} prompts in queue`
+          if (!this.#internalQueueSize && !app.lastExecutionError) {
+            if (
+              this.autoQueueMode === 'instant' ||
+              (this.autoQueueMode === 'change' && this.graphHasChanged)
+            ) {
+              this.graphHasChanged = false
+              this.queuePrompt()
+            }
           }
         }
       }
-    })
+    )
   }
 }