Conversation
…ith virtual scrolling - Replace Popover with DropdownMenu atom components from @lobehub/ui - Add react-virtuoso for proper virtual scrolling implementation - Auto-close submenu when scrolling to prevent position offset issues - Rename misleading "Virtual*" naming to "List*" for clarity LOBE-3844
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideRefactors ModelSwitchPanel to use @lobehub/ui DropdownMenu components with react-virtuoso-based virtual scrolling, adds scroll-aware submenu behavior, and cleans up "Virtual*" naming to more accurately reflect list semantics. Class diagram for updated ModelSwitchPanel list structure and typesclassDiagram
class ModelSwitchPanel {
+children ReactNode
+placement DropdownPlacement
+model string
+provider string
+onModelChange(params)
+onOpenChange(open)
}
class DropdownMenuRoot {
+open boolean
+onOpenChange(open)
}
class DropdownMenuTrigger {
+nativeButton boolean
+openOnHover boolean
}
class DropdownMenuPortal
class DropdownMenuPositioner {
+hoverTrigger boolean
+placement DropdownMenuPlacement
}
class DropdownMenuPopup
class PanelContent {
+model string
+provider string
+onModelChange(params)
+onOpenChange(open)
}
class List {
+groupMode GroupMode
+model string
+provider string
+onModelChange(params)
+onOpenChange(open)
-enabledList EnabledProviderWithModels[]
-listItems ListItem[]
-isScrolling boolean
-panelHeight number
+handleModelChange(params)
+handleClose()
}
class Virtuoso {
+totalCount number
+itemContent(index)
+overscan number
+isScrolling(scrolling)
}
class ListItemRenderer {
+activeKey string
+isScrolling boolean
+item ListItem
+newLabel string
+onModelChange(modelId, providerId)
+onClose()
}
class MultipleProvidersModelItem {
+activeKey string
+data ModelWithProviders
+isScrolling boolean
+newLabel string
+onModelChange(modelId, providerId)
+onClose()
-submenuOpen boolean
}
class SingleProviderModelItem {
+activeKey string
+data ModelWithProviders
+newLabel string
+onModelChange(modelId, providerId)
+onClose()
}
class DropdownMenuSubmenuRoot {
+open boolean
+onOpenChange(open)
}
class DropdownMenuSubmenuTrigger
class DropdownMenuGroup
class DropdownMenuGroupLabel
class DropdownMenuItem {
+onClick()
}
class DropdownMenuItemIcon
class DropdownMenuItemLabel
class DropdownMenuItemExtra
class useBuildListItems {
+useBuildListItems(enabledList, groupMode, searchKeyword) ListItem[]
}
class ModelWithProviders {
+model AiModelForSelect
+providers ProviderInfo[]
}
class ProviderInfo {
+id string
+logo string
+name string
+source string
}
class ListItem {
}
class ListItemModelItemSingle {
+type string
+data ModelWithProviders
}
class ListItemModelItemMultiple {
+type string
+data ModelWithProviders
}
class ListItemGroupTitle {
+type string
+title string
}
class ListItemDivider {
+type string
}
class ListItemNoProvider {
+type string
}
class utils {
+menuKey(provider, model) string
+getListItemKey(item) string
}
ModelSwitchPanel --> DropdownMenuRoot
DropdownMenuRoot --> DropdownMenuTrigger
DropdownMenuRoot --> DropdownMenuPortal
DropdownMenuPortal --> DropdownMenuPositioner
DropdownMenuPositioner --> DropdownMenuPopup
DropdownMenuPopup --> PanelContent
PanelContent --> List
List --> Virtuoso
List --> useBuildListItems
useBuildListItems --> ListItem
Virtuoso --> ListItemRenderer
ListItemRenderer --> MultipleProvidersModelItem
ListItemRenderer --> SingleProviderModelItem
MultipleProvidersModelItem --> DropdownMenuSubmenuRoot
DropdownMenuSubmenuRoot --> DropdownMenuSubmenuTrigger
MultipleProvidersModelItem --> DropdownMenuPortal
MultipleProvidersModelItem --> DropdownMenuPositioner
MultipleProvidersModelItem --> DropdownMenuPopup
DropdownMenuPopup --> DropdownMenuGroup
DropdownMenuGroup --> DropdownMenuGroupLabel
DropdownMenuGroup --> DropdownMenuItem
DropdownMenuItem --> DropdownMenuItemIcon
DropdownMenuItem --> DropdownMenuItemLabel
DropdownMenuItem --> DropdownMenuItemExtra
ListItem <|-- ListItemModelItemSingle
ListItem <|-- ListItemModelItemMultiple
ListItem <|-- ListItemGroupTitle
ListItem <|-- ListItemDivider
ListItem <|-- ListItemNoProvider
MultipleProvidersModelItem --> ModelWithProviders
SingleProviderModelItem --> ModelWithProviders
ModelWithProviders --> ProviderInfo
List --> utils
ListItemRenderer --> utils
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
TestGru AssignmentSummary
Tip You can |
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- In
List, theVirtuosousage wiresisScrolling={handleScrollingStateChange}, butisScrollingis a boolean in the render context rather than a callback prop—consider switching to the appropriate scroll state callback (e.g.,scrollStateChangeor similar) from the Virtuoso API and passing that boolean down toListItemRendererinstead.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `List`, the `Virtuoso` usage wires `isScrolling={handleScrollingStateChange}`, but `isScrolling` is a boolean in the render context rather than a callback prop—consider switching to the appropriate scroll state callback (e.g., `scrollStateChange` or similar) from the Virtuoso API and passing that boolean down to `ListItemRenderer` instead.
## Individual Comments
### Comment 1
<location> `src/features/ModelSwitchPanel/index.tsx:38-47` </location>
<code_context>
- >
- {children}
- </Popover>
+ <DropdownMenuRoot onOpenChange={handleOpenChange} open={isOpen}>
+ <DropdownMenuTrigger nativeButton={false} openOnHover>
+ {children}
+ </DropdownMenuTrigger>
+ <DropdownMenuPortal>
+ <DropdownMenuPositioner hoverTrigger placement={placement}>
+ <DropdownMenuPopup className={styles.container}>
+ <PanelContent
+ model={modelProp}
+ onModelChange={onModelChange}
+ onOpenChange={handleOpenChange}
+ provider={providerProp}
+ />
+ </DropdownMenuPopup>
+ </DropdownMenuPositioner>
+ </DropdownMenuPortal>
+ </DropdownMenuRoot>
);
},
</code_context>
<issue_to_address>
**question (bug_risk):** Switching from click-based Popover to hover-based DropdownMenu may change UX expectations.
This shifts the interaction from a likely click/controlled Popover to a hover-triggered dropdown, which alters how the panel opens/closes and may impact keyboard accessibility, focus behavior, and accidental hover opens. Please confirm this hover-based behavior is intentional and consistent with the rest of the app; otherwise consider disabling `openOnHover` or using a click-driven pattern instead.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3db188d683
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <Virtuoso | ||
| isScrolling={handleScrollingStateChange} | ||
| itemContent={itemContent} | ||
| overscan={200} | ||
| style={{ height: listHeight }} | ||
| totalCount={listItems.length} |
There was a problem hiding this comment.
Provide stable item keys to avoid state leakage
The new Virtuoso usage keys rows by index because neither data nor computeItemKey is provided. When listItems changes order/length (e.g., search keyword or group mode changes), React will reuse row components by index, so stateful rows like MultipleProvidersModelItem (which tracks submenuOpen) can carry their open state to a different model after filtering or regrouping. This can surface as the wrong submenu opening automatically or stale visual state. Consider supplying data={listItems} and computeItemKey (e.g., using getListItemKey) so row identity follows the model/provider, not the index.
Useful? React with 👍 / 👎.
Signed-off-by: Innei <tukon479@gmail.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## next #11663 +/- ##
==========================================
+ Coverage 73.04% 74.55% +1.51%
==========================================
Files 1155 1187 +32
Lines 86727 93729 +7002
Branches 9493 10378 +885
==========================================
+ Hits 63348 69880 +6532
- Misses 23289 23759 +470
Partials 90 90
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
❤️ Great PR @Innei ❤️ The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world. |
## [Version 2.0.0-next.325](v2.0.0-next.324...v2.0.0-next.325) <sup>Released on **2026-01-20**</sup> #### ♻ Code Refactoring - **ModelSwitchPanel**: Migrate from Popover to DropdownMenu with virtual scrolling. #### 🐛 Bug Fixes - **sidebar-drawer**: Fix drawer positioning and title style. <br/> <details> <summary><kbd>Improvements and Fixes</kbd></summary> #### Code refactoring * **ModelSwitchPanel**: Migrate from Popover to DropdownMenu with virtual scrolling, closes [#11663](#11663) ([c9d9dff](c9d9dff)) #### What's fixed * **sidebar-drawer**: Fix drawer positioning and title style, closes [#11655](#11655) ([cf5320e](cf5320e)) </details> <div align="right"> [](#readme-top) </div>
|
🎉 This PR is included in version 2.0.0-next.325 🎉 The release is available on: Your semantic-release bot 📦🚀 |
## [Version 1.153.0](v1.152.0...v1.153.0) <sup>Released on **2026-01-23**</sup> #### ♻ Code Refactoring - **auth**: Remove NEXT_PUBLIC_AUTH_URL env variable. - **model-select**: Migrate FunctionCallingModelSelect to LobeSelect. - **ModelSwitchPanel**: Migrate from Popover to DropdownMenu with virtual scrolling. - **userMemories**: Removed un-used code. - **misc**: Improve memory data with experience and identity, move vercel-react-best-practices skills to .agents directory. #### ✨ Features - **database**: Added user memory activity. - **desktop**: Add legacy local database detection and migration guidance. - **misc**: Add platform-aware download client menu option, add server version check for desktop app, remove Clerk authentication code, skill setting page and skill store, support agent group unpublish agents, support client tasks mode, update the sandbox preinstall libs in sys role. #### 🐛 Bug Fixes - **copilot**: Pass correct scope when creating new session in PageEditor. - **desktop**: Gracefully handle missing update manifest 404 errors. - **model-runtime**: Filter unsupported image types (SVG) before sending to vision models. - **pdf**: Upgrade pdfjs-dist and react-pdf to v5.x. - **sidebar-drawer**: Fix drawer positioning and title style. - **misc**: Fix group broadcast trigger tool use, fix local system tools, fix memory schema, fix multi agent tasks issue, fix multi tasks no summary issue, fix scope issue, fix tool argument scape and improve multi task run, fixed the sandbox tools call when error should use right callback, improve e2e server and complete i18n resources, slove the agent group editor not focus in editdata area, slove the agents header switch agents the lobeAI not show problem, sloved the old removeSessionTopics not work, TypewriterEffect not refreshing on language change, updata cron job ui & fixed commnuity pagenation goto error, update the agentbuilder tools not always use humanIntervention. #### 💄 Styles - **misc**: Improve auto scroll and group profile, update og, update share style. <br/> <details> <summary><kbd>Improvements and Fixes</kbd></summary> #### Code refactoring * **auth**: Remove NEXT_PUBLIC_AUTH_URL env variable, closes [lobehub#11658](https://github.com/jaworldwideorg/OneJA-Bot/issues/11658) ([c0f9875](c0f9875)) * **model-select**: Migrate FunctionCallingModelSelect to LobeSelect, closes [lobehub#11664](https://github.com/jaworldwideorg/OneJA-Bot/issues/11664) ([ad51305](ad51305)) * **ModelSwitchPanel**: Migrate from Popover to DropdownMenu with virtual scrolling, closes [lobehub#11663](https://github.com/jaworldwideorg/OneJA-Bot/issues/11663) ([c9d9dff](c9d9dff)) * **userMemories**: Removed un-used code, closes [lobehub#11713](https://github.com/jaworldwideorg/OneJA-Bot/issues/11713) ([89750fc](89750fc)) * **misc**: Improve memory data with experience and identity, closes [lobehub#11717](https://github.com/jaworldwideorg/OneJA-Bot/issues/11717) ([bdb3eb4](bdb3eb4)) * **misc**: Move vercel-react-best-practices skills to .agents directory, closes [lobehub#11703](https://github.com/jaworldwideorg/OneJA-Bot/issues/11703) ([6df7731](6df7731)) #### What's improved * **database**: Added user memory activity, closes [lobehub#11680](https://github.com/jaworldwideorg/OneJA-Bot/issues/11680) ([0160fbd](0160fbd)) * **desktop**: Add legacy local database detection and migration guidance, closes [lobehub#11682](https://github.com/jaworldwideorg/OneJA-Bot/issues/11682) ([5664b84](5664b84)) * **misc**: Add platform-aware download client menu option, closes [lobehub#11676](https://github.com/jaworldwideorg/OneJA-Bot/issues/11676) ([55abddc](55abddc)) * **misc**: Add server version check for desktop app, closes [lobehub#11710](https://github.com/jaworldwideorg/OneJA-Bot/issues/11710) ([0cf2723](0cf2723)) * **misc**: Remove Clerk authentication code, closes [lobehub#11711](https://github.com/jaworldwideorg/OneJA-Bot/issues/11711) ([395595a](395595a)) * **misc**: Skill setting page and skill store, closes [lobehub#11665](https://github.com/jaworldwideorg/OneJA-Bot/issues/11665) ([d8c0c26](d8c0c26)) * **misc**: Support agent group unpublish agents, closes [lobehub#11687](https://github.com/jaworldwideorg/OneJA-Bot/issues/11687) ([4e060be](4e060be)) * **misc**: Support client tasks mode, closes [lobehub#11666](https://github.com/jaworldwideorg/OneJA-Bot/issues/11666) ([98cf57b](98cf57b)) * **misc**: Update the sandbox preinstall libs in sys role, closes [lobehub#11688](https://github.com/jaworldwideorg/OneJA-Bot/issues/11688) ([404c577](404c577)) #### What's fixed * **copilot**: Pass correct scope when creating new session in PageEditor, closes [lobehub#11714](https://github.com/jaworldwideorg/OneJA-Bot/issues/11714) ([0259270](0259270)) * **desktop**: Gracefully handle missing update manifest 404 errors, closes [lobehub#11625](https://github.com/jaworldwideorg/OneJA-Bot/issues/11625) ([13e95b9](13e95b9)) * **model-runtime**: Filter unsupported image types (SVG) before sending to vision models, closes [lobehub#11698](https://github.com/jaworldwideorg/OneJA-Bot/issues/11698) ([c0c99a7](c0c99a7)) * **pdf**: Upgrade pdfjs-dist and react-pdf to v5.x, closes [lobehub#11686](https://github.com/jaworldwideorg/OneJA-Bot/issues/11686) ([2b620df](2b620df)) * **sidebar-drawer**: Fix drawer positioning and title style, closes [lobehub#11655](https://github.com/jaworldwideorg/OneJA-Bot/issues/11655) ([cf5320e](cf5320e)) * **misc**: Fix group broadcast trigger tool use, closes [lobehub#11646](https://github.com/jaworldwideorg/OneJA-Bot/issues/11646) ([831a9b3](831a9b3)) * **misc**: Fix local system tools, closes [lobehub#11702](https://github.com/jaworldwideorg/OneJA-Bot/issues/11702) ([6548fc7](6548fc7)) * **misc**: Fix memory schema, closes [lobehub#11645](https://github.com/jaworldwideorg/OneJA-Bot/issues/11645) ([3baf780](3baf780)) * **misc**: Fix multi agent tasks issue, closes [lobehub#11672](https://github.com/jaworldwideorg/OneJA-Bot/issues/11672) ([9de773b](9de773b)) * **misc**: Fix multi tasks no summary issue, closes [lobehub#11685](https://github.com/jaworldwideorg/OneJA-Bot/issues/11685) ([26ce317](26ce317)) * **misc**: Fix scope issue, closes [lobehub#11719](https://github.com/jaworldwideorg/OneJA-Bot/issues/11719) ([17adde8](17adde8)) * **misc**: Fix tool argument scape and improve multi task run, closes [lobehub#11691](https://github.com/jaworldwideorg/OneJA-Bot/issues/11691) ([b13bb8a](b13bb8a)) * **misc**: Fixed the sandbox tools call when error should use right callback, closes [lobehub#11721](https://github.com/jaworldwideorg/OneJA-Bot/issues/11721) ([e8fce68](e8fce68)) * **misc**: Improve e2e server and complete i18n resources, closes [lobehub#11678](https://github.com/jaworldwideorg/OneJA-Bot/issues/11678) ([d450dd9](d450dd9)) * **misc**: Slove the agent group editor not focus in editdata area, closes [lobehub#11677](https://github.com/jaworldwideorg/OneJA-Bot/issues/11677) ([9ac84e6](9ac84e6)) * **misc**: Slove the agents header switch agents the lobeAI not show problem, closes [lobehub#11726](https://github.com/jaworldwideorg/OneJA-Bot/issues/11726) ([f45f508](f45f508)) * **misc**: Sloved the old removeSessionTopics not work, closes [lobehub#11671](https://github.com/jaworldwideorg/OneJA-Bot/issues/11671) ([06d41e5](06d41e5)) * **misc**: TypewriterEffect not refreshing on language change, closes [lobehub#11657](https://github.com/jaworldwideorg/OneJA-Bot/issues/11657) ([ba30f46](ba30f46)) * **misc**: Updata cron job ui & fixed commnuity pagenation goto error, closes [lobehub#11700](https://github.com/jaworldwideorg/OneJA-Bot/issues/11700) ([42ad2a0](42ad2a0)) * **misc**: Update the agentbuilder tools not always use humanIntervention, closes [lobehub#11696](https://github.com/jaworldwideorg/OneJA-Bot/issues/11696) ([0d3017b](0d3017b)) #### Styles * **misc**: Improve auto scroll and group profile, closes [lobehub#11725](https://github.com/jaworldwideorg/OneJA-Bot/issues/11725) ([550acc2](550acc2)) * **misc**: Update og, closes [lobehub#11709](https://github.com/jaworldwideorg/OneJA-Bot/issues/11709) ([01cf4e4](01cf4e4)) * **misc**: Update share style, closes [lobehub#11716](https://github.com/jaworldwideorg/OneJA-Bot/issues/11716) ([3c70dfa](3c70dfa)) </details> <div align="right"> [](#readme-top) </div>
💻 Change Type
🔗 Related Issue
Resolves LOBE-3844
🔀 Description of Change
This PR refactors the
ModelSwitchPanelcomponent to useDropdownMenuatom components from@lobehub/uiinstead ofPopover, and implements proper virtual scrolling withreact-virtuoso.Key Changes:
PopoverwithDropdownMenuRoot,DropdownMenuTrigger,DropdownMenuPortal,DropdownMenuPositioner,DropdownMenuPopupatom componentsreact-virtuosofor the model listFiles Changed:
index.tsx- Main component using DropdownMenu atomscomponents/List/index.tsx- Virtuoso integration with scroll state trackingcomponents/List/ListItemRenderer.tsx- Renamed from VirtualItemRenderercomponents/List/MultipleProvidersModelItem.tsx- Controlled submenu with scroll-closehooks/useBuildListItems.ts- Renamed from useBuildVirtualItemstypes.ts-ListItemtype (renamed from VirtualItem)utils.ts-getListItemKeyfunction (renamed)styles.ts- AddedmenuItemActivestyle🧪 How to Test
📝 Additional Information
This refactor maintains the same visual layout and functionality while improving:
Summary by Sourcery
Refactor the ModelSwitchPanel to use DropdownMenu-based menus with virtualized scrolling and improved multi-provider handling.
Enhancements:
Tests: