@planningcenter/chat-react-native 3.33.1 → 3.33.2-qa-664.0

package/build/utils/native_adapters/document_picker.d.ts

@@ -13,11 +13,14 @@ type DocumentPickerCanceledResult = {
     assets: null;
 };
 export type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult;
+export interface DocumentPickerOpenOptions {
+    mimeTypes?: string[];
+}
 interface DocumentPicker {
-    openAsync: () => Promise<DocumentPickerResult>;
+    openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>;
 }
 export declare class DocumentPickerAdapter {
-    openAsync: () => Promise<DocumentPickerResult>;
+    openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>;
     configured: boolean;
     constructor(methods?: DocumentPicker);
 }

package/build/utils/native_adapters/document_picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document_picker.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/document_picker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,KAAK,CAAA;IACf,MAAM,EAAE,mBAAmB,EAAE,CAAA;CAC9B,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,QAAQ,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,2BAA2B,GAAG,4BAA4B,CAAA;AAE7F,UAAU,cAAc;IACtB,SAAS,EAAE,MAAM,OAAO,CAAC,oBAAoB,CAAC,CAAA;CAC/C;AAED,qBAAa,qBAAqB;IAChC,SAAS,EAAE,MAAM,OAAO,CAAC,oBAAoB,CAAC,CAAA;IAC9C,UAAU,EAAE,OAAO,CAAA;gBAEP,OAAO,CAAC,EAAE,cAAc;CAIrC"}
+{"version":3,"file":"document_picker.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/document_picker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,KAAK,CAAA;IACf,MAAM,EAAE,mBAAmB,EAAE,CAAA;CAC9B,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,QAAQ,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,2BAA2B,GAAG,4BAA4B,CAAA;AAE7F,MAAM,WAAW,yBAAyB;IAIxC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;CACrB;AAED,UAAU,cAAc;IACtB,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,yBAAyB,KAAK,OAAO,CAAC,oBAAoB,CAAC,CAAA;CAClF;AAED,qBAAa,qBAAqB;IAChC,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,yBAAyB,KAAK,OAAO,CAAC,oBAAoB,CAAC,CAAA;IACjF,UAAU,EAAE,OAAO,CAAA;gBAEP,OAAO,CAAC,EAAE,cAAc;CAIrC"}

package/build/utils/native_adapters/document_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"document_picker.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/document_picker.ts"],"names":[],"mappings":"AAuBA,MAAM,OAAO,qBAAqB;IAChC,SAAS,CAAqC;IAC9C,UAAU,CAAS;IAEnB,YAAY,OAAwB;QAClC,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QACvF,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,OAAO,CAAA;IAC7B,CAAC;CACF","sourcesContent":["export type DocumentPickerAsset = {\n  uri: string\n  name: string\n  size?: number\n  mimeType?: string\n}\n\ntype DocumentPickerSuccessResult = {\n  canceled: false\n  assets: DocumentPickerAsset[]\n}\n\ntype DocumentPickerCanceledResult = {\n  canceled: true\n  assets: null\n}\n\nexport type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult\n\ninterface DocumentPicker {\n  openAsync: () => Promise<DocumentPickerResult>\n}\n\nexport class DocumentPickerAdapter {\n  openAsync: () => Promise<DocumentPickerResult>\n  configured: boolean\n\n  constructor(methods?: DocumentPicker) {\n    this.openAsync = methods?.openAsync ?? (async () => ({ canceled: true, assets: null }))\n    this.configured = !!methods\n  }\n}\n"]}
+{"version":3,"file":"document_picker.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/document_picker.ts"],"names":[],"mappings":"AA8BA,MAAM,OAAO,qBAAqB;IAChC,SAAS,CAAwE;IACjF,UAAU,CAAS;IAEnB,YAAY,OAAwB;QAClC,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QACvF,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,OAAO,CAAA;IAC7B,CAAC;CACF","sourcesContent":["export type DocumentPickerAsset = {\n  uri: string\n  name: string\n  size?: number\n  mimeType?: string\n}\n\ntype DocumentPickerSuccessResult = {\n  canceled: false\n  assets: DocumentPickerAsset[]\n}\n\ntype DocumentPickerCanceledResult = {\n  canceled: true\n  assets: null\n}\n\nexport type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult\n\nexport interface DocumentPickerOpenOptions {\n  // MIME types the picker should restrict to. Hosts forward to the\n  // underlying picker's `type` argument. Omitted/empty means no\n  // restriction (the picker behaves as before).\n  mimeTypes?: string[]\n}\n\ninterface DocumentPicker {\n  openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>\n}\n\nexport class DocumentPickerAdapter {\n  openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>\n  configured: boolean\n\n  constructor(methods?: DocumentPicker) {\n    this.openAsync = methods?.openAsync ?? (async () => ({ canceled: true, assets: null }))\n    this.configured = !!methods\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.33.1",
+  "version": "3.33.2-qa-664.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -27,7 +27,7 @@
     "@fortawesome/react-native-fontawesome": "^0.3.2",
     "lodash-inflection": "^1.5.0",
     "react-compiler-runtime": "^1.0.0",
-    "rn-emoji-keyboard": "^1.7.0"
+    "rn-emoji-keyboard": "1.7.0"
   },
   "peerDependencies": {
     "@planningcenter/datetime-fmt": ">=2.0.0",
@@ -65,5 +65,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "305574cb6776378d3c6f41d18302bf0ef1949961"
+  "gitHead": "3d49765002aad8e3cad75a801e1762bff300267d"
 }

package/src/__tests__/contexts/session_context.tsx

@@ -1,7 +1,8 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, act } from '@testing-library/react-hooks'
 import React, { useContext, Suspense } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
 import {
   SessionContext,
   SessionContextProvider,
@@ -67,13 +68,7 @@ const waitForQuery = async () => {
 }
 
 const createWrapper = (config: SessionContextConfig) => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  })
+  const queryClient = buildTestQueryClient()
 
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>

package/src/__tests__/hooks/paginator_meta.test.ts

@@ -0,0 +1,15 @@
+import { getNextPageParamFromMeta } from '../../hooks/paginator_meta'
+
+describe('getNextPageParamFromMeta', () => {
+  it.each([
+    [undefined, undefined],
+    [{}, undefined],
+    [{ idLt: '01ABC' }, { where: { id_lt: '01ABC' } }],
+    [{ idLte: '01ABC' }, { where: { id_lte: '01ABC' } }],
+    [{ idGt: '01ABC' }, { where: { id_gt: '01ABC' } }],
+    [{ idGte: '01ABC' }, { where: { id_gte: '01ABC' } }],
+    [{ offset: '40' }, { offset: 40 }],
+  ])('maps %p to %p', (input, expected) => {
+    expect(getNextPageParamFromMeta(input)).toEqual(expected)
+  })
+})

package/src/__tests__/hooks/useTheme.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook } from '@testing-library/react-native'
 import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
 import { ChatProvider, CreateChatThemeProps } from '../../contexts/chat_context'
 import { useTheme } from '../../hooks'
 
@@ -14,11 +15,10 @@ let themeProps: CreateChatThemeProps = {
 let queryClient: QueryClient
 
 beforeEach(() => {
-  queryClient = new QueryClient({
+  queryClient = buildTestQueryClient({
     defaultOptions: {
       queries: {
-        retry: false,
-        refetchInterval: false, // Disable refetch intervals in tests
+        refetchInterval: false,
         refetchOnWindowFocus: false,
         refetchOnReconnect: false,
       },

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

@@ -1,7 +1,8 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, act } from '@testing-library/react-hooks'
 import React, { Suspense } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
 import { useAsyncStorage } from '../../hooks/use_async_storage'
 
 jest.mock('@react-native-async-storage/async-storage')
@@ -14,13 +15,7 @@ afterAll(() => {
 const mockAsyncStorage = AsyncStorage as jest.Mocked<typeof AsyncStorage>
 
 const createWrapper = () => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  })
+  const queryClient = buildTestQueryClient()
 
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>

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

@@ -1,6 +1,7 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, act } from '@testing-library/react-hooks'
 import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
 import { useApiClient } from '../../hooks/use_api_client'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useChatConfiguration } from '../../hooks/use_chat_configuration'
@@ -18,7 +19,7 @@ const mockedUseChatConfiguration = useChatConfiguration as jest.MockedFunction<
 >
 
 const createWrapper = () => {
-  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const queryClient = buildTestQueryClient()
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   )

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

@@ -1,8 +1,10 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, act } from '@testing-library/react-hooks'
 import React, { Suspense } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
 import {
   FALLBACK_ALLOWED_FILE_EXTENSIONS,
+  FALLBACK_ALLOWED_MIME_TYPES,
   FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
   FALLBACK_MAX_FILE_SIZE_IN_BYTES,
 } from '../../hooks/attachments/fallback_chat_configuration'
@@ -10,9 +12,7 @@ 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 } },
-  })
+  const queryClient = buildTestQueryClient()
 
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>
@@ -47,6 +47,7 @@ describe('useChatConfiguration', () => {
           type: 'ChatConfiguration',
           id: 'current',
           allowedFileExtensions: ['.pdf', '.jpg'],
+          allowedMimeTypes: ['application/pdf', 'image/jpeg'],
           maxFileSizeInBytes: 1000,
           maxAttachmentsPerMessage: 3,
         },
@@ -60,11 +61,34 @@ describe('useChatConfiguration', () => {
 
     expect(result.current).toEqual({
       allowedFileExtensions: ['.pdf', '.jpg'],
+      allowedMimeTypes: ['application/pdf', 'image/jpeg'],
       maxFileSizeInBytes: 1000,
       maxAttachmentsPerMessage: 3,
     })
   })
 
+  it('falls back to FALLBACK_ALLOWED_MIME_TYPES when the server omits the field', async () => {
+    // During server-side rollout the field may be absent from the response.
+    mockApiClient(() =>
+      Promise.resolve({
+        data: {
+          type: 'ChatConfiguration',
+          id: 'current',
+          allowedFileExtensions: ['.pdf'],
+          maxFileSizeInBytes: 1000,
+          maxAttachmentsPerMessage: 3,
+        },
+        links: {},
+        meta: {},
+      })
+    )
+
+    const { result } = renderHook(() => useChatConfiguration(), { wrapper: createWrapper() })
+    await waitForQuery()
+
+    expect(result.current.allowedMimeTypes).toEqual(FALLBACK_ALLOWED_MIME_TYPES)
+  })
+
   it('returns fallback values when the API rejects', async () => {
     mockApiClient(() => Promise.reject(new Error('boom')))
 
@@ -73,6 +97,7 @@ describe('useChatConfiguration', () => {
 
     expect(result.current).toEqual({
       allowedFileExtensions: FALLBACK_ALLOWED_FILE_EXTENSIONS,
+      allowedMimeTypes: FALLBACK_ALLOWED_MIME_TYPES,
       maxFileSizeInBytes: FALLBACK_MAX_FILE_SIZE_IN_BYTES,
       maxAttachmentsPerMessage: FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
     })

package/src/__utils__/query_client.ts

@@ -0,0 +1,14 @@
+import { QueryClient, QueryClientConfig } from '@tanstack/react-query'
+import { merge } from 'lodash'
+
+const baseConfig: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      retry: false,
+      gcTime: 0,
+    },
+  },
+}
+
+export const buildTestQueryClient = (overrides: QueryClientConfig = {}) =>
+  new QueryClient(merge({}, baseConfig, overrides))

package/src/components/conversation/attachments/generic_file_attachment.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
-import { Linking } from '../../../utils'
+import { Linking, getAttachmentIconName } from '../../../utils'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { Icon } from '../../display'
 import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
@@ -75,16 +75,3 @@ const useStyles = () => {
     },
   })
 }
-
-export function getAttachmentIconName(type: string) {
-  const isImage = type.startsWith('image/')
-  const isVideo = type.startsWith('video/')
-  const isAudio = type.startsWith('audio/')
-  const isPdf = type === 'application/pdf'
-
-  if (isImage) return 'general.outlinedImageFile'
-  if (isVideo) return 'general.outlinedVideoFile'
-  if (isAudio) return 'general.outlinedMusicFile'
-  if (isPdf) return 'general.outlinedPdfFile'
-  return 'general.outlinedGenericFile'
-}

package/src/components/conversation/message_form/message_form_attachment_file.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { FileAttachment } from '../../../types/resources/denormalized_attachment_resource_for_create'
+import { FileAttachmentPreview } from '../../display'
+
+interface Props {
+  status: FileAttachment['status']
+  name: string
+  contentType?: string
+  removeAttachment: () => void
+}
+
+export function MessageFormAttachmentFile({ name, contentType, status, removeAttachment }: Props) {
+  const loading = status === 'uploading'
+  const error = status === 'error'
+  const ready = status === 'success'
+
+  return (
+    <FileAttachmentPreview
+      name={name}
+      contentType={contentType}
+      onRemovePress={removeAttachment}
+      loading={loading}
+      error={error}
+      hideRemoveButton={!ready}
+    />
+  )
+}

package/src/components/conversation/message_form.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../hooks'
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'
+import { useChatConfiguration } from '../../hooks/use_chat_configuration'
 import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { useMessageDraft } from '../../hooks/use_message_draft'
 import { ConversationScreenProps } from '../../screens/conversation_screen'
@@ -36,6 +37,7 @@ import {
   platformFontWeightMedium,
   platformPressedOpacityStyle,
 } from '../../utils'
+import { pickAttachmentPreviewKind } from '../../utils/attachment_kind'
 import {
   DocumentPicker,
   DocumentPickerResult,
@@ -46,6 +48,7 @@ import {
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Button } from '../display/button'
 import BannerPrimitive from '../primitive/banner_primitive'
+import { MessageFormAttachmentFile } from './message_form/message_form_attachment_file'
 import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'
 import { MessageFormAttachmentVideo } from './message_form/message_form_attachment_video'
 
@@ -286,15 +289,28 @@ function MessageFormAttachments() {
       contentContainerStyle={styles.messageFormAttachments}
     >
       {attachments.map(attachment => {
-        if (attachment.file.type.startsWith('video/')) {
+        const kind = pickAttachmentPreviewKind(attachment.file.type)
+        const remove = () => attachmentUploader?.removeAttachment(attachment)
+
+        if (kind === 'video') {
           return (
             <MessageFormAttachmentVideo
               key={attachment.file.uri}
               name={attachment.file.name}
               status={attachment.status}
-              removeAttachment={() => {
-                attachmentUploader?.removeAttachment(attachment)
-              }}
+              removeAttachment={remove}
+            />
+          )
+        }
+
+        if (kind === 'file') {
+          return (
+            <MessageFormAttachmentFile
+              key={attachment.file.uri}
+              name={attachment.file.name}
+              contentType={attachment.file.type}
+              status={attachment.status}
+              removeAttachment={remove}
             />
           )
         }
@@ -307,9 +323,7 @@ function MessageFormAttachments() {
             status={attachment.status}
             width={attachment.file.width}
             height={attachment.file.height}
-            removeAttachment={() => {
-              attachmentUploader?.removeAttachment(attachment)
-            }}
+            removeAttachment={remove}
           />
         )
       })}
@@ -503,6 +517,7 @@ function MessageFormAttachmentPicker() {
   const styles = useMessageFormStyles()
   const { usingGiphy, attachmentUploader, currentlyEditingMessage } =
     React.useContext(MessageFormContext)
+  const { allowedMimeTypes } = useChatConfiguration()
   const [isOpen, setIsOpen] = useState(false)
 
   function uploadImagePickerResult(result: ImagePickerResult) {
@@ -561,7 +576,7 @@ function MessageFormAttachmentPicker() {
 
   const pickFile = async () => {
     setIsOpen(false)
-    let result = await DocumentPicker.openAsync()
+    let result = await DocumentPicker.openAsync({ mimeTypes: allowedMimeTypes })
     if (!result.canceled) {
       uploadDocumentPickerResult(result)
     }

package/src/components/display/file_attachment_preview.tsx

@@ -0,0 +1,135 @@
+import { View, StyleSheet } from 'react-native'
+import { useTheme } from '../../hooks'
+import { platformFontWeightMedium } from '../../utils'
+import { getAttachmentIconName } from '../../utils/attachment_kind'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { IconButton } from './icon_button'
+import { Spinner } from './spinner'
+import { Text } from './text'
+
+interface FileAttachmentPreviewProps {
+  name: string
+  contentType?: string
+  onRemovePress: () => void
+  loading?: boolean
+  error?: boolean
+  hideRemoveButton?: boolean
+}
+
+export const FileAttachmentPreview = ({
+  name,
+  contentType,
+  onRemovePress,
+  loading = false,
+  error = false,
+  hideRemoveButton = false,
+}: FileAttachmentPreviewProps) => {
+  const styles = useStyles({ error })
+
+  if (loading) {
+    return (
+      <View style={styles.container}>
+        <Spinner size={20} style={styles.spinner} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Icon name={getAttachmentIconName(contentType)} size={18} style={styles.fileIcon} />
+        <View style={styles.textContainer}>
+          <Text
+            variant="tertiary"
+            numberOfLines={1}
+            style={styles.nameText}
+            accessibilityLabel={`File attachment: ${name}`}
+          >
+            {name}
+          </Text>
+        </View>
+      </View>
+      {!hideRemoveButton && (
+        <IconButton
+          name="general.x"
+          onPress={onRemovePress}
+          size="xxs"
+          appearance="neutral"
+          style={styles.closeButton}
+          accessibilityLabel="Remove file attachment"
+        />
+      )}
+      {error && (
+        <View style={styles.errorBadge}>
+          <Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+const useStyles = ({ error }: Partial<FileAttachmentPreviewProps>) => {
+  const { colors } = useTheme()
+  const borderRadius = 8
+
+  return StyleSheet.create({
+    container: {
+      height: 60,
+      minWidth: 150,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 8,
+      backgroundColor: colors.fillColorNeutral070,
+      borderColor: error ? colors.statusErrorBorder : colors.borderColorDefaultBase,
+      borderWidth: error ? 2 : 1,
+      borderRadius,
+      padding: 4,
+    },
+    contentContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+      flexShrink: 1,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+    },
+    textContainer: {
+      flexShrink: 1,
+      flexDirection: 'column',
+    },
+    fileIcon: {
+      color: error ? colors.iconColorDefaultDisabled : colors.iconColorDefaultPrimary,
+    },
+    nameText: {
+      color: error ? colors.textColorDefaultDisabled : colors.textColorDefaultPrimary,
+      fontWeight: platformFontWeightMedium,
+      flexShrink: 1,
+    },
+    closeButton: {
+      backgroundColor: colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      height: 20,
+      width: 20,
+      alignSelf: 'flex-start',
+    },
+    errorBadge: {
+      backgroundColor: colors.statusErrorBorder,
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      zIndex: 2,
+      borderStartStartRadius: borderRadius,
+      padding: 4,
+    },
+    errorIcon: {
+      color: tokens.colorNeutral100White,
+      transform: [{ translateX: 1 }],
+      fontSize: 10,
+    },
+    spinner: {
+      marginHorizontal: 'auto',
+    },
+  })
+}

package/src/components/display/image.tsx

@@ -79,6 +79,10 @@ export function Image({
     onLoad?.(event)
   }
 
+  const handleOnError = () => {
+    setIsImageLoading(false)
+  }
+
   const isLoading = isImageLoading || loading
 
   const ImageComponent = animatedImageStyle ? Animated.Image : ReactNativeImage
@@ -94,6 +98,7 @@ export function Image({
       <ImageComponent
         style={[styles.image, imageStyles, animatedImageStyle]}
         onLoad={handleOnLoad}
+        onError={handleOnError}
         source={source}
         alt={isLoading ? '' : alt}
         {...props}

package/src/components/display/index.ts

@@ -12,6 +12,7 @@ export * from './heading'
 export * from './icon_button'
 export * from './icon'
 export * from './image'
+export * from './file_attachment_preview'
 export * from './image_attachment_preview'
 export * from './video_attachment_preview'
 export * from './person'

package/src/hooks/attachments/fallback_chat_configuration.ts

@@ -56,6 +56,30 @@ export const FALLBACK_ALLOWED_FILE_EXTENSIONS = [
   '.xlsx',
 ]
 
+// Broad MIME categories covering the extensions in
+// FALLBACK_ALLOWED_FILE_EXTENSIONS. Used to constrain native pickers up
+// front; final accept/reject still uses the extension list because the
+// picker's `type` filter is advisory on iOS and Android.
+export const FALLBACK_ALLOWED_MIME_TYPES = [
+  'image/*',
+  'video/*',
+  'audio/*',
+  'application/pdf',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.apple.pages',
+  'application/vnd.apple.numbers',
+  'application/vnd.apple.keynote',
+  'application/rtf',
+  'text/plain',
+  'text/rtf',
+  'text/vcard',
+]
+
 export const FALLBACK_MAX_FILE_SIZE_IN_BYTES = 50 * 1024 * 1024
 
 export const FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE = 10

package/src/hooks/paginator_meta.ts

@@ -0,0 +1,13 @@
+import { NextPageCursor } from '../types/api_primitives'
+import { RequestData } from '../utils/client'
+
+export const getNextPageParamFromMeta = (
+  next: NextPageCursor = {}
+): Partial<RequestData> | undefined => {
+  if (next.idLt) return { where: { id_lt: next.idLt } }
+  if (next.idGt) return { where: { id_gt: next.idGt } }
+  if (next.idLte) return { where: { id_lte: next.idLte } }
+  if (next.idGte) return { where: { id_gte: next.idGte } }
+  if (next.offset) return { offset: Number(next.offset) }
+  return undefined
+}

package/src/hooks/use_api.ts

@@ -6,6 +6,7 @@ import {
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, FailedResponse, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client'
+import { getNextPageParamFromMeta } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 
@@ -31,11 +32,6 @@ export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: Api
   return { ...data, ...query }
 }
 
-type NextMeta = Partial<{
-  offset: string
-  idLt: string
-}>
-
 export type PaginatorOptions = Omit<
   AnyUseSuspenseInfiniteQueryOptions,
   'getNextPageParam' | 'initialPageParam' | 'queryFn' | 'queryKey'
@@ -68,15 +64,7 @@ export const useApiPaginator = <T extends ResourceObject>(
       })
     },
     initialPageParam: {} as Partial<RequestData>,
-    getNextPageParam: lastPage => {
-      const next: NextMeta = lastPage.meta?.next || {}
-      const { offset, idLt } = next
-
-      if (idLt) return { where: { id_lt: idLt } }
-      if (offset) return { offset: Number(offset) }
-
-      return undefined
-    },
+    getNextPageParam: lastPage => getNextPageParamFromMeta(lastPage.meta?.next),
     enabled: args.enabled,
     ...(opts || {}),
   })

package/src/hooks/use_chat_configuration.ts

@@ -7,6 +7,7 @@ import {
 } from '../utils/request/get_chat_configuration'
 import {
   FALLBACK_ALLOWED_FILE_EXTENSIONS,
+  FALLBACK_ALLOWED_MIME_TYPES,
   FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
   FALLBACK_MAX_FILE_SIZE_IN_BYTES,
 } from './attachments/fallback_chat_configuration'
@@ -34,6 +35,7 @@ export function useChatConfiguration() {
 
   return {
     allowedFileExtensions: attrs.allowedFileExtensions,
+    allowedMimeTypes: attrs.allowedMimeTypes ?? FALLBACK_ALLOWED_MIME_TYPES,
     maxFileSizeInBytes: attrs.maxFileSizeInBytes,
     maxAttachmentsPerMessage: attrs.maxAttachmentsPerMessage,
   }
@@ -46,6 +48,7 @@ const stableFallbackConfiguration: ApiResource<ChatConfigurationResource> = {
     type: 'ChatConfiguration',
     id: 'current',
     allowedFileExtensions: FALLBACK_ALLOWED_FILE_EXTENSIONS,
+    allowedMimeTypes: FALLBACK_ALLOWED_MIME_TYPES,
     maxFileSizeInBytes: FALLBACK_MAX_FILE_SIZE_IN_BYTES,
     maxAttachmentsPerMessage: FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
   },