fix: show message overlay for gallery and files when message errors out

Author: khushal87

package/src/components/Attachment/FileAttachment.tsx

@@ -19,7 +19,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
-  'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress' | 'isMessageErrorType'
+  'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
   Pick<MessagesContextValue, 'additionalPressableProps'> & {
     /** The attachment to render */
@@ -46,12 +46,9 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
     onPressIn,
     preventPress,
     styles: stylesProp = styles,
-    isMessageErrorType,
   } = props;
 
-  const defaultOnPress = () => {
-    openUrlSafely(attachment.asset_url);
-  };
+  const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
   return (
     <Pressable
@@ -69,7 +66,7 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
         if (onPress) {
           onPress({
             additionalInfo: { attachment },
-            defaultHandler: isMessageErrorType ? undefined : defaultOnPress,
+            defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,
           });
@@ -79,7 +76,7 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
         if (onPressIn) {
           onPressIn({
             additionalInfo: { attachment },
-            defaultHandler: isMessageErrorType ? undefined : defaultOnPress,
+            defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,
           });
@@ -101,7 +98,7 @@ export type FileAttachmentProps = Partial<Omit<FileAttachmentPropsWithContext, '
   Pick<FileAttachmentPropsWithContext, 'attachment'>;
 
 export const FileAttachment = (props: FileAttachmentProps) => {
-  const { onLongPress, onPress, onPressIn, preventPress, isMessageErrorType } = useMessageContext();
+  const { onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, FileAttachmentIcon = FileIconDefault } = useMessagesContext();
 
   return (
@@ -113,7 +110,6 @@ export const FileAttachment = (props: FileAttachmentProps) => {
         onPress,
         onPressIn,
         preventPress,
-        isMessageErrorType,
       }}
       {...props}
     />

package/src/components/Attachment/Gallery.tsx

@@ -52,7 +52,6 @@ export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalle
     | 'preventPress'
     | 'message'
     | 'messageContentOrder'
-    | 'isMessageErrorType'
   > &
   Pick<
     MessagesContextValue,
@@ -86,7 +85,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     videos,
     VideoThumbnail,
     messageHasOnlyOneImage = false,
-    isMessageErrorType,
   } = props;
 
   const { resizableCDNHosts } = useChatConfigContext();
@@ -211,7 +209,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   setOverlay={setOverlay}
                   thumbnail={thumbnail}
                   VideoThumbnail={VideoThumbnail}
-                  isMessageErrorType={isMessageErrorType}
                 />
               );
             })}
@@ -241,10 +238,7 @@ type GalleryThumbnailProps = {
   | 'ImageReloadIndicator'
 > &
   Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
-  Pick<
-    MessageContextValue,
-    'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress' | 'isMessageErrorType'
-  > &
+  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<OverlayContextValue, 'setOverlay'>;
 
 const GalleryThumbnail = ({
@@ -268,7 +262,6 @@ const GalleryThumbnail = ({
   setOverlay,
   thumbnail,
   VideoThumbnail,
-  isMessageErrorType,
 }: GalleryThumbnailProps) => {
   const {
     theme: {
@@ -322,7 +315,7 @@ const GalleryThumbnail = ({
         if (onPress) {
           onPress({
             additionalInfo: { thumbnail },
-            defaultHandler: isMessageErrorType ? undefined : defaultOnPress,
+            defaultHandler: defaultOnPress,
             emitter: 'gallery',
             event,
           });
@@ -332,7 +325,7 @@ const GalleryThumbnail = ({
         if (onPressIn) {
           onPressIn({
             additionalInfo: { thumbnail },
-            defaultHandler: isMessageErrorType ? undefined : defaultOnPress,
+            defaultHandler: defaultOnPress,
             emitter: 'gallery',
             event,
           });
@@ -454,27 +447,20 @@ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWit
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
     videos: prevVideos,
-    isMessageErrorType: prevIsMessageErrorType,
   } = prevProps;
   const {
     alignment: nextAlignment,
     images: nextImages,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
     videos: nextVideos,
-    isMessageErrorType: nextIsMessageErrorType,
   } = nextProps;
 
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) {
     return false;
   }
 
-  const isMessageErrorTypeEqual = prevIsMessageErrorType === nextIsMessageErrorType;
-  if (!isMessageErrorTypeEqual) {
-    return false;
-  }
-
   const messageEqual =
     prevMessage?.id === nextMessage?.id &&
     `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
@@ -538,7 +524,6 @@ export const Gallery = (props: GalleryProps) => {
     videos: propVideos,
     VideoThumbnail: PropVideoThumbnail,
     messageContentOrder: propMessageContentOrder,
-    isMessageErrorType: propIsMessageErrorType,
   } = props;
 
   const { imageGalleryStateStore } = useImageGalleryContext();
@@ -552,7 +537,6 @@ export const Gallery = (props: GalleryProps) => {
     preventPress: contextPreventPress,
     videos: contextVideos,
     messageContentOrder: contextMessageContentOrder,
-    isMessageErrorType: contextIsMessageErrorType,
   } = useMessageContext();
   const {
     additionalPressableProps: contextAdditionalPressableProps,
@@ -586,7 +570,6 @@ export const Gallery = (props: GalleryProps) => {
   const ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
   const messageContentOrder = propMessageContentOrder || contextMessageContentOrder;
-  const isMessageErrorType = propIsMessageErrorType || contextIsMessageErrorType;
 
   const messageHasOnlyOneImage =
     messageContentOrder?.length === 1 &&
@@ -615,7 +598,6 @@ export const Gallery = (props: GalleryProps) => {
         VideoThumbnail,
         messageHasOnlyOneImage,
         messageContentOrder,
-        isMessageErrorType,
       }}
     />
   );

package/src/components/Message/Message.tsx

@@ -745,9 +745,15 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       };
 
       const handleOnPress = () => {
+        if (errorOrFailed) {
+          onPress(true);
+          return;
+        }
+
         if (onPressMessageProp) {
           return onPressMessageProp(onPressArgs);
         }
+
         if (payload.defaultHandler) {
           return payload.defaultHandler();
         }
@@ -782,7 +788,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,
     threadList,
     videos: attachments.videos,
-    isMessageErrorType: errorOrFailed,
   });
 
   const prevActive = useRef<boolean>(overlayActive);

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -53,7 +53,6 @@ export const useCreateMessageContext = ({
   threadList,
   videos,
   setQuotedMessage,
-  isMessageErrorType,
 }: MessageContextValue) => {
   const stableGroupStyles = useStableRefValue(groupStyles);
   const reactionsValue = reactions.map(({ count, own, type }) => `${own}${type}${count}`).join();
@@ -106,7 +105,6 @@ export const useCreateMessageContext = ({
       showMessageStatus,
       threadList,
       videos,
-      isMessageErrorType,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -128,7 +126,6 @@ export const useCreateMessageContext = ({
       showMessageStatus,
       threadList,
       preventPress,
-      isMessageErrorType,
     ],
   );
 

package/src/contexts/messageContext/MessageContext.tsx

@@ -20,8 +20,6 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 export type Alignment = 'right' | 'left';
 
 export type MessageContextValue = {
-  /** Whether or not the message is an error */
-  isMessageErrorType: boolean;
   /** Whether or not actions can be performed on message */
   actionsEnabled: boolean;
   /** Position of the message, either 'right' or 'left' */