🐛 fix(mobile): render topic menus and rename popovers inside active overlay container#12477
Merged
Merged
Conversation
|
@Zhouguanyang is attempting to deploy a commit to the LobeHub OSS Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
Reviewer's GuideMakes mobile topic and thread action dropdown menus controlled and renders their popups into the active drawer portal container to fix interaction issues on mobile while leaving desktop behavior unchanged. Sequence diagram for mobile topic/thread dropdown menu open with drawer portalsequenceDiagram
actor MobileUser
participant Actions
participant useServerConfigStore
participant DOM
participant DropdownMenu
MobileUser->>Actions: tap MoreHorizontalIcon
Actions->>useServerConfigStore: get isMobile
useServerConfigStore-->>Actions: mobile
Actions->>Actions: setOpen(true)
Actions->>Actions: compute portalContainer (useMemo)
Actions->>DOM: querySelectorAll(.ant-drawer-content-wrapper)
DOM-->>Actions: NodeList drawerContainers
Actions->>Actions: select topDrawerContainer
Actions->>DOM: querySelector(.ant-drawer-section)
DOM-->>Actions: portalContainer
Actions->>DropdownMenu: render with
Note over Actions,DropdownMenu: props: items, open, onOpenChange, portalProps{container:portalContainer}
MobileUser->>DropdownMenu: tap menu item
DropdownMenu-->>Actions: onOpenChange(false)
Actions->>Actions: setOpen(false)
Actions->>Actions: recompute portalContainer undefined
Updated class diagram for Actions components controlling mobile dropdown portalclassDiagram
class Actions {
+dropdownMenu DropdownItem[] | function
-mobile boolean
-open boolean
-portalContainer HTMLElement
+render(): JSXElement
}
class useServerConfigStore {
+isMobile boolean
+getState(selector): any
}
class DropdownMenu {
+items DropdownItem[] | function
+open boolean
+portalProps object
+onOpenChange(nextOpen): void
}
class ActionIcon {
+icon IconType
+size string
}
Actions ..> useServerConfigStore : uses
Actions ..> DropdownMenu : renders
Actions ..> ActionIcon : renders
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The
Actionscomponents across agent/group topic and thread lists now duplicate the samemobile/open/portalContainerlogic; consider extracting this into a shared hook or utility (e.g.useDrawerDropdownPortal) to keep behavior consistent and easier to maintain. - Access to
documentinsideuseMemois guarded, but since this is layout code that may shift between SSR and CSR, it may be safer to centralize thedocument-based DOM querying in a browser-only utility/hook to avoid accidental reuse in non-DOM contexts.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `Actions` components across agent/group topic and thread lists now duplicate the same `mobile`/`open`/`portalContainer` logic; consider extracting this into a shared hook or utility (e.g. `useDrawerDropdownPortal`) to keep behavior consistent and easier to maintain.
- Access to `document` inside `useMemo` is guarded, but since this is layout code that may shift between SSR and CSR, it may be safer to centralize the `document`-based DOM querying in a browser-only utility/hook to avoid accidental reuse in non-DOM contexts.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## canary #12477 +/- ##
=========================================
Coverage 74.32% 74.32%
=========================================
Files 1531 1531
Lines 125642 125642
Branches 13874 16515 +2641
=========================================
Hits 93384 93384
Misses 32147 32147
Partials 111 111
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
23d9909 to
2acc548
Compare
Innei
requested changes
Mar 19, 2026
| <DropdownMenu | ||
| items={dropdownMenu} | ||
| open={open} | ||
| portalProps={portalContainer ? { container: portalContainer } : undefined} |
Member
There was a problem hiding this comment.
使用 querySelector 的写法并不是很好，因为它脱离了 React 组件的控制。一旦这个上游组件没有在 layout 完成，或者遇到了 remount 的情况，那么这里的焦点就会丢失，这个元素也会丢失。
所以我建议你这里使用 React 的 Context 进行传递 DrawerContent 的 Element Ref 作为 State。
Contributor
Author
There was a problem hiding this comment.
已修改，顺便把重命名也给修了
2acc548 to
2fd8000
Compare
Contributor
Author
|
@codex review |
|
Codex Review: Didn't find any major issues. More of your lovely PRs please. ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
2fd8000 to
6c7b963
Compare
Contributor
Author
|
@codex review |
|
Codex Review: Didn't find any major issues. Can't wait for the next one! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
Innei
approved these changes
Mar 21, 2026
Member
|
❤️ Great PR @Zhouguanyang ❤️ 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. |
timoshinoleg-eng
pushed a commit
to timoshinoleg-eng/lobe-chat-fork
that referenced
this pull request
Mar 21, 2026
Merged
ONLY-yours
added a commit
that referenced
this pull request
Mar 27, 2026
# 🚀 release: 20260326 This release includes **91 commits**. Key updates are below. - **Agent can now execute background tasks** — Agents can perform long-running operations without blocking your conversation. [#13289](#13289) - **Better error messages** — Redesigned error UI across chat and image generation with clearer explanations and recovery options. [#13302](#13302) - **Smoother topic switching** — No more full page reloads when switching topics while an agent is responding. [#13309](#13309) - **Faster image uploads** — Large images are now automatically compressed to 1920px before upload, reducing wait times. [#13224](#13224) - **Improved knowledge base** — Documents are now properly parsed before chunking, improving retrieval accuracy. [#13221](#13221) ### Bot Platform - **WeChat Bot support** — You can now connect LobeChat to WeChat, in addition to Discord. [#13191](#13191) - **Richer bot responses** — Bots now support custom markdown rendering and context injection. [#13294](#13294) - **New bot commands** — Added `/new` to start fresh conversations and `/stop` to halt generation. [#13194](#13194) - **Discord stability fixes** — Fixed thread creation issues and Redis connection drops. [#13228](#13228) [#13205](#13205) ### Models & Providers - **GLM-5** is now available in the LobeHub model list. [#13189](#13189) - **Coding Plan providers** — Added support for code planning assistant providers. [#13203](#13203) - **Tencent Hunyuan 3.0 ImageGen** — New image generation model from Tencent. [#13166](#13166) - **Gemini content handling** — Better handling when Gemini blocks content due to safety filters. [#13270](#13270) - **Claude token limits fixed** — Corrected max window tokens for Anthropic Claude models. [#13206](#13206) ### Skills & Tools - **Auto credential injection** — Skills can now automatically request and use required credentials. [#13124](#13124) - **Smarter tool permissions** — Built-in tools skip confirmation for safe paths like `/tmp`. [#13232](#13232) - **Model switcher improvements** — Quick access to provider settings and visual highlight for default model. [#13220](#13220) ### Memory - **Bulk delete memories** — You can now delete all memory entries at once. [#13161](#13161) - **Per-agent memory control** — Memory injection now respects individual agent settings. [#13265](#13265) ### Desktop App - **Gateway connection** — Desktop app can now connect to LobeHub Gateway for enhanced features. [#13234](#13234) - **Connection status indicator** — See gateway connection status in the titlebar. [#13260](#13260) - **Settings persistence** — Gateway toggle state now persists across app restarts. [#13300](#13300) ### CLI - **API key authentication** — CLI now supports API key auth for programmatic access. [#13190](#13190) - **Shell completion** — Tab completion for bash/zsh/fish shells. [#13164](#13164) - **Man pages** — Built-in manual pages for CLI commands. [#13200](#13200) ### Security - **XSS protection** — Sanitized search result image titles to prevent script injection. [#13303](#13303) - **Workflow hardening** — Fixed potential shell injection in release automation. [#13319](#13319) - **Dependency update** — Updated nodemailer to address security advisory. [#13326](#13326) ### Bug Fixes - Fixed skill page not redirecting correctly after import. [#13255](#13255) [#13261](#13261) - Fixed token counting in group chats. [#13247](#13247) - Fixed editor not resetting when switching to empty pages. [#13229](#13229) - Fixed manual tool toggle not working. [#13218](#13218) - Fixed Search1API response parsing. [#13207](#13207) [#13208](#13208) - Fixed mobile topic menus rendering issues. [#12477](#12477) - Fixed history count calculation for accurate context. [#13051](#13051) - Added missing Turkish translations. [#13196](#13196) ### Credits Huge thanks to these contributors: @bakiburakogun @hardy-one @Zhouguanyang @sxjeru @hezhijie0327 @arvinxx @cy948 @CanisMinor @Innei @lijian @lobehubbot @neko @rdmclin2 @rivertwilight @tjx666
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💻 Change Type
🔗 Related Issue
🔀 Description of Change
This PR fixes mobile web topic action menus and rename popovers that could render outside the active overlay and become unreliable to interact with.
SideBarDrawerandTopicModal🧪 How to Test
···on both a topic item and a thread itemRenamefor both a topic item and a thread item📸 Screenshots / Videos
📝 Additional Information