@planningcenter/chat-react-native 3.17.0-rc.0 → 3.17.0

package/src/components/conversation/reply_connectors.tsx

@@ -10,6 +10,8 @@ import { REPLIES_FEATURE_ENABLED } from '../../utils'
 
 const MY_REPLY_CONNECTOR_WIDTH = 38
 const CONNECTOR_BORDER_WIDTH = 4
+const OFFSET_CONNECTOR_CONTAINER = CONNECTOR_BORDER_WIDTH / 2 // Accounts for the border width ensuring the connectors are centered under the avatar
+export const AVATAR_CONNECTOR_SPACING = 8
 
 interface ReplyConnectorProps {
   message: MessageResource
@@ -18,8 +20,10 @@ interface ReplyConnectorProps {
 
 export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
   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> = {
     shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,
@@ -29,11 +33,13 @@ export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConne
   }
 
   const getConnectorKey = () => {
-    const { threadPosition, renderAuthor } = message
-
     if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'
     if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'
-    if ((threadPosition === 'first' && renderAuthor) || threadPosition === 'center')
+    if (
+      (threadPosition === 'first' && renderAuthor) ||
+      threadPosition === 'center' ||
+      isReplyShadowMessage
+    )
       return 'verticalLine'
     return 'default'
   }
@@ -41,13 +47,20 @@ export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConne
   const ConnectorComponent = connectorMap[getConnectorKey()]
   if (!ConnectorComponent) return null
 
-  return <View style={styles.theirReplyConnectorContainer}>{ConnectorComponent}</View>
+  const spacerStyle = nextRendersAuthor ? styles.theirReplyConnectorSpacer : null
+
+  return (
+    <View style={[styles.theirReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
+  )
 }
 
 export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
   const styles = useStyles()
+  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> = {
     longTailCurve: (
@@ -63,14 +76,12 @@ export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnecto
       />
     ),
     verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,
-    swirl: <SwirlConnector style={styles.myReplyConnectorPosition} />,
+    swirl: <SwirlConnector style={styles.myReplyConnectorPosition} height={messageBubbleHeight} />,
     default: null,
   }
 
   const getConnectorKey = () => {
-    const { threadPosition, prevIsMyReply, nextIsMyReply } = message
-
-    if (threadPosition === 'first') return 'longHeadCurve'
+    if (threadPosition === 'first' || isReplyShadowMessage) return 'longHeadCurve'
     if (threadPosition === 'center' && prevIsMyReply && nextIsMyReply) return 'verticalLine'
     if (threadPosition === 'center' && (!prevIsMyReply || !nextIsMyReply)) return 'swirl'
     if (threadPosition === 'last') return 'longTailCurve'
@@ -81,7 +92,9 @@ export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnecto
   const ConnectorComponent = connectorMap[getConnectorKey()]
   if (!ConnectorComponent) return null
 
-  return <View style={styles.myReplyConnectorContainer}>{ConnectorComponent}</View>
+  const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null
+
+  return <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
 }
 
 function VerticalLineConnector({ style }: { style?: ViewStyle }) {
@@ -109,21 +122,23 @@ function ShortTailCurveConnector({ height }: { height: number }) {
   return <View style={[styles.shortTailCurveConnector, { height }]} />
 }
 
-function SwirlConnector({ style }: { style?: ViewStyle }) {
+function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {
   const styles = useStyles()
   const { colors } = useTheme()
-  const borderColor = colors.borderColorDefaultBase
 
   return (
     <View style={[styles.swirlConnectorContainer, style]}>
-      <View style={styles.swirlConnectorVerticalLineHead} />
-      <Svg width={27} height={34} fill="none">
-        <Path
-          stroke={borderColor}
-          strokeWidth={CONNECTOR_BORDER_WIDTH}
-          d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
-        />
-      </Svg>
+      <View style={{ height }}>
+        <View style={styles.swirlConnectorVerticalLineHead} />
+        <Svg width={27} height={34} fill="none">
+          <Path
+            stroke={colors.borderColorDefaultBase}
+            strokeWidth={CONNECTOR_BORDER_WIDTH}
+            d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
+          />
+        </Svg>
+        <View style={styles.swirlConnectorVerticalLineTail} />
+      </View>
       <View style={styles.swirlConnectorVerticalLineTail} />
     </View>
   )
@@ -136,19 +151,26 @@ const useStyles = () => {
   return StyleSheet.create({
     theirReplyConnectorContainer: {
       width: '50%',
+      marginRight: OFFSET_CONNECTOR_CONTAINER,
       alignSelf: 'flex-end',
       flex: 1,
     },
+    theirReplyConnectorSpacer: {
+      paddingBottom: AVATAR_CONNECTOR_SPACING,
+    },
     myReplyConnectorContainer: {
       width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
       position: 'absolute',
-      left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL - OFFSET_CONNECTOR_CONTAINER,
       top: 0,
       bottom: 0,
     },
     myReplyConnectorPosition: {
       left: '50%',
     },
+    myReplyConnectorSpacer: {
+      bottom: AVATAR_CONNECTOR_SPACING,
+    },
     verticalLineConnector: {
       flex: 1,
       borderLeftWidth: CONNECTOR_BORDER_WIDTH,

package/src/components/conversation/{shadow_message.tsx → reply_shadow_message.tsx}

@@ -22,14 +22,45 @@ import {
 } from '../../utils/styles'
 import Animated from 'react-native-reanimated'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
-import { assertKeysAreNumbers } from '../../utils'
+import { assertKeysAreNumbers, pluralize } from '../../utils'
 import { useNavigation } from '@react-navigation/native'
+import { useConversationMessage } from '../../hooks/use_conversation_message'
 
-interface ShadowMessageProps extends MessageResource {
+interface ReplyShadowMessageProps extends MessageResource {
+  messageId: string
   conversation_id: number
+  inReplyScreen?: boolean
+  isReplyShadowMessage: boolean
+  nextRendersAuthor: boolean
 }
 
-export function ShadowMessage({ conversation_id, ...message }: ShadowMessageProps) {
+export function ReplyShadowMessage({
+  conversation_id,
+  inReplyScreen,
+  messageId,
+  isReplyShadowMessage,
+  nextRendersAuthor,
+}: ReplyShadowMessageProps) {
+  const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })
+
+  if (inReplyScreen) return null
+  if (isLoading) return <ShadowMessageFallback text="Loading..." />
+  if (isError || !message) return <ShadowMessageFallback text="Message not found" />
+
+  const enrichedMessage = {
+    ...message,
+    isReplyShadowMessage,
+    nextRendersAuthor,
+  }
+
+  return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />
+}
+
+interface ShadowMessageContentProps extends MessageResource {
+  conversation_id: number
+}
+
+function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
   const { text } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
@@ -39,12 +70,13 @@ export function ShadowMessage({ conversation_id, ...message }: ShadowMessageProp
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
   const scalableNumberOfLines = useScalableNumberOfLines(2)
+  const replyCountText = pluralize(message.replyCount, 'reply')
 
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
       conversation_id,
-      reply_root_id: message.id,
-      // TODO: Add a way to pass the reply root author's name
+      reply_root_id: message.replyRootId,
+      reply_root_author_name: message.author.name,
     })
   }
 
@@ -89,7 +121,7 @@ export function ShadowMessage({ conversation_id, ...message }: ShadowMessageProp
           </View>
           <View style={styles.messageMeta}>
             <Text variant="footnote" style={styles.replyCountText}>
-              {message.replyCount} replies
+              {replyCountText}
             </Text>
           </View>
         </View>
@@ -203,6 +235,23 @@ function MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {
   )
 }
 
+// TODO: The mine prop is not used yet, but in the future we will be adding a way to find the `mine` value for this fallback.
+function ShadowMessageFallback({ text, mine }: { text: string; mine?: boolean }) {
+  const styles = useStyles({ mine })
+
+  return (
+    <View style={styles.message}>
+      <View style={styles.messageContent}>
+        <View style={styles.messageBubble}>
+          <Text variant="footnote" style={styles.messageText}>
+            {text}
+          </Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
 interface StylesProps {
   imageWidth?: number
   imageHeight?: number

package/src/hooks/use_conversation_message.ts

@@ -0,0 +1,25 @@
+import { MessageResource } from '../types'
+import { useApiGet } from './use_api'
+import { getMessageRequestArgs, getMessageQueryKey } from '../utils/request/get_message'
+
+export const useConversationMessage = ({
+  conversation_id,
+  messageId,
+  enabled,
+}: {
+  conversation_id: number
+  messageId: string
+  enabled?: boolean
+}) => {
+  const {
+    data: message,
+    isError,
+    isLoading,
+  } = useApiGet<MessageResource>({
+    ...getMessageRequestArgs({ conversation_id, messageId }),
+    enabled,
+  })
+  const queryKey = getMessageQueryKey({ conversation_id, messageId })
+
+  return { message, isError, isLoading, queryKey }
+}

package/src/hooks/use_conversation_messages.ts

@@ -1,13 +1,10 @@
 import { useMemo } from 'react'
 import { MessageResource } from '../types'
-import {
-  getRequestQueryKey,
-  SuspensePaginatorOptions,
-  useSuspensePaginator,
-} from './use_suspense_api'
+import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 
 export const useConversationMessages = (
-  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string },
+  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
   opts?: SuspensePaginatorOptions
 ) => {
   const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
@@ -27,50 +24,3 @@ export const useConversationMessages = (
 
   return { messages, refetch, isRefetching, fetchNextPage, queryKey }
 }
-
-export const getMessagesRequestArgs = ({
-  conversation_id,
-  reply_root_id,
-}: {
-  conversation_id: number
-  reply_root_id?: string
-}) => {
-  const url = reply_root_id
-    ? `/me/conversations/${conversation_id}/messages/${reply_root_id}/replies`
-    : `/me/conversations/${conversation_id}/messages`
-
-  return {
-    url,
-    data: {
-      perPage: 25,
-      fields: {
-        Message: [
-          'text',
-          'text_edited_at',
-          'mine',
-          'attachments',
-          'created_at',
-          'deleted_at',
-          'author',
-          'reaction_counts',
-          'reply_count',
-          'reply_root',
-        ],
-        Person: ['name', 'avatar'],
-        ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
-      },
-      include: ['author', 'reaction_counts'],
-    },
-  }
-}
-
-export const getMessagesQueryKey = ({
-  conversation_id,
-  reply_root_id,
-}: {
-  conversation_id: number
-  reply_root_id?: string
-}) => {
-  const requestArgs = getMessagesRequestArgs({ conversation_id, reply_root_id })
-  return getRequestQueryKey(requestArgs)
-}

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -12,7 +12,7 @@ import { transformMessageEventDataToMessageResource } from '../utils/jolt/transf
 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/messages'
+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'

package/src/hooks/use_message_create_or_update.ts

@@ -1,5 +1,5 @@
 import { InfiniteData, useMutation } from '@tanstack/react-query'
-import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { useApiClient } from './use_api_client'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { chatQueryClient } from '../contexts/api_provider'
@@ -18,7 +18,7 @@ import { startMessageCreationTracking } from '../utils/performance_tracking'
 interface Props {
   conversationId: number
   message?: MessageResource
-  replyRootId?: string
+  replyRootId?: string | null
 }
 
 export function useMessageCreateOrUpdate({ conversationId, message, replyRootId }: Props) {

package/src/hooks/use_message_reaction_toggle.ts

@@ -2,7 +2,7 @@ import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query
 import { useCallback } from 'react'
 import { Alert } from 'react-native'
 import { useApiClient } from './use_api_client'
-import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { updateRecordInPagesData } from '../utils'

package/src/navigation/index.tsx

@@ -187,9 +187,9 @@ export const ChatStack = createNativeStackNavigator({
     },
     ConversationReply: {
       screen: ConversationScreen,
-      options: {
-        title: 'Reply', // TODO: Get root reply author
-      },
+      options: ({ route }) => ({
+        title: (route.params as ConversationRouteProps)?.title ?? 'Reply',
+      }),
     },
     TeamConversation: {
       screen: TeamConversationScreen,

package/src/screens/conversation_screen.tsx

@@ -34,11 +34,13 @@ import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 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'
 
 export type ConversationRouteProps = {
   conversation_id: number
-  reply_root_id?: string
-  replyRootAuthor?: string
+  reply_root_id?: string | null
+  reply_root_author_name?: string
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
@@ -53,7 +55,8 @@ export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id, reply_root_id } = route.params
+  const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
+    route.params
   const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
@@ -71,6 +74,10 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
   const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
+  const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
+  const replyHeaderTitle = replyRootAuthorFirstName
+    ? `Reply to ${replyRootAuthorFirstName}`
+    : 'Reply'
 
   const listRef = useRef<FlatList>(null)
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
@@ -87,14 +94,18 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   }, [])
 
   useEffect(() => {
-    if (reply_root_id) return
-
-    navigation.setParams({
-      title: title,
-      badge: badges?.[0],
-      deleted: conversation?.deleted,
-    })
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id])
+    if (reply_root_id) {
+      navigation.setParams({
+        title: replyHeaderTitle,
+      })
+    } else {
+      navigation.setParams({
+        title: title,
+        badge: badges?.[0],
+        deleted: conversation?.deleted,
+      })
+    }
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -136,6 +147,16 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                 return <InlineDateSeparator {...item} />
               }
 
+              if (item.type === 'ReplyShadowMessage') {
+                return (
+                  <ReplyShadowMessage
+                    {...item}
+                    conversation_id={conversation_id}
+                    inReplyScreen={!!reply_root_id}
+                  />
+                )
+              }
+
               return (
                 <Message
                   {...item}
@@ -155,6 +176,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
         {canReply ? (
           <MessageForm.Root
+            replyRootAuthorFirstName={replyRootAuthorFirstName}
             conversation={conversation}
             replyRootId={reply_root_id}
             currentlyEditingMessage={currentlyEditingMessage}
@@ -219,13 +241,21 @@ const useDateSeparatorStyles = () => {
   })
 }
 
+type ReplyShadowMessage = {
+  type: 'ReplyShadowMessage'
+  id: string
+  messageId: string
+  isReplyShadowMessage: boolean
+  nextRendersAuthor: boolean
+}
+
 interface GroupMessagesProps {
   ms: MessageResource[]
   inReplyScreen?: boolean
 }
 
 export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
-  let enrichedMessages: (MessageResource | DateSeparator)[] = []
+  let enrichedMessages: (MessageResource | DateSeparator | ReplyShadowMessage)[] = []
   let encounteredOneOfMyMessages = false
 
   ms.forEach((message, i) => {
@@ -233,7 +263,9 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     const nextMessage = ms[i - 1]
     const date = moment(message.createdAt).format('YYYY-MM-DD')
     const inThread = message.replyRootId !== null
+    const nextMessageInThread = nextMessage?.replyRootId !== null
     const threadRoot = message.replyRootId === message.id
+    const nextMessageThreadRoot = nextMessage?.replyRootId === nextMessage?.id
     const prevMessageDifferentThread = message.replyRootId !== prevMessage?.replyRootId
     const nextMessageDifferentThread = message.replyRootId !== nextMessage?.replyRootId
     const prevMessageDifferentAuthor = message.author?.id !== prevMessage?.author?.id
@@ -244,8 +276,14 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     const nextMessageMoreThan5Minutes =
       nextMessage &&
       new Date(nextMessage.createdAt).getTime() - new Date(message.createdAt).getTime() > 60000 * 5
+    const prevMessageIsDateSeparator =
+      prevMessage && date !== moment(prevMessage.createdAt).format('YYYY-MM-DD')
     const nextMessageIsDateSeparator =
       nextMessage && date !== moment(nextMessage.createdAt).format('YYYY-MM-DD')
+    const insertReplyShadowMessage =
+      message.replyRootId &&
+      !threadRoot &&
+      (prevMessageDifferentThread || prevMessageIsDateSeparator)
 
     if (message.mine && !encounteredOneOfMyMessages) {
       encounteredOneOfMyMessages = true
@@ -257,6 +295,13 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     message.renderAuthor =
       !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes)
     message.threadPosition = null
+    message.nextRendersAuthor = nextMessage?.renderAuthor
+    message.isReplyShadowMessage = false
+    message.nextIsReplyShadowMessage =
+      REPLIES_FEATURE_ENABLED &&
+      nextMessageInThread &&
+      !nextMessageThreadRoot &&
+      (nextMessageDifferentThread || nextMessageIsDateSeparator)
 
     if (!inReplyScreen && inThread) {
       message.prevIsMyReply = prevMessage?.mine
@@ -274,6 +319,17 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
     }
 
     enrichedMessages.push(message)
+
+    if (insertReplyShadowMessage && REPLIES_FEATURE_ENABLED) {
+      enrichedMessages.push({
+        type: 'ReplyShadowMessage',
+        id: `${message.id}-${message.replyRootId}`,
+        messageId: message.replyRootId!,
+        isReplyShadowMessage: true,
+        nextRendersAuthor: message?.renderAuthor,
+      })
+    }
+
     if (!prevMessage || date !== moment(prevMessage.createdAt).format('YYYY-MM-DD')) {
       enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date })
     }

package/src/screens/message_actions_screen.tsx

@@ -23,13 +23,20 @@ export const MessageActionsScreenOptions = getFormSheetScreenOptions({
 
 export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
+  reply_root_author_name?: string
   conversation_id: number
   canDeleteNonAuthoredMessages?: boolean
   inReplyScreen?: boolean
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
-  const { conversation_id, message_id, canDeleteNonAuthoredMessages, inReplyScreen } = route.params
+  const {
+    conversation_id,
+    message_id,
+    canDeleteNonAuthoredMessages,
+    inReplyScreen,
+    reply_root_author_name,
+  } = route.params
 
   const { messages, refetch } = useConversationMessages(
     { conversation_id },
@@ -46,6 +53,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
       inReplyScreen={inReplyScreen}
+      replyRootAuthorName={reply_root_author_name}
     />
   )
 }
@@ -56,12 +64,14 @@ function MessageActionsScreenContent({
   canDeleteNonAuthoredMessages,
   refetchMessages,
   inReplyScreen,
+  replyRootAuthorName,
 }: {
   message: MessageResource
   conversation_id: number
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
   inReplyScreen?: boolean
+  replyRootAuthorName?: string
 }) {
   const navigation = useNavigation()
   const apiClient = useApiClient()
@@ -95,10 +105,10 @@ function MessageActionsScreenContent({
       navigation.navigate('ConversationReply', {
         conversation_id,
         reply_root_id: message.replyRootId || message.id,
-        // TODO: Update title param with reply root author
+        reply_root_author_name: replyRootAuthorName,
       })
     })
-  }, [navigation, conversation_id, message.id, message.replyRootId])
+  }, [navigation, conversation_id, message.id, message.replyRootId, replyRootAuthorName])
 
   const handleCopyPress = () => {
     Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')

package/src/types/resources/message.ts

@@ -26,6 +26,9 @@ export interface MessageResource {
   threadPosition?: 'first' | 'center' | 'last' | null
   prevIsMyReply?: boolean
   nextIsMyReply?: boolean
+  nextRendersAuthor?: boolean
+  isReplyShadowMessage?: boolean
+  nextIsReplyShadowMessage?: boolean
 
   // Properties for mutation state
   pending?: boolean // Indicates if the message is optimistically created and pending server response

package/src/utils/cache/optimistically_create_message.ts

@@ -1,6 +1,6 @@
 import { InfiniteData } from '@tanstack/react-query'
 import { ApiCollection, CurrentPersonResource, MessageResource } from '../../types'
-import { getMessagesQueryKey } from '../../hooks/use_conversation_messages'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
 import { chatQueryClient } from '../../contexts/api_provider'
 import { updateOrCreateRecordInPagesData } from './page_mutations'
 import { convertAttachmentsForCreate } from '../convert_attachments_for_create'

package/src/utils/cache/optimistically_update_message.ts

@@ -1,6 +1,6 @@
 import { InfiniteData } from '@tanstack/react-query'
 import { ApiCollection, MessageResource } from '../../types'
-import { getMessagesQueryKey } from '../../hooks/use_conversation_messages'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
 import { chatQueryClient } from '../../contexts/api_provider'
 import { updateOrCreateRecordInPagesData } from './page_mutations'
 

package/src/utils/pluralize.ts

@@ -1,4 +1,4 @@
-const irregularInflections: Record<string, string> = { person: 'people' }
+const irregularInflections: Record<string, string> = { person: 'people', reply: 'replies' }
 
 export function pluralize(count: number, singularWord: string, includeCount = true) {
   const plural = count !== 1