docs: search UX improvements (Ask AI fallback + Enter key)#48
Merged
rachaelrenk merged 6 commits intomainfrom May 10, 2026
Merged
docs: search UX improvements (Ask AI fallback + Enter key)#48rachaelrenk merged 6 commits intomainfrom
rachaelrenk merged 6 commits 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.
|
hongyi-chen
reviewed
May 8, 2026
Collaborator
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!
Address HYC's review comments on PR #48: 1. Ask AI row: Replace centered button with a result-card-style row at the bottom of the search results area (GitBook pattern). Shows a chat icon + 'Ask AI' label + Enter kbd hint when selected. Appended to .pagefind-ui__results-area so it sits inline with results, not as a floating CTA. 2. Arrow key navigation: Add up/down arrow key support for moving through search results with a visible selection state (.warp-search-selected). Enter opens the selected item. Selection resets when results change. The Ask AI row is included in the navigable items as the last entry. CSS for both features lives in warp-components.css sections 18-19, using the same --warp-control-* chrome palette as the result cards. Co-Authored-By: Oz <oz-agent@warp.dev>
…rsistence Address four issues from testing feedback: 1. Full block highlight: Arrow-key selection now targets .pagefind-ui__result (the full result including title + description), not just the title row. CSS also highlights inner .pagefind-ui__result-title and .pagefind-ui__result-nested cards so there's no visual gap. 2. Scroll on wrap-around: Uses smooth scrollIntoView so wrapping from last to first item scrolls visibly back to the top. 3. Ask AI persistence: Pagefind re-renders the results area on every keystroke, which removed our injected Ask AI row. The observer now re-checks on every tick and re-injects if the element was removed from the DOM. 4. Navigation order: Doc results first (top to bottom), Ask AI last -- matching the visual order in the results area. Co-Authored-By: Oz <oz-agent@warp.dev>
Fix five issues from testing feedback: 1. Per-row highlight: Navigate per visible row (.pagefind-ui__result-title and .pagefind-ui__result-nested) instead of per link or per block. This matches the exact same elements the CSS hover rules target, so keyboard and mouse produce identical highlight granularity. 2. Ask AI first in nav order: Ask AI is visually at the top of the results area, so arrow-down from the search input now goes to Ask AI first, then to doc results. 3. One keypress per movement: Previously collected multiple links per result block, requiring several presses to cross a block. Now collects one item per visible row. 4. Mouse clears keyboard selection: Added mousemove listener on the dialog that clears the keyboard selection, so mouse hover always supersedes arrow-key highlight. 5. Enter navigates correctly: For result rows, clicks the link inside the row. For Ask AI, clicks the row directly. Co-Authored-By: Oz <oz-agent@warp.dev>
Two fixes: 1. Ask AI visible on open: Previously only appeared after typing. Now injects into #starlight__search (the empty-state container) when .pagefind-ui__results-area doesn't exist yet, so it shows as soon as the search dialog opens. 2. Scroll to top on wrap-around: When arrow-down wraps from the last result back to Ask AI (index 0), scroll the .dialog-frame container to scrollTop=0 so the search box and Ask AI are both visible. Previously only scrolled the selected item into view, leaving the search box hidden above. Co-Authored-By: Oz <oz-agent@warp.dev>
hongyi-chen
approved these changes
May 10, 2026
Collaborator
hongyi-chen
left a comment
hongyi-chen
left a comment
There was a problem hiding this comment.
Approving since this is a better experience than what is on prod currently. However, one thing we should fix is that if you type in a query, and hit enter to ask AI, I'd expect it to kickoff the AI conversation in the side panel with the question I entered into the search bar, rather than just open up the AI side panel with no prompt
When the user types a search query and clicks 'Ask AI' (or selects it via keyboard), the search input value is now passed to the Kapa chat and auto-submitted. Implementation: - CustomSidebar.astro: reads .pagefind-ui__search-input value and stores it on window.__warpAskAiQuery before closing the search dialog and opening Kapa. - KapaChatLauncher.tsx: openPanel() checks for the pending query, clears it from window, and calls submitQuery() after a short delay to let the panel mount. Co-Authored-By: Oz <oz-agent@warp.dev>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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