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

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,40 +20,47 @@ interface ReplyConnectorProps {
 
 export function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
   const styles = useStyles()
+  const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message
 
   if (!REPLIES_FEATURE_ENABLED) return null
-
-  // TODO: Need to remove, just adding this to remove the lint warning about message being unused
-  console.log('message', message)
+  if (messageBubbleHeight === 0) return null // Prevents UI shifting
 
   const connectorMap: Record<string, React.ReactNode | null> = {
     shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,
+    shortHeadCurve: <ShortHeadCurveConnector height={messageBubbleHeight / 2} />,
     verticalLine: <VerticalLineConnector />,
     default: null,
   }
 
-  // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
   const getConnectorKey = () => {
-    // TODO: if (message.previousMessageIsTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage) return 'shortTailCurve'
-    // TODO: if (message.isRootMessage || (message.isTheirReplyMessage && message.nextMessageIsTheirReplyMessage) || (message.isTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage && !message.nextMessageIsMyMessage)) return 'verticalLine'
+    if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'
+    if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'
+    if (
+      (threadPosition === 'first' && renderAuthor) ||
+      threadPosition === 'center' ||
+      isReplyShadowMessage
+    )
+      return 'verticalLine'
     return 'default'
   }
 
   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>
+  )
 }
 
-// TODO: Refactor how we choose the correct connector once we have the logic in place
 export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {
   const styles = useStyles()
+  const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =
+    message
 
   if (!REPLIES_FEATURE_ENABLED) return null
-
-  // TODO: Need to remove, just adding this to remove the lint warning about message being unused
-  console.log('message', message)
+  if (messageBubbleHeight === 0) return null // Prevents UI shifting
 
   const connectorMap: Record<string, React.ReactNode | null> = {
     longTailCurve: (
@@ -67,24 +76,25 @@ 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,
   }
 
-  // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
   const getConnectorKey = () => {
-    // TODO: if (message.currentMessageIsReply && (message.nextMessageIsNotReplyMessage || message.nextMessageIsDifferentReplyRootId)) return 'longTailCurve'
-    // TODO: if (message.currentMessageIsReplyRoot && message.nextMessageIsMyReply) return 'longHeadCurve'
-    // TODO: if (message.currentMessageIsReply && message.nextMessageIsReply) return 'verticalLine'
-    // TODO: if (message.currentMessageIsReply && message.previousMessageSomeoneElseReply && (message.nextMessageIsSomeoneElseReply || message.nextMessageIsMyReply)) return 'swirl'
+    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'
+
     return 'default'
   }
 
   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 }) {
@@ -102,26 +112,33 @@ function LongTailCurveConnector({ height, style }: { height: number; style?: Vie
   return <View style={[styles.longTailCurveConnector, { height }, style]} />
 }
 
+function ShortHeadCurveConnector({ height }: { height: number }) {
+  const styles = useStyles()
+  return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]} />
+}
+
 function ShortTailCurveConnector({ height }: { height: number }) {
   const styles = useStyles()
   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>
   )
@@ -134,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,
@@ -167,6 +191,13 @@ const useStyles = () => {
       borderBottomWidth: CONNECTOR_BORDER_WIDTH,
       borderBottomLeftRadius: 16,
     },
+    shortHeadCurveConnector: {
+      borderColor: borderColor,
+      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+      borderTopWidth: CONNECTOR_BORDER_WIDTH,
+      borderTopLeftRadius: 16,
+      flex: 1,
+    },
     shortTailCurveConnector: {
       borderColor: borderColor,
       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,11 +70,12 @@ 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,
+      reply_root_id: message.replyRootId,
       // TODO: Add a way to pass the reply root author's 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,20 @@
+import { MessageResource } from '../types'
+import { useApiGet } from './use_api'
+import { getMessageRequestArgs, getMessageQueryKey } from '../utils/request/get_message'
+
+export const useConversationMessage = ({
+  conversation_id,
+  messageId,
+}: {
+  conversation_id: number
+  messageId: string
+}) => {
+  const {
+    data: message,
+    isError,
+    isLoading,
+  } = useApiGet<MessageResource>(getMessageRequestArgs({ conversation_id, messageId }))
+  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/screens/conversation_screen.tsx

@@ -34,10 +34,12 @@ 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
+  reply_root_id?: string | null
   replyRootAuthor?: string
   chat_group_graph_id?: string
   clear_input?: boolean
@@ -63,7 +65,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages(messages)
+  const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen: !!reply_root_id })
   const noMessages = messagesWithSeparators.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
@@ -136,6 +138,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}
@@ -219,14 +231,33 @@ const useDateSeparatorStyles = () => {
   })
 }
 
-export const groupMessages = (ms: MessageResource[]) => {
-  let enrichedMessages: (MessageResource | DateSeparator)[] = []
+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 | ReplyShadowMessage)[] = []
   let encounteredOneOfMyMessages = false
 
   ms.forEach((message, i) => {
     const prevMessage = ms[i + 1]
     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
     const nextMessageDifferentAuthor = message.author?.id !== nextMessage?.author?.id
     const prevMessageMoreThan5Minutes =
@@ -235,6 +266,14 @@ export const groupMessages = (ms: MessageResource[]) => {
     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
@@ -245,8 +284,42 @@ export const groupMessages = (ms: MessageResource[]) => {
     message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes
     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
+      message.nextIsMyReply = nextMessage?.mine
+
+      const firstInThread = threadRoot
+      const lastInThread = nextMessageDifferentThread || nextMessageIsDateSeparator
+
+      if (firstInThread && lastInThread)
+        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'
+    }
 
     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/types/resources/message.ts

@@ -23,6 +23,12 @@ export interface MessageResource {
   renderTime?: boolean
   myLatestInConversation?: boolean
   lastInGroup?: boolean
+  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

package/src/utils/request/get_message.ts

@@ -0,0 +1,32 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+import { getMessageFields, getMessagesInclude } from './messages_data_options'
+
+export const getMessageRequestArgs = ({
+  conversation_id,
+  messageId,
+}: {
+  conversation_id: number
+  messageId: string
+}) => {
+  const url = `/me/conversations/${conversation_id}/messages/${messageId}`
+
+  return {
+    url,
+    data: {
+      perPage: 25,
+      fields: getMessageFields,
+      include: getMessagesInclude,
+    },
+  }
+}
+
+export const getMessageQueryKey = ({
+  conversation_id,
+  messageId,
+}: {
+  conversation_id: number
+  messageId: string
+}) => {
+  const requestArgs = getMessageRequestArgs({ conversation_id, messageId })
+  return getRequestQueryKey(requestArgs)
+}

package/src/utils/request/get_messages.ts

@@ -0,0 +1,34 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+import { getMessageFields, getMessagesInclude } from './messages_data_options'
+
+export const getMessagesRequestArgs = ({
+  conversation_id,
+  reply_root_id,
+}: {
+  conversation_id: number
+  reply_root_id?: string | null
+}) => {
+  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: getMessageFields,
+      include: getMessagesInclude,
+    },
+  }
+}
+
+export const getMessagesQueryKey = ({
+  conversation_id,
+  reply_root_id,
+}: {
+  conversation_id: number
+  reply_root_id?: string | null
+}) => {
+  const requestArgs = getMessagesRequestArgs({ conversation_id, reply_root_id })
+  return getRequestQueryKey(requestArgs)
+}

package/src/utils/request/messages_data_options.ts

@@ -0,0 +1,18 @@
+export const getMessageFields = {
+  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'],
+}
+
+export const getMessagesInclude = ['author', 'reaction_counts']