@ethora/chat-component-rn 26.8.5 → 26.8.7

package/src/context/MessageNotificationContext.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -15,17 +16,23 @@ import {
   Animated,
   AppState,
   AppStateStatus,
+  Easing,
+  PanResponder,
   Pressable,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
 import { messageNotificationManager } from '../utils/messageNotificationManager';
 import { setCurrentRoom } from '../roomStore/roomsSlice';
 import { IConfig, IMessage } from '../types/types';
 import { RootState } from '../roomStore';
 import { useTheme } from '../hooks/useTheme';
+import { ProfileImagePlaceholder } from '../components/MainComponents/ProfileImagePlaceholder';
+import { useFileToken } from '../hooks/useFileToken';
+import { appendFileToken } from '../helpers/secureFileUrl';
 
 interface ToastItem {
   id: string;
@@ -49,7 +56,18 @@ const MessageNotificationContext =
   createContext<MessageNotificationContextValue | null>(null);
 
 const DEFAULT_MAX = 3;
+
+const pruneExpired = (prev: ToastItem[], now: number, ttl: number) => {
+  if (prev.length === 0) {return prev;}
+  const next = prev.filter((t) => now - t.timestamp < ttl);
+  return next.length === prev.length ? prev : next;
+};
 const DEFAULT_DURATION_MS = 30000;
+// The top banner is a glance, not a stack to work through: it leaves on its
+// own after a few seconds unless the host sets `duration`.
+const BANNER_DURATION_MS = 4000;
+const BANNER_IN_MS = 280;
+const BANNER_OUT_MS = 220;
 
 interface ProviderProps {
   children: ReactNode;
@@ -72,7 +90,17 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
   const notificationConfig = config?.inAppNotifications;
   const isEnabled = notificationConfig?.enabled === true;
   const maxNotifications = notificationConfig?.maxNotifications ?? DEFAULT_MAX;
-  const duration = notificationConfig?.duration ?? DEFAULT_DURATION_MS;
+  // Default presentation: one full-width banner sliding in from the top
+  // (the messenger convention). An explicit `position` or a
+  // `customComponent` keeps the stacked corner toasts.
+  const bannerMode =
+    !notificationConfig?.position && !notificationConfig?.customComponent;
+  const duration =
+    notificationConfig?.duration ??
+    (bannerMode ? BANNER_DURATION_MS : DEFAULT_DURATION_MS);
+  // The banner times its own exit (so it can animate out); the list prune
+  // below is only its safety net.
+  const pruneAfter = bannerMode ? duration + 2000 : duration;
 
   const [toasts, setToasts] = useState<ToastItem[]>([]);
   const appActiveRef = useRef(AppState.currentState === 'active');
@@ -86,22 +114,22 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
         appActiveRef.current = next === 'active';
         if (next === 'active') {
           const now = Date.now();
-          setToasts((prev) => prev.filter((t) => now - t.timestamp < duration));
+          setToasts((prev) => pruneExpired(prev, now, pruneAfter));
         }
       }
     );
     return () => sub.remove();
-  }, [duration]);
+  }, [pruneAfter]);
 
   // Periodic prune when active.
   useEffect(() => {
     const interval = setInterval(() => {
       if (!appActiveRef.current) {return;}
       const now = Date.now();
-      setToasts((prev) => prev.filter((t) => now - t.timestamp < duration));
+      setToasts((prev) => pruneExpired(prev, now, pruneAfter));
     }, 1000);
     return () => clearInterval(interval);
-  }, [duration]);
+  }, [pruneAfter]);
 
   // Clear toasts when their room becomes active.
   useEffect(() => {
@@ -172,10 +200,33 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
     return unsubscribe;
   }, [isEnabled, showMessageNotification]);
 
+  const contextValue = useMemo(
+    () => ({ showMessageNotification }),
+    [showMessageNotification]
+  );
+
   return (
-    <MessageNotificationContext.Provider value={{ showMessageNotification }}>
+    <MessageNotificationContext.Provider value={contextValue}>
       {children}
-      {isEnabled && toasts.length > 0 && (
+      {isEnabled && bannerMode && toasts.length > 0 && (
+        <ToastBanner
+          item={toasts[toasts.length - 1]}
+          duration={duration}
+          safeAreaTop={!!config?.headerLayout?.safeAreaTop}
+          onPress={(t) =>
+            navigateToMessage(
+              t.roomJID,
+              t.message.id,
+              t.message,
+              t.roomName,
+              t.senderName
+            )
+          }
+          // One banner stands for everything queued behind it.
+          onDismiss={() => setToasts([])}
+        />
+      )}
+      {isEnabled && !bannerMode && toasts.length > 0 && (
         <View
           pointerEvents="box-none"
           style={[
@@ -224,6 +275,122 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
   );
 };
 
+/**
+ * Top banner: slides down from under the status bar, stays for `duration`,
+ * slides back up. Tap opens the room; a flick upwards dismisses it. A newer
+ * message replaces the content in place and restarts the timer.
+ */
+const ToastBanner: React.FC<{
+  item: ToastItem;
+  duration: number;
+  safeAreaTop: boolean;
+  onPress: (item: ToastItem) => void;
+  onDismiss: () => void;
+}> = ({ item, duration, safeAreaTop, onPress, onDismiss }) => {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const top = (safeAreaTop ? insets.top : 0) + 8;
+  const roomIcon = useSelector(
+    (state: RootState) => state.rooms.rooms?.[item.roomJID]?.icon
+  );
+  const fileToken = useFileToken();
+  // 0 = hidden above the screen, 1 = in place.
+  const shown = useRef(new Animated.Value(0)).current;
+  const drag = useRef(new Animated.Value(0)).current;
+  const leaving = useRef(false);
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
+  const leave = useCallback(() => {
+    if (leaving.current) {return;}
+    leaving.current = true;
+    Animated.timing(shown, {
+      toValue: 0,
+      duration: BANNER_OUT_MS,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true,
+    }).start(() => onDismissRef.current());
+  }, [shown]);
+
+  useEffect(() => {
+    Animated.timing(shown, {
+      toValue: 1,
+      duration: BANNER_IN_MS,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [shown]);
+
+  // Restarts with every new message shown in the banner.
+  useEffect(() => {
+    const timer = setTimeout(leave, duration);
+    return () => clearTimeout(timer);
+  }, [item.id, duration, leave]);
+
+  const pan = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) =>
+        g.dy < -6 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_e, g) => drag.setValue(Math.min(g.dy, 0)),
+      onPanResponderRelease: (_e, g) => {
+        if (g.dy < -24 || g.vy < -0.5) {
+          leave();
+        } else {
+          Animated.spring(drag, { toValue: 0, useNativeDriver: true }).start();
+        }
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(drag, { toValue: 0, useNativeDriver: true }).start();
+      },
+    })
+  ).current;
+
+  const slide = shown.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-(top + 96), 0],
+  });
+
+  return (
+    <Animated.View
+      testID="message-notification-banner"
+      {...pan.panHandlers}
+      style={[
+        styles.banner,
+        {
+          top,
+          backgroundColor: theme.surface,
+          borderColor: theme.border,
+          shadowColor: theme.shadow,
+          opacity: shown,
+          transform: [{ translateY: Animated.add(slide, drag) }],
+        },
+      ]}
+    >
+      <Pressable style={styles.bannerBody} onPress={() => onPress(item)}>
+        <ProfileImagePlaceholder
+          name={item.roomName}
+          icon={appendFileToken(roomIcon, fileToken)}
+          size={40}
+        />
+        <View style={styles.bannerText}>
+          <Text
+            style={[styles.bannerTitle, { color: theme.text }]}
+            numberOfLines={1}
+          >
+            {item.roomName}
+          </Text>
+          <Text
+            style={[styles.bannerSubtitle, { color: theme.textSecondary }]}
+            numberOfLines={2}
+          >
+            {item.senderName}: {item.message?.body || ''}
+          </Text>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
 const ToastRow: React.FC<{
   item: ToastItem;
   onPress: () => void;
@@ -300,6 +467,37 @@ const styles = StyleSheet.create({
     zIndex: 10000,
     elevation: 10000,
   },
+  banner: {
+    position: 'absolute',
+    left: 8,
+    right: 8,
+    zIndex: 10000,
+    elevation: 12,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    shadowOpacity: 0.25,
+    shadowOffset: { width: 0, height: 6 },
+    shadowRadius: 16,
+  },
+  bannerBody: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  bannerText: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  bannerTitle: {
+    fontWeight: '600',
+    fontSize: 15,
+    marginBottom: 2,
+  },
+  bannerSubtitle: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
   toast: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/context/xmppProvider.tsx

@@ -40,6 +40,7 @@ import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { store } from '../roomStore';
 import { logout, setStoreClient, setConfig } from '../roomStore/chatSettingsSlice';
+import { logoutService } from '../hooks/useLogout';
 import {
   setLogoutState,
   setVisibleRoom,
@@ -233,6 +234,22 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       // Reused clients (steps 1+2 above) also need the provider — config
       // may have changed since the singleton was created.
       created.setCredentialsProvider(credentialsProvider);
+      // The XMPP password is gone for good (rejected, and the refresh could
+      // not produce a working one): end the session the same way the
+      // "Sign out" item does, then let the host route to its login.
+      created.setAuthLostHandler?.(() => {
+        devPushLog('error', 'XMPP password lost — logging out');
+        logoutService
+          .performLogout()
+          .catch(() => {})
+          .finally(() => {
+            try {
+              Promise.resolve(config?.logout?.onAfterLogout?.()).catch(() => {});
+            } catch {
+              /* host callback */
+            }
+          });
+      });
 
       // Re-join MUC rooms on every 'online'. After a reconnect the new
       // XMPP stream isn't a member of any room, so a sent message gets a
@@ -925,16 +942,19 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
     return () => sub.remove();
   }, [client]);
 
+  const contextValue = useMemo(
+    () => ({
+      client,
+      providerBootstrapStatus,
+      initMode,
+      initializeClient,
+      setClient,
+    }),
+    [client, providerBootstrapStatus, initMode, initializeClient, setClient]
+  );
+
   return (
-    <XmppContext.Provider
-      value={{
-        client,
-        providerBootstrapStatus,
-        initMode,
-        initializeClient,
-        setClient,
-      }}
-    >
+    <XmppContext.Provider value={contextValue}>
       {children}
       {/* Lives here, not inside <Chat>: an incoming call-token can arrive
           (and must still ring) while the user is on a different screen of

package/src/e2ee/crypto.ts

@@ -0,0 +1,194 @@
+import { cbc } from '@noble/ciphers/aes.js';
+import { ed25519, x25519 } from '@noble/curves/ed25519.js';
+import { hkdf } from '@noble/hashes/hkdf.js';
+import { hmac } from '@noble/hashes/hmac.js';
+import { sha256 } from '@noble/hashes/sha2.js';
+import { concatBytes, randomBytes, utf8ToBytes } from '@noble/hashes/utils.js';
+
+export { concatBytes, randomBytes, utf8ToBytes };
+
+export interface KeyPair {
+  priv: Uint8Array;
+  pub: Uint8Array;
+}
+
+export interface IdentityKey {
+  seed: Uint8Array;
+  pub: Uint8Array;
+}
+
+const ZERO_SALT = new Uint8Array(32);
+
+export function hkdfSha256(
+  ikm: Uint8Array,
+  salt: Uint8Array | undefined,
+  info: string,
+  length: number
+): Uint8Array {
+  return hkdf(sha256, ikm, salt ?? ZERO_SALT, utf8ToBytes(info), length);
+}
+
+export function hmacSha256(key: Uint8Array, data: Uint8Array): Uint8Array {
+  return hmac(sha256, key, data);
+}
+
+export function aesEncrypt(
+  key: Uint8Array,
+  iv: Uint8Array,
+  data: Uint8Array
+): Uint8Array {
+  return cbc(key, iv).encrypt(data);
+}
+
+export function aesDecrypt(
+  key: Uint8Array,
+  iv: Uint8Array,
+  data: Uint8Array
+): Uint8Array {
+  return cbc(key, iv).decrypt(data);
+}
+
+export function generateKeyPair(): KeyPair {
+  const { secretKey, publicKey } = x25519.keygen();
+  return { priv: secretKey, pub: publicKey };
+}
+
+export function generateIdentity(): IdentityKey {
+  const { secretKey, publicKey } = ed25519.keygen();
+  return { seed: secretKey, pub: publicKey };
+}
+
+export function dh(priv: Uint8Array, pub: Uint8Array): Uint8Array {
+  return x25519.getSharedSecret(priv, pub);
+}
+
+export function identityDhPrivate(identity: IdentityKey): Uint8Array {
+  return ed25519.utils.toMontgomerySecret(identity.seed);
+}
+
+export function identityDhPublic(identityPub: Uint8Array): Uint8Array {
+  return ed25519.utils.toMontgomery(identityPub);
+}
+
+export function sign(identity: IdentityKey, message: Uint8Array): Uint8Array {
+  return ed25519.sign(message, identity.seed);
+}
+
+export function verify(
+  signature: Uint8Array,
+  message: Uint8Array,
+  identityPub: Uint8Array
+): boolean {
+  try {
+    return ed25519.verify(signature, message, identityPub);
+  } catch {
+    return false;
+  }
+}
+
+export function bytesEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) {return false;}
+  let diff = 0;
+  for (let i = 0; i < a.length; i++) {diff |= a[i]! ^ b[i]!;}
+  return diff === 0;
+}
+
+const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const B64_VALUE = new Int16Array(128).fill(-1);
+for (let i = 0; i < B64.length; i++) {B64_VALUE[B64.charCodeAt(i)] = i;}
+
+export function toBase64(bytes: Uint8Array): string {
+  let out = '';
+  let i = 0;
+  for (; i + 2 < bytes.length; i += 3) {
+    const n = (bytes[i]! << 16) | (bytes[i + 1]! << 8) | bytes[i + 2]!;
+    out += B64[n >> 18]! + B64[(n >> 12) & 63]! + B64[(n >> 6) & 63]! + B64[n & 63]!;
+  }
+  if (i + 1 === bytes.length) {
+    const n = bytes[i]! << 16;
+    out += B64[n >> 18]! + B64[(n >> 12) & 63]! + '==';
+  } else if (i + 2 === bytes.length) {
+    const n = (bytes[i]! << 16) | (bytes[i + 1]! << 8);
+    out += B64[n >> 18]! + B64[(n >> 12) & 63]! + B64[(n >> 6) & 63]! + '=';
+  }
+  return out;
+}
+
+export function fromBase64(text: string): Uint8Array {
+  const clean = text.replace(/\s+/g, '').replace(/=+$/, '');
+  if (clean.length % 4 === 1) {throw new Error('Invalid base64');}
+  const out = new Uint8Array(Math.floor((clean.length * 3) / 4));
+  let acc = 0;
+  let bits = 0;
+  let pos = 0;
+  for (let i = 0; i < clean.length; i++) {
+    const code = clean.charCodeAt(i);
+    const value = code < 128 ? B64_VALUE[code]! : -1;
+    if (value < 0) {throw new Error('Invalid base64');}
+    acc = (acc << 6) | value;
+    bits += 6;
+    if (bits >= 8) {
+      bits -= 8;
+      out[pos++] = (acc >> bits) & 0xff;
+    }
+  }
+  return out;
+}
+
+export function toHex(bytes: Uint8Array): string {
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+export function randomInt(min: number, max: number): number {
+  const bytes = randomBytes(4);
+  const n = new DataView(bytes.buffer, bytes.byteOffset, 4).getUint32(0);
+  return min + (n % (max - min + 1));
+}
+
+export function bytesToUtf8(bytes: Uint8Array): string {
+  const chunks: string[] = [];
+  let units: number[] = [];
+  const push = (unit: number) => {
+    units.push(unit);
+    if (units.length >= 8192) {
+      chunks.push(String.fromCharCode.apply(null, units));
+      units = [];
+    }
+  };
+
+  let i = 0;
+  while (i < bytes.length) {
+    const b = bytes[i++]!;
+    if (b < 0x80) {
+      push(b);
+      continue;
+    }
+    const extra = b >= 0xf0 && b < 0xf8 ? 3 : b >= 0xe0 ? 2 : b >= 0xc2 ? 1 : -1;
+    let code = extra === 3 ? b & 0x07 : extra === 2 ? b & 0x0f : b & 0x1f;
+    let valid = extra > 0 && b < 0xf8 && i + extra <= bytes.length;
+    for (let k = 0; valid && k < extra; k++) {
+      const next = bytes[i + k]!;
+      if ((next & 0xc0) !== 0x80) {valid = false;}
+      code = (code << 6) | (next & 0x3f);
+    }
+    if (
+      !valid ||
+      (extra === 2 && code < 0x800) ||
+      (extra === 3 && (code < 0x10000 || code > 0x10ffff)) ||
+      (code >= 0xd800 && code <= 0xdfff)
+    ) {
+      push(0xfffd);
+      continue;
+    }
+    i += extra;
+    if (code > 0xffff) {
+      code -= 0x10000;
+      push(0xd800 | (code >> 10));
+      push(0xdc00 | (code & 0x3ff));
+    } else {
+      push(code);
+    }
+  }
+  if (units.length) {chunks.push(String.fromCharCode.apply(null, units));}
+  return chunks.join('');
+}

package/src/e2ee/deviceStore.ts

@@ -0,0 +1,80 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { secureGetOrCreate } from '../helpers/secureKeyValue';
+import {
+  decryptFromPersist,
+  encryptForPersist,
+  isPersistKeyKept,
+} from '../helpers/persistCrypto';
+import { randomBytes, toHex } from './crypto';
+import { createStore, type OmemoStore, type StringBackend } from './store';
+
+const MMKV_INSTANCE_ID = 'ethora-omemo';
+const MMKV_KEY_STORE_KEY = 'ethora_omemo_store_key';
+const ASYNC_STORAGE_PREFIX = '@ethora/omemo:';
+
+const createMmkvBackend = async (): Promise<StringBackend | null> => {
+  let MMKV: any;
+  try {
+    MMKV = require('react-native-mmkv').MMKV;
+  } catch {
+    return null;
+  }
+  if (typeof MMKV !== 'function') {return null;}
+  const key = await secureGetOrCreate(MMKV_KEY_STORE_KEY, () =>
+    toHex(randomBytes(8))
+  );
+  if (!key) {throw new Error('e2ee: the device store key was not kept');}
+  try {
+    const storage = new MMKV({ id: MMKV_INSTANCE_ID, encryptionKey: key.value });
+    if (key.created) {storage.clearAll();}
+    return {
+      getItem: async (key) => storage.getString(key) ?? null,
+      setItem: async (key, value) => void storage.set(key, value),
+      removeItem: async (key) => void storage.delete(key),
+    };
+  } catch (e) {
+    console.warn('[e2ee] react-native-mmkv present but unusable, falling back', e);
+    return null;
+  }
+};
+
+const asyncStorageBackend: StringBackend = {
+  getItem: async (key) => {
+    const raw = await AsyncStorage.getItem(ASYNC_STORAGE_PREFIX + key);
+    return raw ? decryptFromPersist(raw) : null;
+  },
+  setItem: async (key, value) =>
+    AsyncStorage.setItem(ASYNC_STORAGE_PREFIX + key, await encryptForPersist(value)),
+  removeItem: (key) => AsyncStorage.removeItem(ASYNC_STORAGE_PREFIX + key),
+};
+
+const createAsyncStorageBackend = async (): Promise<StringBackend> => {
+  if (!(await isPersistKeyKept())) {
+    throw new Error('e2ee: the storage cipher key was not kept');
+  }
+  return asyncStorageBackend;
+};
+
+let backendPromise: Promise<StringBackend> | null = null;
+
+const getBackend = (): Promise<StringBackend> => {
+  if (!backendPromise) {
+    const opening = createMmkvBackend().then(
+      (mmkv) => mmkv ?? createAsyncStorageBackend()
+    );
+    backendPromise = opening;
+    // A refusal is not cached: the next start may find the store usable.
+    opening.catch(() => {
+      if (backendPromise === opening) {backendPromise = null;}
+    });
+  }
+  return backendPromise;
+};
+
+export async function openDeviceStore(jid: string): Promise<OmemoStore> {
+  return createStore(await getBackend(), jid);
+}
+
+export const __resetDeviceStoreForTests = (): void => {
+  backendPromise = null;
+};