feat: add a page to search chat history #5274
Conversation
|
Someone is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe recent updates introduce a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant Home
participant SearchChat
User->>Sidebar: Click on SearchChat Icon
Sidebar->>Home: Navigate to SearchChat Route
Home->>SearchChat: Load SearchChat Component
SearchChat->>User: Display Search Input
User->>SearchChat: Input Keywords and Press Enter
SearchChat->>SearchChat: Execute Search Logic
SearchChat->>User: Display Search Results
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 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: 1
Outside diff range, codebase verification and nitpick comments (1)
app/components/search-chat.tsx (1)
1-11: Optimize imports for better readability.Consider grouping related imports together for better readability. For instance, group icon imports and utility imports separately.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
package-lock.jsonis excluded by!**/package-lock.jsonyarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (8)
- app/components/home.tsx (2 hunks)
- app/components/search-chat.tsx (1 hunks)
- app/components/sidebar.tsx (1 hunks)
- app/constant.ts (1 hunks)
- app/locales/cn.ts (1 hunks)
- app/locales/en.ts (1 hunks)
- app/locales/jp.ts (1 hunks)
- app/locales/ru.ts (1 hunks)
Additional comments not posted (10)
app/components/search-chat.tsx (2)
26-42: Ensure initial search results are meaningful.The
setDefaultItemsfunction currently slices the first six sessions and uses the first message's content. Ensure this logic aligns with user expectations for default search results.
85-159: Ensure accessibility and localization support.The JSX structure should ensure accessibility features such as ARIA labels where necessary. Additionally, verify that all text content is localized using the
Localeobject.app/components/home.tsx (2)
62-67: Dynamic import forSearchChatlooks good.The dynamic import pattern is consistent with other components, ensuring modularity and potentially improved load times.
184-184: Ensure new route integration is seamless.The new route for
SearchChatis added correctly. Verify that navigation to this route is tested and does not disrupt existing routes.app/locales/jp.ts (1)
247-262: Localization entries forSearchChatare well-structured.The entries cover various UI elements and states for the
SearchChatfeature. Ensure these entries are utilized in the component and correctly displayed.app/locales/ru.ts (1)
195-210: Localization strings forSearchChatlook good.The new
SearchChatsection is well-integrated and consistent with the existing localization format. The strings cover various aspects of the search feature, including titles, instructions, and status messages.app/components/sidebar.tsx (1)
253-261: Integration ofIconButtonfor search chat feature is well done.The new
IconButtonfor the search chat feature is correctly integrated into the sidebar. It uses theDiscoveryIconand navigates to theSearchChatpath. The conditional text display based onshouldNarrowis a nice touch for responsive design.app/constant.ts (1)
44-44: Addition ofSearchChatpath is correct.The
SearchChatpath is correctly added to thePathenum. It follows the existing naming conventions and is consistent with other paths in the application.app/locales/cn.ts (1)
522-536: Ensure Consistency in Translation and Structure.The
SearchChatsection has been added for the Chinese locale. The translations seem appropriate and consistent with the rest of the file. Ensure that these strings are used correctly in the application to support the new search functionality.app/locales/en.ts (1)
530-545: Ensure Consistency in Structure and Usage.The
SearchChatsection has been added for the English locale. The structure and language are consistent with the rest of the file. Ensure these strings are integrated correctly in the application to support the new search functionality.
|
Your build has completed! |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
app/icons/zoom.svgis excluded by!**/*.svg
Files selected for processing (6)
- app/components/search-chat.tsx (1 hunks)
- app/components/sidebar.tsx (2 hunks)
- app/locales/cn.ts (1 hunks)
- app/locales/en.ts (1 hunks)
- app/locales/jp.ts (1 hunks)
- app/locales/ru.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- app/locales/cn.ts
- app/locales/jp.ts
- app/locales/ru.ts
Additional comments not posted (9)
app/components/search-chat.tsx (6)
1-11: LGTM! Import statements are appropriate.The imports are relevant and necessary for the component's functionality.
13-17: LGTM! Type declaration is appropriate.The
Itemtype is well-defined for representing search results.
26-44: LGTM! State management is well-implemented.The use of
useStateanduseRefis appropriate for managing component state and references.
45-82: Optimize search logic for performance.The current search logic iterates over all sessions and messages, which might be inefficient for large datasets. Consider implementing a more efficient search algorithm or indexing strategy.
84-100: LGTM! Effect hook is correctly implemented.The use of
setIntervaland cleanup on unmount is appropriate for monitoring input changes.
102-177: LGTM! JSX rendering is well-structured.The layout is clear, and the use of localization and styles is consistent.
app/components/sidebar.tsx (2)
Line range hint
1-15:
LGTM! Import statements are appropriate.The imports are relevant and necessary for the component's functionality.
253-261: LGTM! IconButton for search chat is well-integrated.The new
IconButtonfor navigating to the search chat feature is appropriately added and styled.app/locales/en.ts (1)
530-543: LGTM! Localization for SearchChat is comprehensive.The localization strings are well-structured and cover all necessary UI elements for the search chat feature.
Movelocity
changed the title
Movelocity
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (1)
- app/components/search-chat.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/components/search-chat.tsx
|
看起来这里菜单位置不太够 |
|
或许还需要考虑一下，这个搜索入口放哪里比较合适？ |
Maybe you need to think about where to put this search entry? |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/components/sidebar.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/components/sidebar.tsx
关于菜单位置不够的问题，我做了一些调整，尝试隐藏搜索按钮的文本
在测试过程中，我发现日语菜单项的显示效果也不理想，目前面具选择的文本设置得比较长
后续其实可以考虑仅使用图标来代表功能，文本显示在鼠标悬停时的提示框中。 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/components/search-chat.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/components/search-chat.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- app/constant.ts (1 hunks)
- app/locales/jp.ts (1 hunks)
- app/locales/ru.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- app/constant.ts
- app/locales/jp.ts
- app/locales/ru.ts
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (17)
- app/locales/ar.ts (1 hunks)
- app/locales/bn.ts (1 hunks)
- app/locales/cs.ts (1 hunks)
- app/locales/de.ts (1 hunks)
- app/locales/es.ts (1 hunks)
- app/locales/fr.ts (1 hunks)
- app/locales/id.ts (1 hunks)
- app/locales/it.ts (1 hunks)
- app/locales/jp.ts (1 hunks)
- app/locales/ko.ts (1 hunks)
- app/locales/no.ts (1 hunks)
- app/locales/pt.ts (1 hunks)
- app/locales/ru.ts (1 hunks)
- app/locales/sk.ts (1 hunks)
- app/locales/tr.ts (1 hunks)
- app/locales/tw.ts (1 hunks)
- app/locales/vi.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/locales/jp.ts
Additional comments not posted (18)
app/locales/tw.ts (1)
455-469: Localization forSearchChatadded successfully.The new
SearchChatsection is well-integrated and follows the existing structure for localization. Ensure that the translations are accurate and contextually appropriate.app/locales/ko.ts (1)
461-475: Localization forSearchChatadded successfully.The new
SearchChatsection is well-structured and consistent with the localization approach in the file. Ensure that the translations are accurate.app/locales/pt.ts (1)
408-422: Localization forSearchChatadded successfully.The
SearchChatsection is properly integrated and follows the established pattern for localization in the file. Verify the accuracy of the translations.app/locales/sk.ts (1)
426-440: Localization additions look good.The new
SearchChatsection for the Slovak locale is consistent with the existing structure and provides necessary translations for the search feature. Ensure that these translations are accurate and contextually appropriate for the application.app/locales/ar.ts (1)
462-476: Localization additions look good.The new
SearchChatsection for the Arabic locale is consistent with the existing structure and provides necessary translations for the search feature. Ensure that these translations are accurate and contextually appropriate for the application.app/locales/cs.ts (1)
470-484: Localization additions look good.The new
SearchChatsection for the Czech locale is consistent with the existing structure and provides necessary translations for the search feature. Ensure that these translations are accurate and contextually appropriate for the application.app/locales/vi.ts (1)
469-483: Localization forSearchChatlooks accurate and consistent.The Vietnamese translations for the
SearchChatfeature are well-integrated and consistent with the rest of the file. Ensure that these strings are correctly used in the UI.app/locales/id.ts (1)
473-487: Localization forSearchChatlooks accurate and consistent.The Indonesian translations for the
SearchChatfeature are well-integrated and consistent with the rest of the file. Ensure that these strings are correctly used in the UI.app/locales/bn.ts (1)
469-483: Localization forSearchChatlooks accurate and consistent.The Bengali translations for the
SearchChatfeature are well-integrated and consistent with the rest of the file. Ensure that these strings are correctly used in the UI.app/locales/no.ts (1)
477-491: Localization additions are well-structured.The new
SearchChatsection in the Norwegian localization file is comprehensive and consistent with the rest of the file. The keys and values are appropriately named and translated, ensuring a seamless user experience for Norwegian-speaking users.app/locales/tr.ts (1)
473-487: Localization additions are well-structured.The new
SearchChatsection in the Turkish localization file is comprehensive and consistent with the rest of the file. The keys and values are appropriately named and translated, ensuring a seamless user experience for Turkish-speaking users.app/locales/ru.ts (1)
474-488: Localization additions are well-structured.The new
SearchChatsection in the Russian localization file is comprehensive and consistent with the rest of the file. The keys and values are appropriately named and translated, ensuring a seamless user experience for Russian-speaking users.app/locales/it.ts (1)
484-498: Translations forSearchChatfeature look correct.The Italian translations for the
SearchChatfeature are well-structured and consistent with the rest of the localization file. Ensure these translations align with the application's context and user interface.app/locales/es.ts (1)
483-497: Translations forSearchChatfeature look correct.The Spanish translations for the
SearchChatfeature are well-structured and consistent with the rest of the localization file. Ensure these translations align with the application's context and user interface.app/locales/fr.ts (1)
483-497: Translations forSearchChatfeature look correct.The French translations for the
SearchChatfeature are well-structured and consistent with the rest of the localization file. Ensure these translations align with the application's context and user interface.app/locales/de.ts (3)
485-486: Ensure localization consistency forSearchChat.Name.The translation for "Search" is accurately localized as "Suche". Ensure consistency with similar entries in other locale files.
487-494: ReviewSearchChat.Pageentries for localization and completeness.The entries under
Pageare well-localized. The dynamic function forSubTitlecorrectly formats the count of results found. Ensure that similar dynamic entries in other locale files follow the same pattern.
496-498: CheckSearchChat.Item.Viewfor consistency.The translation for "View" as "Ansehen" is consistent with other similar entries. Ensure this consistency is maintained across the application.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/components/search-chat.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/components/search-chat.tsx
| }; | ||
|
|
||
| useEffect(() => { | ||
| const intervalId = setInterval(() => { |
There was a problem hiding this comment.
旁观，使用定时器来每秒判断值变化会不会不太好？使用useState绑定input的value，添加到deps中，并做防抖？doSearch函数也可以用useCallBack包裹一下？ 仅旁观建议，如有说错请忽略🫣
There was a problem hiding this comment.
旁观，使用定时器来每秒判断值变化会不会不太好？使用useState绑定input的value，添加到deps中，并做防抖？doSearch函数也可以用useCallBack包裹一下？ 仅旁观建议，如有说错请忽略🫣
1. 防抖方案
新建分支尝试实现了一下你提到的方案，https://github.com/Movelocity/ChatGPT-Next-Web/tree/test/search-history
使用防抖（debounce）机制时，防抖函数会在每次输入时重置计时器，只有在输入停止并且超过防抖时间后，才会执行搜索操作。
我把防抖时间设为1000毫秒。现在每隔500毫秒输入一个字符，最终只会在输入完成并且没有进一步输入的情况下（即等待时间超过防抖时间）触发一次搜索操作。
举个例子，当用户想搜索 javascript，输入 javas 后就大概率已经能搜索到完整的列表了。而每隔500毫秒输入 j a v a s c r i p t 的情况下，最终只会在输入完成（javascript 整个单词）并且等待超过1000毫秒后，才会执行一次以 javascript 为关键词的搜索
相比之下，使用定时器方案可以频繁地检查输入框的值，并立即触发搜索操作。这样可以显著提高搜索功能的响应速度，用户在快速输入时，不必等到整个单词输入完成再等待一次防抖的延时。
所以我还是打算保留原方案。
2. useCallback
doSearch 函数被 useEffect 依赖了，useCallback 确实需要加上
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (1)
app/components/search-chat.tsx (1)
88-165: Improve accessibility and consistency in UI rendering.Ensure that all interactive elements have accessible labels and consider using consistent naming conventions for CSS classes.
- <div className="window-header-submai-title"> + <div className="window-header-subtitle">Additionally, ensure that all buttons and inputs have appropriate
aria-labelattributes for better accessibility.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/components/search-chat.tsx (1 hunks)
Additional comments not posted (2)
app/components/search-chat.tsx (2)
1-11: Imports look good.The imported modules and components are appropriate for the functionality implemented in this file.
30-68: Optimize search logic for performance.The current search logic iterates over all sessions and messages, which might be inefficient for large datasets. Consider implementing a more efficient search algorithm or indexing strategy.
| useEffect(() => { | ||
| const intervalId = setInterval(() => { | ||
| if (searchInputRef.current) { | ||
| const currentValue = searchInputRef.current.value; | ||
| if (currentValue !== previousValueRef.current) { | ||
| if (currentValue.length > 0) { | ||
| const result = doSearch(currentValue); | ||
| setSearchResults(result); | ||
| } | ||
| previousValueRef.current = currentValue; | ||
| } | ||
| } | ||
| }, 1000); | ||
|
|
||
| // Cleanup the interval on component unmount | ||
| return () => clearInterval(intervalId); | ||
| }, [doSearch]); |
There was a problem hiding this comment.
Use a debounced input change handler instead of a timer.
Using a timer to check for input changes is inefficient. Consider using a debounced input change handler with useState and useEffect to manage search execution.
import { useDebounce } from 'use-debounce'; // Assuming a debounce hook is available
// Inside the component
const [debouncedSearchText] = useDebounce(searchInputRef.current?.value, 500);
useEffect(() => {
if (debouncedSearchText) {
const result = doSearch(debouncedSearchText);
setSearchResults(result);
}
}, [debouncedSearchText, doSearch]);This approach avoids unnecessary checks and improves performance.
| const [searchResults, setSearchResults] = useState<Item[]>([]); | ||
|
|
||
| const previousValueRef = useRef<string>(""); | ||
| const searchInputRef = useRef<HTMLInputElement>(null); |
There was a problem hiding this comment.
Consider using useState for tracking input changes.
Using useState instead of useRef for tracking changes in the input value can provide a more React idiomatic approach and simplify the code.
- const previousValueRef = useRef<string>("");
+ const [previousValue, setPreviousValue] = useState<string>("");Update the logic accordingly to use setPreviousValue.
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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [searchResults, setSearchResults] = useState<Item[]>([]); | |
| const previousValueRef = useRef<string>(""); | |
| const searchInputRef = useRef<HTMLInputElement>(null); | |
| const [searchResults, setSearchResults] = useState<Item[]>([]); | |
| const [previousValue, setPreviousValue] = useState<string>(""); | |
| const searchInputRef = useRef<HTMLInputElement>(null); |
|
|
已经将入口移到了"Stable Diffusion"所在的 PLUGINS 列表里
|
The entry has been moved to the PLUGINS list where "Stable Diffusion" is located
|
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
增加一个搜索历史记录的页面，方便查看之前问过 GPT 的问题
📝 补充信息 | Additional Information
Demo: feature demo is here. You can import some chat history and experience the searching feature
Summary by CodeRabbit
Summary by CodeRabbit
New Features
SearchChatcomponent for searching through chat history.SearchChatpage.SearchChatin multiple languages (English, Chinese, Japanese, Russian, Arabic, Bengali, Czech, German, Spanish, French, Indonesian, Korean, Norwegian, Portuguese, Turkish, Vietnamese).Bug Fixes
SearchChatcomponent.These changes enhance user experience by providing efficient search capabilities and better accessibility across different languages.