feat: add a page to search chat history #5274
There are no files selected for viewing
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import { useState, useEffect, useRef, useCallback } from "react"; | ||
| import { ErrorBoundary } from "./error"; | ||
| import styles from "./mask.module.scss"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { IconButton } from "./button"; | ||
| import CloseIcon from "../icons/close.svg"; | ||
| import EyeIcon from "../icons/eye.svg"; | ||
| import Locale from "../locales"; | ||
| import { Path } from "../constant"; | ||
|
|
||
| import { useChatStore } from "../store"; | ||
|
|
||
| type Item = { | ||
| id: number; | ||
| name: string; | ||
| content: string; | ||
| }; | ||
| export function SearchChatPage() { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const chatStore = useChatStore(); | ||
|
|
||
| const sessions = chatStore.sessions; | ||
| const selectSession = chatStore.selectSession; | ||
|
|
||
| const [searchResults, setSearchResults] = useState<Item[]>([]); | ||
|
|
||
| const previousValueRef = useRef<string>(""); | ||
| const searchInputRef = useRef<HTMLInputElement>(null); | ||
| const doSearch = useCallback((text: string) => { | ||
| const lowerCaseText = text.toLowerCase(); | ||
| const results: Item[] = []; | ||
|
|
||
| sessions.forEach((session, index) => { | ||
| const fullTextContents: string[] = []; | ||
|
|
||
| session.messages.forEach((message) => { | ||
| const content = message.content as string; | ||
| if (!content.toLowerCase || content === "") return; | ||
| const lowerCaseContent = content.toLowerCase(); | ||
|
|
||
| // full text search | ||
| let pos = lowerCaseContent.indexOf(lowerCaseText); | ||
| while (pos !== -1) { | ||
| const start = Math.max(0, pos - 35); | ||
| const end = Math.min(content.length, pos + lowerCaseText.length + 35); | ||
| fullTextContents.push(content.substring(start, end)); | ||
| pos = lowerCaseContent.indexOf( | ||
| lowerCaseText, | ||
| pos + lowerCaseText.length, | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| if (fullTextContents.length > 0) { | ||
| results.push({ | ||
| id: index, | ||
| name: session.topic, | ||
| content: fullTextContents.join("... "), // concat content with... | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| // sort by length of matching content | ||
| results.sort((a, b) => b.content.length - a.content.length); | ||
|
|
||
| return results; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| const intervalId = setInterval(() => { | ||
|
There was a problem hiding this comment. 旁观，使用定时器来每秒判断值变化会不会不太好？使用useState绑定input的value，添加到deps中，并做防抖？doSearch函数也可以用useCallBack包裹一下？ 仅旁观建议，如有说错请忽略🫣 There was a problem hiding this comment.
1. 防抖方案新建分支尝试实现了一下你提到的方案，https://github.com/Movelocity/ChatGPT-Next-Web/tree/test/search-history 使用防抖（debounce）机制时，防抖函数会在每次输入时重置计时器，只有在输入停止并且超过防抖时间后，才会执行搜索操作。 举个例子，当用户想搜索 相比之下，使用定时器方案可以频繁地检查输入框的值，并立即触发搜索操作。这样可以显著提高搜索功能的响应速度，用户在快速输入时，不必等到整个单词输入完成再等待一次防抖的延时。 所以我还是打算保留原方案。 2. useCallbackdoSearch 函数被 useEffect 依赖了，useCallback 确实需要加上 |
||
| 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]); | ||
|
Comment on lines
+70
to
+86
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 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. |
||
|
|
||
| return ( | ||
| <ErrorBoundary> | ||
| <div className={styles["mask-page"]}> | ||
| {/* header */} | ||
| <div className="window-header"> | ||
| <div className="window-header-title"> | ||
| <div className="window-header-main-title"> | ||
| {Locale.SearchChat.Page.Title} | ||
| </div> | ||
| <div className="window-header-submai-title"> | ||
| {Locale.SearchChat.Page.SubTitle(searchResults.length)} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="window-actions"> | ||
| <div className="window-action-button"> | ||
| <IconButton | ||
| icon={<CloseIcon />} | ||
| bordered | ||
| onClick={() => navigate(-1)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className={styles["mask-page-body"]}> | ||
| <div className={styles["mask-filter"]}> | ||
| {/**搜索输入框 */} | ||
| <input | ||
| type="text" | ||
| className={styles["search-bar"]} | ||
| placeholder={Locale.SearchChat.Page.Search} | ||
| autoFocus | ||
| ref={searchInputRef} | ||
| onKeyDown={(e) => { | ||
| if (e.key === "Enter") { | ||
| e.preventDefault(); | ||
| const searchText = e.currentTarget.value; | ||
| if (searchText.length > 0) { | ||
| const result = doSearch(searchText); | ||
| setSearchResults(result); | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| {searchResults.map((item) => ( | ||
| <div | ||
| className={styles["mask-item"]} | ||
| key={item.id} | ||
| onClick={() => { | ||
| navigate(Path.Chat); | ||
| selectSession(item.id); | ||
| }} | ||
| style={{ cursor: "pointer" }} | ||
| > | ||
| {/** 搜索匹配的文本 */} | ||
| <div className={styles["mask-header"]}> | ||
| <div className={styles["mask-title"]}> | ||
| <div className={styles["mask-name"]}>{item.name}</div> | ||
| {item.content.slice(0, 70)} | ||
| </div> | ||
| </div> | ||
| {/** 操作按钮 */} | ||
| <div className={styles["mask-actions"]}> | ||
| <IconButton | ||
| icon={<EyeIcon />} | ||
| text={Locale.SearchChat.Item.View} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ErrorBoundary> | ||
| ); | ||
| } | ||
This file contains 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider using
useStatefor tracking input changes.Using
useStateinstead ofuseReffor tracking changes in the input value can provide a more React idiomatic approach and simplify the code.Update the logic accordingly to use
setPreviousValue.Committable suggestion