stream-chat-react-native-core 9.10.2-beta.1 → 10.0.0-rc.2

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import {
+  getAttachmentPreviewUrl,
   isLocalVoiceRecordingAttachment,
   isVoiceRecordingAttachment,
   LocalMessage,
@@ -49,10 +50,8 @@ const getAudioDurationLabel = (durationInMilliseconds: number) => {
 };
 
 export type AudioAttachmentType = AudioConfig &
-  Pick<
-    StreamAudioAttachment | StreamVoiceRecordingAttachment,
-    'waveform_data' | 'asset_url' | 'title' | 'mime_type'
-  > & {
+  Pick<StreamAudioAttachment | StreamVoiceRecordingAttachment, 'asset_url' | 'title'> & {
+    custom: StreamVoiceRecordingAttachment['custom'];
     id: string;
     type: 'audio' | 'voiceRecording';
   };
@@ -62,14 +61,10 @@ export type AudioAttachmentProps = {
   message?: LocalMessage;
   hideProgressBar?: boolean;
   showTitle?: boolean;
-  /**
-   * If true, the speed settings button will be shown.
-   */
+  /** Shows the speed settings button. Defaults to false. */
   showSpeedSettings?: boolean;
   testID?: string;
-  /**
-   * If true, the audio attachment is in preview mode in the message input.
-   */
+  /** Whether the attachment is shown as a preview in the message input. Defaults to false. */
   isPreview?: boolean;
   containerStyle?: StyleProp<ViewStyle>;
   indicator?: React.ReactNode;
@@ -90,10 +85,7 @@ const audioPlayerSelector = (state: AudioPlayerState) => ({
   progress: state.progress,
 });
 
-/**
- * AudioAttachment
- * UI Component to preview the audio files
- */
+/** Previews and plays audio and voice recording attachments. */
 export const AudioAttachment = (props: AudioAttachmentProps) => {
   const soundRef = React.useRef<SoundReturnType | null>(null);
   const styles = useStyles();
@@ -110,29 +102,30 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     indicator,
   } = props;
   const isVoiceRecording = isVoiceRecordingAttachment(item);
+  const waveformData = item.custom?.waveform_data;
 
   const audioPlayer = useAudioPlayer({
-    duration: item.duration ?? 0,
-    mimeType: item.mime_type ?? '',
+    duration: item.duration ?? item.custom?.duration ?? 0,
+    mimeType: item.custom?.mime_type ?? '',
     requester: isPreview
       ? 'preview'
       : message?.id && `${message?.parent_id ?? message?.id}${message?.id}`,
     type: isVoiceRecording ? 'voiceRecording' : 'audio',
-    uri: item.asset_url ?? '',
+    uri: getAttachmentPreviewUrl(item, item.asset_url) ?? '',
   });
   const { duration, isPlaying, position, progress, currentPlaybackRate } = useStateStore(
     audioPlayer.state,
     audioPlayerSelector,
   );
 
-  // Initialize the player for native cli apps
+  // Initializes the player for native CLI apps.
   useEffect(() => {
     if (soundRef.current) {
       audioPlayer.initPlayer({ playerRef: soundRef.current });
     }
   }, [audioPlayer]);
 
-  // When a audio attachment in preview is removed, we need to remove the player from the pool
+  // A removed preview releases its player from the pool.
   useEffect(
     () => () => {
       if (isPreview) {
@@ -142,22 +135,22 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     [audioPlayer, isPreview],
   );
 
-  /** This is for Native CLI Apps */
+  /** Player callback for native CLI apps. */
   const handleLoad = (payload: VideoPayloadData) => {
-    // Voice recordings already carry the canonical duration in the attachment payload.
+    // Voice recordings carry the canonical duration in the attachment payload.
     if (isVoiceRecording) {
       return;
     }
     audioPlayer.duration = payload.duration * ONE_SECOND_IN_MILLISECONDS;
   };
 
-  /** This is for Native CLI Apps */
+  /** Player callback for native CLI apps. */
   const handleProgress = (data: VideoProgressData) => {
     const { currentTime } = data;
     audioPlayer.position = currentTime * ONE_SECOND_IN_MILLISECONDS;
   };
 
-  /** This is for Native CLI Apps */
+  /** Player callback for native CLI apps. */
   const onSeek = (seekResponse: VideoSeekResponse) => {
     audioPlayer.position = seekResponse.currentTime * ONE_SECOND_IN_MILLISECONDS;
   };
@@ -265,13 +258,13 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             />
             {!hideProgressBar && (
               <View style={[styles.progressControlContainer, progressControlContainer]}>
-                {item.waveform_data ? (
+                {waveformData ? (
                   <WaveProgressBar
                     isPlaying={isPlaying}
                     onEndDrag={dragEnd}
                     onStartDrag={dragStart}
                     progress={progress}
-                    waveformData={item.waveform_data}
+                    waveformData={waveformData}
                   />
                 ) : (
                   <ProgressControl
@@ -296,7 +289,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             rate={currentPlaybackRate}
             soundRef={soundRef as RefObject<SoundReturnType>}
             testID='sound-player'
-            uri={item.asset_url}
+            uri={getAttachmentPreviewUrl(item, item.asset_url)}
           />
         )}
       </View>

package/src/components/Attachment/Audio/PlayPauseButton.tsx

@@ -7,17 +7,11 @@ import { primitives } from '../../../theme';
 import { buttonSizes } from '../../ui/Button/constants';
 
 export type PlayPauseButtonProps = PressableProps & {
-  /**
-   * If true, the button will be playing.
-   */
+  /** Whether the button shows the playing state. */
   isPlaying: boolean;
-  /**
-   * The function to be called when the button is pressed.
-   */
+  /** Called when the button is pressed. */
   onPress: () => void;
-  /**
-   * The style of the container.
-   */
+  /** Style of the container. */
   containerStyle?: StyleProp<ViewStyle>;
 };
 

package/src/components/Attachment/CircularProgressIndicator.tsx

@@ -16,9 +16,9 @@ const SPIN_DURATION_MS = 900;
 const PROGRESS_ANIMATION_DURATION_MS = 1200;
 
 export type CircularProgressIndicatorProps = {
-  /** Upload percent **0–100**. */
   backgroundColor: ColorValue;
   filledColor: ColorValue;
+  /** Upload progress as a percentage from 0 to 100. */
   progress: number;
   unfilledColor: ColorValue;
   size?: number;
@@ -27,9 +27,7 @@ export type CircularProgressIndicatorProps = {
   testID?: string;
 };
 
-/**
- * Circular upload progress ring (determinate) or rotating arc (indeterminate).
- */
+/** Circular upload progress ring (determinate) or rotating arc (indeterminate). */
 export const CircularProgressIndicator = ({
   backgroundColor,
   filledColor,

package/src/components/Attachment/FileAttachment.tsx

@@ -1,7 +1,12 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import {
+  type Attachment,
+  getAttachmentPreviewUrl,
+  isLocalUploadAttachment,
+  resolveAttachmentFullByteSize,
+} from 'stream-chat';
 
 import { AttachmentFileUploadProgressIndicator } from './AttachmentFileUploadProgressIndicator';
 import { openUrlSafely } from './utils/openUrlSafely';
@@ -18,14 +23,13 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { DefaultAttachmentData } from '../../types/types';
 
 export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
   'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
   Pick<MessagesContextValue, 'additionalPressableProps'> & {
-    /** The attachment to render */
+    /** The attachment to render. */
     attachment: Attachment;
     attachmentIconSize?: FileIconProps['size'];
     // TODO: Think we really need a way to style the file preview using props if we have theme.
@@ -52,7 +56,7 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
   } = props;
   const { FilePreview } = useComponentsContext();
 
-  const localId = (attachment as DefaultAttachmentData).localId;
+  const localId = isLocalUploadAttachment(attachment) ? attachment.localMetadata.id : undefined;
 
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
@@ -98,8 +102,12 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
           indicator={
             <AttachmentFileUploadProgressIndicator
               localId={localId}
-              sourceUrl={attachment.asset_url ?? attachment.originalFile?.uri}
-              totalBytes={attachment.file_size}
+              sourceUrl={getAttachmentPreviewUrl(
+                attachment,
+                attachment.asset_url,
+                attachment.image_url,
+              )}
+              totalBytes={resolveAttachmentFullByteSize(attachment)}
             />
           }
           styles={stylesProp}

package/src/components/Attachment/FileIcon.tsx

@@ -164,8 +164,7 @@ const audioFileTypes = [
   'audio/vorbis-config',
 ];
 
-// Partially based on:
-// https://stackoverflow.com/a/4212908/2570866
+// Partially based on https://stackoverflow.com/a/4212908/2570866
 
 const docMimeTypes = [
   // Microsoft Word
@@ -181,8 +180,7 @@ const docMimeTypes = [
   'application/vnd.oasis.opendocument.text-template',
   // .fodt
   'application/vnd.oasis.opendocument.text-flat-xml',
-  // .uot
-  // NOTE: firefox doesn't know mimetype so maybe ignore
+  // .uot has no entry: Firefox does not know its MIME type.
 
   // Microsoft Word
   // .docx
@@ -193,14 +191,6 @@ const docMimeTypes = [
   'application/vnd.ms-word.document.macroEnabled.12',
   // .dotm (no test)
   'application/vnd.ms-word.template.macroEnabled.12',
-
-  // LibreOffice/OpenOffice Writer
-  // .odt
-  'application/vnd.oasis.opendocument.text',
-  // .ott
-  'application/vnd.oasis.opendocument.text-template',
-  // .fodt
-  'application/vnd.oasis.opendocument.text-flat-xml',
 ];
 
 const excelMimeTypes = [
@@ -227,23 +217,22 @@ const excelMimeTypes = [
   // .xlam (no test)
   'application/vnd.ms-excel.addin.macroEnabled.12',
   // .xlsb (no test)
-  'application/vnd.ms-excel.addin.macroEnabled.12',
+  'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
 ];
 
 const powerpointMimeTypes = [
-  // Microsoft Word
+  // Microsoft PowerPoint
   // .ppt .pot .pps .ppa (no test for .ppa)
   'application/vnd.ms-powerpoint',
 
-  // LibreOffice/OpenOffice Writer
+  // LibreOffice/OpenOffice Impress
   // .odp
   'application/vnd.oasis.opendocument.presentation',
   // .otp
   'application/vnd.oasis.opendocument.presentation-template',
   // .fodp
   'application/vnd.oasis.opendocument.presentation-flat-xml',
-  // .uop
-  // NOTE: firefox doesn't know mimetype so maybe ignore
+  // .uop has no entry: Firefox does not know its MIME type.
 
   // .pptx
   'application/vnd.openxmlformats-officedocument.presentationml.presentation',
@@ -262,7 +251,7 @@ const powerpointMimeTypes = [
 ];
 
 const zipFileTypes = [
-  // .gzip
+  // .gzip .tar.gz
   'application/gzip',
   // .zip
   'application/zip',
@@ -271,8 +260,6 @@ const zipFileTypes = [
   'application/x-archive',
   // .tar
   'application/x-tar',
-  // .tar.gz
-  'application/gzip',
   // .tar.Z
   'application/x-compress',
   // .tar.bz2
@@ -327,7 +314,6 @@ const videoFileTypes = [
   'video/wmv',
   'video/yuv',
   'video/quicktime',
-  'video/webm',
   'video/x-flv',
 ];
 

package/src/components/Attachment/FilePreview.tsx

@@ -10,7 +10,7 @@ import { primitives } from '../../theme';
 import { getDurationLabelFromDuration, getFileSizeDisplayText } from '../../utils/utils';
 
 export type FilePreviewProps = {
-  /** The attachment to render */
+  /** The attachment to render. */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
   // TODO: Think we really need a way to style the file preview using props if we have theme.
@@ -44,9 +44,12 @@ export const FilePreview = (props: FilePreviewProps) => {
     },
   } = useTheme();
 
+  // `duration` only exists on audio and voice recording attachments, under the untyped `custom`.
+  const duration = (attachment.custom as { duration?: number } | undefined)?.duration;
+
   return (
     <View style={[styles.container, container, stylesProp.container]}>
-      <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentIconSize} />
+      <FileAttachmentIcon mimeType={attachment.custom?.mime_type} size={attachmentIconSize} />
       <View style={[styles.details, details, stylesProp.details]}>
         <Text numberOfLines={titleNumberOfLines} style={[styles.title, title, stylesProp.title]}>
           {attachment.title}
@@ -55,9 +58,9 @@ export const FilePreview = (props: FilePreviewProps) => {
           indicator
         ) : (
           <Text style={[styles.size, fileSize, stylesProp.size]}>
-            {attachment.duration
-              ? getDurationLabelFromDuration(attachment.duration)
-              : getFileSizeDisplayText(attachment.file_size)}
+            {duration
+              ? getDurationLabelFromDuration(duration)
+              : getFileSizeDisplayText(attachment.custom?.file_size)}
           </Text>
         )}
       </View>

package/src/components/Attachment/Gallery.tsx

@@ -40,6 +40,7 @@ import { isVideoPlayerAvailable } from '../../native';
 import { primitives } from '../../theme';
 import type { ViewRef } from '../../types/react-native-compat';
 import { FileTypes } from '../../types/types';
+import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getUrlWithoutParams } from '../../utils/utils';
 
 export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
@@ -103,9 +104,10 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     minWidth,
   };
   const imagesAndVideos = [...(images || []), ...(videos || [])];
+  const galleryItemKey = (i: Attachment) => `${getUrlOfImageAttachment(i)}${i.thumb_url}`;
   const imagesAndVideosValue = `${images?.length}${videos?.length}${images
-    ?.map((i) => `${i.image_url}${i.thumb_url}`)
-    .join('')}${videos?.map((i) => `${i.image_url}${i.thumb_url}`).join('')}`;
+    ?.map(galleryItemKey)
+    .join('')}${videos?.map(galleryItemKey).join('')}`;
   const { height, invertedDirections, thumbnailGrid, width } = useMemo(
     () =>
       buildGallery({
@@ -240,9 +242,13 @@ const GalleryThumbnail = ({
   const styles = useStyles();
   const isVideo = thumbnail.type === FileTypes.Video;
   const thumbnailAccessibilityLabel = useA11yLabel(
-    isVideo ? 'a11y/Gallery Video' : 'a11y/Gallery Image',
+    isVideo
+      ? 'attachment.gallery.video.accessibilityLabel'
+      : 'attachment.gallery.image.accessibilityLabel',
+  );
+  const thumbnailAccessibilityHint = useA11yLabel(
+    'attachment.gallery.doubleTapToOpen.accessibilityLabel',
   );
-  const thumbnailAccessibilityHint = useA11yLabel('a11y/Double tap to open');
   const thumbnailRef = useRef<ViewRef>(null);
   const openImageViewer = () => {
     if (!message) {
@@ -256,11 +262,11 @@ const GalleryThumbnail = ({
     setOverlay('gallery');
   };
   const defaultOnPress = () => {
-    // If the url is defined then only try to open the file.
+    // Only opens when the thumbnail has a URL.
     if (thumbnail.url) {
       if (thumbnail.type === FileTypes.Video && !isVideoPlayerAvailable()) {
-        // This condition is kinda unreachable, since we render videos as file attachment if the video
-        // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
+        // Normally unreachable, since videos render as file attachments without a video library;
+        // kept as a safeguard for customizations.
         openUrlSafely(thumbnail.url);
       } else {
         openImageViewer();
@@ -331,7 +337,13 @@ const GalleryThumbnail = ({
           ]}
         >
           <Text style={[styles.moreImagesText, moreImagesText]}>
-            {String(t('+{{count}}', { count: imagesAndVideos.length - 4 }))}
+            {String(
+              t('attachment.gallery.moreImages.label', {
+                count: imagesAndVideos.length - 4,
+                defaultValue_one: '+{{count}}',
+                defaultValue_other: '+{{count}}',
+              }),
+            )}
           </Text>
         </View>
       ) : null}
@@ -413,9 +425,7 @@ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWit
 };
 const MemoizedGallery = React.memo(GalleryWithContext, areEqual) as typeof GalleryWithContext;
 export type GalleryProps = Partial<GalleryPropsWithContext>;
-/**
- * UI component for card in attachments.
- */
+/** Renders image and video attachments as a grid of thumbnails. */
 export const Gallery = (props: GalleryProps) => {
   const {
     alignment: propAlignment,

package/src/components/Attachment/GalleryImage.tsx

@@ -29,8 +29,8 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
     ...rest
   } = props;
 
-  // Caching image components such as FastImage will not work with local images.
-  // This for the case of local uris, we use the default Image component.
+  // Caching image components such as FastImage do not work with local images, so local URIs use
+  // the default `Image`.
   if (!isLocalUrl(uri)) {
     return (
       <ImageComponent

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -70,7 +70,9 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     >
       <View style={[styles.header, header]}>
         <icons.EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
-        <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
+        <Text style={[styles.headerText, giphyHeaderText]}>
+          {t('attachment.giphy.onlyVisibleToYou.text', 'Only visible to you')}
+        </Text>
       </View>
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
       <View style={[styles.actionButtonContainer, actionButtonContainer]}>
@@ -183,9 +185,7 @@ export type GiphyProps = Partial<GiphyPropsWithContext> & {
   attachment: Attachment;
 };
 
-/**
- * UI component for card in attachments.
- */
+/** Renders a Giphy attachment. */
 export const Giphy = (props: GiphyProps) => {
   const { handleAction, isMyMessage, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext();

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -19,9 +19,7 @@ export type GiphyImagePropsWithContext = Pick<MessagesContextValue, 'giphyVersio
   ImageComponent?: React.ComponentType<ImageProps>;
 } & {
   attachment: Attachment;
-  /**
-   * Whether to render the preview image or the full image
-   */
+  /** Whether to render the preview image or the full image. Defaults to false. */
   preview?: boolean;
 };
 
@@ -156,9 +154,7 @@ export type GiphyImageProps = Partial<GiphyImagePropsWithContext> & {
   attachment: Attachment;
 };
 
-/**
- * UI component for card in attachments.
- */
+/** Renders a Giphy image, either the preview or the full image. */
 export const GiphyImage = (props: GiphyImageProps) => {
   const { ImageComponent } = useComponentsContext();
   const { giphyVersion } = useMessagesContext();

package/src/components/Attachment/ImageLoadingFailedIndicator.tsx

@@ -7,10 +7,7 @@ import { useStableCallback } from '../../hooks';
 import { RetryBadge } from '../ui/Badge/RetryBadge';
 
 export type ImageLoadingFailedIndicatorProps = ViewProps & {
-  /**
-   * Callback to reload the image
-   * @returns Callback to reload the image
-   */
+  /** Called to reload the image. */
   onReloadImage: () => void;
 };
 

package/src/components/Attachment/MediaUploadProgressOverlay.tsx

@@ -11,9 +11,7 @@ export type MediaUploadProgressOverlayProps = {
   testID?: string;
 };
 
-/**
- * Full-cover upload overlay for image and video thumbnails.
- */
+/** Full-cover upload overlay for image and video thumbnails. */
 export const MediaUploadProgressOverlay = ({
   progress,
   size = 18,

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -15,7 +15,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { primitives } from '../../theme';
 
 export type UnsupportedAttachmentProps = Partial<Pick<MessageContextValue, 'isMyMessage'>> & {
-  /** The attachment to render */
+  /** The attachment to render. */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
 };
@@ -38,10 +38,10 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
 
   return (
     <View style={[styles.container, container]}>
-      <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentIconSize} />
+      <FileAttachmentIcon mimeType={attachment.custom?.mime_type} size={attachmentIconSize} />
       <View style={[styles.details, details]}>
         <Text numberOfLines={2} style={[styles.title, title]}>
-          {attachment.title ?? t('Unsupported Attachment')}
+          {attachment.title ?? t('attachment.unsupported.title', 'Unsupported Attachment')}
         </Text>
       </View>
     </View>

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -205,9 +205,7 @@ export type URLPreviewProps = Partial<URLPreviewPropsWithContext> & {
   attachment: Attachment;
 };
 
-/**
- * UI component for card in attachments.
- */
+/** Renders a URL preview card for a scraped link attachment. */
 export const URLPreview = (props: URLPreviewProps) => {
   const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
@@ -215,7 +213,7 @@ export const URLPreview = (props: URLPreviewProps) => {
 
   return (
     <MemoizedURLPreview
-      key={`${message?.id}${message?.updated_at}`} // press listeners must change on message update, updating key ensures this
+      key={`${message?.id}${message?.updated_at}`} // remounts on update to refresh press listeners
       {...{
         additionalPressableProps,
         channelId: message.cid,

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -203,9 +203,7 @@ export type URLPreviewCompactProps = Partial<URLPreviewCompactPropsWithContext>
   attachment: Attachment;
 };
 
-/**
- * UI component for card in attachments.
- */
+/** Renders a compact URL preview for a scraped link attachment. */
 export const URLPreviewCompact = (props: URLPreviewCompactProps) => {
   const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
@@ -213,7 +211,7 @@ export const URLPreviewCompact = (props: URLPreviewCompactProps) => {
 
   return (
     <MemoizedURLPreviewCompact
-      key={`${message?.id}${message?.updated_at}`} // press listeners must change on message update, updating key ensures this
+      key={`${message?.id}${message?.updated_at}`} // remounts on update to refresh press listeners
       {...{
         additionalPressableProps,
         channelId: message.cid,

package/src/components/Attachment/VideoThumbnail.tsx

@@ -21,9 +21,7 @@ const styles = StyleSheet.create({
 
 export type VideoThumbnailProps = {
   imageStyle?: StyleProp<ImageStyle>;
-  /**
-   * When set, upload state is read from `client.uploadManager` for this pending attachment id.
-   */
+  /** ID of a pending attachment whose upload state is read from `client.uploadManager`. */
   localId?: string;
   style?: StyleProp<ViewStyle>;
   thumb_url?: string;