@planningcenter/chat-react-native 3.32.1-rc.1 → 3.33.0

package/src/components/display/utils/avatar_gradient_colors.ts

@@ -60,7 +60,7 @@ const ANGLE_160: Pick<AvatarGradientProps, 'start' | 'end'> = {
   end: { x: 0.35, y: 1 },
 }
 
-const AVATAR_GRADIENT_MAP: Record<CustomAvatarColorKey, AvatarGradientProps> = {
+export const AVATAR_GRADIENT_MAP: Record<CustomAvatarColorKey, AvatarGradientProps> = {
   'warm-sunset': { colors: ['#F6D06F', '#FB7946', '#B13825'], ...ANGLE_135 },
   peach: { colors: ['#FCD983', '#FC9369'], ...ANGLE_90 },
   'rose-gold': { colors: ['#ED78BE', '#E19084', '#EDB32C'], ...ANGLE_135 },
@@ -81,7 +81,14 @@ const AVATAR_GRADIENT_MAP: Record<CustomAvatarColorKey, AvatarGradientProps> = {
   rainbow: { colors: ['#E76958', '#CCA32C', '#3FA05A', '#8B52D0'], ...ANGLE_135 },
 }
 
+export const COLOR_KEYS = Object.keys(AVATAR_GRADIENT_MAP) as CustomAvatarColorKey[]
+
+export function coerceColorKey(value: string | null | undefined): CustomAvatarColorKey {
+  return value && value in AVATAR_GRADIENT_MAP
+    ? (value as CustomAvatarColorKey)
+    : DEFAULT_AVATAR_COLOR_KEY
+}
+
 export function getAvatarGradientProps(colorKey?: string | null): AvatarGradientProps {
-  const key = (colorKey as CustomAvatarColorKey) || DEFAULT_AVATAR_COLOR_KEY
-  return AVATAR_GRADIENT_MAP[key] || AVATAR_GRADIENT_MAP[DEFAULT_AVATAR_COLOR_KEY]
+  return AVATAR_GRADIENT_MAP[coerceColorKey(colorKey)]
 }

package/src/components/primitive/avatar_primitive.tsx

@@ -38,6 +38,7 @@ export type {
   AvatarGroupProps,
   AvatarMaskProps,
   AvatarRootProps,
+  AvatarSize,
 }
 
 // =================================
@@ -49,6 +50,8 @@ const AVATAR_SIZES = {
   sm: 'sm',
   md: 'md',
   lg: 'lg',
+  xl: 'xl',
+  '2xl': '2xl',
 } as const
 
 const AVATAR_PRESENCE_TYPES = {
@@ -65,6 +68,8 @@ const AVATAR_PX: Record<AvatarSize, number> = {
   [AVATAR_SIZES.sm]: 24,
   [AVATAR_SIZES.md]: 32,
   [AVATAR_SIZES.lg]: 40,
+  [AVATAR_SIZES.xl]: 56,
+  [AVATAR_SIZES['2xl']]: 80,
 }
 
 const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
@@ -72,6 +77,8 @@ const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
   [AVATAR_SIZES.sm]: 10,
   [AVATAR_SIZES.md]: 12,
   [AVATAR_SIZES.lg]: 14,
+  [AVATAR_SIZES.xl]: 16,
+  [AVATAR_SIZES['2xl']]: 20,
 }
 
 const AVATAR_FALLBACK_ICON_PX: Record<AvatarSize, number> = {
@@ -79,6 +86,8 @@ const AVATAR_FALLBACK_ICON_PX: Record<AvatarSize, number> = {
   [AVATAR_SIZES.sm]: 12,
   [AVATAR_SIZES.md]: 16,
   [AVATAR_SIZES.lg]: 20,
+  [AVATAR_SIZES.xl]: 28,
+  [AVATAR_SIZES['2xl']]: 40,
 }
 
 // =================================
@@ -149,8 +158,8 @@ AvatarRoot.displayName = 'Avatar.Root'
 type AvatarMaskProps = ViewProps
 
 function AvatarMask({ children, ...props }: AvatarMaskProps) {
-  const { maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
-  const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier })
+  const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier })
 
   return (
     <View style={styles.mask} {...props}>

package/src/hooks/attachments/fallback_chat_configuration.ts

@@ -0,0 +1,61 @@
+// Fallback values for use_chat_configuration used when the API request fails.
+// Keeping a static copy here means an API outage doesn't block attachment
+// uploads entirely — users retain the behavior they had before the server
+// was the source of truth.
+//
+// The server is authoritative: if these values drift from the server's
+// ChatConfiguration, the server will still reject uploads that exceed its
+// own rules. These exist only to give the client something reasonable to
+// validate against up-front.
+
+export const FALLBACK_ALLOWED_FILE_EXTENSIONS = [
+  '.3ga',
+  '.3gp',
+  '.aac',
+  '.amr',
+  '.avi',
+  '.bmp',
+  '.doc',
+  '.docx',
+  '.gif',
+  '.h263',
+  '.h264',
+  '.heic',
+  '.heif',
+  '.jpeg',
+  '.jpg',
+  '.key',
+  '.m4a',
+  '.m4b',
+  '.m4p',
+  '.m4r',
+  '.m4v',
+  '.mkv',
+  '.mov',
+  '.mp3',
+  '.mp4',
+  '.mp4-latm',
+  '.mpeg',
+  '.mpeg4',
+  '.mpg',
+  '.numbers',
+  '.ogg',
+  '.pages',
+  '.pdf',
+  '.png',
+  '.ppt',
+  '.pptx',
+  '.rtf',
+  '.txt',
+  '.vcf',
+  '.wav',
+  '.webm',
+  '.webp',
+  '.wmv',
+  '.xls',
+  '.xlsx',
+]
+
+export const FALLBACK_MAX_FILE_SIZE_IN_BYTES = 50 * 1024 * 1024
+
+export const FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE = 10

package/src/hooks/groups/use_groups_conversation_create.ts

@@ -12,10 +12,11 @@ interface Props {
 
 export function useGroupsConversationCreate({ groupId, title, genderId, onSuccess }: Props) {
   const apiClient = useApiClient()
+
   return useMutation({
     throwOnError: true,
     onSuccess: result => {
-      onSuccess && onSuccess(result.data.id)
+      onSuccess(result.data.id)
     },
     mutationFn: () =>
       apiClient.groups

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { omitBy, isNil } from 'lodash'
+import { isNil, omitBy } from 'lodash'
 import { useMemo } from 'react'
 import {
   ApiCollection,
@@ -14,7 +14,7 @@ import { ApiClient, useApiClient } from '../use_api_client'
 interface Props {
   teamIds?: number[]
   planId?: number
-  onSuccess?: (conversation: ConversationResource) => void
+  onSuccess?: (conversation: ConversationResource, meta: { created: boolean }) => void
 }
 
 interface TeamAndPlanParams {
@@ -46,8 +46,8 @@ export const useFindOrCreateServicesConversation = ({ teamIds, planId, onSuccess
 
   const mutation = useMutation({
     throwOnError: true,
-    onSuccess: result => {
-      onSuccess && onSuccess(result)
+    onSuccess: ({ conversation, created }) => {
+      onSuccess?.(conversation, { created })
     },
     mutationFn: async () => findOrCreateServicesConversation(apiClient, teamAndPlanParams),
   })
@@ -58,7 +58,7 @@ export const useFindOrCreateServicesConversation = ({ teamIds, planId, onSuccess
 export const findOrCreateServicesConversation = async (
   apiClient: ApiClient,
   teamAndPlanParams: TeamAndPlanParams
-) => {
+): Promise<{ conversation: ConversationResource; created: boolean }> => {
   const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
     .then(res => res.data.groupIdentifiers)
     .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
@@ -66,13 +66,13 @@ export const findOrCreateServicesConversation = async (
   const foundConversation = foundConversations?.data[0]
 
   if (foundConversation?.id) {
-    return foundConversation
+    return { conversation: foundConversation, created: false }
   }
 
   return fetchServicesPayload(apiClient, teamAndPlanParams)
     .then(res => res.data.payload)
     .then(payload => createConversation(apiClient, payload))
-    .then(res => res.data)
+    .then(res => ({ conversation: res.data, created: true }))
     .catch(throwResponseError)
 }
 

package/src/hooks/use_attachment_uploader.ts

@@ -5,8 +5,8 @@ import {
   FileUploadState,
   NativeAttachmentFile,
 } from '../types/resources/denormalized_attachment_resource_for_create'
-import { SUPPORTED_EXTENSIONS } from './attachments/supported_extensions'
 import { useApiClient } from './use_api_client'
+import { useChatConfiguration } from './use_chat_configuration'
 import { useUploadClient } from './use_upload_client'
 
 export interface FileError {
@@ -14,10 +14,6 @@ export interface FileError {
   file_size?: boolean
 }
 
-const MAX_FILE_SIZE_IN_MB = 50
-const MAX_FILE_SIZE_IN_BYTES = MAX_FILE_SIZE_IN_MB * 1024 * 1024
-const MAX_NUMBER_OF_ATTACHMENTS = 10
-
 export function useAttachmentUploader({
   conversationId,
   draftAttachments,
@@ -27,6 +23,9 @@ export function useAttachmentUploader({
 }) {
   const apiClient = useApiClient()
   const uploadApi = useUploadClient()
+  const { allowedFileExtensions, maxFileSizeInBytes, maxAttachmentsPerMessage } =
+    useChatConfiguration()
+  const maxFileSizeInMb = Number((maxFileSizeInBytes / (1024 * 1024)).toFixed(1))
   const [attachments, setAttachments] = useState<FileAttachment[]>(() => draftAttachments || [])
   const uploadState = useRef<FileUploadState>({})
   const [lastUploadId, setLastUploadId] = useState<string>()
@@ -38,9 +37,9 @@ export function useAttachmentUploader({
       const fileErrors = {} as FileError
 
       const validFiles = files.filter(file => {
-        const extension = file.name.split('.').pop() as string
-        const isValidExtension = SUPPORTED_EXTENSIONS.includes(`.${extension}`)
-        const isValidFileSize = file.size <= MAX_FILE_SIZE_IN_BYTES
+        const extension = file.name.toLowerCase().split('.').pop() as string
+        const isValidExtension = allowedFileExtensions.includes(`.${extension}`)
+        const isValidFileSize = file.size <= maxFileSizeInBytes
 
         if (!isValidExtension) {
           fileErrors.file_type ||= []
@@ -60,10 +59,10 @@ export function useAttachmentUploader({
         )
       }
       if (fileErrors.file_size) {
-        errorMessages.push(`File size exceeds ${MAX_FILE_SIZE_IN_MB} MB`)
+        errorMessages.push(`File size exceeds ${maxFileSizeInMb} MB`)
       }
-      if (numberOfAttachments + validFiles.length > MAX_NUMBER_OF_ATTACHMENTS) {
-        errorMessages.push(`You can't attach more than ${MAX_NUMBER_OF_ATTACHMENTS} files at once.`)
+      if (numberOfAttachments + validFiles.length > maxAttachmentsPerMessage) {
+        errorMessages.push(`You can't attach more than ${maxAttachmentsPerMessage} files at once.`)
       }
       if (errorMessages.length > 0) {
         setErrorMessage(errorMessages.join('\n'))
@@ -100,21 +99,34 @@ export function useAttachmentUploader({
               }
               setLastUploadId(messageAttachmentId)
             })
-            .catch(err => {
+            .catch(async err => {
               const isFlagged = err?.code === 'image_flagged'
               uploadState.current[attachment.file.name] = {
                 status: 'error',
                 flagged: isFlagged,
               }
               if (!isFlagged) {
-                setErrorMessage('This file could not be uploaded.')
+                // Dev builds surface the raw server detail to shorten the
+                // feedback loop on backend errors (e.g. AWS SSO re-auth).
+                // Production users always see the generic message.
+                const serverDetail = __DEV__ ? await extractDevOnlyServerErrorDetail(err) : null
+                setErrorMessage(serverDetail ?? 'This file could not be uploaded.')
               }
               setLastUploadId(attachment.file.name)
             })
         })
       }
     },
-    [numberOfAttachments, uploadApi, apiClient.chat, conversationId]
+    [
+      numberOfAttachments,
+      uploadApi,
+      apiClient.chat,
+      conversationId,
+      allowedFileExtensions,
+      maxFileSizeInBytes,
+      maxFileSizeInMb,
+      maxAttachmentsPerMessage,
+    ]
   )
 
   useEffect(() => {
@@ -168,7 +180,19 @@ export function useAttachmentUploader({
     pendingUploads,
     errorMessage,
     flaggedAttachmentCount,
-    remainingAttachable: MAX_NUMBER_OF_ATTACHMENTS - numberOfAttachments,
+    remainingAttachable: Math.max(0, maxAttachmentsPerMessage - numberOfAttachments),
+  }
+}
+
+async function extractDevOnlyServerErrorDetail(err: unknown): Promise<string | null> {
+  const response = err as Response | null
+  if (!response?.clone) return null
+  try {
+    const body = await response.clone().json()
+    const detail = body?.errors?.[0]?.detail ?? body?.detail
+    return typeof detail === 'string' ? detail : null
+  } catch {
+    return null
   }
 }
 

package/src/hooks/use_chat_configuration.ts

@@ -0,0 +1,54 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { ApiResource } from '../types'
+import type { ChatConfigurationResource } from '../types/resources/chat_configuration_resource'
+import {
+  getChatConfigurationRequestArgs,
+  getChatConfigurationQueryKey,
+} from '../utils/request/get_chat_configuration'
+import {
+  FALLBACK_ALLOWED_FILE_EXTENSIONS,
+  FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
+  FALLBACK_MAX_FILE_SIZE_IN_BYTES,
+} from './attachments/fallback_chat_configuration'
+import { useApiClient } from './use_api_client'
+
+// Client-side mirror of ChatConfiguration (server is source of truth).
+// Returns fallback values if the API request fails so that the attachment
+// UX keeps working during transient server issues. The server still
+// enforces its own limits — this hook only drives pre-upload UX.
+export function useChatConfiguration() {
+  const apiClient = useApiClient()
+  const requestArgs = getChatConfigurationRequestArgs()
+
+  const { data } = useSuspenseQuery({
+    queryKey: getChatConfigurationQueryKey(),
+    queryFn: () => {
+      return apiClient.chat
+        .get<ApiResource<ChatConfigurationResource>>(requestArgs)
+        .catch(() => stableFallbackConfiguration)
+    },
+    staleTime: 1000 * 60 * 60, // 1 hour — this rarely changes
+  })
+
+  const attrs = data.data
+
+  return {
+    allowedFileExtensions: attrs.allowedFileExtensions,
+    maxFileSizeInBytes: attrs.maxFileSizeInBytes,
+    maxAttachmentsPerMessage: attrs.maxAttachmentsPerMessage,
+  }
+}
+
+// Shape matches what consumers see after transform_response flattens
+// attributes and camelCases keys.
+const stableFallbackConfiguration: ApiResource<ChatConfigurationResource> = {
+  data: {
+    type: 'ChatConfiguration',
+    id: 'current',
+    allowedFileExtensions: FALLBACK_ALLOWED_FILE_EXTENSIONS,
+    maxFileSizeInBytes: FALLBACK_MAX_FILE_SIZE_IN_BYTES,
+    maxAttachmentsPerMessage: FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
+  },
+  links: {},
+  meta: {},
+}

package/src/hooks/use_conversation_avatar_update.ts

@@ -0,0 +1,163 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Alert } from 'react-native'
+import type { ConversationResource } from '../types'
+import type { ApiResource } from '../types'
+import { transformGetToPost } from '../utils/client/request_helpers'
+import type { ImagePickerAsset } from '../utils/native_adapters/image_picker'
+import { ApiClient, useApiClient } from './use_api_client'
+import { getConversationRequestArgs } from './use_conversation'
+import { getRequestQueryKey } from './use_suspense_api'
+import { useUploadClient } from './use_upload_client'
+
+export type AvatarType = 'icon' | 'emoji' | 'image'
+
+export type AvatarUpdatePayload =
+  | { kind: Extract<AvatarType, 'icon' | 'emoji'>; key: string; color: string }
+  | { kind: Extract<AvatarType, 'image'>; imageAsset: ImagePickerAsset; color: string }
+  | { kind: 'clear' }
+
+export const useConversationAvatarUpdate = ({ conversationId }: { conversationId: number }) => {
+  const apiClient = useApiClient()
+  const uploadClient = useUploadClient()
+  const queryClient = useQueryClient()
+  const requestArgs = getConversationRequestArgs({ conversation_id: conversationId })
+  const queryKey = getRequestQueryKey(requestArgs)
+
+  return useMutation({
+    mutationKey: ['updateConversationAvatar', conversationId],
+    mutationFn: async (payload: AvatarUpdatePayload) => {
+      const postArgs = transformGetToPost(requestArgs).data
+      const attributes = await buildAttributes(payload, uploadClient)
+
+      return apiClient.chat.patch<ApiResource<ConversationResource>>({
+        url: `/me/conversations/${conversationId}/`,
+        data: { data: { type: '', attributes }, ...postArgs },
+      })
+    },
+    onMutate: async (payload: AvatarUpdatePayload) => {
+      await queryClient.cancelQueries({ queryKey })
+
+      const previous = queryClient.getQueryData<ApiResource<ConversationResource>>(queryKey)
+
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+        if (!prev?.data) return prev
+        return { ...prev, data: buildOptimisticData(prev.data, payload) }
+      })
+
+      return { previous }
+    },
+    onSuccess: (response, _payload, _context) => {
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, () => response)
+      queryClient.invalidateQueries({ queryKey: ['/me/conversations'] })
+    },
+    onError: (_error, _payload, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(queryKey, context.previous)
+      }
+
+      Alert.alert('Error', 'Failed to update conversation avatar. Please try again.')
+    },
+  })
+}
+
+export async function patchConversationAvatar(
+  apiClient: ApiClient,
+  uploadClient: ReturnType<typeof useUploadClient>,
+  conversationId: number,
+  payload: Exclude<AvatarUpdatePayload, { kind: 'clear' }>
+) {
+  const requestArgs = getConversationRequestArgs({ conversation_id: conversationId })
+  const postArgs = transformGetToPost(requestArgs).data
+
+  try {
+    const attributes = await buildAttributes(payload, uploadClient)
+    await apiClient.chat.patch({
+      url: `/me/conversations/${conversationId}/`,
+      data: { data: { type: '', attributes }, ...postArgs },
+    })
+  } catch {
+    Alert.alert(
+      'Avatar not saved',
+      'The conversation was created, but the avatar could not be saved. You can update it from the conversation details.'
+    )
+  }
+}
+
+function buildOptimisticData(
+  data: ConversationResource,
+  payload: AvatarUpdatePayload
+): ConversationResource {
+  switch (payload.kind) {
+    case 'icon':
+      return {
+        ...data,
+        customAvatarType: 'icon',
+        customAvatarKey: payload.key,
+        customAvatarColor: payload.color,
+        customAvatarImageUrl: null,
+      }
+    case 'emoji':
+      return {
+        ...data,
+        customAvatarType: 'emoji',
+        customAvatarKey: payload.key,
+        customAvatarColor: payload.color,
+        customAvatarImageUrl: null,
+      }
+    case 'image':
+      return {
+        ...data,
+        customAvatarType: 'image',
+        customAvatarKey: null,
+        customAvatarColor: payload.color,
+        customAvatarImageUrl: payload.imageAsset.uri,
+      }
+    case 'clear':
+      return {
+        ...data,
+        customAvatarType: null,
+        customAvatarKey: null,
+        customAvatarColor: null,
+        customAvatarImageUrl: null,
+      }
+  }
+}
+
+async function buildAttributes(
+  payload: AvatarUpdatePayload,
+  uploadClient: ReturnType<typeof useUploadClient>
+) {
+  switch (payload.kind) {
+    case 'icon':
+      return {
+        custom_avatar_type: 'icon',
+        custom_avatar_key: payload.key,
+        custom_avatar_color: payload.color,
+      }
+    case 'emoji':
+      return {
+        custom_avatar_type: 'emoji',
+        custom_avatar_key: payload.key,
+        custom_avatar_color: payload.color,
+      }
+    case 'image': {
+      const uploaded = await uploadClient.uploadFile({
+        uri: payload.imageAsset.uri,
+        name: payload.imageAsset.fileName || 'avatar.jpg',
+        type: payload.imageAsset.mimeType || 'image/jpeg',
+      })
+
+      return {
+        custom_avatar_type: 'image',
+        custom_avatar_color: payload.color,
+        avatar_uploaded_file_id: uploaded.id,
+      }
+    }
+    case 'clear':
+      return {
+        custom_avatar_type: null,
+        custom_avatar_key: null,
+        custom_avatar_color: null,
+      }
+  }
+}

package/src/hooks/use_features.ts

@@ -37,6 +37,7 @@ export const availableFeatures = {
   gender_specific_conversations: 'ROLLOUT_gender_specific_conversations',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
   granular_notifications_ui: 'ROLLOUT_granular_notification_preferences_ui',
+  custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
 }
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/navigation/index.tsx

@@ -17,6 +17,11 @@ import {
   AttachmentActionsScreen,
   AttachmentActionsScreenOptions,
 } from '../screens/attachment_actions/attachment_actions_screen'
+import {
+  AvatarPickerScreen,
+  AvatarPickerScreenOptions,
+  AvatarPickerCreateScreenOptions,
+} from '../screens/avatar_picker/avatar_picker_screen'
 import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
 import {
   MessageReadReceiptsScreen,
@@ -148,6 +153,10 @@ export const NewConversationStack = createNativeStackNavigator({
         ),
       }),
     },
+    AvatarPicker: {
+      screen: AvatarPickerScreen,
+      options: AvatarPickerCreateScreenOptions,
+    },
   },
 })
 
@@ -252,6 +261,10 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    AvatarPicker: {
+      screen: AvatarPickerScreen,
+      options: AvatarPickerScreenOptions,
+    },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) => ({