@planningcenter/chat-react-native 3.18.0-rc.1 → 3.18.0-rc.11

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,22 +1,21 @@
 import { ApiCollection, MessageResource } from '../types'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
-import {
-  deleteRecordInPagesData,
-  updateOrCreateRecordInPagesData,
-  updateRecordInPagesData,
-} from '../utils'
+import { deleteRecordInPagesData } from '../utils'
 import { MessageCreatedEvent, MessageDeletedEvent } from '../types/jolt_events/message_events'
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useCurrentPerson } from './use_current_person'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
-import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../utils/request/get_messages'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
-import { isTemporaryMessageId } from './use_message_create_or_update'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
 import { useApiClient } from './use_api_client'
+import {
+  updateCacheWithMessage,
+  updateCacheWithReaction,
+  getThreadedMessagesQueryKey,
+} from '../utils/cache/messages_cache'
 
 interface Props {
   conversationId: number
@@ -47,42 +46,17 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev => {
-      if (e.event === 'message.created') {
-        // Before adding the new message, remove any pending temporary messages
-        // with matching text to prevent duplicates from race conditions
-        let dataAfterTempRemoval = prev
-        if (prev && message.text && message.mine) {
-          dataAfterTempRemoval = deleteRecordInPagesData({
-            data: prev,
-            record: message,
-            matchFn: (existingMessage, _record) => {
-              return (
-                isTemporaryMessageId(existingMessage.id) &&
-                existingMessage.text === message.text &&
-                existingMessage.mine
-              )
-            },
-          })
-        }
-
-        return updateOrCreateRecordInPagesData({
-          data: dataAfterTempRemoval,
-          record: message,
-          processRecord: (record, current) => {
-            return { ...current, ...record }
-          },
-        })
-      } else {
-        return updateRecordInPagesData({
-          data: prev,
-          record: message,
-          processRecord: (record, current) => {
-            return { ...current, ...record }
-          },
-        })
-      }
-    })
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+    }
   }
 
   const handleMessageDeleted = async (e: MessageDeletedEvent) => {
@@ -92,50 +66,34 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       currentPersonId: currentPerson.id,
     })
 
+    // Update the main conversation cache
     queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
       deleteRecordInPagesData({ data: prev, record: message })
     )
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      queryClient.setQueryData<QueryData>(threadedMessagesQueryKey, prev =>
+        deleteRecordInPagesData({ data: prev, record: message })
+      )
+    }
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    const { data } = e.data
-    const message = { id: data.message_sort_key } as MessageResource
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
-      updateRecordInPagesData({
-        data: prev,
-        record: message,
-        processRecord: (record, oldMessage) => {
-          const reactionCounts = oldMessage.reactionCounts || []
-          let foundMatch = false
-          let newReactionCounts = reactionCounts.map(reactionCount => {
-            if (reactionCount.value === data.value) {
-              foundMatch = true
-              return transformReactionEventDataToReactionCountResource({
-                data,
-                oldData: reactionCount,
-                event: e.event,
-                currentPersonId: currentPerson.id,
-              })
-            }
-            return reactionCount
-          })
-
-          if (!foundMatch) {
-            const newReactionCount = transformReactionEventDataToReactionCountResource({
-              data,
-              event: e.event,
-              currentPersonId: currentPerson.id,
-            })
-
-            if (newReactionCount?.count) {
-              newReactionCounts = [...newReactionCounts, newReactionCount]
-            }
-          }
-
-          return { ...oldMessage, reactionCounts: newReactionCounts }
-        },
-      })
-    )
+    // Update the main conversation cache and capture the reply_root_id if present
+    updateCacheWithReaction(queryClient, messagesQueryKey, e, currentPerson.id)
+
+    const replyRootId = e.data.data.reply_root_id
+
+    // If the message has a reply_root_id, also update the threaded cache
+    if (replyRootId) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(conversationId, replyRootId)
+      updateCacheWithReaction(queryClient, threadedMessagesQueryKey, e, currentPerson.id)
+    }
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {

package/src/hooks/use_features.ts

@@ -0,0 +1,47 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { useApiClient } from './use_api_client'
+import type { FeatureResource } from '../types/resources/feature_resource'
+import { ApiCollection } from '../types'
+
+export function useFeatures() {
+  const apiClient = useApiClient()
+  const requestArgs = getFeaturesRequestArgs()
+
+  const { data } = useSuspenseQuery({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: () => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(requestArgs)
+        .catch(() => stableEmptyFeatures)
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+
+  const features = data.data
+
+  const featureEnabled = useCallback(
+    (featureName: string) =>
+      features.some(feature => feature.name === featureName && feature.enabled),
+    [features]
+  )
+
+  return {
+    features,
+    featureEnabled,
+  }
+}
+
+export const availableFeatures = {
+  threaded_replies: 'QA_MOBILE_threaded_replies',
+}
+
+const stableEmptyFeatures: ApiCollection<FeatureResource> = {
+  data: [],
+  links: {},
+  meta: {
+    count: 0,
+    totalCount: 0,
+  },
+}

package/src/hooks/use_message_create_or_update.ts

@@ -14,6 +14,7 @@ import { useCurrentPerson } from './use_current_person'
 import { optimisticallyUpdateMessage } from '../utils/cache/optimistically_update_message'
 import { optimisticallyCreateMessage } from '../utils/cache/optimistically_create_message'
 import { startMessageCreationTracking } from '../utils/performance_tracking'
+import { isNewMessage } from '../utils/cache/messages_cache'
 
 interface Props {
   conversationId: number
@@ -93,6 +94,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         text,
         attachments,
         currentPerson,
+        replyRootId,
       })
 
       return { message: optimisticMessage }
@@ -103,7 +105,10 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
 
       // Add error to the optimistic message from the cache on error
       if (optimisticMessage) {
-        const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+        const queryKey = getMessagesQueryKey({
+          conversation_id: conversationId,
+          reply_root_id: replyRootId,
+        })
         chatQueryClient.setQueryData(
           queryKey,
           (data: InfiniteData<ApiCollection<MessageResource>> | undefined) =>
@@ -123,7 +128,10 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
       const { message: optimisticMessage } = context || {}
       const updatedMessage = result.data
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+      const queryKey = getMessagesQueryKey({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+      })
 
       // First remove the optimistic message if it exists
       if (optimisticMessage) {
@@ -148,13 +156,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   return mutation
 }
 
-export function isTemporaryMessageId(messageId?: string | null): boolean {
-  return !!messageId && messageId.endsWith('-temp')
-}
-export function isNewMessage(message?: MessageResource): boolean {
-  return !message?.id || isTemporaryMessageId(message.id)
-}
-
 /**
  * Generate a random UUID (v4) for idempotent keys.
  * Uses Math.random, which is not cryptographically secure.

package/src/hooks/use_typing_indicators.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { PersonTyping } from './use_typing_status_cache'
 import { useCurrentPerson } from './use_current_person'
+import { useConversationContext } from '../contexts/conversation_context'
 
 /**
  * Hook for getting people currently typing in a conversation
@@ -9,9 +10,12 @@ import { useCurrentPerson } from './use_current_person'
  * The query function itself doesn't do anything, but we add to the cache
  * from useTypingStatusCache when we receive a typing event.
  */
-export const useTypingIndicators = (conversationId: number) => {
+export const useTypingIndicators = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const cacheKey = useMemo(() => ['conversationTyping', String(conversationId)], [conversationId])
   const currentPerson = useCurrentPerson()
+  const isCurrentPerson = (authorId: number) => authorId === currentPerson?.id
+  const inMainConversationView = !currentPageReplyRootId
   const now = Date.now()
   const { data } = useQuery({
     queryKey: cacheKey,
@@ -19,8 +23,16 @@ export const useTypingIndicators = (conversationId: number) => {
     initialData: stableArray,
   })
 
-  // Filter out expired entries and the current user
-  return data.filter(person => person.expires > now && person.author_id !== currentPerson?.id)
+  return data.filter(({ author_id, expires, reply_root_id }) => {
+    if (isCurrentPerson(author_id)) return false
+    if (now > expires) return false
+
+    // If you are in the main conversation view, you will see any message sent
+    if (inMainConversationView) return true
+
+    // If you are in a reply view, you will only see messages sent in this reply thread
+    return reply_root_id === currentPageReplyRootId
+  })
 }
 
 /**

package/src/screens/conversation_details_screen.tsx

@@ -9,6 +9,7 @@ import React, {
   useRef,
 } from 'react'
 import {
+  FlatList,
   StyleSheet,
   TextInput,
   View,
@@ -40,10 +41,11 @@ import {
 } from '../hooks/use_conversation'
 import { MemberResource, isDefined } from '../types'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
-import { FlashList } from '@shopify/flash-list'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
+import { useFeatures } from '../hooks/use_features'
+import { availableFeatures } from '../hooks/use_features'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -93,6 +95,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
@@ -250,8 +254,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
-        title: 'Freeze conversation',
-        subtitle: 'Disables replies for everyone except leaders.',
+        title: repliesEnabled ? 'Leader messages only' : 'Freeze conversation',
+        subtitle: repliesEnabled ? undefined : 'Disables replies for everyone except leaders.',
         rightItem: (
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
         ),
@@ -300,9 +304,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   return (
     <View style={styles.listContainer}>
-      <FlashList
+      <FlatList
         data={listData as SectionListData}
-        estimatedItemSize={52}
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item, index }) => {
           const [isStart, isEnd] = [
@@ -375,7 +378,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
               return null
           }
         }}
-        onEndReached={fetchNextPageOfMembers}
+        onEndReached={() => fetchNextPageOfMembers()}
       />
     </View>
   )

package/src/screens/conversation_new/components/form_list.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList, type FlashListProps } from '@shopify/flash-list'
+import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native'
 import { MemberResource } from '../../../types'
 import { Person, Text } from '../../../components/display'
 import { useTheme } from '../../../hooks'
@@ -8,7 +7,7 @@ import { useTheme } from '../../../hooks'
 interface FormListProps {
   memberData: MemberResource[]
   loadingMore?: boolean
-  FormContent?: FlashListProps<MemberResource>['ListHeaderComponent']
+  FormContent?: FlatListProps<MemberResource>['ListHeaderComponent']
   listEmptyText?: string
   onEndReached?: () => void
 }
@@ -23,7 +22,7 @@ export const FormList = ({
   const styles = useStyles()
 
   return (
-    <FlashList
+    <FlatList
       data={memberData}
       ListHeaderComponent={FormContent}
       renderItem={({ item }) => <Person person={item} style={styles.person} />}
@@ -31,7 +30,6 @@ export const FormList = ({
         loadingMore ? <Text style={styles.loadingMore}>Loading more...</Text> : null
       }
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={45}
       ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
       onEndReached={onEndReached}
     />

package/src/screens/conversation_screen.tsx

@@ -14,9 +14,9 @@ import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import {
-  LeaderDisabledRepliesBanner,
-  MemberDisabledRepliesBanner,
-} from '../components/conversation/disabled_replies_banners'
+  LeaderMessagesDisabledBanner,
+  MemberMessagesDisabledBanner,
+} from '../components/conversation/messages_disabled_banners'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { Message } from '../components/conversation/message'
@@ -35,7 +35,8 @@ import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { REPLIES_FEATURE_ENABLED } from '../utils'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
+import { ConversationContextProvider } from '../contexts/conversation_context'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -53,6 +54,19 @@ export type ConversationRouteProps = {
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
+  const { conversation_id, reply_root_id } = route.params
+
+  return (
+    <ConversationContextProvider
+      conversationId={conversation_id}
+      currentPageReplyRootId={reply_root_id ?? null}
+    >
+      <ConversationScreenContent route={route} />
+    </ConversationContextProvider>
+  )
+}
+
+function ConversationScreenContent({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
@@ -66,7 +80,13 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen: !!reply_root_id })
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+  const messagesWithSeparators = groupMessages({
+    ms: messages,
+    inReplyScreen: !!reply_root_id,
+    repliesEnabled,
+  })
   const noMessages = messagesWithSeparators.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
@@ -164,6 +184,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                   conversation_id={conversation_id}
                   latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
                   inReplyScreen={!!reply_root_id}
+                  repliesEnabled={repliesEnabled}
                 />
               )
             }}
@@ -172,8 +193,8 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
-        {!noMessages && <TypingIndicator conversationId={conversation_id} />}
-        {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
+        {!noMessages && <TypingIndicator />}
+        {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         {canReply ? (
           <MessageForm.Root
             replyRootAuthorFirstName={replyRootAuthorFirstName}
@@ -194,7 +215,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
             <MessageForm.SubmitButton />
           </MessageForm.Root>
         ) : (
-          <MemberDisabledRepliesBanner />
+          <MemberMessagesDisabledBanner />
         )}
       </KeyboardView>
     </View>
@@ -252,9 +273,14 @@ type ReplyShadowMessage = {
 interface GroupMessagesProps {
   ms: MessageResource[]
   inReplyScreen?: boolean
+  repliesEnabled?: boolean
 }
 
-export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
+export const groupMessages = ({
+  ms,
+  inReplyScreen,
+  repliesEnabled = false,
+}: GroupMessagesProps) => {
   let enrichedMessages: (MessageResource | DateSeparator | ReplyShadowMessage)[] = []
   let encounteredOneOfMyMessages = false
 
@@ -284,6 +310,24 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
       message.replyRootId &&
       !threadRoot &&
       (prevMessageDifferentThread || prevMessageIsDateSeparator)
+    const lastInGroup =
+      !nextMessage ||
+      nextMessageDifferentAuthor ||
+      nextMessageMoreThan5Minutes ||
+      nextMessageDifferentThread ||
+      nextMessageIsDateSeparator
+    const renderAuthor =
+      !message.mine &&
+      (!prevMessage ||
+        prevMessageDifferentAuthor ||
+        prevMessageMoreThan5Minutes ||
+        prevMessageDifferentThread ||
+        prevMessageIsDateSeparator)
+    const nextIsReplyShadowMessage =
+      repliesEnabled &&
+      nextMessageInThread &&
+      !nextMessageThreadRoot &&
+      (nextMessageDifferentThread || nextMessageIsDateSeparator)
 
     if (message.mine && !encounteredOneOfMyMessages) {
       encounteredOneOfMyMessages = true
@@ -291,17 +335,12 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     } else {
       message.myLatestInConversation = false
     }
-    message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes
-    message.renderAuthor =
-      !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes)
+    message.lastInGroup = lastInGroup
+    message.renderAuthor = renderAuthor
     message.threadPosition = null
     message.nextRendersAuthor = nextMessage?.renderAuthor
     message.isReplyShadowMessage = false
-    message.nextIsReplyShadowMessage =
-      REPLIES_FEATURE_ENABLED &&
-      nextMessageInThread &&
-      !nextMessageThreadRoot &&
-      (nextMessageDifferentThread || nextMessageIsDateSeparator)
+    message.nextIsReplyShadowMessage = nextIsReplyShadowMessage
 
     if (!inReplyScreen && inThread) {
       message.prevIsMyReply = prevMessage?.mine
@@ -314,13 +353,12 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
         message.threadPosition = null // ensures we don't render a connector for root replies that aren't immediately followed up a reply
       else if (firstInThread) message.threadPosition = 'first'
       else if (lastInThread) message.threadPosition = 'last'
-      else if (!prevMessageDifferentThread && !nextMessageDifferentThread)
-        message.threadPosition = 'center'
+      else message.threadPosition = 'center'
     }
 
     enrichedMessages.push(message)
 
-    if (insertReplyShadowMessage && REPLIES_FEATURE_ENABLED) {
+    if (insertReplyShadowMessage && repliesEnabled) {
       enrichedMessages.push({
         type: 'ReplyShadowMessage',
         id: `${message.id}-${message.replyRootId}`,

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
@@ -31,10 +30,9 @@ export const ConversationSelectGroupRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={groupsWithCreatePermission}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
@@ -30,10 +29,9 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

package/src/screens/message_actions_screen.tsx

@@ -14,7 +14,7 @@ import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard, Haptic } from '../utils/native_adapters'
 import { MessageResource } from '../types'
-import { REPLIES_FEATURE_ENABLED } from '../utils'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -76,6 +76,8 @@ function MessageActionsScreenContent({
   const navigation = useNavigation()
   const apiClient = useApiClient()
   const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const myReactions = message?.reactionCounts
     .filter(reaction => reaction.mine)
@@ -190,7 +192,7 @@ function MessageActionsScreenContent({
         ))}
       </View>
       <View style={styles.actions}>
-        {REPLIES_FEATURE_ENABLED && !inReplyScreen && (
+        {repliesEnabled && !inReplyScreen && (
           <FormSheet.Action
             onPress={handleReplyPress}
             title="Reply to message"

package/src/types/jolt_events/reaction_events.ts

@@ -6,6 +6,7 @@ interface BaseReactionEventData extends Record<string, unknown> {
     author_id: number
     conversation_id: number
     message_sort_key: string
+    reply_root_id?: string | null
     created_at: string
     organization_id: number
     value: ReactionCountResource['value']

package/src/types/jolt_events/typing_events.ts

@@ -13,4 +13,5 @@ export interface TypingBroadcastDataAttributes {
   author_id: number
   author_name: string
   id: string
+  reply_root_id: string | null
 }

package/src/types/resources/feature_resource.ts

@@ -0,0 +1,6 @@
+export interface FeatureResource {
+  type: 'Feature'
+  id: string
+  name: string
+  enabled: boolean
+}