feat: session summary config

frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx

@@ -94,6 +94,7 @@ function RecordingsLists(): JSX.Element {
         recordingsCount,
         sessionSummaryLoading,
         sessionBeingSummarized,
+        sessionSummaryOptedIn,
     } = useValues(sessionRecordingsPlaylistLogic)
     const {
         setSelectedRecordingId,
@@ -115,9 +116,11 @@ function RecordingsLists(): JSX.Element {
         setFilters(defaultPageviewPropertyEntityFilter(filters, property, value))
     }
 
-    const onSummarizeClick = (recording: SessionRecordingType): void => {
-        summarizeSession(recording.id)
-    }
+    const onSummarizeClick = sessionSummaryOptedIn
+        ? (recording: SessionRecordingType): void => {
+              summarizeSession(recording.id)
+          }
+        : null
 
     const lastScrollPositionRef = useRef(0)
     const contentRef = useRef<HTMLDivElement | null>(null)
@@ -255,7 +258,7 @@ function RecordingsLists(): JSX.Element {
                                               onPropertyClick={onPropertyClick}
                                               isActive={activeSessionRecordingId === rec.id}
                                               pinned={false}
-                                              summariseFn={onSummarizeClick}
+                                              summariseFn={onSummarizeClick ?? undefined}
                                               sessionSummaryLoading={
                                                   sessionSummaryLoading && sessionBeingSummarized === rec.id
                                               }

frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts

@@ -8,6 +8,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { objectClean, objectsEqual } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import posthog from 'posthog-js'
+import { teamLogic } from 'scenes/teamLogic'
 
 import {
     AnyPropertyFilter,
@@ -229,6 +230,8 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
             ['featureFlags'],
             playerSettingsLogic,
             ['autoplayDirection', 'hideViewedRecordings'],
+            teamLogic,
+            ['currentTeam'],
         ],
     }),
     actions({
@@ -263,7 +266,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
     loaders(({ props, values, actions }) => ({
         sessionSummary: {
             summarizeSession: async ({ id }): Promise<SessionSummaryResponse | null> => {
-                if (!id) {
+                if (!id || !values.sessionSummaryOptedIn) {
                     return null
                 }
                 const response = await api.recordings.summarize(id)
@@ -548,6 +551,10 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         },
     })),
     selectors({
+        sessionSummaryOptedIn: [
+            (s) => [s.currentTeam],
+            (currentTeam) => currentTeam?.session_replay_config?.ai_summary?.opt_in ?? false,
+        ],
         logicProps: [() => [(_, props) => props], (props): SessionRecordingPlaylistLogicProps => props],
         shouldShowEmptyState: [
             (s) => [

frontend/src/scenes/settings/SettingsMap.tsx

@@ -24,7 +24,12 @@ import {
     ProjectVariables,
     WebSnippet,
 } from './project/ProjectSettings'
-import { ReplayAuthorizedDomains, ReplayCostControl, ReplayGeneral } from './project/SessionRecordingSettings'
+import {
+    ReplayAuthorizedDomains,
+    ReplayCostControl,
+    ReplayGeneral,
+    ReplaySummarySettings,
+} from './project/SessionRecordingSettings'
 import { SettingPersonsOnEvents } from './project/SettingPersonsOnEvents'
 import { SlackIntegration } from './project/SlackIntegration'
 import { SurveySettings } from './project/SurveySettings'
@@ -167,6 +172,12 @@ export const SettingsMap: SettingSection[] = [
                     AvailableFeature.RECORDING_DURATION_MINIMUM,
                 ],
             },
+            {
+                id: 'replay-ai-summary',
+                title: 'AI Recording Summary',
+                component: <ReplaySummarySettings />,
+                flag: 'AI_SESSION_SUMMARY',
+            },
         ],
     },
     {

frontend/src/scenes/settings/project/SessionRecordingSettings.tsx

@@ -2,18 +2,21 @@ import { LemonButton, LemonSelect, LemonSwitch, LemonTag, Link } from '@posthog/
 import { useActions, useValues } from 'kea'
 import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
 import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
+import { EventSelect } from 'lib/components/EventSelect/EventSelect'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FlagSelector } from 'lib/components/FlagSelector'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { FEATURE_FLAGS, SESSION_REPLAY_MINIMUM_DURATION_OPTIONS } from 'lib/constants'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
-import { IconCancel } from 'lib/lemon-ui/icons'
+import { IconAutoAwesome, IconCancel, IconPlus, IconSelectEvents } from 'lib/lemon-ui/icons'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
-import { AvailableFeature } from '~/types'
+import { AvailableFeature, SessionRecordingSummaryConfig } from '~/types'
 
 export function ReplayGeneral(): JSX.Element {
     const { updateCurrentTeam } = useActions(teamLogic)
@@ -214,6 +217,154 @@ export function ReplayAuthorizedDomains(): JSX.Element {
     )
 }
 
+export function ReplaySummarySettings(): JSX.Element | null {
+    const { updateCurrentTeam } = useActions(teamLogic)
+
+    const { currentTeam } = useValues(teamLogic)
+
+    if (!currentTeam) {
+        return null
+    }
+
+    const defaultConfig = {
+        opt_in: false,
+        preferred_events: [],
+        excluded_events: ['$feature_flag_called'],
+        included_event_properties: ['elements_chain', '$window_id', '$current_url', '$event_type'],
+        important_user_properties: [],
+    }
+    const sessionReplayConfig = currentTeam.session_replay_config || {}
+    const currentConfig: SessionRecordingSummaryConfig = sessionReplayConfig.ai_summary || defaultConfig
+
+    const updateSummaryConfig = (summaryConfig: SessionRecordingSummaryConfig): void => {
+        updateCurrentTeam({
+            session_replay_config: { ...sessionReplayConfig, ai_summary: summaryConfig },
+        })
+    }
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div>
+                <LemonButton type="secondary" onClick={() => updateSummaryConfig(defaultConfig)}>
+                    Reset to default
+                </LemonButton>
+            </div>
+            <div>
+                <p>
+                    We use Open AI to summarise sessions. No data is sent to OpenAI without an explicit instruction to
+                    do so. Only by clicking the <IconAutoAwesome /> "Summary" button will selected event data be shared
+                    with a third party. We only send the data selected below.{' '}
+                    <strong>Data submitted is not used to train Open AI's models</strong>
+                </p>
+                <LemonSwitch
+                    checked={currentConfig.opt_in}
+                    onChange={(checked) => {
+                        updateSummaryConfig({
+                            ...currentConfig,
+                            opt_in: checked,
+                        })
+                    }}
+                    bordered
+                    label="Opt in to enable AI suggested summaries"
+                />
+            </div>
+            {currentConfig.opt_in && (
+                <>
+                    <div>
+                        <h3 className="flex items-center gap-2">
+                            <IconSelectEvents className="text-lg" />
+                            Preferred events
+                        </h3>
+                        <p>
+                            These events are treated as more interesting when generating a summary. We recommend you
+                            include events that represent value for your user
+                        </p>
+                        <EventSelect
+                            onChange={(includedEvents) => {
+                                updateSummaryConfig({
+                                    ...currentConfig,
+                                    preferred_events: includedEvents,
+                                })
+                            }}
+                            selectedEvents={currentConfig.preferred_events || []}
+                            addElement={
+                                <LemonButton size="small" type="secondary" icon={<IconPlus />} sideIcon={null}>
+                                    Add event
+                                </LemonButton>
+                            }
+                        />
+                    </div>
+                    <div>
+                        <h3 className="flex items-center gap-2">
+                            <IconSelectEvents className="text-lg" />
+                            Excluded events
+                        </h3>
+                        <p>These events are never submitted even when they are present in the session.</p>
+                        <EventSelect
+                            onChange={(excludedEvents) => {
+                                updateSummaryConfig({
+                                    ...currentConfig,
+                                    excluded_events: excludedEvents,
+                                })
+                            }}
+                            selectedEvents={currentConfig.excluded_events || []}
+                            addElement={
+                                <LemonButton size="small" type="secondary" icon={<IconPlus />} sideIcon={null}>
+                                    Exclude event
+                                </LemonButton>
+                            }
+                        />
+                    </div>
+                    <div>
+                        <h3 className="flex items-center gap-2">
+                            <IconSelectEvents className="text-lg" />
+                            Included event properties
+                        </h3>
+                        <p>
+                            We always send the event name and timestamp. The only event data sent are values of the
+                            properties selected here.
+                        </p>
+                        <PropertySelect
+                            taxonomicFilterGroup={TaxonomicFilterGroupType.EventProperties}
+                            sortable={false}
+                            onChange={(properties: string[]) => {
+                                updateSummaryConfig({
+                                    ...currentConfig,
+                                    included_event_properties: properties,
+                                })
+                            }}
+                            selectedProperties={currentConfig.included_event_properties || []}
+                            addText="Add property"
+                        />
+                    </div>
+                    <div>
+                        <h3 className="flex items-center gap-2">
+                            <IconSelectEvents className="text-lg" />
+                            Important user properties
+                        </h3>
+                        <p>
+                            We always send the first and last seen dates. The only user data sent are values of the
+                            properties selected here.
+                        </p>
+                        <PropertySelect
+                            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
+                            sortable={false}
+                            onChange={(properties) => {
+                                updateSummaryConfig({
+                                    ...currentConfig,
+                                    important_user_properties: properties,
+                                })
+                            }}
+                            selectedProperties={currentConfig.important_user_properties || []}
+                            addText="Add property"
+                        />
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}
+
 export function ReplayCostControl(): JSX.Element | null {
     const { updateCurrentTeam } = useActions(teamLogic)
     const { currentTeam } = useValues(teamLogic)

frontend/src/scenes/settings/types.ts

@@ -73,6 +73,7 @@ export type SettingId =
     | 'notifications'
     | 'optout'
     | 'theme'
+    | 'replay-ai-summary'
 
 export type Setting = {
     id: SettingId

frontend/src/types.ts

@@ -341,6 +341,14 @@ export interface CorrelationConfigType {
     excluded_event_names?: string[]
 }
 
+export interface SessionRecordingSummaryConfig {
+    opt_in: boolean
+    preferred_events: string[]
+    excluded_events: string[]
+    included_event_properties: string[]
+    important_user_properties: string[]
+}
+
 export interface TeamType extends TeamBasicType {
     created_at: string
     updated_at: string
@@ -360,7 +368,7 @@ export interface TeamType extends TeamBasicType {
         | { recordHeaders?: boolean; recordBody?: boolean }
         | undefined
         | null
-    session_replay_config: { record_canvas?: boolean } | undefined | null
+    session_replay_config: { record_canvas?: boolean; ai_summary?: SessionRecordingSummaryConfig } | undefined | null
     autocapture_exceptions_opt_in: boolean
     surveys_opt_in?: boolean
     autocapture_exceptions_errors_to_ignore: string[]

posthog/api/team.py

@@ -217,11 +217,33 @@
         if not isinstance(value, Dict):
             raise exceptions.ValidationError("Must provide a dictionary or None.")
 
-        if not all(key in ["record_canvas"] for key in value.keys()):
-            raise exceptions.ValidationError("Must provide a dictionary with only 'record_canvas' key.")
+        if not all(key in ["record_canvas", "ai_summary"] for key in value.keys()):
+            raise exceptions.ValidationError(
+                "Must provide a dictionary with only 'record_canvas' and 'ai_summary' keys."
+            )
+
+        if "ai_summary" in value:
+            self.validate_session_replay_ai_summary_config(value["ai_summary"])
 
         return value
 
+    def validate_session_replay_ai_summary_config(self, value) -> Dict | None:
+        if value is not None:
+            if not isinstance(value, Dict):
+                raise exceptions.ValidationError("Must provide a dictionary or None.")
+
+            allowed_keys = [
+                "included_event_properties",
+                "opt_in",
+                "preferred_events",
+                "excluded_events",
+                "important_user_properties",
+            ]
+            if not all(key in allowed_keys for key in value.keys()):
+                raise exceptions.ValidationError(
+                    "Must provide a dictionary with only allowed keys: {}".format(allowed_keys)
+                )
+
     def validate(self, attrs: Any) -> Any:
         if "primary_dashboard" in attrs and attrs["primary_dashboard"].team != self.instance:
             raise exceptions.PermissionDenied("Dashboard does not belong to this team.")