chore: put session summaries back (#22307)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · May 16, 2024 · e0b0c98 · e0b0c98
1 parent 4269d79
commit e0b0c98
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 2 deletions.
diff --git a/ee/session_recordings/session_summary/summarize_session.py b/ee/session_recordings/session_summary/summarize_session.py
@@ -96,7 +96,8 @@ def summarize_recording(recording: SessionRecording, user: User, team: Team):
     with timer("openai_completion"):
         result = openai.chat.completions.create(
             # model="gpt-4-1106-preview",  # allows 128k tokens
-            model="gpt-4",  # allows 8k tokens
+            # model="gpt-4",  # allows 8k tokens
+            model="gpt-4o",  # allows 128k tokens
             temperature=0.7,
             messages=[
                 {

diff --git a/...end/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png b/...end/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png
diff --git a/...nd/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png b/...nd/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
@@ -1,13 +1,18 @@
-import { IconBug, IconCursorClick, IconKeyboard, IconPinFilled } from '@posthog/icons'
+import { IconBug, IconCursorClick, IconKeyboard, IconMagicWand, IconPinFilled } from '@posthog/icons'
 import clsx from 'clsx'
 import { useValues } from 'kea'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { PropertyIcon } from 'lib/components/PropertyIcon'
 import { TZLabel } from 'lib/components/TZLabel'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { Popover } from 'lib/lemon-ui/Popover'
+import { Spinner } from 'lib/lemon-ui/Spinner'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { colonDelimitedDuration } from 'lib/utils'
+import { useState } from 'react'
 import { countryCodeToName } from 'scenes/insights/views/WorldMap'
 import { DraggableToNotebook } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 import { asDisplay } from 'scenes/persons/person-utils'
@@ -169,6 +174,8 @@ export function SessionRecordingPreview({
     isActive,
     onClick,
     pinned,
+    summariseFn,
+    sessionSummaryLoading,
 }: SessionRecordingPreviewProps): JSX.Element {
     const { orderBy } = useValues(sessionRecordingsPlaylistLogic)
     const { durationTypeToShow } = useValues(playerSettingsLogic)
@@ -180,6 +187,10 @@ export function SessionRecordingPreview({
 
     const iconClassNames = 'text-muted-alt shrink-0'
 
+    const [summaryPopoverIsVisible, setSummaryPopoverIsVisible] = useState<boolean>(false)
+
+    const [summaryButtonIsVisible, setSummaryButtonIsVisible] = useState<boolean>(false)
+
     return (
         <DraggableToNotebook href={urls.replaySingle(recording.id)}>
             <div
@@ -189,7 +200,44 @@ export function SessionRecordingPreview({
                     isActive && 'SessionRecordingPreview--active'
                 )}
                 onClick={() => onClick?.()}
+                onMouseEnter={() => setSummaryButtonIsVisible(true)}
+                onMouseLeave={() => setSummaryButtonIsVisible(false)}
             >
+                <FlaggedFeature flag={FEATURE_FLAGS.AI_SESSION_SUMMARY} match={true}>
+                    {summariseFn && (
+                        <Popover
+                            showArrow={true}
+                            visible={summaryPopoverIsVisible && summaryButtonIsVisible}
+                            placement="right"
+                            onClickOutside={() => setSummaryPopoverIsVisible(false)}
+                            overlay={
+                                sessionSummaryLoading ? (
+                                    <Spinner />
+                                ) : (
+                                    <div className="text-xl max-w-auto lg:max-w-3/5">{recording.summary}</div>
+                                )
+                            }
+                        >
+                            <LemonButton
+                                size="small"
+                                type="primary"
+                                className={clsx(
+                                    summaryButtonIsVisible ? 'block' : 'hidden',
+                                    'absolute right-px top-px'
+                                )}
+                                icon={<IconMagicWand />}
+                                onClick={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    setSummaryPopoverIsVisible(!summaryPopoverIsVisible)
+                                    if (!recording.summary) {
+                                        summariseFn(recording)
+                                    }
+                                }}
+                            />
+                        </Popover>
+                    )}
+                </FlaggedFeature>
                 <div className="grow overflow-hidden space-y-1">
                     <div className="flex items-center justify-between gap-2">
                         <div className="flex overflow-hidden font-medium text-link ph-no-capture">

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -117,6 +117,7 @@ function RecordingsLists(): JSX.Element {
         showOtherRecordings,
         recordingsCount,
         isRecordingsListCollapsed,
+        sessionSummaryLoading,
     } = useValues(sessionRecordingsPlaylistLogic)
     const {
         setSelectedRecordingId,
@@ -128,12 +129,17 @@ function RecordingsLists(): JSX.Element {
         resetFilters,
         toggleShowOtherRecordings,
         toggleRecordingsListCollapsed,
+        summarizeSession,
     } = useActions(sessionRecordingsPlaylistLogic)
 
     const onRecordingClick = (recording: SessionRecordingType): void => {
         setSelectedRecordingId(recording.id)
     }
 
+    const onSummarizeClick = (recording: SessionRecordingType): void => {
+        summarizeSession(recording.id)
+    }
+
     const lastScrollPositionRef = useRef(0)
     const contentRef = useRef<HTMLDivElement | null>(null)
 
@@ -268,6 +274,8 @@ function RecordingsLists(): JSX.Element {
                                               onClick={() => onRecordingClick(rec)}
                                               isActive={activeSessionRecordingId === rec.id}
                                               pinned={false}
+                                              summariseFn={onSummarizeClick}
+                                              sessionSummaryLoading={sessionSummaryLoading}
                                           />
                                       </div>
                                   ))