@planningcenter/chat-react-native 3.34.0-rc.3 → 3.34.0-rc.5

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

@@ -4,6 +4,7 @@ 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'
@@ -46,6 +47,7 @@ describe('useChatConfiguration', () => {
           type: 'ChatConfiguration',
           id: 'current',
           allowedFileExtensions: ['.pdf', '.jpg'],
+          allowedMimeTypes: ['application/pdf', 'image/jpeg'],
           maxFileSizeInBytes: 1000,
           maxAttachmentsPerMessage: 3,
         },
@@ -59,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')))
 
@@ -72,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/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,26 @@
+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'
+
+  return (
+    <FileAttachmentPreview
+      name={name}
+      contentType={contentType}
+      onRemovePress={removeAttachment}
+      loading={loading}
+      error={error}
+      hideRemoveButton={loading}
+    />
+  )
+}

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

@@ -11,7 +11,6 @@ interface Props {
 export function MessageFormAttachmentVideo({ name, status, removeAttachment }: Props) {
   const loading = status === 'uploading'
   const error = status === 'error'
-  const ready = status === 'success'
 
   return (
     <VideoAttachmentPreview
@@ -19,7 +18,7 @@ export function MessageFormAttachmentVideo({ name, status, removeAttachment }: P
       onRemovePress={removeAttachment}
       loading={loading}
       error={error}
-      hideRemoveButton={!ready}
+      hideRemoveButton={loading}
     />
   )
 }

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, attachment.file.name)
+        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,13 @@ export function useChatConfiguration() {
 
   return {
     allowedFileExtensions: attrs.allowedFileExtensions,
+    // During the server-side rollout the API may omit allowedMimeTypes.
+    // The static fallback covers the same set of file kinds as the server's
+    // hardcoded ALLOWED_FILE_EXTENSIONS, so the picker filter and the
+    // post-pick extension validator agree. Once the server always returns
+    // allowedMimeTypes, the resource type can tighten from optional to
+    // required and this nullish-coalesce becomes pure defense-in-depth.
+    allowedMimeTypes: attrs.allowedMimeTypes ?? FALLBACK_ALLOWED_MIME_TYPES,
     maxFileSizeInBytes: attrs.maxFileSizeInBytes,
     maxAttachmentsPerMessage: attrs.maxAttachmentsPerMessage,
   }
@@ -46,6 +54,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,
   },

package/src/hooks/use_suspense_api.ts

@@ -10,6 +10,7 @@ import { FailedResponse } from '../types/api_primitives'
 import { Log } from '../utils'
 import { GetRequest, RequestData } from '../utils/client'
 import { ResponseError } from '../utils/response_error'
+import { getNextPageParamFromMeta } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 
 interface SuspenseGetOptions extends GetRequest {
@@ -43,11 +44,6 @@ export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
   return { ...data, ...query }
 }
 
-type NextMeta = Partial<{
-  offset: string
-  idLt: string
-}>
-
 export type SuspensePaginatorOptions = Omit<
   AnyUseSuspenseInfiniteQueryOptions,
   'getNextPageParam' | 'initialPageParam' | 'queryFn' | 'queryKey'
@@ -84,15 +80,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
         .catch(throwResponseError)
     },
     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),
     ...(opts || {}),
   })
 

package/src/types/api_primitives.ts

@@ -27,10 +27,18 @@ export interface FailedResponse extends Response {
   errors: ErrorObject[]
 }
 
+export interface NextPageCursor {
+  offset?: string
+  idLt?: string
+  idLte?: string
+  idGt?: string
+  idGte?: string
+}
+
 export interface CollectionMeta {
   count: number
   totalCount: number
-  next?: Record<string, unknown>
+  next?: NextPageCursor
   parent?: ResourceObject
   [attributeName: string]: unknown
 }

package/src/types/resources/chat_configuration_resource.ts

@@ -6,6 +6,10 @@ export interface ChatConfigurationResource {
   type: 'ChatConfiguration'
   id: string
   allowedFileExtensions: string[]
+  // Optional during server-side rollout. Once the server always returns it,
+  // tighten to `string[]`. Until then, useChatConfiguration falls back to
+  // FALLBACK_ALLOWED_MIME_TYPES.
+  allowedMimeTypes?: string[]
   maxFileSizeInBytes: number
   maxAttachmentsPerMessage: number
 }

package/src/utils/__tests__/attachment_kind.test.ts

@@ -0,0 +1,37 @@
+import { pickAttachmentPreviewKind } from '../attachment_kind'
+
+describe('pickAttachmentPreviewKind', () => {
+  describe('with a usable MIME type', () => {
+    it.each([
+      ['image/png', 'image'],
+      ['image/jpeg', 'image'],
+      ['video/mp4', 'video'],
+      ['video/quicktime', 'video'],
+      ['application/pdf', 'file'],
+      ['text/plain', 'file'],
+      ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'file'],
+      ['', 'file'],
+      [undefined, 'file'],
+    ])('classifies %p as %p', (input, expected) => {
+      expect(pickAttachmentPreviewKind(input)).toBe(expected)
+    })
+  })
+
+  // Document picker providers sometimes drop the MIME type. Without an
+  // extension-based fallback, octet-stream-typed images and videos would
+  // render as generic file tiles even though the bytes are decodable.
+  describe('with an unhelpful MIME type', () => {
+    it.each([
+      ['application/octet-stream', 'IMG_1234.HEIC', 'image'],
+      ['application/octet-stream', 'photo.jpg', 'image'],
+      ['application/octet-stream', 'clip.mov', 'video'],
+      ['application/octet-stream', 'movie.MP4', 'video'],
+      ['application/octet-stream', 'spreadsheet.xlsx', 'file'],
+      [undefined, 'photo.png', 'image'],
+      ['application/octet-stream', undefined, 'file'],
+      ['application/octet-stream', 'no_extension', 'file'],
+    ])('with type %p and name %p classifies as %p', (type, name, expected) => {
+      expect(pickAttachmentPreviewKind(type, name)).toBe(expected)
+    })
+  })
+})

package/src/utils/attachment_kind.ts

@@ -0,0 +1,47 @@
+import { IconString } from '../components/display/icon'
+
+export type AttachmentPreviewKind = 'image' | 'video' | 'file'
+
+// Document picker providers sometimes hand back assets without a usable
+// MIME type (Android `MediaStore` content URIs, some cloud-storage
+// providers). The asset's `type` then arrives as `application/octet-stream`
+// or undefined even though the file is genuinely an image or video. Fall
+// back to extension-based classification in that case so the preview
+// matches the actual content.
+const IMAGE_EXTENSIONS = new Set(['bmp', 'gif', 'heic', 'heif', 'jpeg', 'jpg', 'png', 'webp'])
+
+const VIDEO_EXTENSIONS = new Set([
+  '3gp',
+  'avi',
+  'h263',
+  'h264',
+  'm4v',
+  'mkv',
+  'mov',
+  'mp4',
+  'mpeg',
+  'mpeg4',
+  'mpg',
+  'webm',
+  'wmv',
+])
+
+export function pickAttachmentPreviewKind(
+  type: string | undefined,
+  name?: string
+): AttachmentPreviewKind {
+  if (type?.startsWith('image/')) return 'image'
+  if (type?.startsWith('video/')) return 'video'
+  const ext = name?.split('.').pop()?.toLowerCase()
+  if (ext && IMAGE_EXTENSIONS.has(ext)) return 'image'
+  if (ext && VIDEO_EXTENSIONS.has(ext)) return 'video'
+  return 'file'
+}
+
+export function getAttachmentIconName(type: string | undefined): IconString {
+  if (type?.startsWith('image/')) return 'general.outlinedImageFile'
+  if (type?.startsWith('video/')) return 'general.outlinedVideoFile'
+  if (type?.startsWith('audio/')) return 'general.outlinedMusicFile'
+  if (type === 'application/pdf') return 'general.outlinedPdfFile'
+  return 'general.outlinedGenericFile'
+}

package/src/utils/index.ts

@@ -10,4 +10,5 @@ export * from './reaction_constants'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
 export * from './assert_keys_are_numbers'
+export * from './attachment_kind'
 export * from './system_messages'

package/src/utils/native_adapters/document_picker.ts

@@ -17,12 +17,19 @@ type DocumentPickerCanceledResult = {
 
 export type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult
 
+export interface DocumentPickerOpenOptions {
+  // MIME types the picker should restrict to. Hosts forward to the
+  // underlying picker's `type` argument. Omitted/empty means no
+  // restriction (the picker behaves as before).
+  mimeTypes?: string[]
+}
+
 interface DocumentPicker {
-  openAsync: () => Promise<DocumentPickerResult>
+  openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>
 }
 
 export class DocumentPickerAdapter {
-  openAsync: () => Promise<DocumentPickerResult>
+  openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>
   configured: boolean
 
   constructor(methods?: DocumentPicker) {