diff --git a/shared/keymap.ts b/shared/keymap.ts
index ef90ce77..4b54c1f2 100644
--- a/shared/keymap.ts
+++ b/shared/keymap.ts
@@ -15,6 +15,7 @@ export function getKeymap() {
"global:rename-chat": `<${mod}-t>`,
"global:setting-page": `<${mod}-,>`,
"global:close-window": `<${mod}-w>`,
+ "global:toggle-search": `<${mod}-f>`,
// "global:reload": `<${mod}-r>`,
}
}
diff --git a/src/App.tsx b/src/App.tsx
index e65ccb97..f0474012 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ import { refreshConfig } from "./ipc/host"
import { openOverlayAtom } from "./atoms/layerState"
import PopupConfirm from "./components/PopupConfirm"
import PopupElicitationRequest from "./components/PopupElicitationRequest"
+import SearchBar from "./components/SearchBar"
import { elicitationRequestsAtom, addElicitationRequestAtom, removeElicitationRequestAtom, type ElicitationAction, type ElicitationContent } from "./atoms/chatState"
import { responseLocalIPCElicitation } from "./ipc"
import camelcaseKeys from "camelcase-keys"
@@ -244,6 +245,7 @@ function App() {
<>
+
{installToolConfirm &&
(null)
+
+// Whether initial search is ready for navigation
+export const searchReadyAtom = atom(false)
+
+// Reset search ready state when text changes
+export const setSearchTextAtom = atom(
+ (get) => get(searchTextAtom),
+ (get, set, newText: string) => {
+ set(searchTextAtom, newText)
+ set(searchReadyAtom, false)
+ }
+)
+
+// Toggle search visibility
+export const toggleSearchAtom = atom(
+ (get) => get(searchVisibleAtom),
+ (get, set) => {
+ const isVisible = get(searchVisibleAtom)
+ set(searchVisibleAtom, !isVisible)
+ if (isVisible) {
+ // When closing, clear search state
+ set(searchTextAtom, "")
+ set(searchResultAtom, null)
+ set(searchReadyAtom, false)
+ }
+ }
+)
+
+// Open search
+export const openSearchAtom = atom(
+ null,
+ (get, set) => {
+ set(searchVisibleAtom, true)
+ }
+)
+
+// Close search
+export const closeSearchAtom = atom(
+ null,
+ (get, set) => {
+ set(searchVisibleAtom, false)
+ set(searchTextAtom, "")
+ set(searchResultAtom, null)
+ set(searchReadyAtom, false)
+ }
+)
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
new file mode 100644
index 00000000..80661f53
--- /dev/null
+++ b/src/components/SearchBar.tsx
@@ -0,0 +1,244 @@
+import { useEffect, useRef, useCallback } from "react"
+import { useAtom, useSetAtom, useAtomValue } from "jotai"
+import { useTranslation } from "react-i18next"
+import {
+ searchVisibleAtom,
+ searchTextAtom,
+ searchMatchCaseAtom,
+ searchResultAtom,
+ searchReadyAtom,
+ closeSearchAtom,
+} from "../atoms/searchState"
+import {
+ findInPage,
+ findNext,
+ findPrev,
+ stopFind,
+ listenSearchResult,
+} from "../ipc/search"
+
+export default function SearchBar() {
+ const { t } = useTranslation()
+ const inputRef = useRef(null)
+ const isVisible = useAtomValue(searchVisibleAtom)
+ const [searchText, setSearchText] = useAtom(searchTextAtom)
+ const [matchCase, setMatchCase] = useAtom(searchMatchCaseAtom)
+ const [searchResult, setSearchResult] = useAtom(searchResultAtom)
+ const [searchReady, setSearchReady] = useAtom(searchReadyAtom)
+ const closeSearch = useSetAtom(closeSearchAtom)
+
+ // Focus input when search bar becomes visible
+ useEffect(() => {
+ if (isVisible && inputRef.current) {
+ inputRef.current.focus()
+ inputRef.current.select()
+ }
+ }, [isVisible])
+
+ // Listen for search results
+ useEffect(() => {
+ const unsubscribe = listenSearchResult((result) => {
+ setSearchResult({
+ activeMatchOrdinal: result.activeMatchOrdinal,
+ matches: result.matches,
+ finalUpdate: result.finalUpdate,
+ })
+ // Mark search as ready when we receive the final update
+ if (result.finalUpdate) {
+ setSearchReady(true)
+ }
+ })
+
+ return () => {
+ unsubscribe()
+ }
+ }, [setSearchResult, setSearchReady])
+
+ // Perform search when text or matchCase changes
+ useEffect(() => {
+ if (!isVisible) {
+ return
+ }
+
+ // Reset ready state when starting a new search
+ setSearchReady(false)
+
+ const debounceTimer = setTimeout(() => {
+ if (searchText) {
+ findInPage(searchText, { matchCase })
+ } else {
+ stopFind()
+ setSearchResult(null)
+ setSearchReady(false)
+ }
+ }, 150)
+
+ return () => clearTimeout(debounceTimer)
+ }, [searchText, matchCase, isVisible, setSearchResult, setSearchReady])
+
+ // Clean up when closing
+ useEffect(() => {
+ if (!isVisible) {
+ stopFind()
+ }
+ }, [isVisible])
+
+ const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+ if (e.key === "Enter") {
+ e.preventDefault()
+ if (!searchText) {
+ return
+ }
+ // If search is not ready or no results, perform initial search
+ if (!searchReady || !searchResult || searchResult.matches === 0) {
+ findInPage(searchText, { matchCase })
+ return
+ }
+ if (e.shiftKey) {
+ findPrev(searchText, { matchCase })
+ } else {
+ findNext(searchText, { matchCase })
+ }
+ } else if (e.key === "Escape") {
+ e.preventDefault()
+ closeSearch()
+ }
+ }, [searchText, matchCase, closeSearch, searchResult, searchReady])
+
+ const handlePrevClick = useCallback(() => {
+ findPrev(searchText, { matchCase })
+ }, [searchText, matchCase])
+
+ const handleNextClick = useCallback(() => {
+ findNext(searchText, { matchCase })
+ }, [searchText, matchCase])
+
+ const handleClose = useCallback(() => {
+ closeSearch()
+ }, [closeSearch])
+
+ const toggleMatchCase = useCallback(() => {
+ setMatchCase(!matchCase)
+ }, [matchCase, setMatchCase])
+
+ const handleTextChange = useCallback((e: React.ChangeEvent) => {
+ setSearchText(e.target.value)
+ setSearchReady(false)
+ }, [setSearchText, setSearchReady])
+
+ if (!isVisible) {
+ return null
+ }
+
+ const hasMatches = searchResult && searchResult.matches > 0
+ const matchCountText = searchResult
+ ? `${searchResult.activeMatchOrdinal} / ${searchResult.matches}`
+ : ""
+
+ return (
+
+
+
+
+ {searchText && (
+
+ {searchText && !searchResult ? "..." : matchCountText}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+