feat(feedback): frontend to display summary

src/sentry/api/endpoints/organization_feedback_summary.py

@@ -1,5 +1,4 @@
 import logging
-from datetime import timedelta
 
 from rest_framework.exceptions import ParseError
 from rest_framework.request import Request
@@ -49,6 +48,8 @@ def get(self, request: Request, organization: Organization) -> Response:
         :auth: required
         """
 
+        # time.sleep(2.5)
+
         if not features.has(
             "organizations:user-feedback-ai-summaries", organization, actor=request.user
         ):
@@ -57,12 +58,23 @@ def get(self, request: Request, organization: Organization) -> Response:
         try:
             start, end = get_date_range_from_stats_period(
                 request.GET,
-                optional=False,
-                default_stats_period=timedelta(days=7),
+                # optional=False,
+                # default_stats_period=timedelta(days=7),
             )
-        except InvalidParams:
+        except (InvalidParams, Exception):
+            # print("wat on earth is going on, there seems to be a daterange parsing issue")
             raise ParseError(detail="Invalid or missing date range")
 
+        # return Response(status=403)
+
+        return Response(
+            {
+                "summary": "This is a test summary that is being used to test the feedback summary frontend view, since we don't have the LLM set up here. I am making this purposefully long just to see if it will add an option to read more.",
+                "success": True,
+                "num_feedbacks_used": 10,
+            }
+        )
+
         filters = {
             "type": FeedbackGroup.type_id,
             "first_seen__gte": start,

src/sentry/features/temporary.py

@@ -438,13 +438,13 @@ def register_temporary_features(manager: FeatureManager):
     manager.add("organizations:uptime-detector-handler", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=False)
     manager.add("organizations:uptime-detector-create-issues", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=False)
     manager.add("organizations:use-metrics-layer", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=False)
-    manager.add("organizations:user-feedback-ai-summaries", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
+    manager.add("organizations:user-feedback-ai-summaries", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True, default=True)
     # Enable auto spam classification at User Feedback ingest time
     manager.add("organizations:user-feedback-spam-ingest", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
     # Enable auto spam filtering at User Feedback ingest time, if spam-ingest is also enabled
     manager.add("organizations:user-feedback-spam-filter-actions", OrganizationFeature, FeatureHandlerStrategy.OPTIONS, api_expose=False)
     # Enable User Feedback v2 UI
-    manager.add("organizations:user-feedback-ui", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True)
+    manager.add("organizations:user-feedback-ui", OrganizationFeature, FeatureHandlerStrategy.FLAGPOLE, api_expose=True, default=True)
     # User Feedback Error Link Ingestion Changes
     manager.add("organizations:user-feedback-event-link-ingestion-changes", OrganizationFeature, FeatureHandlerStrategy.OPTIONS, api_expose=False)
     # Enable view hierarchies options

static/app/components/feedback/feedbackSummary.tsx

@@ -0,0 +1,153 @@
+import {useEffect, useRef, useState} from 'react';
+import styled from '@emotion/styled';
+
+import useFeedbackSummary from 'sentry/components/feedback/list/useFeedbackSummary';
+import LoadingError from 'sentry/components/loadingError';
+import Placeholder from 'sentry/components/placeholder';
+import {IconSeer} from 'sentry/icons/iconSeer';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+
+export default function FeedbackSummary() {
+  const {error, loading, summary, tooFewFeedbacks} = useFeedbackSummary();
+  const [expanded, setExpanded] = useState(false);
+  const [isClamped, setIsClamped] = useState(false);
+  const summaryRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    const checkClamped = () => {
+      const el = summaryRef.current;
+      if (el) {
+        el.style.display = '-webkit-box';
+        el.style.webkitLineClamp = '2';
+        const clampedHeight = el.clientHeight;
+
+        el.style.display = 'block';
+        el.style.webkitLineClamp = 'unset';
+        const fullHeight = el.clientHeight;
+
+        setIsClamped(fullHeight > clampedHeight);
+
+        // Restore to clamped state if not expanded
+        if (!expanded) {
+          el.style.display = '-webkit-box';
+          el.style.webkitLineClamp = '2';
+        }
+      }
+    };
+
+    checkClamped();
+    const el = summaryRef.current;
+    if (!el) return undefined;
+
+    // Observe width/height changes
+    const resizeObserver = new window.ResizeObserver(() => {
+      checkClamped();
+    });
+    resizeObserver.observe(el);
+
+    // Clean up
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [summary, loading, tooFewFeedbacks, expanded]);
+
+  if (error) {
+    return <LoadingError message={t('There was an error loading the summary')} />;
+  }
+
+  if (loading) {
+    return <Placeholder height="100px" />;
+  }
+
+  if (tooFewFeedbacks) {
+    return null;
+  }
+
+  return (
+    <Summary>
+      <SummaryIconContainer>
+        <div>
+          <IconSeer size="xs" />
+        </div>
+        <SummaryContainer>
+          <SummaryHeader>{t('Feedback Summary')}</SummaryHeader>
+          <SummaryContent
+            ref={summaryRef}
+            style={
+              expanded
+                ? {
+                    display: 'block',
+                    WebkitLineClamp: 'unset',
+                    overflow: 'visible',
+                  }
+                : {}
+            }
+          >
+            {summary}
+          </SummaryContent>
+          {isClamped && !expanded && (
+            <ReadMoreButton type="button" onClick={() => setExpanded(true)}>
+              {t('Read more')}
+            </ReadMoreButton>
+          )}
+          {expanded && isClamped && (
+            <ReadMoreButton type="button" onClick={() => setExpanded(false)}>
+              {t('Show less')}
+            </ReadMoreButton>
+          )}
+        </SummaryContainer>
+      </SummaryIconContainer>
+    </Summary>
+  );
+}
+
+const SummaryContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+  width: 100%;
+`;
+
+const SummaryHeader = styled('p')`
+  font-size: ${p => p.theme.fontSizeMedium};
+  font-weight: ${p => p.theme.fontWeightBold};
+  margin: 0;
+`;
+
+const SummaryContent = styled('p')`
+  font-size: ${p => p.theme.fontSizeSmall};
+  color: ${p => p.theme.subText};
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  max-width: 100%;
+  transition: -webkit-line-clamp 0.2s;
+`;
+
+const ReadMoreButton = styled('button')`
+  background: none;
+  border: none;
+  color: ${p => p.theme.purple400};
+  cursor: pointer;
+  padding: 0;
+  font-size: ${p => p.theme.fontSizeSmall};
+  font-weight: ${p => p.theme.fontWeightBold};
+  align-self: flex-start;
+`;
+
+const Summary = styled('div')`
+  padding: ${space(2)};
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+`;
+
+const SummaryIconContainer = styled('div')`
+  display: flex;
+  flex-direction: row;
+  gap: ${space(1)};
+`;

static/app/components/feedback/list/useFeedbackSummary.tsx

@@ -0,0 +1,87 @@
+import {useMemo} from 'react';
+
+import useFeedbackQueryKeys from 'sentry/components/feedback/useFeedbackQueryKeys';
+import coaleseIssueStatsPeriodQuery from 'sentry/utils/feedback/coaleseIssueStatsPeriodQuery';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import {decodeList, decodeScalar} from 'sentry/utils/queryString';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import useOrganization from 'sentry/utils/useOrganization';
+
+type FeedbackSummaryResponse = {
+  num_feedbacks_used: number;
+  success: boolean;
+  summary: string | null;
+};
+
+export default function useFeedbackSummary(): {
+  error: Error | null;
+  loading: boolean;
+  summary: string | null;
+  tooFewFeedbacks: boolean | null;
+} {
+  const queryView = useLocationQuery({
+    fields: {
+      end: decodeScalar,
+      project: decodeList,
+      start: decodeScalar,
+      statsPeriod: decodeScalar,
+      utc: decodeScalar,
+    },
+  });
+
+  const organization = useOrganization();
+
+  // This is similar to what is done in useMailboxCounts.tsx, and is also why we can't use useFeedbackSummary in feedbackListPage.tsx
+  const {listHeadTime} = useFeedbackQueryKeys();
+
+  const queryViewWithStatsPeriod = useMemo(() => {
+    return coaleseIssueStatsPeriodQuery({
+      defaultStatsPeriod: '0d',
+      listHeadTime,
+      prefetch: false,
+      queryView,
+    });
+  }, [listHeadTime, queryView]);
+
+  const {
+    data: feedbackSummaryData,
+    isPending: isFeedbackSummaryLoading,
+    isError: isFeedbackSummaryError,
+    error: feedbackSummaryError,
+  } = useApiQuery<FeedbackSummaryResponse>(
+    [
+      `/organizations/${organization.slug}/feedback-summary/`,
+      {
+        query: {
+          ...queryViewWithStatsPeriod,
+        },
+      },
+    ],
+    {staleTime: 5000, enabled: Boolean(queryViewWithStatsPeriod), retry: 1}
+  );
+
+  if (isFeedbackSummaryLoading) {
+    return {
+      summary: null,
+      loading: true,
+      error: null,
+      tooFewFeedbacks: false,
+    };
+  }
+
+  if (isFeedbackSummaryError) {
+    return {
+      summary: null,
+      loading: false,
+      error: feedbackSummaryError,
+      tooFewFeedbacks: false,
+    };
+  }
+
+  return {
+    summary: feedbackSummaryData.summary,
+    loading: false,
+    error: null,
+    tooFewFeedbacks: feedbackSummaryData.num_feedbacks_used === 0, // Maybe we should surface this in the endpoint, this seems hacky
+  };
+}

static/app/views/feedback/feedbackListPage.tsx

@@ -1,12 +1,14 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import Feature from 'sentry/components/acl/feature';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackFilters from 'sentry/components/feedback/feedbackFilters';
 import FeedbackItemLoader from 'sentry/components/feedback/feedbackItem/feedbackItemLoader';
 import FeedbackWidgetBanner from 'sentry/components/feedback/feedbackOnboarding/feedbackWidgetBanner';
 import FeedbackSearch from 'sentry/components/feedback/feedbackSearch';
 import FeedbackSetupPanel from 'sentry/components/feedback/feedbackSetupPanel';
+import FeedbackSummary from 'sentry/components/feedback/feedbackSummary';
 import FeedbackWhatsNewBanner from 'sentry/components/feedback/feedbackWhatsNewBanner';
 import FeedbackList from 'sentry/components/feedback/list/feedbackList';
 import useCurrentFeedbackId from 'sentry/components/feedback/useCurrentFeedbackId';
@@ -84,9 +86,17 @@ export default function FeedbackListPage() {
                   <FeedbackFilters style={{gridArea: 'filters'}} />
                   {hasSetupOneFeedback || hasSlug ? (
                     <Fragment>
-                      <Container style={{gridArea: 'list'}}>
-                        <FeedbackList />
-                      </Container>
+                      <SummaryListContainer style={{gridArea: 'list'}}>
+                        <Feature features="organizations:user-feedback-ai-summaries">
+                          {/* is this bad design? FeedbackSummary conditionally renders itself if there is a summary, but should that decision be made in its parent instead? causes weird issues like we can't wrap FeedbackSummary with a Container here, it must be wrapped inside the component itself */}
+                          {/* the reason i don't generate the summary here instead of in FeedbackSummary is that useFeedbackSummary requires the FeedbackQueryKeys context to be present to be able to parse the start/end date */}
+                          {/* another option is to create a new component that wraps the summary and the list, and generate the summary in that new component so the parent would conditionally render the child instead of the child conditionally rendering itself */}
+                          <FeedbackSummary />
+                        </Feature>
+                        <Container>
+                          <FeedbackList />
+                        </Container>
+                      </SummaryListContainer>
                       <SearchContainer>
                         <FeedbackSearch />
                       </SearchContainer>
@@ -118,6 +128,12 @@ const Background = styled('div')`
   gap: ${space(2)};
 `;
 
+const SummaryListContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+`;
+
 const LayoutGrid = styled('div')`
   overflow: hidden;
   flex-grow: 1;
@@ -153,7 +169,7 @@ const LayoutGrid = styled('div')`
   }
 
   @media (min-width: ${p => p.theme.breakpoints.medium}) {
-    grid-template-columns: minmax(1fr, 195px) 1fr;
+    grid-template-columns: minmax(195px, 1fr) 1.5fr;
   }
 
   @media (min-width: ${p => p.theme.breakpoints.large}) {
@@ -165,6 +181,8 @@ const LayoutGrid = styled('div')`
   }
 `;
 
+// grid-template-columns: minmax(195px, 1fr) 1.5fr; hmm, need to come back to this, i kinda get what it does but it seems a bit sus, but it works better than what was there previously since before there was invalid CSS here
+
 const Container = styled(FluidHeight)`
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};