The Inline Search component enables users to quickly reference documents, contacts, and sites directly within any document by typing the "@" symbol.
How It Works
Typing @ inside a draft triggers the inline search interface.
Inline Search only searches for Document Titles and Contact Names. It does not perform a full-text search.
The dropdown includes a search bar at the top for typing queries.
Below the input field, the first section is always Recent Documents, which contains up to 20 recently viewed or edited items.
As the user types, results are grouped under clearly labeled sections:
Documents – Pages or notes within any Site.
Contacts – People you've added as a Contact.
Sites – Entire Sites that match the search term.
Comments – Previously made or referenced comments.
Latest Designs
Display Rules
Each Document entry includes:
The title in bold.
Its path hierarchy in smaller text below.
Sites appear with:
Avatar (or fallback initials)
Site name
Selection & Interaction
The first element should be selected and highlighted by default.
Arrow keys move the selection.
Pressing Enter inserts the selected item as a hyperlink.
Clicking an item performs the same action.
Highlighted results use a subtle background tint (green in current implementation).
Design Guidelines
Visual. Maintain readable contrast between title and path. Use clear separation between each result item.
Structure: Recents always appear at the top; dynamic sections follow as soon as the input filters results. Results should be scrollable if they exceed the view height. Sections must be clearly labeled.
Selection: Arrow keys navigate results; Enter inserts the selected item as a linked reference.
Performance: Filtering must be instant, even on large knowledge graphs.
Accessibility: Ensure keyboard support and screen reader compatibility.