@sendbird/uikit-react-native 3.1.2 → 3.2.0

package/src/components/ChannelInput/VoiceMessageInput.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  ProgressBar,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining, millsToMMSS } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+import useVoiceMessageInput from '../../hooks/useVoiceMessageInput';
+import type { FileType } from '../../platform/types';
+
+export type VoiceMessageInputProps = {
+  onClose: () => Promise<void>;
+  onSend: (params: { file: FileType; duration: number }) => void;
+};
+
+const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { actions, state } = useVoiceMessageInput({
+    onSend: (file, duration) => onSend({ file, duration }),
+    onClose,
+  });
+
+  const uiColors = colors.ui.voiceMessageInput.default[state.status !== 'idle' ? 'active' : 'inactive'];
+
+  const onPressCancel = async () => {
+    actions.cancel();
+    onClose();
+  };
+
+  const onPressSend = async () => {
+    actions.send();
+    onClose();
+  };
+
+  const onPressVoiceMessageAction = () => {
+    switch (state.status) {
+      case 'idle':
+        actions.startRecording();
+        break;
+      case 'recording':
+        if (lessThanMinimumDuration) {
+          actions.cancel();
+        } else {
+          actions.stopRecording();
+        }
+        break;
+      case 'recording_completed':
+      case 'playing_paused':
+        actions.playPlayer();
+        break;
+      case 'playing':
+        actions.pausePlayer();
+        break;
+    }
+  };
+  const renderActionIcon = () => {
+    switch (state.status) {
+      case 'idle':
+        return <Icon icon={'recording'} size={20} color={uiColors.recording} />;
+      case 'recording':
+        return <Icon icon={'stop'} size={20} color={uiColors.actionIcon} />;
+      case 'recording_completed':
+      case 'playing_paused':
+        return <Icon icon={'play'} size={20} color={uiColors.actionIcon} />;
+      case 'playing':
+        return <Icon icon={'pause'} size={20} color={uiColors.actionIcon} />;
+    }
+  };
+
+  const isRecorderState = state.status === 'recording' || state.status === 'recording_completed';
+  const lessThanMinimumDuration = state.recordingTime.currentTime < state.recordingTime.minDuration;
+  const remainingTime = state.playingTime.duration - state.playingTime.currentTime;
+
+  return (
+    <Box backgroundColor={uiColors.background} paddingVertical={24} paddingHorizontal={16} style={styles.container}>
+      {/** Progress bar **/}
+      <ProgressBar
+        style={styles.progressBar}
+        current={conditionChaining(
+          [state.status === 'recording', state.status === 'recording_completed'],
+          [state.recordingTime.currentTime, 0, state.playingTime.currentTime],
+        )}
+        total={(isRecorderState ? state.recordingTime.maxDuration : state.playingTime.duration) || 1}
+        trackColor={uiColors.progressTrack}
+        overlay={
+          <Box flex={1} flexDirection={'row'} alignItems={'center'} justifyContent={'flex-end'} paddingRight={16}>
+            <RecordingLight visible={state.status === 'recording'} />
+            <Text caption1 style={{ lineHeight: undefined, marginLeft: 6 }} color={uiColors.textTime}>
+              {millsToMMSS(isRecorderState ? state.recordingTime.currentTime : remainingTime)}
+            </Text>
+          </Box>
+        }
+      />
+
+      <Box height={34} alignItems={'center'} justifyContent={'center'}>
+        {/** Cancel / Send **/}
+        <Box flexDirection={'row'}>
+          <CancelButton label={STRINGS.LABELS.VOICE_MESSAGE_INPUT_CANCEL} onPress={onPressCancel} />
+          <Box flex={1} />
+          <SendButton disabled={state.status === 'idle' || lessThanMinimumDuration} onPress={onPressSend} />
+        </Box>
+
+        {/** Record / Stop / Play / Pause **/}
+        <Box style={{ position: 'absolute' }} alignItems={'center'} justifyContent={'center'}>
+          <PressBox activeOpacity={0.5} onPress={onPressVoiceMessageAction}>
+            <Box
+              width={34}
+              height={34}
+              borderRadius={17}
+              alignItems={'center'}
+              justifyContent={'center'}
+              backgroundColor={uiColors.actionIconBackground}
+            >
+              {renderActionIcon()}
+            </Box>
+          </PressBox>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+const RecordingLight = (props: { visible: boolean }) => {
+  const { colors } = useUIKitTheme();
+
+  const value = useRef(new Animated.Value(0)).current;
+  const animation = useRef(
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(value, { toValue: 1, duration: 500, useNativeDriver: true }),
+        Animated.timing(value, { toValue: 0, duration: 500, useNativeDriver: true }),
+      ]),
+    ),
+  ).current;
+
+  useEffect(() => {
+    if (props.visible) animation.start();
+    return () => {
+      animation.reset();
+    };
+  }, [props.visible]);
+
+  if (!props.visible) return null;
+  return (
+    <Animated.View
+      style={{
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        opacity: value,
+        backgroundColor: colors.ui.voiceMessageInput.default.active.recording,
+      }}
+    />
+  );
+};
+
+const CancelButton = (props: { onPress: () => void; label: string }) => {
+  const { colors } = useUIKitTheme();
+
+  return (
+    <PressBox activeOpacity={0.8} onPress={props.onPress}>
+      <Box paddingHorizontal={12} height={'100%'} alignItems={'center'} justifyContent={'center'}>
+        <Text button color={colors.ui.voiceMessageInput.default.active.textCancel} numberOfLines={1}>
+          {props.label}
+        </Text>
+      </Box>
+    </PressBox>
+  );
+};
+
+const SendButton = (props: { onPress: () => void; disabled: boolean }) => {
+  const { colors } = useUIKitTheme();
+
+  const uiColors = colors.ui.voiceMessageInput.default[props.disabled ? 'inactive' : 'active'];
+
+  return (
+    <PressBox disabled={props.disabled} activeOpacity={0.8} onPress={props.onPress}>
+      <Box backgroundColor={uiColors.sendIconBackground} padding={7} borderRadius={40}>
+        <Icon icon={'send'} size={20} color={uiColors.sendIcon} />
+      </Box>
+    </PressBox>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  progressBar: {
+    height: 36,
+    marginBottom: 16,
+    borderRadius: 18,
+  },
+});
+
+export default VoiceMessageInput;

package/src/components/ChannelInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -23,7 +23,10 @@ import type { MentionedUser, Range } from '../../types';
 import type { AttachmentsButtonProps } from './AttachmentsButton';
 import AttachmentsButton from './AttachmentsButton';
 import EditInput from './EditInput';
+import type { MessageToReplyPreviewProps } from './MessageToReplyPreview';
+import { MessageToReplyPreview } from './MessageToReplyPreview';
 import SendInput from './SendInput';
+import VoiceMessageInput, { VoiceMessageInputProps } from './VoiceMessageInput';
 
 export type SuggestedMentionListProps = {
   text: string;
@@ -61,10 +64,12 @@ export type ChannelInputProps = {
   setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
 
   // mention
-  SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
+  SuggestedMentionList?: (props: SuggestedMentionListProps) => React.ReactNode | null;
 
   // sub-components
-  AttachmentsButton?: (props: AttachmentsButtonProps) => JSX.Element | null;
+  AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;
+  MessageToReplyPreview?: (props: MessageToReplyPreviewProps) => React.ReactNode | null;
+  VoiceMessageInput?: (props: VoiceMessageInputProps) => React.ReactNode | null;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
@@ -93,6 +98,7 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const mentionAvailable =
     sbOptions.uikit.groupChannel.channel.enableMention && channel.isGroupChannel() && !channel.isBroadcast;
+
   const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
@@ -129,7 +135,9 @@ const ChannelInput = (props: ChannelInputProps) => {
                 onChangeText={onChangeText}
                 onSelectionChange={onSelectionChange}
                 mentionedUsers={mentionedUsers}
+                VoiceMessageInput={props.VoiceMessageInput ?? VoiceMessageInput}
                 AttachmentsButton={props.AttachmentsButton ?? AttachmentsButton}
+                MessageToReplyPreview={props.MessageToReplyPreview ?? MessageToReplyPreview}
               />
             )}
             {inputMode === 'edit' && messageToEdit && (
@@ -181,7 +189,7 @@ const useTextClearOnDisabled = (setText: (val: string) => void, chatDisabled: bo
 };
 
 const useAutoFocusOnEditMode = (
-  textInputRef: MutableRefObject<TextInput | undefined>,
+  textInputRef: React.MutableRefObject<TextInput | undefined>,
   messageToEdit?: SendbirdBaseMessage,
 ) => {
   useEffect(() => {

package/src/components/ChannelMessageList/index.tsx

@@ -22,6 +22,7 @@ import {
   getFileExtension,
   getFileType,
   isMyMessage,
+  isVoiceMessage,
   messageKeyExtractor,
   shouldRenderReaction,
   toMegabyte,
@@ -277,7 +278,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
         },
       });
     }
-    if (msg.isFileMessage()) {
+    if (!isVoiceMessage(msg) && msg.isFileMessage()) {
       sheetItems.push({
         icon: 'download',
         title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
@@ -299,6 +300,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
         },
       });
     }
+
     if (!channel.isEphemeral) {
       if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
         if (msg.isUserMessage()) {

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.tsx

@@ -12,6 +12,7 @@ import {
 } from '@sendbird/uikit-react-native-foundation';
 import {
   SendbirdFileMessage,
+  SendbirdGroupChannel,
   SendbirdMessage,
   SendbirdUserMessage,
   getFileIconFromMessageType,
@@ -26,12 +27,13 @@ import { useLocalization, usePlatformService, useSendbirdChat } from '../../hook
 
 type Props = {
   variant: 'outgoing' | 'incoming';
+  channel: SendbirdGroupChannel;
   message: SendbirdUserMessage | SendbirdFileMessage;
   childMessage: SendbirdUserMessage | SendbirdFileMessage;
   onPress?: (message: SendbirdMessage) => void;
 };
 
-const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPress }: Props) => {
+const GroupChannelMessageParentMessage = ({ variant, channel, message, childMessage, onPress }: Props) => {
   const { currentUser } = useSendbirdChat();
   const groupChannelPubSub = useContext(GroupChannelContexts.PubSub);
   const { select, colors, palette } = useUIKitTheme();
@@ -52,6 +54,19 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
     });
   }, []);
 
+  const renderMessageWithText = (message: string) => {
+    return (
+      <Box
+        style={styles.bubbleContainer}
+        backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
+      >
+        <Text body3 color={colors.onBackground03} suppressHighlighting numberOfLines={2} ellipsizeMode={'tail'}>
+          {message}
+        </Text>
+      </Box>
+    );
+  };
+
   const renderFileMessageAsVideoThumbnail = (url: string) => {
     return (
       <VideoThumbnail
@@ -85,19 +100,14 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
   };
 
   const parentMessageComponent = useIIFE(() => {
+    if (channel.messageOffsetTimestamp > parentMessage.createdAt) {
+      return renderMessageWithText(STRINGS.LABELS.MESSAGE_UNAVAILABLE);
+    }
+
     switch (type) {
       case 'user':
       case 'user.opengraph': {
-        return (
-          <Box
-            style={styles.bubbleContainer}
-            backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
-          >
-            <Text body3 color={colors.onBackground03} suppressHighlighting numberOfLines={2} ellipsizeMode={'tail'}>
-              {(parentMessage as SendbirdUserMessage).message}
-            </Text>
-          </Box>
-        );
+        return renderMessageWithText((parentMessage as SendbirdUserMessage).message);
       }
       case 'file':
       case 'file.audio': {
@@ -109,6 +119,9 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
       case 'file.image': {
         return renderFileMessageAsPreview(getThumbnailUriFromFileMessage(parentMessage as SendbirdFileMessage));
       }
+      case 'file.voice': {
+        return renderMessageWithText(STRINGS.LABELS.VOICE_MESSAGE);
+      }
       default: {
         return null;
       }

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
 import { Box, GroupChannelMessage, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -10,11 +10,13 @@ import {
   calcMessageGrouping,
   getMessageType,
   isMyMessage,
+  isVoiceMessage,
   shouldRenderParentMessage,
   shouldRenderReaction,
   useIIFE,
 } from '@sendbird/uikit-utils';
 
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
 import type { GroupChannelProps } from '../../domain/groupChannel/types';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
@@ -36,10 +38,11 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   prevMessage,
   nextMessage,
 }) => {
+  const playerUnsubscribes = useRef<(() => void)[]>([]);
   const { palette } = useUIKitTheme();
   const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const { mediaService } = usePlatformService();
+  const { mediaService, playerService } = usePlatformService();
   const { groupWithPrev, groupWithNext } = calcMessageGrouping(
     Boolean(enableMessageGrouping),
     message,
@@ -58,6 +61,16 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     return null;
   });
 
+  const resetPlayer = async () => {
+    playerUnsubscribes.current.forEach((unsubscribe) => {
+      try {
+        unsubscribe();
+      } catch {}
+    });
+    playerUnsubscribes.current.length = 0;
+    await playerService.reset();
+  };
+
   const variant = isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming';
 
   const messageProps: Omit<GroupChannelMessageProps<SendbirdMessage>, 'message'> = {
@@ -72,6 +85,55 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     onPressMentionedUser: (mentionedUser) => {
       if (mentionedUser) onShowUserProfile?.(mentionedUser);
     },
+    onToggleVoiceMessage: async (state, setState) => {
+      if (isVoiceMessage(message) && message.sendingStatus === 'succeeded') {
+        if (playerService.uri === message.url) {
+          if (playerService.state === 'playing') {
+            await playerService.pause();
+          } else {
+            await playerService.play(message.url);
+          }
+        } else {
+          if (playerService.state !== 'idle') {
+            await resetPlayer();
+          }
+
+          const shouldSeekToTime = state.duration > state.currentTime && state.currentTime > 0;
+          let seekFinished = !shouldSeekToTime;
+
+          const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
+            if (seekFinished) {
+              setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
+            }
+          });
+          const forState = playerService.addStateListener((state) => {
+            switch (state) {
+              case 'preparing':
+                setState((prevState) => ({ ...prevState, status: 'preparing' }));
+                break;
+              case 'playing':
+                setState((prevState) => ({ ...prevState, status: 'playing' }));
+                break;
+              case 'idle':
+              case 'paused': {
+                setState((prevState) => ({ ...prevState, status: 'paused' }));
+                break;
+              }
+              case 'stopped':
+                setState((prevState) => ({ ...prevState, status: 'paused' }));
+                break;
+            }
+          });
+          playerUnsubscribes.current.push(forPlayback, forState);
+
+          await playerService.play(message.url);
+          if (shouldSeekToTime) {
+            await playerService.seek(state.currentTime);
+            seekFinished = true;
+          }
+        }
+      }
+    },
     groupedWithPrev: groupWithPrev,
     groupedWithNext: groupWithNext,
     children: reactionChildren,
@@ -80,9 +142,10 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     ) : null,
     parentMessage: shouldRenderParentMessage(message) ? (
       <GroupChannelMessageParentMessage
+        channel={channel}
+        message={message.parentMessage}
         variant={variant}
         childMessage={message}
-        message={message.parentMessage}
         onPress={onPressParentMessage}
       />
     ) : null,
@@ -184,6 +247,20 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           />
         );
       }
+      case 'file.voice': {
+        return (
+          <GroupChannelMessage.VoiceFile
+            message={message as SendbirdFileMessage}
+            durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
+            onUnmount={() => {
+              if (isVoiceMessage(message) && playerService.uri === message.url) {
+                resetPlayer();
+              }
+            }}
+            {...messageProps}
+          />
+        );
+      }
       case 'unknown':
       default: {
         return <GroupChannelMessage.Unknown message={message} {...messageProps} />;

package/src/components/MessageSearchResultItem.tsx

@@ -10,7 +10,7 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdBaseMessage } from '@sendbird/uikit-utils';
-import { getFileIconFromMessage, useIIFE } from '@sendbird/uikit-utils';
+import { getFileIconFromMessage, isVoiceMessage, useIIFE } from '@sendbird/uikit-utils';
 
 import type { MessageSearchProps } from '../domain/messageSearch/types';
 import { useLocalization } from '../hooks/useContext';
@@ -21,6 +21,7 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
 
   const fileIcon = useIIFE(() => {
     if (!message?.isFileMessage()) return undefined;
+    if (isVoiceMessage(message)) return undefined;
     return getFileIconFromMessage(message);
   });
 

package/src/components/OpenChannelMessageRenderer/index.tsx

@@ -63,6 +63,7 @@ const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage']
         }
       }
       case 'file':
+      case 'file.voice':
       case 'file.audio': {
         return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;
       }

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -22,7 +22,7 @@ const ReactionUserListBottomSheet = ({
   reactionCtx,
   chatCtx,
   localizationCtx,
-  userProfileCtx,
+  onPressUserProfile,
 }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
   const { bottom, left, right } = useSafeAreaInsets();
@@ -134,7 +134,7 @@ const ReactionUserListBottomSheet = ({
                 onPress={async () => {
                   if (user) {
                     await onClose();
-                    userProfileCtx.show(user);
+                    onPressUserProfile(user);
                   }
                 }}
                 style={styles.pageItem}

package/src/components/ReactionBottomSheets/index.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 
+import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+
 import type { LocalizationContext } from '../../contexts/LocalizationCtx';
 import type { ReactionContext } from '../../contexts/ReactionCtx';
 import type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';
-import type { UserProfileContext } from '../../contexts/UserProfileCtx';
 import ReactionList from './ReactionListBottomSheet';
 import UserList from './ReactionUserListBottomSheet';
 
@@ -12,10 +13,10 @@ export type ReactionBottomSheetProps = {
   visible: boolean;
   onDismiss: () => void;
   onClose: () => Promise<void>;
+  onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
   chatCtx: GetFromContext<typeof SendbirdChatContext>;
   reactionCtx: GetFromContext<typeof ReactionContext>;
   localizationCtx: GetFromContext<typeof LocalizationContext>;
-  userProfileCtx: GetFromContext<typeof UserProfileContext>;
 };
 
 export const ReactionBottomSheets = {

package/src/components/StatusComposition.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type Props = {
   loading?: boolean;
-  LoadingComponent?: JSX.Element;
+  LoadingComponent?: ReactNode;
   error?: boolean;
-  ErrorComponent?: JSX.Element;
+  ErrorComponent?: ReactNode;
   children: React.ReactNode;
 };
 const StatusComposition = ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => {

package/src/constants.ts

@@ -3,3 +3,5 @@ export const MESSAGE_SEARCH_SAFE_SCROLL_DELAY = 500;
 export const MESSAGE_FOCUS_ANIMATION_DELAY = 250;
 
 export const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';
+export const VOICE_MESSAGE_META_ARRAY_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';
+export const VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -17,6 +17,7 @@ import {
   getFileTypeFromMessage,
   isDifferentChannel,
   isMyMessage,
+  isVoiceMessage,
   useIIFE,
   useUniqHandlerId,
 } from '@sendbird/uikit-utils';
@@ -56,6 +57,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
   const fileType = useIIFE(() => {
     if (!channel.lastMessage?.isFileMessage()) return undefined;
     if (typingUsers.length > 0) return undefined;
+    if (isVoiceMessage(channel.lastMessage)) return undefined;
     return getFileTypeFromMessage(channel.lastMessage);
   });
 

package/src/containers/InternalErrorBoundaryContainer.tsx

@@ -14,7 +14,7 @@ const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
 
 class InternalErrorBoundaryContainer extends React.PureComponent<{
   onError?: (props: ErrorBoundaryProps) => void;
-  ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
   children?: React.ReactNode;
 }> {
   static defaultProps = {