SemanticSearch
Semantic memory search with a query box, mode and limit, results with facet chips, highlighted words and a score with a level word.
Code
<SemanticSearch results={results} searching={pending} onSearch={async (query, { mode, limit }) => setResults(await api.recall(query, mode, limit))} onOpen={(hit) => open(hit.id)}/>AI Assistant · beta
Live examples and controls: SemanticSearch in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/semantic-search.jsonSearch a brain by meaning. The result list is filterable by facets (group, type, source, high importance) and every hit shows how strongly it matched.
When to use
- A brain or knowledge base search page.
- Debugging retrieval: showing scores next to hits.
When not to use
- Jumping to app pages and commands: use
CommandPalette. - Answering a question with citations: use
ResearchRunorCopilotChat.
Import
import { SemanticSearch } from "@fadymondy/nasaq/web";Quick start
<SemanticSearch
results={results}
searching={pending}
onSearch={async (query, { mode, limit }) => setResults(await api.recall(query, mode, limit))}
onOpen={(hit) => open(hit.id)}
/>Anatomy
A search field with a mode toggle (semantic or keyword) and a result limit. Below it the facet chips, then hits. Each hit: content with the query words highlighted (<mark>), a score bar and level word, chips for group, type and source, and a context menu with Open and Copy.
API
| Prop | Type | Description |
|---|---|---|
onSearch | (query, { mode, limit }) => void | Promise | Required. Called on submit. |
results | SemanticHit[] | undefined means idle; an empty array means no results. |
searching, error, onRetry | Progress and failure. | |
onOpen | (hit) => void | Open a hit. |
modes, defaultMode, limits, defaultLimit, defaultQuery | Search options. | |
showScores, contextMenu | boolean | Show the score bar; enable the context menu. |
labels | Partial<SemanticSearchLabels> | Override any string. |
SemanticHit is { id, content, score (0 to 1), group?, kind?, source?, sourceRef?, importance?, viaEntity? }.
Examples
Keyword only
<SemanticSearch modes={["keyword"]} onSearch={search} />Accessibility
The score is shown as a word (strong, good, weak) as well as a bar. Facet chips are toggle buttons with aria-pressed. Highlighted words use <mark>. The result count is announced.
RTL & i18n
- English and Arabic strings ship and follow the Nasaq locale. Pass
labelsto override any string. - Layout uses logical properties, so it mirrors in right-to-left. Numbers follow the locale.
Styling & tokens
- The score bar uses Nasaq status tokens by level. Facet chips use
Badge-style surfaces onbg-cardandborder-border.
Do / Don't
- Do send
scoreon a 0 to 1 scale. - Don't pass
[]before the first search; leaveresultsundefined.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-ai-assistant-semantic-search--docs
ScoreExplainer
A 0 to 100 score badge that opens the reasons behind it, one line per dimension with points, source chips, an inferred mark and confidence.
VoiceCallOverlay
Full-screen voice call with an AI agent showing who, how long, a level-driven visualiser, the listening, thinking or speaking state, live captions and mute, captions and hang-up controls.