mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 06:00:03 +00:00
Cloud feedback Extension (#6626)
This pull request introduces a new extensible system for adding custom action bar buttons to the top menu, and demonstrates its use by adding a cloud feedback button. The changes include defining a new `ActionBarButton` type, updating the extension system to support action bar buttons, creating a Pinia store to aggregate buttons from extensions, and updating the UI to render these buttons in the top menu. The cloud feedback button is now conditionally loaded for cloud environments. **Extensible Action Bar Button System** * Defined a new `ActionBarButton` interface in `comfy.ts` for describing buttons (icon, label, tooltip, class, click handler) and added an `actionBarButtons` property to the `ComfyExtension` interface to allow extensions to contribute buttons. [[1]](diffhunk://#diff-c29886a1b0c982c6fff3545af0ca <img width="1134" height="437" alt="Screenshot 2025-11-07 at 01 07 36" src="https://github.com/user-attachments/assets/36b6145a-0b82-4f7d-88e8-f2ea350a359b" /> 8ec269876c2cf3948f867d08c14032c04d66R60-R82) [[2]](diffhunk://#diff-c29886a1b0c982c6fff3545af0ca8ec269876c2cf3948f867d08c14032c04d66R128-R131) * Created a Pinia store (`actionBarButtonStore.ts`) that collects all action bar buttons from registered extensions for use in the UI. **UI Integration** * Added a new `ActionBarButtons.vue` component that renders all action bar buttons using the store, and integrated it into the top menu section (`TopMenuSection.vue`). [[1]](diffhunk://#diff-d6820f57cde865083d515ac0c23e1ad09e6fbc6792d742ae948a1d3b772be473R1-R28) [[2]](diffhunk://#diff-45dffe390927ed2d5ba2426a139c52adae28ce15f81821c88e7991944562074cR10) [[3]](diffhunk://#diff-45dffe390927ed2d5ba2426a139c52adae28ce15f81821c88e7991944562074cR28) **Cloud Feedback Button Extension** * Implemented a new extension (`cloudFeedbackTopbarButton.ts`) that registers a "Feedback" button opening the Zendesk feedback page, and ensured it loads only in cloud environments. [[1]](diffhunk://#diff-b84a6a0dfaca19fd77b3fae6999a40c3ab8d04ed22636fcdecc65b385a8e9a98R1-R24) [[2]](diffhunk://#diff-236993d9e4213efe96d267c75c3292d32b93aa4dd6c3318d26a397e0ae56bc87R32) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6626-Cloud-feedback-Extension-2a46d73d36508170bd07f582ccfabb3c) by [Unito](https://www.unito.io)
This commit is contained in:
committed by
GitHub
parent
64e704c2f9
commit
54979701d0
@@ -57,6 +57,32 @@ export interface TopbarBadge {
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
/*
|
||||
* Action bar button definition: add buttons to the action bar
|
||||
*/
|
||||
export interface ActionBarButton {
|
||||
/**
|
||||
* Icon class to display (e.g., "icon-[lucide--message-circle-question-mark]")
|
||||
*/
|
||||
icon: string
|
||||
/**
|
||||
* Optional label text to display next to the icon
|
||||
*/
|
||||
label?: string
|
||||
/**
|
||||
* Optional tooltip text to show on hover
|
||||
*/
|
||||
tooltip?: string
|
||||
/**
|
||||
* Optional CSS classes to apply to the button
|
||||
*/
|
||||
class?: string
|
||||
/**
|
||||
* Click handler for the button
|
||||
*/
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
export type MissingNodeType =
|
||||
| string
|
||||
// Primarily used by group nodes.
|
||||
@@ -102,6 +128,10 @@ export interface ComfyExtension {
|
||||
* Badges to add to the top bar
|
||||
*/
|
||||
topbarBadges?: TopbarBadge[]
|
||||
/**
|
||||
* Buttons to add to the action bar
|
||||
*/
|
||||
actionBarButtons?: ActionBarButton[]
|
||||
/**
|
||||
* Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
|
||||
* @param app The ComfyUI app instance
|
||||
|
||||
Reference in New Issue
Block a user