feat(ai-generations): Display schema hints (#103047)

https://github.com/user-attachments/assets/a9514cb9-03a6-481b-9480-0f30440f62e9

Author: ArthurKnaus

static/app/views/explore/components/schemaHints/schemaHintsList.tsx

@@ -115,6 +115,7 @@ export function parseTagKey(tagKey: string) {
 const FILTER_KEY_SECTIONS: Record<SchemaHintsSources, FilterKeySection[]> = {
   [SchemaHintsSources.EXPLORE]: SPANS_FILTER_KEY_SECTIONS,
   [SchemaHintsSources.LOGS]: LOGS_FILTER_KEY_SECTIONS,
+  [SchemaHintsSources.AI_GENERATIONS]: SPANS_FILTER_KEY_SECTIONS,
 };
 
 function getFilterKeySections(source: SchemaHintsSources) {

static/app/views/explore/components/schemaHints/schemaHintsUtils.tsx

@@ -34,8 +34,22 @@ const LOGS_HINT_KEYS = [
   OurLogKnownFieldKey.SERVER_ADDRESS,
 ];
 
+const AI_GENERATIONS_HINT_KEYS = [
+  SpanFields.GEN_AI_REQUEST_MODEL,
+  SpanFields.GEN_AI_AGENT_NAME,
+  SpanFields.GEN_AI_REQUEST_MESSAGES,
+  SpanFields.GEN_AI_RESPONSE_TEXT,
+  SpanFields.GEN_AI_RESPONSE_OBJECT,
+  SpanFields.TRANSACTION,
+  SpanFields.RELEASE,
+];
+
 const SCHEMA_HINTS_LIST_ORDER_KEYS_LOGS = [...new Set([...LOGS_HINT_KEYS])];
 
+const SCHEMA_HINTS_LIST_ORDER_KEYS_AI_GENERATIONS = [
+  ...new Set([...AI_GENERATIONS_HINT_KEYS]),
+];
+
 const SCHEMA_HINTS_LIST_ORDER_KEYS_EXPLORE = [
   ...new Set([...FRONTEND_HINT_KEYS, ...MOBILE_HINT_KEYS, ...COMMON_HINT_KEYS]),
 ];
@@ -54,12 +68,16 @@ const SCHEMA_HINTS_HIDDEN_KEYS: string[] = [
 export enum SchemaHintsSources {
   EXPLORE = 'explore',
   LOGS = 'logs',
+  AI_GENERATIONS = 'ai_generations',
 }
 
 export const getSchemaHintsListOrder = (source: SchemaHintsSources) => {
   if (source === SchemaHintsSources.LOGS) {
     return SCHEMA_HINTS_LIST_ORDER_KEYS_LOGS;
   }
+  if (source === SchemaHintsSources.AI_GENERATIONS) {
+    return SCHEMA_HINTS_LIST_ORDER_KEYS_AI_GENERATIONS;
+  }
 
   return SCHEMA_HINTS_LIST_ORDER_KEYS_EXPLORE;
 };

static/app/views/insights/aiGenerations/views/overview.tsx

@@ -23,6 +23,8 @@ import {withChonk} from 'sentry/utils/theme/withChonk';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
+import SchemaHintsList from 'sentry/views/explore/components/schemaHints/schemaHintsList';
+import {SchemaHintsSources} from 'sentry/views/explore/components/schemaHints/schemaHintsUtils';
 import {TableActionButton} from 'sentry/views/explore/components/tableActionButton';
 import {useTraceItemTags} from 'sentry/views/explore/contexts/spanTagsContext';
 import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
@@ -43,6 +45,8 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul
 import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ModuleName, SpanFields} from 'sentry/views/insights/types';
 
+const DISABLE_AGGREGATES: never[] = [];
+
 function useShowOnboarding() {
   const {projects} = useProjects();
   const pageFilters = usePageFilters();
@@ -69,10 +73,16 @@ function AIGenerationsPage() {
 
   const [fields, setFields] = useFieldsQueryParam();
 
-  const {tags: numberTags, secondaryAliases: numberSecondaryAliases} =
-    useTraceItemTags('number');
-  const {tags: stringTags, secondaryAliases: stringSecondaryAliases} =
-    useTraceItemTags('string');
+  const {
+    tags: numberTags,
+    secondaryAliases: numberSecondaryAliases,
+    isLoading: numberTagsLoading,
+  } = useTraceItemTags('number');
+  const {
+    tags: stringTags,
+    secondaryAliases: stringSecondaryAliases,
+    isLoading: stringTagsLoading,
+  } = useTraceItemTags('string');
 
   const hasRawSearchReplacement = organization.features.includes(
     'search-query-builder-raw-search-replacement'
@@ -137,26 +147,36 @@ function AIGenerationsPage() {
   return (
     <SearchQueryBuilderProvider {...eapSpanSearchQueryProviderProps}>
       <ModuleFeature moduleName={ModuleName.AI_GENERATIONS}>
-        <Flex
+        <Stack
+          direction="column"
           gap="md"
-          wrap="wrap"
+          borderBottom="muted"
           padding={{
             xs: 'xl xl xl xl',
             md: 'xl 2xl xl 2xl',
           }}
-          borderBottom="muted"
         >
-          <PageFilterBar condensed>
-            <InsightsProjectSelector />
-            <InsightsEnvironmentSelector />
-            <DatePageFilter {...datePageFilterProps} />
-          </PageFilterBar>
-          {!showOnboarding && (
-            <Flex flex={2} minWidth="50%">
-              <EAPSpanSearchQueryBuilder {...eapSpanSearchQueryBuilderProps} />
-            </Flex>
-          )}
-        </Flex>
+          <Flex gap="md" wrap="wrap">
+            <PageFilterBar condensed>
+              <InsightsProjectSelector />
+              <InsightsEnvironmentSelector />
+              <DatePageFilter {...datePageFilterProps} />
+            </PageFilterBar>
+            {!showOnboarding && (
+              <Flex flex={2} minWidth="50%">
+                <EAPSpanSearchQueryBuilder {...eapSpanSearchQueryBuilderProps} />
+              </Flex>
+            )}
+          </Flex>
+          <SchemaHintsList
+            supportedAggregates={DISABLE_AGGREGATES}
+            numberTags={numberTags}
+            stringTags={stringTags}
+            isLoading={numberTagsLoading || stringTagsLoading}
+            exploreQuery={searchQuery ?? ''}
+            source={SchemaHintsSources.AI_GENERATIONS}
+          />
+        </Stack>
 
         {showOnboarding ? (
           <Onboarding />