chore(trace ai queries): Beta badge and styles (#95303)

- Add beta badges
- Update CTA
- Fix double highlighting button on hover when already selected

<img width="562" height="477" alt="image"
src="https://github.com/user-attachments/assets/9fa4dab0-86d6-47b4-ad51-534e0bfd45e6"
/>
<img width="256" height="160" alt="image"
src="https://github.com/user-attachments/assets/b55068a1-5257-4562-81ad-2a186b24a070"
/>

<img width="366" height="195" alt="image"
src="https://github.com/user-attachments/assets/a3a66811-73a1-4835-9c27-964c22aba5b7"
/>

Author: aayush-se

static/app/components/searchQueryBuilder/askSeer.tsx

@@ -37,8 +37,6 @@ export const AskSeerListItem = styled('div')`
   &:hover,
   &:focus {
     cursor: pointer;
-    background-color: ${p => p.theme.purple100};
-    color: ${p => p.theme.purple400};
   }
 
   &[aria-selected='true'] {
@@ -52,4 +50,7 @@ export const AskSeerLabel = styled('span')`
   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)};
 `;

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -957,7 +957,7 @@ describe('SearchQueryBuilder', function () {
       await userEvent.click(getLastInput());
       await userEvent.type(screen.getByRole('combobox'), 'some free text');
 
-      expect(screen.getByRole('option', {name: 'Ask Seer'})).toBeInTheDocument();
+      expect(screen.getByRole('option', {name: /Ask Seer/i})).toBeInTheDocument();
     });
 
     it('can add parens by typing', async function () {

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

@@ -17,6 +17,7 @@ import {type ComboBoxState, useComboBoxState} from '@react-stately/combobox';
 import type {CollectionChildren, Key, KeyboardEvent} from '@react-types/shared';
 
 import Feature from 'sentry/components/acl/feature';
+import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
 import {ListBox} from 'sentry/components/core/compactSelect/listBox';
 import type {
   SelectKey,
@@ -287,7 +288,9 @@ function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
     <AskSeerListItem ref={ref} onClick={handleClick} {...optionProps}>
       <InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
       <IconSeer />
-      <AskSeerLabel {...labelProps}>{t('Ask Seer')}</AskSeerLabel>
+      <AskSeerLabel {...labelProps}>
+        {t('Ask Seer')} <FeatureBadge type="beta" />
+      </AskSeerLabel>
     </AskSeerListItem>
   );
 }

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

@@ -7,6 +7,7 @@ import type {ComboBoxState} from '@react-stately/combobox';
 import type {Key} from '@react-types/shared';
 
 import Feature from 'sentry/components/acl/feature';
+import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
 import {Button} from 'sentry/components/core/button';
 import {ListBox} from 'sentry/components/core/compactSelect/listBox';
 import type {
@@ -171,7 +172,10 @@ function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
     <AskSeerListItem ref={ref} onClick={handleClick} {...optionProps}>
       <InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
       <IconSeer />
-      <AskSeerLabel {...labelProps}>{t('Ask Seer')}</AskSeerLabel>
+      <AskSeerLabel {...labelProps}>
+        {t('Ask Seer')}
+        <FeatureBadge type="beta" />
+      </AskSeerLabel>
     </AskSeerListItem>
   );
 }

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

@@ -281,7 +281,7 @@ export function SeerSearch({initialQuery = ''}: SeerSearchProps) {
             </QueryResultsSection>
           ) : (
             <SeerContent>
-              <SeerHeader title={t("Type something in and I'll do my best to help")} />
+              <SeerHeader title={t("Describe what you're looking for!")} />
             </SeerContent>
           )}