feat(autofix): Thumbs up/down on root cause (#87145)

![CleanShot 2025-03-14 at 17 15
07@2x](https://github.com/user-attachments/assets/046aae80-bc8e-4536-9689-d4a8b3cf576e)
![CleanShot 2025-03-14 at 17 25
00@2x](https://github.com/user-attachments/assets/ee0901bb-4d91-4ac0-bfe7-adbf74efa601)

Author: jennmueng

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

@@ -9,6 +9,7 @@ import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
 import {
+  type AutofixFeedback,
   type AutofixRepository,
   type AutofixRootCauseData,
   type AutofixRootCauseSelection,
@@ -20,13 +21,15 @@ import {
   type AutofixResponse,
   makeAutofixQueryKey,
 } from 'sentry/components/events/autofix/useAutofix';
-import {IconCheckmark, IconClose, IconEdit, IconFocus} from 'sentry/icons';
+import {IconCheckmark, IconClose, IconFocus, IconInput, IconThumb} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {singleLineRenderer} from 'sentry/utils/marked';
 import {setApiQueryData, useMutation, useQueryClient} from 'sentry/utils/queryClient';
 import testableTransition from 'sentry/utils/testableTransition';
 import useApi from 'sentry/utils/useApi';
+import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
+import {Divider} from 'sentry/views/issueDetails/divider';
 
 import AutofixHighlightPopup from './autofixHighlightPopup';
 import {AutofixTimeline} from './autofixTimeline';
@@ -39,6 +42,7 @@ type AutofixRootCauseProps = {
   rootCauseSelection: AutofixRootCauseSelection;
   runId: string;
   agentCommentThread?: CommentThread;
+  feedback?: AutofixFeedback;
   previousDefaultStepIndex?: number;
   previousInsightCount?: number;
   terminationReason?: string;
@@ -144,6 +148,59 @@ export function useSelectCause({groupId, runId}: {groupId: string; runId: string
   });
 }
 
+export function useUpdateRootCauseFeedback({
+  groupId,
+  runId,
+}: {
+  groupId: string;
+  runId: string;
+}) {
+  const api = useApi();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (params: {action: 'root_cause_thumbs_up' | 'root_cause_thumbs_down'}) => {
+      return api.requestPromise(`/issues/${groupId}/autofix/update/`, {
+        method: 'POST',
+        data: {
+          run_id: runId,
+          payload: {
+            type: 'feedback',
+            action: params.action,
+          },
+        },
+      });
+    },
+    onMutate: params => {
+      queryClient.setQueryData(makeAutofixQueryKey(groupId), (data: AutofixResponse) => {
+        if (!data || !data.autofix) {
+          return data;
+        }
+
+        return {
+          ...data,
+          autofix: {
+            ...data.autofix,
+            feedback: {
+              ...data.autofix.feedback,
+              root_cause_thumbs_up: params.action === 'root_cause_thumbs_up',
+              root_cause_thumbs_down: params.action === 'root_cause_thumbs_down',
+            },
+          },
+        };
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: makeAutofixQueryKey(groupId),
+      });
+    },
+    onError: () => {
+      addErrorMessage(t('Something went wrong when updating the root cause feedback.'));
+    },
+  });
+}
+
 export function replaceHeadersWithBold(markdown: string) {
   const headerRegex = /^(#{1,6})\s+(.*)$/gm;
   const boldMarkdown = markdown.replace(headerRegex, (_match, _hashes, content) => {
@@ -201,7 +258,7 @@ function RootCauseDescription({
   );
 }
 
-function formatRootCauseText(
+export function formatRootCauseText(
   cause: AutofixRootCauseData | undefined,
   customRootCause?: string
 ) {
@@ -259,9 +316,74 @@ function CopyRootCauseButton({
     return null;
   }
   const text = formatRootCauseText(cause, customRootCause);
-  return <CopyToClipboardButton size="sm" text={text} borderless />;
+  return (
+    <CopyToClipboardButton
+      size="sm"
+      text={text}
+      borderless
+      title="Copy root cause as Markdown"
+    />
+  );
 }
 
+function ThumbsUpDownButtons({
+  feedback,
+  groupId,
+  runId,
+}: {
+  groupId: string;
+  runId: string;
+  feedback?: AutofixFeedback;
+}) {
+  const {mutate: handleUpdateRootCauseFeedback} = useUpdateRootCauseFeedback({
+    groupId,
+    runId,
+  });
+  const openForm = useFeedbackForm();
+
+  return (
+    <ButtonBar>
+      <Button
+        size="sm"
+        borderless
+        onClick={() => handleUpdateRootCauseFeedback({action: 'root_cause_thumbs_up'})}
+        title={t('This root cause analysis is helpful')}
+      >
+        {
+          <IconThumb
+            color={feedback?.root_cause_thumbs_up ? 'green400' : 'gray300'}
+            size="sm"
+            direction="up"
+            fill="red"
+          />
+        }
+      </Button>
+      <Button
+        size="sm"
+        borderless
+        onClick={() => {
+          handleUpdateRootCauseFeedback({action: 'root_cause_thumbs_down'});
+          openForm?.({
+            messagePlaceholder: t('How can we make Autofix better for you?'),
+            tags: {
+              ['feedback.source']: 'issue_details_ai_autofix_root_cause',
+              ['feedback.owner']: 'ml-ai',
+            },
+          });
+        }}
+        title={t('This root cause is incorrect or not helpful')}
+      >
+        {
+          <IconThumb
+            color={feedback?.root_cause_thumbs_down ? 'red400' : 'gray300'}
+            size="sm"
+            direction="down"
+          />
+        }
+      </Button>
+    </ButtonBar>
+  );
+}
 function AutofixRootCauseDisplay({
   causes,
   groupId,
@@ -270,6 +392,7 @@ function AutofixRootCauseDisplay({
   previousDefaultStepIndex,
   previousInsightCount,
   agentCommentThread,
+  feedback,
 }: AutofixRootCauseProps) {
   const {mutate: handleContinue, isPending} = useSelectCause({groupId, runId});
   const [isEditing, setIsEditing] = useState(false);
@@ -318,6 +441,10 @@ function AutofixRootCauseDisplay({
             {t('Root Cause')}
           </HeaderText>
           <ButtonBar>
+            <ThumbsUpDownButtons feedback={feedback} groupId={groupId} runId={runId} />
+            <DividerWrapper>
+              <Divider />
+            </DividerWrapper>
             <CopyRootCauseButton cause={cause} isEditing={isEditing} />
             <EditButton
               size="sm"
@@ -333,7 +460,7 @@ function AutofixRootCauseDisplay({
                 }
               }}
             >
-              {isEditing ? <IconClose size="sm" /> : <IconEdit size="sm" />}
+              {isEditing ? <IconClose size="sm" /> : <IconInput size="sm" />}
             </EditButton>
             {isEditing && (
               <Button
@@ -503,3 +630,7 @@ const TextArea = styled('textarea')`
 const EditButton = styled(Button)`
   color: ${p => p.theme.subText};
 `;
+
+const DividerWrapper = styled('div')`
+  margin: 0 ${space(1)};
+`;

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

@@ -353,7 +353,7 @@ function getEventColor(isActive?: boolean, isSelected?: boolean): ColorConfig {
   };
 }
 
-function formatSolutionText(
+export function formatSolutionText(
   solution: AutofixSolutionTimelineEvent[],
   customSolution?: string
 ) {

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

@@ -12,6 +12,7 @@ import {
 import {AutofixSolution} from 'sentry/components/events/autofix/autofixSolution';
 import {
   type AutofixData,
+  type AutofixFeedback,
   type AutofixProgressItem,
   type AutofixRepository,
   AutofixStatus,
@@ -37,6 +38,7 @@ interface StepProps {
   repos: AutofixRepository[];
   runId: string;
   step: AutofixStep;
+  feedback?: AutofixFeedback;
   previousDefaultStepIndex?: number;
   previousInsightCount?: number;
   shouldCollapseByDefault?: boolean;
@@ -65,6 +67,7 @@ export function Step({
   shouldCollapseByDefault,
   previousDefaultStepIndex,
   previousInsightCount,
+  feedback,
 }: StepProps) {
   return (
     <StepCard>
@@ -99,6 +102,7 @@ export function Step({
                   repos={repos}
                   previousDefaultStepIndex={previousDefaultStepIndex}
                   previousInsightCount={previousInsightCount}
+                  feedback={feedback}
                 />
               )}
               {step.type === AutofixStepType.SOLUTION && (
@@ -222,6 +226,7 @@ export function AutofixSteps({data, groupId, runId}: AutofixStepsProps) {
                 previousDefaultStepIndex >= 0 ? previousDefaultStepIndex : undefined
               }
               previousInsightCount={previousInsightCount}
+              feedback={data.feedback}
             />
           </div>
         );

static/app/components/events/autofix/types.ts

@@ -75,6 +75,7 @@ export type AutofixData = {
   };
   completed_at?: string | null;
   error_message?: string;
+  feedback?: AutofixFeedback;
   options?: AutofixOptions;
   steps?: AutofixStep[];
   users?: Record<number, User>;
@@ -212,6 +213,11 @@ export type GroupWithAutofix = Group & {
   metadata?: EventMetadataWithAutofix;
 };
 
+export type AutofixFeedback = {
+  root_cause_thumbs_down?: boolean;
+  root_cause_thumbs_up?: boolean;
+};
+
 export type FilePatch = {
   added: number;
   hunks: Hunk[];