@ethora/chat-component-rn 26.8.5 → 26.8.7

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

@@ -1,12 +1,13 @@
 "use strict";
 
-import React, { useMemo, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, findNodeHandle, UIManager, Text, Keyboard } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Alert, Animated, View, Pressable, StyleSheet, findNodeHandle, UIManager, Text, Keyboard } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { Avatar } from './Avatar';
 import MessageInteractions from './MessageInteractions';
 import { BottomReplyContainer } from './BottomReplyContainer';
 import { MessageReply } from './MessageReply';
+import { parseMessageReference } from '../../helpers/parseMessageReference';
 import { DeletedMessage } from './DeletedMessage';
 import { setActiveModal, setDeleteModal, setSelectedUser } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
@@ -22,13 +23,21 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { chatTextStyle } from '../../helpers/typography';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
-import { DoubleTick } from '../../assets/icons';
+import { DoubleTick, LockIcon, LockOffIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
+import { composeName } from '../../helpers/displayName';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken, isSecureFileUrl, requestFileTokenRecovery } from '../../helpers/secureFileUrl';
+import { placeholderKey } from '../../e2ee/stanza';
 import { useXmppClient } from '../../context/xmppProvider';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
-import { MessageFooter } from '../styled/StyledComponents';
+import { EmojiPickerSheet } from './EmojiPickerSheet';
+import { reactionsEnabled } from '../../helpers/reactionsConfig';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { hapticTap } from '../../helpers/haptics';
 import { useTheme } from '../../hooks/useTheme';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CustomMessageContainer = styled.View`
   flex-direction: row;
   padding: 10px;
@@ -138,6 +147,21 @@ const CustomTimestampRow = styled.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,
@@ -157,6 +181,7 @@ const Message = ({
   // only per-render allocations added for theming (memoized on the theme
   // object, which useTheme keeps stable across renders).
   const theme = useTheme();
+  const t = useT();
   const themedStyles = useMemo(() => ({
     muted: {
       color: theme.textMuted
@@ -202,13 +227,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 ? 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 = !isUnresolvedSenderId(senderDisplayName);
-  const senderProfileImage = senderEntry?.profileImage || message.user?.profileImage || '';
+  const fileToken = useFileToken();
+  const [avatarFailed, setAvatarFailed] = useState(null);
+  const rawProfileImage = String(senderEntry?.profileImage || message.user?.profileImage || message.user?.photoURL || '').trim();
+  const senderProfileImage = rawProfileImage && rawProfileImage !== 'none' && rawProfileImage !== avatarFailed ? appendFileToken(rawProfileImage, fileToken) : '';
   const {
     idSet,
     failedIdSet
@@ -217,9 +245,7 @@ const Message = ({
     retryMessage
   } = useSendMessage();
   const [isPressed, setIsPressed] = useState(false);
-  if (__DEV__ && message.id && !globalThis.__loggedMsg?.[message.id]) {
-    (globalThis.__loggedMsg ||= {})[message.id] = true;
-  }
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
   const [contextMenuPosition, setContextMenuPosition] = useState(null);
   const timerRef = useRef(null);
   const messageRef = useRef(null);
@@ -228,15 +254,18 @@ const Message = ({
     dispatch(setActiveModal(MODAL_TYPES.PROFILE));
     dispatch(setSelectedUser(user));
   };
+  const replyRef = parseMessageReference(message);
   const handleReplyMessage = () => {
     dispatch(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 ? parseMessageReference(message) : null;
+    if (parent) {
       dispatch(setActiveMessage({
-        id: messageCore.id,
-        chatJID: messageCore.roomJid
+        id: parent.id,
+        chatJID: parent.roomJid || message.roomJid
       }));
       return setIsPressed(false);
     }
@@ -270,14 +299,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 (!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
@@ -318,6 +349,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 = useMemo(() => Gesture.LongPress().runOnJS(true).minDuration(350).maxDistance(12).enabled(!config?.disableInteractions).onStart(() => {
+    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 = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    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.
@@ -330,9 +385,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 ? parseMessageBody(config?.messageTextFilter.filterFunction(bodyToRender), bodyTextStyle, theme) : parseMessageBody(bodyToRender, bodyTextStyle, theme);
+  const textFilter = config?.messageTextFilter;
+  const messageText = useMemo(() => textFilter?.enabled ? parseMessageBody(textFilter.filterFunction(bodyToRender), bodyTextStyle, theme) : parseMessageBody(bodyToRender, bodyTextStyle, theme), [textFilter, bodyToRender, bodyTextStyle, theme]);
+  const timeLabel = useMemo(() => formatClock(message.date), [message.date]);
   const isFailed = failedIdSet.has(message.id);
   const isPending = !isFailed && (idSet.has(message.id) || message?.pending || false);
   const onRetryPress = () => {
@@ -347,13 +405,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"},
       ],
@@ -365,126 +418,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__*/_jsx(CustomMessagePhoto, {
+          testID: "message-sender-avatar",
           source: {
             uri: senderProfileImage
+          },
+          onError: () => {
+            if (isSecureFileUrl(rawProfileImage)) {
+              requestFileTokenRecovery();
+            }
+            setAvatarFailed(rawProfileImage);
           }
         }) : /*#__PURE__*/_jsx(Avatar, {
           username: senderDisplayName
         })
-      }), /*#__PURE__*/_jsx(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: () => 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__*/_jsxs(CustomMessageBubble, {
-          ref: bubbleRef,
-          collapsable: false,
-          isUser: isUser,
-          deleted: message.isDeleted,
-          isMedia: message?.isMediafile === 'true' && !message?.isDeleted,
-          children: [!isUser && hasRealSenderName && /*#__PURE__*/_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__*/_jsx(MessageReply, {
-            handleReplyMessage: handleReplyMessage,
-            isUser: isUser,
-            text: JSON.parse(message.mainMessage).text,
-            color: theme.primary
-          }), message?.isMediafile === 'true' && !message?.isDeleted ? /*#__PURE__*/_jsx(MediaMessage, {
-            mimeType: message.mimetype,
-            messageText: message.locationPreview,
-            location: message?.location,
-            message: message,
-            isUser: isUser
-          }) : /*#__PURE__*/_jsx(_Fragment, {
-            children: message.isDeleted && message.id !== 'delimiter-new' ? /*#__PURE__*/_jsx(DeletedMessage, {}) : /*#__PURE__*/_jsx(CustomMessageText, {
+      }), /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: longPress,
+        children: /*#__PURE__*/_jsx(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: () => Keyboard.dismiss(),
+          children: /*#__PURE__*/_jsxs(Animated.View, {
+            style: {
+              transform: [{
+                scale: lift
+              }]
+            },
+            children: [/*#__PURE__*/_jsxs(CustomMessageBubble, {
+              ref: bubbleRef,
+              collapsable: false,
               isUser: isUser,
-              fontSize: config?.typography?.messageText?.fontSize,
-              fontWeight: config?.typography?.messageText?.fontWeight,
-              children: showInlineTranslation ? /*#__PURE__*/_jsx(TranslatedMessageBody, {
+              deleted: message.isDeleted,
+              isMedia: message?.isMediafile === 'true' && !message?.isDeleted,
+              children: [!isUser && hasRealSenderName && /*#__PURE__*/_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__*/_jsx(MessageReply, {
+                handleReplyMessage: handleReplyMessage,
                 isUser: isUser,
-                originalText: translationDisplay.originalText,
-                accentColor: theme.primary,
-                children: /*#__PURE__*/_jsx(Text, {
-                  children: messageText
+                text: replyRef.text,
+                userName: replyRef.userName,
+                color: theme.primary
+              }), message?.isMediafile === 'true' && !message?.isDeleted ? /*#__PURE__*/_jsx(MediaMessage, {
+                mimeType: message.mimetype,
+                messageText: message.locationPreview,
+                location: message?.location,
+                message: message,
+                isUser: isUser
+              }) : /*#__PURE__*/_jsx(_Fragment, {
+                children: message.isDeleted && message.id !== 'delimiter-new' ? /*#__PURE__*/_jsx(DeletedMessage, {}) : isUndecryptable ? /*#__PURE__*/_jsxs(View, {
+                  style: styles.undecryptable,
+                  children: [/*#__PURE__*/_jsx(LockIcon, {
+                    width: 15,
+                    height: 15,
+                    color: theme.textSecondary
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: [styles.undecryptableText, themedStyles.muted, {
+                      fontSize: config?.typography?.messageText?.fontSize ?? 15
+                    }],
+                    children: t(placeholderKey(message.e2eeError))
+                  })]
+                }) : /*#__PURE__*/_jsx(CustomMessageText, {
+                  isUser: isUser,
+                  fontSize: config?.typography?.messageText?.fontSize,
+                  fontWeight: config?.typography?.messageText?.fontWeight,
+                  children: showInlineTranslation ? /*#__PURE__*/_jsx(TranslatedMessageBody, {
+                    isUser: isUser,
+                    originalText: translationDisplay.originalText,
+                    accentColor: theme.primary,
+                    children: /*#__PURE__*/_jsx(Text, {
+                      children: messageText
+                    })
+                  }) : /*#__PURE__*/_jsx(Text, {
+                    children: messageText
+                  })
                 })
-              }) : /*#__PURE__*/_jsx(Text, {
-                children: messageText
-              })
-            })
-          }), !isUser && isTranslatesEnabled && effectiveTranslateMode === 'manual' && /*#__PURE__*/_jsx(MessageTranslate, {
-            message: message,
-            config: config,
-            isUser: isUser,
-            readerLocale: readerLocale
-          }), /*#__PURE__*/_jsxs(CustomTimestampRow, {
-            media: message?.isMediafile === 'true',
-            children: [!config?.disableSentLogic && isUser && isPending && /*#__PURE__*/_jsx(Text, {
-              style: [styles.timestampText, themedStyles.muted],
-              children: "sending..."
-            }), !config?.disableSentLogic && isUser && isFailed && /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-              style: [styles.editedText, themedStyles.muted],
-              children: "edited"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.timestampText, themedStyles.muted],
-              children: new Date(message.date).toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit'
-              })
-            }), !config?.disableSentLogic && isUser && !isPending && !isFailed && /*#__PURE__*/_jsx(DoubleTick, {})]
-          }), message?.reply?.length && message?.reply?.length > 0 ? /*#__PURE__*/_jsx(BottomReplyContainer, {
-            isUser: isUser,
-            onClick: handleReplyMessage,
-            reply: message?.reply
-          }) : /*#__PURE__*/_jsx(View, {}), /*#__PURE__*/_jsx(MessageFooter, {
-            isUser: isUser,
-            children: message.reaction && !config?.disableReactions && /*#__PURE__*/_jsx(MessageReaction, {
-              reaction: message.reaction,
-              changeReaction: handleReactionMessage,
-              color: theme.primary,
-              userName: `${user.firstName} ${user.lastName}`
-            })
-          })]
+              }), !isUser && !isUndecryptable && isTranslatesEnabled && effectiveTranslateMode === 'manual' && /*#__PURE__*/_jsx(MessageTranslate, {
+                message: message,
+                config: config,
+                isUser: isUser,
+                readerLocale: readerLocale
+              }), /*#__PURE__*/_jsxs(CustomTimestampRow, {
+                media: message?.isMediafile === 'true',
+                children: [!config?.disableSentLogic && isUser && isPending && /*#__PURE__*/_jsx(Text, {
+                  style: [styles.timestampText, themedStyles.muted],
+                  children: "sending..."
+                }), !config?.disableSentLogic && isUser && isFailed && /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+                  style: [styles.editedText, themedStyles.muted],
+                  children: "edited"
+                }), message?.unencrypted && !message?.isDeleted && /*#__PURE__*/_jsx(Pressable, {
+                  hitSlop: 10,
+                  accessibilityRole: "button",
+                  accessibilityLabel: t('e2ee.notEncrypted'),
+                  accessibilityHint: t('e2ee.notEncryptedHint'),
+                  testID: "message-not-encrypted",
+                  onPress: () => Alert.alert(t('e2ee.notEncrypted'), t('e2ee.notEncryptedHint')),
+                  children: /*#__PURE__*/_jsx(LockOffIcon, {
+                    width: 13,
+                    height: 13,
+                    color: theme.danger
+                  })
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [styles.timestampText, themedStyles.muted],
+                  children: timeLabel
+                }), !config?.disableSentLogic && isUser && !isPending && !isFailed && /*#__PURE__*/_jsx(DoubleTick, {})]
+              })]
+            }), (!isReply && (message?.reply?.length || 0) > 0 || !!message.reaction && reactionsEnabled(config)) && /*#__PURE__*/_jsxs(View, {
+              style: [styles.reactionRow, isUser ? styles.reactionRowUser : styles.reactionRowOther],
+              children: [!isReply && (message?.reply?.length || 0) > 0 && /*#__PURE__*/_jsx(BottomReplyContainer, {
+                isUser: isUser,
+                onClick: handleReplyMessage,
+                reply: message.reply
+              }), message.reaction && reactionsEnabled(config) && /*#__PURE__*/_jsx(MessageReaction, {
+                reaction: message.reaction,
+                changeReaction: handleReactionMessage,
+                color: theme.primary,
+                userName: `${user.firstName || ''} ${user.lastName || ''}`.trim(),
+                interactive: !config?.disableInteractions
+              })]
+            })]
+          })
         })
       })]
     }), !config?.disableInteractions && isPressed && /*#__PURE__*/_jsx(MessageInteractions, {
@@ -496,11 +593,17 @@ const Message = ({
       handleReplyMessage: handleReplyMessage,
       handleDeleteMessage: handleDeleteMessage,
       handleEditMessage: handleEditMessage,
-      handleReactionMessage: handleReactionMessage
+      handleReactionMessage: handleReactionMessage,
+      onOpenEmojiPicker: () => setEmojiPickerOpen(true)
+    }), emojiPickerOpen && /*#__PURE__*/_jsx(EmojiPickerSheet, {
+      visible: true,
+      onClose: () => setEmojiPickerOpen(false),
+      onPick: handleReactionMessage
     })]
   });
 };
-export { Message };
+const MemoMessage = /*#__PURE__*/React.memo(Message);
+export { MemoMessage as Message };
 const styles = StyleSheet.create({
   customMessageContainer: {
     flexDirection: 'row',
@@ -508,6 +611,22 @@ const styles = 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: {
     ...StyleSheet.absoluteFill,
     position: 'absolute',
@@ -540,6 +659,16 @@ const styles = 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,