chore(trace ai queries): Search with free text directly (#96722)

- Fix extra commas being added on free search
- Fix "uncommitted" text from the search bar not showing up in the
Search Bar when switching to that view
- Automatically fires the search if the `Ask Seer` button is selected
from the free text view


https://github.com/user-attachments/assets/52afe1a7-2962-4a36-99e1-952249f537f3

Author: aayush-se

static/app/components/searchQueryBuilder/context.tsx

@@ -29,7 +29,9 @@ import useOrganization from 'sentry/utils/useOrganization';
 
 interface SearchQueryBuilderContextData {
   actionBarRef: React.RefObject<HTMLDivElement | null>;
+  autoSubmitSeer: boolean;
   committedQuery: string;
+  currentInputValue: string;
   disabled: boolean;
   disallowFreeText: boolean;
   disallowWildcard: boolean;
@@ -49,6 +51,8 @@ interface SearchQueryBuilderContextData {
   parsedQuery: ParseResult | null;
   query: string;
   searchSource: string;
+  setAutoSubmitSeer: (enabled: boolean) => void;
+  setCurrentInputValue: (value: string) => void;
   setDisplaySeerResults: (enabled: boolean) => void;
   size: 'small' | 'normal';
   wrapperRef: React.RefObject<HTMLDivElement | null>;
@@ -110,6 +114,8 @@ export function SearchQueryBuilderProvider({
   const {setupAcknowledgement} = useOrganizationSeerSetup({enabled: enableAISearch});
 
   const [displaySeerResults, setDisplaySeerResults] = useState(false);
+  const [autoSubmitSeer, setAutoSubmitSeer] = useState(false);
+  const [currentInputValue, setCurrentInputValue] = useState('');
 
   const {state, dispatch} = useQueryBuilderState({
     initialQuery,
@@ -193,17 +199,22 @@ export function SearchQueryBuilderProvider({
       portalTarget,
       displaySeerResults,
       setDisplaySeerResults,
+      autoSubmitSeer,
+      setAutoSubmitSeer,
       replaceRawSearchKeys,
       matchKeySuggestions,
       filterKeyAliases,
       gaveSeerConsent: setupAcknowledgement.orgHasAcknowledged,
+      currentInputValue,
+      setCurrentInputValue,
     };
   }, [
     disabled,
     disallowFreeText,
     disallowWildcard,
     dispatch,
     displaySeerResults,
+    autoSubmitSeer,
     enableAISearch,
     filterKeyAliases,
     filterKeyMenuWidth,
@@ -224,6 +235,8 @@ export function SearchQueryBuilderProvider({
     stableFilterKeys,
     stableGetSuggestedFilterKey,
     state,
+    currentInputValue,
+    setCurrentInputValue,
   ]);
 
   return (

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

@@ -168,8 +168,10 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
     filterKeys,
     getFieldDefinition,
     setDisplaySeerResults,
+    setAutoSubmitSeer,
     enableAISearch,
     gaveSeerConsent,
+    currentInputValue,
   } = useSearchQueryBuilder();
   const {sectionedItems} = useFilterKeyItems();
   const recentFilters = useRecentSearchFilters();
@@ -391,6 +393,12 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
           action: 'opened',
         });
         setDisplaySeerResults(true);
+
+        if (currentInputValue?.trim()) {
+          setAutoSubmitSeer(true);
+        } else {
+          setAutoSubmitSeer(false);
+        }
         return;
       }
 
@@ -403,7 +411,13 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
         return;
       }
     },
-    [organization, seerAcknowledgeMutate, setDisplaySeerResults]
+    [
+      organization,
+      seerAcknowledgeMutate,
+      setDisplaySeerResults,
+      setAutoSubmitSeer,
+      currentInputValue,
+    ]
   );
 
   return {

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

@@ -253,11 +253,6 @@ function SearchQueryBuilderInputInternal({
     setSelectionIndex(inputRef.current?.selectionStart ?? 0);
   }, []);
 
-  const resetInputValue = useCallback(() => {
-    setInputValue(trimmedTokenValue);
-    updateSelectionIndex();
-  }, [trimmedTokenValue, updateSelectionIndex]);
-
   const filterValue = getWordAtCursorPosition(inputValue, selectionIndex);
 
   const {
@@ -270,8 +265,15 @@ function SearchQueryBuilderInputInternal({
     placeholder,
     searchSource,
     recentSearches,
+    setCurrentInputValue,
   } = useSearchQueryBuilder();
 
+  const resetInputValue = useCallback(() => {
+    setInputValue(trimmedTokenValue);
+    setCurrentInputValue(trimmedTokenValue);
+    updateSelectionIndex();
+  }, [trimmedTokenValue, updateSelectionIndex, setCurrentInputValue]);
+
   const {customMenu, sectionItems, maxOptions, onKeyDownCapture, handleOptionSelected} =
     useFilterKeyListBox({
       filterValue,
@@ -617,6 +619,7 @@ function SearchQueryBuilderInputInternal({
           }
 
           setInputValue(e.target.value);
+          setCurrentInputValue(e.target.value);
           setSelectionIndex(e.target.selectionStart ?? 0);
         }}
         onKeyDown={onKeyDown}

static/app/views/explore/components/seerComboBox/seerComboBox.tsx

@@ -106,7 +106,8 @@ export function SeerComboBox({initialQuery, ...props}: SeerComboBoxProps) {
   );
 
   const openForm = useFeedbackForm();
-  const {setDisplaySeerResults} = useSearchQueryBuilder();
+  const {setDisplaySeerResults, autoSubmitSeer, setAutoSubmitSeer} =
+    useSearchQueryBuilder();
   const {rawResult, submitQuery, isPending} = useSeerSearch();
   const applySeerSearchQuery = useApplySeerSearchQuery();
   const organization = useOrganization();
@@ -321,6 +322,17 @@ export function SeerComboBox({initialQuery, ...props}: SeerComboBoxProps) {
     }
   }, [state]);
 
+  useLayoutEffect(() => {
+    if (autoSubmitSeer && searchQuery.trim()) {
+      trackAnalytics('trace.explorer.ai_query_submitted', {
+        organization,
+        natural_language_query: searchQuery.trim(),
+      });
+      submitQuery(searchQuery.trim());
+      setAutoSubmitSeer(false);
+    }
+  }, [autoSubmitSeer, searchQuery, organization, submitQuery, setAutoSubmitSeer]);
+
   return (
     <Wrapper ref={containerRef} isDropdownOpen={state.isOpen}>
       <PositionedSearchIconContainer>

static/app/views/explore/spans/spansTab.tsx

@@ -173,10 +173,21 @@ function SpansSearchBar({
 }: {
   eapSpanSearchQueryBuilderProps: EAPSpanSearchQueryBuilderProps;
 }) {
-  const {displaySeerResults, query} = useSearchQueryBuilder();
+  const {displaySeerResults, query, currentInputValue} = useSearchQueryBuilder();
+
+  const initialSeerQuery = (() => {
+    const committedQuery = query.trim();
+    const inputValue = currentInputValue.trim();
+
+    if (!inputValue) return committedQuery;
+
+    if (!committedQuery) return inputValue;
+
+    return `${committedQuery} ${inputValue}`;
+  })();
 
   return displaySeerResults ? (
-    <SeerComboBox initialQuery={query} />
+    <SeerComboBox initialQuery={initialSeerQuery} />
   ) : (
     <EAPSpanSearchQueryBuilder autoFocus {...eapSpanSearchQueryBuilderProps} />
   );

static/app/views/explore/utils.tsx

@@ -618,18 +618,26 @@ export function formatQueryToNaturalLanguage(query: string): string {
   return formattedTokens.reduce((result, token, index) => {
     if (index === 0) return token;
 
-    const prevToken = formattedTokens[index - 1];
-    if (!prevToken) return `${result}, ${token}`;
+    const currentOriginalToken = tokens[index] || '';
+    const prevOriginalToken = tokens[index - 1] || '';
 
     const isLogicalOp = token.toUpperCase() === 'AND' || token.toUpperCase() === 'OR';
     const prevIsLogicalOp =
-      prevToken.toUpperCase() === 'AND' || prevToken.toUpperCase() === 'OR';
+      formattedTokens[index - 1]?.toUpperCase() === 'AND' ||
+      formattedTokens[index - 1]?.toUpperCase() === 'OR';
 
     if (isLogicalOp || prevIsLogicalOp) {
       return `${result} ${token}`;
     }
 
-    return `${result}, ${token}`;
+    const isCurrentFilter = /[:>=<!]/.test(currentOriginalToken);
+    const isPrevFilter = /[:>=<!]/.test(prevOriginalToken);
+
+    if (isCurrentFilter && isPrevFilter) {
+      return `${result}, ${token}`;
+    }
+
+    return `${result} ${token}`;
   }, '');
 }