@ethora/chat-component-rn 26.8.5 → 26.8.7

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/MessageContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useMemo } from 'react';
+import React, { FC, Fragment, memo, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
@@ -6,9 +6,6 @@ import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
 import {
   Message,
-  MessageText,
-  MessageTimestamp,
-  UserName,
 } from '../styled/StyledComponents';
 import { View } from 'react-native';
 
@@ -35,7 +32,7 @@ interface MessageContainerProps {
   className?: string;
 }
 
-export const MessageContainer: FC<MessageContainerProps> = ({
+const MessageContainerImpl: FC<MessageContainerProps> = ({
   CustomMessage,
   CustomDaySeparator,
   CustomNewMessageLabel,
@@ -101,28 +98,23 @@ export const MessageContainer: FC<MessageContainerProps> = ({
           <DateLabel date={messageDate} colors={config?.colors} />
         )
       ) : null}
+
       <MessageComponent
         message={message}
         isUser={isUser}
         isReply={isReply}
         className={className}
       >
-        {!CustomMessage ? (
-          <>
-            <MessageTimestamp>
-              {messageDate.toLocaleTimeString()}
-            </MessageTimestamp>
-            <UserName>{message.user.name}: </UserName>
-            <MessageText>{message.body}</MessageText>
-          </>
-        ) : (
+        {CustomMessage ? (
           <MessageComponent
             message={message}
             isUser={isUser}
             isReply={isReply}
           />
-        )}
+        ) : null}
       </MessageComponent>
     </View>
   );
 };
+
+export const MessageContainer = memo(MessageContainerImpl);

package/src/components/MainComponents/MessageList.tsx

@@ -23,7 +23,8 @@ import { msgSortableMs } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
-import { useRoomState } from '../../hooks/useRoomState';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
@@ -67,6 +68,43 @@ interface MessageListProps<TMessage extends IMessage> {
   onReadBoundaryChange?: (boundaryTs: number | null) => void;
 }
 
+const mainIdCache = new WeakMap<object, string | null>();
+const mainMessageIdOf = (m: IMessage): string | null => {
+  if (!m?.mainMessage) {return null;}
+  const cached = mainIdCache.get(m);
+  if (cached !== undefined) {return cached;}
+  let id: string | null = null;
+  try {
+    const parsed = JSON.parse(m.mainMessage);
+    id = parsed?.id != null ? String(parsed.id) : null;
+  } catch {
+    id = null;
+  }
+  mainIdCache.set(m, id);
+  return id;
+};
+
+const sortKeyCache = new WeakMap<object, number>();
+const sortKeyOf = (m: IMessage): number => {
+  const cached = sortKeyCache.get(m);
+  if (cached !== undefined) {return cached;}
+  const key = new Date(m?.date as any).getTime() || 0;
+  sortKeyCache.set(m, key);
+  return key;
+};
+
+const dayKeyCache = new WeakMap<object, string>();
+const dayKeyOf = (m: IMessage): string => {
+  const cached = dayKeyCache.get(m);
+  if (cached !== undefined) {return cached;}
+  const key = new Date(m.date).toDateString();
+  dayKeyCache.set(m, key);
+  return key;
+};
+
+const keyExtractor = (item: IMessage) => String(item.id);
+const EMPTY_LIST: IMessage[] = [];
+
 const MessageList = <TMessage extends IMessage>({
   CustomMessage,
   CustomDaySeparator,
@@ -80,8 +118,12 @@ const MessageList = <TMessage extends IMessage>({
   activeMessage,
   onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
-  const { composing, messages, composingList } = useRoomState(roomJID)
-    .room! as IRoom;
+  const room = useSelector(
+    (state: RootState) => state.rooms.rooms?.[roomJID]
+  ) as IRoom | undefined;
+  const composing = room?.composing;
+  const composingList = room?.composingList;
+  const messages = room?.messages || EMPTY_LIST;
   const theme = useTheme();
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
@@ -107,17 +149,22 @@ const MessageList = <TMessage extends IMessage>({
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
   const addReplyMessages = useMemo(() => {
+    const repliesByParent = new Map<string, IMessage[]>();
+    for (const mess of messages) {
+      if (!mess?.mainMessage || mess.isDeleted) {continue;}
+      const parentId = mainMessageIdOf(mess);
+      if (!parentId) {continue;}
+      const list = repliesByParent.get(parentId);
+      if (list) {
+        list.push(mess);
+      } else {
+        repliesByParent.set(parentId, [mess]);
+      }
+    }
+    if (repliesByParent.size === 0) {return messages;}
     return messages.map((message: IMessage) => {
-      const newMessage = {
-        ...message,
-        reply: messages.filter(
-          (mess: IMessage) =>
-            !!mess.mainMessage &&
-            JSON.parse(mess.mainMessage).id === message.id &&
-            !mess.isDeleted
-        ),
-      };
-      return newMessage;
+      const reply = repliesByParent.get(String(message.id));
+      return reply ? { ...message, reply } : message;
     });
   }, [messages]);
 
@@ -134,7 +181,7 @@ const MessageList = <TMessage extends IMessage>({
           item.isReply &&
           item.isReply === 'true' &&
           item.mainMessage &&
-          JSON.parse(item.mainMessage).id === activeMessage?.id
+          mainMessageIdOf(item) === String(activeMessage?.id)
       );
     } else {
       filtered = nonDeletedMessages.filter(
@@ -154,14 +201,21 @@ const MessageList = <TMessage extends IMessage>({
     // settles. Sorting here makes each render a stable, ordered view —
     // even mid-stream — so the user sees them appear from oldest to
     // newest with no swap animation.
-    const sorted = filtered.slice().sort((a, b) => {
-      const aNum = new Date(a?.date as any).getTime() || 0;
-      const bNum = new Date(b?.date as any).getTime() || 0;
-      return aNum - bNum;
-    });
-    const deduped = Array.from(
-      new Map(sorted.map((m) => [m.id, m])).values()
-    );
+    let sorted = filtered;
+    for (let i = 1; i < filtered.length; i++) {
+      if (sortKeyOf(filtered[i - 1]) > sortKeyOf(filtered[i])) {
+        sorted = filtered.slice().sort((a, b) => sortKeyOf(a) - sortKeyOf(b));
+        break;
+      }
+    }
+    const seen = new Set<string>();
+    const deduped: IMessage[] = [];
+    for (const m of sorted) {
+      const key = String(m.id);
+      if (seen.has(key)) {continue;}
+      seen.add(key);
+      deduped.push(m);
+    }
     return deduped;
   }, [addReplyMessages, isReply, roomJID, activeMessage]);
 
@@ -244,8 +298,21 @@ const MessageList = <TMessage extends IMessage>({
     return withDivider;
   }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp]);
 
+  const dateLabelIds = useMemo(() => {
+    const ids = new Set<string>();
+    let nextDay: string | null = null;
+    for (let i = dataMessages.length - 1; i >= 0; i--) {
+      const item = dataMessages[i];
+      if (String(item.id).startsWith('delimiter-new')) {continue;}
+      const day = dayKeyOf(item);
+      if (nextDay === null || day !== nextDay) {ids.add(String(item.id));}
+      nextDay = day;
+    }
+    return ids;
+  }, [dataMessages]);
+
   const renderMessage = useCallback(
-    ({ item, index }: { item: IMessage; index: number }) => {
+    ({ item }: { item: IMessage }) => {
       if (String(item.id).startsWith('delimiter-new')) {
         return (
           <MessageContainer
@@ -262,24 +329,7 @@ const MessageList = <TMessage extends IMessage>({
         );
       }
 
-      const messageDate = new Date(item.date).toDateString();
-      let showDateLabel = false;
-
-      let nextMessage = null;
-      for (let i = index + 1; i < dataMessages.length; i++) {
-        const candidate = dataMessages[i];
-        if (!String(candidate.id).startsWith('delimiter-new')) {
-          nextMessage = candidate;
-          break;
-        }
-      }
-      const nextMessageDate = nextMessage
-        ? new Date(nextMessage.date).toDateString()
-        : null;
-
-      if (!nextMessage || messageDate !== nextMessageDate) {
-        showDateLabel = true;
-      }
+      const showDateLabel = dateLabelIds.has(String(item.id));
 
       return (
         <MessageContainer
@@ -301,7 +351,7 @@ const MessageList = <TMessage extends IMessage>({
       CustomDaySeparator,
       CustomMessage,
       CustomNewMessageLabel,
-      dataMessages,
+      dateLabelIds,
       isReply,
       user.xmppUsername,
       user.walletAddress,
@@ -452,7 +502,10 @@ const MessageList = <TMessage extends IMessage>({
         ref={flatListRef}
         data={dataMessages}
         renderItem={renderMessage}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={keyExtractor}
+        initialNumToRender={15}
+        maxToRenderPerBatch={10}
+        windowSize={7}
         onEndReached={handleLoadMore}
         onScroll={handleScroll}
         onContentSizeChange={handleContentSizeChange}

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;
 };
 

package/src/components/MainComponents/RoomList.tsx

@@ -121,10 +121,16 @@ const RoomList: React.FC<RoomListProps> = ({
     setSearchTerm(text);
   }, []);
 
-  const getLastMessage = useCallback(
-    (chat: IRoom) => chat?.messages?.[chat?.messages.length - 1],
-    []
-  );
+  const activityOf = useCallback((chat: IRoom): number => {
+    const last = chat?.messages?.[chat?.messages.length - 1];
+    const fromLive = Number(last?.id);
+    if (Number.isFinite(fromLive) && fromLive > 0) {return fromLive;}
+    const fromStamp = Number(chat?.lastMessageTimestamp);
+    if (Number.isFinite(fromStamp) && fromStamp > 0) {return fromStamp;}
+    const fromSeed = Number(chat?.lastMessage?.id);
+    if (Number.isFinite(fromSeed) && fromSeed > 0) {return fromSeed;}
+    return 0;
+  }, []);
 
   const filteredChats = useMemo(() => {
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -136,22 +142,13 @@ const RoomList: React.FC<RoomListProps> = ({
           const hay = `${chat?.title || ''} ${chat?.name || ''}`.toLowerCase();
           return hay.includes(lowerCaseSearchTerm);
         })
-        .sort((a, b) => {
-          if (getLastMessage(a)?.id && getLastMessage(b)?.id) {
-            return Number(getLastMessage(b).id) - Number(getLastMessage(a).id);
-          } else if (getLastMessage(a)?.id) {
-            return -1;
-          } else if (getLastMessage(b)?.id) {
-            return 1;
-          }
-          return -1;
-        });
+        .sort((a, b) => activityOf(b) - activityOf(a));
 
       chatsMap.set(lowerCaseSearchTerm, result);
     }
 
     return chatsMap.get(lowerCaseSearchTerm) || [];
-  }, [chats, searchTerm]);
+  }, [chats, searchTerm, activityOf]);
 
   useEffect(() => {
     if (burgerMenu) {
@@ -278,6 +275,21 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [isSearchFocused]);
 
+  const renderRoom = useCallback(
+    ({ item }: { item: IRoom }) => (
+      <Pressable
+        testID={`room-${(item.jid || '').split('@')[0]}`}
+        accessibilityLabel={`room-${item.title || item.name}`}
+        onPress={() => performClick(item)}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+      >
+        <ChatRoomItem chat={item} config={config} />
+      </Pressable>
+    ),
+    [performClick, handlePressIn, handlePressOut, config]
+  );
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -392,20 +404,7 @@ const RoomList: React.FC<RoomListProps> = ({
                   onMomentumScrollBegin={handleMomentumBegin}
                   onMomentumScrollEnd={handleMomentumEnd}
                   keyboardShouldPersistTaps="handled"
-                  renderItem={({ item }) => (
-                    <Pressable
-                      // Stable testID so e2e drivers can target a room
-                      // row by its jid local-part (e.g. Main chat under
-                      // app id `..._...759` → testID `room-...759`).
-                      testID={`room-${(item.jid || '').split('@')[0]}`}
-                      accessibilityLabel={`room-${item.title || item.name}`}
-                      onPress={() => performClick(item)}
-                      onPressIn={handlePressIn}
-                      onPressOut={handlePressOut}
-                    >
-                      <ChatRoomItem chat={item} config={config} />
-                    </Pressable>
-                  )}
+                  renderItem={renderRoom}
                   style={[
                     styles.chatList,
                     { backgroundColor: theme.listBackground },