feat: update typeform feedback to be an in app dialog (#12961)

## Summary

The current typeform feedback link takes the user out of the
application, resulting in a worse user experience. This updates the
feedback form to be embedded in a dialog within the app.

## Changes

- **What**: 
- Extract TypeformEmbed from existing popovers
- Add new dialog content that uses this to display embedded form
- Update feedback button to show dialog

## Screenshots (if applicable)

<img width="1501" height="1315" alt="image"
src="https://github.com/user-attachments/assets/07205aec-7863-4be0-a71e-24f5ed9b7766"
/>

---------

Co-authored-by: Austin Mroz <austin@comfy.org>

Author: pythongosssss

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -25,7 +25,7 @@
       ref="feedbackRef"
       data-testid="feedback-embed"
       data-tf-auto-resize
-      :data-tf-widget="typeformId"
+      :data-tf-widget="APP_MODE_FEEDBACK_TYPEFORM_ID"
     />
   </Popover>
   <SidebarIcon
@@ -68,7 +68,7 @@ const sidebarOnLeft = computed(
 )
 
 const feedbackRef = useTemplateRef<HTMLDivElement>('feedbackRef')
-const { typeformError, isValidTypeformId, typeformId } = useTypeformEmbed(
+const { typeformError, isValidTypeformId } = useTypeformEmbed(
   feedbackRef,
   APP_MODE_FEEDBACK_TYPEFORM_ID
 )

src/components/topbar/WorkflowTabs.test.ts

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, h, reactive } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -36,7 +36,15 @@ vi.mock('@/platform/settings/settingStore', () => ({
 }))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
-  useCurrentUser: () => ({ isLoggedIn: { value: false } })
+  useCurrentUser: () => ({
+    isLoggedIn: { value: false },
+    userEmail: { value: undefined }
+  })
+}))
+
+const openFeedbackDialog = vi.hoisted(() => vi.fn())
+vi.mock('@/platform/support/feedbackDialog', () => ({
+  openFeedbackDialog
 }))
 
 vi.mock('@/composables/useFeatureFlags', () => ({
@@ -132,44 +140,28 @@ function renderComponent() {
 }
 
 describe('WorkflowTabs feedback button', () => {
-  let openSpy: ReturnType<typeof vi.spyOn>
-
   beforeEach(() => {
     distribution.isCloud = false
     distribution.isDesktop = false
     distribution.isNightly = false
     tabBarLayout.value = 'Default'
-    openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
-  })
-
-  afterEach(() => {
-    openSpy.mockRestore()
+    openFeedbackDialog.mockReset()
   })
 
-  it('opens the Typeform survey tagged with topbar source on Cloud', async () => {
+  it('opens the feedback dialog tagged with topbar source when clicked', async () => {
     distribution.isCloud = true
     const { user } = renderComponent()
 
     await user.click(screen.getByRole('button', { name: 'Feedback' }))
 
-    expect(openSpy).toHaveBeenCalledWith(
-      'https://form.typeform.com/to/q7azbWPi#distribution=ccloud&source=topbar',
-      '_blank',
-      'noopener,noreferrer'
-    )
+    expect(openFeedbackDialog).toHaveBeenCalledWith('topbar')
   })
 
-  it('opens the Typeform survey tagged with topbar source on Nightly', async () => {
+  it('renders the feedback button on Nightly', () => {
     distribution.isNightly = true
-    const { user } = renderComponent()
-
-    await user.click(screen.getByRole('button', { name: 'Feedback' }))
+    renderComponent()
 
-    expect(openSpy).toHaveBeenCalledWith(
-      'https://form.typeform.com/to/q7azbWPi#distribution=oss-nightly&source=topbar',
-      '_blank',
-      'noopener,noreferrer'
-    )
+    expect(screen.getByRole('button', { name: 'Feedback' })).toBeInTheDocument()
   })
 
   it('does not render the feedback button on non-Cloud/non-Nightly builds', () => {

src/components/topbar/WorkflowTabs.vue

@@ -120,7 +120,7 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useWorkflowStatusDismissal } from '@/composables/useWorkflowStatusDismissal'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { buildFeedbackTypeformUrl } from '@/platform/support/config'
+import { openFeedbackDialog } from '@/platform/support/feedbackDialog'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -157,11 +157,7 @@ const isIntegratedTabBar = computed(
 const showCurrentUser = computed(() => isCloud || isLoggedIn.value)
 
 function openFeedback() {
-  window.open(
-    buildFeedbackTypeformUrl('topbar'),
-    '_blank',
-    'noopener,noreferrer'
-  )
+  openFeedbackDialog('topbar')
 }
 
 const containerRef = ref<HTMLElement | null>(null)

src/extensions/core/cloudFeedbackTopbarButton.test.ts

@@ -1,11 +1,10 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ActionBarButton } from '@/types/comfy'
 
-const distribution = vi.hoisted(() => ({ isCloud: false, isNightly: false }))
-
 const tabBarLayout = vi.hoisted(() => ({ value: 'Default' }))
 const registerExtension = vi.hoisted(() => vi.fn())
+const openFeedbackDialog = vi.hoisted(() => vi.fn())
 
 vi.mock('@/i18n', () => ({
   t: (key: string) => key
@@ -24,28 +23,15 @@ vi.mock('@/services/extensionService', () => ({
   })
 }))
 
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return distribution.isCloud
-  },
-  get isNightly() {
-    return distribution.isNightly
-  }
+vi.mock('@/platform/support/feedbackDialog', () => ({
+  openFeedbackDialog
 }))
 
 describe('cloudFeedbackTopbarButton', () => {
-  let openSpy: ReturnType<typeof vi.spyOn>
-
   beforeEach(() => {
     vi.resetModules()
     registerExtension.mockReset()
-    distribution.isCloud = false
-    distribution.isNightly = false
-    openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
-  })
-
-  afterEach(() => {
-    openSpy.mockRestore()
+    openFeedbackDialog.mockReset()
   })
 
   function getRegisteredButtons(): ActionBarButton[] {
@@ -56,22 +42,15 @@ describe('cloudFeedbackTopbarButton', () => {
     return extension.actionBarButtons
   }
 
-  it('opens the Typeform survey tagged with action-bar source on Cloud', async () => {
+  it('opens the feedback survey tagged with the action-bar source', async () => {
     tabBarLayout.value = 'Legacy'
-    distribution.isCloud = true
     await import('./cloudFeedbackTopbarButton')
 
     const buttons = getRegisteredButtons()
     expect(buttons).toHaveLength(1)
     buttons[0].onClick?.()
 
-    expect(openSpy).toHaveBeenCalledTimes(1)
-    const [url, target, features] = openSpy.mock.calls[0]
-    expect(url).toBe(
-      'https://form.typeform.com/to/q7azbWPi#distribution=ccloud&source=action-bar'
-    )
-    expect(target).toBe('_blank')
-    expect(features).toBe('noopener,noreferrer')
+    expect(openFeedbackDialog).toHaveBeenCalledWith('action-bar')
   })
 
   it('only registers the action bar button when the tab bar is Legacy', async () => {

src/extensions/core/cloudFeedbackTopbarButton.ts

@@ -1,6 +1,6 @@
 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { buildFeedbackTypeformUrl } from '@/platform/support/config'
+import { openFeedbackDialog } from '@/platform/support/feedbackDialog'
 import { useExtensionService } from '@/services/extensionService'
 import type { ActionBarButton } from '@/types/comfy'
 
@@ -9,13 +9,7 @@ const buttons: ActionBarButton[] = [
     icon: 'icon-[lucide--message-square-text]',
     label: t('actionbar.feedback'),
     tooltip: t('actionbar.feedbackTooltip'),
-    onClick: () => {
-      window.open(
-        buildFeedbackTypeformUrl('action-bar'),
-        '_blank',
-        'noopener,noreferrer'
-      )
-    }
+    onClick: () => openFeedbackDialog('action-bar')
   }
 ]
 

src/locales/en/main.json

@@ -3182,13 +3182,18 @@
     "description": "You've been using this feature. Would you take a moment to share your feedback?",
     "accept": "Sure, I'll help!",
     "notNow": "Not Now",
-    "dontAskAgain": "Don't Ask Again",
-    "loadError": "Failed to load survey. Please try again later."
+    "dontAskAgain": "Don't Ask Again"
   },
   "errorPanelSurvey": {
     "ctaText": "How's the new error panel?",
     "ctaButton": "Give feedback"
   },
+  "feedback": {
+    "title": "Share Feedback"
+  },
+  "typeform": {
+    "loadError": "Failed to load the form. Please try again later."
+  },
   "cloudOnboarding": {
     "skipToCloudApp": "Skip to the cloud app",
     "survey": {

src/platform/support/config.test.ts

@@ -50,3 +50,40 @@ describe('buildFeedbackTypeformUrl', () => {
     expect(url.hash).toBe('#distribution=ccloud&source=topbar')
   })
 })
+
+describe('buildFeedbackHiddenFields', () => {
+  beforeEach(() => {
+    distribution.isCloud = false
+    distribution.isNightly = false
+  })
+
+  async function build(
+    source: 'topbar' | 'action-bar' | 'help-center',
+    extraTags?: Record<string, string>
+  ) {
+    vi.resetModules()
+    const { buildFeedbackHiddenFields } = await import('./config')
+    return buildFeedbackHiddenFields(source, extraTags)
+  }
+
+  it('reflects the build distribution', async () => {
+    distribution.isNightly = true
+    expect(await build('action-bar')).toBe(
+      'distribution=oss-nightly,source=action-bar'
+    )
+  })
+
+  it('appends extra tags after the base segmentation tags', async () => {
+    distribution.isCloud = true
+    expect(await build('topbar', { email: 'user@example.com' })).toBe(
+      'distribution=ccloud,source=topbar,email=user@example.com'
+    )
+  })
+
+  it('escapes commas in values so they survive the data-tf-hidden parser', async () => {
+    distribution.isCloud = true
+    expect(await build('topbar', { email: 'a,b@example.com' })).toBe(
+      'distribution=ccloud,source=topbar,email=a\\,b@example.com'
+    )
+  })
+})

src/platform/support/config.ts

@@ -25,24 +25,40 @@ function getDistribution(): 'ccloud' | 'oss-nightly' | 'oss' {
 }
 
 const SUPPORT_BASE_URL = 'https://support.comfy.org/hc/en-us/requests/new'
-const FEEDBACK_TYPEFORM_BASE_URL = 'https://form.typeform.com/to/q7azbWPi'
+
+export type FeedbackSource = 'topbar' | 'action-bar' | 'help-center'
+
+export const FEEDBACK_TYPEFORM_ID = 'q7azbWPi'
+
+const FEEDBACK_TYPEFORM_BASE_URL = `https://form.typeform.com/to/${FEEDBACK_TYPEFORM_ID}`
+
+/** Shared by the URL and embed builders so their segmentation tags can't drift. */
+function getFeedbackTags(source: FeedbackSource): Record<string, string> {
+  return { distribution: getDistribution(), source }
+}
 
 /**
  * Builds the feedback Typeform URL tagged with the current build distribution
  * and the UI source that opened it. Tags are passed via the URL fragment
  * (Typeform's hidden-field convention) so survey responses can be segmented
  * by distribution (cloud / oss-nightly / oss) and entry point.
  */
-export function buildFeedbackTypeformUrl(
-  source: 'topbar' | 'action-bar' | 'help-center'
-): string {
-  const params = new URLSearchParams({
-    distribution: getDistribution(),
-    source
-  })
+export function buildFeedbackTypeformUrl(source: FeedbackSource): string {
+  const params = new URLSearchParams(getFeedbackTags(source))
   return `${FEEDBACK_TYPEFORM_BASE_URL}#${params.toString()}`
 }
 
+export function buildFeedbackHiddenFields(
+  source: FeedbackSource,
+  extraTags: Record<string, string> = {}
+): string {
+  // Typeform's `data-tf-hidden` parser (transformRecord) splits on `,` and
+  // unescapes `\,`, so a comma in a value is the only delimiter that needs escaping.
+  return Object.entries({ ...getFeedbackTags(source), ...extraTags })
+    .map(([key, value]) => `${key}=${value.replace(/,/g, '\\,')}`)
+    .join(',')
+}
+
 /**
  * Builds the support URL with optional user information for pre-filling.
  * Users without login information will still get a valid support URL without pre-fill.