@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/helpers/mediaLibraryRuntime.ts

@@ -0,0 +1,25 @@
+let cached: any | undefined;
+
+export const getMediaLibrary = (): any | null => {
+  if (cached !== undefined) {return cached;}
+  try {
+    const legacy = require('expo-media-library/legacy');
+
+    if (legacy?.getAssetsAsync) {
+      cached = legacy;
+      return cached;
+    }
+  } catch {
+  }
+
+  try {
+    cached = require('expo-media-library') ?? null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+};
+
+export const __resetMediaLibraryCache = () => {
+  cached = undefined;
+};

package/src/helpers/mimeToExtension.ts

@@ -289,25 +289,9 @@ export function ensureFilenameHasExtension(
   return `${base}${getExtensionForMime(mime)}`;
 }
 
-/**
- * Best-effort filename derivation for a message bubble:
- *   - server-provided `fileName`
- *   - server-provided `originalName`
- *   - URL pathname
- *   - generic `media_<timestamp>` so we never render an empty label
- *
- * Always returns a string with a valid extension.
- */
-export function deriveDisplayFilename(opts: {
-  fileName?: string | null;
-  originalName?: string | null;
-  url?: string | null;
-  mime?: string | null;
-}): string {
-  const candidate =
-    (opts.fileName && opts.fileName.trim()) ||
-    (opts.originalName && opts.originalName.trim()) ||
-    filenameFromUrl(opts.url) ||
-    '';
-  return ensureFilenameHasExtension(candidate, opts.mime);
-}
+// NOTE: the "which name wins" decision (originalName vs the stored
+// fileName vs the URL) lives in helpers/getDisplayFileName.ts - that is
+// the single source of truth used across display, save, share and
+// download call sites (bug #40: this used to be duplicated here with
+// the priority backwards, so attachments showed/saved under the
+// server's hash name instead of the sender's original one).

package/src/helpers/msgSortableMs.ts

@@ -0,0 +1,25 @@
+// Count messages strictly newer than a given millisecond timestamp using
+// `msg.id` (the server-authoritative microsecond timestamp prefixed by a
+// 13-digit millis, see `helpers/dateComparison`'s
+// `getHighResolutionTimestamp`) rather than `msg.date`, which can be
+// derived client-side (`createMessageFromXml` falls back to `Date.now()`
+// for realtime stanzas without a `date` attr) and drift from what the
+// server actually assigned.
+//
+// Extracted to its own module (rather than living in roomsSlice.ts, its
+// original home) so helpers that need the SAME ordering source - notably
+// `insertMessageWithDelimiter.ts`, which decides where the "New messages"
+// divider sits - can import it without creating a roomStore <-> helpers
+// import cycle (roomsSlice.ts already imports insertMessageWithDelimiter).
+// roomsSlice.ts re-exports this for backward compatibility with existing
+// call sites.
+export const msgSortableMs = (msg: any): number => {
+  const id = String(msg?.id || '');
+  const m = /^(\d{13})/.exec(id);
+  if (m) {return Number(m[1]);}
+  if (msg?.date) {
+    const t = new Date(msg.date as any).getTime();
+    if (Number.isFinite(t)) {return t;}
+  }
+  return 0;
+};

package/src/helpers/parseMessageBody.tsx

@@ -10,9 +10,29 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
+import type { ChatThemeColors } from '../theme/theme';
 
 let elementKeyCounter = 0;
 
+/**
+ * Colours the parser needs. Helpers can't call hooks, so the caller passes
+ * the resolved theme (Message.tsx does); with nothing passed the historical
+ * hard-coded values apply, so the output is unchanged for other callers.
+ */
+export type MessageBodyTheme = Pick<
+  ChatThemeColors,
+  'primary' | 'text' | 'surface' | 'surfaceSecondary' | 'surfaceHighlight' | 'border'
+>;
+
+const DEFAULT_BODY_COLORS: MessageBodyTheme = {
+  primary: '#0a66c2',
+  text: '#24292f',
+  surface: '#fff',
+  surfaceSecondary: '#f6f8fa',
+  surfaceHighlight: '#e8f3ff',
+  border: '#e1e4e8',
+};
+
 export const decodeHTMLEntities = (text: string) => {
   const entities: Record<string, string> = {
     '&amp;': '&',
@@ -29,14 +49,19 @@ export const decodeHTMLEntities = (text: string) => {
   return text.replace(/&[a-zA-Z0-9#]+;/g, (m) => entities[m] || m);
 };
 
-const styles = {
+// Only the colour-bearing entries read from `c`; the rest is static layout.
+// Historical light values that were slightly off-token (#f1f3f4 inline code
+// ground, #333 inline code ink, #d0d7de / #e7e9ec / #eef0f2 table hairlines)
+// are kept when no theme is passed and collapse onto the theme tokens
+// otherwise.
+const buildStyles = (c: MessageBodyTheme, themed: boolean) => ({
   bold: { fontWeight: 'bold' as const },
   italic: { fontStyle: 'italic' as const },
   strike: { textDecorationLine: 'line-through' as const },
-  link: { color: '#0a66c2', textDecorationLine: 'underline' as const },
+  link: { color: c.primary, textDecorationLine: 'underline' as const },
 
   codeInlineBox: {
-    backgroundColor: '#f1f3f4',
+    backgroundColor: themed ? c.surfaceSecondary : '#f1f3f4',
     borderRadius: 3,
     paddingVertical: 1,
     paddingHorizontal: 4,
@@ -44,43 +69,43 @@ const styles = {
   codeInlineText: {
     fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace' }),
     fontSize: 13,
-    color: '#333',
+    color: themed ? c.text : '#333',
   },
 
   codeBlock: {
-    backgroundColor: '#f6f8fa',
+    backgroundColor: c.surfaceSecondary,
     padding: 12,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: '#e1e4e8',
+    borderColor: c.border,
     marginVertical: 8,
   } as const,
   codeBlockText: {
     fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace' }),
     fontSize: 14,
-    color: '#24292f',
+    color: c.text,
     lineHeight: 20,
   },
 
   h: [
-    { fontWeight: 'bold' as const, fontSize: 32, marginTop: 24, marginBottom: 16 },
-    { fontWeight: 'bold' as const, fontSize: 24, marginTop: 20, marginBottom: 14 },
-    { fontWeight: 'bold' as const, fontSize: 20, marginTop: 16, marginBottom: 12 },
-    { fontWeight: 'bold' as const, fontSize: 18, marginTop: 14, marginBottom: 10 },
-    { fontWeight: 'bold' as const, fontSize: 16, marginTop: 12, marginBottom: 8 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 32, marginTop: 24, marginBottom: 16 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 24, marginTop: 20, marginBottom: 14 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 20, marginTop: 16, marginBottom: 12 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 18, marginTop: 14, marginBottom: 10 },
+    { ...(themed ? { color: c.text } : null), fontWeight: 'bold' as const, fontSize: 16, marginTop: 12, marginBottom: 8 },
     { fontWeight: 'bold' as const, fontSize: 14, marginTop: 12, marginBottom: 8 },
   ],
 
   quote: {
     borderLeftWidth: 3,
-    borderLeftColor: '#ccc',
+    borderLeftColor: themed ? c.border : '#ccc',
     paddingLeft: 10,
     marginVertical: 4,
   },
 
   paragraph: { marginVertical: 6 },
 
-  hr: { height: 1, backgroundColor: '#e1e4e8', marginVertical: 20 },
+  hr: { height: 1, backgroundColor: c.border, marginVertical: 20 },
 
   listItemRow: { flexDirection: 'row' as const, alignItems: 'flex-start' as const },
   listMarker: { minWidth: 22, paddingTop: 2 },
@@ -93,41 +118,67 @@ const styles = {
     marginTop: 2,
     borderRadius: 3,
     borderWidth: 1,
-    borderColor: '#bbb',
-    backgroundColor: '#fff',
+    borderColor: themed ? c.border : '#bbb',
+    backgroundColor: c.surface,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
   },
-  checkboxTick: { fontSize: 12, color: '#0a66c2' },
+  checkboxBoxChecked: {
+    backgroundColor: c.surfaceHighlight,
+    borderColor: c.primary,
+  },
+  checkboxTick: { fontSize: 12, color: c.primary },
 
   tableContainer: { marginVertical: 12 } as StyleProp<ViewStyle>,
   tableInner: {
     borderWidth: 1,
-    borderColor: '#d0d7de',
+    borderColor: themed ? c.border : '#d0d7de',
     borderRadius: 6,
     overflow: 'hidden' as const,
-    backgroundColor: '#fff',
+    backgroundColor: c.surface,
   },
   tableRow: { flexDirection: 'row' as const },
   th: {
     flex: 1,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: '#f6f8fa',
+    backgroundColor: c.surfaceSecondary,
     borderRightWidth: 1,
-    borderRightColor: '#d0d7de',
+    borderRightColor: themed ? c.border : '#d0d7de',
   },
   td: {
     flex: 1,
     paddingVertical: 10,
     paddingHorizontal: 12,
     borderTopWidth: 1,
-    borderTopColor: '#e7e9ec',
+    borderTopColor: themed ? c.border : '#e7e9ec',
     borderRightWidth: 1,
-    borderRightColor: '#eef0f2',
+    borderRightColor: themed ? c.border : '#eef0f2',
   },
   lastCell: { borderRightWidth: 0 },
-  cellText: { color: '#24292f', fontSize: 14, lineHeight: 20 } as const,
+  cellText: { color: c.text, fontSize: 14, lineHeight: 20 } as const,
+});
+
+const DEFAULT_STYLES = buildStyles(DEFAULT_BODY_COLORS, false);
+
+// Module-level like `elementKeyCounter`: parseMessageBody is synchronous,
+// so setting this at entry is safe, and it keeps the render helpers below
+// signature-free. The theme object from useTheme is memoized, so the
+// one-entry cache means styles are rebuilt only when the palette changes,
+// not per message.
+let styles = DEFAULT_STYLES;
+let cachedTheme: MessageBodyTheme | undefined;
+let cachedStyles = DEFAULT_STYLES;
+
+const resolveStyles = (theme?: MessageBodyTheme) => {
+  if (!theme) {
+    return DEFAULT_STYLES;
+  }
+  if (theme !== cachedTheme) {
+    cachedTheme = theme;
+    cachedStyles = buildStyles(theme, true);
+  }
+  return cachedStyles;
 };
 
 const renderTextWithLinks = (text: string) => {
@@ -300,7 +351,8 @@ const renderMarkdownTableRN = (
 // on the leaf <Text>s here rather than on the bubble wrapper.
 export const parseMessageBody = (
   text: string,
-  baseStyle?: TextStyle
+  baseStyle?: TextStyle,
+  theme?: MessageBodyTheme
 ): JSX.Element => {
   if (typeof text !== 'string') {
     return <View />;
@@ -309,6 +361,7 @@ export const parseMessageBody = (
   const lines = text.split('\n');
   const elements: JSX.Element[] = [];
   elementKeyCounter = 0;
+  styles = resolveStyles(theme);
 
   let listBuffer: Array<{
     type: 'ul' | 'checkbox';
@@ -345,7 +398,7 @@ export const parseMessageBody = (
           if (item.type === 'checkbox') {
             contentEl = (
               <View key={`checkbox-${elementKeyCounter++}`} style={styles.checkboxRow}>
-                <View style={[styles.checkboxBox, item.checked && { backgroundColor: '#e8f3ff', borderColor: '#0a66c2' }]}>
+                <View style={[styles.checkboxBox, item.checked && styles.checkboxBoxChecked]}>
                   {item.checked ? <Text style={styles.checkboxTick}>✓</Text> : null}
                 </View>
                 <Text style={[{ flex: 1 }, baseStyle]}>{parseInline(item.content)}</Text>

package/src/helpers/persistCrypto.ts

@@ -0,0 +1,127 @@
+import CryptoJS from 'crypto-js';
+import { secureGet, secureSet } from './secureKeyValue';
+
+// AES-256-CBC at rest for the bulk persisted state (message history +
+// room list) that `roomStore/persistence.ts` writes to AsyncStorage.
+// This is envelope encryption, not a SecureStore write of the payload
+// itself: expo-secure-store has historically capped a single value's
+// size on Android (chunking exists in newer releases, but the payload
+// here is unbounded — up to MESSAGE_LIMIT messages per room, times
+// every room), so only the small symmetric KEY goes through the
+// platform Keychain/Keystore (`secureKeyValue.ts`); the ciphertext
+// itself stays in plain AsyncStorage, unreadable without that key.
+const CIPHER_KEY_STORE_KEY = 'ethora_history_cipher_key';
+const ENVELOPE_VERSION = 1;
+const KEY_BYTES = 32; // AES-256
+const IV_BYTES = 16; // one AES block
+
+interface Envelope {
+  v: number;
+  iv: string; // base64
+  ct: string; // base64 ciphertext
+}
+
+/**
+ * `crypto-js`'s own `WordArray.random()` falls back to `Math.random()`
+ * when it can't detect a browser `window.crypto` — not safe for key/IV
+ * material. `react-native-get-random-values` (a REQUIRED peer
+ * dependency, imported at the top of `main.ts`/`index.js` before
+ * anything else in the SDK runs) polyfills the real thing onto
+ * `global.crypto.getRandomValues` instead; source bytes from that and
+ * hand them to crypto-js as a WordArray rather than trust its default.
+ */
+const randomWordArray = (byteLength: number): CryptoJS.lib.WordArray => {
+  const bytes = new Uint8Array(byteLength);
+  (global as any).crypto.getRandomValues(bytes);
+  const words: number[] = [];
+  for (let i = 0; i < bytes.length; i += 4) {
+    words.push(
+      ((bytes[i] || 0) << 24) |
+        ((bytes[i + 1] || 0) << 16) |
+        ((bytes[i + 2] || 0) << 8) |
+        (bytes[i + 3] || 0)
+    );
+  }
+  return CryptoJS.lib.WordArray.create(words, byteLength);
+};
+
+let cachedKeyPromise: Promise<CryptoJS.lib.WordArray> | null = null;
+
+/**
+ * One AES-256 key per install, generated on first use and persisted
+ * through the SecureStore/Keychain bridge. Reused across logins on
+ * purpose: the ciphertext it protects is deleted wholesale on logout
+ * (`clearPersistedState`), so there is no cross-account data for a
+ * stable key to expose — only the encrypted blob of whoever is
+ * currently logged in ever exists on disk at a given time.
+ */
+const loadOrCreateKey = (): Promise<CryptoJS.lib.WordArray> => {
+  if (cachedKeyPromise) {return cachedKeyPromise;}
+  cachedKeyPromise = (async () => {
+    const existing = await secureGet(CIPHER_KEY_STORE_KEY);
+    if (existing) {
+      return CryptoJS.enc.Base64.parse(existing);
+    }
+    const key = randomWordArray(KEY_BYTES);
+    await secureSet(CIPHER_KEY_STORE_KEY, CryptoJS.enc.Base64.stringify(key));
+    return key;
+  })();
+  return cachedKeyPromise;
+};
+
+/** Encrypt a JSON-serialisable payload for storage. Returns the string to persist. */
+export async function encryptForPersist(plaintext: string): Promise<string> {
+  const key = await loadOrCreateKey();
+  const iv = randomWordArray(IV_BYTES);
+  const encrypted = CryptoJS.AES.encrypt(plaintext, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  const envelope: Envelope = {
+    v: ENVELOPE_VERSION,
+    iv: CryptoJS.enc.Base64.stringify(iv),
+    ct: encrypted.ciphertext.toString(CryptoJS.enc.Base64),
+  };
+  return JSON.stringify(envelope);
+}
+
+/**
+ * Decrypt a value previously written by `encryptForPersist`. Returns
+ * null (never throws) for anything that isn't a valid envelope for the
+ * current key — including a plaintext blob from a pre-encryption
+ * install: the app just re-hydrates that room/history from the server,
+ * same as any other empty-cache cold start.
+ */
+export async function decryptFromPersist(
+  stored: string
+): Promise<string | null> {
+  try {
+    const envelope = JSON.parse(stored) as Partial<Envelope>;
+    if (
+      !envelope ||
+      envelope.v !== ENVELOPE_VERSION ||
+      !envelope.iv ||
+      !envelope.ct
+    ) {
+      return null;
+    }
+    const key = await loadOrCreateKey();
+    const iv = CryptoJS.enc.Base64.parse(envelope.iv);
+    const ciphertext = CryptoJS.enc.Base64.parse(envelope.ct);
+    const decrypted = CryptoJS.AES.decrypt(
+      { ciphertext } as CryptoJS.lib.CipherParams,
+      key,
+      { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }
+    );
+    const plaintext = decrypted.toString(CryptoJS.enc.Utf8);
+    return plaintext || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Test seam only. */
+export const __resetPersistCryptoKeyForTests = (): void => {
+  cachedKeyPromise = null;
+};

package/src/helpers/pickImageAsset.ts

@@ -0,0 +1,68 @@
+import { Alert, Linking } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+
+/**
+ * A picked image in the shape React Native's FormData understands.
+ *
+ * NOT a web `File`: RN streams a multipart part straight from a `file://`
+ * uri and has no usable Blob/File/atob path. Screens ported from the web
+ * client used to carry base64 -> Blob -> File helpers that could never
+ * have run here.
+ */
+export interface PickedImage {
+  uri: string;
+  type: string;
+  name: string;
+}
+
+/**
+ * Ask for library permission, open the picker, and normalise the result.
+ *
+ * Returns `null` for every non-error outcome — permission refused, user
+ * cancelled — so call sites can simply keep their current value.
+ *
+ * Exists because the avatar pickers are wired to `onPress`, which hands
+ * the callback a SyntheticEvent. Storing that event as "the image" (what
+ * two screens used to do) rendered a pooled event as an <Image source>
+ * and then crashed with "Property is not configurable" when React tried
+ * to release it — on top of never letting the user pick anything.
+ */
+export const pickImageAsset = async (): Promise<PickedImage | null> => {
+  try {
+    // expo-image-picker owns the permission prompt internally and
+    // returns a `granted` flag.
+    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!perm.granted) {
+      Alert.alert(
+        'Permission required',
+        'Photo library permission is needed to select images.',
+        [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'Open Settings', onPress: () => Linking.openSettings() },
+        ]
+      );
+      return null;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+    if (result.canceled || !result.assets?.[0]) {
+      return null;
+    }
+
+    const asset = result.assets[0];
+    const originalName = asset.fileName || asset.uri.split('/').pop();
+    return {
+      uri: asset.uri,
+      type: asset.mimeType || 'image/jpeg',
+      name: originalName || `image_${Date.now()}.jpg`,
+    };
+  } catch (error) {
+    console.error('Failed to pick an image:', error);
+    return null;
+  }
+};

package/src/helpers/pushPayload.ts

@@ -0,0 +1,62 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { store } from '../roomStore';
+import {
+  clearPendingNotificationJid,
+  setCurrentRoom,
+  setPendingNotificationJid,
+} from '../roomStore/roomsSlice';
+import { handleCallPush } from './incomingCallFromPush';
+import { normalizeRoomJid } from './normalizeRoomJid';
+
+export type PushPayloadOutcome = 'call' | 'room' | 'pending' | 'unknown';
+
+export const PENDING_NOTIFICATION_JID_KEY = 'ethora_pending_notification_jid';
+export const PENDING_NOTIFICATION_TTL_MS = 5 * 60 * 1000;
+
+export const readPendingJid = async (): Promise<string | null> => {
+  try {
+    const raw = await AsyncStorage.getItem(PENDING_NOTIFICATION_JID_KEY);
+    if (!raw) {return null;}
+    if (raw.startsWith('{')) {
+      const { jid, at } = JSON.parse(raw) as { jid?: string; at?: number };
+      if (!jid || !at || Date.now() - at > PENDING_NOTIFICATION_TTL_MS) {
+        await AsyncStorage.removeItem(PENDING_NOTIFICATION_JID_KEY);
+        return null;
+      }
+      return jid;
+    }
+    return raw;
+  } catch {
+    return null;
+  }
+};
+
+export const openRoomFromPush = (jid: string): 'room' | 'pending' => {
+  const state = store.getState();
+  const conference = state.chatSettingStore?.config?.xmppSettings?.conference;
+  const full = normalizeRoomJid(jid, conference);
+
+  AsyncStorage.setItem(
+    PENDING_NOTIFICATION_JID_KEY,
+    JSON.stringify({ jid: full, at: Date.now() })
+  ).catch(() => undefined);
+  if (state.rooms?.rooms?.[full]) {
+    store.dispatch(clearPendingNotificationJid());
+    store.dispatch(setCurrentRoom({ roomJID: full }));
+    return 'room';
+  }
+  store.dispatch(setPendingNotificationJid(full));
+  return 'pending';
+};
+
+export const handlePushPayload = (
+  data: Record<string, unknown> | null | undefined
+): PushPayloadOutcome => {
+  if (!data) {return 'unknown';}
+  if (handleCallPush(data as Record<string, any>)) {return 'call';}
+  const jid = data.jid ?? data.chatJid ?? data.roomJid ?? data.roomJID;
+  if (typeof jid === 'string' && jid) {
+    return openRoomFromPush(jid);
+  }
+  return 'unknown';
+};