[feat] Add video help dialog to Upload Model flow #7177
Conversation
Add reusable VideoHelpDialog component with tutorial video for finding CivitAI model URLs in the Upload Model wizard. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
luke-mino-altherr
added
enhancement
dosubot
bot
added
the
size:L
📝 WalkthroughWalkthroughAdds a new VideoHelpDialog Vue component and integrates it into UploadModelFooter by replacing the step‑1 help link with a button that toggles a reactive Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/05/2025, 04:25:27 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/05/2025, 04:34:48 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • 🔴 +103 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 975 kB (baseline 975 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 177 kB (baseline 173 kB) • 🔴 +3.58 kBReusable component library chunks
Status: 9 added / 9 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 3 added / 3 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • 🔴 +1 BExternal libraries and shared vendor chunks
Status: 5 added / 5 removed Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 23 added / 23 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/platform/assets/components/UploadModelFooter.vue(2 hunks)src/platform/assets/components/VideoHelpDialog.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/VideoHelpDialog.vue🧠 Learnings (11)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panelsApplied to files:
src/platform/assets/components/UploadModelFooter.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with MessageApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)Applied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when neededApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when neededApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use vue 3.5 style of default prop declarationApplied to files:
src/platform/assets/components/VideoHelpDialog.vue⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (4)
src/platform/assets/components/VideoHelpDialog.vue (2)
2-15: LGTM!The Dialog configuration correctly implements custom ESC handling by disabling built-in handlers (
closable="false",close-on-escape="false"), while maintaining accessibility through backdrop dismissal. The passthrough styling follows best practices.
43-63: LGTM!Props and emits follow Vue 3.5 conventions perfectly. The computed property correctly implements two-way binding for
v-modelsupport.src/platform/assets/components/UploadModelFooter.vue (2)
3-11: Verify i18n key follows project naming conventions.The translation key
'How do I find this?'doesn't match the project's pattern of using namespaced keys like'g.close'or'assetBrowser.upload'. It should likely be something like'assetBrowser.findModelUrl'or'assetBrowser.uploadModelHelp'.Additionally,
cursor-pointeris redundant for<button>elements—browsers provide pointer cursors by default.Please verify that:
- The i18n key exists in
src/locales/en/main.json- The key follows the project's naming convention
If needed, apply this diff to use a conventional key name:
- <span>{{ $t('How do I find this?') }}</span> + <span>{{ $t('assetBrowser.findModelUrl') }}</span>And add to
src/locales/en/main.json:"assetBrowser": { "findModelUrl": "How do I find this?" }As per coding guidelines: Use vue-i18n for ALL user-facing strings.
82-88: LGTM!Proper Vue 3 Composition API usage with correctly initialized reactive state and component imports.
| const handleEscapeKey = (event: KeyboardEvent) => { | ||
| if (event.key === 'Escape' && isVisible.value) { | ||
| event.stopImmediatePropagation() | ||
| event.stopPropagation() | ||
| event.preventDefault() | ||
| isVisible.value = false | ||
| } | ||
| } | ||
| watch(isVisible, (visible) => { | ||
| if (visible) { | ||
| // Add listener with capture phase to intercept before parent dialogs | ||
| document.addEventListener('keydown', handleEscapeKey, { capture: true }) | ||
| } else { | ||
| document.removeEventListener('keydown', handleEscapeKey, { capture: true }) | ||
| } | ||
| }) | ||
| onUnmounted(() => { | ||
| document.removeEventListener('keydown', handleEscapeKey, { capture: true }) | ||
| }) |
There was a problem hiding this comment.
had to do some finagling so that esc wouldn't close the modal underneath this
There was a problem hiding this comment.
- Add muted attribute to video for cross-browser autoplay support - Add aria-label prop (optional) for screen reader accessibility - Add i18n key assetBrowser.uploadModelHelpVideo - Fix watcher with immediate:true to handle mount with modelValue=true - Make ariaLabel optional with sensible default for better DX 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
luke-mino-altherr
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/locales/en/main.json(1 hunks)src/platform/assets/components/UploadModelFooter.vue(2 hunks)src/platform/assets/components/VideoHelpDialog.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue🧠 Learnings (13)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with MessageApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/platform/assets/components/VideoHelpDialog.vuesrc/platform/assets/components/UploadModelFooter.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)Applied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when neededApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventionsApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use watch and watchEffect for side effectsApplied to files:
src/platform/assets/components/VideoHelpDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panelsApplied to files:
src/platform/assets/components/UploadModelFooter.vue⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: collect
- GitHub Check: lint-and-format
- GitHub Check: test
🔇 Additional comments (1)
src/locales/en/main.json (1)
2116-2116: New help video i18n key is consistent and ready for use
assetBrowser.uploadModelHelpVideofollows existing naming, and the value is clear and appropriate for the dialog/video ARIA label.
| <template> | ||
| <Dialog | ||
| v-model:visible="isVisible" | ||
| modal | ||
| :closable="false" | ||
| :close-on-escape="false" | ||
| :dismissable-mask="true" | ||
| :pt="{ | ||
| root: { class: 'video-help-dialog' }, | ||
| header: { class: '!hidden' }, | ||
| content: { class: '!p-0' }, | ||
| mask: { class: '!bg-black/70' } | ||
| }" | ||
| :style="{ width: '90vw', maxWidth: '800px' }" | ||
| > | ||
| <div class="relative"> | ||
| <IconButton | ||
| class="absolute top-4 right-6 z-10" | ||
| :aria-label="$t('g.close')" | ||
| @click="isVisible = false" | ||
| > | ||
| <i class="pi pi-times text-sm" /> | ||
| </IconButton> | ||
| <video | ||
| :controls="showControls" | ||
| autoplay | ||
| muted | ||
| :loop="loop" | ||
| :aria-label="ariaLabel" | ||
| class="w-full rounded-lg" | ||
| :src="videoUrl" | ||
| > | ||
| {{ $t('g.videoFailedToLoad') }} | ||
| </video> | ||
| </div> | ||
| </Dialog> | ||
| </template> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Component behavior looks solid; consider making the default ariaLabel i18n-aware
Overall the dialog is well-structured: PrimeVue Dialog usage, modelValue/isVisible binding, capture-phase ESC handling with proper add/remove, and video autoplay/accessibility are all implemented correctly.
One minor improvement: the ariaLabel prop default is a hardcoded English string:
withDefaults(defineProps<...>(), {
ariaLabel: 'Help video',
loop: true,
showControls: false
})Given the i18n guidelines, it would be better to either:
- Remove the default and force callers to pass a localized label, or
- Provide a localized fallback, e.g. by falling back in the template:
- <video
- :controls="showControls"
- autoplay
- muted
- :loop="loop"
- :aria-label="ariaLabel"
+ <video
+ :controls="showControls"
+ autoplay
+ muted
+ :loop="loop"
+ :aria-label="ariaLabel || $t('assetBrowser.uploadModelHelpVideo')"
class="w-full rounded-lg"
:src="videoUrl"
>This ensures that any future use of the component without an explicit aria-label remains localized while keeping the current API.
Also applies to: 45-91
🤖 Prompt for AI Agents
In src/platform/assets/components/VideoHelpDialog.vue around lines 1-37 (and
also apply same change to lines 45-91), the ariaLabel prop currently defaults to
a hardcoded English string which breaks i18n; change the implementation so the
component does not use a hardcoded default but instead uses a localized fallback
at render time (or remove the default prop entirely and require callers to pass
it). Concretely: remove the hardcoded default in withDefaults or make ariaLabel
optional, and in the template compute ariaLabel via the $t() translator when the
prop is absent (e.g. use ariaLabel || $t('...')) so the rendered aria-label is
localized while preserving the existing prop API.
Replace raw string in $t('How do I find this?') with proper i18n key
assetBrowser.uploadModelHowDoIFindThis to follow localization pattern.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/locales/en/main.json(1 hunks)src/platform/assets/components/UploadModelFooter.vue(2 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/UploadModelFooter.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/UploadModelFooter.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/UploadModelFooter.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/assets/components/UploadModelFooter.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/UploadModelFooter.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/assets/components/UploadModelFooter.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/assets/components/UploadModelFooter.vue🧠 Learnings (4)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panelsApplied to files:
src/platform/assets/components/UploadModelFooter.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`Applied to files:
src/platform/assets/components/UploadModelFooter.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonApplied to files:
src/platform/assets/components/UploadModelFooter.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonApplied to files:
src/platform/assets/components/UploadModelFooter.vue⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (2)
src/locales/en/main.json (1)
2116-2117: New upload-model help i18n keys are well‑named and aligned with usageThe added
assetBrowser.uploadModelHelpVideoandassetBrowser.uploadModelHowDoIFindThiskeys fit the existingassetBrowsernaming pattern and provide clear, reusable labels for the help dialog and trigger button. No changes needed.Based on learnings, this satisfies the “use vue‑i18n for ALL user‑facing strings” guideline.
src/platform/assets/components/UploadModelFooter.vue (1)
72-78: VideoHelpDialog integration, state, and aria labeling are consistent and accessible
showVideoHelpis correctly managed as aref(false)and bound viav-modeltoVideoHelpDialog, and the dialog is configured with:
- A fixed tutorial URL via
video-url- A localized ARIA label via
:aria-label="$t('assetBrowser.uploadModelHelpVideo')"- Boolean
loopand:show-controls="false"props matching the described APIThis cleanly satisfies the PR goal of adding a reusable video help dialog to the Upload Model flow without impacting existing footer behavior.
Based on learnings, the i18n usage and component wiring follow the established Composition API + vue‑i18n patterns.
Also applies to: 83-90
| <button | ||
| v-if="currentStep === 1" | ||
| class="text-muted-foreground mr-auto underline flex items-center gap-2" | ||
| class="text-muted-foreground mr-auto underline flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0" | ||
| data-attr="upload-model-step1-help-link" | ||
| @click="showVideoHelp = true" | ||
| > | ||
| <i class="icon-[lucide--circle-question-mark]" /> | ||
| <a | ||
| href="#" | ||
| target="_blank" | ||
| class="text-muted-foreground" | ||
| data-attr="upload-model-step1-help-link" | ||
| >{{ $t('How do I find this?') }}</a | ||
| > | ||
| </span> | ||
| <span>{{ $t('assetBrowser.uploadModelHowDoIFindThis') }}</span> | ||
| </button> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Help button wiring and i18n usage look good; consider explicit button type
The step‑1 help trigger correctly:
- Preserves
data-attr="upload-model-step1-help-link"for tracking - Uses the new localized label
assetBrowser.uploadModelHowDoIFindThis - Opens the video dialog via
showVideoHelp = true
To avoid accidental form submission if this footer is ever rendered inside a <form>, it’s safer to mark this as a non‑submit button:
- <button
+ <button
+ type="button"
v-if="currentStep === 1"
class="text-muted-foreground mr-auto underline flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
data-attr="upload-model-step1-help-link"
@click="showVideoHelp = true"Based on learnings, the move from a raw string to the localized key is the correct i18n pattern.
🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelFooter.vue around lines 3 to 11,
the help button is missing an explicit button type which can cause accidental
form submission when rendered inside a form; add type="button" to the <button>
element so it is explicitly a non-submit button, preserving all existing
attributes (v-if, classes, data-attr, @click) and localization.
There was a problem hiding this comment.
I'd go with the IconTextButton, that way this will get migrated properly with the rest.
There was a problem hiding this comment.
@DrJKL, great point! Using IconTextButton will keep this consistent with the other buttons and handle the type="button" implicitly. Here's how to adapt it:
<IconTextButton
v-if="currentStep === 1"
:label="$t('assetBrowser.uploadModelHowDoIFindThis')"
type="transparent"
size="md"
class="mr-auto underline text-muted-foreground"
data-attr="upload-model-step1-help-link"
@click="showVideoHelp = true"
>
<template #icon>
<i class="icon-[lucide--circle-question-mark]" />
</template>
</IconTextButton>This preserves:
- The PostHog tracking attribute (
data-attr) - The localized label
- The icon slot pattern used elsewhere in the footer
- The left alignment (
mr-auto) and underline styling - The video dialog trigger
The transparent type should give you the link-like appearance while keeping the button accessible and consistent with the component architecture.
| const emit = defineEmits<{ | ||
| 'update:modelValue': [value: boolean] | ||
| }>() |
There was a problem hiding this comment.
| :controls="showControls" | ||
| autoplay | ||
| muted | ||
| :loop="loop" |
There was a problem hiding this comment.
Optional:
| :loop="loop" | |
| :loop |
| modelValue: boolean | ||
| videoUrl: string | ||
| ariaLabel?: string | ||
| loop?: boolean | ||
| showControls?: boolean |
There was a problem hiding this comment.
If any of these are always the same, I would remove them as props for now and just set them internally. YAGNI
| const props = withDefaults( | ||
| defineProps<{ | ||
| modelValue: boolean | ||
| videoUrl: string | ||
| ariaLabel?: string | ||
| loop?: boolean | ||
| showControls?: boolean | ||
| }>(), | ||
| { | ||
| ariaLabel: 'Help video', | ||
| loop: true, | ||
| showControls: false | ||
| } | ||
| ) |
There was a problem hiding this comment.
Nit: We don't need withDefaults with the version of Vue we're using
https://vuejs.org/guide/components/props.html#reactive-props-destructure
(modelValue intentionally omitted since that can be handled with defineModel)
| const props = withDefaults( | |
| defineProps<{ | |
| modelValue: boolean | |
| videoUrl: string | |
| ariaLabel?: string | |
| loop?: boolean | |
| showControls?: boolean | |
| }>(), | |
| { | |
| ariaLabel: 'Help video', | |
| loop: true, | |
| showControls: false | |
| } | |
| ) | |
| const { | |
| videoUrl, | |
| ariaLabel = 'Help video', | |
| loop = true, | |
| showControls = false | |
| } = defineProps<{ | |
| videoUrl: string | |
| ariaLabel?: string | |
| loop?: boolean | |
| showControls?: boolean | |
| }>() |
Summary
Adds an interactive video tutorial dialog to help users find CivitAI model URLs during the Upload Model wizard.
Changes
VideoHelpDialog.vuecomponentvideoUrl,loop,showControlsupload-model-step1-help-link)Review Focus
MediaVideoTop.vueandBaseModalLayout.vue🤖 Generated with Claude Code
┆Issue is synchronized with this Notion page by Unito