Add User Feedback buttons (#2275)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: huchenlei <huchenlei@proton.me>

browser_tests/dialog.spec.ts

@@ -165,3 +165,37 @@ test.describe('Settings', () => {
     expect(request.postData()).toContain(JSON.stringify(expectedSetting))
   })
 })
+
+test.describe('Feedback dialog', () => {
+  test('Should open from topmenu help command', async ({ comfyPage }) => {
+    // Open feedback dialog from top menu
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    // Verify feedback dialog content is visible
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+    await expect(feedbackHeader).toBeVisible()
+  })
+
+  test('Should close when close button clicked', async ({ comfyPage }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+
+    // Close feedback dialog
+    await comfyPage.page
+      .getByLabel('', { exact: true })
+      .getByLabel('Close')
+      .click()
+    await feedbackHeader.waitFor({ state: 'hidden' })
+
+    // Verify dialog is closed
+    await expect(feedbackHeader).not.toBeVisible()
+  })
+})

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -28,6 +28,7 @@
     </template>
     <ReportIssuePanel
       v-if="sendReportOpen"
+      :title="$t('issueReport.submitErrorReport')"
       error-type="graphExecutionError"
       :extra-fields="[stackTraceField]"
       :tags="{ exceptionMessage: props.error.exception_message }"

src/components/dialog/content/FeedbackDialogContent.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="p-8 h-full min-w-96">
+    <div class="flex flex-col items-center">
+      <h3 class="text-4xl">{{ $t('g.feedback') }}</h3>
+    </div>
+  </div>
+  <Divider />
+  <div>
+    <ReportIssuePanel
+      error-type="Feedback"
+      :title="$t('issueReport.feedbackTitle')"
+      :default-fields="['SystemStats', 'Settings']"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Divider from 'primevue/divider'
+
+import ReportIssuePanel from '@/components/dialog/content/error/ReportIssuePanel.vue'
+</script>
+
+<style scoped>
+:deep(.p-panel) {
+  @apply border-none;
+}
+</style>

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -2,7 +2,7 @@
   <Panel>
     <template #header>
       <div class="flex items-center gap-2">
-        <span class="font-bold">{{ $t('issueReport.submitErrorReport') }}</span>
+        <span class="font-bold">{{ title }}</span>
       </div>
     </template>
     <template #footer>
@@ -19,6 +19,7 @@
     </template>
     <div class="p-4 mt-4 border border-round surface-border shadow-1">
       <CheckboxGroup
+        v-if="reportCheckboxes.length"
         v-model="selection"
         class="gap-4 mb-4"
         :checkboxes="reportCheckboxes"
@@ -29,6 +30,7 @@
           class="w-full"
           :placeholder="$t('issueReport.provideEmail')"
           :maxlength="CONTACT_MAX_LEN"
+          :invalid="isContactInfoInvalid"
         />
         <CheckboxGroup
           v-model="contactPrefs"
@@ -76,6 +78,7 @@ const props = defineProps<{
   defaultFields?: DefaultField[]
   extraFields?: ReportField[]
   tags?: Record<string, string>
+  title?: string
 }>()
 const {
   defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'],
@@ -101,8 +104,17 @@ const icon = computed(() => {
   return 'pi pi-send'
 })
 const isFormEmpty = computed(() => !selection.value.length && !details.value)
+const isContactInfoInvalid = computed(() => {
+  if (!contactInfo.value) return false
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return !emailRegex.test(contactInfo.value)
+})
 const isButtonDisabled = computed(
-  () => submitted.value || submitting.value || isFormEmpty.value
+  () =>
+    submitted.value ||
+    submitting.value ||
+    isFormEmpty.value ||
+    isContactInfoInvalid.value
 )
 
 const contactCheckboxes = [
@@ -116,7 +128,9 @@ const defaultReportCheckboxes = [
   { label: t('g.settings'), value: 'Settings' }
 ]
 const reportCheckboxes = computed(() => [
-  ...(props.extraFields?.map(({ label, value }) => ({ label, value })) ?? []),
+  ...(props.extraFields
+    ?.filter(({ optIn }) => optIn)
+    .map(({ label, value }) => ({ label, value })) ?? []),
   ...defaultReportCheckboxes.filter(({ value }) =>
     defaultFields.includes(value as DefaultField)
   )

src/components/dialog/content/error/__tests__/ReportIssuePanel.spec.ts

@@ -21,6 +21,8 @@ type ReportIssuePanelProps = {
   errorType: string
   defaultFields?: DefaultField[]
   extraFields?: ReportField[]
+  tags?: Record<string, string>
+  title?: string
 }
 
 const i18n = createI18n({

src/constants/coreMenuCommands.ts

@@ -22,5 +22,5 @@ export const CORE_MENU_COMMANDS = [
       'Comfy.Help.OpenComfyOrgDiscord'
     ]
   ],
-  [['Help'], ['Comfy.Help.AboutComfyUI']]
+  [['Help'], ['Comfy.Help.AboutComfyUI', 'Comfy.Feedback']]
 ]

src/extensions/core/electronAdapter.ts

@@ -114,14 +114,6 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
           electronAPI.openDevTools()
         }
       },
-      {
-        id: 'Comfy-Desktop.OpenFeedbackPage',
-        label: 'Feedback',
-        icon: 'pi pi-envelope',
-        function() {
-          window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
-        }
-      },
       {
         id: 'Comfy-Desktop.OpenUserGuide',
         label: 'Desktop User Guide',
@@ -176,10 +168,7 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
     menuCommands: [
       {
         path: ['Help'],
-        commands: [
-          'Comfy-Desktop.OpenUserGuide',
-          'Comfy-Desktop.OpenFeedbackPage'
-        ]
+        commands: ['Comfy-Desktop.OpenUserGuide']
       },
       {
         path: ['Help'],

src/hooks/coreCommandHooks.ts

@@ -538,6 +538,15 @@ export function useCoreCommands(): ComfyCommand[] {
         if (workflowStore.activeWorkflow)
           workflowService.closeWorkflow(workflowStore.activeWorkflow)
       }
+    },
+    {
+      id: 'Comfy.Feedback',
+      icon: 'pi pi-megaphone',
+      label: 'Give Feedback',
+      versionAdded: '1.7.15',
+      function: () => {
+        dialogService.showFeedbackDialog()
+      }
     }
   ]
 }

src/locales/en/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "Open DevTools"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "Feedback"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "Desktop User Guide"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "Export Workflow (API Format)"
   },
+  "Comfy_Feedback": {
+    "label": "Give Feedback"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },

src/locales/en/main.json

@@ -72,7 +72,8 @@
     "export": "Export",
     "workflow": "Workflow",
     "success": "Success",
-    "ok": "OK"
+    "ok": "OK",
+    "feedback": "Feedback"
   },
   "issueReport": {
     "submitErrorReport": "Submit Error Report (Optional)",
@@ -82,7 +83,9 @@
     "systemStats": "System Stats",
     "contactFollowUp": "Contact me for follow up",
     "notifyResolve": "Notify me when resolved",
-    "helpFix": "Help Fix This"
+    "helpFix": "Help Fix This",
+    "rating": "Rating",
+    "feedbackTitle": "Help us improve ComfyUI by providing feedback"
   },
   "color": {
     "default": "Default",
@@ -359,7 +362,6 @@
     "Open Models Folder": "Open Models Folder",
     "Open Outputs Folder": "Open Outputs Folder",
     "Open DevTools": "Open DevTools",
-    "Feedback": "Feedback",
     "Desktop User Guide": "Desktop User Guide",
     "Quit": "Quit",
     "Reinstall": "Reinstall",
@@ -381,6 +383,7 @@
     "Duplicate Current Workflow": "Duplicate Current Workflow",
     "Export": "Export",
     "Export (API)": "Export (API)",
+    "Give Feedback": "Give Feedback",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
     "Convert selected nodes to group node": "Convert selected nodes to group node",

src/locales/fr/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "Ouvrir les outils de développement"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "Retour d'information"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "Guide de l'utilisateur du bureau"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "Exporter le flux de travail (format API)"
   },
+  "Comfy_Feedback": {
+    "label": "Retour d'information"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajuster le groupe au contenu"
   },

src/locales/fr/main.json

@@ -89,6 +89,7 @@
     "experimental": "BETA",
     "export": "Exportation",
     "extensionName": "Nom de l'extension",
+    "feedback": "Commentaires",
     "findIssues": "Trouver des problèmes",
     "firstTimeUIMessage": "C'est la première fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Désactivé\" pour restaurer l'ancienne interface utilisateur.",
     "goToNode": "Aller au nœud",
@@ -246,10 +247,12 @@
   },
   "issueReport": {
     "contactFollowUp": "Contactez-moi pour un suivi",
+    "feedbackTitle": "Aidez-nous à améliorer ComfyUI en fournissant des commentaires",
     "helpFix": "Aidez à résoudre cela",
     "notifyResolve": "Prévenez-moi lorsque résolu",
     "provideAdditionalDetails": "Fournir des détails supplémentaires (facultatif)",
     "provideEmail": "Donnez-nous votre email (Facultatif)",
+    "rating": "Évaluation",
     "stackTrace": "Trace de la pile",
     "submitErrorReport": "Soumettre un rapport d'erreur (Facultatif)",
     "systemStats": "Statistiques du système"
@@ -297,9 +300,9 @@
     "Edit": "Éditer",
     "Export": "Exporter",
     "Export (API)": "Exporter (API)",
-    "Feedback": "Retour d'information",
     "Fit Group To Contents": "Ajuster le groupe au contenu",
     "Fit view to selected nodes": "Ajuster la vue aux nœuds sélectionnés",
+    "Give Feedback": "Donnez votre avis",
     "Group Selected Nodes": "Grouper les nœuds sélectionnés",
     "Help": "Aide",
     "Interrupt": "Interrompre",

src/locales/ja/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "DevToolsを開く"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "フィードバック"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "デスクトップユーザーガイド"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "ワークフローをエクスポート（API形式）"
   },
+  "Comfy_Feedback": {
+    "label": "フィードバック"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "グループを内容に合わせて調整"
   },

src/locales/ja/main.json

@@ -89,6 +89,7 @@
     "experimental": "ベータ",
     "export": "エクスポート",
     "extensionName": "拡張機能名",
+    "feedback": "フィードバック",
     "findIssues": "問題を見つける",
     "firstTimeUIMessage": "新しいUIを初めて使用しています。「メニュー > 新しいメニューを使用 > 無効」を選択して古いUIに戻してください。",
     "goToNode": "ノードに移動",
@@ -246,10 +247,12 @@
   },
   "issueReport": {
     "contactFollowUp": "フォローアップのために私に連絡する",
+    "feedbackTitle": "フィードバックを提供してComfyUIの改善にご協力ください",
     "helpFix": "これを修正するのを助ける",
     "notifyResolve": "解決したときに通知する",
     "provideAdditionalDetails": "追加の詳細を提供する（オプション）",
     "provideEmail": "あなたのメールアドレスを教えてください（オプション）",
+    "rating": "評価",
     "stackTrace": "スタックトレース",
     "submitErrorReport": "エラーレポートを提出する（オプション）",
     "systemStats": "システム統計"
@@ -297,9 +300,9 @@
     "Edit": "編集",
     "Export": "エクスポート",
     "Export (API)": "エクスポート (API)",
-    "Feedback": "フィードバック",
     "Fit Group To Contents": "グループを内容に合わせる",
     "Fit view to selected nodes": "選択したノードにビューを合わせる",
+    "Give Feedback": "フィードバックを送る",
     "Group Selected Nodes": "選択したノードをグループ化",
     "Help": "ヘルプ",
     "Interrupt": "中断",

src/locales/ko/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "DevTools 열기"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "피드백"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "데스크톱 사용자 가이드"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "워크플로 내보내기 (API 형식)"
   },
+  "Comfy_Feedback": {
+    "label": "피드백"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "그룹을 내용에 맞게 맞추기"
   },

src/locales/ko/main.json

@@ -89,6 +89,7 @@
     "experimental": "베타",
     "export": "내보내기",
     "extensionName": "확장 이름",
+    "feedback": "피드백",
     "findIssues": "문제 찾기",
     "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
     "goToNode": "노드로 이동",
@@ -246,10 +247,12 @@
   },
   "issueReport": {
     "contactFollowUp": "추적 조사를 위해 연락해 주세요",
+    "feedbackTitle": "피드백을 제공함으로써 ComfyUI를 개선하는 데 도움을 주십시오",
     "helpFix": "이 문제 해결에 도움을 주세요",
     "notifyResolve": "해결되었을 때 알려주세요",
     "provideAdditionalDetails": "추가 세부 사항 제공 (선택 사항)",
     "provideEmail": "이메일을 알려주세요 (선택 사항)",
+    "rating": "평가",
     "stackTrace": "스택 추적",
     "submitErrorReport": "오류 보고서 제출 (선택 사항)",
     "systemStats": "시스템 통계"
@@ -297,9 +300,9 @@
     "Edit": "편집",
     "Export": "내보내기",
     "Export (API)": "내보내기 (API)",
-    "Feedback": "피드백",
     "Fit Group To Contents": "그룹을 내용에 맞게 조정",
     "Fit view to selected nodes": "선택한 노드에 맞게 보기 조정",
+    "Give Feedback": "피드백 제공",
     "Group Selected Nodes": "선택한 노드 그룹화",
     "Help": "도움말",
     "Interrupt": "중단",

src/locales/ru/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "Открыть инструменты разработчика"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "Обратная связь"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "Руководство пользователя для рабочего стола"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "Экспорт рабочего процесса (формат API)"
   },
+  "Comfy_Feedback": {
+    "label": "Обратная связь"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Подогнать группу к содержимому"
   },

src/locales/ru/main.json

@@ -89,6 +89,7 @@
     "experimental": "БЕТА",
     "export": "Экспорт",
     "extensionName": "Название расширения",
+    "feedback": "Обратная связь",
     "findIssues": "Найти проблемы",
     "firstTimeUIMessage": "Вы впервые используете новый интерфейс. Выберите \"Меню > Использовать новое меню > Отключено\", чтобы восстановить старый интерфейс.",
     "goToNode": "Перейти к ноде",
@@ -246,10 +247,12 @@
   },
   "issueReport": {
     "contactFollowUp": "Свяжитесь со мной для уточнения",
+    "feedbackTitle": "Помогите нам улучшить ComfyUI, оставив отзыв",
     "helpFix": "Помочь исправить это",
     "notifyResolve": "Уведомить меня, когда проблема будет решена",
     "provideAdditionalDetails": "Предоставьте дополнительные сведения (необязательно)",
     "provideEmail": "Укажите вашу электронную почту (необязательно)",
+    "rating": "Рейтинг",
     "stackTrace": "Трассировка стека",
     "submitErrorReport": "Отправить отчёт об ошибке (необязательно)",
     "systemStats": "Статистика системы"
@@ -297,9 +300,9 @@
     "Edit": "Редактировать",
     "Export": "Экспортировать",
     "Export (API)": "Экспорт (API)",
-    "Feedback": "Обратная связь",
     "Fit Group To Contents": "Подогнать группу под содержимое",
     "Fit view to selected nodes": "Подогнать вид под выбранные ноды",
+    "Give Feedback": "Оставить отзыв",
     "Group Selected Nodes": "Сгруппировать выбранные ноды",
     "Help": "Помощь",
     "Interrupt": "Прервать",

src/locales/zh/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "打开开发者工具"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "反馈"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "桌面用户指南"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "导出工作流（API格式）"
   },
+  "Comfy_Feedback": {
+    "label": "反馈"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "适应节点框到内容"
   },

src/locales/zh/main.json

@@ -89,6 +89,7 @@
     "experimental": "测试版",
     "export": "导出",
     "extensionName": "扩展名称",
+    "feedback": "反馈",
     "findIssues": "查找问题",
     "firstTimeUIMessage": "这是您第一次使用新界面。选择 \"菜单 > 使用新菜单 > 禁用\" 来恢复旧界面。",
     "goToNode": "转到节点",
@@ -246,10 +247,12 @@
   },
   "issueReport": {
     "contactFollowUp": "跟进联系我",
+    "feedbackTitle": "通过提供反馈帮助我们改进ComfyUI",
     "helpFix": "帮助修复这个",
     "notifyResolve": "解决时通知我",
     "provideAdditionalDetails": "提供额外的详细信息（可选）",
     "provideEmail": "提供您的电子邮件（可选）",
+    "rating": "评分",
     "stackTrace": "堆栈跟踪",
     "submitErrorReport": "提交错误报告（可选）",
     "systemStats": "系统状态"
@@ -297,9 +300,9 @@
     "Edit": "编辑",
     "Export": "导出",
     "Export (API)": "导出 (API)",
-    "Feedback": "反馈",
     "Fit Group To Contents": "适应组内容",
     "Fit view to selected nodes": "适应视图到选中节点",
+    "Give Feedback": "提供反馈",
     "Group Selected Nodes": "将选中节点转换为组节点",
     "Help": "帮助",
     "Interrupt": "中断",

src/services/dialogService.ts

@@ -1,5 +1,6 @@
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ExecutionErrorDialogContent from '@/components/dialog/content/ExecutionErrorDialogContent.vue'
+import FeedbackDialogContent from '@/components/dialog/content/FeedbackDialogContent.vue'
 import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue'
 import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
 import PromptDialogContent from '@/components/dialog/content/PromptDialogContent.vue'
@@ -83,6 +84,16 @@ export const useDialogService = () => {
     })
   }
 
+  function showFeedbackDialog(
+    props: InstanceType<typeof FeedbackDialogContent>['$props'] = {}
+  ) {
+    dialogStore.showDialog({
+      key: 'global-provide-feedback',
+      component: FeedbackDialogContent,
+      props
+    })
+  }
+
   async function prompt({
     title,
     message,
@@ -160,6 +171,7 @@ export const useDialogService = () => {
     showAboutDialog,
     showExecutionErrorDialog,
     showTemplateWorkflowsDialog,
+    showFeedbackDialog,
     prompt,
     confirm
   }