chore(autofix): Swap send icon from chevron to return symbol (#92240)

We were using `IconChevron` for both expandable sections and send
buttons on text inputs, and we got feedback that it was confusing.
Swapping the text inputs to use a return key Unicode icon since we don't
have anything else appropriate within Sentry's icons.

<img width="311" alt="Screenshot 2025-05-25 at 6 42 22 AM"
src="https://github.com/user-attachments/assets/bdf440ad-7ac0-4011-87ea-1fa1e1413edc"
/>

Edit: tacking on some fixes to make the auto-scrolling and loading state
less janky as well

Author: roaga

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

@@ -22,7 +22,7 @@ import {
   useAutofixData,
 } from 'sentry/components/events/autofix/useAutofix';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import {IconChevron, IconClose} from 'sentry/icons';
+import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import testableTransition from 'sentry/utils/testableTransition';
@@ -355,7 +355,7 @@ function AutofixHighlightPopupContent({
             borderless
             aria-label={t('Submit Comment')}
           >
-            <IconChevron direction="right" />
+            {'\u23CE'}
           </StyledButton>
         </InputWrapper>
       )}
@@ -592,7 +592,7 @@ const StyledButton = styled(Button)`
   height: 24px;
   width: 24px;
   margin-right: 0;
-
+  color: ${p => p.theme.subText};
   z-index: 2;
 `;
 

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

@@ -403,6 +403,11 @@ function AutofixInsightCards({
   const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(null);
   const previousInsightsRef = useRef<AutofixInsight[]>([]);
   const [newInsightIndices, setNewInsightIndices] = useState<number[]>([]);
+  const hasMounted = useRef(false);
+
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
 
   // Compare current insights with previous insights to determine which ones are new
   useEffect(() => {
@@ -447,7 +452,7 @@ function AutofixInsightCards({
                 runId={runId}
               />
             )}
-            <AnimatePresence>
+            <AnimatePresence initial={hasMounted.current}>
               {!isCollapsed && (
                 <motion.div
                   initial={{height: 0, opacity: 0}}

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

@@ -13,7 +13,6 @@ import {FlyingLinesEffect} from 'sentry/components/events/autofix/FlyingLinesEff
 import type {AutofixData} from 'sentry/components/events/autofix/types';
 import {makeAutofixQueryKey} from 'sentry/components/events/autofix/useAutofix';
 import {useTypingAnimation} from 'sentry/components/events/autofix/useTypingAnimation';
-import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {singleLineRenderer} from 'sentry/utils/marked/marked';
@@ -244,7 +243,7 @@ export function AutofixOutputStream({
                 aria-label={t('Submit Comment')}
                 size="zero"
               >
-                <IconChevron direction="right" />
+                {'\u23CE'}
               </StyledButton>
             </InputWrapper>
           </Container>
@@ -365,6 +364,7 @@ const StyledButton = styled(Button)`
   height: 24px;
   width: 24px;
   margin-right: 0;
+  color: ${p => p.theme.subText};
 `;
 
 const SeerIconContainer = styled('div')`

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

@@ -185,7 +185,7 @@ export const useAiAutofix = (
   const [currentRunId, setCurrentRunId] = useState<string | null>(null);
   const [waitingForNextRun, setWaitingForNextRun] = useState<boolean>(false);
 
-  const {data: apiData} = useApiQuery<AutofixResponse>(
+  const {data: apiData, isPending} = useApiQuery<AutofixResponse>(
     makeAutofixQueryKey(orgSlug, group.id),
     {
       staleTime: 0,
@@ -267,6 +267,7 @@ export const useAiAutofix = (
   return {
     autofixData,
     isPolling: isPolling(autofixData, !!currentRunId || waitingForNextRun),
+    isPending,
     triggerAutofix,
     reset,
   };

static/app/components/group/groupSummary.tsx

@@ -305,7 +305,7 @@ function GroupSummaryFull({
                   </CardLineDecorationWrapper>
                   {isPending ? (
                     <CardContent>
-                      <Placeholder height="1.5rem" />
+                      <Placeholder height="3rem" />
                     </CardContent>
                   ) : (
                     <CardContent>

static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx

@@ -22,7 +22,7 @@ import {GroupSummary} from 'sentry/components/group/groupSummary';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
+import Placeholder from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconSettings} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
@@ -52,15 +52,20 @@ const AiSetupDataConsent = HookOrDefault({
 
 export function SeerDrawer({group, project, event}: SeerDrawerProps) {
   const organization = useOrganization();
-  const {autofixData, triggerAutofix, reset} = useAiAutofix(group, event);
+  const {
+    autofixData,
+    triggerAutofix,
+    reset,
+    isPending: autofixDataPending,
+  } = useAiAutofix(group, event);
   const aiConfig = useAiConfig(group, project);
   const location = useLocation();
   const navigate = useNavigate();
 
   useRouteAnalyticsParams({autofix_status: autofixData?.status ?? 'none'});
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const userScrolledRef = useRef(false);
+  const userScrolledRef = useRef(true);
   const lastScrollTopRef = useRef(0);
   const autofixDataRef = useRef(autofixData);
 
@@ -137,6 +142,24 @@ export function SeerDrawer({group, project, event}: SeerDrawerProps) {
               );
             }, 200);
           }
+        } else {
+          // No matching step found, scroll to bottom
+          scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+          userScrolledRef.current = true;
+
+          // Clear the scrollTo parameter from the URL after scrolling
+          setTimeout(() => {
+            navigate(
+              {
+                pathname: location.pathname,
+                query: {
+                  ...location.query,
+                  scrollTo: undefined,
+                },
+              },
+              {replace: true}
+            );
+          }, 200);
         }
       }
     },
@@ -264,9 +287,11 @@ export function SeerDrawer({group, project, event}: SeerDrawerProps) {
 
       <SeerDrawerBody ref={scrollContainerRef} onScroll={handleScroll}>
         {aiConfig.isAutofixSetupLoading ? (
-          <div data-test-id="ai-setup-loading-indicator">
-            <LoadingIndicator />
-          </div>
+          <PlaceholderStack data-test-id="ai-setup-loading-indicator">
+            <Placeholder height="10rem" />
+            <Placeholder height="15rem" />
+            <Placeholder height="15rem" />
+          </PlaceholderStack>
         ) : aiConfig.needsGenAiAcknowledgement ? (
           <AiSetupDataConsent groupId={group.id} />
         ) : (
@@ -289,6 +314,11 @@ export function SeerDrawer({group, project, event}: SeerDrawerProps) {
                     groupId={group.id}
                     runId={autofixData.run_id}
                   />
+                ) : autofixDataPending ? (
+                  <PlaceholderStack>
+                    <Placeholder height="15rem" />
+                    <Placeholder height="15rem" />
+                  </PlaceholderStack>
                 ) : (
                   <AutofixStartBox onSend={triggerAutofix} groupId={group.id} />
                 )}
@@ -350,6 +380,13 @@ export const useOpenSeerDrawer = ({
   return {openSeerDrawer};
 };
 
+const PlaceholderStack = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(2)};
+  margin-top: ${space(2)};
+`;
+
 const StyledCard = styled('div')`
   background: ${p => p.theme.backgroundElevated};
   overflow: visible;