docs: search UX improvements (Ask AI fallback + Enter key)#48
docs: search UX improvements (Ask AI fallback + Enter key)#48rachaelrenk wants to merge 1 commit intomainfrom
Conversation
Add two search dialog enhancements via inline script in CustomSidebar.astro: 1. 'Ask AI instead' button: appears in the search dialog when Pagefind shows a no-results message. Clicking it closes the search dialog and opens the Kapa AI chat. Uses MutationObserver to detect Pagefind's state changes. Styled with the shared warp-control chrome palette. 2. Enter key navigation: pressing Enter when no specific result is focused navigates to the first search result. Pagefind's default UI doesn't handle this -- it only submits the search form. Note: breadcrumbs in search results (B4) is not addressed here -- it requires a Pagefind build-time indexing plugin to inject breadcrumb metadata, which is out of scope for this PR. Co-Authored-By: Oz <oz-agent@warp.dev>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Some design feedback: I actually prefer Gitbook’s search UI here
A couple things I think we could borrow:
- Make “Ask AI” feel like a search result, not a standalone button.
Instead of a centered button, I think it should look more like the inline result rows. It could be a sticky option near the bottom of the search dialog, similar to Gitbook’s “Ask AI assistant” treatment
-
Add clearer keyboard navigation states.
In Gitbook’s search results, you can move through results with arrow keys and clearly see which result is selected. Pressing Enter then opens that page. I think we could do the same, but instead of showing a chevron on the right, we could show/highlight an Enter icon to make the keyboard interaction more obvious -
We can also improve the styling of the search results, but we can handle that in a separate PR!
2 participants
Summary
Improve the search dialog UX with an "Ask AI instead" fallback for no-results and Enter key navigation to the first result.
Changes
src/components/CustomSidebar.astroAdded an inline script with two search dialog enhancements:
1. "Ask AI instead" button (B1 + B3)
.pagefind-ui__message--warp-control-*chrome palette to match the search pill and Ask button2. Enter key navigation (B5)
.pagefind-ui__result(avoids interfering with result-level keyboard nav)Not addressed
Breadcrumbs in search results (B4) -- Pagefind indexes page titles and content but not breadcrumb/hierarchy metadata. Adding breadcrumbs would require a build-time Pagefind indexing plugin to inject sidebar path data, which is out of scope for this PR. Noted in the Notion tracking item.
Fuzzy search (B2) -- Pagefind uses stemming and prefix matching but does not support fuzzy matching. This is a platform limitation. The "Ask AI instead" fallback partially mitigates this by giving users an alternative when search doesn't find what they need.
Context
Part of the docs v2 bug bash follow-up work. Tracks to Notion item: Migration FF: search UX improvements.
Co-Authored-By: Oz oz-agent@warp.dev