stream-chat-react-native-core 9.12.1 → 10.0.0-beta.1

package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx

@@ -7,13 +7,14 @@ import {
   LocalAudioAttachment,
   LocalFileAttachment,
   LocalVideoAttachment,
+  resolveAttachmentFullByteSize,
 } from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { FilePreview } from '../../../../components/Attachment/FilePreview';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -39,10 +40,10 @@ export const FileAttachmentUploadPreview = ({
     FileUploadRetryIndicator,
     FileUploadNotSupportedIndicator,
   } = useComponentsContext();
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    !!allowSendBeforeAttachmentsUpload,
+    pendingUploadsEnabled,
   );
 
   const {
@@ -67,7 +68,7 @@ export const FileAttachmentUploadPreview = ({
         <FileUploadInProgressIndicator
           localId={attachment.localMetadata.id}
           sourceUrl={sourceUrl}
-          totalBytes={attachment.file_size}
+          totalBytes={resolveAttachmentFullByteSize(attachment)}
         />
       );
     }
@@ -82,8 +83,7 @@ export const FileAttachmentUploadPreview = ({
     FileUploadInProgressIndicator,
     FileUploadNotSupportedIndicator,
     FileUploadRetryIndicator,
-    attachment.localMetadata,
-    attachment.file_size,
+    attachment,
     indicatorType,
     onRetryHandler,
     sourceUrl,

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -7,7 +7,7 @@ import { LocalImageAttachment } from 'stream-chat';
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -24,7 +24,7 @@ export const ImageAttachmentUploadPreview = ({
   removeAttachments,
 }: ImageAttachmentUploadPreviewProps) => {
   const [loading, setLoading] = useState(true);
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const {
     ImageComponent,
     ImageLoadingIndicator,
@@ -34,7 +34,7 @@ export const ImageAttachmentUploadPreview = ({
   } = useComponentsContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    !!allowSendBeforeAttachmentsUpload,
+    pendingUploadsEnabled,
   );
   const previewUri = attachment.localMetadata.previewUri ?? attachment.image_url;
   const shouldShowImageLoadingIndicator =

package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx

@@ -7,8 +7,8 @@ import { LocalImageAttachment, LocalVideoAttachment } from 'stream-chat';
 import { FileAttachmentUploadPreview } from './FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreview } from './ImageAttachmentUploadPreview';
 
-import { useMessageInputContext } from '../../../../contexts';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { usePendingUploadsEnabled } from '../../../../contexts/messageInputContext/hooks/usePendingUploadsEnabled';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -23,9 +23,13 @@ export const VideoAttachmentUploadPreview = ({
   removeAttachments,
 }: VideoAttachmentUploadPreviewProps) => {
   const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
-  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const pendingUploadsEnabled = usePendingUploadsEnabled();
   const shouldShowMetadataPill =
-    allowSendBeforeAttachmentsUpload || attachment.localMetadata.uploadState !== 'uploading';
+    pendingUploadsEnabled || attachment.localMetadata.uploadState !== 'uploading';
+  // `localMetadata.file` is `File | FileReference`; only the RN `FileReference` carries a
+  // `duration` (and a required `uri` to discriminate on), so read it through a guard.
+  const localFile = attachment.localMetadata.file;
+  const duration = 'uri' in localFile ? localFile.duration : undefined;
 
   return previewUri ? (
     <>
@@ -43,7 +47,7 @@ export const VideoAttachmentUploadPreview = ({
         removeAttachments={removeAttachments}
       />
       {shouldShowMetadataPill ? (
-        <VideoAttachmentMetadataPill duration={attachment.duration} format={'descriptive'} />
+        <VideoAttachmentMetadataPill duration={duration} format={'descriptive'} />
       ) : null}
     </>
   ) : (

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -30,9 +30,7 @@ type AudioRecorderPropsWithContext = Pick<
   | 'uploadVoiceRecording'
 > &
   Pick<AudioRecorderManagerState, 'duration' | 'micLocked' | 'status'> & {
-    /**
-     * Style used in slide to cancel container.
-     */
+    /** Style of the slide to cancel container. */
     slideToCancelStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
   };
 
@@ -57,7 +55,7 @@ const StopRecording = ({
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Stop voice recording'
+      accessibilityLabelKey='messageInput.audioRecorder.stop.accessibilityLabel'
       variant='destructive'
       type='outline'
       size='sm'
@@ -83,7 +81,7 @@ const UploadRecording = ({
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Send voice recording'
+      accessibilityLabelKey='messageInput.audioRecorder.send.accessibilityLabel'
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
@@ -106,14 +104,14 @@ const DeleteRecording = ({
     NativeHandlers.triggerHaptic('impactMedium');
     await deleteVoiceRecordingHandler();
     addNotification({
-      message: t('Voice message deleted'),
+      message: t('messageInput.audioRecorder.recordingDeleted.text', 'Voice message deleted'),
       options: { severity: 'info', type: 'audioRecording:cancel:success' },
       origin: { emitter: 'AudioRecorder' },
     });
   };
   return (
     <Button
-      accessibilityLabelKey='a11y/Delete voice recording'
+      accessibilityLabelKey='messageInput.audioRecorder.delete.accessibilityLabel'
       variant='secondary'
       type='outline'
       size='sm'
@@ -185,7 +183,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           style={[styles.slideToCancelContainer, slideToCancelStyle, slideToCancelContainer]}
         >
           <Text style={[styles.slideToCancel, { color: semantics.textPrimary }]}>
-            {t('Slide to Cancel')}
+            {t('messageInput.audioRecorder.slideToCancel.text', 'Slide to Cancel')}
           </Text>
           <icons.ChevronLeft
             stroke={semantics.textTertiary}
@@ -211,9 +209,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
   status: state.status,
 });
 
-/**
- * Component to display the Recording UI in the Message Input.
- */
+/** Recording UI of the message input. */
 export const AudioRecorder = (props: AudioRecorderProps) => {
   const {
     audioRecorderManager,

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -40,17 +40,11 @@ export type AudioRecordingButtonPropsWithContext = Pick<
   | 'uploadVoiceRecording'
 > &
   Pick<AudioRecorderManagerState, 'recording' | 'status'> & {
-    /**
-     * Size of the mic button.
-     */
+    /** Size of the mic button. */
     buttonSize?: number;
-    /**
-     * Handler to determine what should happen on long press of the mic button.
-     */
+    /** Called on long press of the mic button. */
     handleLongPress?: () => void;
-    /**
-     * Handler to determine what should happen on press of the mic button.
-     */
+    /** Called on press of the mic button. */
     handlePress?: () => void;
     cancellableDuration: boolean;
   };
@@ -60,9 +54,7 @@ const buttonStylesConfig: ButtonStylesConfig = {
   type: 'ghost',
 };
 
-/**
- * Component to display the mic button on the Message Input.
- */
+/** Mic button of the message input. */
 export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonPropsWithContext) => {
   const {
     audioRecorderManager,
@@ -86,7 +78,9 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const pressed = useSharedValue(false);
 
   const { t } = useTranslationContext();
-  const startVoiceRecordingAccessibilityLabel = useA11yLabel('a11y/Start voice recording');
+  const startVoiceRecordingAccessibilityLabel = useA11yLabel(
+    'messageInput.audioRecorder.start.accessibilityLabel',
+  );
   const {
     theme: {
       messageComposer: { micButtonContainer },
@@ -103,7 +97,10 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     if (!recording) {
       NativeHandlers.triggerHaptic('notificationError');
       addNotification({
-        message: 'Hold to record. Release to save.',
+        message: t(
+          'messageInput.audioRecorder.holdToRecord.text',
+          'Hold to record. Release to save.',
+        ),
         options: {
           severity: 'info',
           type: 'validation:audio:recording:hold-required',
@@ -126,14 +123,17 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       const permissionsGranted = await startVoiceRecording();
       if (!permissionsGranted) {
         addNotification({
-          message: 'Please allow Audio permissions in settings.',
+          message: t(
+            'messageInput.audioRecorder.permissionDenied.text',
+            'Please allow Audio permissions in settings.',
+          ),
           options: {
             actions: [
               {
                 handler: () => {
                   Linking.openSettings();
                 },
-                label: t('Open Settings'),
+                label: t('common.openSettings.label', 'Open Settings'),
               },
             ],
             duration: 0,

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx

@@ -18,9 +18,7 @@ type AudioRecordingInProgressPropsWithContext = Pick<
   'audioRecorderManager'
 > &
   Pick<AudioRecorderManagerState, 'duration' | 'waveformData'> & {
-    /**
-     * Maximum number of waveform lines that should be rendered in the UI.
-     */
+    /** Maximum number of waveform lines rendered. Defaults to 60. */
     maxDataPointsDrawn?: number;
   };
 
@@ -41,7 +39,7 @@ const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressProp
 
   return (
     <View style={[styles.container, container]}>
-      {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
+      {/* Mic icon and elapsed recording time. */}
       <View style={styles.micContainer}>
         <icons.Mic height={20} width={20} stroke={semantics.accentError} />
         <Text style={[styles.durationText, durationText]}>
@@ -66,9 +64,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
   waveformData: state.waveformData,
 });
 
-/**
- * Component displayed when the audio is in the recording state.
- */
+/** Displayed while audio is being recorded. */
 export const AudioRecordingInProgress = (props: AudioRecordingInProgressProps) => {
   const { audioRecorderManager } = useMessageInputContext();
 

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -9,19 +9,13 @@ import { AudioRecorderManagerState } from '../../../../state-store/audio-recorde
 import { primitives } from '../../../../theme';
 
 export type AudioRecordingLockIndicatorProps = Pick<AudioRecorderManagerState, 'micLocked'> & {
-  /**
-   * Height of the message input, to apply necessary position adjustments to this component.
-   */
+  /** Height of the message input, for positioning this component. */
   messageInputHeight?: number;
-  /**
-   * Styles of the lock indicator.
-   */
+  /** Styles of the lock indicator. */
   style?: StyleProp<AnimatedStyle<ViewStyle>>;
 };
 
-/**
- * Component displayed to show the lock state of the recording when the button is slided up.
- */
+/** Shows the lock state of the recording while the mic button is slid up. */
 export const AudioRecordingLockIndicator = ({
   messageInputHeight,
   micLocked,

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -42,9 +42,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
   recording: state.recording,
 });
 
-/**
- * Component displayed when the audio is recorded and can be previewed.
- */
+/** Displayed after a recording stops, to preview it before sending. */
 export const AudioRecordingPreview = () => {
   const { audioRecorderManager } = useMessageInputContext();
   const { icons } = useComponentsContext();
@@ -62,7 +60,7 @@ export const AudioRecordingPreview = () => {
   const audioPlayer = useAudioPlayer({
     duration: recordingDuration / ONE_SECOND_IN_MILLISECONDS,
     mimeType: 'audio/aac',
-    // The preview still uses the recorder-backed player until both playback paths are unified.
+    // The preview uses the regular sound player, not the recorder-backed one.
     previewVoiceRecording: false,
     type: 'voiceRecording',
     uri,
@@ -73,7 +71,7 @@ export const AudioRecordingPreview = () => {
     audioPlayerSelector,
   );
 
-  // When a audio attachment in preview is removed, we need to remove the player from the pool
+  // Removes the player from the pool on unmount.
   useEffect(
     () => () => {
       audioPlayer.onRemove();
@@ -127,7 +125,7 @@ export const AudioRecordingPreview = () => {
             <icons.Pause fill={semantics.textPrimary} height={20} width={20} {...pauseIcon} />
           )}
         </Pressable>
-        {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
+        {/* Elapsed playback time. */}
         <StableDurationLabel
           accessibilityLabel='Progress Duration'
           reserveLabel={maxDurationLabel}
@@ -139,7 +137,7 @@ export const AudioRecordingPreview = () => {
         />
       </View>
       <View style={[styles.progressBar, progressBar]}>
-        {/* Since the progress is in range 0-1 we convert it in terms of 100% */}
+        {/* `progress` is a fraction from 0 to 1. */}
         <WaveProgressBar
           isPlaying={isPlaying}
           progress={progress}

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx

@@ -6,17 +6,13 @@ import { AudioRecorderManagerState } from '../../../../state-store/audio-recorde
 import { primitives } from '../../../../theme';
 
 export type AudioRecordingWaveformProps = Pick<AudioRecorderManagerState, 'waveformData'> & {
-  /**
-   * Maximum number of waveform lines that should be rendered in the UI.
-   */
+  /** Maximum number of waveform lines rendered. */
   maxDataPointsDrawn: number;
 };
 
 const WAVEFORM_MAX_HEIGHT = 20;
 
-/**
- * Waveform Component displayed when the audio is in the recording state.
- */
+/** Waveform displayed while audio is being recorded. */
 export const AudioRecordingWaveform = (props: AudioRecordingWaveformProps) => {
   const { maxDataPointsDrawn, waveformData } = props;
   const styles = useStyles();

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -17,7 +17,7 @@ import { Button } from '../../../ui/';
 type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttachButtonPress'> &
   Pick<AttachmentPickerContextValue, 'disableAttachmentPicker'> & {
     disabled?: boolean;
-    /** Function that opens attachment options bottom sheet */
+    /** Press handler that takes precedence over `handleAttachButtonPress` and the picker toggle. */
     handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
     isAttachmentPickerOpen?: boolean;
   } & { toggleAttachmentPicker: () => void };
@@ -50,7 +50,9 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
   return (
     <Button
       accessibilityLabelKey={
-        isAttachmentPickerOpen ? 'a11y/Close attachments' : 'a11y/Add attachment'
+        isAttachmentPickerOpen
+          ? 'messageInput.closeAttachments.accessibilityLabel'
+          : 'messageInput.addAttachment.accessibilityLabel'
       }
       variant='secondary'
       type='outline'
@@ -88,9 +90,7 @@ const MemoizedAttachButton = React.memo(
 
 export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
 
-/**
- * UI Component for attach button in MessageComposer component.
- */
+/** Attach button of the message composer. */
 export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
   const {

package/src/components/MessageInput/components/InputButtons/index.tsx

@@ -77,16 +77,24 @@ const areEqual = (
 ) => {
   const {
     hasCameraPicker: prevHasCameraPicker,
+    hasCommands: prevHasCommands,
     hasFilePicker: prevHasFilePicker,
     hasImagePicker: prevHasImagePicker,
+    uploadFile: prevUploadFile,
   } = prevProps;
 
   const {
     hasCameraPicker: nextHasCameraPicker,
+    hasCommands: nextHasCommands,
     hasFilePicker: nextHasFilePicker,
     hasImagePicker: nextHasImagePicker,
+    uploadFile: nextUploadFile,
   } = nextProps;
 
+  if (prevHasCommands !== nextHasCommands || prevUploadFile !== nextUploadFile) {
+    return false;
+  }
+
   if (prevHasCameraPicker !== nextHasCameraPicker) {
     return false;
   }

package/src/components/MessageInput/components/OutputButtons/CooldownTimer.tsx

@@ -3,9 +3,7 @@ import React from 'react';
 import { Button } from '../../../../components/ui';
 import { useCooldownRemaining } from '../../hooks/useCooldownRemaining';
 
-/**
- * Renders an amount of seconds left for a cooldown to finish.
- **/
+/** Shows the seconds left of the channel cooldown. */
 export const CooldownTimer = () => {
   const seconds = useCooldownRemaining();
 

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -27,7 +27,7 @@ export const EditButton = (props: EditButtonProps) => {
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Save edited message'
+      accessibilityLabelKey='messageInput.saveEdit.accessibilityLabel'
       variant='primary'
       type='solid'
       LeadingIcon={icons.Tick}

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -27,7 +27,7 @@ export const SendButton = (props: SendButtonProps) => {
 
   return (
     <Button
-      accessibilityLabelKey='a11y/Send message'
+      accessibilityLabelKey='messageInput.sendMessage.accessibilityLabel'
       variant='primary'
       type='solid'
       disabled={disabled}

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -8,9 +8,7 @@ import { EditButton } from './EditButton';
 
 import {
   ChannelContextValue,
-  ChatContextValue,
   useChannelContext,
-  useChatContext,
   useMessageComposerHasSendableData,
   useTheme,
 } from '../../../../contexts';
@@ -24,12 +22,15 @@ import {
 import { useStateStore } from '../../../../hooks/useStateStore';
 import { transitions } from '../../../../utils/animations/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
+import { useSettledWSConnectionHealth } from '../../../Chat/hooks/useWSConnectionState';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 
 export type OutputButtonsProps = Partial<OutputButtonsWithContextProps>;
 
-export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
-  Pick<ChannelContextValue, 'channel'> &
+export type OutputButtonsWithContextProps = { isOnline: boolean } & Pick<
+  ChannelContextValue,
+  'channel'
+> &
   Pick<
     MessageInputContextValue,
     | 'asyncMessagesMinimumPressDuration'
@@ -71,7 +72,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   const { aiState } = useAIState(channel);
   const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
   const shouldDisplayStopAIGeneration =
-    [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
+    [AIStates.Thinking, AIStates.Generating].some((state) => state === aiState) &&
+    !!StopMessageStreamingButton;
 
   if (shouldDisplayStopAIGeneration) {
     return <StopMessageStreamingButton onPress={stopGenerating} />;
@@ -161,7 +163,8 @@ const MemoizedOutputButtonsWithContext = React.memo(
 ) as typeof OutputButtonsWithContext;
 
 export const OutputButtons = (props: OutputButtonsProps) => {
-  const { isOnline } = useChatContext();
+  // The socket, not the device network: a command round-trips through the server.
+  const isOnline = useSettledWSConnectionHealth();
   const { channel } = useChannelContext();
   const {
     audioRecordingEnabled,

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -11,7 +11,12 @@ import { generateRandomId } from '../../../utils/utils';
 import { resampleWaveformData } from '../utils/audioSampling';
 
 /**
- * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
+ * Controls voice recording: start, stop, delete, and upload or send of the recorded audio.
+ *
+ * @param params.audioRecorderManager Manager that owns the recording state.
+ * @param params.sendMessage Sends the message when a recording is sent on completion.
+ * @returns `deleteVoiceRecording`, `startVoiceRecording`, `stopVoiceRecording` and
+ * `uploadVoiceRecording`.
  */
 export const useAudioRecorder = ({
   audioRecorderManager,
@@ -19,11 +24,7 @@ export const useAudioRecorder = ({
 }: Pick<MessageInputContextValue, 'audioRecorderManager' | 'sendMessage'>) => {
   const { attachmentManager } = useMessageComposer();
 
-  /**
-   * A function that takes care of stopping the voice recording from the library's
-   * side only. Meant to be used as a pure function (during unmounting for instance)
-   * hence this approach.
-   */
+  // Stops the recording on the library side only, so it is safe to call on unmount.
   const stopVoiceRecording = useCallback(
     async (withDelete?: boolean) => {
       await audioRecorderManager.stopRecording(withDelete);
@@ -31,8 +32,7 @@ export const useAudioRecorder = ({
     [audioRecorderManager],
   );
 
-  // This effect stop the player from playing and stops audio recording on
-  // the audio SDK side on unmount.
+  // Stops the recording on the audio SDK side on unmount.
   useEffect(
     () => () => {
       stopVoiceRecording();
@@ -40,26 +40,16 @@ export const useAudioRecorder = ({
     [stopVoiceRecording],
   );
 
-  /**
-   * Function to start voice recording. Will return whether access is granted
-   * with regards to the microphone permission as that's how the underlying
-   * library works on iOS.
-   */
+  // Resolves to whether microphone access is granted, as the underlying library reports on iOS.
   const startVoiceRecording = useCallback(async () => {
     return await audioRecorderManager.startRecording();
   }, [audioRecorderManager]);
 
-  /**
-   * Function to delete voice recording.
-   */
   const deleteVoiceRecording = useCallback(async () => {
     await stopVoiceRecording(true);
   }, [stopVoiceRecording]);
 
-  /**
-   * Function to upload or send voice recording.
-   * @param sendOnComplete boolean
-   */
+  // Sends the message with the recording when `sendOnComplete` is true, otherwise only uploads it.
   const uploadVoiceRecording = useCallback(
     async (sendOnComplete: boolean) => {
       try {
@@ -87,17 +77,19 @@ export const useAudioRecorder = ({
         const audioFile: LocalVoiceRecordingAttachment = {
           asset_url:
             typeof recording !== 'string' ? (recording?.getURI() as string) : (recording as string),
-          duration: durationInSeconds,
-          file_size: 0,
+          custom: {
+            duration: durationInSeconds,
+            file_size: 0,
+            mime_type: 'audio/aac',
+            waveform_data: resampledWaveformData,
+          },
           localMetadata: {
             file,
             id: generateRandomId(),
             uploadState: 'pending',
           },
-          mime_type: 'audio/aac',
           title: `audio_recording_${date}.aac`,
           type: FileTypes.VoiceRecording,
-          waveform_data: resampledWaveformData,
         };
 
         audioRecorderManager.reset();
@@ -105,8 +97,8 @@ export const useAudioRecorder = ({
         if (sendOnComplete) {
           attachmentManager.upsertAttachments([audioFile]);
           sendMessage();
-        } else {
-          await attachmentManager.uploadAttachment(audioFile);
+        } else if (attachmentManager.isUploadEnabled) {
+          await attachmentManager.uploadFile(audioFile);
         }
       } catch (error) {
         console.log('Error uploading voice recording: ', error);

package/src/components/MessageInput/hooks/useCooldownRemaining.tsx

@@ -8,10 +8,10 @@ const cooldownTimerStateSelector = (state: CooldownTimerState) => ({
 });
 
 /**
- * Provides and initial value of cooldown, from which the countdown should start, e.g.:
+ * The seconds left of the channel cooldown, or 0 when there is none. It reads
+ * `channel.cooldownTimer`, so the remaining time is correct after a reload.
  *
- * The value of channel.data.cooldown is 100s but 30s has already elapsed, user reloads the page,
- * the initial value is now 70s from which the countdown will continue using useTimer() hook.
+ * @returns Seconds left of the cooldown.
  */
 export const useCooldownRemaining = (): number => {
   const { channel } = useChannelContext();

package/src/components/MessageInput/utils/audioSampling.ts

@@ -6,10 +6,12 @@ export const resampleWaveformData = (waveformData: number[], amplitudesCount: nu
       : upSample(waveformData, amplitudesCount);
 
 /**
- * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
- * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
- * @param data
- * @param targetOutputSize
+ * Downsamples `data` with the Largest-Triangle-Three-Buckets (LTTB) algorithm, keeping the first
+ * and last points. See https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf
+ *
+ * @param data The values to downsample.
+ * @param targetOutputSize The number of values to return.
+ * @returns The downsampled values, or `data` itself when it already fits the target.
  */
 export function downSample(data: number[], targetOutputSize: number): number[] {
   if (data.length <= targetOutputSize || targetOutputSize === 0) {
@@ -21,7 +23,7 @@ export function downSample(data: number[], targetOutputSize: number): number[] {
   }
 
   const result: number[] = [];
-  // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
+  // Excludes the first and last items, which are always kept.
   const bucketSize = (data.length - 2) / (targetOutputSize - 2);
   let lastSelectedPointIndex = 0;
   result.push(data[lastSelectedPointIndex]); // Always add the first point