feat(search-bar): Add consent flow to Ask Seer

static/app/components/events/autofix/useOrganizationSeerSetup.tsx

@@ -17,7 +17,7 @@ interface OrganizationSeerSetupResponse {
   };
 }
 
-function makeOrganizationSeerSetupQueryKey(orgSlug: string): ApiQueryKey {
+export function makeOrganizationSeerSetupQueryKey(orgSlug: string): ApiQueryKey {
   return [`/organizations/${orgSlug}/seer/setup-check/`];
 }
 

static/app/components/events/autofix/useSeerAcknowledgeMutation.tsx

@@ -0,0 +1,31 @@
+import {promptsUpdate} from 'sentry/actionCreators/prompts';
+import {useMutation, useQueryClient} from 'sentry/utils/queryClient';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export const setupCheckQueryKey = (orgSlug: string) =>
+  `/organizations/${orgSlug}/seer/setup-check/`;
+
+export function useSeerAcknowledgeMutation() {
+  const api = useApi();
+  const queryClient = useQueryClient();
+  const organization = useOrganization();
+
+  const {mutate, isPending, isError} = useMutation({
+    mutationKey: [setupCheckQueryKey(organization.slug)],
+    mutationFn: () => {
+      return promptsUpdate(api, {
+        organization,
+        feature: 'seer_autofix_setup_acknowledged',
+        status: 'dismissed',
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [setupCheckQueryKey(organization.slug)],
+      });
+    },
+  });
+
+  return {mutate, isPending, isError};
+}

static/app/components/searchQueryBuilder/askSeer.tsx

@@ -1,10 +1,159 @@
+import {useRef, useState} from 'react';
 import styled from '@emotion/styled';
+import {useOption} from '@react-aria/listbox';
+import type {ComboBoxState} from '@react-stately/combobox';
 
-import {space} from 'sentry/styles/space';
+import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
+import {makeOrganizationSeerSetupQueryKey} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
+import {setupCheckQueryKey} from 'sentry/components/events/autofix/useSeerAcknowledgeMutation';
+import ExternalLink from 'sentry/components/links/externalLink';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
+import {IconSeer} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import {useIsFetching, useIsMutating} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
 
 export const ASK_SEER_ITEM_KEY = 'ask_seer';
+export const ASK_SEER_CONSENT_ITEM_KEY = 'ask_seer_consent';
 
-export const AskSeerPane = styled('div')`
+function AskSeerConsentOption<T>({state}: {state: ComboBoxState<T>}) {
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [optionDisableOverride, setOptionDisableOverride] = useState(false);
+
+  const {optionProps, labelProps, isFocused, isPressed} = useOption(
+    {
+      key: ASK_SEER_CONSENT_ITEM_KEY,
+      'aria-label': 'Enable Gen AI',
+      shouldFocusOnHover: true,
+      shouldSelectOnPressUp: true,
+      isDisabled: optionDisableOverride,
+    },
+    state,
+    itemRef
+  );
+
+  return (
+    <AskSeerListItem ref={itemRef} {...optionProps} justifyContent="space-between">
+      <InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
+      <AskSeerConsentLabelWrapper>
+        <IconSeer />
+        <AskSeerLabel {...labelProps}>
+          {t('Enable Gen AI')} <FeatureBadge type="beta" />
+        </AskSeerLabel>
+      </AskSeerConsentLabelWrapper>
+      <SeerConsentText>
+        {tct(
+          'Query assistant requires Generative AI which is subject to our [dataProcessingPolicy:data processing policy].',
+          {
+            dataProcessingPolicy: (
+              <TooltipSubExternalLink
+                onMouseOver={() => setOptionDisableOverride(true)}
+                onMouseOut={() => setOptionDisableOverride(false)}
+                href="https://docs.sentry.io/product/security/ai-ml-policy/#use-of-identifying-data-for-generative-ai-features"
+              />
+            ),
+          }
+        )}
+      </SeerConsentText>
+    </AskSeerListItem>
+  );
+}
+
+function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
+  const ref = useRef<HTMLDivElement>(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,
+      isDisabled: false,
+    },
+    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')} <FeatureBadge type="beta" />
+      </AskSeerLabel>
+    </AskSeerListItem>
+  );
+}
+
+export function AskSeer<T>({state}: {state: ComboBoxState<T>}) {
+  const organization = useOrganization();
+  const {gaveSeerConsent} = useSearchQueryBuilder();
+  const isMutating = useIsMutating({
+    mutationKey: [setupCheckQueryKey(organization.slug)],
+  });
+
+  const isPendingSetupCheck =
+    useIsFetching({
+      queryKey: makeOrganizationSeerSetupQueryKey(organization.slug),
+    }) > 0;
+
+  if (isPendingSetupCheck || isMutating) {
+    return (
+      <AskSeerPane>
+        <AskSeerListItem>
+          <AskSeerLabel width="auto">{t('Loading Seer')}</AskSeerLabel>
+          <LoadingIndicator size={16} style={{margin: 0}} />
+        </AskSeerListItem>
+      </AskSeerPane>
+    );
+  }
+
+  if (gaveSeerConsent) {
+    return (
+      <AskSeerPane>
+        <AskSeerOption state={state} />
+      </AskSeerPane>
+    );
+  }
+
+  return (
+    <AskSeerPane>
+      <AskSeerConsentOption state={state} />
+    </AskSeerPane>
+  );
+}
+
+const TooltipSubExternalLink = styled(ExternalLink)`
+  color: ${p => p.theme.purple400};
+
+  :hover {
+    color: ${p => p.theme.purple400};
+    text-decoration: underline;
+  }
+`;
+
+const SeerConsentText = styled('p')`
+  color: ${p => p.theme.subText};
+  font-size: ${p => p.theme.fontSize.xs};
+  font-weight: ${p => p.theme.fontWeight.normal};
+  margin: 0;
+  background-color: none;
+`;
+
+const AskSeerPane = styled('div')`
   grid-area: seer;
   display: flex;
   align-items: center;
@@ -15,12 +164,12 @@ export const AskSeerPane = styled('div')`
   width: 100%;
 `;
 
-export const AskSeerListItem = styled('div')`
+const AskSeerListItem = styled('div')<{justifyContent?: 'flex-start' | 'space-between'}>`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  padding: ${space(1)} ${space(1.5)};
+  padding: ${p => p.theme.space.md} ${p => p.theme.space.lg};
   background: transparent;
   border-radius: 0;
   background-color: none;
@@ -29,8 +178,8 @@ export const AskSeerListItem = styled('div')`
   font-size: ${p => p.theme.fontSize.md};
   font-weight: ${p => p.theme.fontWeight.bold};
   text-align: left;
-  justify-content: flex-start;
-  gap: ${space(1)};
+  justify-content: ${p => p.justifyContent ?? 'flex-start'};
+  gap: ${p => p.theme.space.md};
   list-style: none;
   margin: 0;
 
@@ -45,12 +194,19 @@ export const AskSeerListItem = styled('div')`
   }
 `;
 
-export const AskSeerLabel = styled('span')`
+const AskSeerLabel = styled('span')<{width?: 'auto'}>`
   ${p => p.theme.overflowEllipsis};
   color: ${p => p.theme.purple400};
   font-size: ${p => p.theme.fontSize.md};
   font-weight: ${p => p.theme.fontWeight.bold};
   display: flex;
   align-items: center;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space.md};
+  width: ${p => p.width};
+`;
+
+const AskSeerConsentLabelWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${p => p.theme.space.md};
 `;

static/app/components/searchQueryBuilder/context.tsx

@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react';
 
+import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import type {SearchQueryBuilderProps} from 'sentry/components/searchQueryBuilder';
 import {useHandleSearch} from 'sentry/components/searchQueryBuilder/hooks/useHandleSearch';
 import {
@@ -39,7 +40,7 @@ interface SearchQueryBuilderContextData {
   filterKeySections: FilterKeySection[];
   filterKeys: TagCollection;
   focusOverride: FocusOverride | null;
-  genAIConsent: boolean;
+  gaveSeerConsent: boolean;
   getFieldDefinition: (key: string, kind?: FieldKind) => FieldDefinition | null;
   getSuggestedFilterKey: (key: string) => string | null;
   getTagValues: (tag: Tag, query: string) => Promise<string[]>;
@@ -81,7 +82,7 @@ export function SearchQueryBuilderProvider({
   disallowFreeText,
   disallowUnsupportedFilters,
   disallowWildcard,
-  enableAISearch,
+  enableAISearch: enableAISearchProp,
   invalidMessages,
   initialQuery,
   fieldDefinitionGetter = getFieldDefinition,
@@ -101,9 +102,12 @@ export function SearchQueryBuilderProvider({
 }: SearchQueryBuilderProps & {children: React.ReactNode}) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const actionBarRef = useRef<HTMLDivElement>(null);
-  const [displaySeerResults, setDisplaySeerResults] = useState(false);
   const organization = useOrganization();
-  const genAIConsent = organization?.genAIConsent ?? false;
+
+  const enableAISearch = Boolean(enableAISearchProp) && !organization.hideAiFeatures;
+  const {setupAcknowledgement} = useOrganizationSeerSetup({enabled: enableAISearch});
+
+  const [displaySeerResults, setDisplaySeerResults] = useState(false);
 
   const {state, dispatch} = useQueryBuilderState({
     initialQuery,
@@ -167,8 +171,7 @@ export function SearchQueryBuilderProvider({
       disabled,
       disallowFreeText: Boolean(disallowFreeText),
       disallowWildcard: Boolean(disallowWildcard),
-      enableAISearch: Boolean(enableAISearch),
-      genAIConsent,
+      enableAISearch,
       parseQuery,
       parsedQuery,
       filterKeySections: filterKeySections ?? [],
@@ -190,6 +193,7 @@ export function SearchQueryBuilderProvider({
       setDisplaySeerResults,
       replaceRawSearchKeys,
       filterKeyAliases,
+      gaveSeerConsent: setupAcknowledgement.orgHasAcknowledged,
     };
   }, [
     disabled,
@@ -201,7 +205,6 @@ export function SearchQueryBuilderProvider({
     filterKeyAliases,
     filterKeyMenuWidth,
     filterKeySections,
-    genAIConsent,
     getTagValues,
     handleSearch,
     parseQuery,
@@ -211,6 +214,7 @@ export function SearchQueryBuilderProvider({
     recentSearches,
     replaceRawSearchKeys,
     searchSource,
+    setupAcknowledgement.orgHasAcknowledged,
     size,
     stableFieldDefinitionGetter,
     stableFilterKeys,