feat: add page search functionality (Ctrl+F / Cmd+F)

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>`,
   }
 }

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() {
     <>
       <RouterProvider router={router} />
       <Updater />
+      <SearchBar />
 
       {installToolConfirm &&
         <PopupConfirm

src/atoms/hotkeyState.ts

@@ -1,6 +1,7 @@
 import { atom, getDefaultStore } from "jotai"
 import merge from "lodash/merge"
 import { closeAllSidebarsAtom, toggleSidebarAtom } from "./sidebarState"
+import { toggleSearchAtom } from "./searchState"
 import { router } from "../router"
 import mitt from "mitt"
 import { closeAllOverlaysAtom, openOverlayAtom, popLayerAtom } from "./layerState"
@@ -31,6 +32,7 @@ export const GlobalHotkeyEvent = [
   "global:rename-chat",
   "global:setting-page",
   "global:close-window",
+  "global:toggle-search",
   // "global:reload"
 ] as const
 export type GlobalHotkeyEvent = typeof GlobalHotkeyEvent[number]
@@ -259,6 +261,9 @@ const handleGlobalEventAtom = atom(
           }
         }
         break
+      case "global:toggle-search":
+        set(toggleSearchAtom)
+        break
       // case "global:reload":
       //   window.location.reload()
       //   break

src/atoms/searchState.ts

@@ -0,0 +1,65 @@
+import { atom } from "jotai"
+
+export interface SearchResult {
+  activeMatchOrdinal: number
+  matches: number
+  finalUpdate?: boolean
+}
+
+// Search bar visibility
+export const searchVisibleAtom = atom(false)
+
+// Current search query
+export const searchTextAtom = atom("")
+
+// Case sensitivity toggle
+export const searchMatchCaseAtom = atom(false)
+
+// Search result (match count and current index)
+export const searchResultAtom = atom<SearchResult | null>(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)
+  }
+)

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<HTMLInputElement>(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<HTMLInputElement>) => {
+    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 (
+    <div className="search-bar">
+      <div className="search-bar-input-wrapper">
+        <svg
+          className="search-bar-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+        <input
+          ref={inputRef}
+          type="text"
+          className="search-bar-input"
+          placeholder={t("search.placeholder")}
+          value={searchText}
+          onChange={handleTextChange}
+          onKeyDown={handleKeyDown}
+        />
+        {searchText && (
+          <span className={`search-bar-count ${!hasMatches && searchText ? "no-results" : ""}`}>
+            {searchText && !searchResult ? "..." : matchCountText}
+          </span>
+        )}
+      </div>
+
+      <button
+        className={`search-bar-btn match-case ${matchCase ? "active" : ""}`}
+        onClick={toggleMatchCase}
+        title={t("search.matchCase")}
+      >
+        Aa
+      </button>
+
+      <div className="search-bar-divider" />
+
+      <button
+        className="search-bar-btn"
+        onClick={handlePrevClick}
+        disabled={!hasMatches}
+        title={t("search.previous")}
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m18 15-6-6-6 6" />
+        </svg>
+      </button>
+
+      <button
+        className="search-bar-btn"
+        onClick={handleNextClick}
+        disabled={!hasMatches}
+        title={t("search.next")}
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <div className="search-bar-divider" />
+
+      <button
+        className="search-bar-btn close"
+        onClick={handleClose}
+        title={t("common.close")}
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>
+  )
+}