chore(trace ai queries): Seer button keyboard support (#93305)

- Support selecting the "Ask Seer" button in the dropdown with the arrow
keys
- Button only appears if Generative AI features are turned on in
settings


https://github.com/user-attachments/assets/8456529f-30d9-4c04-ae81-80e8a380648a

Author: aayush-se

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx

@@ -34,6 +34,8 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePrevious from 'sentry/utils/usePrevious';
 import {useTraceExploreAiQueryContext} from 'sentry/views/explore/contexts/traceExploreAiQueryContext';
 
+const ASK_SEER_ITEM_KEY = 'ask_seer';
+
 interface FilterKeyListBoxProps<T> extends CustomComboboxMenuProps<T> {
   recentFilters: Array<TokenResult<Token.FILTER>>;
   sections: Section[];
@@ -138,6 +140,39 @@ function RecentSearchFilterOption<T>({
   );
 }
 
+function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
+  const ref = useRef<HTMLLIElement>(null);
+  const {setDisplaySeerResults} = useSearchQueryBuilder();
+  const organization = useOrganization();
+
+  const {optionProps, labelProps, isFocused, isPressed} = useOption(
+    {
+      key: ASK_SEER_ITEM_KEY,
+      'aria-label': 'Ask Seer',
+      shouldFocusOnHover: true,
+      shouldSelectOnPressUp: true,
+    },
+    state,
+    ref
+  );
+
+  const handleClick = () => {
+    trackAnalytics('trace.explorer.ai_query_interface', {
+      organization,
+      action: 'opened',
+    });
+    setDisplaySeerResults(true);
+  };
+
+  return (
+    <AskSeerListItem ref={ref} onClick={handleClick} {...optionProps}>
+      <InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
+      <IconSeer />
+      <AskSeerLabel {...labelProps}>{t('Ask Seer')}</AskSeerLabel>
+    </AskSeerListItem>
+  );
+}
+
 function useHighlightFirstOptionOnSectionChange({
   state,
   selectedSection,
@@ -215,9 +250,12 @@ function FilterKeyMenuContent<T extends SelectOptionOrSectionWithKey<string>>({
   fullWidth,
   sections,
 }: FilterKeyMenuContentProps<T>) {
-  const {filterKeys, setDisplaySeerResults} = useSearchQueryBuilder();
-  const focusedItem = state.collection.getItem(state.selectionManager.focusedKey ?? '')
-    ?.props?.value as string | undefined;
+  const {filterKeys} = useSearchQueryBuilder();
+  const focusedItem = state.selectionManager.focusedKey
+    ? (state.collection.getItem(state.selectionManager.focusedKey)?.props?.value as
+        | string
+        | undefined)
+    : undefined;
   const focusedKey = focusedItem ? filterKeys[focusedItem] : null;
   const showRecentFilters = recentFilters.length > 0;
   const showDetailsPane = fullWidth && selectedSection !== RECENT_SEARCH_CATEGORY_VALUE;
@@ -228,28 +266,17 @@ function FilterKeyMenuContent<T extends SelectOptionOrSectionWithKey<string>>({
   const areAiFeaturesAllowed =
     !organization?.hideAiFeatures && organization.features.includes('gen-ai-features');
 
+  const showAskSeerOption = traceExploreAiQueryContext && areAiFeaturesAllowed;
+
   return (
     <Fragment>
-      <Feature features="organizations:gen-ai-explore-traces">
-        {traceExploreAiQueryContext && areAiFeaturesAllowed ? (
-          <SeerButtonWrapper>
-            <SeerFullWidthButton
-              size="md"
-              icon={<IconSeer />}
-              onClick={() => {
-                trackAnalytics('trace.explorer.ai_query_interface', {
-                  organization,
-                  action: 'opened',
-                });
-                setDisplaySeerResults(true);
-              }}
-              borderless
-            >
-              {t('Ask Seer')}
-            </SeerFullWidthButton>
-          </SeerButtonWrapper>
-        ) : null}
-      </Feature>
+      {showAskSeerOption ? (
+        <Feature features="organizations:gen-ai-explore-traces">
+          <AskSeerPane>
+            <AskSeerOption state={state} />
+          </AskSeerPane>
+        </Feature>
+      ) : null}
       {showRecentFilters ? (
         <RecentFiltersPane>
           {recentFilters.map(filter => (
@@ -332,19 +359,23 @@ export function FilterKeyListBox<T extends SelectOptionOrSectionWithKey<string>>
   const areAiFeaturesAllowed =
     !organization?.hideAiFeatures && organization.features.includes('gen-ai-features');
 
-  // Add recent filters to hiddenOptions so they don't show up the ListBox component.
-  // We render recent filters manually in the RecentFiltersPane component.
-  const hiddenOptionsWithRecentsAdded = useMemo<Set<SelectKey>>(() => {
-    return new Set([
+  const hiddenOptionsWithRecentsAndAskSeerAdded = useMemo<Set<SelectKey>>(() => {
+    const baseHidden = [
       ...hiddenOptions,
       ...recentFilters.map(filter => createRecentFilterOptionKey(getKeyName(filter.key))),
-    ]);
-  }, [hiddenOptions, recentFilters]);
+    ];
+
+    if (traceExploreAiQueryContext && areAiFeaturesAllowed) {
+      baseHidden.push(ASK_SEER_ITEM_KEY);
+    }
+
+    return new Set(baseHidden);
+  }, [hiddenOptions, recentFilters, traceExploreAiQueryContext, areAiFeaturesAllowed]);
 
   useHighlightFirstOptionOnSectionChange({
     state,
     selectedSection,
-    hiddenOptions: hiddenOptionsWithRecentsAdded,
+    hiddenOptions: hiddenOptionsWithRecentsAndAskSeerAdded,
     sections,
     isOpen,
   });
@@ -389,7 +420,7 @@ export function FilterKeyListBox<T extends SelectOptionOrSectionWithKey<string>>
           {isOpen ? (
             <FilterKeyMenuContent
               fullWidth={fullWidth}
-              hiddenOptions={hiddenOptionsWithRecentsAdded}
+              hiddenOptions={hiddenOptionsWithRecentsAndAskSeerAdded}
               listBoxProps={listBoxProps}
               listBoxRef={listBoxRef}
               recentFilters={recentFilters}
@@ -415,7 +446,7 @@ export function FilterKeyListBox<T extends SelectOptionOrSectionWithKey<string>>
         {isOpen ? (
           <FilterKeyMenuContent
             fullWidth={fullWidth}
-            hiddenOptions={hiddenOptionsWithRecentsAdded}
+            hiddenOptions={hiddenOptionsWithRecentsAndAskSeerAdded}
             listBoxProps={listBoxProps}
             listBoxRef={listBoxRef}
             recentFilters={recentFilters}
@@ -602,7 +633,7 @@ const EmptyState = styled('div')`
   }
 `;
 
-const SeerButtonWrapper = styled('div')`
+const AskSeerPane = styled('div')`
   grid-area: seer;
   display: flex;
   align-items: center;
@@ -613,8 +644,13 @@ const SeerButtonWrapper = styled('div')`
   width: 100%;
 `;
 
-const SeerFullWidthButton = styled(Button)`
+const AskSeerListItem = styled('li')`
+  position: relative;
+  display: flex;
+  align-items: center;
   width: 100%;
+  padding: ${space(1)} ${space(1.5)};
+  background: transparent;
   border-radius: 0;
   background-color: none;
   box-shadow: none;
@@ -623,14 +659,24 @@ const SeerFullWidthButton = styled(Button)`
   font-weight: ${p => p.theme.fontWeight.bold};
   text-align: left;
   justify-content: flex-start;
-  padding: ${space(1)} ${space(2)};
-  display: flex;
-  align-items: center;
   gap: ${space(1)};
+  list-style: none;
+  margin: 0;
+
   &:hover,
   &:focus {
     background-color: ${p => p.theme.purple100};
     color: ${p => p.theme.purple400};
-    box-shadow: none;
   }
+
+  &[aria-selected='true'] {
+    background: ${p => p.theme.purple100};
+    color: ${p => p.theme.purple400};
+  }
+`;
+const AskSeerLabel = styled('span')`
+  ${p => p.theme.overflowEllipsis};
+  color: ${p => p.theme.purple400};
+  font-size: ${p => p.theme.fontSize.md};
+  font-weight: ${p => p.theme.fontWeight.bold};
 `;

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/types.tsx

@@ -47,6 +47,12 @@ export interface RecentQueryItem extends SelectOptionWithKey<string> {
   value: string;
 }
 
+export interface AskSeerItem extends SelectOptionWithKey<string> {
+  hideCheck: boolean;
+  type: 'ask-seer';
+  value: string;
+}
+
 export type SearchKeyItem =
   | KeySectionItem
   | KeyItem
@@ -61,7 +67,8 @@ export type FilterKeyItem =
   | RecentQueryItem
   | RawSearchItem
   | FilterValueItem
-  | RawSearchFilterValueItem;
+  | RawSearchFilterValueItem
+  | AskSeerItem;
 
 export type Section = {
   label: ReactNode;

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/useFilterKeyListBox.tsx

@@ -16,6 +16,7 @@ import {useRecentSearchFilters} from 'sentry/components/searchQueryBuilder/token
 import {
   ALL_CATEGORY,
   ALL_CATEGORY_VALUE,
+  createAskSeerItem,
   createRecentFilterItem,
   createRecentFilterOptionKey,
   createRecentQueryItem,
@@ -28,8 +29,11 @@ import type {FieldDefinitionGetter} from 'sentry/components/searchQueryBuilder/t
 import type {Token, TokenResult} from 'sentry/components/searchSyntax/parser';
 import {getKeyName} from 'sentry/components/searchSyntax/utils';
 import type {RecentSearch, TagCollection} from 'sentry/types/group';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import clamp from 'sentry/utils/number/clamp';
+import useOrganization from 'sentry/utils/useOrganization';
 import usePrevious from 'sentry/utils/usePrevious';
+import {useTraceExploreAiQueryContext} from 'sentry/views/explore/contexts/traceExploreAiQueryContext';
 
 const MAX_OPTIONS_WITHOUT_SEARCH = 100;
 const MAX_OPTIONS_WITH_SEARCH = 8;
@@ -159,19 +163,28 @@ function useFilterKeySections({
   return {sections, selectedSection, setSelectedSection};
 }
 export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
-  const {filterKeys, getFieldDefinition} = useSearchQueryBuilder();
+  const {filterKeys, getFieldDefinition, setDisplaySeerResults} = useSearchQueryBuilder();
   const {sectionedItems} = useFilterKeyItems();
   const recentFilters = useRecentSearchFilters();
   const {data: recentSearches} = useRecentSearches();
   const {sections, selectedSection, setSelectedSection} = useFilterKeySections({
     recentSearches,
   });
 
+  const organization = useOrganization();
+  const traceExploreAiQueryContext = useTraceExploreAiQueryContext();
+  const areAiFeaturesAllowed =
+    !organization?.hideAiFeatures && organization.features.includes('gen-ai-features');
+
   const filterKeyMenuItems = useMemo(() => {
     const recentFilterItems = makeRecentFilterItems({recentFilters});
 
+    const askSeerItem =
+      traceExploreAiQueryContext && areAiFeaturesAllowed ? [createAskSeerItem()] : [];
+
     if (selectedSection === RECENT_SEARCH_CATEGORY_VALUE) {
       return [
+        ...askSeerItem,
         ...recentFilterItems,
         ...makeRecentSearchQueryItems({
           recentSearches,
@@ -192,14 +205,16 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
       return true;
     });
 
-    return [...recentFilterItems, ...filteredByCategory];
+    return [...askSeerItem, ...recentFilterItems, ...filteredByCategory];
   }, [
     filterKeys,
     getFieldDefinition,
     recentFilters,
     recentSearches,
     sectionedItems,
     selectedSection,
+    traceExploreAiQueryContext,
+    areAiFeaturesAllowed,
   ]);
 
   const customMenu: CustomComboboxMenu<FilterKeyItem> = props => {
@@ -358,11 +373,26 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
     [handleArrowUpDown, handleCycleRecentFilterKeys, handleCycleSections]
   );
 
+  const handleOptionSelected = useCallback(
+    (option: FilterKeyItem) => {
+      if (option.type === 'ask-seer') {
+        trackAnalytics('trace.explorer.ai_query_interface', {
+          organization,
+          action: 'opened',
+        });
+        setDisplaySeerResults(true);
+        return;
+      }
+    },
+    [organization, setDisplaySeerResults]
+  );
+
   return {
     sectionItems: filterKeyMenuItems,
     customMenu: shouldShowExplorationMenu ? customMenu : undefined,
     maxOptions:
       filterValue.length === 0 ? MAX_OPTIONS_WITHOUT_SEARCH : MAX_OPTIONS_WITH_SEARCH,
     onKeyDownCapture: shouldShowExplorationMenu ? onKeyDownCapture : undefined,
+    handleOptionSelected,
   };
 }

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/utils.tsx

@@ -4,6 +4,7 @@ import {getEscapedKey} from 'sentry/components/core/compactSelect/utils';
 import {FormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery';
 import {KeyDescription} from 'sentry/components/searchQueryBuilder/tokens/filterKeyListBox/keyDescription';
 import type {
+  AskSeerItem,
   FilterValueItem,
   KeyItem,
   KeySectionItem,
@@ -198,6 +199,17 @@ export function createRecentQueryItem({
   };
 }
 
+export function createAskSeerItem(): AskSeerItem {
+  return {
+    key: getEscapedKey('ask_seer'),
+    value: 'ask_seer',
+    textValue: 'Ask Seer',
+    type: 'ask-seer' as const,
+    label: t('Ask Seer'),
+    hideCheck: true,
+  };
+}
+
 const SearchItemLabel = styled('div')`
   color: ${p => p.theme.subText};
   white-space: nowrap;

static/app/components/searchQueryBuilder/tokens/freeText.tsx

@@ -273,9 +273,10 @@ function SearchQueryBuilderInputInternal({
     recentSearches,
   } = useSearchQueryBuilder();
 
-  const {customMenu, sectionItems, maxOptions, onKeyDownCapture} = useFilterKeyListBox({
-    filterValue,
-  });
+  const {customMenu, sectionItems, maxOptions, onKeyDownCapture, handleOptionSelected} =
+    useFilterKeyListBox({
+      filterValue,
+    });
   const sortedFilteredItems = useSortedFilterKeyItems({
     filterValue,
     inputValue,
@@ -392,6 +393,13 @@ function SearchQueryBuilderInputInternal({
         items={items}
         placeholder={query === '' ? placeholder : undefined}
         onOptionSelected={option => {
+          if (handleOptionSelected) {
+            handleOptionSelected(option);
+            if (option.type === 'ask-seer') {
+              return;
+            }
+          }
+
           if (option.type === 'recent-query') {
             dispatch({
               type: 'UPDATE_QUERY',