[Extension API] Register custom bottom panel tabs (#1296)

* Bottom panel API

* Update README

src/stores/extensionStore.ts

@@ -6,6 +6,7 @@ import { useCommandStore } from './commandStore'
 import { useSettingStore } from './settingStore'
 import { app } from '@/scripts/app'
 import { useMenuItemStore } from './menuItemStore'
+import { useBottomPanelStore } from './workspace/bottomPanelStore'
 
 export const useExtensionStore = defineStore('extension', () => {
   // For legacy reasons, the name uniquely identifies an extension
@@ -48,7 +49,7 @@ export const useExtensionStore = defineStore('extension', () => {
     useCommandStore().loadExtensionCommands(extension)
     useMenuItemStore().loadExtensionMenuCommands(extension)
     useSettingStore().loadExtensionSettings(extension)
-
+    useBottomPanelStore().registerExtensionBottomPanelTabs(extension)
     /*
      * Extensions are currently stored in both extensionStore and app.extensions.
      * Legacy jest tests still depend on app.extensions being populated.

src/stores/workspace/bottomPanelStore.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { useCommandStore } from '@/stores/commandStore'
 import { useIntegratedTerminalTab } from '@/hooks/bottomPanelTabs/integratedTerminalTab'
+import { ComfyExtension } from '@/types/comfy'
 
 export const useBottomPanelStore = defineStore('bottomPanel', () => {
   const bottomPanelVisible = ref(false)
@@ -51,6 +52,12 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
     registerBottomPanelTab(useIntegratedTerminalTab())
   }
 
+  const registerExtensionBottomPanelTabs = (extension: ComfyExtension) => {
+    if (extension.bottomPanelTabs) {
+      extension.bottomPanelTabs.forEach(registerBottomPanelTab)
+    }
+  }
+
   return {
     bottomPanelVisible,
     toggleBottomPanel,
@@ -60,6 +67,7 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
     setActiveTab,
     toggleBottomPanelTab,
     registerBottomPanelTab,
-    registerCoreBottomPanelTabs
+    registerCoreBottomPanelTabs,
+    registerExtensionBottomPanelTabs
   }
 })

src/types/comfy.d.ts

@@ -4,6 +4,7 @@ import type { ComfyNodeDef } from '@/types/apiTypes'
 import type { Keybinding } from '@/types/keyBindingTypes'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { SettingParams } from './settingTypes'
+import type { BottomPanelExtension } from './extensionTypes'
 
 export type Widgets = Record<
   string,
@@ -48,6 +49,10 @@ export interface ComfyExtension {
    * Settings to add to the settings menu
    */
   settings?: SettingParams[]
+  /**
+   * Bottom panel tabs to add to the bottom panel
+   */
+  bottomPanelTabs?: BottomPanelExtension[]
   /**
    * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
    * @param app The ComfyUI app instance