feat(replay): Show CTA when org is not opted into gen ai features (#95780)

billyvg · cursoragent · michellewzhang · web-flow · commit 44ba15ca956a · 2025-07-21T14:21:30.000-04:00
There are a few flags at work here: - `replay-ai-summaries` is our rollout feature flag - `gen-ai-features` is config based feature flag to show AI features - `organization.hideAiFeatures` is a user/org opt-in to gen AI features (similar to above flag) - and finally there is the org opt-in/acknowledgement to Seer features The AI Summary tab is now visible if only the rollout flag `replay-ai-summaries` and the gen AI flags are enabled . If organization can see gen AI features but has *not* opted into Seer, the AI Summary panel will display a CTA guiding users to their organization settings to enable Seer (or get info on how to enable it). <img width="627" height="200" alt="image" src="https://github.com/user-attachments/assets/a34cab3a-a15e-4718-82a8-f6ddde2b9deb" /> Closes REPLAY-526 --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
diff --git a/static/app/views/replays/detail/ai/ai.tsx b/static/app/views/replays/detail/ai/ai.tsx
@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 import {Alert} from 'sentry/components/core/alert';
 import {Badge} from 'sentry/components/core/badge';
 import {Button} from 'sentry/components/core/button';
+import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
+import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconSeer, IconSync, IconThumb} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -23,6 +25,7 @@ export default function Ai() {
   const replay = useReplayReader();
   const replayRecord = replay?.getReplay();
   const project = useProjectFromId({project_id: replayRecord?.project_id});
+  const {areAiFeaturesAllowed, setupAcknowledgement} = useOrganizationSeerSetup();
   const {
     data: summaryData,
     isPending,
@@ -35,58 +38,56 @@ export default function Ai() {
       replayRecord?.id &&
         project?.slug &&
         organization.features.includes('replay-ai-summaries') &&
-        organization.features.includes('gen-ai-features')
+        areAiFeaturesAllowed &&
+        setupAcknowledgement.orgHasAcknowledged
     ),
     retry: false,
   });
 
-  const openForm = useFeedbackForm();
-
-  const feedbackButton = ({type}: {type: 'positive' | 'negative'}) => {
-    return openForm ? (
-      <Button
-        aria-label={t('Give feedback on the AI summary section')}
-        icon={<IconThumb direction={type === 'positive' ? 'up' : 'down'} />}
-        title={type === 'positive' ? t('I like this') : t(`I don't like this`)}
-        size={'xs'}
-        onClick={() =>
-          openForm({
-            messagePlaceholder:
-              type === 'positive'
-                ? t('What did you like about the AI summary and chapters?')
-                : t('How can we make the AI summary and chapters work better for you?'),
-            tags: {
-              ['feedback.source']: 'replay_ai_summary',
-              ['feedback.owner']: 'replay',
-              ['feedback.type']: type,
-            },
-          })
-        }
-      />
-    ) : null;
-  };
-
-  if (
-    !organization.features.includes('replay-ai-summaries') ||
-    !organization.features.includes('gen-ai-features')
-  ) {
+  if (!organization.features.includes('replay-ai-summaries') || !areAiFeaturesAllowed) {
     return (
       <Wrapper data-test-id="replay-details-ai-summary-tab">
         <EmptySummaryContainer>
-          <Alert type="info" showIcon={false}>
-            {t('Replay AI summary is not available for this organization.')}
+          <Alert type="warning">
+            {t('AI features are not available for this organization.')}
           </Alert>
         </EmptySummaryContainer>
       </Wrapper>
     );
   }
 
+  // If our `replay-ai-summaries` ff is enabled and the org has gen AI ff enabled,
+  // but the org hasn't acknowledged the gen AI features, then show CTA.
+  if (!setupAcknowledgement.orgHasAcknowledged) {
+    return (
+      <Wrapper data-test-id="replay-details-ai-summary-tab">
+        <EmptySummaryContainer>
+          <CallToActionContainer>
+            <div>
+              <strong>{t('AI-Powered Replay Summaries')}</strong>
+            </div>
+            <div>
+              {t(
+                'Seer access is required to use replay summaries. Please view the Seer settings page for more information.'
+              )}
+            </div>
+            <div>
+              <LinkButton size="sm" priority="primary" to="/settings/seer/">
+                {t('View Seer Settings')}
+              </LinkButton>
+            </div>
+          </CallToActionContainer>
+        </EmptySummaryContainer>
+      </Wrapper>
+    );
+  }
+
   if (replayRecord?.project_id && !project) {
     return (
       <Wrapper data-test-id="replay-details-ai-summary-tab">
         <EmptySummaryContainer>
-          <Alert type="error" showIcon={false}>
-            {t('Project not found. Unable to load AI summary.')}
+          <Alert type="error">
+            {t('Project not found. Unable to load replay summary.')}
           </Alert>
         </EmptySummaryContainer>
       </Wrapper>
@@ -107,9 +108,7 @@ export default function Ai() {
     return (
       <Wrapper data-test-id="replay-details-ai-summary-tab">
         <EmptySummaryContainer>
-          <Alert type="error" showIcon={false}>
-            {t('Failed to load AI summary')}
-          </Alert>
+          <Alert type="error">{t('Failed to load replay summary')}</Alert>
         </EmptySummaryContainer>
       </Wrapper>
     );
@@ -142,8 +141,8 @@ export default function Ai() {
         </SummaryLeft>
         <SummaryRight>
           <Flex gap={space(0.5)}>
-            {feedbackButton({type: 'positive'})}
-            {feedbackButton({type: 'negative'})}
+            <FeedbackButton type="positive" />
+            <FeedbackButton type="negative" />
           </Flex>
           <Button
             priority="default"
@@ -170,6 +169,35 @@ export default function Ai() {
   );
 }
 
+function FeedbackButton({type}: {type: 'positive' | 'negative'}) {
+  const openForm = useFeedbackForm();
+  if (!openForm) {
+    return null;
+  }
+
+  return (
+    <Button
+      aria-label={t('Give feedback on the replay summary section')}
+      icon={<IconThumb direction={type === 'positive' ? 'up' : 'down'} />}
+      title={type === 'positive' ? t('I like this') : t(`I don't like this`)}
+      size={'xs'}
+      onClick={() =>
+        openForm({
+          messagePlaceholder:
+            type === 'positive'
+              ? t('What did you like about the replay summary and chapters?')
+              : t('How can we make the replay summary and chapters work better for you?'),
+          tags: {
+            ['feedback.source']: 'replay_ai_summary',
+            ['feedback.owner']: 'replay',
+            ['feedback.type']: type,
+          },
+        })
+      }
+    />
+  );
+}
+
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
@@ -248,3 +276,12 @@ const OverflowBody = styled('section')`
   flex: 1 1 auto;
   overflow: auto;
 `;
+
+const CallToActionContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(2)};
+  padding: ${space(2)};
+  align-items: center;
+  text-align: center;
+`;
diff --git a/static/app/views/replays/detail/layout/focusTabs.tsx b/static/app/views/replays/detail/layout/focusTabs.tsx
@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import {Flex} from 'sentry/components/core/layout';
 import {TabList, Tabs} from 'sentry/components/core/tabs';
 import {Tooltip} from 'sentry/components/core/tooltip';
+import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import {IconLab} from 'sentry/icons/iconLab';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -16,15 +17,16 @@ import useOrganization from 'sentry/utils/useOrganization';
 function getReplayTabs({
   isVideoReplay,
   organization,
+  areAiFeaturesAllowed,
 }: {
+  areAiFeaturesAllowed: boolean;
   isVideoReplay: boolean;
   organization: Organization;
 }): Record<TabKey, ReactNode> {
   // For video replays, we hide the memory tab (not applicable for mobile)
   return {
     [TabKey.AI]:
-      organization.features.includes('replay-ai-summaries') &&
-      organization.features.includes('gen-ai-features') ? (
+      organization.features.includes('replay-ai-summaries') && areAiFeaturesAllowed ? (
         <Flex align="center" gap={space(0.75)}>
           {t('Summary')}
           <Tooltip
@@ -52,12 +54,13 @@ type Props = {
 
 export default function FocusTabs({isVideoReplay}: Props) {
   const organization = useOrganization();
+  const {areAiFeaturesAllowed} = useOrganizationSeerSetup();
   const {getActiveTab, setActiveTab} = useActiveReplayTab({isVideoReplay});
   const activeTab = getActiveTab();
 
-  const tabs = Object.entries(getReplayTabs({isVideoReplay, organization})).filter(
-    ([_, v]) => v !== null
-  );
+  const tabs = Object.entries(
+    getReplayTabs({isVideoReplay, organization, areAiFeaturesAllowed})
+  ).filter(([_, v]) => v !== null);
 
   return (
     <TabContainer>
