@ethora/chat-component-rn 26.8.5 → 26.8.7

package/lib/commonjs/components/MessageBubble/Message.js

@@ -11,6 +11,7 @@ var _Avatar = require("./Avatar");
 var _MessageInteractions = _interopRequireDefault(require("./MessageInteractions"));
 var _BottomReplyContainer = require("./BottomReplyContainer");
 var _MessageReply = require("./MessageReply");
+var _parseMessageReference = require("../../helpers/parseMessageReference");
 var _DeletedMessage = require("./DeletedMessage");
 var _chatSettingsSlice = require("../../roomStore/chatSettingsSlice");
 var _MODAL_TYPES = require("../../helpers/constants/MODAL_TYPES");
@@ -27,10 +28,18 @@ var _parseMessageBody = require("../../helpers/parseMessageBody");
 var _typography = require("../../helpers/typography");
 var _useMessageHeapState = require("../../hooks/useMessageHeapState");
 var _icons = require("../../assets/icons");
+var _useT = require("../../i18n/useT");
+var _displayName = require("../../helpers/displayName");
+var _useFileToken = require("../../hooks/useFileToken");
+var _secureFileUrl = require("../../helpers/secureFileUrl");
+var _stanza = require("../../e2ee/stanza");
 var _xmppProvider = require("../../context/xmppProvider");
 var _useSendMessage = require("../../hooks/useSendMessage");
 var _MessageReaction = require("./MessageReaction");
-var _StyledComponents = require("../styled/StyledComponents");
+var _EmojiPickerSheet = require("./EmojiPickerSheet");
+var _reactionsConfig = require("../../helpers/reactionsConfig");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _haptics = require("../../helpers/haptics");
 var _useTheme = require("../../hooks/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -144,6 +153,21 @@ const CustomTimestampRow = _native.default.View`
   media
 }) => media ? '10px' : 0};
 `;
+const clockCache = new Map();
+const formatClock = date => {
+  const key = String(date);
+  const cached = clockCache.get(key);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const d = new Date(date);
+  const label = Number.isNaN(d.getTime()) ? '' : `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+  if (clockCache.size > 5000) {
+    clockCache.clear();
+  }
+  clockCache.set(key, label);
+  return label;
+};
 const Message = ({
   message,
   isUser,
@@ -163,6 +187,7 @@ const Message = ({
   // only per-render allocations added for theming (memoized on the theme
   // object, which useTheme keeps stable across renders).
   const theme = (0, _useTheme.useTheme)();
+  const t = (0, _useT.useT)();
   const themedStyles = (0, _react.useMemo)(() => ({
     muted: {
       color: theme.textMuted
@@ -208,13 +233,16 @@ const Message = ({
   // REST roster populates the cache. Falls back to the message's own name
   // (which may carry senderFirstName/senderLastName from the wire) only when
   // usersSet has never seen this sender.
-  const senderDisplayName = senderEntry ? `${senderEntry.firstName ?? ''} ${senderEntry.lastName ?? ''}`.trim() || senderEntry.name || senderLocal : message.user?.name || senderLocal || 'Unknown';
+  const senderDisplayName = senderEntry ? (0, _displayName.composeName)(senderEntry.firstName, senderEntry.lastName) || senderEntry.name || senderLocal : message.user?.name || senderLocal || 'Unknown';
   // A broadcast posted by the app itself arrives with the ROOM's own id as
   // its occupant resource, so no roster ever resolves it and the name chain
   // ends at 50 characters of hex. Captioning a bubble with that tells the
   // reader strictly less than showing nothing.
   const hasRealSenderName = !(0, _isUnresolvedSenderId.isUnresolvedSenderId)(senderDisplayName);
-  const senderProfileImage = senderEntry?.profileImage || message.user?.profileImage || '';
+  const fileToken = (0, _useFileToken.useFileToken)();
+  const [avatarFailed, setAvatarFailed] = (0, _react.useState)(null);
+  const rawProfileImage = String(senderEntry?.profileImage || message.user?.profileImage || message.user?.photoURL || '').trim();
+  const senderProfileImage = rawProfileImage && rawProfileImage !== 'none' && rawProfileImage !== avatarFailed ? (0, _secureFileUrl.appendFileToken)(rawProfileImage, fileToken) : '';
   const {
     idSet,
     failedIdSet
@@ -223,9 +251,7 @@ const Message = ({
     retryMessage
   } = (0, _useSendMessage.useSendMessage)();
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
-  if (__DEV__ && message.id && !globalThis.__loggedMsg?.[message.id]) {
-    (globalThis.__loggedMsg ||= {})[message.id] = true;
-  }
+  const [emojiPickerOpen, setEmojiPickerOpen] = (0, _react.useState)(false);
   const [contextMenuPosition, setContextMenuPosition] = (0, _react.useState)(null);
   const timerRef = (0, _react.useRef)(null);
   const messageRef = (0, _react.useRef)(null);
@@ -234,15 +260,18 @@ const Message = ({
     dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.PROFILE));
     dispatch((0, _chatSettingsSlice.setSelectedUser)(user));
   };
+  const replyRef = (0, _parseMessageReference.parseMessageReference)(message);
   const handleReplyMessage = () => {
     dispatch((0, _roomsSlice.setEditAction)({
       isEdit: false
     }));
-    if (!isReply && message.mainMessage) {
-      const messageCore = JSON.parse(message.mainMessage);
+
+    // An in-channel reply opens its PARENT's thread.
+    const parent = !isReply ? (0, _parseMessageReference.parseMessageReference)(message) : null;
+    if (parent) {
       dispatch((0, _roomsSlice.setActiveMessage)({
-        id: messageCore.id,
-        chatJID: messageCore.roomJid
+        id: parent.id,
+        chatJID: parent.roomJid || message.roomJid
       }));
       return setIsPressed(false);
     }
@@ -276,14 +305,16 @@ const Message = ({
   // };
 
   const handleReactionMessage = emoji => {
-    if (!message.reaction) {
-      return client?.sendMessageReactionStanza(message.id, message.roomJid, [emoji], `${user.firstName} ${user.lastName}`);
-    }
-    if (message.reaction && message.reaction[user.xmppUsername || ''] && message.reaction[user.xmppUsername || '']?.emoji.includes(emoji)) {
-      const filterEmoji = message.reaction[user.xmppUsername || '']?.emoji.filter(reaction => reaction !== emoji);
-      return client?.sendMessageReactionStanza(message.id, message.roomJid, filterEmoji, `${user.firstName} ${user.lastName}`);
+    if (!(0, _reactionsConfig.reactionsEnabled)(config) || config?.disableInteractions) {
+      return;
     }
-    client?.sendMessageReactionStanza(message.id, message.roomJid, [...(message.reaction[user.xmppUsername || '']?.emoji || []), emoji], `${user.firstName} ${user.lastName}`);
+    const sender = {
+      firstName: user.firstName,
+      lastName: user.lastName
+    };
+    const own = message.reaction?.[user.xmppUsername || '']?.emoji || [];
+    const next = own.includes(emoji) ? own.filter(reaction => reaction !== emoji) : [...own, emoji];
+    client?.sendMessageReactionStanza(message.id, message.roomJid, next, sender);
   };
 
   // Long-press → capture the bubble's on-screen bounding box. The actual
@@ -324,6 +355,30 @@ const Message = ({
     setIsPressed(true);
   };
 
+  // Long-press is a NATIVE recognizer over the whole bubble column, not the
+  // Pressable's JS timer: the timer was lost whenever an inner responder
+  // (link text, media, reply quote, reactions) took the touch first, or the
+  // list stole it on the slightest drift — "works every other time". The
+  // recognizer fires wherever the finger lands, and once it does the touch
+  // is cancelled for everything underneath, so no tap handler fires on top.
+  const longPress = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.LongPress().runOnJS(true).minDuration(350).maxDistance(12).enabled(!config?.disableInteractions).onStart(() => {
+    (0, _haptics.hapticTap)();
+    handleLongPress();
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [config?.disableInteractions]);
+
+  // The bubble lifts a touch while its menu is open, and settles back.
+  const lift = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.spring(lift, {
+      toValue: isPressed ? 1.03 : 1,
+      useNativeDriver: true,
+      speed: 30,
+      bounciness: 6
+    }).start();
+  }, [isPressed, lift]);
+
   // Body text size/weight is set on the parser's leaf <Text>s — the markdown
   // wraps content in <View>s which break Text-style inheritance, so the bubble
   // wrapper's fontSize alone never reached the actual text.
@@ -336,9 +391,12 @@ const Message = ({
   }), [config?.typography?.messageText, isUser, theme]);
   // In auto mode, render the translation as the primary body — but NEVER for
   // the reader's own messages (they wrote it; no point translating it back).
-  const showInlineTranslation = isAutoTranslate && translationDisplay.hasTranslation && !isUser;
+  const isUndecryptable = message.undecryptable === 'true' && !message.isDeleted;
+  const showInlineTranslation = isAutoTranslate && translationDisplay.hasTranslation && !isUser && !isUndecryptable;
   const bodyToRender = showInlineTranslation ? translationDisplay.displayText : message.body;
-  const messageText = config?.messageTextFilter?.enabled ? (0, _parseMessageBody.parseMessageBody)(config?.messageTextFilter.filterFunction(bodyToRender), bodyTextStyle, theme) : (0, _parseMessageBody.parseMessageBody)(bodyToRender, bodyTextStyle, theme);
+  const textFilter = config?.messageTextFilter;
+  const messageText = (0, _react.useMemo)(() => textFilter?.enabled ? (0, _parseMessageBody.parseMessageBody)(textFilter.filterFunction(bodyToRender), bodyTextStyle, theme) : (0, _parseMessageBody.parseMessageBody)(bodyToRender, bodyTextStyle, theme), [textFilter, bodyToRender, bodyTextStyle, theme]);
+  const timeLabel = (0, _react.useMemo)(() => formatClock(message.date), [message.date]);
   const isFailed = failedIdSet.has(message.id);
   const isPending = !isFailed && (idSet.has(message.id) || message?.pending || false);
   const onRetryPress = () => {
@@ -353,13 +411,8 @@ const Message = ({
       ref: messageRef,
       style: [styles.customMessageContainer, {
         justifyContent: isUser ? 'flex-end' : 'flex-start',
-        marginBottom: !!message?.reply?.length || message?.reaction && !!Object.keys(message?.reaction)?.length ? 20 : 0
-      }, isPressed ? {
-        transform: [{
-          scale: 1.05
-        }],
-        paddingRight: 16
-      } : undefined
+        marginBottom: 0
+      }
       // justify-content: ${({ isUser }) => (isUser ? "flex-end" : "flex-start")},
       // margin-bottom: ${(props) => !!props.reply && "20px"},
       ],
@@ -371,126 +424,170 @@ const Message = ({
       // affordance) — consumers who want it gone entirely can return
       // null from a custom message component.
       , {
-        onPress: config?.disableProfilesInteractions ? undefined : () => handleUserAvatarClick(message.user),
+        onPress: config?.disableProfilesInteractions ? undefined : () => handleUserAvatarClick({
+          ...message.user,
+          ...(senderEntry ? {
+            firstName: senderEntry.firstName,
+            lastName: senderEntry.lastName,
+            profileImage: senderEntry.profileImage,
+            description: senderEntry.description
+          } : {}),
+          name: hasRealSenderName ? senderDisplayName : ''
+        }),
         disabled: !!config?.disableProfilesInteractions,
         accessible: !config?.disableProfilesInteractions,
         children: senderProfileImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMessagePhoto, {
+          testID: "message-sender-avatar",
           source: {
             uri: senderProfileImage
+          },
+          onError: () => {
+            if ((0, _secureFileUrl.isSecureFileUrl)(rawProfileImage)) {
+              (0, _secureFileUrl.requestFileTokenRecovery)();
+            }
+            setAvatarFailed(rawProfileImage);
           }
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
           username: senderDisplayName
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable
-      // The Pressable fills the row's content area, so the bubble
-      // inside must be aligned to the sender's side — otherwise it
-      // hugs the left and own media bubbles sit with a right-side
-      // gap (text bubbles only looked right because they're narrow).
-      // flex-end for own, flex-start for others.
-      , {
-        style: {
-          flex: 1,
-          alignItems: isUser ? 'flex-end' : 'flex-start'
-        }
-        // A plain tap anywhere on a message bubble dismisses the
-        // keyboard. The FlatList's keyboardShouldPersistTaps="handled"
-        // already dismisses taps on the empty GAPS between bubbles, but
-        // the bubble Pressable itself is a touch responder, so taps that
-        // landed on a message were "handled" and the keyboard stayed —
-        // which is exactly the "closes only every other time" symptom
-        // (hit a gap → close, hit a bubble → stay). Explicitly dismissing
-        // here makes it reliable across the whole list. onPress does NOT
-        // fire when onLongPress fires, so opening MessageInteractions via
-        // long-press never triggers this dismiss.
-        ,
-        onPress: () => _reactNative.Keyboard.dismiss()
-        // disableInteractions hides the long-press → context menu
-        // (delete / edit / reply / react). Mirrors web's config gate.
-        ,
-        onLongPress: config?.disableInteractions ? undefined : handleLongPress,
-        delayLongPress: 500,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomMessageBubble, {
-          ref: bubbleRef,
-          collapsable: false,
-          isUser: isUser,
-          deleted: message.isDeleted,
-          isMedia: message?.isMediafile === 'true' && !message?.isDeleted,
-          children: [!isUser && hasRealSenderName && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomUserName
-          // Historically `config.colors.primary` with a plain-text
-          // fallback; theme.primary carries the same value in light
-          // mode and the dark accent in dark mode.
-          , {
-            color: config?.colors?.primary ? theme.primary : undefined,
-            media: message?.isMediafile === 'true',
-            fontSize: config?.typography?.senderName?.fontSize,
-            fontWeight: config?.typography?.senderName?.fontWeight,
-            children: senderDisplayName
-          }), !isReply && message.mainMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageReply.MessageReply, {
-            handleReplyMessage: handleReplyMessage,
-            isUser: isUser,
-            text: JSON.parse(message.mainMessage).text,
-            color: theme.primary
-          }), message?.isMediafile === 'true' && !message?.isDeleted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaMessage.default, {
-            mimeType: message.mimetype,
-            messageText: message.locationPreview,
-            location: message?.location,
-            message: message,
-            isUser: isUser
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: message.isDeleted && message.id !== 'delimiter-new' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeletedMessage.DeletedMessage, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMessageText, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+        gesture: longPress,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable
+        // The Pressable fills the row's content area, so the bubble
+        // inside must be aligned to the sender's side — otherwise it
+        // hugs the left and own media bubbles sit with a right-side
+        // gap (text bubbles only looked right because they're narrow).
+        // flex-end for own, flex-start for others.
+        , {
+          style: {
+            flex: 1,
+            alignItems: isUser ? 'flex-end' : 'flex-start'
+          }
+          // A plain tap anywhere on a message bubble dismisses the
+          // keyboard. The FlatList's keyboardShouldPersistTaps="handled"
+          // already dismisses taps on the empty GAPS between bubbles, but
+          // the bubble Pressable itself is a touch responder, so taps that
+          // landed on a message were "handled" and the keyboard stayed —
+          // which is exactly the "closes only every other time" symptom
+          // (hit a gap → close, hit a bubble → stay). Explicitly dismissing
+          // here makes it reliable across the whole list. onPress does NOT
+          // fire when onLongPress fires, so opening MessageInteractions via
+          // long-press never triggers this dismiss.
+          ,
+          onPress: () => _reactNative.Keyboard.dismiss(),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+            style: {
+              transform: [{
+                scale: lift
+              }]
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomMessageBubble, {
+              ref: bubbleRef,
+              collapsable: false,
               isUser: isUser,
-              fontSize: config?.typography?.messageText?.fontSize,
-              fontWeight: config?.typography?.messageText?.fontWeight,
-              children: showInlineTranslation ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TranslatedMessageBody.default, {
+              deleted: message.isDeleted,
+              isMedia: message?.isMediafile === 'true' && !message?.isDeleted,
+              children: [!isUser && hasRealSenderName && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomUserName
+              // Historically `config.colors.primary` with a plain-text
+              // fallback; theme.primary carries the same value in light
+              // mode and the dark accent in dark mode.
+              , {
+                color: config?.colors?.primary ? theme.primary : undefined,
+                media: message?.isMediafile === 'true',
+                fontSize: config?.typography?.senderName?.fontSize,
+                fontWeight: config?.typography?.senderName?.fontWeight,
+                children: senderDisplayName
+              }), !isReply && !!replyRef?.text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageReply.MessageReply, {
+                handleReplyMessage: handleReplyMessage,
                 isUser: isUser,
-                originalText: translationDisplay.originalText,
-                accentColor: theme.primary,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  children: messageText
+                text: replyRef.text,
+                userName: replyRef.userName,
+                color: theme.primary
+              }), message?.isMediafile === 'true' && !message?.isDeleted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaMessage.default, {
+                mimeType: message.mimetype,
+                messageText: message.locationPreview,
+                location: message?.location,
+                message: message,
+                isUser: isUser
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                children: message.isDeleted && message.id !== 'delimiter-new' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeletedMessage.DeletedMessage, {}) : isUndecryptable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.undecryptable,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LockIcon, {
+                    width: 15,
+                    height: 15,
+                    color: theme.textSecondary
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: [styles.undecryptableText, themedStyles.muted, {
+                      fontSize: config?.typography?.messageText?.fontSize ?? 15
+                    }],
+                    children: t((0, _stanza.placeholderKey)(message.e2eeError))
+                  })]
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMessageText, {
+                  isUser: isUser,
+                  fontSize: config?.typography?.messageText?.fontSize,
+                  fontWeight: config?.typography?.messageText?.fontWeight,
+                  children: showInlineTranslation ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TranslatedMessageBody.default, {
+                    isUser: isUser,
+                    originalText: translationDisplay.originalText,
+                    accentColor: theme.primary,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      children: messageText
+                    })
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    children: messageText
+                  })
                 })
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                children: messageText
-              })
-            })
-          }), !isUser && isTranslatesEnabled && effectiveTranslateMode === 'manual' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageTranslate.default, {
-            message: message,
-            config: config,
-            isUser: isUser,
-            readerLocale: readerLocale
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomTimestampRow, {
-            media: message?.isMediafile === 'true',
-            children: [!config?.disableSentLogic && isUser && isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.timestampText, themedStyles.muted],
-              children: "sending..."
-            }), !config?.disableSentLogic && isUser && isFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              onPress: onRetryPress,
-              style: [styles.failedText, themedStyles.failed],
-              accessibilityRole: "button",
-              accessibilityLabel: "Retry sending message",
-              children: "! Failed \u2014 tap to retry"
-            }), message?.isEdited && !message?.isDeleted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.editedText, themedStyles.muted],
-              children: "edited"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.timestampText, themedStyles.muted],
-              children: new Date(message.date).toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit'
-              })
-            }), !config?.disableSentLogic && isUser && !isPending && !isFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DoubleTick, {})]
-          }), message?.reply?.length && message?.reply?.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomReplyContainer.BottomReplyContainer, {
-            isUser: isUser,
-            onClick: handleReplyMessage,
-            reply: message?.reply
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledComponents.MessageFooter, {
-            isUser: isUser,
-            children: message.reaction && !config?.disableReactions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageReaction.MessageReaction, {
-              reaction: message.reaction,
-              changeReaction: handleReactionMessage,
-              color: theme.primary,
-              userName: `${user.firstName} ${user.lastName}`
-            })
-          })]
+              }), !isUser && !isUndecryptable && isTranslatesEnabled && effectiveTranslateMode === 'manual' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageTranslate.default, {
+                message: message,
+                config: config,
+                isUser: isUser,
+                readerLocale: readerLocale
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomTimestampRow, {
+                media: message?.isMediafile === 'true',
+                children: [!config?.disableSentLogic && isUser && isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.timestampText, themedStyles.muted],
+                  children: "sending..."
+                }), !config?.disableSentLogic && isUser && isFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  onPress: onRetryPress,
+                  style: [styles.failedText, themedStyles.failed],
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Retry sending message",
+                  children: "! Failed \u2014 tap to retry"
+                }), message?.isEdited && !message?.isDeleted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.editedText, themedStyles.muted],
+                  children: "edited"
+                }), message?.unencrypted && !message?.isDeleted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+                  hitSlop: 10,
+                  accessibilityRole: "button",
+                  accessibilityLabel: t('e2ee.notEncrypted'),
+                  accessibilityHint: t('e2ee.notEncryptedHint'),
+                  testID: "message-not-encrypted",
+                  onPress: () => _reactNative.Alert.alert(t('e2ee.notEncrypted'), t('e2ee.notEncryptedHint')),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LockOffIcon, {
+                    width: 13,
+                    height: 13,
+                    color: theme.danger
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.timestampText, themedStyles.muted],
+                  children: timeLabel
+                }), !config?.disableSentLogic && isUser && !isPending && !isFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DoubleTick, {})]
+              })]
+            }), (!isReply && (message?.reply?.length || 0) > 0 || !!message.reaction && (0, _reactionsConfig.reactionsEnabled)(config)) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.reactionRow, isUser ? styles.reactionRowUser : styles.reactionRowOther],
+              children: [!isReply && (message?.reply?.length || 0) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomReplyContainer.BottomReplyContainer, {
+                isUser: isUser,
+                onClick: handleReplyMessage,
+                reply: message.reply
+              }), message.reaction && (0, _reactionsConfig.reactionsEnabled)(config) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageReaction.MessageReaction, {
+                reaction: message.reaction,
+                changeReaction: handleReactionMessage,
+                color: theme.primary,
+                userName: `${user.firstName || ''} ${user.lastName || ''}`.trim(),
+                interactive: !config?.disableInteractions
+              })]
+            })]
+          })
         })
       })]
     }), !config?.disableInteractions && isPressed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageInteractions.default, {
@@ -502,11 +599,16 @@ const Message = ({
       handleReplyMessage: handleReplyMessage,
       handleDeleteMessage: handleDeleteMessage,
       handleEditMessage: handleEditMessage,
-      handleReactionMessage: handleReactionMessage
+      handleReactionMessage: handleReactionMessage,
+      onOpenEmojiPicker: () => setEmojiPickerOpen(true)
+    }), emojiPickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmojiPickerSheet.EmojiPickerSheet, {
+      visible: true,
+      onClose: () => setEmojiPickerOpen(false),
+      onPick: handleReactionMessage
     })]
   });
 };
-exports.Message = Message;
+const MemoMessage = exports.Message = /*#__PURE__*/_react.default.memo(Message);
 const styles = _reactNative.StyleSheet.create({
   customMessageContainer: {
     flexDirection: 'row',
@@ -514,6 +616,22 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: 'flex-end',
     position: 'relative'
   },
+  reactionRow: {
+    marginTop: -10,
+    zIndex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6
+  },
+  reactionRowUser: {
+    alignSelf: 'flex-end',
+    marginRight: 8
+  },
+  reactionRowOther: {
+    alignSelf: 'flex-start',
+    marginLeft: 8
+  },
   overlay: {
     ..._reactNative.StyleSheet.absoluteFill,
     position: 'absolute',
@@ -546,6 +664,16 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 4,
     gap: 4
   },
+  undecryptable: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 6,
+    maxWidth: 260
+  },
+  undecryptableText: {
+    flexShrink: 1,
+    fontStyle: 'italic'
+  },
   timestampText: {
     fontSize: 12,
     lineHeight: 16,