{titleText}
{sourceLabel}
{annotated.length === 0
?
Nothing matched. Try simpler terms, or press Esc.
:
{annotated.map((f, i) => )}
}
{allBlocked ?
These filters aren't available from the current toggle. Switch toggles or refine your query.
: null}
{r && r.leftover ?
Unmapped: "{r.leftover}" — will be ignored.
: null}
);
}
function SmartErrorPopover() {
useAppState();
const all = (searchSmartResult && searchSmartResult.filters) || [];
const blockContacts = state.entity === 'signals' || hasSignalFilter();
const blockSignals = state.entity === 'contacts' || hasContactFilter();
const filters = (blockContacts || blockSignals)
? all.filter(f => {
const ent = FIELD_BY_ID[f.fieldId]?.entity;
if (blockContacts && ent === 'contacts') return false;
if (blockSignals && ent === 'signals') return false;
return true;
})
: all;
return (
AI parse failed
error
{searchSmartError || 'Unknown error'}
{filters.length
?
{filters.map((f, i) => )}
Lexical matches above — apply these, or cancel and refine.
:
No lexical matches either. Try a simpler query.
}
{filters.length
?
: null}
);
}
/* ---- the bar --------------------------------------------------------------- */
function SearchBar({ value, setValue, hero }) {
useAppState();
const [focused, setFocused] = React.useState(false);
const [hi, setHi] = React.useState(0);
const [preview, setPreview] = React.useState(null); // { rect, field, value }
const inputRef = React.useRef(null);
const wrapRef = React.useRef(null);
// Expose clear/focus hooks for the smart-parse module + sidebar reset.
React.useEffect(() => {
const api = {
clearInput: () => setValue(''),
focus: () => inputRef.current && inputRef.current.focus(),
setQuery: (q) => { setValue(q); if (inputRef.current) inputRef.current.focus(); },
};
window.__searchBar = api;
window.__clearSearchInput = api.clearInput;
return () => { if (window.__searchBar === api) { window.__searchBar = null; window.__clearSearchInput = null; } };
}, [setValue]);
const trimmed = String(value || '').trim();
// A query change invalidates in-flight smart parse state.
React.useEffect(() => {
if (searchSmartMode !== 'idle' && trimmed !== searchSmartQuery) {
cancelSmartParse();
notify();
}
}, [trimmed]);
const committed = state.filters.filter(isFilterComplete);
const parsing = searchSmartMode === 'parsing';
// Build suggestions (idle mode only).
let items = [];
if (searchSmartMode === 'idle' && trimmed) {
items = buildSearchSuggestions(value);
if (smartTokenize(value).length >= 2) {
items = [{ isSmart: true, icon: 'wand-sparkles', label: 'Smart parse', match: 'Interpret entire query with AI', q: trimmed }, ...items];
}
}
let hiIdx = hi;
const firstEnabled = items.findIndex(it => !it.disabled);
if (firstEnabled >= 0 && (hiIdx >= items.length || hiIdx < 0 || items[hiIdx]?.disabled)) hiIdx = firstEnabled;
const showSuggestions = searchSmartMode === 'idle' && focused && trimmed && items.length > 0;
const showSmart = searchSmartMode === 'preview' || searchSmartMode === 'error';
const pick = (idx) => {
const it = items[idx];
if (!it || it.disabled) return;
if (it.isSmart) { runSmartParse(value); return; }
commitSearchSuggestion(it);
setValue('');
setHi(0);
notify();
setTimeout(() => inputRef.current && inputRef.current.focus(), 0);
};
const onKeyDown = (e) => {
if (searchSmartMode === 'parsing') {
if (e.key === 'Escape') { e.preventDefault(); cancelSmartParse(); notify(); }
else if (e.key === 'Enter') e.preventDefault();
return;
}
if (searchSmartMode === 'preview' || searchSmartMode === 'error') {
if (e.key === 'Escape') { e.preventDefault(); cancelSmartParse(); notify(); }
else if (e.key === 'Enter' || e.key === 'Tab') {
e.preventDefault();
if (searchSmartResult && searchSmartResult.filters.length) applySmartResult();
}
return;
}
if (e.key === 'Escape') { setValue(''); return; }
if (!items.length) return;
if (e.key === 'ArrowDown') {
e.preventDefault();
let next = hiIdx + 1;
while (next < items.length && items[next]?.disabled) next++;
if (next < items.length) setHi(next);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
let prev = hiIdx - 1;
while (prev >= 0 && items[prev]?.disabled) prev--;
if (prev >= 0) setHi(prev);
} else if (e.key === 'Enter' || e.key === 'Tab') {
e.preventDefault();
pick(hiIdx);
}
};
return (
{committed.length > 0 ? (
{committed.map(f => )}
) : null}
{ setHi(0); setValue(e.target.value); }}
onFocus={() => setFocused(true)}
onBlur={() => setTimeout(() => setFocused(false), 140)}
onKeyDown={onKeyDown}
/>
{committed.length > 0 ? (
) : null}
{(showSuggestions || showSmart) ? (
{showSmart
? (searchSmartMode === 'preview' ?
:
)
: items.map((it, i) => {
const active = i === hiIdx;
if (it.isSmart) {
return (
setHi(i)}
onMouseDown={(e) => { e.preventDefault(); pick(i); }}>
AI
{it.label} · {it.q}
↵
);
}
return (
setHi(i)}
onMouseDown={(e) => { e.preventDefault(); if (!it.disabled) pick(i); }}
>
{it.label}
{it.isFallback ? it.match : }
{it.disabled ? '' : '↵'}
);
})}
) : null}
{preview ?
: null}
);
}
Object.assign(window, { SearchBar, FilterChip, PresetPreview, SmartPreviewPopover, SmartErrorPopover, specToPseudoChips, HighlightQ, SmartPreviewItem });