mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 15:40:10 +00:00
54979701d0
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)
24 lines
714 B
TypeScript
24 lines
714 B
TypeScript
import { t } from '@/i18n'
|
|
import { useExtensionService } from '@/services/extensionService'
|
|
import type { ActionBarButton } from '@/types/comfy'
|
|
|
|
// Zendesk feedback URL - update this with the actual URL
|
|
const ZENDESK_FEEDBACK_URL =
|
|
'https://support.comfy.org/hc/en-us/requests/new?ticket_form_id=43066738713236'
|
|
|
|
const buttons: ActionBarButton[] = [
|
|
{
|
|
icon: 'icon-[lucide--message-circle-question-mark]',
|
|
label: t('actionbar.feedback'),
|
|
tooltip: t('actionbar.feedbackTooltip'),
|
|
onClick: () => {
|
|
window.open(ZENDESK_FEEDBACK_URL, '_blank', 'noopener,noreferrer')
|
|
}
|
|
}
|
|
]
|
|
|
|
useExtensionService().registerExtension({
|
|
name: 'Comfy.Cloud.FeedbackButton',
|
|
actionBarButtons: buttons
|
|
})
|