✨ feat(chat): 对话的时候，在工具栏直接显示当前模型的名称 #5516
Conversation
|
@frostime is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes involve the addition of a new JSX structure within the Changes
Possibly related PRs
Suggested reviewers
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
app/components/chat.tsx (1)
783-795: New UI element added to display current model name.A new div has been added to the end of the ChatActions component to display the current model name. This enhancement improves user awareness of the active model during conversations.
Some observations and suggestions:
- The styling is done inline, which might be better moved to a separate CSS file or styled-component for better maintainability.
- The opacity of 0.8 for the model name text makes it slightly less prominent, which is a good design choice to not distract from the main content.
- The font size of 0.7rem might be too small for some users. Consider making this configurable or slightly larger.
- The placement at the end ensures it doesn't interfere with other UI elements, but it might be worth considering if this is the optimal position for user visibility.
Consider extracting the inline styles to a separate CSS class or styled-component for better maintainability. For example:
- <div - style={{ - display: "flex", - alignItems: "top", - flex: 1, - fontSize: "0.7rem", - }} - > - <div style={{ flex: 1 }}></div> - <span style={{ opacity: 0.8 }}>{currentModelName}</span> - </div> + <div className={styles["model-name-container"]}> + <div className={styles["model-name-spacer"]}></div> + <span className={styles["model-name"]}>{currentModelName}</span> + </div>Then define these styles in your CSS module:
.model-name-container { display: flex; align-items: top; flex: 1; font-size: 0.7rem; } .model-name-spacer { flex: 1; } .model-name { opacity: 0.8; }This approach would make the styles easier to maintain and modify in the future.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/components/chat.tsx (1 hunks)
Additional comments not posted (1)
app/components/chat.tsx (1)
Line range hint
1-795: Overall assessment of changesThe changes made to this file are minimal and focused. The addition of the current model name display in the ChatActions component is a valuable feature that enhances user awareness without disrupting the existing functionality.
Key points:
- The change is isolated and doesn't affect other parts of the component.
- It aligns well with the PR objectives of displaying the current model name in the chat interface.
- The implementation is straightforward and doesn't introduce any apparent issues.
While the feature addition is good, there's room for minor improvements in code style and maintainability, as suggested in the previous comment.
|
需要测一下，移动端的样式 |
Need to test the style of mobile terminal |
|
Your build has completed! |
|
我平时没怎么用过移动端的 app，请问移动端 debug 需要用哪个命令？（平时基本只碰过 yarn run dev 和 app:build 😂）
发件人： Lloyd Zhou
发送时间： 2024-09-24 15:56
收件人： ChatGPTNextWeb/ChatGPT-Next-Web
抄送： Frostime; Mention
主题： Re: [ChatGPTNextWeb/ChatGPT-Next-Web] ✨ feat(chat): 对话的时候，在工具栏直接显示当前模型的名称 (PR #5516)
需要测一下，移动端的样式
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
打开浏览器的那个开发者工具，然后你把它显显示到 H5模式就可以了 |
Open the developer tools of the browser, and then you can display it in H5 mode. |
您好，我又调整了一下样式，感觉目前这个效果应该是可以接受的了。
|
Hello, I have adjusted the style again, and I feel that the current effect should be acceptable.
|
|
觉得更合适的做法是。嗯，选择了模型，在选择模型的那个按钮自动展开的，而不关闭 |
I think it's more appropriate. Well, after selecting the model, the button for selecting the model is automatically expanded instead of closed. |
|
|
包
你指的是这个按钮一直开启，总是显示名称？
|
Bag
Do you mean that the button is always on and the name is always displayed?
|
|
yes |
我发这个 PR 缘由是感觉每次悬浮到按钮上看模型，还要等一个一秒钟（有过渡动画），觉得有点啰嗦。 从功能上将，确实可以直接用悬浮按钮查看来替代，就是要多一步操作，所谓的「心智负担」大一点。 当然这个是个人感受，可能 PR 的内容也更多是处于个人的偏好。看作者们怎么想吧，要是感觉没有必要我撤掉也行。（这个代码其实我很久前就写了，这次发 PR 主要是烦每次改了这部分代码后，自动 sync 就会 failed，需要手动 merge 😂） |
The reason why I posted this PR is that every time I hover over the button to look at the model, I have to wait for one second (there is a transition animation), which is a bit verbose. In terms of function, it can indeed be replaced by directly using the floating button to view, but it requires one more step of operation and the so-called "mental burden" is greater. Of course, this is a personal feeling, and the content of PR may be more of a personal preference. It depends on what the authors think, if I feel it is unnecessary I can remove it. (I actually wrote this code a long time ago. The main reason for issuing PR this time is that every time I change this part of the code, the automatic sync will fail and manual merge is required 😂) |
这个看 @lloydzhou 怎么决策吧。如果他倾向于你说的那个方案，那我这个 PR withdraw 掉也行。🤞 |
It depends on how @lloydzhou decides. If he prefers the plan you mentioned, then I can withdraw the PR. 🤞 |
|
|
fine, I'll close it. |
fine, I'll close it. |
我有个自用版本就是在 PC 端默认展开不关闭的，省得提问完发现不是自己想要问的模型 |
I have a version for my own use that is expanded and not closed by default on the PC side, so as not to find out after asking questions that it is not the model I wanted to ask about. |
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
在 Chat.tsx 组件的对话工具栏的最右侧，添加了一个标注文本，显示当前所使用的模型的名称。
📝 补充信息 | Additional Information
由于要放在最后面，所以后续如果要添加更多按钮，需要放在这个元素的上方。这一点在注释中已经说明了。
Summary by CodeRabbit