Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import React, { useState } from "react";import { api } from "../api.js";import { Modal } from "../ui.jsx";
export function BookSearchDialog({ materialId, open, onOpenChange, onPage, notify,}) { const [query, setQuery] = useState(""), [results, setResults] = useState([]), [searching, setSearching] = useState(false); async function search(event) { event.preventDefault(); setSearching(true); try { setResults( await api( `/materials/${materialId}/search?q=${encodeURIComponent(query)}`, ), ); } catch (error) { notify(error.message, "error"); } finally { setSearching(false); } } return ( <Modal open={open} onOpenChange={onOpenChange} title="Search this book"> <form className="search-form" onSubmit={search}> <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="A phrase or concept…" aria-label="Book search" required /> <button className="primary" disabled={searching}> {searching ? "Searching…" : "Search"} </button> </form> <div className="search-results"> {results.map((result) => ( <button key={result.id} onClick={() => { onPage(result.page); onOpenChange(false); }} > <strong>Page {result.page}</strong> <span>{result.text.slice(0, 350)}</span> </button> ))} </div> {query && !results.length && !searching && ( <p className="muted"> Search runs against the local text index. Image-only pages need a vision model. </p> )} </Modal> );}