@ethora/chat-component-rn 26.7.10 → 26.8.1

package/src/components/Modals/ProfileHeader/ProfileMenu.tsx

@@ -1,217 +0,0 @@
-/** @format */
-
-import React, { useRef, useState } from 'react';
-import {
-  Animated,
-  Dimensions,
-  Easing,
-  Modal,
-  Pressable,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { MoreIcon } from '../../../assets/icons';
-
-export interface ProfileMenuItem {
-  key: string;
-  label: string;
-  icon: React.ReactNode;
-  destructive?: boolean;
-  onPress: () => void;
-}
-
-/** Fallbacks used for the very first frame, before the card is measured. */
-const ESTIMATED_WIDTH = 220;
-const ESTIMATED_HEIGHT = 160;
-const GAP = 8;
-/** Roughly a notch inset + the header band, used until measured. */
-const DEFAULT_TOP = 104;
-const EDGE = 12;
-
-/**
- * The "…" overflow menu shared by the chat and user profile screens.
- *
- * The shared `DropdownMenu` pins its card at a hard-coded `top: 95`, which
- * on this screen landed it over the host's own tab bar, unanchored to the
- * button. This one measures the button and grows the card out of it: the
- * card scales up from its top-right corner (translate → scale → translate
- * back, which is how you fake a transform-origin in React Native) so the
- * menu visibly unfolds from the three dots.
- */
-const ProfileMenu: React.FC<{
-  items: ProfileMenuItem[];
-  testIDPrefix?: string;
-}> = ({ items, testIDPrefix = 'chat-profile' }) => {
-  const buttonRef = useRef<View>(null);
-  const [open, setOpen] = useState(false);
-  const [anchor, setAnchor] = useState({ top: DEFAULT_TOP, right: EDGE });
-  const [size, setSize] = useState({
-    width: ESTIMATED_WIDTH,
-    height: ESTIMATED_HEIGHT,
-  });
-  const progress = useRef(new Animated.Value(0)).current;
-
-  const animate = (to: number, done?: () => void) =>
-    Animated.timing(progress, {
-      toValue: to,
-      duration: to ? 180 : 140,
-      easing: to ? Easing.out(Easing.back(1.3)) : Easing.in(Easing.quad),
-      useNativeDriver: true,
-    }).start(({ finished }) => finished && done?.());
-
-  // Anchor to the button's window frame — that is the same coordinate
-  // space the <Modal> lays out in, so no insets to subtract. Measured on
-  // layout (and again on open) rather than *before* opening: on some hosts
-  // the measure callback never fires, and gating the open on it would mean
-  // a menu that simply doesn't appear.
-  const measure = () =>
-    buttonRef.current?.measureInWindow?.((x, y, width, height) => {
-      if (typeof y !== 'number' || typeof x !== 'number') {return;}
-      const screenWidth = Dimensions.get('window').width;
-      setAnchor({
-        top: y + height + GAP,
-        right: Math.max(screenWidth - (x + width), EDGE),
-      });
-    });
-
-  const openMenu = () => {
-    measure();
-    progress.setValue(0);
-    setOpen(true);
-    animate(1);
-  };
-
-  const closeMenu = (then?: () => void) =>
-    animate(0, () => {
-      setOpen(false);
-      then?.();
-    });
-
-  const scale = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0.2, 1],
-  });
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <View ref={buttonRef} collapsable={false} onLayout={measure}>
-        <TouchableOpacity
-          testID={`${testIDPrefix}-menu`}
-          activeOpacity={0.7}
-          onPress={openMenu}
-          style={styles.button}
-        >
-          <MoreIcon color="#FFFFFF" />
-        </TouchableOpacity>
-      </View>
-
-      <Modal
-        transparent
-        visible={open}
-        animationType="none"
-        onRequestClose={() => closeMenu()}
-      >
-        <Pressable
-          testID={`${testIDPrefix}-menu-backdrop`}
-          style={StyleSheet.absoluteFill}
-          onPress={() => closeMenu()}
-        />
-        <Animated.View
-          testID={`${testIDPrefix}-menu-card`}
-          onLayout={(e) => {
-            const { width, height } = e.nativeEvent.layout;
-            if (width && height) {setSize({ width, height });}
-          }}
-          style={[
-            styles.card,
-            {
-              top: anchor.top,
-              right: anchor.right,
-              opacity: progress,
-              transform: [
-                // Move the origin to the card's top-right corner, scale
-                // there, then move back — RN has no transform-origin.
-                { translateX: size.width / 2 },
-                { translateY: -size.height / 2 },
-                { scale },
-                { translateX: -size.width / 2 },
-                { translateY: size.height / 2 },
-              ],
-            },
-          ]}
-        >
-          {items.map((item, index) => (
-            <TouchableOpacity
-              key={item.key}
-              testID={`${testIDPrefix}-menu-${item.key}`}
-              activeOpacity={0.6}
-              style={[styles.row, index > 0 && styles.rowDivider]}
-              onPress={() => closeMenu(item.onPress)}
-            >
-              <Text
-                style={[styles.label, item.destructive && styles.destructive]}
-              >
-                {item.label}
-              </Text>
-              <View style={styles.icon}>{item.icon}</View>
-            </TouchableOpacity>
-          ))}
-        </Animated.View>
-      </Modal>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0,0,0,0.28)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    position: 'absolute',
-    minWidth: 200,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 14,
-    paddingVertical: 4,
-    shadowColor: '#121219',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.18,
-    shadowRadius: 16,
-    elevation: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 24,
-    paddingHorizontal: 16,
-    paddingVertical: 13,
-  },
-  rowDivider: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#EFEFF2',
-  },
-  label: {
-    fontSize: 16,
-    color: '#141414',
-  },
-  destructive: {
-    color: '#E53935',
-  },
-  icon: {
-    width: 22,
-    alignItems: 'center',
-  },
-});
-
-export default ProfileMenu;

package/src/helpers/getChatBackground.ts

@@ -1,18 +0,0 @@
-/** @format */
-
-import type { IConfig } from '../types/types';
-
-/** Ground behind the conversation, and behind the rounded corners of the
- * header and the composer that sit over it. */
-export const DEFAULT_CHAT_BACKGROUND = '#F3F6FC';
-
-/**
- * One place for the conversation's background colour.
- *
- * The message list has always painted it; the chat container behind it was
- * plain white, which is what made the header's rounded bottom corners and
- * the composer's rounded top corners invisible — the corners revealed the
- * white parent, not the conversation.
- */
-export const getChatBackgroundColor = (config?: IConfig): string =>
-  config?.backgroundChat?.color || DEFAULT_CHAT_BACKGROUND;

package/src/helpers/getDisplayFileName.ts

@@ -1,87 +0,0 @@
-import { ensureFilenameHasExtension, filenameFromUrl } from './mimeToExtension';
-
-export interface DisplayFileNameOptions {
-  originalName?: string | null;
-  fileName?: string | null;
-  location?: string | null;
-  mimetype?: string | null;
-}
-
-/**
- * Picks the best human-readable filename for a chat attachment - the
- * single source of truth for every place a file name is rendered in the
- * UI, saved to disk, shared, or downloaded.
- *
- * Priority: `originalName` (the sender's own file name, e.g. "test1.pdf")
- * beats `fileName` (the server's stored/hashed name, e.g.
- * "3f9a1c...c2.pdf") beats the last path segment of `location`. The
- * stored hash name is only a fallback of last resort.
- *
- * Bug #40: display and save/share/download logic used to prefer the
- * stored hash name over the original one, so an attachment sent as
- * "test1.pdf" showed up (and got saved to the phone) as something like
- * "3f9a1c...c2.pdf" - both directions (web -> RN and RN -> RN).
- *
- * Always returns a non-empty string with a valid extension: if the
- * chosen candidate has no extension (a hash name can be `<hex>` with no
- * extension at all, or `<hex>.<ext>`), one is appended from `mimetype`
- * (or `.bin` as a last resort when the mime is unknown/missing too).
- */
-export function getDisplayFileName(options: DisplayFileNameOptions): string {
-  const candidate =
-    (options.originalName && options.originalName.trim()) ||
-    (options.fileName && options.fileName.trim()) ||
-    filenameFromUrl(options.location) ||
-    '';
-  return ensureFilenameHasExtension(candidate, options.mimetype);
-}
-
-/**
- * Makes a display name safe to use as an actual path segment when
- * saving/sharing a file to the device: strips path separators (so an
- * odd/hostile server-provided name can't escape the target directory)
- * and control characters. Keeps the rest of the name - including the
- * extension - intact.
- */
-export function sanitizeFileNameForPath(name: string): string {
-  const cleaned = (name || '')
-    .replace(/[\/\\]/g, '_')
-    // eslint-disable-next-line no-control-regex
-    .replace(/[\x00-\x1f\x7f]/g, '')
-    .trim();
-  return cleaned || 'file';
-}
-
-/**
- * Resolves a filename that is safe to write into a target directory:
- * sanitizes it, then - if `exists` reports a collision - inserts
- * " (1)", " (2)", ... before the extension until a free name is found,
- * so saving two different attachments that share a display name never
- * silently overwrites the first one.
- *
- * `exists` is injected so callers can back it with whatever existence
- * check makes sense for their storage API (expo-file-system,
- * StorageAccessFramework directory listing, ...) - this function stays
- * pure and easy to unit test.
- */
-export async function getUniqueFileName(
-  name: string,
-  exists: (candidateName: string) => Promise<boolean>
-): Promise<string> {
-  const safeName = sanitizeFileNameForPath(name);
-  if (!(await exists(safeName))) {
-    return safeName;
-  }
-  const dotIndex = safeName.lastIndexOf('.');
-  const base = dotIndex > 0 ? safeName.slice(0, dotIndex) : safeName;
-  const ext = dotIndex > 0 ? safeName.slice(dotIndex) : '';
-  // 999 collisions is already a pathological case; fall back to a
-  // timestamp suffix rather than looping forever.
-  for (let i = 1; i < 1000; i += 1) {
-    const candidate = `${base} (${i})${ext}`;
-    if (!(await exists(candidate))) {
-      return candidate;
-    }
-  }
-  return `${base} (${Date.now()})${ext}`;
-}

package/src/helpers/getServerReadTimestamp.ts

@@ -1,197 +0,0 @@
-import type { IMessage, IRoom } from '../types/types';
-import { msgSortableMs } from './msgSortableMs';
-
-// A stored/stamped read marker more than this far past the newest
-// message we actually know about for a room is not "the user is a
-// little ahead" - it's a leftover from a device whose clock was wrong
-// when it stamped the marker (bug #38). Generous on purpose: this value
-// only controls when we're willing to treat an existing marker as
-// corrupt and self-heal it, never how far off a legitimate new write can
-// be, so a false positive here just means a bad value survives one extra
-// cycle, not that a good value gets rejected.
-export const FUTURE_READ_MARKER_TOLERANCE_MS = 5 * 60 * 1000;
-
-export interface ReadTimestampHeapState {
-  messageHeap?: IMessage[] | null;
-  failedMessages?: Record<string, unknown> | null;
-}
-
-type RoomForReadTimestamp = Pick<IRoom, 'jid' | 'messages' | 'lastViewedTimestamp'>;
-
-/**
- * Resolve the "read up to here" marker for `room` using SERVER time,
- * never the device clock.
- *
- * Bug #38: if the device clock is ahead when the user leaves a room, a
- * `Date.now()` read marker lands in the future. The private-store merge
- * (flushLastViewedToPrivateStore.ts) is forward-only ("if (prevNum >=
- * ts) continue"), so once a future marker is written, no later
- * *correct* write can ever replace it - the room's unread count is
- * stuck wrong forever, on every device, from that point on. Anchoring
- * to the newest SERVER-acknowledged message's own timestamp instead
- * means the marker we write can never be ahead of what the server
- * itself has recorded for the room.
- *
- * "Server-acknowledged" excludes:
- *  - a message still marked `pending` (the optimistic bubble shown
- *    while a send is in flight - it carries the DEVICE send time via
- *    `date`, not a server timestamp, until the server echoes it back
- *    and insertMessageWithDelimiter flips `pending` off);
- *  - a message id present in `heapState.messageHeap` (queued retry -
- *    used for offline media sends, see roomHeapSlice.ts) or
- *    `heapState.failedMessages` (a send that never reached the server
- *    at all).
- *
- * `msgSortableMs` (helpers/msgSortableMs.ts) reads the server-assigned microsecond
- * timestamp encoded in the first 13 digits of the message id - the same
- * source already used for message ordering and unread counting - so
- * this stays consistent with the rest of the read/unread pipeline.
- *
- * Falls back to the room's existing `lastViewedTimestamp` (so leaving
- * an empty or never-scrolled room doesn't regress the marker), then to
- * `0` when there's truly nothing to anchor to yet (a brand new room
- * with no history and no prior marker). Callers should treat `0` as
- * "skip the write" rather than substituting a device-clock guess.
- */
-export function getServerReadTimestamp(
-  room: RoomForReadTimestamp | null | undefined,
-  heapState?: ReadTimestampHeapState | null
-): number {
-  if (!room) {return 0;}
-
-  const heapIds = new Set(
-    (heapState?.messageHeap || [])
-      .filter((m) => m && m.id != null)
-      .map((m) => String(m.id))
-  );
-  const failedIds = new Set(Object.keys(heapState?.failedMessages || {}));
-
-  let newest = 0;
-  const messages = room.messages || [];
-  for (const m of messages) {
-    if (!m || !m.id) {continue;}
-    const id = String(m.id);
-    if (id === 'delimiter-new' || id === 'delimiter-new-local') {continue;}
-    if ((m as any).pending) {continue;}
-    if (heapIds.has(id) || failedIds.has(id)) {continue;}
-
-    const ts = msgSortableMs(m);
-    if (ts > newest) {newest = ts;}
-  }
-
-  if (newest > 0) {return newest;}
-  if (room.lastViewedTimestamp && room.lastViewedTimestamp > 0) {
-    return room.lastViewedTimestamp;
-  }
-  return 0;
-}
-
-/**
- * Is `marker` a leftover from a device whose clock was wrong when it
- * stamped a read marker (bug #38)?
- *
- * TWO independent signals must agree before we're willing to throw a
- * stored marker away, because "waive the forward-only guard" is a
- * destructive operation:
- *
- *  1. it sits well past the newest message we know the room has, AND
- *  2. it sits well past real time.
- *
- * Signal 1 alone is NOT enough, and that is the whole point of this
- * function: a device whose local cache for a room is simply stale (very
- * common - any room whose history hasn't been synced yet this session)
- * sees a perfectly legitimate marker written by another device that HAS
- * seen newer messages, and would happily "heal" it backwards, resurrecting
- * already-read messages as unread on every device. A real timestamp can
- * never be ahead of real time, so requiring signal 2 as well means a
- * stale cache on its own can no longer trigger the self-heal.
- *
- * Signal 2 alone is not used either: it would let a device whose own
- * clock is running SLOW mistake every correct marker for a corrupt one.
- */
-export function isCorruptFutureReadMarker(
-  marker: number,
-  newestAckedMs: number
-): boolean {
-  if (!Number.isFinite(marker) || marker <= 0) {return false;}
-  if (!(newestAckedMs > 0)) {return false;}
-  if (marker <= newestAckedMs + FUTURE_READ_MARKER_TOLERANCE_MS) {return false;}
-  return marker > Date.now() + FUTURE_READ_MARKER_TOLERANCE_MS;
-}
-
-/**
- * Resolve the marker to STAMP (locally and to the server) for `room`,
- * honouring an explicit read boundary when one is set.
- *
- * Bug #42 (a regression of #33, reintroduced by #38): #38 made every
- * caller stamp the newest server-acknowledged message unconditionally.
- * That is correct for a user who is at the bottom of the room, but wrong
- * for a user who scrolled up, received messages, and left without
- * scrolling back down - stamping "newest" there silently marks
- * messages they never saw as read, both locally and (because the
- * private-store merge is forward-only) permanently on the server.
- *
- * `boundaryTs` is the msgSortableMs of the newest message the user
- * actually reached (see `readBoundaries` on `RoomMessagesState`,
- * populated by MessageList's `onReadBoundaryChange`). When it's set and
- * positive, it wins - but is still clamped to never exceed the newest
- * server-acknowledged message, so a stale/corrupt boundary can't stamp a
- * marker further ahead than the room's own history supports. When no
- * boundary is set (the common case - the user is at the bottom), this is
- * exactly `getServerReadTimestamp`.
- *
- * Never returns `Date.now()`, directly or indirectly - same rule as
- * `getServerReadTimestamp` (bug #38).
- */
-export function getReadMarkerTimestamp(
-  room: RoomForReadTimestamp | null | undefined,
-  heapState?: ReadTimestampHeapState | null,
-  boundaryTs?: number | null
-): number {
-  const newestAcked = getServerReadTimestamp(room, heapState);
-  if (
-    typeof boundaryTs === 'number' &&
-    Number.isFinite(boundaryTs) &&
-    boundaryTs > 0
-  ) {
-    // `newestAcked === 0` means this room has NOTHING server-acked and no
-    // prior marker, so there is nothing to clamp the boundary against -
-    // and MessageList derives the boundary from the rendered list, which
-    // at that point can only contain pending/failed sends carrying the
-    // DEVICE clock via `date`. Returning it here would smuggle a
-    // device-clock marker back in through the boundary (bug #38). Return
-    // 0 = "nothing to anchor to, skip the write", same contract as
-    // getServerReadTimestamp.
-    return newestAcked > 0 ? Math.min(boundaryTs, newestAcked) : 0;
-  }
-  return newestAcked;
-}
-
-/**
- * The value to hand `flushLastViewedToPrivateStore` as `visibleRoomTs`
- * for a room being left, or `undefined` when no boundary applies (the
- * flush then uses its own newest-acked default).
- *
- * Exists so the SERVER write goes through the SAME clamp as the local
- * stamp. Passing the raw redux boundary straight through would bypass
- * `getReadMarkerTimestamp`'s clamp on exactly the path where a bad value
- * is permanent: the private-store merge is forward-only, so a boundary
- * that (through a pending own message's device `date`, or a stale
- * readBoundaries entry) sat ahead of the room's real history would be
- * written verbatim and could never be corrected again (bug #38).
- */
-export function getFlushBoundaryTs(
-  room: RoomForReadTimestamp | null | undefined,
-  heapState?: ReadTimestampHeapState | null,
-  boundaryTs?: number | null
-): number | undefined {
-  if (
-    typeof boundaryTs !== 'number' ||
-    !Number.isFinite(boundaryTs) ||
-    boundaryTs <= 0
-  ) {
-    return undefined;
-  }
-  const clamped = getReadMarkerTimestamp(room, heapState, boundaryTs);
-  return clamped > 0 ? clamped : undefined;
-}

package/src/helpers/isOwnMessage.ts

@@ -1,90 +0,0 @@
-import { IMessage } from '../types/types';
-
-/**
- * Bug #41: during reconnect catch-up (app was backgrounded/offline, then
- * comes back online), messages replayed from MAM could transiently render
- * on the RIGHT (as if sent by the current user) before flipping to the
- * LEFT a moment later. Root cause: `message.user.id === walletAddress`
- * treats `undefined === undefined` (or `'' === ''`) as a match, and the
- * two sides could independently be empty for one frame -- the message's
- * sender id before the MAM-derived value settled, and/or the current
- * user's id before it rehydrated. Two blank ids must never compare equal.
- *
- * A second, related issue: the same logical sender id can show up in
- * different shapes depending on which code path produced it -- a bare
- * id ("wallet123") or a bare JID with an incidental session resource
- * ("wallet123@host/sessionResource", as `senderJID` attrs carry on the
- * wire -- see src/assets/test.xml). In every shape used in this
- * codebase the identifying segment is the part BEFORE the first '@' (or
- * before '/' when there's no '@'); anything after that -- domain,
- * resource -- is noise. Comparing raw strings with `===` fails whenever
- * one side still carries that noise and the other doesn't. Normalizing
- * both sides (strip resource, strip domain, lowercase) before comparing
- * makes the check tolerant of that drift.
- */
-
-export interface OwnMessageUserLike {
-  id?: string | null;
-  xmppUsername?: string | null;
-  walletAddress?: string | null;
-}
-
-export type OwnMessageCurrentUser =
-  | OwnMessageUserLike
-  | string
-  | null
-  | undefined;
-
-/**
- * Strip a MUC resource (`room@host/resource` -> `room@host`) and then a
- * JID domain (`local@host` -> `local`), lowercasing the result. Applies
- * to both plain ids and full/partial JIDs so either shape normalizes to
- * the same comparable value.
- */
-const normalizeId = (raw: unknown): string => {
-  const value = String(raw ?? '').trim();
-  if (!value) {
-    return '';
-  }
-  const withoutResource = value.split('/')[0];
-  const withoutDomain = withoutResource.includes('@')
-    ? withoutResource.split('@')[0]
-    : withoutResource;
-  return withoutDomain.toLowerCase();
-};
-
-// Same precedence the rest of the app uses when it needs "who am I" as a
-// single id: xmppUsername first, walletAddress as the fallback.
-const resolveCurrentUserId = (currentUser: OwnMessageCurrentUser): string => {
-  if (typeof currentUser === 'string') {
-    return currentUser;
-  }
-  if (!currentUser) {
-    return '';
-  }
-  return (
-    currentUser.xmppUsername || currentUser.walletAddress || currentUser.id || ''
-  );
-};
-
-/**
- * Robustly determine whether `message` was sent by `currentUser`. Never
- * returns true from two blank/undefined ids, and tolerates bare-id vs.
- * full-JID mismatches between the sender id and the current user id.
- */
-export const isOwnMessage = (
-  message: Pick<IMessage, 'user'> | null | undefined,
-  currentUser: OwnMessageCurrentUser
-): boolean => {
-  const messageUserId = normalizeId(message?.user?.id);
-  if (!messageUserId) {
-    return false;
-  }
-
-  const currentUserId = normalizeId(resolveCurrentUserId(currentUser));
-  if (!currentUserId) {
-    return false;
-  }
-
-  return messageUserId === currentUserId;
-};

package/src/helpers/mediaLibraryRuntime.ts

@@ -1,25 +0,0 @@
-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/msgSortableMs.ts

@@ -1,25 +0,0 @@
-// 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;
-};