[🐴] Add new chat metrics (#4130)

* remove a comment

* add types for event, add log to profile button

* add `chat:open`

* add to chat list items

* fix types

* oops

* oops 2.0

src/components/dms/MessageProfileButton.tsx

@@ -5,6 +5,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
+import {logEvent} from 'lib/statsig/statsig'
 import {atoms as a, useTheme} from '#/alf'
 import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message'
 import {Link} from '../Link'
@@ -18,7 +19,14 @@ export function MessageProfileButton({
   const {_} = useLingui()
   const t = useTheme()
 
-  const {data: convoId, isPending} = useMaybeConvoForUser(profile.did)
+  const {data: convo, isPending} = useMaybeConvoForUser(profile.did)
+
+  const onPress = React.useCallback(() => {
+    if (convo && !convo.lastMessage) {
+      logEvent('chat:create', {logContext: 'ProfileHeader'})
+    }
+    logEvent('chat:open', {logContext: 'ProfileHeader'})
+  }, [convo])
 
   if (isPending) {
     // show pending state based on declaration
@@ -48,7 +56,7 @@ export function MessageProfileButton({
     }
   }
 
-  if (convoId) {
+  if (convo) {
     return (
       <Link
         testID="dmBtn"
@@ -57,8 +65,9 @@ export function MessageProfileButton({
         variant="solid"
         shape="round"
         label={_(msg`Message ${profile.handle}`)}
-        to={`/messages/${convoId}`}
-        style={[a.justify_center, {width: 36, height: 36}]}>
+        to={`/messages/${convo.id}`}
+        style={[a.justify_center, {width: 36, height: 36}]}
+        onPress={onPress}>
         <Message
           style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
           size="md"

src/components/dms/NewChatDialog/index.tsx

@@ -19,6 +19,7 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
+import {logEvent} from 'lib/statsig/statsig'
 import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
 import {FAB} from '#/view/com/util/fab/FAB'
 import * as Toast from '#/view/com/util/Toast'
@@ -69,6 +70,11 @@ export function NewChat({
   const {mutate: createChat} = useGetConvoForMembers({
     onSuccess: data => {
       onNewChat(data.convo.id)
+
+      if (!data.convo.lastMessage) {
+        logEvent('chat:create', {logContext: 'NewChatDialog'})
+      }
+      logEvent('chat:open', {logContext: 'NewChatDialog'})
     },
     onError: error => {
       Toast.show(error.message)

src/lib/statsig/events.ts

@@ -125,6 +125,13 @@ export type LogEvents = {
       | 'ProfileHeaderSuggestedFollows'
       | 'ProfileMenu'
       | 'ProfileHoverCard'
+      | 'Chat'
+  }
+  'chat:create': {
+    logContext: 'ProfileHeader' | 'NewChatDialog'
+  }
+  'chat:open': {
+    logContext: 'ProfileHeader' | 'NewChatDialog' | 'ChatsList'
   }
 
   'test:all:always': {}

src/screens/Messages/Conversation/MessageInput.tsx

@@ -46,7 +46,6 @@ export function MessageInput({
   const {height: keyboardHeight} = useReanimatedKeyboardAnimation()
   const maxHeight = useSharedValue<undefined | number>(undefined)
   const isInputScrollable = useSharedValue(false)
-  // const [isInputScrollable, setIsInputScrollable] = React.useState(false)
 
   const inputStyles = useSharedInputStyles()
   const [isFocused, setIsFocused] = React.useState(false)

src/screens/Messages/List/ChatListItem.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useState} from 'react'
-import {View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
 import {
   AppBskyActorDefs,
   ChatBskyConvoDefs,
@@ -13,6 +13,7 @@ import {isNative} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
+import {logEvent} from 'lib/statsig/statsig'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
@@ -120,6 +121,18 @@ function ChatListItemReady({
     setShowActions(true)
   }, [])
 
+  const onPress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (isDeletedAccount) {
+        e.preventDefault()
+        return false
+      } else {
+        logEvent('chat:open', {logContext: 'ChatsList'})
+      }
+    },
+    [isDeletedAccount],
+  )
+
   const onLongPress = useCallback(() => {
     menuControl.open()
   }, [menuControl])
@@ -148,21 +161,14 @@ function ChatListItemReady({
               ]
             : undefined
         }
+        onPress={onPress}
+        onLongPress={isNative ? menuControl.open : undefined}
         onAccessibilityAction={onLongPress}
-        onPress={
-          isDeletedAccount
-            ? e => {
-                e.preventDefault()
-                return false
-              }
-            : undefined
-        }
         style={[
           web({
             cursor: isDeletedAccount ? 'default' : 'pointer',
           }),
-        ]}
-        onLongPress={isNative ? menuControl.open : undefined}>
+        ]}>
         {({hovered, pressed, focused}) => (
           <View
             style={[

src/state/queries/messages/get-convo-for-members.ts

@@ -57,7 +57,7 @@ export function useMaybeConvoForUser(did: string) {
         .catch(() => ({success: null}))
 
       if (convo.success) {
-        return convo.data.convo.id
+        return convo.data.convo
       } else {
         return null
       }