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

package/src/__tests__/hooks/use_attachment_uploader.test.tsx

@@ -0,0 +1,219 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, act } from '@testing-library/react-hooks'
+import React from 'react'
+import { useApiClient } from '../../hooks/use_api_client'
+import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
+import { useChatConfiguration } from '../../hooks/use_chat_configuration'
+import { useUploadClient } from '../../hooks/use_upload_client'
+import { FileAttachment } from '../../types/resources/denormalized_attachment_resource_for_create'
+
+jest.mock('../../hooks/use_api_client')
+jest.mock('../../hooks/use_upload_client')
+jest.mock('../../hooks/use_chat_configuration')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+const mockedUseUploadClient = useUploadClient as jest.MockedFunction<typeof useUploadClient>
+const mockedUseChatConfiguration = useChatConfiguration as jest.MockedFunction<
+  typeof useChatConfiguration
+>
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const setChatConfiguration = (overrides: Partial<ReturnType<typeof useChatConfiguration>> = {}) => {
+  mockedUseChatConfiguration.mockReturnValue({
+    allowedFileExtensions: ['.pdf', '.jpg'],
+    maxFileSizeInBytes: 50 * 1024 * 1024,
+    maxAttachmentsPerMessage: 10,
+    ...overrides,
+  })
+}
+
+const renderUploader = (opts?: { draftAttachments?: FileAttachment[] }) =>
+  renderHook(() => useAttachmentUploader({ conversationId: 1, ...opts }), {
+    wrapper: createWrapper(),
+  })
+
+const makeFile = (
+  overrides: Partial<
+    Parameters<ReturnType<typeof useAttachmentUploader>['handleFilesAttached']>[0][number]
+  > = {}
+) => ({
+  uri: 'file:///tmp/example.pdf',
+  name: 'example.pdf',
+  type: 'application/pdf',
+  size: 1024,
+  ...overrides,
+})
+
+const draftAttachment = (name: string): FileAttachment => ({
+  file: { uri: `file:///tmp/${name}`, name, type: 'application/pdf', size: 1024 },
+  status: 'success',
+  uploadedAt: 0,
+  id: `att-${name}`,
+})
+
+beforeEach(() => {
+  setChatConfiguration()
+  mockedUseApiClient.mockReturnValue({
+    chat: { post: jest.fn().mockResolvedValue({ data: { id: 'msg-attachment-1' } }) },
+  } as any)
+  mockedUseUploadClient.mockReturnValue({
+    uploadFile: jest.fn().mockResolvedValue({ id: 'uploaded-1' }),
+  } as any)
+})
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('useAttachmentUploader', () => {
+  describe('extension validation', () => {
+    it('rejects a disallowed extension and lists it in the error', () => {
+      const { result } = renderUploader()
+
+      act(() => {
+        result.current.handleFilesAttached([makeFile({ name: 'evil.exe' })])
+      })
+
+      expect(result.current.errorMessage).toContain(
+        'The following file types are not supported: exe'
+      )
+      expect(result.current.attachments).toHaveLength(0)
+    })
+
+    it('accepts a matching extension regardless of casing', async () => {
+      const { result } = renderUploader()
+
+      await act(async () => {
+        result.current.handleFilesAttached([makeFile({ name: 'Shouting.PDF' })])
+      })
+
+      expect(result.current.errorMessage).toBeNull()
+      expect(result.current.attachments).toHaveLength(1)
+    })
+  })
+
+  describe('file size validation', () => {
+    it('rejects files that exceed maxFileSizeInBytes', () => {
+      setChatConfiguration({ maxFileSizeInBytes: 50 * 1024 * 1024 })
+      const { result } = renderUploader()
+
+      act(() => {
+        result.current.handleFilesAttached([makeFile({ size: 50 * 1024 * 1024 + 1 })])
+      })
+
+      expect(result.current.errorMessage).toBe('File size exceeds 50 MB')
+      expect(result.current.attachments).toHaveLength(0)
+    })
+
+    it('formats an integer MB limit without a trailing decimal', () => {
+      setChatConfiguration({ maxFileSizeInBytes: 25 * 1024 * 1024 })
+      const { result } = renderUploader()
+
+      act(() => {
+        result.current.handleFilesAttached([makeFile({ size: 25 * 1024 * 1024 + 1 })])
+      })
+
+      expect(result.current.errorMessage).toBe('File size exceeds 25 MB')
+    })
+
+    it('formats a fractional MB limit to one decimal', () => {
+      // 50.5 MB — server could in principle return a non-multiple-of-MB cap.
+      setChatConfiguration({ maxFileSizeInBytes: Math.round(50.5 * 1024 * 1024) })
+      const { result } = renderUploader()
+
+      act(() => {
+        result.current.handleFilesAttached([makeFile({ size: 51 * 1024 * 1024 })])
+      })
+
+      expect(result.current.errorMessage).toBe('File size exceeds 50.5 MB')
+    })
+  })
+
+  describe('attachment count validation', () => {
+    it('rejects a batch that would push past maxAttachmentsPerMessage', () => {
+      setChatConfiguration({ maxAttachmentsPerMessage: 2 })
+      const { result } = renderUploader()
+
+      act(() => {
+        result.current.handleFilesAttached([
+          makeFile({ uri: 'file:///a.pdf', name: 'a.pdf' }),
+          makeFile({ uri: 'file:///b.pdf', name: 'b.pdf' }),
+          makeFile({ uri: 'file:///c.pdf', name: 'c.pdf' }),
+        ])
+      })
+
+      expect(result.current.errorMessage).toBe("You can't attach more than 2 files at once.")
+      expect(result.current.attachments).toHaveLength(0)
+    })
+  })
+
+  describe('remainingAttachable', () => {
+    it('reports how many more files can be attached', () => {
+      setChatConfiguration({ maxAttachmentsPerMessage: 5 })
+      const { result } = renderUploader({
+        draftAttachments: [draftAttachment('a.pdf'), draftAttachment('b.pdf')],
+      })
+
+      expect(result.current.remainingAttachable).toBe(3)
+    })
+
+    it('clamps to 0 when the draft already exceeds the server limit', () => {
+      // Simulates a saved draft whose attachments outnumber a since-lowered
+      // server cap — the value must never go negative.
+      setChatConfiguration({ maxAttachmentsPerMessage: 1 })
+      const { result } = renderUploader({
+        draftAttachments: [draftAttachment('a.pdf'), draftAttachment('b.pdf')],
+      })
+
+      expect(result.current.remainingAttachable).toBe(0)
+    })
+  })
+
+  describe('upload errors', () => {
+    const rejectingResponse = (body: unknown, status = 500) => {
+      const response = { status, clone: () => response, json: async () => body }
+      return response as unknown as Response
+    }
+
+    it('shows a generic error message when the upload fails', async () => {
+      mockedUseApiClient.mockReturnValue({
+        chat: { post: jest.fn().mockRejectedValue(rejectingResponse({})) },
+      } as any)
+
+      const { result } = renderUploader()
+
+      await act(async () => {
+        result.current.handleFilesAttached([makeFile()])
+      })
+      await act(async () => {
+        await Promise.resolve()
+      })
+
+      expect(result.current.errorMessage).toBe('This file could not be uploaded.')
+    })
+
+    it('does not overwrite the error message when the upload is flagged', async () => {
+      mockedUseUploadClient.mockReturnValue({
+        uploadFile: jest.fn().mockRejectedValue({ code: 'image_flagged' }),
+      } as any)
+
+      const { result } = renderUploader()
+
+      await act(async () => {
+        result.current.handleFilesAttached([makeFile()])
+      })
+      await act(async () => {
+        await Promise.resolve()
+      })
+
+      expect(result.current.errorMessage).toBeNull()
+      expect(result.current.flaggedAttachmentCount).toBe(1)
+    })
+  })
+})

package/src/__tests__/hooks/use_chat_configuration.test.tsx

@@ -0,0 +1,80 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, act } from '@testing-library/react-hooks'
+import React, { Suspense } from 'react'
+import {
+  FALLBACK_ALLOWED_FILE_EXTENSIONS,
+  FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
+  FALLBACK_MAX_FILE_SIZE_IN_BYTES,
+} from '../../hooks/attachments/fallback_chat_configuration'
+import * as useApiClientModule from '../../hooks/use_api_client'
+import { useChatConfiguration } from '../../hooks/use_chat_configuration'
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </QueryClientProvider>
+  )
+}
+
+const waitForQuery = async () => {
+  await act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+const mockApiClient = (getImpl: () => Promise<unknown>) => {
+  jest.spyOn(useApiClientModule, 'useApiClient').mockReturnValue({
+    chat: { get: jest.fn(getImpl) },
+  } as any)
+}
+
+describe('useChatConfiguration', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('returns server-provided values when the API succeeds', async () => {
+    mockApiClient(() =>
+      Promise.resolve({
+        data: {
+          type: 'ChatConfiguration',
+          id: 'current',
+          allowedFileExtensions: ['.pdf', '.jpg'],
+          maxFileSizeInBytes: 1000,
+          maxAttachmentsPerMessage: 3,
+        },
+        links: {},
+        meta: {},
+      })
+    )
+
+    const { result } = renderHook(() => useChatConfiguration(), { wrapper: createWrapper() })
+    await waitForQuery()
+
+    expect(result.current).toEqual({
+      allowedFileExtensions: ['.pdf', '.jpg'],
+      maxFileSizeInBytes: 1000,
+      maxAttachmentsPerMessage: 3,
+    })
+  })
+
+  it('returns fallback values when the API rejects', async () => {
+    mockApiClient(() => Promise.reject(new Error('boom')))
+
+    const { result } = renderHook(() => useChatConfiguration(), { wrapper: createWrapper() })
+    await waitForQuery()
+
+    expect(result.current).toEqual({
+      allowedFileExtensions: FALLBACK_ALLOWED_FILE_EXTENSIONS,
+      maxFileSizeInBytes: FALLBACK_MAX_FILE_SIZE_IN_BYTES,
+      maxAttachmentsPerMessage: FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
+    })
+  })
+})

package/src/__tests__/utils/native_adapters/configuration.ts

@@ -4,11 +4,17 @@ import {
   AudioAdapter,
   Clipboard,
   ClipboardAdapter,
+  DocumentPickerAdapter,
   ImagePickerAdapter,
   LinkingAdapter,
   VideoAdapter,
 } from '../../../utils/native_adapters'
-import { ChatAdapters, Linking, Haptic } from '../../../utils/native_adapters/configuration'
+import {
+  ChatAdapters,
+  DocumentPicker,
+  Linking,
+  Haptic,
+} from '../../../utils/native_adapters/configuration'
 import { HapticAdapter } from '../../../utils/native_adapters/haptic'
 import { VideoPlayerHandle, VideoPlayerProps } from '../../../utils/native_adapters/video'
 
@@ -104,6 +110,24 @@ describe('ChatAdapters', () => {
     })
   })
 
+  describe('document picker adapter', () => {
+    it('uses the configured adapter when provided', () => {
+      const documentPicker = new DocumentPickerAdapter({
+        openAsync: jest.fn(async () => ({ canceled: true, assets: null })),
+      })
+
+      ChatAdapters.configure({
+        clipboard,
+        audio,
+        video,
+        imagePicker,
+        documentPicker,
+      })
+
+      expect(DocumentPicker).toEqual(documentPicker)
+    })
+  })
+
   describe('haptic adapter', () => {
     it('should configure the haptic adapter', () => {
       ChatAdapters.configure({

package/src/components/conversation/message_form.tsx

@@ -36,7 +36,13 @@ import {
   platformFontWeightMedium,
   platformPressedOpacityStyle,
 } from '../../utils'
-import { Haptic, ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
+import {
+  DocumentPicker,
+  DocumentPickerResult,
+  Haptic,
+  ImagePicker,
+  ImagePickerResult,
+} from '../../utils/native_adapters'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Button } from '../display/button'
 import BannerPrimitive from '../primitive/banner_primitive'
@@ -522,6 +528,21 @@ function MessageFormAttachmentPicker() {
     attachmentUploader?.handleFilesAttached(filteredAssets)
   }
 
+  function uploadDocumentPickerResult(result: DocumentPickerResult) {
+    if (result.canceled) return
+
+    const filteredAssets = result.assets
+      .filter(asset => asset.size != null && asset.uri)
+      .map(asset => ({
+        uri: asset.uri,
+        name: asset.name,
+        type: asset.mimeType || 'application/octet-stream',
+        size: asset.size as number,
+      }))
+
+    attachmentUploader?.handleFilesAttached(filteredAssets)
+  }
+
   const openCamera = async () => {
     setIsOpen(false)
     let result = await ImagePicker.openCameraAsync()
@@ -538,6 +559,14 @@ function MessageFormAttachmentPicker() {
     }
   }
 
+  const pickFile = async () => {
+    setIsOpen(false)
+    let result = await DocumentPicker.openAsync()
+    if (!result.canceled) {
+      uploadDocumentPickerResult(result)
+    }
+  }
+
   if (usingGiphy || currentlyEditingMessage) {
     return null
   }
@@ -564,6 +593,15 @@ function MessageFormAttachmentPicker() {
             onPress={pickImage}
             style={styles.attachmentPickerButton}
           />
+          <IconButton
+            accessibilityLabel="Attach a file"
+            accessibilityHint="Opens your files to attach documents"
+            size="lg"
+            appearance="neutral"
+            name="general.blankFile"
+            onPress={pickFile}
+            style={styles.attachmentPickerButton}
+          />
         </View>
       )}
       <IconButton

package/src/components/display/emoji_avatar.tsx

@@ -1,14 +1,19 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import AvatarPrimitive, {
+  type AvatarRootProps,
+  type AvatarSize,
+} from '../primitive/avatar_primitive'
 import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
 
-const EMOJI_SIZE: Record<string, number> = {
+const EMOJI_SIZE: Record<AvatarSize, number> = {
   xs: 8,
   sm: 10,
   md: 14,
   lg: 20,
+  xl: 28,
+  '2xl': 40,
 }
 
 interface EmojiAvatarProps {

package/src/components/display/icon_avatar.tsx

@@ -7,14 +7,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import AvatarPrimitive, {
+  type AvatarRootProps,
+  type AvatarSize,
+} from '../primitive/avatar_primitive'
 import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
 
-const ICON_SIZE: Record<string, number> = {
+const ICON_SIZE: Record<AvatarSize, number> = {
   xs: 10,
   sm: 12,
   md: 16,
   lg: 20,
+  xl: 28,
+  '2xl': 40,
 }
 
 interface IconAvatarProps {

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/page/error_boundary.tsx

@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
-import React, { PropsWithChildren, useEffect, useMemo } from 'react'
+import React, { PropsWithChildren, useCallback, useEffect, useMemo } from 'react'
+import { onAuthRefresh } from '../../utils/auth_events'
 import { ResponseError } from '../../utils/response_error'
 import BlankState from '../primitive/blank_state_primitive'
 
@@ -39,17 +40,16 @@ class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () =>
 
 function ErrorView({ error, onReset }: { error: Error | ResponseError; onReset: () => void }) {
   const { reset } = useQueryErrorResetBoundary()
-  useEffect(() => {
-    if (!reset) return
 
-    return () => {
-      onReset()
-      reset()
-    }
+  const handleReset = useCallback(() => {
+    reset()
+    onReset()
   }, [reset, onReset])
 
+  useEffect(() => handleReset, [handleReset])
+
   if (error instanceof ResponseError) {
-    return <ResponseErrorView response={error.response} onReset={onReset} />
+    return <ResponseErrorView response={error.response} onReset={handleReset} />
   }
 
   if (isNetworkError(error)) {
@@ -77,8 +77,9 @@ function isNetworkError(error: ResponseError | Error | TypeError | null) {
   return new RegExp(networkFailedMessages.join('|'), 'i').test(error.message)
 }
 
-function ResponseErrorView({ response }: { response: Response; onReset: () => void }) {
+function ResponseErrorView({ response, onReset }: { response: Response; onReset: () => void }) {
   const { status } = response
+
   const heading = useMemo(() => {
     switch (status) {
       case 403:
@@ -101,6 +102,12 @@ function ResponseErrorView({ response }: { response: Response; onReset: () => vo
     }
   }, [status])
 
+  useEffect(() => {
+    if (status !== 401) return
+
+    return onAuthRefresh(onReset)
+  }, [status, onReset])
+
   return <ErrorContent heading={heading} body={body} />
 }
 

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/contexts/api_provider.tsx

@@ -11,6 +11,7 @@ import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
 import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
 import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
+import { emitAuthRefresh } from '../utils/auth_events'
 import { ChatContext, ChatContextValue } from './chat_context'
 
 let apiClient: ApiClient | undefined
@@ -43,6 +44,8 @@ export function ApiProvider({ children }: ViewProps) {
   useEffect(() => {
     if (!sessionChanged) return
 
+    emitAuthRefresh()
+
     if (chatQueryClient.isFetching()) {
       chatQueryClient.invalidateQueries()
       return

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