Feat: 修复配置弹窗层级问题，增加深度思考和联网 #274
Conversation
将用户信息展示和操作功能从 ChatSidebar 组件移动到 ChatAIPanels 组件 移除 ChatSidebar 中未使用的导入和状态 调整 ModelConfigModal 的样式和 z-index 设置
在聊天输入框下方添加网页搜索和深度思考的切换按钮，允许用户启用或禁用这些功能
允许通过 children 属性自定义 ModelConfigModal 的触发器内容，提升组件灵活性
✅ Deploy Preview for ornate-blancmange-89db6b ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @Hemomoo, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求主要解决了配置弹窗的层级显示问题，并为 AI 聊天功能引入了新的能力。它将“深度思考”和“网页搜索”的切换按钮直接集成到聊天界面中，显著增强了 AI 的功能。此外，还重新调整了用户账户菜单的位置，以提高可访问性，并简化了用户访问模型配置的方式。 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次 PR 主要有两个目的：修复配置弹窗的层级问题，以及增加了“深度思考”和“联网搜索”两个新功能。同时，代码还将用户菜单从侧边栏移动到了主聊天面板的头部，这是一个不错的 UI/UX 优化。
整体代码质量不错，新功能的实现看起来是正确的。我主要提出了两点改进建议：
- 在
ChatAIPanels.tsx中，被移动过来的用户菜单组件代码可以进一步优化，以更好地适应其在头部的新位置。 - 在
ModelConfigModal.tsx中，修复 z-index 问题时使用了!important，这可能不是最佳实践，我提供了一个替代建议。
请查看具体的评论以获取更多细节。
| <div className="border-t border-gray-100 bg-gray-50/50"> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <button className="w-full flex items-center gap-3 p-2 rounded-xl border border-transparent hover:border-blue-100 hover:bg-white hover:shadow-sm transition-all duration-200 text-left group"> | ||
| <Avatar className="h-9 w-9 ring-2 ring-white shadow-sm group-hover:ring-blue-50 transition-all"> | ||
| <AvatarImage src={user.avatar_url || ''} /> | ||
| <AvatarFallback className="bg-blue-500 text-white"> | ||
| {user.name?.charAt(0) || 'U'} | ||
| </AvatarFallback> | ||
| </Avatar> | ||
| </button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end" className="w-56 mb-2"> | ||
| <DropdownMenuLabel>我的账户</DropdownMenuLabel> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem | ||
| className="cursor-pointer" | ||
| onClick={() => router.push('/dashboard/user')} | ||
| > | ||
| <UserIcon className="mr-2 h-4 w-4" /> | ||
| <span>个人中心</span> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem | ||
| className="cursor-pointer" | ||
| onClick={() => router.push('/dashboard/settings')} | ||
| > | ||
| <Settings className="mr-2 h-4 w-4" /> | ||
| <span>账户设置</span> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem | ||
| className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50" | ||
| disabled={logoutMutation.isPending} | ||
| onClick={() => logoutMutation.mutate()} | ||
| > | ||
| <LogOut className="mr-2 h-4 w-4" /> | ||
| <span>退出登录</span> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> |
There was a problem hiding this comment.
这部分用户菜单的实现似乎是从 ChatSidebar 组件中直接复制而来，但没有完全适应其在 ChatAIPanels 头部的新上下文。存在一些可以改进的地方：
- 多余的包裹
div：包裹DropdownMenu的div带有border-t样式，这会在头部区域的用户头像上方添加一条顶部分割线，这在视觉上可能不是预期的效果。可以直接移除这个div。 - 不正确的按钮样式：触发按钮
button的className中包含了w-full和text-left，这对于一个只包含头像的按钮来说是不必要的，并且可能导致布局问题。gap-3也是多余的。
建议简化这部分代码，使其更适合作为头部的一个独立元素。
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="p-1 rounded-full transition-all duration-200 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
<Avatar className="h-8 w-8 ring-2 ring-white shadow-sm group-hover:ring-blue-50 transition-all">
<AvatarImage src={user.avatar_url || ''} />
<AvatarFallback className="bg-blue-500 text-white">
{user.name?.charAt(0) || 'U'}
</AvatarFallback>
</Avatar>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56 mb-2">
<DropdownMenuLabel>我的账户</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
className="cursor-pointer"
onClick={() => router.push('/dashboard/user')}
>
<UserIcon className="mr-2 h-4 w-4" />
<span>个人中心</span>
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
onClick={() => router.push('/dashboard/settings')}
>
<Settings className="mr-2 h-4 w-4" />
<span>账户设置</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50"
disabled={logoutMutation.isPending}
onClick={() => logoutMutation.mutate()}
>
<LogOut className="mr-2 h-4 w-4" />
<span>退出登录</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
| )} | ||
| </DialogTrigger> | ||
| <DialogContent className="sm:max-w-[700px] max-h-[90vh] p-0 overflow-hidden flex flex-col rounded-xl border-none shadow-2xl"> | ||
| <DialogContent className="sm:max-w-[700px] max-h-[90vh] p-0 overflow-hidden flex flex-col rounded-xl border-none shadow-2xl !z-[99999]"> |
There was a problem hiding this comment.
使用 !z-[99999] 强制设置 z-index 虽然可以解决层级问题，但它是一个“魔法数字”并且使用了 !important 修饰符，这可能会让未来的样式调试和维护变得更加困难。如果项目中定义了 z-index 的层级规范（例如在 tailwind.config.js 中），建议使用预设的变量（如 z-modal）。如果没有，可以考虑移除 !，因为 DialogContent 已经通过 Portal 渲染，通常不需要 !important 就能覆盖其他元素。
| <DialogContent className="sm:max-w-[700px] max-h-[90vh] p-0 overflow-hidden flex flex-col rounded-xl border-none shadow-2xl !z-[99999]"> | |
| <DialogContent className="sm:max-w-[700px] max-h-[90vh] p-0 overflow-hidden flex flex-col rounded-xl border-none shadow-2xl z-[99999]"> |
2 participants
PR 描述
PR 类型
Issue 关联
Closes #
其他信息