Add custom Ask AI result option to Kapa search widget #3581
+159
−0
Conversation
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
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=80&v=4){kind=small}
- Add onSearchResultsCompleted event handler to inject custom 'Ask AI' result
- Custom result appears as first option in search results with user's query
- Clicking opens AskAI modal with search query pre-filled
- Uses tabindex='-1' to prevent Enter key triggering (only explicit click works)
- Accesses Kapa widget via Shadow DOM using getElementById('kapa-widget-container')
- Replaces built-in data-search-show-ask-ai-cta to avoid unwanted Enter behavior
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
- Replace SVG info icon with ✨ sparkles emoji (U+2728) - Auto-execute query when custom result is clicked - Maintain focus on textarea input after query execution - Add multiple fallback selectors for submit button detection - Query now executes automatically instead of just pre-filling
- Target mantine-ActionIcon-root with data-variant='filled' as primary selector - Matches exact button class provided by user feedback - Enables proper auto-execution when clicking custom Ask AI result
- Focus search input field (mantine-TextInput-input) when Kapa modal opens - 100ms delay ensures modal DOM is ready before focusing - Enhances keyboard accessibility for cmd+K shortcut users
- Add border-radius and proper hover/focus styling to match other results - Enable keyboard navigation with tabindex='0' - Add Enter/Space key activation support - Include focus outline with box shadow for accessibility - Enhanced hover effects with subtle box shadow
- Change element from div to anchor tag for proper keyboard navigation - Use border instead of box-shadow for rounded focus outline - Change default background from gray to transparent - Refactor click handler to support both click and keyboard activation
- Enables arrow key navigation to custom Ask AI result - Allows Enter/Space key activation when focused - Focus event listeners will apply rounded blue border outline
- Use MutationObserver to watch tabindex changes instead of focus events - Apply rounded focus styling when tabindex='0' (Kapa's focus indicator) - Add document-level keydown listener for Enter/Space activation - Maintain rounded corners (border-radius: 8px) in focus outline - Ensure proper cleanup of event listeners and observers
- Add immediate tabindex check to apply focus styles on initial render - Move keydown listener from document to Shadow DOM for proper event capture - Ensures focus styling appears when element has tabindex='0' - Fixes Enter key activation inside Shadow DOM
- Add e.target check to keydown handler to only activate when Space/Enter is pressed directly on the custom result element - Prevents unintended activation when typing in search input field
…git-manager.devin.ai/proxy/github.com/statsig-io/docs into devin/1759268459-kapa-custom-ask-ai-result
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Adds a custom "Ask AI: {query}" result option that appears as the first item in Kapa search results. When clicked, it opens the AskAI modal with the user's search query pre-filled. This replaces the built-in
data-search-show-ask-ai-ctaoption to prevent unwanted Enter key triggering.Key behaviors:
tabindex="-1"so Enter key skips over it (only explicit clicks work)Implementation Details
onSearchResultsCompletedevent to inject custom DOM elementgetElementById('kapa-widget-container')Human Review Checklist
Standard Items:
Questions?
This PR implements the custom Ask AI search result requested by @xhuang-statsig in Devin session.
The main tradeoff is implementation fragility (Shadow DOM manipulation) vs. user experience (avoiding unwanted Enter key behavior). The current approach prioritizes UX as requested.