Function SearchBar

src/renderer/src/components/editors/ChatEditor/SearchBar.tsx:17–197

({ pageId, messages, containerRef }: SearchBarProps)

}

export function SearchBar({ pageId, messages, containerRef }: SearchBarProps): React.JSX.Element {
  const inputRef = useRef<InputRef>(null)

  const searchState = useChatUIStore((state) => state.getState(pageId).search)
  const setSearchQuery = useChatUIStore((state) => state.setSearchQuery)
  const setSearchCurrentIndex = useChatUIStore((state) => state.setSearchCurrentIndex)
  const setSearchOptions = useChatUIStore((state) => state.setSearchOptions)
  const setSearchOpen = useChatUIStore((state) => state.setSearchOpen)

  // 使用搜索高亮 Hook
  const { total, scrollToMatch } = useSearchHighlight({
    containerRef,
    messages,
    searchState,
    pageId
  })

  // 自动聚焦并选中输入框
  useEffect(() => {
    const timer = setTimeout(() => {
      inputRef.current?.focus()
      inputRef.current?.select()
    }, 50)
    return () => clearTimeout(timer)
  }, [searchState.focusRequestKey])

  // 当 currentIndex 变化时滚动到对应位置
  useEffect(() => {
    if (total > 0) {
      scrollToMatch(searchState.currentIndex)
    }
  }, [searchState.currentIndex, total, scrollToMatch])

  // 导航到下一个匹配
  const goToNext = useCallback(() => {
    if (total === 0) return
    const nextIndex = (searchState.currentIndex + 1) % total
    setSearchCurrentIndex(pageId, nextIndex)
  }, [pageId, searchState.currentIndex, total, setSearchCurrentIndex])

  // 导航到上一个匹配
  const goToPrev = useCallback(() => {
    if (total === 0) return
    const prevIndex = (searchState.currentIndex - 1 + total) % total
    setSearchCurrentIndex(pageId, prevIndex)
  }, [pageId, searchState.currentIndex, total, setSearchCurrentIndex])

  // 关闭搜索栏
  const handleClose = useCallback(() => {
    setSearchOpen(pageId, false)
  }, [pageId, setSearchOpen])

  // 处理输入变化
  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setSearchQuery(pageId, e.target.value)
    },
    [pageId, setSearchQuery]