@ethora/chat-component-rn 26.8.5 → 26.8.7

package/src/components/MessageBubble/Message.tsx

@@ -1,5 +1,7 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
+  Animated,
   View,
   Pressable,
   StyleSheet,
@@ -14,6 +16,7 @@ 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,
@@ -34,11 +37,23 @@ 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';
 
 const CustomMessageContainer = styled.View<{ isUser: boolean; reply?: number }>`
@@ -141,6 +156,20 @@ const CustomTimestampRow = styled.View<{media: boolean}>`
   padding-right: ${({media}) => media ? '10px': 0};
 `;
 
+const clockCache = new Map<string, string>();
+const formatClock = (date: string | Date): string => {
+  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: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
@@ -149,6 +178,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // 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 },
@@ -207,7 +237,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // (which may carry senderFirstName/senderLastName from the wire) only when
   // usersSet has never seen this sender.
   const senderDisplayName = senderEntry
-    ? `${senderEntry.firstName ?? ''} ${senderEntry.lastName ?? ''}`.trim() ||
+    ? composeName(senderEntry.firstName, senderEntry.lastName) ||
       senderEntry.name ||
       senderLocal
     : message.user?.name || senderLocal || 'Unknown';
@@ -216,16 +246,23 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // ends at 50 characters of hex. Captioning a bubble with that tells the
   // reader strictly less than showing nothing.
   const hasRealSenderName = !isUnresolvedSenderId(senderDisplayName);
+  const fileToken = useFileToken();
+  const [avatarFailed, setAvatarFailed] = useState<string | null>(null);
+  const rawProfileImage = String(
+    senderEntry?.profileImage ||
+      message.user?.profileImage ||
+      (message.user as any)?.photoURL ||
+      ''
+  ).trim();
   const senderProfileImage =
-    senderEntry?.profileImage || message.user?.profileImage || '';
+    rawProfileImage && rawProfileImage !== 'none' && rawProfileImage !== avatarFailed
+      ? appendFileToken(rawProfileImage, fileToken)
+      : '';
   const { idSet, failedIdSet } = useMessageHeapState();
   const { retryMessage } = useSendMessage();
 
   const [isPressed, setIsPressed] = useState(false);
-
-  if (__DEV__ && message.id && !(globalThis as any).__loggedMsg?.[message.id]) {
-    ((globalThis as any).__loggedMsg ||= {})[message.id] = true;
-  }
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
   const [contextMenuPosition, setContextMenuPosition] = useState<{
     left: number;
@@ -243,15 +280,20 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     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 })
+        setActiveMessage({
+          id: parent.id,
+          chatJID: parent.roomJid || message.roomJid,
+        })
       );
-
       return setIsPressed(false);
     }
 
@@ -290,37 +332,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // };
 
   const handleReactionMessage = (emoji: string) => {
-    if (!message.reaction) {
-      return client?.sendMessageReactionStanza(
-        message.id,
-        message.roomJid,
-        [emoji],
-        `${user.firstName} ${user.lastName}` as any
-      );
-    }
-    if (
-      message.reaction &&
-      message.reaction[user.xmppUsername || ''] &&
-      message.reaction[user.xmppUsername || '']?.emoji.includes(emoji)
-    ) {
-      const filterEmoji = message.reaction[user.xmppUsername || '']?.emoji.filter(
-        (reaction: any) => reaction !== emoji
-      );
-
-      return client?.sendMessageReactionStanza(
-        message.id,
-        message.roomJid,
-        filterEmoji,
-        `${user.firstName} ${user.lastName}` as any
-      );
-    }
-
-    client?.sendMessageReactionStanza(
-      message.id,
-      message.roomJid,
-      [...(message.reaction[user.xmppUsername || '']?.emoji || []), emoji],
-      `${user.firstName} ${user.lastName}` as any
-    );
+    if (!reactionsEnabled(config) || config?.disableInteractions) {return;}
+    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
@@ -363,6 +381,38 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     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.
@@ -378,18 +428,29 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   );
   // 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 isUndecryptable =
+    message.undecryptable === 'true' && !message.isDeleted;
   const showInlineTranslation =
-    isAutoTranslate && translationDisplay.hasTranslation && !isUser;
+    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 =
@@ -408,12 +469,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           styles.customMessageContainer,
           {
             justifyContent: isUser ? 'flex-end' : 'flex-start',
-            marginBottom: !!message?.reply?.length || message?.reaction && !!Object.keys(message?.reaction)?.length
-             ? 20 : 0,
+            marginBottom: 0,
           },
-          isPressed
-            ? { transform: [{ scale: 1.05 }], paddingRight: 16 }
-            : undefined,
           // justify-content: ${({ isUser }) => (isUser ? "flex-end" : "flex-start")},
           // margin-bottom: ${(props) => !!props.reply && "20px"},
         ]}
@@ -429,18 +486,38 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             onPress={
               config?.disableProfilesInteractions
                 ? undefined
-                : () => handleUserAvatarClick(message.user)
+                : () =>
+                    handleUserAvatarClick({
+                      ...message.user,
+                      ...(senderEntry
+                        ? {
+                            firstName: senderEntry.firstName,
+                            lastName: senderEntry.lastName,
+                            profileImage: senderEntry.profileImage,
+                            description: senderEntry.description,
+                          }
+                        : {}),
+                      name: hasRealSenderName ? senderDisplayName : '',
+                    } as IUser)
             }
             disabled={!!config?.disableProfilesInteractions}
             accessible={!config?.disableProfilesInteractions}
           >
             {senderProfileImage ? (
-              <CustomMessagePhoto source={{ uri: senderProfileImage }} />
+              <CustomMessagePhoto
+                testID="message-sender-avatar"
+                source={{ uri: senderProfileImage }}
+                onError={() => {
+                  if (isSecureFileUrl(rawProfileImage)) {requestFileTokenRecovery();}
+                  setAvatarFailed(rawProfileImage);
+                }}
+              />
             ) : (
               <Avatar username={senderDisplayName} />
             )}
           </CustomMessagePhotoContainer>
         )}
+        <GestureDetector gesture={longPress}>
         <Pressable
           // The Pressable fills the row's content area, so the bubble
           // inside must be aligned to the sender's side — otherwise it
@@ -462,13 +539,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           // 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}
         >
+          <Animated.View style={{ transform: [{ scale: lift }] }}>
           <CustomMessageBubble
             {...({ ref: bubbleRef, collapsable: false } as any)}
             isUser={isUser}
@@ -488,11 +560,12 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 {senderDisplayName}
               </CustomUserName>
             )}
-            {!isReply && message.mainMessage && (
+            {!isReply && !!replyRef?.text && (
               <MessageReply
                 handleReplyMessage={handleReplyMessage}
                 isUser={isUser}
-                text={JSON.parse(message.mainMessage).text}
+                text={replyRef.text}
+                userName={replyRef.userName}
                 color={theme.primary}
               />
             )}
@@ -509,6 +582,26 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
               <>
                 {message.isDeleted && message.id !== 'delimiter-new' ? (
                   <DeletedMessage />
+                ) : isUndecryptable ? (
+                  <View style={styles.undecryptable}>
+                    <LockIcon
+                      width={15}
+                      height={15}
+                      color={theme.textSecondary}
+                    />
+                    <Text
+                      style={[
+                        styles.undecryptableText,
+                        themedStyles.muted,
+                        {
+                          fontSize:
+                            config?.typography?.messageText?.fontSize ?? 15,
+                        },
+                      ]}
+                    >
+                      {t(placeholderKey(message.e2eeError))}
+                    </Text>
+                  </View>
                 ) : (
                   <CustomMessageText
                     isUser={isUser}
@@ -537,6 +630,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 renders the translation inline in the body above). Never on
                 the reader's own messages. */}
             {!isUser &&
+              !isUndecryptable &&
               isTranslatesEnabled &&
               effectiveTranslateMode === 'manual' && (
                 <MessageTranslate
@@ -566,40 +660,60 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
               {message?.isEdited && !message?.isDeleted && (
                 <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
               )}
+              {message?.unencrypted && !message?.isDeleted && (
+                <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'))
+                  }
+                >
+                  <LockOffIcon width={13} height={13} color={theme.danger} />
+                </Pressable>
+              )}
               <Text style={[styles.timestampText, themedStyles.muted]}>
-                {new Date(message.date).toLocaleTimeString([], {
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
+                {timeLabel}
               </Text>
               {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
                 <DoubleTick />
               )}
             </CustomTimestampRow>
 
-          {message?.reply?.length && message?.reply?.length > 0 ? (
-              <BottomReplyContainer
-                isUser={isUser}
-                onClick={handleReplyMessage}
-                reply={message?.reply}
-              />
-            ) : (
-              <View />
-            )}
-
-          <MessageFooter isUser={isUser}>
-
-            {message.reaction && !config?.disableReactions && (
-              <MessageReaction
-                reaction={message.reaction}
-                changeReaction={handleReactionMessage}
-                color={theme.primary}
-                userName={`${user.firstName} ${user.lastName}`}
-              />
-            )}
-          </MessageFooter>
           </CustomMessageBubble>
+          {/* One row on the bubble's bottom edge: the thread pill (as on
+              web) and the reaction chips side by side. */}
+          {((!isReply && (message?.reply?.length || 0) > 0) ||
+            (!!message.reaction && reactionsEnabled(config))) && (
+            <View
+              style={[
+                styles.reactionRow,
+                isUser ? styles.reactionRowUser : styles.reactionRowOther,
+              ]}
+            >
+              {!isReply && (message?.reply?.length || 0) > 0 && (
+                <BottomReplyContainer
+                  isUser={isUser}
+                  onClick={handleReplyMessage}
+                  reply={message.reply!}
+                />
+              )}
+              {message.reaction && reactionsEnabled(config) && (
+                <MessageReaction
+                  reaction={message.reaction}
+                  changeReaction={handleReactionMessage}
+                  color={theme.primary}
+                  userName={`${user.firstName || ''} ${user.lastName || ''}`.trim()}
+                  interactive={!config?.disableInteractions}
+                />
+              )}
+            </View>
+          )}
+          </Animated.View>
         </Pressable>
+        </GestureDetector>
       </View>
       {!config?.disableInteractions && isPressed && (
         <MessageInteractions
@@ -612,13 +726,22 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           handleDeleteMessage={handleDeleteMessage}
           handleEditMessage={handleEditMessage}
           handleReactionMessage={handleReactionMessage}
+          onOpenEmojiPicker={() => setEmojiPickerOpen(true)}
+        />
+      )}
+      {emojiPickerOpen && (
+        <EmojiPickerSheet
+          visible
+          onClose={() => setEmojiPickerOpen(false)}
+          onPick={handleReactionMessage}
         />
       )}
     </View>
   );
 };
 
-export { Message };
+const MemoMessage = React.memo(Message);
+export { MemoMessage as Message };
 
 const styles = StyleSheet.create({
   customMessageContainer: {
@@ -627,6 +750,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',
@@ -659,6 +798,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,