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

package/src/components/conversation/message.tsx

@@ -1,6 +1,12 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
+import {
+  AccessibilityActionEvent,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'
 import {
@@ -22,11 +28,13 @@ import {
 import Animated from 'react-native-reanimated'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { MessageReadReceipts } from './message_read_receipts'
-import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
+import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { Haptic } from '../../utils/native_adapters'
 import { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from './reply_connectors'
-import { pluralize, REPLIES_FEATURE_ENABLED } from '../../utils'
+import { pluralize } from '../../utils'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
+import { some } from 'lodash'
+import { isNewMessage } from '../../utils/cache/messages_cache'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -36,6 +44,7 @@ interface MessageProps extends MessageResource {
   conversation_id: number
   latestReadMessageSortKey?: string
   inReplyScreen?: boolean
+  repliesEnabled?: boolean
 }
 
 export function Message({
@@ -43,9 +52,10 @@ export function Message({
   conversation_id,
   latestReadMessageSortKey,
   inReplyScreen,
+  repliesEnabled,
   ...message
 }: MessageProps) {
-  const { text, reactionCounts, pending, error } = message
+  const { text, reactionCounts, pending, error, attachments, author } = message
   const styles = useMessageStyles(message)
   const navigation = useNavigation()
   const { colors } = useTheme()
@@ -67,22 +77,21 @@ export function Message({
   })
 
   const metaProps = {
-    authorName: message.author.name,
+    authorName: author.name,
     createdAt: message.createdAt,
   }
 
   const renderAuthor = (!message.mine && message.renderAuthor) || false
   const showReplyCountButton =
-    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
+    !inReplyScreen && message.replyRootId === message.id && repliesEnabled
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
+  const replyToReplyRootMessage = repliesEnabled && !isReplyRootMessage && !!message.replyRootId
 
-  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
   const replyCountText = pluralize(message.replyCount, 'reply')
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
-  const replyRootAuthorName = message.replyRootId
-    ? replyRootMessage?.author.name
-    : message.author.name
+  const replyRootAuthorName = message.replyRootId ? replyRootMessage?.author.name : author.name
+  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
 
   const messageBottomMargin =
     message.lastInGroup || message.nextIsReplyShadowMessage
@@ -91,6 +100,11 @@ export function Message({
         ? 8
         : 4
 
+  const messageIsReplyLabel = replyToReplyRootMessage ? 'Reply' : ''
+  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
+  const replyCountLabel = isReplyRootMessage ? replyCountText : ''
+  const accessibilityLabel = `${author?.name || ''} ${messageIsReplyLabel} ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountLabel}`
+
   useEffect(() => {
     if (pending) {
       const timer = setTimeout(() => {
@@ -115,6 +129,10 @@ export function Message({
     }
   }
 
+  const handleMessagePress = () => {
+    setShowMessageMetaToggle(!showMessageMetaToggle)
+  }
+
   const handleMessageLongPress = () => {
     if (!isPersisted) return
 
@@ -127,6 +145,7 @@ export function Message({
       reply_root_author_name: replyRootAuthorName,
     })
   }
+
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
     Haptic.impactLight()
     navigation.navigate('Reactions', {
@@ -152,18 +171,36 @@ export function Message({
     navigation.navigate('ConversationReply', {
       conversation_id,
       reply_root_id: message.id,
-      reply_root_author_name: message.author.name,
+      reply_root_author_name: author.name,
     })
   }
 
+  const accessibilityActions = [
+    {
+      name: 'navigateToReplies',
+      label: 'Navigate to replies',
+    },
+  ]
+
+  const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
+    if (event.nativeEvent.actionName === 'navigateToReplies') {
+      handleNavigateToReplyPress()
+    }
+  }
+
   return (
     <Pressable
       onLongPress={handleMessageLongPress}
-      onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
+      onPress={handleMessagePress}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
       accessibilityHint="Long press to view message actions like reacting and copying."
+      accessibilityActions={isReplyRootMessage ? accessibilityActions : undefined}
+      onAccessibilityAction={isReplyRootMessage ? handleAccessibilityAction : undefined}
+      disabled={isDeletedReplyRootMessage}
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
@@ -171,7 +208,7 @@ export function Message({
             {renderAuthor ? (
               <Avatar
                 size={'md'}
-                sourceUri={message.author.avatar}
+                sourceUri={author.avatar}
                 style={styles.avatar}
                 maxFontSizeMultiplier={1}
                 minFontSizeMultiplier={1}
@@ -181,31 +218,41 @@ export function Message({
             ) : (
               <View style={styles.avatarPlaceholder} />
             )}
-            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+            {repliesEnabled && (
+              <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
+            )}
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
-          {renderAuthor && (
+          {renderAuthor && !isDeletedReplyRootMessage && (
             <Text variant="footnote" style={styles.authorName}>
-              {message.author.name}
+              {author.name}
             </Text>
           )}
           <View
             style={styles.messageBubble}
             onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
-            <ErrorBoundary>
-              <MessageAttachments
-                attachments={message.attachments}
-                metaProps={metaProps}
-                onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
-                onMessageLongPress={handleMessageLongPress}
-              />
-            </ErrorBoundary>
-            {messageText && (
+            {isDeletedReplyRootMessage ? (
               <View style={styles.messageText}>
-                <MessageMarkdown text={messageText} />
+                <Text style={styles.replyRootDeletedText}>{messageText}</Text>
               </View>
+            ) : (
+              <>
+                <ErrorBoundary>
+                  <MessageAttachments
+                    attachments={attachments}
+                    metaProps={metaProps}
+                    onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
+                    onMessageLongPress={handleMessageLongPress}
+                  />
+                </ErrorBoundary>
+                {text && (
+                  <View style={styles.messageText}>
+                    <MessageMarkdown text={text} />
+                  </View>
+                )}
+              </>
             )}
           </View>
           {showReplyCountButton && (
@@ -219,7 +266,7 @@ export function Message({
               {replyCountText}
             </TextButton>
           )}
-          {hasReactions && (
+          {hasReactions && !isDeletedReplyRootMessage && (
             <View style={styles.messageReactions}>
               {reactionCounts.map(reaction => (
                 <MessageReaction
@@ -232,7 +279,7 @@ export function Message({
               ))}
             </View>
           )}
-          {showMessageMeta && (
+          {showMessageMeta && !isDeletedReplyRootMessage && (
             <View style={styles.messageMeta}>
               {message.mine && !pending && !error && (
                 <MessageReadReceipts
@@ -282,7 +329,7 @@ export function Message({
             </View>
           )}
         </View>
-        {message.mine && (
+        {repliesEnabled && message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
       </Animated.View>
@@ -360,5 +407,9 @@ const useMessageStyles = ({ mine }: MessageResource) => {
     errorText: {
       color: colors.statusErrorText,
     },
+    replyRootDeletedText: {
+      color: colors.textColorDefaultSecondary,
+      fontStyle: 'italic',
+    },
   })
 }

package/src/components/conversation/message_form.tsx

@@ -1,9 +1,4 @@
-import {
-  RouteProp,
-  useNavigation,
-  useTheme as useNavigationTheme,
-  useRoute,
-} from '@react-navigation/native'
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import {
   Platform,
@@ -30,10 +25,10 @@ import { ChatContext } from '../../contexts/chat_context'
 import { Haptic, ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
 import {
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
-  REPLIES_FEATURE_ENABLED,
   platformFontWeightMedium,
   platformPressedOpacityStyle,
 } from '../../utils'
+import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useMessageDraft } from '../../hooks/use_message_draft'
 import {
@@ -319,9 +314,7 @@ function MessageFormInput() {
     React.useContext(MessageFormContext)
   const attachmentError = attachmentUploader?.errorMessage
 
-  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
-  const conversationId = route.params.conversation_id
-  const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)
+  const broadcastTypingStatus = useBroadcastTypingStatus()
 
   const handleTextChange = (newText: string) => {
     setText(newText)
@@ -566,9 +559,11 @@ function EditingIndicator() {
 function ReplyIndicator() {
   const { replyRootId, replyRootAuthorFirstName } = React.useContext(MessageFormContext)
   const navigation = useNavigation()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
   const title = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : 'Reply'
 
-  if (!REPLIES_FEATURE_ENABLED || !replyRootId) return null
+  if (!repliesEnabled || !replyRootId) return null
 
   return (
     <FormIndicatorRow

package/src/components/conversation/messages_disabled_banners.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, View, type ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Text } from '../display'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useFeatures } from '../../hooks/use_features'
+import { availableFeatures } from '../../hooks/use_features'
+
+export const LeaderMessagesDisabledBanner = () => {
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+
+  const description = repliesEnabled
+    ? 'Only leaders can send messages in this conversation.'
+    : 'Replies are frozen for everyone else.'
+
+  return <MessagesDisabledBanner description={description} />
+}
+
+export const MemberMessagesDisabledBanner = () => {
+  const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
+
+  const description = repliesEnabled
+    ? 'Only leaders can send messages, but you can still add reactions.'
+    : 'Replies have been disabled by a leader, but you can still add reactions.'
+
+  return <MessagesDisabledBanner description={description} style={styles.memberBanner} />
+}
+
+interface MessagesDisabledBannerProps {
+  description: string
+  style?: ViewStyle
+}
+
+const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerProps) => {
+  const styles = useStyles()
+
+  return (
+    <View style={[styles.baseBanner, style]}>
+      <Text style={styles.text} variant="tertiary">
+        {description}
+      </Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    baseBanner: {
+      paddingHorizontal: 16,
+      paddingVertical: 4,
+      backgroundColor: colors.statusNeutralComposedBackground,
+      borderTopWidth: 1,
+      borderTopColor: colors.borderColorDefaultBase,
+    },
+    text: {
+      textAlign: 'center',
+    },
+    memberBanner: {
+      paddingTop: 16,
+      paddingBottom: 16 + bottom,
+      marginBottom: -bottom,
+    },
+  })
+}

package/src/components/conversation/reply_connectors.tsx

@@ -6,7 +6,6 @@ import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
 } from '../../utils/styles'
-import { REPLIES_FEATURE_ENABLED } from '../../utils'
 
 const MY_REPLY_CONNECTOR_WIDTH = 38
 const CONNECTOR_BORDER_WIDTH = 4
@@ -22,7 +21,6 @@ export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConne
   const styles = useStyles()
   const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message
 
-  if (!REPLIES_FEATURE_ENABLED) return null
   if (messageBubbleHeight === 0) return null // Prevents UI shifting
 
   const connectorMap: Record<string, React.ReactNode | null> = {
@@ -59,7 +57,6 @@ export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnecto
   const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =
     message
 
-  if (!REPLIES_FEATURE_ENABLED) return null
   if (messageBubbleHeight === 0) return null // Prevents UI shifting
 
   const connectorMap: Record<string, React.ReactNode | null> = {

package/src/components/conversation/reply_shadow_message.tsx

@@ -25,6 +25,8 @@ import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 import { assertKeysAreNumbers, pluralize } from '../../utils'
 import { useNavigation } from '@react-navigation/native'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
+import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
+import { some } from 'lodash'
 
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
@@ -61,10 +63,11 @@ interface ShadowMessageContentProps extends MessageResource {
 }
 
 function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
-  const { text, deletedAt } = message
+  const { text, deletedAt, author, attachments } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
   const navigation = useNavigation()
+  const timestamp = useLiveRelativeTime(message.createdAt)
 
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
@@ -82,12 +85,16 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
     })
   }
 
+  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
+  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountText}`
+
   return (
     <Pressable
       android_ripple={{ color: colors.androidRippleNeutral }}
       onPress={handleNavigateToReplies}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
+      accessibilityLabel={accessibilityLabel}
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
@@ -112,7 +119,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
             style={styles.messageBubble}
             onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
-            <MessageAttachmentImagery attachments={message.attachments} />
+            <MessageAttachmentImagery attachments={attachments} />
             {text && (
               <Text
                 variant="footnote"

package/src/components/conversation/typing_indicator.tsx

@@ -41,16 +41,12 @@ const TypingDots = () => {
   )
 }
 
-interface TypingIndicatorProps {
-  conversationId: number
-}
-
 /**
  * Component to display typing indicators in a conversation
  * Shows "X is typing..." with animated dots
  */
-export const TypingIndicator = ({ conversationId }: TypingIndicatorProps) => {
-  const typingPeople = useTypingIndicators(conversationId)
+export const TypingIndicator = () => {
+  const typingPeople = useTypingIndicators()
   const styles = useStyles()
   const enabled = typingPeople.length > 0
 

package/src/components/conversations/conversation_actions.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import {
   AccessibilityActionEvent,
   Platform,
+  Pressable,
   StyleProp,
   StyleSheet,
   View,
@@ -10,7 +11,6 @@ import {
 import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
-import { Pressable } from 'react-native-gesture-handler'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme, useCreateAndroidRippleColor } from '../../hooks'
 import {

package/src/components/conversations/conversations.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
-import { FlashList } from '@shopify/flash-list'
 import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types'
@@ -35,7 +34,7 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
 
   const showBadges = !chat_group_graph_id
 
-  const data: FlashListItem[] = useMemo(() => {
+  const data: FlatListItem[] = useMemo(() => {
     if (isLoading) {
       return loadingPlaceholder
     }
@@ -54,9 +53,8 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
 
   return (
     <View style={styles.container}>
-      <FlashList
+      <FlatList
         data={data}
-        estimatedItemSize={97}
         keyExtractor={item => item.id.toString()}
         contentContainerStyle={styles.contentContainer}
         onRefresh={refetch}
@@ -114,18 +112,18 @@ const useStyles = () => {
   })
 }
 
-interface FlashListLoadingItem {
+interface FlatListLoadingItem {
   type: 'loading'
   id: string
 }
-interface FlashListConversationItem {
+interface FlatListConversationItem {
   type: 'conversation'
   resource: ConversationResource
   id: number
 }
-type FlashListItem = FlashListLoadingItem | FlashListConversationItem
+type FlatListItem = FlatListLoadingItem | FlatListConversationItem
 
-const loadingPlaceholder: FlashListItem[] = Array.from({ length: 5 }, (_, i) => ({
+const loadingPlaceholder: FlatListItem[] = Array.from({ length: 5 }, (_, i) => ({
   type: 'loading',
   id: `loading${i}`,
 }))

package/src/contexts/conversation_context.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+
+interface ConversationContextValue {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+interface ConversationContextProviderProps extends PropsWithChildren {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+const ConversationContext = createContext<ConversationContextValue>({
+  conversationId: 0,
+  currentPageReplyRootId: null,
+})
+
+export const ConversationContextProvider = ({
+  children,
+  conversationId,
+  currentPageReplyRootId,
+}: ConversationContextProviderProps) => {
+  const value = useMemo(
+    () => ({
+      conversationId,
+      currentPageReplyRootId,
+    }),
+    [conversationId, currentPageReplyRootId]
+  )
+
+  return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>
+}
+
+export const useConversationContext = () => useContext(ConversationContext)

package/src/hooks/use_broadcast_typing_status.ts

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react'
 import { useApiClient } from './use_api_client'
+import { useConversationContext } from '../contexts/conversation_context'
 
 const THROTTLE_INTERVAL = 3000 // 3 seconds
 
@@ -10,7 +11,8 @@ const THROTTLE_INTERVAL = 3000 // 3 seconds
  * after receiving a typing event. This is how we can show a steady typing indicator even
  * if the user types once every 2.9 seconds.
  */
-export const useBroadcastTypingStatus = (conversationId: string | number) => {
+export const useBroadcastTypingStatus = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const apiClient = useApiClient()
   const lastBroadcastTime = useRef<number>(0)
 
@@ -26,12 +28,14 @@ export const useBroadcastTypingStatus = (conversationId: string | number) => {
     apiClient.chat
       .post({
         url: `/me/conversations/${conversationId}/broadcast_typing_status`,
-        data: { data: { type: 'TypingStatus', attributes: {} } },
+        data: {
+          data: { type: 'TypingStatus', attributes: { reply_root_id: currentPageReplyRootId } },
+        },
       })
       .catch(error => {
         console.error('Failed to broadcast typing status:', error)
       })
-  }, [apiClient, conversationId])
+  }, [apiClient.chat, conversationId, currentPageReplyRootId])
 
   return broadcastTypingStatus
 }

package/src/hooks/use_conversation_messages.ts

@@ -16,7 +16,9 @@ export const useConversationMessages = (
     () =>
       data
         .filter(
-          message => !message.deletedAt && (message.attachments?.length || message.text?.length)
+          message =>
+            (!message.deletedAt || message.replyRootId) &&
+            (message.attachments?.length || message.text?.length)
         )
         .sort((a, b) => -a.id.localeCompare(b.id)),
     [data]