-
Notifications
You must be signed in to change notification settings - Fork 614
fix: add scrollable support to PopoverContent to prevent overflow #720
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: add scrollable support to PopoverContent to prevent overflow #720
Conversation
WalkthroughReplaced the previous Popover+PopoverContent wrapping of settings with a new dedicated Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NewThread/TitleView
participant ScrollablePopover
participant Popover
participant PopoverContent
participant ChatConfig
User->>NewThread/TitleView: click settings trigger
NewThread/TitleView->>ScrollablePopover: emit open via trigger slot
ScrollablePopover->>Popover: render Popover with attrs/align
Popover->>PopoverContent: render content (class includes p-0 + contentClass)
ScrollablePopover->>PopoverContent: if enableScrollable true, wrap slot in scroll container
PopoverContent->>ChatConfig: render ChatConfig inside content (v-models/props forwarded)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/renderer/src/components/ui/popover/PopoverContent.vue (4)
13-16: Consider renaming prop to align with naming guidelines (use auxiliary verbs).Team guideline suggests booleans like isLoading/hasError. Prefer isScrollable over enableScrollable for consistency.
- defineProps<PopoverContentProps & { - class?: HTMLAttributes['class'] - enableScrollable?: boolean - }>(), + defineProps<PopoverContentProps & { + class?: HTMLAttributes['class'] + isScrollable?: boolean + }>(),Follow-up diffs provided below for other occurrences if you choose to rename.
19-21: Defaults look fine; sideOffset 4 matches common shadcn defaults.If you adopt the rename suggestion, update the default key accordingly.
{ align: 'center', sideOffset: 4, - enableScrollable: false + isScrollable: false }
41-41: Make max height responsive to viewport to avoid overflow on small screens.Using a fixed max-h-96 can still overflow on short viewports. Consider a viewport-based cap with a desktop override.
- props.enableScrollable && 'max-h-96 overflow-hidden', + props.isScrollable && 'max-h-[80vh] md:max-h-96 overflow-hidden',If you keep the original prop name:
- props.enableScrollable && 'max-h-[80vh] md:max-h-96 overflow-hidden', + props.enableScrollable && 'max-h-[80vh] md:max-h-96 overflow-hidden',
46-49: Simplify scroll wrapper and improve scroll UX.
- Inner max-h duplicates the parent constraint; you can drop it.
- Add overscroll-contain to prevent scroll chaining.
- Optional: small right padding to avoid content under scrollbar on some platforms.
If you adopt the rename:
- <div v-if="props.enableScrollable" class="max-h-96 overflow-y-auto"> + <div v-if="props.isScrollable" class="overflow-y-auto overscroll-contain pr-2"> <slot /> </div> - <slot v-else /> + <slot v-else />If you keep the current prop name:
- <div v-if="props.enableScrollable" class="max-h-96 overflow-y-auto"> + <div v-if="props.enableScrollable" class="overflow-y-auto overscroll-contain pr-2">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/renderer/src/components/NewThread.vue(1 hunks)src/renderer/src/components/TitleView.vue(1 hunks)src/renderer/src/components/ui/popover/PopoverContent.vue(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use English for logs and comments
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/src/**/*.vue
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI componentsUse scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/src/**/*
📄 CodeRabbit Inference Engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.
Files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
🧠 Learnings (12)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use <script setup> syntax for concise component definitions.
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vue
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Use the Composition API for better code organization and reusability
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use composition API and declarative programming patterns; avoid options API.
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.vue : Use scoped styles to prevent CSS conflicts between components
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/renderer/src/**/*.vue : Use Composition API with proper TypeScript typing for new UI components
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/src/components/TitleView.vue
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/renderer/src/**/*.vue : Implement responsive design with Tailwind CSS for new UI components
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vue
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/renderer/src/**/*.vue : Use Tailwind CSS with scoped styles for styling
Applied to files:
src/renderer/src/components/TitleView.vuesrc/renderer/src/components/NewThread.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Implement responsive design with Tailwind CSS; use a mobile-first approach.
Applied to files:
src/renderer/src/components/TitleView.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
Applied to files:
src/renderer/src/components/NewThread.vuesrc/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use template syntax for declarative rendering.
Applied to files:
src/renderer/src/components/NewThread.vue
🔇 Additional comments (3)
src/renderer/src/components/ui/popover/PopoverContent.vue (1)
26-26: Good: exclude non-Radix props from forwarding.Filtering out class and enableScrollable prevents leaking unknown attributes to DOM/Radix.
If you adopt the rename suggestion:
- const { class: _, enableScrollable: __, ...delegated } = props + const { class: _, isScrollable: __, ...delegated } = propssrc/renderer/src/components/NewThread.vue (1)
81-81: Enabling scroll is appropriate here.This is the right place to cap height and allow vertical scroll for ChatConfig. LGTM.
If you adopt the prop rename in PopoverContent, update here too:
- <PopoverContent align="start" class="p-0 w-80" :enable-scrollable="true"> + <PopoverContent align="start" class="p-0 w-80" :is-scrollable="true">src/renderer/src/components/TitleView.vue (1)
52-52: LGTM: Scrollable settings popover improves usability.Consistent with NewThread.vue; helps prevent overflow.
If you adopt the prop rename:
- <PopoverContent align="end" class="p-0 w-80" :enable-scrollable="true"> + <PopoverContent align="end" class="p-0 w-80" :is-scrollable="true">
| align: 'center', | ||
| sideOffset: 4 | ||
| sideOffset: 4, | ||
| enableScrollable: false |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
不要对 ui/ 目录下的 shadcn的原始文件进行修改,会导致后续无法维护,如果要对控件进行改动,在 components 下面额外套一层来解决
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
已回滚,并在 components 下套层解决
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/renderer/src/components/NewThread.vue (1)
74-86: Add accessible label to the settings trigger (use i18n)Provide an aria-label/title for screen readers. Keep strings via i18n per guidelines.
<template #trigger> <Button class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300" :class="{ 'w-0 opacity-0 p-0 overflow-hidden': !showSettingsButton && !isHovering, 'w-7 opacity-100': showSettingsButton || isHovering }" size="icon" variant="outline" + :aria-label="t('common.settings')" + :title="t('common.settings')" > <Icon icon="lucide:settings-2" class="w-4 h-4" /> </Button> </template>src/renderer/src/components/ScrollablePopover.vue (3)
6-14: Refine overflow handling to avoid clipping and improve scroll chainingApplying overflow-hidden to PopoverContent can clip internal shadows or nested overlays. Rely on the inner scroll container and add overscroll-contain to prevent scroll chaining.
<PopoverContent :align="align" - :class="cn('p-0', contentClass, enableScrollable && 'max-h-96 overflow-hidden')" + :class="cn('p-0', contentClass, enableScrollable && 'max-h-96')" > - <div v-if="enableScrollable" class="max-h-96 overflow-y-auto"> + <div v-if="enableScrollable" class="max-h-96 overflow-y-auto overscroll-contain"> <slot /> </div> <slot v-else /> </PopoverContent>
18-33: Minor nit: add a component name for better devtools tracesName helps debugging and telemetry; zero runtime cost.
<script setup lang="ts"> +defineOptions({ name: 'ScrollablePopover' })
6-14: Optional: expose a content wrapper slot for custom scroll containersIf future use-cases need sticky headers/footers inside the popover, a dedicated wrapper slot (e.g., #content) can avoid another component. Not required now.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/renderer/src/components/NewThread.vue(3 hunks)src/renderer/src/components/ScrollablePopover.vue(1 hunks)src/renderer/src/components/TitleView.vue(2 hunks)src/renderer/src/components/ui/popover/PopoverContent.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/renderer/src/components/TitleView.vue
- src/renderer/src/components/ui/popover/PopoverContent.vue
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use English for logs and comments
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/src/**/*.vue
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI componentsUse scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/src/**/*
📄 CodeRabbit Inference Engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.
Files:
src/renderer/src/components/ScrollablePopover.vuesrc/renderer/src/components/NewThread.vue
🧠 Learnings (1)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.
Applied to files:
src/renderer/src/components/NewThread.vue
🔇 Additional comments (4)
src/renderer/src/components/NewThread.vue (3)
67-73: Good swap to ScrollablePopover; v-model pass-through looks correctThe replacement preserves open-state binding and aligns="start" with a clean content-class. No functional issues spotted here.
87-97: LGTM: ChatConfig now benefits from scrollable popoverBindings and limits are preserved. This resolves overflow without altering config semantics.
111-111: Import looks correct and localized to this componentScrollablePopover is correctly imported relative to current directory; existing Popover imports remain for the model selector above.
src/renderer/src/components/ScrollablePopover.vue (1)
2-5: Pass-through with $attrs is clean and keeps API surface smallForwarding unknown attrs and listeners to Popover works well for reusability. Good use of the trigger slot with as-child.
| interface ScrollablePopoverProps { | ||
| align?: 'start' | 'center' | 'end' | ||
| enableScrollable?: boolean | ||
| contentClass?: HTMLAttributes['class'] | ||
| } | ||
| withDefaults(defineProps<ScrollablePopoverProps>(), { | ||
| align: 'center', | ||
| enableScrollable: false, | ||
| contentClass: '' | ||
| }) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Type the v-model:open API and prefer type alias over interface (per guidelines)
For better DX with Volar and to satisfy “Use TypeScript types over interfaces,” explicitly type the open prop and update:open emit. Also forward them to the underlying Popover, so v-model:open is fully typed and not just passed via $attrs.
-interface ScrollablePopoverProps {
- align?: 'start' | 'center' | 'end'
- enableScrollable?: boolean
- contentClass?: HTMLAttributes['class']
-}
+type ScrollablePopoverProps = {
+ align?: 'start' | 'center' | 'end'
+ enableScrollable?: boolean
+ contentClass?: HTMLAttributes['class']
+ // expose v-model:open for proper typing
+ open?: boolean
+}
-withDefaults(defineProps<ScrollablePopoverProps>(), {
+withDefaults(defineProps<ScrollablePopoverProps>(), {
align: 'center',
enableScrollable: false,
contentClass: ''
})Additionally update the template to explicitly forward the open state and emit updates:
<script setup lang="ts">
const emit = defineEmits<{ (e: 'update:open', value: boolean): void }>()
// (keep the existing defineProps above)
</script>
<template>
<Popover
- v-bind="$attrs"
+ :open="open"
+ @update:open="emit('update:open', $event)"
+ v-bind="$attrs"
>
...
</Popover>
</template>Optional naming consistency with guidelines: consider renaming enableScrollable to isScrollable (and aliasing the old name for backward compatibility).
🤖 Prompt for AI Agents
In src/renderer/src/components/ScrollablePopover.vue around lines 23–33, replace
the interface with a TypeScript type alias that includes an explicit open?:
boolean prop (so v-model:open is typed), keep withDefaults for defaults, and add
a typed defineEmits signature for update:open; then update the template Popover
usage to explicitly pass :open="open" and forward @update:open by calling
emit('update:open', $event) before v-bind="$attrs". Optionally rename
enableScrollable to isScrollable and provide a backward-compatible alias to
preserve existing usage.
* wip: add modelscope provider * feat: add mcp sync to modelscope * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * chore: i18n and format * feat: better style * fix: mcp tool display --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
* fix: add AlertDialogDescription to resolve accessibility warning (#706) * fix: resolve focus flicker when creating new windows with Ctrl+Shift+N (#707) * feat: enhance window management by implementing main window ID handling (#709) * docs: update zhipu developer doc website link (#715) Co-authored-by: gongchao <chao.gong@aminer.cn> * refactor: better translate (#716) * chore: en-us i18n * chore(i18n): polish ja-JP translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fr-FR translations; keep chat.input.placeholder unchanged * chore(i18n): refine fr-FR MCP & Settings copy; idiomatic, concise, brand-consistent * chore(i18n): polish ru-RU translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fa-IR translations across UI; keep chat.input.placeholder unchanged * chore: fix format * chore: fix i18n * chore: lock rolldown-vite version * feat: add GPT-5 series model support (#717) * ci(vite): Bundle the main file into a single file to speed up loading. (#718) * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps (#721) * chore: bump deps * fix: rolldown-vite 7.1.0 and duckdb bundle issue * chore: back to vite * chore: update electron * chore: update versions * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps --------- Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * feat: add mcp sync and modelscope provider #615 (#723) * wip: add modelscope provider * feat: add mcp sync to modelscope * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * chore: i18n and format * feat: better style * fix: mcp tool display --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> * fix: move_files newPath parse issue (#725) * fix: move_files newPath 参数计算规则 * fix: move_files 移动前需要判断dest是目录还是文件 * feat: add Claude Opus 4.1 to anthropic default model list (#726) * feat: Add mcprouter's MCP marketplace api support (#727) * wip: add mcp market * feat: mcp market install * wip: mcp install status sync * feat: mcp server config mask * chore: remove working doc * chore: add translate * feat: add ESC key to close floating chat window (#728) * feat: add floating button position persistence with boundary validation (#729) * feat: add floating button position persistence with boundary validation * feat: refactor floating button to use electron-window-state * chore: bump to 0.3.0 * feat: add reasoning_effort parameter support for gpt-oss models (#731) * feat: add reasoning_effort parameter support for gpt-oss models - add reasoning effort UI support across all components * fix: preserve user reasoning effort settings and improve display logic * fix: artifacts code not streaming (#732) * fix: artifact react load failed * chore: remove log * fix: artifacts code not stream * fix: format --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com> Co-authored-by: tomsun28 <tomsun28@outlook.com> Co-authored-by: gongchao <chao.gong@aminer.cn> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: wanna <wanna.w@binarywalk.com>
* fix: add AlertDialogDescription to resolve accessibility warning (#706) * fix: resolve focus flicker when creating new windows with Ctrl+Shift+N (#707) * feat: enhance window management by implementing main window ID handling (#709) * docs: update zhipu developer doc website link (#715) Co-authored-by: gongchao <chao.gong@aminer.cn> * refactor: better translate (#716) * chore: en-us i18n * chore(i18n): polish ja-JP translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fr-FR translations; keep chat.input.placeholder unchanged * chore(i18n): refine fr-FR MCP & Settings copy; idiomatic, concise, brand-consistent * chore(i18n): polish ru-RU translations across UI; keep chat.input.placeholder unchanged * chore(i18n): polish fa-IR translations across UI; keep chat.input.placeholder unchanged * chore: fix format * chore: fix i18n * chore: lock rolldown-vite version * feat: add GPT-5 series model support (#717) * ci(vite): Bundle the main file into a single file to speed up loading. (#718) * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps (#721) * chore: bump deps * fix: rolldown-vite 7.1.0 and duckdb bundle issue * chore: back to vite * chore: update electron * chore: update versions * fix(math): parser by upgrade vue-renderer-markdown (#722) * chore: bump deps --------- Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * feat: add mcp sync and modelscope provider #615 (#723) * wip: add modelscope provider * feat: add mcp sync to modelscope * fix: add scrollable support to PopoverContent to prevent overflow (#720) * feat: implement floating chat window system with performance optimization (#724) * chore: i18n and format * feat: better style * fix: mcp tool display --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> * fix: move_files newPath parse issue (#725) * fix: move_files newPath 参数计算规则 * fix: move_files 移动前需要判断dest是目录还是文件 * feat: add Claude Opus 4.1 to anthropic default model list (#726) * feat: Add mcprouter's MCP marketplace api support (#727) * wip: add mcp market * feat: mcp market install * wip: mcp install status sync * feat: mcp server config mask * chore: remove working doc * chore: add translate * feat: add ESC key to close floating chat window (#728) * feat: add floating button position persistence with boundary validation (#729) * feat: add floating button position persistence with boundary validation * feat: refactor floating button to use electron-window-state * chore: bump to 0.3.0 * feat: add reasoning_effort parameter support for gpt-oss models (#731) * feat: add reasoning_effort parameter support for gpt-oss models - add reasoning effort UI support across all components * fix: preserve user reasoning effort settings and improve display logic * fix: artifacts code not streaming (#732) * fix: artifact react load failed * chore: remove log * fix: artifacts code not stream * fix: format * feat: disable automatic model enabling for better UX (#734) * feat: sync provider sorting from settings to model selection (#736) * feat: sync provider sorting from settings to model selection * feat: refactor ModelSelect to use computed providers for better reactivity --------- Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com> Co-authored-by: tomsun28 <tomsun28@outlook.com> Co-authored-by: gongchao <chao.gong@aminer.cn> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: wanna <wanna.w@binarywalk.com>
old:

new:

Summary by CodeRabbit
New Features
Style