💄 style: Update token tag popover style #2631
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thank you for raising your pull request and contributing to our Community |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2631 +/- ##
=======================================
Coverage 93.74% 93.74%
=======================================
Files 352 352
Lines 20400 20400
Branches 2430 2430
=======================================
Hits 19123 19123
Misses 1277 1277 ☔ View full report in Codecov by Sentry. |
空状态展示有问题 |
修了 |
修了 |
WalkthroughThe changes revolve around enhancing token progress visualization in the chat input action bar. A new Changes
Tip New Features and ImprovementsReview SettingsIntroduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments. AST-based InstructionsCodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation. Community-driven AST-based RulesWe are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information. New Static Analysis ToolsWe are continually expanding our support for static analysis tools. We have added support for Tone SettingsUsers can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:
Revamped Settings PageWe have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to Miscellaneous
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 as PR comments)
Additionally, you can add CodeRabbit Configration 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: 3
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/features/ChatInput/ActionBar/Token/TokenProgress.tsx (1 hunks)
- src/features/ChatInput/ActionBar/Token/TokenTag.tsx (4 hunks)
Additional comments not posted (5)
src/features/ChatInput/ActionBar/Token/TokenProgress.tsx (3)
7-12: LGTM! TheTokenProgressIteminterface is well-defined.
22-78: Review theTokenProgresscomponent for best practices and performance.
- The use of
memofor performance optimization is appropriate.- The use of
reducefor calculating the total is efficient.- Ensure that the
dataprop is properly memoized in the parent component to avoid unnecessary re-renders.
80-80: The export ofTokenProgressis correctly implemented.src/features/ChatInput/ActionBar/Token/TokenTag.tsx (2)
18-18: Correctly importedTokenProgressfor use within this component.
Line range hint
61-122: Review thePopovercomponent implementation for best practices and potential improvements.
- The use of
Popoverinstead ofTooltipaligns with the PR's objective to enhance the token tag popover style.- The dynamic generation of
TokenProgressdata is well-implemented.- Consider adding accessibility attributes to improve UX for all users.
| interface TokenProgressProps { | ||
| data: TokenProgressItem[]; | ||
| showIcon?: boolean; | ||
| showTotal?: string; | ||
| } |
There was a problem hiding this comment.
Consider changing the type of showTotal from string to boolean.
- showTotal?: string;
+ showTotal?: boolean;This change aligns with the typical usage of a boolean flag to control visibility, rather than using a string.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| interface TokenProgressProps { | |
| data: TokenProgressItem[]; | |
| showIcon?: boolean; | |
| showTotal?: string; | |
| } | |
| interface TokenProgressProps { | |
| data: TokenProgressItem[]; | |
| showIcon?: boolean; | |
| showTotal?: boolean; | |
| } |
| showTotal?: string; | ||
| } | ||
|
|
||
| const format = (number: number) => numeral(number).format('0,0'); |
There was a problem hiding this comment.
Tip
Codebase Verification
The format function in TokenProgress.tsx uses the numeral library to format numbers. However, there is no explicit handling of edge cases such as very large numbers or negative values in the provided code.
-
The
formatfunction is defined as:const format = (number: number) => numeral(number).format('0,0');
-
It is used in the following contexts:
<div style={{ fontWeight: 500 }}>{format(item.value)}</div> <div style={{ fontWeight: 500 }}>{format(total)}</div>
To ensure robust number formatting, consider adding checks for edge cases within the format function.
Analysis chain
Ensure the format function handles edge cases for number formatting.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that the `format` function handles edge cases like very large numbers or negative values.
# Test: Search for the function usage. Expect: Proper handling of edge cases.
rg --type typescript $'format'
Length of output: 64
Script:
#!/bin/bash
# Description: Verify that the `format` function handles edge cases like very large numbers or negative values.
# Test: Search for the function usage. Expect: Proper handling of edge cases.
rg --type ts 'format'
Length of output: 9755
Script:
#!/bin/bash
# Description: Extract relevant lines and surrounding context from TokenProgress.tsx to verify edge case handling in the format function.
# Extract lines around the format function definition and its usage.
rg --type ts --context 5 'const format = (number: number) => numeral(number).format' src/features/ChatInput/ActionBar/Token/TokenProgress.tsx
Length of output: 143
Script:
#!/bin/bash
# Description: Extract the entire content of TokenProgress.tsx to verify edge case handling in the format function.
# Extract the entire content of the file.
cat src/features/ChatInput/ActionBar/Token/TokenProgress.tsx
Length of output: 2411
| placement={'top'} | ||
| trigger={['hover', 'click']} |
There was a problem hiding this comment.
Tip
Codebase Verification
Ensure that the trigger property of Popover is set appropriately for the user interaction model.
The trigger property settings for Popover components across the application are inconsistent. Here are the findings:
src/components/ManifestPreviewer/index.tsx:trigger={trigger}src/features/ChatInput/ActionBar/Temperature.tsx:trigger={'click'}src/features/ChatInput/ActionBar/History.tsx:trigger={'click'}src/features/ChatInput/ActionBar/Token/TokenTag.tsx:trigger={['hover', 'click']}src/features/User/UserPanel/index.tsx:trigger={['click']}src/features/User/UserPanel/LangButton.tsx:trigger={['click', 'hover']}src/features/User/UserPanel/ThemeButton.tsx:trigger={['click', 'hover']}
Please review these settings to ensure they align with the intended user interaction model.
Analysis chain
Ensure that the trigger property of Popover is set appropriately for the user interaction model.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that the `trigger` property settings ('hover', 'click') are consistent with user interaction expectations across the application.
# Test: Search for other Popover uses in the application. Expect: Consistent trigger settings.
rg --type typescript $'Popover'
Length of output: 65
Script:
#!/bin/bash
# Description: Verify that the `trigger` property settings ('hover', 'click') are consistent with user interaction expectations across the application.
# Test: Search for other Popover uses in the application. Expect: Consistent trigger settings.
rg --type ts,tsx 'Popover'
Length of output: 57
Script:
#!/bin/bash
# Description: Verify that the `trigger` property settings ('hover', 'click') are consistent with user interaction expectations across the application.
# Test: Search for other Popover uses in the application. Expect: Consistent trigger settings.
rg --type-add 'ts:*.{ts,tsx}' --type ts 'Popover'
Length of output: 3663
Script:
#!/bin/bash
# Description: Extract the `trigger` property settings from identified Popover usages to verify consistency.
# Test: Extract `trigger` property settings from Popover components.
rg --type-add 'ts:*.{ts,tsx}' --type ts 'trigger={' src/features/User/UserPanel/LangButton.tsx src/features/User/UserPanel/index.tsx src/features/User/UserPanel/ThemeButton.tsx src/features/SyncStatusInspector/EnableSync.tsx src/features/SyncStatusInspector/DisableSync.tsx src/features/ChatInput/ActionBar/Token/TokenTag.tsx src/features/ChatInput/ActionBar/Temperature.tsx src/features/ChatInput/ActionBar/History.tsx src/components/ManifestPreviewer/index.tsx
Length of output: 546
Script:
#!/bin/bash
# Description: Extract the `trigger` property settings from identified Popover usages to verify consistency.
# Test: Extract `trigger` property settings from Popover components.
rg --type-add 'ts:*.{ts,tsx}' --type ts 'trigger=\{' src/features/User/UserPanel/LangButton.tsx src/features/User/UserPanel/index.tsx src/features/User/UserPanel/ThemeButton.tsx src/features/SyncStatusInspector/EnableSync.tsx src/features/SyncStatusInspector/DisableSync.tsx src/features/ChatInput/ActionBar/Token/TokenTag.tsx src/features/ChatInput/ActionBar/Temperature.tsx src/features/ChatInput/ActionBar/History.tsx src/components/ManifestPreviewer/index.tsx
Length of output: 984
我感觉这个数字没之前的好看。有点太像代码了 |
主要想和 token tag 里的字体统一 |
Mainly want to unify it with the font in token tag |
|
@canisminor1990 token tag用那个字体也不好看，看着像有衬线的 |
@canisminor1990 The token tag doesn’t look good with that font, it looks like serifs |
canisminor1990
force-pushed
the
style/update-token-tag
branch
from
303a81a
to
a4b7551
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (37)
- locales/ar/chat.json (1 hunks)
- locales/ar/components.json (1 hunks)
- locales/bg-BG/chat.json (1 hunks)
- locales/bg-BG/components.json (1 hunks)
- locales/de-DE/chat.json (1 hunks)
- locales/de-DE/components.json (1 hunks)
- locales/en-US/chat.json (1 hunks)
- locales/en-US/components.json (1 hunks)
- locales/es-ES/chat.json (1 hunks)
- locales/es-ES/components.json (1 hunks)
- locales/fr-FR/chat.json (1 hunks)
- locales/fr-FR/components.json (1 hunks)
- locales/it-IT/chat.json (1 hunks)
- locales/it-IT/components.json (1 hunks)
- locales/ja-JP/chat.json (1 hunks)
- locales/ja-JP/components.json (1 hunks)
- locales/ko-KR/chat.json (1 hunks)
- locales/ko-KR/components.json (1 hunks)
- locales/nl-NL/chat.json (1 hunks)
- locales/nl-NL/components.json (1 hunks)
- locales/pl-PL/chat.json (1 hunks)
- locales/pl-PL/components.json (1 hunks)
- locales/pt-BR/chat.json (1 hunks)
- locales/pt-BR/components.json (1 hunks)
- locales/ru-RU/chat.json (1 hunks)
- locales/ru-RU/components.json (1 hunks)
- locales/tr-TR/chat.json (1 hunks)
- locales/tr-TR/components.json (1 hunks)
- locales/vi-VN/chat.json (1 hunks)
- locales/vi-VN/components.json (1 hunks)
- locales/zh-CN/chat.json (1 hunks)
- locales/zh-CN/components.json (1 hunks)
- locales/zh-TW/chat.json (1 hunks)
- locales/zh-TW/components.json (1 hunks)
- src/features/ChatInput/ActionBar/Token/TokenProgress.tsx (1 hunks)
- src/features/ChatInput/ActionBar/Token/TokenTag.tsx (4 hunks)
- src/locales/default/chat.ts (1 hunks)
Files skipped from review due to trivial changes (32)
- locales/ar/chat.json
- locales/ar/components.json
- locales/bg-BG/chat.json
- locales/bg-BG/components.json
- locales/de-DE/chat.json
- locales/de-DE/components.json
- locales/en-US/chat.json
- locales/en-US/components.json
- locales/es-ES/chat.json
- locales/fr-FR/chat.json
- locales/fr-FR/components.json
- locales/it-IT/chat.json
- locales/it-IT/components.json
- locales/ja-JP/chat.json
- locales/ja-JP/components.json
- locales/ko-KR/chat.json
- locales/ko-KR/components.json
- locales/nl-NL/chat.json
- locales/nl-NL/components.json
- locales/pl-PL/chat.json
- locales/pl-PL/components.json
- locales/ru-RU/chat.json
- locales/ru-RU/components.json
- locales/tr-TR/chat.json
- locales/tr-TR/components.json
- locales/vi-VN/chat.json
- locales/vi-VN/components.json
- locales/zh-CN/chat.json
- locales/zh-TW/chat.json
- locales/zh-TW/components.json
- src/features/ChatInput/ActionBar/Token/TokenTag.tsx
- src/locales/default/chat.ts
Files skipped from review as they are similar to previous changes (1)
- src/features/ChatInput/ActionBar/Token/TokenProgress.tsx
Additional comments not posted (4)
locales/zh-CN/components.json (1)
9-10: The added localization strings are consistent and correctly formatted.locales/es-ES/components.json (1)
9-10: The added localization strings are consistent and correctly formatted.locales/pt-BR/components.json (1)
9-10: The added localization strings are consistent and correctly formatted.locales/pt-BR/chat.json (1)
87-87: The added localization strings are consistent and correctly formatted.
|
❤️ Great PR @canisminor1990 ❤️ 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 0.161.19](v0.161.18...v0.161.19) <sup>Released on **2024-05-25**</sup> #### 💄 Styles - **misc**: Update token tag popover style. <br/> <details> <summary><kbd>Improvements and Fixes</kbd></summary> #### Styles * **misc**: Update token tag popover style, closes [#2631](#2631) ([7635129](7635129)) </details> <div align="right"> [](#readme-top) </div>
|
🎉 This PR is included in version 0.161.19 🎉 The release is available on: Your semantic-release bot 📦🚀 |
### [Version 1.41.10](v1.41.9...v1.41.10) <sup>Released on **2024-05-25**</sup> #### 🐛 Bug Fixes - **misc**: Fix aws log. #### 💄 Styles - **misc**: Update token tag popover style. <br/> <details> <summary><kbd>Improvements and Fixes</kbd></summary> #### What's fixed * **misc**: Fix aws log ([58f3ed1](58f3ed1)) #### Styles * **misc**: Update token tag popover style, closes [lobehub#2631](https://github.com/bentwnghk/lobe-chat/issues/2631) ([7635129](7635129)) </details> <div align="right"> [](#readme-top) </div>
* 💄 style: Update token tag popover style * 💄 style: Fix empty status * 💄 style: Fix width * 💄 style: Change num font family * 💄 style: Add title * 💄 style: Change fontfamily
### [Version 0.161.19](lobehub/lobe-chat@v0.161.18...v0.161.19) <sup>Released on **2024-05-25**</sup> #### 💄 Styles - **misc**: Update token tag popover style. <br/> <details> <summary><kbd>Improvements and Fixes</kbd></summary> #### Styles * **misc**: Update token tag popover style, closes [lobehub#2631](lobehub#2631) ([7635129](lobehub@7635129)) </details> <div align="right"> [](#readme-top) </div>
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
📝 补充信息 | Additional Information
Summary by CodeRabbit
New Features
Improvements