@planningcenter/chat-react-native 3.16.0-rc.2 → 3.16.0-rc.4

package/src/components/conversation/shadow_message.tsx

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

package/src/components/display/icon.tsx

@@ -17,6 +17,7 @@ import * as logomark from '@planningcenter/icons/paths/logomark'
 import * as people from '@planningcenter/icons/paths/people'
 import * as services from '@planningcenter/icons/paths/services'
 import * as publishing from '@planningcenter/icons/paths/publishing'
+import * as registrations from '@planningcenter/icons/paths/registrations'
 
 // =================================
 // ====== Constants ================
@@ -37,6 +38,7 @@ const ICONS = {
   people,
   services,
   publishing,
+  registrations,
 } as const
 
 export type IconStyle = ViewStyle & {
@@ -61,6 +63,7 @@ export type IconString =
   | `people.${IconName<'people'>}`
   | `services.${IconName<'services'>}`
   | `publishing.${IconName<'publishing'>}`
+  | `registrations.${IconName<'registrations'>}`
 
 // =================================
 // ====== Component ================

package/src/components/primitive/avatar_primitive.tsx

@@ -45,6 +45,7 @@ export type {
 // =================================
 
 const AVATAR_SIZES = {
+  xs: 'xs',
   sm: 'sm',
   md: 'md',
   lg: 'lg',
@@ -60,18 +61,21 @@ type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]
 type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]
 
 const AVATAR_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 20,
   [AVATAR_SIZES.sm]: 24,
   [AVATAR_SIZES.md]: 32,
   [AVATAR_SIZES.lg]: 40,
 }
 
 const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 8,
   [AVATAR_SIZES.sm]: 10,
   [AVATAR_SIZES.md]: 12,
   [AVATAR_SIZES.lg]: 14,
 }
 
 const AVATAR_FALLBACK_ICON_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.xs]: 10,
   [AVATAR_SIZES.sm]: 12,
   [AVATAR_SIZES.md]: 16,
   [AVATAR_SIZES.lg]: 20,

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use_async_storage'
+export * from './use_animated_message_background_color'
 export * from './use_theme'
 export * from './use_suspense_api'
 export * from './use_current_person'

package/src/hooks/use_animated_message_background_color.ts

@@ -0,0 +1,44 @@
+import { Platform } from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolateColor,
+  Easing,
+} from 'react-native-reanimated'
+import { useTheme } from '../hooks'
+
+export function useAnimatedMessageBackgroundColor() {
+  const { colors } = useTheme()
+  const bgFadeProgress = useSharedValue(0)
+
+  const pressedColor = Platform.select({
+    ios: colors.fillColorNeutral050Base,
+    default: 'transparent',
+  })
+
+  const animatedBackgroundColor = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      bgFadeProgress.value,
+      [0, 1],
+      ['transparent', pressedColor]
+    )
+    return {
+      backgroundColor,
+    }
+  })
+
+  const handleMessagePressIn = () => {
+    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
+  }
+
+  const handleMessagePressOut = () => {
+    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
+  }
+
+  return {
+    animatedBackgroundColor,
+    handleMessagePressIn,
+    handleMessagePressOut,
+  }
+}

package/src/hooks/use_conversation_messages.ts

@@ -7,14 +7,14 @@ import {
 } from './use_suspense_api'
 
 export const useConversationMessages = (
-  { conversation_id }: { conversation_id: number },
+  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string },
   opts?: SuspensePaginatorOptions
 ) => {
   const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
-    getMessagesRequestArgs({ conversation_id }),
+    getMessagesRequestArgs({ conversation_id, reply_root_id }),
     opts
   )
-  const queryKey = getMessagesQueryKey({ conversation_id })
+  const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(
     () =>
       data
@@ -28,29 +28,49 @@ export const useConversationMessages = (
   return { messages, refetch, isRefetching, fetchNextPage, queryKey }
 }
 
-export const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
-  url: `/me/conversations/${conversation_id}/messages`,
-  data: {
-    perPage: 25,
-    fields: {
-      Message: [
-        'text',
-        'text_edited_at',
-        'mine',
-        'attachments',
-        'created_at',
-        'deleted_at',
-        'author',
-        'reaction_counts',
-      ],
-      Person: ['name', 'avatar'],
-      ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
+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'],
     },
-    include: ['author', 'reaction_counts'],
-  },
-})
+  }
+}
 
-export const getMessagesQueryKey = ({ conversation_id }: { conversation_id: number }) => {
-  const requestArgs = getMessagesRequestArgs({ conversation_id })
+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_message_create_or_update.ts

@@ -18,9 +18,10 @@ import { startMessageCreationTracking } from '../utils/performance_tracking'
 interface Props {
   conversationId: number
   message?: MessageResource
+  replyRootId?: string
 }
 
-export function useMessageCreateOrUpdate({ conversationId, message }: Props) {
+export function useMessageCreateOrUpdate({ conversationId, message, replyRootId }: Props) {
   const messageId = message?.id || null
   const isEditing = !isNewMessage(message)
   const apiClient = useApiClient()
@@ -38,7 +39,11 @@ export function useMessageCreateOrUpdate({ conversationId, message }: Props) {
       const fieldsWithValueJoined = Object.fromEntries(
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
       )
-      let attributes: any = { text, ...(attachments ? { attachments } : {}) }
+      let attributes: any = {
+        text,
+        ...(attachments ? { attachments } : {}),
+        ...(replyRootId ? { reply_root: { id: replyRootId } } : {}),
+      }
       if (!isEditing) {
         const idempotentKey = insecureUUID()
         attributes.idempotent_key = idempotentKey

package/src/hooks/use_suspense_api.ts

@@ -14,6 +14,7 @@ import { ResponseError } from '../utils/response_error'
 
 interface SuspenseGetOptions extends GetRequest {
   app?: App
+  reply_root_id?: string
 }
 
 export type SuspenseGetQueryOptions<T extends ResourceObject | ResourceObject[]> = Omit<
@@ -114,10 +115,12 @@ export type RequestQueryKey = [
   SuspenseGetOptions['data'],
   SuspenseGetOptions['headers'],
   SuspenseGetOptions['app'],
+  SuspenseGetOptions['reply_root_id'],
 ]
 export const getRequestQueryKey = (args: SuspenseGetOptions): RequestQueryKey => [
   args.url,
   args.data,
   args.headers,
   args.app || 'chat',
+  args.reply_root_id,
 ]

package/src/navigation/index.tsx

@@ -184,6 +184,12 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    ConversationReply: {
+      screen: ConversationScreen,
+      options: {
+        title: 'Reply', // TODO: Get root reply author
+      },
+    },
     TeamConversation: {
       screen: TeamConversationScreen,
       options: {

package/src/screens/conversation_screen.tsx

@@ -35,10 +35,10 @@ 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'
 
-export const REPLIES_FEATURE_ENABLED = false
-
 export type ConversationRouteProps = {
   conversation_id: number
+  reply_root_id?: string
+  replyRootAuthor?: string
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
@@ -53,10 +53,11 @@ export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id } = route.params
+  const { conversation_id, editing_message_id, reply_root_id } = route.params
   const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
+    reply_root_id,
   })
   useConversationJoltEvents({ conversationId: conversation_id })
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
@@ -86,12 +87,14 @@ 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])
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -139,6 +142,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
                   canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
                   conversation_id={conversation_id}
                   latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
+                  inReplyScreen={!!reply_root_id}
                 />
               )
             }}
@@ -152,6 +156,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         {canReply ? (
           <MessageForm.Root
             conversation={conversation}
+            replyRootId={reply_root_id}
             currentlyEditingMessage={currentlyEditingMessage}
             // We use a separate key so that it remounts component when switching between new
             // and edit message. This simplifies internal state handling.

package/src/screens/message_actions_screen.tsx

@@ -14,6 +14,7 @@ import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard, Haptic } from '../utils/native_adapters'
 import { MessageResource } from '../types'
+import { REPLIES_FEATURE_ENABLED } from '../utils'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -24,10 +25,11 @@ export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
   conversation_id: number
   canDeleteNonAuthoredMessages?: boolean
+  inReplyScreen?: boolean
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
-  const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params
+  const { conversation_id, message_id, canDeleteNonAuthoredMessages, inReplyScreen } = route.params
 
   const { messages, refetch } = useConversationMessages(
     { conversation_id },
@@ -43,6 +45,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       conversation_id={conversation_id}
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
+      inReplyScreen={inReplyScreen}
     />
   )
 }
@@ -52,11 +55,13 @@ function MessageActionsScreenContent({
   conversation_id,
   canDeleteNonAuthoredMessages,
   refetchMessages,
+  inReplyScreen,
 }: {
   message: MessageResource
   conversation_id: number
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
+  inReplyScreen?: boolean
 }) {
   const navigation = useNavigation()
   const apiClient = useApiClient()
@@ -83,6 +88,18 @@ function MessageActionsScreenContent({
     return ''
   }
 
+  const handleReplyPress = useCallback(() => {
+    navigation.goBack()
+    // Waits for the modal to be dismissed before pushing the reply screen
+    requestAnimationFrame(() => {
+      navigation.navigate('ConversationReply', {
+        conversation_id,
+        reply_root_id: message.replyRootId || message.id,
+        // TODO: Update title param with reply root author
+      })
+    })
+  }, [navigation, conversation_id, message.id, message.replyRootId])
+
   const handleCopyPress = () => {
     Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')
     navigation.goBack()
@@ -163,6 +180,15 @@ function MessageActionsScreenContent({
         ))}
       </View>
       <View style={styles.actions}>
+        {REPLIES_FEATURE_ENABLED && !inReplyScreen && (
+          <FormSheet.Action
+            onPress={handleReplyPress}
+            title="Reply to message"
+            iconName="registrations.undo"
+            accessibilityHint="Navigates to the reply screen"
+            accessibilityRole="link"
+          />
+        )}
         <FormSheet.Action
           onPress={handleCopyPress}
           title="Copy text"

package/src/types/jolt_events/message_events.ts

@@ -16,6 +16,8 @@ interface BaseMessageEventData extends Record<string, unknown> {
     html: string
     attachments: DenormalizedAttachmentResource[]
     idempotent_key?: string | null
+    reply_count: number
+    reply_root_id: string | null
   }
 }
 

package/src/types/resources/message.ts

@@ -15,6 +15,8 @@ export interface MessageResource {
   attachments: DenormalizedAttachmentResource[]
   author: PersonResource
   reactionCounts: ReactionCountResource[]
+  replyCount: number
+  replyRootId?: string | null
 
   // Custom Local Properties we set for rendering
   renderAuthor?: boolean