@ethora/chat-component-rn 26.8.6 → 26.8.7

package/src/components/MainComponents/ChatHeader.tsx

@@ -13,7 +13,7 @@ import RoomList from './RoomList';
 import { IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from './ProfileImagePlaceholder';
 import Button from '../styled/Button';
-import { BackIcon, BurgerMenuIcon } from '../../assets/icons';
+import { BackIcon, BurgerMenuIcon, LockIcon } from '../../assets/icons';
 import { CallButtons } from '../VideoCalls/CallButtons';
 import { LanguageSelectorButton } from './LanguageSelectorButton';
 import { useDispatch, useSelector, useStore } from 'react-redux';
@@ -178,14 +178,27 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               }
             />
             <ChatContainerHeaderInfo>
-              <ChatContainerHeaderLabel
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                fontSize={config?.typography?.headerTitle?.fontSize}
-                fontWeight={config?.typography?.headerTitle?.fontWeight as any}
-              >
-              {currentRoom?.title || currentRoom?.name}
-              </ChatContainerHeaderLabel>
+              <View style={styles.titleRow}>
+                <ChatContainerHeaderLabel
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  fontSize={config?.typography?.headerTitle?.fontSize}
+                  fontWeight={config?.typography?.headerTitle?.fontWeight as any}
+                  style={styles.title}
+                >
+                  {currentRoom?.title || currentRoom?.name}
+                </ChatContainerHeaderLabel>
+                {currentRoom?.e2ee && (
+                  <View
+                    accessible
+                    accessibilityRole="image"
+                    accessibilityLabel={t('e2ee.roomEncrypted')}
+                    testID="header-e2ee-lock"
+                  >
+                    <LockIcon width={15} height={15} color={theme.textSecondary} />
+                  </View>
+                )}
+              </View>
               <View>
                 {composing ? (
                   <Composing usersTyping={currentRoom?.composingList} />
@@ -233,6 +246,14 @@ const styles = StyleSheet.create({
     color: '#8C8C8C',
     fontSize: 14,
   },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  title: {
+    flexShrink: 1,
+  },
   menuButton: {
     padding: 8,
     borderRadius: 16,

package/src/components/MainComponents/ChatRoom.tsx

@@ -21,6 +21,9 @@ import ChatHeader from './ChatHeader';
 import NoMessagesPlaceholder from './NoMessagesPlaceholder';
 import NewChatModal from '../Modals/NewChatModal/NewChatModal';
 import { EditWrapper } from './EditWrapper';
+import EncryptedSendNotice from './EncryptedSendNotice';
+import { MAX_SEAL_BYTES } from '../../e2ee/limits';
+import { loadRoomMembers } from '../../networking/api-requests/rooms.api';
 import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getChatBackgroundColor } from '../../helpers/getChatBackground';
@@ -122,6 +125,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       (state: RootState) => state.rooms.isLoading,
     );
     const loading = !!activeRoom?.isLoading;
+    const e2eeRoom = !!activeRoom?.e2ee;
+    const e2eeOn = storeConfig?.e2ee?.enabled === true;
+    const maxMediaBytes = e2eeRoom && e2eeOn ? MAX_SEAL_BYTES : undefined;
     const roomMessages = activeRoom?.messages || EMPTY_MESSAGES;
     const {
       sendMessage: sendMs,
@@ -276,6 +282,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       lastBoundarySentRef.current = null;
       dispatch(setReadBoundary({ jid: activeRoomJID, ts: null }));
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
+      void loadRoomMembers(activeRoomJID);
       setIsLoadingMore(false);
       return () => {
         const state = store.getState();
@@ -592,7 +599,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
             <EditWrapper text={editAction.text || ''} onClose={onCloseEdit} />
           )}
           <InputDockTag {...inputDockProps}>
-            {CustomInputComponent ? (
+            {e2eeRoom && !e2eeOn && !editAction?.isEdit ? (
+              <EncryptedSendNotice />
+            ) : CustomInputComponent ? (
               <CustomInputComponent
                 sendMessage={
                   editAction && editAction.isEdit ? sendEditMessage : sendMessage
@@ -615,6 +624,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 }
                 sendMedia={sendMedia}
                 config={configWithEventHandlers}
+                maxMediaBytes={maxMediaBytes}
                 isLoading={loading}
                 onFocus={sendStartComposing}
                 onBlur={sendEndComposing}

package/src/components/MainComponents/EncryptedSendNotice.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { LockIcon } from '../../assets/icons';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+
+const EncryptedSendNotice: React.FC = () => {
+  const theme = useTheme();
+  const t = useT();
+  return (
+    <View style={styles.notice} testID="e2ee-send-notice">
+      <LockIcon width={18} height={18} color={theme.textSecondary} />
+      <Text style={[styles.text, { color: theme.textSecondary }]}>
+        {t('e2ee.sendUnavailable')}
+      </Text>
+    </View>
+  );
+};
+
+export default EncryptedSendNotice;
+
+const styles = StyleSheet.create({
+  notice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  text: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 19,
+  },
+});

package/src/components/MainComponents/EncryptionCard.tsx

@@ -0,0 +1,287 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Platform,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { LockIcon } from '../../assets/icons';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import { useToast } from '../../context/ToastContext';
+import { omemoReady, type DeviceInfo, type Trust } from '../../e2ee';
+
+interface EncryptionCardProps {
+  account?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+type Loaded =
+  | { state: 'loading' }
+  | { state: 'unavailable' }
+  | { state: 'ready'; jid: string; own: boolean; devices: DeviceInfo[] };
+
+const MONO = Platform.select({ ios: 'Menlo', default: 'monospace' });
+
+const twoLines = (fingerprint: string): string => {
+  const groups = fingerprint.split(' ');
+  const half = Math.ceil(groups.length / 2);
+  return `${groups.slice(0, half).join(' ')}\n${groups.slice(half).join(' ')}`;
+};
+
+const EncryptionCard: React.FC<EncryptionCardProps> = ({ account, style, testID }) => {
+  const theme = useTheme();
+  const t = useT();
+  const { showToast } = useToast();
+  const [loaded, setLoaded] = useState<Loaded>({ state: 'loading' });
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  const load = useCallback(async () => {
+    try {
+      const device = await omemoReady();
+      if (!device) {
+        if (mounted.current) {setLoaded({ state: 'unavailable' });}
+        return;
+      }
+      const domain = device.jid.split('@')[1] || '';
+      const local = String(account || '').split('@')[0]!.toLowerCase();
+      const jid = local ? `${local}@${domain}` : device.jid;
+      const devices = await device.devices(jid);
+      if (mounted.current) {
+        setLoaded({ state: 'ready', jid, own: jid === device.jid, devices });
+      }
+    } catch (error) {
+      console.warn('[e2ee] could not list devices', error);
+      if (mounted.current) {setLoaded({ state: 'unavailable' });}
+    }
+  }, [account]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const copy = useCallback(
+    async (fingerprint: string) => {
+      try {
+        const Clipboard = require('expo-clipboard');
+        await Clipboard.setStringAsync(fingerprint);
+        showToast({
+          id: Date.now().toString(),
+          title: t('e2ee.devices.title'),
+          message: t('e2ee.devices.copied'),
+          type: 'success',
+        });
+      } catch (error) {
+        console.warn('[e2ee] could not copy the fingerprint', error);
+      }
+    },
+    [showToast, t]
+  );
+
+  const setTrust = useCallback(
+    async (jid: string, id: number, trust: Trust) => {
+      try {
+        const device = await omemoReady();
+        await device?.setTrust(jid, id, trust);
+      } catch (error) {
+        console.warn('[e2ee] could not change trust', error);
+      }
+      void load();
+    },
+    [load]
+  );
+
+  const askTrust = useCallback(
+    (jid: string, device: DeviceInfo) => {
+      const choices: Array<{ trust: Trust; label: string }> = [
+        { trust: 'verified', label: t('e2ee.trust.verify') },
+        { trust: 'untrusted', label: t('e2ee.trust.distrust') },
+        { trust: 'blind', label: t('e2ee.trust.reset') },
+      ];
+      Alert.alert(
+        t('e2ee.trust.prompt', { id: device.id }),
+        `${device.fingerprint}\n\n${t('e2ee.devices.hint')}`,
+        [
+          ...choices
+            .filter((choice) => choice.trust !== device.trust)
+            .map((choice) => ({
+              text: choice.label,
+              style: choice.trust === 'untrusted' ? ('destructive' as const) : ('default' as const),
+              onPress: () => void setTrust(jid, device.id, choice.trust),
+            })),
+          { text: t('action.cancel'), style: 'cancel' as const },
+        ]
+      );
+    },
+    [setTrust, t]
+  );
+
+  const trustLabel: Record<Trust, string> = {
+    verified: t('e2ee.trust.verified'),
+    blind: t('e2ee.trust.blind'),
+    untrusted: t('e2ee.trust.untrusted'),
+  };
+  const trustColor: Record<Trust, string> = {
+    verified: theme.primary,
+    blind: theme.textSecondary,
+    untrusted: theme.danger,
+  };
+
+  const row = (jid: string, device: DeviceInfo, own: boolean) => {
+    const mine = device.trust === 'own';
+    return (
+      <Pressable
+        key={device.id}
+        testID={`e2ee-device-${device.id}`}
+        accessibilityRole="button"
+        onPress={() => (own ? void copy(device.fingerprint) : askTrust(jid, device))}
+        onLongPress={() => void copy(device.fingerprint)}
+        style={[styles.row, { borderTopColor: theme.border }]}
+      >
+        <View style={styles.rowHead}>
+          <Text style={[styles.device, { color: theme.text }]} numberOfLines={1}>
+            {mine
+              ? t('e2ee.devices.thisDevice')
+              : t('e2ee.trust.prompt', { id: device.id })}
+            {device.label ? ` · ${device.label}` : ''}
+          </Text>
+          {!mine && !own && (
+            <Text
+              testID={`e2ee-trust-${device.id}`}
+              style={[styles.trust, { color: trustColor[device.trust as Trust] }]}
+            >
+              {trustLabel[device.trust as Trust]}
+            </Text>
+          )}
+        </View>
+        <Text style={[styles.fingerprint, { color: theme.textSecondary }]}>
+          {twoLines(device.fingerprint)}
+        </Text>
+      </Pressable>
+    );
+  };
+
+  let body: React.ReactNode;
+  if (loaded.state === 'loading') {
+    body = (
+      <View style={styles.status}>
+        <ActivityIndicator size="small" color={theme.textSecondary} />
+        <Text style={[styles.note, { color: theme.textSecondary }]}>
+          {t('e2ee.devices.loading')}
+        </Text>
+      </View>
+    );
+  } else if (loaded.state === 'unavailable') {
+    body = (
+      <Text style={[styles.note, { color: theme.textSecondary }]}>
+        {t('e2ee.devices.unavailable')}
+      </Text>
+    );
+  } else {
+    const { jid, own, devices } = loaded;
+    const ordered = [
+      ...devices.filter((d) => d.trust === 'own'),
+      ...devices.filter((d) => d.trust !== 'own'),
+    ];
+    const others = ordered.filter((d) => d.trust !== 'own');
+    body = (
+      <>
+        {ordered.map((device) => row(jid, device, own))}
+        {(own ? others.length === 0 : ordered.length === 0) && (
+          <Text style={[styles.note, { color: theme.textSecondary }]}>
+            {t(own ? 'e2ee.devices.noneOwn' : 'e2ee.devices.none')}
+          </Text>
+        )}
+        {!own && ordered.length > 0 && (
+          <Text style={[styles.hint, { color: theme.textMuted }]}>
+            {t('e2ee.devices.hint')}
+          </Text>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <View style={[style, styles.card]} testID={testID || 'e2ee-devices'}>
+      <View style={styles.head}>
+        <LockIcon width={18} height={18} color={theme.textSecondary} />
+        <Text style={[styles.title, { color: theme.text }]}>
+          {t('e2ee.devices.title')}
+        </Text>
+      </View>
+      {body}
+    </View>
+  );
+};
+
+export default EncryptionCard;
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 6,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  status: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 6,
+  },
+  note: {
+    fontSize: 14,
+    lineHeight: 19,
+    paddingVertical: 4,
+  },
+  row: {
+    paddingVertical: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    gap: 4,
+  },
+  rowHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  device: {
+    flexShrink: 1,
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  trust: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  fingerprint: {
+    fontFamily: MONO,
+    fontSize: 12,
+    lineHeight: 17,
+  },
+  hint: {
+    marginTop: 6,
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});

package/src/components/MainComponents/MediaMessage.tsx

@@ -18,6 +18,7 @@ import { defaultMediaDims } from '../../helpers/mediaDimensions';
 import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
 import { useTheme } from '../../hooks/useTheme';
+import SealedAttachment from './SealedAttachment';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -167,6 +168,10 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
   const location = appendFileToken(rawLocation, fileToken);
   const messageText = appendFileToken(rawMessageText, fileToken);
 
+  if (message?.clientEncrypted === 'true') {
+    return <SealedAttachment message={message} isUser={isUser} />;
+  }
+
   if (mimeType) {
     const displayName = getDisplayFileName({
       originalName: (message as any)?.originalName,

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -22,6 +22,7 @@ import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
 import {installPushTokenHook} from '../../services/pushRegistration';
+import {setE2eeEnabled} from '../../e2ee';
 
 // Mount-time, dev-only — wire a global unhandled-promise-rejection
 // tracker so any future leak surfaces with a real stack trace in Metro
@@ -57,6 +58,10 @@ const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
     if (!config) {return;}
     dispatch(setConfig(config));
   }, [config, dispatch]);
+  const e2eeEnabled = config?.e2ee?.enabled === true;
+  React.useEffect(() => {
+    setE2eeEnabled(e2eeEnabled);
+  }, [e2eeEnabled]);
   return null;
 };