@ethora/chat-component-rn 26.9.0 → 26.10.0

package/src/components/MessageBubble/Message.tsx

@@ -1,7 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 import {
   Alert,
-  Animated,
   View,
   Pressable,
   StyleSheet,
@@ -13,6 +18,7 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { Avatar } from './Avatar';
+import { BubbleHighlight } from './BubbleHighlight';
 import MessageInteractions from './MessageInteractions';
 import { BottomReplyContainer } from './BottomReplyContainer';
 import { MessageReply } from './MessageReply';
@@ -39,7 +45,6 @@ import { chatTextStyle } from '../../helpers/typography';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
 import { DoubleTick, LockIcon, LockOffIcon } from '../../assets/icons';
 import { useT } from '../../i18n/useT';
-import { composeName } from '../../helpers/displayName';
 import { useFileToken } from '../../hooks/useFileToken';
 import {
   appendFileToken,
@@ -55,6 +60,15 @@ import { reactionsEnabled } from '../../helpers/reactionsConfig';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { hapticTap } from '../../helpers/haptics';
 import { useTheme } from '../../hooks/useTheme';
+import { isOpaqueXmppUserId } from '../../helpers/xmppIdShape';
+import {
+  getUserLookupStatus,
+  requestUsers,
+  subscribeUserResolver,
+} from '../../helpers/userResolver';
+
+// Stable-width stand-in for the sender name while its lookup is pending.
+const SENDER_NAME_PLACEHOLDER = '\u2026';
 
 const CustomMessageContainer = styled.View<{ isUser: boolean; reply?: number }>`
   flex-direction: row;
@@ -222,25 +236,73 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // avatars: a cache-restored message carries no profileImage at all (see
   // PERSISTED_MESSAGE_USER_FIELDS), so reading only the message-level copy
   // leaves a blank initials circle for senders whose name resolved fine.
-  const usersSet = useSelector(
-    (state: RootState) => state.rooms.usersSet
-  ) as Record<string, any> | undefined;
   const senderRawId = String(message.user?.id || '');
   const senderLocal = senderRawId.split('@')[0];
-  const senderEntry = usersSet?.[senderLocal] || usersSet?.[senderRawId];
-  // usersSet FIRST (mirrors the web SDK's Message.tsx): a message stored
-  // before usersSet hydrated carries the raw JID localpart as its
-  // `user.name`, so preferring `message.user.name` (as resolveSenderDisplayName
-  // does) would pin that JID on screen forever even after the real name is
-  // known. Reading usersSet first lets the name self-heal the moment the
-  // 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
-    ? composeName(senderEntry.firstName, senderEntry.lastName) ||
-      senderEntry.name ||
-      senderLocal
-    : message.user?.name || senderLocal || 'Unknown';
+  // Granular: re-render only when THIS sender's entry changes, not on every
+  // usersSet update.
+  const senderEntry = useSelector(
+    (state: RootState) => {
+      const set = state.rooms.usersSet as Record<string, any> | undefined;
+      return set?.[senderLocal] || set?.[senderRawId];
+    }
+  ) as Record<string, any> | undefined;
+  // A usersSet hit with blank names is worth no more than a miss.
+  const usersSetDisplayName = senderEntry
+    ? `${senderEntry.firstName ?? ''} ${senderEntry.lastName ?? ''}`.trim() ||
+      String(senderEntry.name || '').trim()
+    : '';
+  // 'Deleted User' baked into message.user.name only means "not resolved at
+  // insert time" (the real answer is the lookup's 404 below), and a raw
+  // xmpp id is never a name.
+  const safeMessageName =
+    message.user?.name &&
+    message.user.name !== 'Deleted User' &&
+    !isOpaqueXmppUserId(message.user.name)
+      ? message.user.name
+      : '';
+  const safeSenderLocal = isOpaqueXmppUserId(senderLocal) ? '' : senderLocal;
+  // Ask the backend for a sender nobody has told us about (a big room ships
+  // only 30 members). The resolver debounces and de-duplicates.
+  useEffect(() => {
+    if (!senderEntry && senderLocal) requestUsers([senderLocal]);
+  }, [senderEntry, senderLocal]);
+  const lookupStatus = useSyncExternalStore(
+    subscribeUserResolver,
+    () => getUserLookupStatus(senderLocal),
+    () => 'pending' as const
+  );
+  // The sender's name stamped on the stanza's <data> by clients of this SDK.
+  // LAST resort only (older clients and backends): used once the lookup has
+  // finished without a name, and never written into usersSet. Insert-time
+  // enrichment may have baked it into message.user.name, so a message name
+  // equal to it counts as <data>, not as a member name.
+  const dataFull = String((message as any)?.fullName || '').trim();
+  const dataComposed =
+    dataFull ||
+    `${String((message as any)?.senderFirstName || '').trim()} ${String(
+      (message as any)?.senderLastName || ''
+    ).trim()}`.trim();
+  const trustedMessageName =
+    safeMessageName && safeMessageName !== dataComposed ? safeMessageName : '';
+  // Chain: usersSet (member or lookup result) > a name from a member/seed >
+  // muted placeholder while the lookup is pending > <data> name > readable
+  // id > Unknown user ('Deleted User' only when the backend said 404).
+  const senderNamePending =
+    !usersSetDisplayName && !trustedMessageName && lookupStatus === 'pending';
+  const unresolvedPlaceholder =
+    lookupStatus === 'notfound' && !dataComposed
+      ? 'Deleted User'
+      : t('user.unknown');
+  const senderDisplayName = senderNamePending
+    ? SENDER_NAME_PLACEHOLDER
+    : usersSetDisplayName ||
+      trustedMessageName ||
+      dataComposed ||
+      safeSenderLocal ||
+      unresolvedPlaceholder;
+  // The placeholder is a loading state, not a name: it must not seed the
+  // generic avatar's initials or a stale caption.
+  //
   // 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
@@ -402,17 +464,6 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     [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.
@@ -460,6 +511,172 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     if (isFailed) {retryMessage(message.id);}
   };
 
+  // The bubble, as a function: the list draws it in place, and the context
+  // menu draws a second copy over the dimmed chat (WhatsApp style) while
+  // the original steps aside.
+  const renderBubble = (preview: boolean) => (
+    <CustomMessageBubble
+      {...((preview
+        ? // The copy in the context menu: same look, full measured
+          // width (its box is the original's), never the measuring
+          // target.
+          { style: styles.previewBubble }
+        : {
+            ref: bubbleRef,
+            collapsable: false,
+            // Hidden while the menu shows its copy over the dim, so
+            // the message is not on screen twice.
+            style:
+              isPressed && contextMenuPosition
+                ? styles.hiddenBubble
+                : undefined,
+          }) as any)}
+      isUser={isUser}
+      deleted={message.isDeleted}
+      isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
+    >
+      {!isUser && hasRealSenderName && (
+        <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 as any}
+          style={senderNamePending ? styles.pendingName : undefined}
+        >
+          {senderDisplayName}
+        </CustomUserName>
+      )}
+      {!isReply && !!replyRef?.text && (
+        <MessageReply
+          handleReplyMessage={handleReplyMessage}
+          isUser={isUser}
+          text={replyRef.text}
+          userName={replyRef.userName}
+          color={theme.primary}
+        />
+      )}
+
+      {message?.isMediafile === 'true' && !message?.isDeleted ? (
+        <MediaMessage
+          mimeType={message.mimetype}
+          messageText={message.locationPreview}
+          location={message?.location}
+          message={message}
+          isUser={isUser}
+        />
+      ) : (
+        <>
+          {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}
+              fontSize={config?.typography?.messageText?.fontSize}
+              fontWeight={config?.typography?.messageText?.fontWeight as any}
+            >
+              {/* Auto mode: the parsed body IS the translation; wrap it
+                  so the original shows as a dimmed accent-bar quote
+                  above it. Plain body otherwise. */}
+              {showInlineTranslation ? (
+                <TranslatedMessageBody
+                  isUser={isUser}
+                  originalText={translationDisplay.originalText}
+                  accentColor={theme.primary}
+                >
+                  <Text>{messageText}</Text>
+                </TranslatedMessageBody>
+              ) : (
+                <Text>{messageText}</Text>
+              )}
+            </CustomMessageText>
+          )}
+        </>
+      )}
+      {/* Manual mode: a "Translate" link the reader taps (auto mode
+          renders the translation inline in the body above). Never on
+          the reader's own messages. */}
+      {!isUser &&
+        !isUndecryptable &&
+        isTranslatesEnabled &&
+        effectiveTranslateMode === 'manual' && (
+          <MessageTranslate
+            message={message}
+            config={config}
+            isUser={isUser}
+            readerLocale={readerLocale}
+          />
+        )}
+      {/* <View style={styles.timestampRow}> */}
+      <CustomTimestampRow media={message?.isMediafile === 'true'}>
+        {!config?.disableSentLogic && isUser && isPending && (
+          <Text style={[styles.timestampText, themedStyles.muted]}>
+            {t('message.sending')}
+          </Text>
+        )}
+        {!config?.disableSentLogic && isUser && isFailed && (
+          <Text
+            onPress={onRetryPress}
+            style={[styles.failedText, themedStyles.failed]}
+            accessibilityRole="button"
+            accessibilityLabel="Retry sending message"
+          >
+            {t('message.failedRetry')}
+          </Text>
+        )}
+        {message?.isEdited && !message?.isDeleted && (
+          <Text style={[styles.editedText, themedStyles.muted]}>{t('message.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]}>
+          {timeLabel}
+        </Text>
+        {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
+          <DoubleTick />
+        )}
+      </CustomTimestampRow>
+
+      {/* The jump-to-message ring: on the bubble in the list, not on the
+          context menu's copy of it. */}
+      {!preview && <BubbleHighlight messageId={String(message.id)} />}
+    </CustomMessageBubble>
+  );
+
   return (
     <View>
       {isPressed && <View style={styles.overlay} />}
@@ -497,7 +714,11 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                             description: senderEntry.description,
                           }
                         : {}),
-                      name: hasRealSenderName ? senderDisplayName : '',
+                      // The pending placeholder is not a name.
+                      name:
+                        hasRealSenderName && !senderNamePending
+                          ? senderDisplayName
+                          : '',
                     } as IUser)
             }
             disabled={!!config?.disableProfilesInteractions}
@@ -513,7 +734,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 }}
               />
             ) : (
-              <Avatar username={senderDisplayName} />
+              <Avatar username={senderNamePending ? '' : senderDisplayName} />
             )}
           </CustomMessagePhotoContainer>
         )}
@@ -540,149 +761,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           // long-press never triggers this dismiss.
           onPress={() => Keyboard.dismiss()}
         >
-          <Animated.View style={{ transform: [{ scale: lift }] }}>
-          <CustomMessageBubble
-            {...({ ref: bubbleRef, collapsable: false } as any)}
-            isUser={isUser}
-            deleted={message.isDeleted}
-            isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
-          >
-            {!isUser && hasRealSenderName && (
-              <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 as any}
-              >
-                {senderDisplayName}
-              </CustomUserName>
-            )}
-            {!isReply && !!replyRef?.text && (
-              <MessageReply
-                handleReplyMessage={handleReplyMessage}
-                isUser={isUser}
-                text={replyRef.text}
-                userName={replyRef.userName}
-                color={theme.primary}
-              />
-            )}
-
-            {message?.isMediafile === 'true' && !message?.isDeleted ? (
-              <MediaMessage
-                mimeType={message.mimetype}
-                messageText={message.locationPreview}
-                location={message?.location}
-                message={message}
-                isUser={isUser}
-              />
-            ) : (
-              <>
-                {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}
-                    fontSize={config?.typography?.messageText?.fontSize}
-                    fontWeight={config?.typography?.messageText?.fontWeight as any}
-                  >
-                    {/* Auto mode: the parsed body IS the translation; wrap it
-                        so the original shows as a dimmed accent-bar quote
-                        above it. Plain body otherwise. */}
-                    {showInlineTranslation ? (
-                      <TranslatedMessageBody
-                        isUser={isUser}
-                        originalText={translationDisplay.originalText}
-                        accentColor={theme.primary}
-                      >
-                        <Text>{messageText}</Text>
-                      </TranslatedMessageBody>
-                    ) : (
-                      <Text>{messageText}</Text>
-                    )}
-                  </CustomMessageText>
-                )}
-              </>
-            )}
-            {/* Manual mode: a "Translate" link the reader taps (auto mode
-                renders the translation inline in the body above). Never on
-                the reader's own messages. */}
-            {!isUser &&
-              !isUndecryptable &&
-              isTranslatesEnabled &&
-              effectiveTranslateMode === 'manual' && (
-                <MessageTranslate
-                  message={message}
-                  config={config}
-                  isUser={isUser}
-                  readerLocale={readerLocale}
-                />
-              )}
-            {/* <View style={styles.timestampRow}> */}
-            <CustomTimestampRow media={message?.isMediafile === 'true'}>
-              {!config?.disableSentLogic && isUser && isPending && (
-                <Text style={[styles.timestampText, themedStyles.muted]}>
-                  {t('message.sending')}
-                </Text>
-              )}
-              {!config?.disableSentLogic && isUser && isFailed && (
-                <Text
-                  onPress={onRetryPress}
-                  style={[styles.failedText, themedStyles.failed]}
-                  accessibilityRole="button"
-                  accessibilityLabel="Retry sending message"
-                >
-                  {t('message.failedRetry')}
-                </Text>
-              )}
-              {message?.isEdited && !message?.isDeleted && (
-                <Text style={[styles.editedText, themedStyles.muted]}>{t('message.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]}>
-                {timeLabel}
-              </Text>
-              {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
-                <DoubleTick />
-              )}
-            </CustomTimestampRow>
-
-          </CustomMessageBubble>
+          <View>
+          {renderBubble(false)}
           {/* 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) ||
@@ -711,7 +791,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
               )}
             </View>
           )}
-          </Animated.View>
+          </View>
         </Pressable>
         </GestureDetector>
       </View>
@@ -727,6 +807,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           handleEditMessage={handleEditMessage}
           handleReactionMessage={handleReactionMessage}
           onOpenEmojiPicker={() => setEmojiPickerOpen(true)}
+          preview={renderBubble(true)}
         />
       )}
       {emojiPickerOpen && (
@@ -744,6 +825,13 @@ const MemoMessage = React.memo(Message);
 export { MemoMessage as Message };
 
 const styles = StyleSheet.create({
+  previewBubble: {
+    maxWidth: '100%',
+  },
+  hiddenBubble: {
+    opacity: 0,
+  },
+  pendingName: { opacity: 0.5, minWidth: 14 },
   customMessageContainer: {
     flexDirection: 'row',
     padding: 10,