@ethora/chat-component-rn 26.8.6 → 26.8.7

package/src/components/MainComponents/SealedAttachment.tsx

@@ -0,0 +1,251 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { LockIcon } from '../../assets/icons';
+import FileDownload from '../styled/UnsupportedType';
+import CustomMessageImage from '../styled/MessageImage';
+import CustomMessageVideo from '../styled/VideoMessage';
+import AudioMessage from '../styled/AudioMessage';
+import {
+  BackgroundFile,
+  FileInformation,
+  FileName,
+  FileSize,
+  FileSizeContainer,
+  UnsupportedContainer,
+} from '../styled/StyledInputComponents/MediaComponents';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { IMessage } from '../../types/types';
+import { withFileToken } from '../../helpers/secureFileUrl';
+import type { OpenedFile } from '../../e2ee/sealedFiles';
+
+const sealedFiles = () =>
+  require('../../e2ee/sealedFiles') as typeof import('../../e2ee/sealedFiles');
+
+interface SealedRef {
+  location: string;
+  size?: string | number;
+}
+
+export const sealedAttachmentsOf = (message?: IMessage | null): SealedRef[] => {
+  if (!message) {return [];}
+  let raw: unknown = (message as any).attachments;
+  if (typeof raw === 'string') {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      raw = undefined;
+    }
+  }
+  if (Array.isArray(raw) && raw.length > 0) {
+    return raw
+      .filter((item) => item && typeof item.location === 'string' && item.location)
+      .map((item) => ({ location: item.location, size: item.size }));
+  }
+  return message.location
+    ? [{ location: message.location, size: message.size }]
+    : [];
+};
+
+const formatBytes = (value?: string | number): string => {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) {return '';}
+  if (bytes < 1024) {return `${bytes} B`;}
+  if (bytes < 1024 * 1024) {return `${(bytes / 1024).toFixed(0)} KB`;}
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+type CardState = 'idle' | 'working' | 'failed';
+
+const SealedItem: React.FC<{
+  attachment: SealedRef;
+  keyMaterial?: string;
+  isUser: boolean;
+}> = ({ attachment, keyMaterial, isUser }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { config } = useChatSettingState();
+  const [state, setState] = useState<CardState>('idle');
+  const [progress, setProgress] = useState(0);
+  const [opened, setOpened] = useState<OpenedFile | null>(null);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  const { location } = attachment;
+
+  useEffect(() => {
+    if (!keyMaterial || !location) {return;}
+    let active = true;
+    sealedFiles()
+      .findOpened(location)
+      .then((found) => {
+        if (active && found) {setOpened(found);}
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [keyMaterial, location]);
+
+  const handlePress = useCallback(async () => {
+    if (opened || !keyMaterial || !location || state === 'working') {return;}
+    setState('working');
+    setProgress(0);
+    try {
+      const file = await sealedFiles().openSealedAttachment(
+        location,
+        withFileToken(location),
+        keyMaterial,
+        (fraction) => {
+          if (mounted.current) {setProgress(fraction);}
+        }
+      );
+      if (!mounted.current) {return;}
+      setOpened(file);
+      setState('idle');
+    } catch (error) {
+      console.warn('sealed attachment could not be opened', error);
+      if (mounted.current) {setState('failed');}
+    }
+  }, [keyMaterial, location, opened, state]);
+
+  if (opened) {
+    if (opened.mimetype.startsWith('image/')) {
+      return (
+        <View testID="sealed-attachment-image">
+          <CustomMessageImage
+            fileName={opened.name}
+            originalName={opened.name}
+            fileURL={opened.uri}
+            locationPreview={opened.uri}
+            mimetype={opened.mimetype}
+          />
+        </View>
+      );
+    }
+    if (opened.mimetype.startsWith('video/')) {
+      return (
+        <CustomMessageVideo
+          fileName={opened.name}
+          originalName={opened.name}
+          fileURL={opened.uri}
+          mimetype={opened.mimetype}
+        />
+      );
+    }
+    if (opened.mimetype.startsWith('audio/')) {
+      return (
+        <AudioMessage
+          src={opened.uri}
+          mimeType={opened.mimetype}
+          fileName={opened.name}
+          originalName={opened.name}
+        />
+      );
+    }
+    return (
+      <View testID="sealed-attachment">
+        <FileDownload
+          fileURL={opened.uri}
+          fileName={opened.name}
+          originalName={opened.name}
+          mimetype={opened.mimetype}
+          isUser={isUser}
+        />
+      </View>
+    );
+  }
+
+  const canOpen = !!keyMaterial && !!location;
+  const working = state === 'working';
+  const note = !canOpen
+    ? t(
+        config?.e2ee?.enabled === true
+          ? 'media.sealedUnavailable'
+          : 'media.sealedUnsupported'
+      )
+    : working
+      ? `${t('media.sealedDownloading')} ${Math.round(progress * 100)}%`
+      : state === 'failed'
+        ? t('media.sealedDownloadFailed')
+        : formatBytes(attachment.size) || t('media.sealedDownload');
+
+  return (
+    <UnsupportedContainer
+      isUser={isUser}
+      onPress={handlePress}
+      disabled={!canOpen || working}
+      activeOpacity={canOpen && !working ? 0.7 : 1}
+      testID="sealed-attachment"
+      accessibilityRole="button"
+      accessibilityLabel={t(canOpen ? 'media.sealedDownload' : 'media.sealedFile')}
+    >
+      <BackgroundFile>
+        {working ? (
+          <ActivityIndicator size="small" color={theme.textSecondary} />
+        ) : (
+          <LockIcon width={26} height={26} color={theme.textSecondary} />
+        )}
+      </BackgroundFile>
+      <FileInformation>
+        <FileName
+          numberOfLines={1}
+          isUser={isUser}
+          colorIsUser={config?.colors?.primary}
+          colorUsers={config?.colors?.secondary}
+        >
+          {t('media.sealedFile')}
+        </FileName>
+        <FileSizeContainer style={styles.note}>
+          <FileSize
+            numberOfLines={2}
+            style={state === 'failed' && canOpen ? { color: theme.danger } : undefined}
+          >
+            {note}
+          </FileSize>
+        </FileSizeContainer>
+      </FileInformation>
+    </UnsupportedContainer>
+  );
+};
+
+const SealedAttachment: React.FC<{ message?: IMessage; isUser: boolean }> = ({
+  message,
+  isUser,
+}) => {
+  const attachments = sealedAttachmentsOf(message);
+  const keys = message?.e2eeKeys;
+  if (attachments.length === 0) {
+    return <SealedItem attachment={{ location: '' }} isUser={isUser} />;
+  }
+  return (
+    <View style={styles.stack}>
+      {attachments.map((attachment, index) => (
+        <SealedItem
+          key={attachment.location || index}
+          attachment={attachment}
+          keyMaterial={keys?.[index]}
+          isUser={isUser}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default SealedAttachment;
+
+const styles = StyleSheet.create({
+  stack: {
+    gap: 8,
+  },
+  note: {
+    flexShrink: 1,
+    borderRadius: 10,
+  },
+});

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -1,4 +1,5 @@
 import { FC, useMemo } from 'react';
+import { composeName } from '../../helpers/displayName';
 import { IReply, IUser } from '../../types/types';
 import { Avatar } from './Avatar';
 import { styled } from 'styled-components/native';
@@ -68,7 +69,7 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
     const raw = String(u?.id || '');
     const entry = usersSet?.[raw.split('@')[0]] || usersSet?.[raw];
     const full = entry
-      ? `${entry.firstName || ''} ${entry.lastName || ''}`.trim() || entry.name
+      ? composeName(entry.firstName, entry.lastName) || entry.name
       : '';
     return full || u?.name || '';
   };

package/src/components/MessageBubble/Message.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
   Animated,
   View,
   Pressable,
@@ -36,7 +37,16 @@ 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';
@@ -168,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 },
@@ -226,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';
@@ -235,8 +246,18 @@ 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();
 
@@ -407,8 +428,13 @@ 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;
@@ -460,13 +486,32 @@ 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} />
             )}
@@ -537,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}
@@ -565,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
@@ -594,6 +660,20 @@ 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]}>
                 {timeLabel}
               </Text>
@@ -718,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,

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { canEditMessage } from '../../e2ee';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -362,9 +363,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
           </MenuItem>
           {isUser && (
             <>
-              {/* Edit only for non-media messages (upstream guard) +
-                  consistent label styling (menuText). */}
-              {message?.isMediafile !== 'true' && (
+              {message?.isMediafile !== 'true' && canEditMessage(message) && (
                 <>
                   <Delimeter />
                   <MenuItem onPress={handleEditMessage}>

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -1,5 +1,6 @@
 /** @format */
 
+import { composeName } from '../../../helpers/displayName';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
@@ -268,7 +269,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const confirmRemoveMember = (user: RoomMember) => {
     Alert.alert(
       t('modal.chatProfile.removeMember'),
-      `${user.firstName} ${user.lastName}`.trim(),
+      composeName(user.firstName, user.lastName),
       [
         { text: t('action.cancel'), style: 'cancel' },
         {
@@ -287,7 +288,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         id: user._id,
         firstName: user.firstName,
         lastName: user.lastName,
-        name: `${user.firstName} ${user.lastName}`,
+        name: composeName(user.firstName, user.lastName),
+        profileImage: user.profileImage,
         userJID: user?.xmppUsername,
         token: '',
         refreshToken: '',
@@ -488,7 +490,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const query = memberQuery.trim().toLowerCase();
   const visibleMembers = query
     ? members.filter((user) =>
-        `${user.firstName ?? ''} ${user.lastName ?? ''}`
+        composeName(user.firstName, user.lastName)
           .toLowerCase()
           .includes(query)
       )
@@ -648,7 +650,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                         disabled={!!config?.disableChatInfo?.disableMemberTap}
                       >
                         <ProfileImagePlaceholder
-                          name={`${user.firstName} ${user.lastName}`}
+                          name={composeName(user.firstName, user.lastName)}
+                          icon={appendFileToken(user.profileImage, fileToken) || null}
                           size={40}
                         />
                         <View style={styles.memberText}>