@planningcenter/chat-react-native 3.17.0-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,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,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
@@ -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,13 +231,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 +253,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 +266,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 +285,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 +309,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/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

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']

package/build/components/conversation/shadow_message.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { MessageResource } from '../../types';
-interface ShadowMessageProps extends MessageResource {
-    conversation_id: number;
-}
-export declare function ShadowMessage({ conversation_id, ...message }: ShadowMessageProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=shadow_message.d.ts.map

package/build/components/conversation/shadow_message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow_message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/shadow_message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAkB7C,UAAU,kBAAmB,SAAQ,eAAe;IAClD,eAAe,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,aAAa,CAAC,EAAE,eAAe,EAAE,GAAG,OAAO,EAAE,EAAE,kBAAkB,qBAsEhF"}

package/build/components/conversation/shadow_message.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow_message.js","sourceRoot":"","sources":["../../../src/components/conversation/shadow_message.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport {\n  useAnimatedMessageBackgroundColor,\n  useFontScale,\n  useScalableNumberOfLines,\n  useTheme,\n} from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n  DenormalizedAttachmentResource,\n  DenormalizedGiphyAttachmentResource,\n  DenormalizedExpandedLinkAttachmentResource,\n  DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport {\n  CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n  MAX_FONT_SIZE_MULTIPLIER,\n  MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n  platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated from 'react-native-reanimated'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\nimport { assertKeysAreNumbers } from '../../utils'\nimport { useNavigation } from '@react-navigation/native'\n\ninterface ShadowMessageProps extends MessageResource {\n  conversation_id: number\n}\n\nexport function ShadowMessage({ conversation_id, ...message }: ShadowMessageProps) {\n  const { text } = message\n  const styles = useStyles(message)\n  const { colors } = useTheme()\n  const navigation = useNavigation()\n\n  const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n    useAnimatedMessageBackgroundColor()\n  const scalableNumberOfLines = useScalableNumberOfLines(2)\n\n  const handleNavigateToReplies = () => {\n    navigation.navigate('ConversationReply', {\n      conversation_id,\n      reply_root_id: message.id,\n      // TODO: Add a way to pass the reply root author's name\n    })\n  }\n\n  return (\n    <Pressable\n      android_ripple={{ color: colors.androidRippleNeutral }}\n      onPress={handleNavigateToReplies}\n      onPressIn={handleMessagePressIn}\n      onPressOut={handleMessagePressOut}\n      accessibilityHint=\"Navigate to reply screen for this message\"\n      accessibilityRole=\"link\"\n    >\n      <Animated.View style={[styles.message, animatedBackgroundColor]}>\n        {!message.mine && (\n          <View>\n            <View style={styles.avatarWrapper}>\n              <Avatar\n                size=\"xs\"\n                sourceUri={message.author.avatar}\n                style={styles.avatar}\n                maxFontSizeMultiplier={1}\n              />\n            </View>\n            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n          </View>\n        )}\n        <View style={styles.messageContent}>\n          <View\n            style={styles.messageBubble}\n            onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n          >\n            <MessageAttachmentImagery attachments={message.attachments} />\n            {text && (\n              <Text\n                variant=\"footnote\"\n                style={styles.messageText}\n                numberOfLines={scalableNumberOfLines}\n              >\n                {text}\n              </Text>\n            )}\n          </View>\n          <View style={styles.messageMeta}>\n            <Text variant=\"footnote\" style={styles.replyCountText}>\n              {message.replyCount} replies\n            </Text>\n          </View>\n        </View>\n        {message.mine && (\n          <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n        )}\n      </Animated.View>\n    </Pressable>\n  )\n}\n\nfunction MessageAttachmentImagery({\n  attachments,\n}: {\n  attachments: DenormalizedAttachmentResource[]\n}) {\n  if (!attachments || attachments.length === 0) return null\n\n  const attachment = attachments[0]\n\n  if (attachment.type === 'giphy') {\n    return <GiphyImage attachment={attachment} />\n  }\n  if (attachment.type === 'ExpandedLink') {\n    return <ExpandedLinkImage attachment={attachment} />\n  }\n  if (attachment.type === 'MessageAttachment') {\n    const contentType = attachment.attributes?.contentType\n    const basicType = contentType?.split('/')[0]\n\n    switch (basicType) {\n      case 'image':\n        return <MessageAttachmentImage attachment={attachment} />\n      case 'video':\n        return <MessageAttachmentIcon iconName=\"general.outlinedVideoFile\" />\n      case 'audio':\n        return <MessageAttachmentIcon iconName=\"general.outlinedMusicFile\" />\n      case 'application':\n        return <MessageAttachmentIcon iconName=\"general.outlinedGenericFile\" />\n      default:\n        return null\n    }\n  }\n\n  return null\n}\n\nfunction GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {\n  const { title, giphy } = attachment\n  const { url } = giphy.fixedWidth\n  const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)\n  const styles = useStyles({ imageWidth: width, imageHeight: height })\n\n  return (\n    <Image\n      source={{ uri: url }}\n      wrapperStyle={styles.imageWrapper}\n      style={styles.image}\n      alt={title}\n      loaderSize={16}\n    />\n  )\n}\n\nfunction ExpandedLinkImage({\n  attachment,\n}: {\n  attachment: DenormalizedExpandedLinkAttachmentResource\n}) {\n  const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes\n  const styles = useStyles({ imageWidth, imageHeight })\n\n  return (\n    <Image\n      source={{ uri: imageUrl }}\n      wrapperStyle={styles.imageWrapper}\n      style={styles.image}\n      alt={title}\n      loaderSize={16}\n    />\n  )\n}\n\nfunction MessageAttachmentImage({\n  attachment,\n}: {\n  attachment: DenormalizedMessageAttachmentResource\n}) {\n  const { url, urlMedium, filename, metadata = {} } = attachment.attributes\n  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n\n  return (\n    <Image\n      source={{ uri: urlMedium || url }}\n      style={styles.image}\n      wrapperStyle={styles.imageWrapper}\n      alt={filename}\n      loaderSize={16}\n    />\n  )\n}\n\nfunction MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {\n  const styles = useStyles()\n  return (\n    <Icon\n      name={iconName}\n      style={styles.attachmentIcon}\n      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n    />\n  )\n}\n\ninterface StylesProps {\n  imageWidth?: number\n  imageHeight?: number\n  mine?: boolean\n}\n\nconst useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })\n  const { width } = useWindowDimensions()\n  const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n  return StyleSheet.create({\n    message: {\n      gap: 8,\n      flexDirection: mine ? 'row-reverse' : 'row',\n      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n    },\n    messageContent: {\n      flex: 1,\n      gap: 4,\n      marginBottom: 12,\n    },\n    avatarWrapper: {\n      width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n      alignItems: 'center',\n    },\n    avatar: {\n      marginBottom: 8,\n      opacity: 0.5,\n    },\n    messageBubble: {\n      flexDirection: 'row',\n      alignSelf: mine ? 'flex-end' : 'flex-start',\n      alignItems: 'center',\n      gap: 8,\n      borderColor: colors.borderColorDefaultBase,\n      borderWidth: 1,\n      borderRadius: 8,\n      maxWidth: tabletWidth ? 360 : '80%',\n      paddingVertical: 6,\n      paddingHorizontal: 8,\n    },\n    messageText: {\n      color: colors.textColorDefaultPlaceholder,\n      flexShrink: 1,\n    },\n    messageMeta: {\n      flexDirection: 'row',\n      justifyContent: mine ? 'flex-end' : 'flex-start',\n    },\n    replyCountText: {\n      color: colors.interaction,\n      fontWeight: platformFontWeightMedium,\n    },\n    imageWrapper: {\n      width: 32 * fontScale,\n      aspectRatio: imageWidth / imageHeight,\n      opacity: 0.5,\n    },\n    image: {\n      borderRadius: 4,\n    },\n    attachmentIcon: {\n      color: colors.iconColorDefaultDim,\n      fontSize: 16,\n    },\n  })\n}\n"]}