@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/helpers/fileKind.ts

@@ -0,0 +1,38 @@
+import { filenameFromUrl, isLikelyAudio } from './mimeToExtension';
+
+export type FileKind = 'image' | 'video' | 'audio' | 'file';
+
+interface FileKindInput {
+  mimetype?: string | null;
+  name?: string | null;
+  url?: string | null;
+  duration?: number | string | null;
+  waveForm?: string | null;
+  originalName?: string | null;
+}
+
+/**
+ * Which card a file gets in a bubble. Mirrors the branches MediaMessage has
+ * always used for a single file (image, video, audio, octet-stream as a voice
+ * note, then the voice-message heuristics) so an album, a card stack and a
+ * lone file all agree on what a given file is.
+ */
+export const getFileKind = (input: FileKindInput): FileKind => {
+  const mime = (input.mimetype || '').toLowerCase();
+  if (mime.startsWith('image/')) {return 'image';}
+  if (mime.startsWith('video/')) {return 'video';}
+  if (mime.startsWith('audio/')) {return 'audio';}
+  if (mime.includes('application/octet-stream')) {return 'audio';}
+  const name = input.name || filenameFromUrl(input.url);
+  return isLikelyAudio(mime, name, input.url, {
+    duration: input.duration,
+    waveForm: input.waveForm,
+    originalName: input.originalName,
+  })
+    ? 'audio'
+    : 'file';
+};
+
+/** True for the kinds that sit in the picture/video album. */
+export const isAlbumKind = (kind: FileKind): boolean =>
+  kind === 'image' || kind === 'video';

package/src/helpers/getDataFromXml.ts

@@ -2,6 +2,7 @@ import { Element } from 'ltx';
 import { Iso639_1Codes, IUser } from '../types/types';
 import { transformArrayToObject } from './transformTranslatations';
 import { normalizeXmppUsername } from './xmppUsername';
+import { normalizeMediaDataAttrs } from './mediaWireData';
 
 const getLocalpartFromJid = (jid?: string): string | undefined => {
   const value = String(jid || '').trim();
@@ -122,7 +123,10 @@ export const getDataFromXml = async (stanza: Element): Promise<DataXml | undefin
     photoURL,
   } as any;
 
-  const dataAttrs = data?.attrs || {};
+  // `attachments` and `caption` ride on <data> as strings; decode them here
+  // so every consumer sees the typed values (sealed captions are lifted from
+  // the encrypted body later, see createMessageFromXml).
+  const dataAttrs = normalizeMediaDataAttrs(data?.attrs || {});
 
   return {
     data: dataAttrs,

package/src/helpers/mapWithConcurrency.ts

@@ -0,0 +1,32 @@
+/**
+ * Runs `worker` over `items` with at most `limit` calls in flight, and
+ * resolves with the results in INPUT order, whatever order the calls finish
+ * in. Workers that throw are reported as rejected entries instead of
+ * aborting the rest of the batch, so one failed upload never stops its
+ * siblings.
+ */
+export async function mapWithConcurrency<T, R>(
+  items: readonly T[],
+  limit: number,
+  worker: (item: T, index: number) => Promise<R>
+): Promise<PromiseSettledResult<R>[]> {
+  const results: PromiseSettledResult<R>[] = new Array(items.length);
+  const width = Math.max(1, Math.min(Math.floor(limit) || 1, items.length));
+  let next = 0;
+
+  const lane = async (): Promise<void> => {
+    while (next < items.length) {
+      const index = next;
+      next += 1;
+      try {
+        const value = await worker(items[index]!, index);
+        results[index] = { status: 'fulfilled', value };
+      } catch (reason) {
+        results[index] = { status: 'rejected', reason };
+      }
+    }
+  };
+
+  await Promise.all(Array.from({ length: width }, () => lane()));
+  return results;
+}

package/src/helpers/mediaLimits.ts

@@ -0,0 +1,27 @@
+import type { IConfig } from '../types/types';
+
+/** Hard client-side cap on a single upload. Mirrors the backend's body limit. */
+export const MAX_MEDIA_BYTES = 50 * 1024 * 1024;
+
+/** The most files one message may carry (also the parser-side ceiling). */
+export const MAX_MEDIA_FILES = 10;
+
+/** Files per message the host allows: `attachments.maxFiles`, clamped to 1-10. */
+export const mediaFileCap = (config?: Pick<IConfig, 'attachments'> | null): number => {
+  const configured = Number(config?.attachments?.maxFiles);
+  if (!Number.isFinite(configured)) {return MAX_MEDIA_FILES;}
+  return Math.min(MAX_MEDIA_FILES, Math.max(1, Math.floor(configured)));
+};
+
+/**
+ * Bytes allowed per file: the 50 MB upload cap, lowered by
+ * `attachments.maxSizeMB` when the host sets a smaller one.
+ */
+export const mediaSizeLimit = (
+  config?: Pick<IConfig, 'attachments'> | null,
+  override?: number
+): number => {
+  const base = typeof override === 'number' && override > 0 ? Math.min(override, MAX_MEDIA_BYTES) : MAX_MEDIA_BYTES;
+  const mb = Number(config?.attachments?.maxSizeMB);
+  return Number.isFinite(mb) && mb > 0 ? Math.min(base, mb * 1024 * 1024) : base;
+};

package/src/helpers/mediaSendRetry.ts

@@ -0,0 +1,59 @@
+/**
+ * Retry hooks for media messages whose uploads did not all land.
+ *
+ * The send closure lives inside useSendMessage, but the bubble that shows
+ * "Retry" on a tile is somewhere else in the tree and has no access to it.
+ * The send registers its retry runner under the message id while the
+ * message is unsent, and the bubble looks it up here. The runner is removed
+ * as soon as the message is delivered.
+ */
+
+export type MediaRetryRunner = (indices?: number[]) => Promise<boolean>;
+
+const runners = new Map<string, MediaRetryRunner>();
+
+export const registerMediaRetry = (messageId: string, runner: MediaRetryRunner): void => {
+  runners.set(messageId, runner);
+};
+
+export const unregisterMediaRetry = (messageId: string): void => {
+  runners.delete(messageId);
+};
+
+export const hasMediaRetry = (messageId: string): boolean => runners.has(messageId);
+
+/**
+ * Re-runs the uploads still missing for `messageId` (only `index` / `indices`
+ * when given), then sends the message once every file is in. Resolves to
+ * false when nothing is registered or the attempt did not deliver.
+ */
+export const retryMediaSend = async (
+  messageId: string,
+  index?: number | number[]
+): Promise<boolean> => {
+  const runner = runners.get(messageId);
+  if (!runner) {return false;}
+  const indices = index === undefined ? undefined : Array.isArray(index) ? index : [index];
+  return runner(indices);
+};
+
+const pendingRetryIndices = new Map<string, Set<number>>();
+
+/**
+ * Asks for one file of `messageId` to be retried. Requests made in the same
+ * tick are merged into one run: the runner takes a single run at a time, so
+ * a separate call per tile would drop every retry after the first.
+ */
+export const requestMediaRetry = (messageId: string, index: number): void => {
+  const batch = pendingRetryIndices.get(messageId);
+  if (batch) {
+    batch.add(index);
+    return;
+  }
+  const next = new Set<number>([index]);
+  pendingRetryIndices.set(messageId, next);
+  queueMicrotask(() => {
+    pendingRetryIndices.delete(messageId);
+    retryMediaSend(messageId, [...next]).catch(() => false);
+  });
+};

package/src/helpers/mediaWireData.ts

@@ -0,0 +1,57 @@
+import { parseAttachments } from './attachments';
+import { getMessageCaption, normalizeCaptionMentions } from './caption';
+
+/**
+ * Normalises the media parts of a message's flat `<data>` attributes:
+ *
+ *  - `attachments` (a JSON string on the wire) becomes the typed array, or is
+ *    dropped when it decodes to nothing so the flat legacy fields win;
+ *  - `caption` is kept only when it holds text, with `captionMentions` (JSON
+ *    on the wire) checked against it;
+ *  - in a sealed message (`clientEncrypted`) the caption attributes are
+ *    always dropped: the only caption such a message may show is the one
+ *    inside its encrypted body, which the caller lifts afterwards.
+ *
+ * Safe to apply twice, so the wrapped and the positional parsers can both
+ * call it.
+ */
+export const normalizeMediaDataAttrs = (
+  attrs: Record<string, any>
+): Record<string, any> => {
+  const out: Record<string, any> = { ...attrs };
+
+  if ('attachments' in out) {
+    const attachments = parseAttachments(out.attachments);
+    if (attachments.length > 0) {
+      out.attachments = attachments;
+    } else {
+      delete out.attachments;
+    }
+  }
+
+  if (out.clientEncrypted === 'true') {
+    delete out.caption;
+    delete out.captionMentions;
+    return out;
+  }
+
+  if ('caption' in out) {
+    const caption = getMessageCaption({ caption: out.caption });
+    if (caption) {
+      out.caption = caption;
+      const spans = normalizeCaptionMentions(out.captionMentions, caption);
+      if (spans) {
+        out.captionMentions = spans;
+      } else {
+        delete out.captionMentions;
+      }
+    } else {
+      delete out.caption;
+      delete out.captionMentions;
+    }
+  } else if ('captionMentions' in out) {
+    delete out.captionMentions;
+  }
+
+  return out;
+};

package/src/helpers/mentionSpans.ts

@@ -0,0 +1,17 @@
+import type { IMentionSpan } from '../types/models/message.model';
+
+/**
+ * Keeps only the spans that still read "@Name" at their offset in `text`.
+ * RN does not render mentions; a caption's spans are stored (and checked) so
+ * they survive a round trip to a client that does.
+ */
+export const validateMentionSpans = (
+  text: string,
+  spans: IMentionSpan[]
+): IMentionSpan[] =>
+  spans.filter((span) => {
+    if (span.offset < 0 || span.offset + span.length > text.length) {
+      return false;
+    }
+    return text.slice(span.offset, span.offset + span.length) === `@${span.name}`;
+  });

package/src/helpers/mimeToExtension.ts

@@ -64,6 +64,57 @@ const MIME_TO_EXT: Record<string, string> = {
 
 const VALID_EXT_RE = /\.[a-z0-9]{1,8}$/i;
 
+// Extensions that stand for a picture, video, audio or PDF a bubble can
+// show, read back from the table above (first entry per extension wins).
+// `.webm` and `.svg` are left out on purpose: a recorded voice note is often
+// a `.webm` and must stay generic (audio), and SVG is not a bubble picture.
+const INFERRABLE_EXT_TO_MIME: Record<string, string> = {};
+for (const [mime, ext] of Object.entries(MIME_TO_EXT)) {
+  const inferrable =
+    mime === 'application/pdf' ||
+    mime.startsWith('image/') ||
+    mime.startsWith('video/') ||
+    mime.startsWith('audio/');
+  const bare = ext.slice(1);
+  if (inferrable && bare !== 'webm' && bare !== 'svg' && !INFERRABLE_EXT_TO_MIME[bare]) {
+    INFERRABLE_EXT_TO_MIME[bare] = mime;
+  }
+}
+// Spellings the table above has no entry for.
+Object.assign(INFERRABLE_EXT_TO_MIME, {
+  jpeg: 'image/jpeg',
+  jpe: 'image/jpeg',
+  tif: 'image/tiff',
+  avif: 'image/avif',
+  avi: 'video/x-msvideo',
+  oga: 'audio/ogg',
+  opus: 'audio/ogg',
+  amr: 'audio/amr',
+});
+
+/** A mimetype that says nothing: empty, or the storage's "could not sniff". */
+export function isGenericMime(mime: string | undefined | null): boolean {
+  const normalized = (mime || '').toLowerCase().split(';')[0]!.trim();
+  return (
+    !normalized ||
+    normalized === 'application/octet-stream' ||
+    normalized === 'binary/octet-stream'
+  );
+}
+
+/**
+ * The mimetype a file name's extension stands for, for the pictures, videos,
+ * audio and PDFs a bubble can show. Undefined for anything else.
+ */
+export function inferMimeFromName(
+  name: string | undefined | null
+): string | undefined {
+  const base = String(name || '').split(/[?#]/)[0]!;
+  const dot = base.lastIndexOf('.');
+  if (dot < 1) {return undefined;}
+  return INFERRABLE_EXT_TO_MIME[base.slice(dot + 1).toLowerCase()];
+}
+
 // Audio file extensions we recognise across the SDK. Used for the
 // "looks like audio even when the mimetype is application/octet-stream"
 // heuristic in MediaMessage / FilePreviewModal. Voice-message senders

package/src/helpers/readReceipts.ts

@@ -0,0 +1,219 @@
+import type { IMessage, IRoom } from '../types/types';
+import { msgSortableMs } from './msgSortableMs';
+import { isOwnMessage } from './isOwnMessage';
+import { createUserNameFromSetUser } from './createUserNameFromSetUser';
+
+// Delivery (XEP-0184) and read (XEP-0333) state for the reader's own messages.
+// Pure helpers: the reducers, the stanza handlers, the flush that sends the
+// read watermark and the bubble all read the same rules from here.
+//
+// Receipts are session-only. receivedBy / lastDisplayedByUser are never
+// written to disk (see persistence.ts), so after a reload every own message
+// falls back to "sent" until the peers acknowledge again.
+
+export type ReceiptStatus = 'sent' | 'delivered' | 'seen';
+
+/** Names listed in a "Read by" / "Delivered to" sheet before the rest become "+N". */
+export const RECEIPT_NAME_LIMIT = 5;
+
+const NO_VIEWERS: string[] = [];
+
+/** Stanza ids of the receipt and marker frames (never chat messages). */
+export const isReceiptMarkerId = (id: unknown): boolean => {
+  const value = String(id ?? '');
+  return value.startsWith('message-received') || value.startsWith('message-displayed');
+};
+
+// A message the reader can be shown as displayed: not an optimistic send,
+// not the "New messages" divider, not a client-only call-log row.
+const isDisplayableForReceipts = (message: IMessage | undefined | null): boolean => {
+  if (!message) return false;
+  if (message.pending) return false;
+  if (message.id === 'delimiter-new') return false;
+  if (String(message.id || '').startsWith('calllog-')) return false;
+  return true;
+};
+
+/**
+ * The message id that becomes this reader's read watermark, or null when
+ * nothing should be sent: no displayable message, the newest message is the
+ * reader's own (nothing to report), or a read boundary (the reader scrolled
+ * up) sits before every message. With a boundary the watermark is the newest
+ * message at or before it, so a scrolled-up reader never claims messages they
+ * did not reach.
+ */
+export const getReadWatermarkMessageId = (
+  room: Pick<IRoom, 'messages'> | null | undefined,
+  selfXmppUsername: string,
+  boundaryTs?: number | null
+): string | null => {
+  if (!selfXmppUsername) return null;
+  const messages = (room?.messages || []).filter(isDisplayableForReceipts);
+  if (messages.length === 0) return null;
+  const newest = messages[messages.length - 1];
+  if (isOwnMessage(newest, selfXmppUsername)) return null;
+  if (typeof boundaryTs === 'number' && boundaryTs > 0) {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (msgSortableMs(messages[i]) <= boundaryTs) return String(messages[i].id);
+    }
+    return null;
+  }
+  return String(newest.id);
+};
+
+/** The slice of the redux state the receipt rules read. */
+export interface ReceiptStoreState {
+  chatSettingStore?: {
+    config?: { disableLastRead?: boolean; disableReadReceipts?: boolean } | null;
+    user?: { xmppUsername?: string | null; walletAddress?: string | null } | null;
+  } | null;
+  rooms: {
+    rooms: Record<string, IRoom>;
+    visibleRoomJID: string | null;
+    jumpWindow: { roomJID: string } | null;
+    readBoundaries: Record<string, number>;
+  };
+}
+
+// The reader's identity as the message list resolves it (xmppUsername, then
+// walletAddress), so the watermark and the bubble agree on "own".
+export const selfIdentity = (state: ReceiptStoreState): string =>
+  state.chatSettingStore?.user?.xmppUsername || state.chatSettingStore?.user?.walletAddress || '';
+
+/**
+ * Watermark to send for `roomJid` right now, or null. Sends only while the
+ * room is the one on screen, never while an old-history jump window is open,
+ * and never when read markers are switched off (`disableLastRead` or
+ * `disableReadReceipts`).
+ */
+export const computeReadWatermark = (
+  state: ReceiptStoreState,
+  roomJid: string
+): string | null => {
+  if (!roomJid) return null;
+  const config = state.chatSettingStore?.config;
+  if (config?.disableLastRead || config?.disableReadReceipts) return null;
+  const rooms = state.rooms;
+  if (rooms.visibleRoomJID !== roomJid) return null;
+  if (rooms.jumpWindow?.roomJID === roomJid) return null;
+  return getReadWatermarkMessageId(
+    rooms.rooms?.[roomJid],
+    selfIdentity(state),
+    rooms.readBoundaries?.[roomJid] ?? null
+  );
+};
+
+/**
+ * Other occupants whose read watermark sits at or after `messageId` in the
+ * room's list. Returns the shared empty array when there are none, so the
+ * selector result stays shallow-equal between store updates.
+ */
+export const viewersAtOrAfter = (
+  room: Pick<IRoom, 'messages' | 'lastDisplayedByUser'> | null | undefined,
+  messageId: string,
+  selfXmppUsername: string
+): string[] => {
+  const watermark = room?.lastDisplayedByUser;
+  const messages = room?.messages;
+  if (!watermark || !messages || messages.length === 0 || !messageId) return NO_VIEWERS;
+  const viewers = Object.keys(watermark).filter(
+    (xmppUsername) => xmppUsername !== selfXmppUsername
+  );
+  if (viewers.length === 0) return NO_VIEWERS;
+  const indexOf = (id: string): number => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].id === id) return i;
+    }
+    return -1;
+  };
+  const thisIndex = indexOf(messageId);
+  if (thisIndex === -1) return NO_VIEWERS;
+  const seen = viewers.filter((xmppUsername) => {
+    const displayedIndex = indexOf(watermark[xmppUsername]);
+    return displayedIndex !== -1 && displayedIndex >= thisIndex;
+  });
+  return seen.length > 0 ? seen : NO_VIEWERS;
+};
+
+/** Selector form of viewersAtOrAfter, keyed by room and message. */
+export const selectSeenBy = (
+  state: { rooms: { rooms: Record<string, IRoom> } },
+  roomJid: string,
+  messageId: string,
+  selfXmppUsername: string
+): string[] =>
+  viewersAtOrAfter(state.rooms.rooms?.[roomJid], messageId, selfXmppUsername);
+
+/**
+ * sent / delivered / seen for one of the reader's own messages. "seen" wins
+ * over "delivered", which wins over "sent". Only other occupants count.
+ */
+export const deliveredToOthers = (
+  message: Pick<IMessage, 'receivedBy'>,
+  selfXmppUsername: string
+): string[] =>
+  Object.keys(message.receivedBy || {}).filter(
+    (xmppUsername) => xmppUsername !== selfXmppUsername
+  );
+
+export const statusOf = (seenBy: string[], deliveredTo: string[]): ReceiptStatus =>
+  seenBy.length > 0 ? 'seen' : deliveredTo.length > 0 ? 'delivered' : 'sent';
+
+export const getReceiptStatus = (
+  message: Pick<IMessage, 'id' | 'receivedBy'>,
+  room: Pick<IRoom, 'messages' | 'lastDisplayedByUser'> | null | undefined,
+  selfXmppUsername: string
+): { status: ReceiptStatus; seenBy: string[]; deliveredTo: string[] } => {
+  const deliveredTo = deliveredToOthers(message, selfXmppUsername);
+  const seenBy = viewersAtOrAfter(room, String(message.id), selfXmppUsername);
+  return { status: statusOf(seenBy, deliveredTo), seenBy, deliveredTo };
+};
+
+/** Display name for a receipt entry: usersSet first, the raw username as the last resort. */
+export const receiptNameFor = (
+  usersSet: Record<string, any> | undefined,
+  xmppUsername: string
+): string => {
+  const name = createUserNameFromSetUser(usersSet || {}, xmppUsername);
+  return name && name !== 'Deleted User' ? name : xmppUsername;
+};
+
+const formatNames = (names: string[]): string => {
+  const shown = names.slice(0, RECEIPT_NAME_LIMIT);
+  const extra = names.length - shown.length;
+  return extra > 0 ? `${shown.join(', ')} +${extra}` : shown.join(', ');
+};
+
+/**
+ * Text for the tick's details sheet. Groups name the readers or recipients
+ * (capped, then "+N"); a 1:1 room only says Read / Delivered.
+ */
+export const describeReceipt = ({
+  status,
+  isGroup,
+  seenBy,
+  deliveredTo,
+  nameOf,
+  t,
+}: {
+  status: ReceiptStatus;
+  isGroup: boolean;
+  seenBy: string[];
+  deliveredTo: string[];
+  nameOf: (xmppUsername: string) => string;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}): string => {
+  if (status === 'seen') {
+    return isGroup
+      ? t('message.receipt.readBy', { names: formatNames(seenBy.map(nameOf)) })
+      : t('message.receipt.read');
+  }
+  if (status === 'delivered') {
+    return isGroup
+      ? t('message.receipt.deliveredTo', {
+          names: formatNames(deliveredTo.map(nameOf)),
+        })
+      : t('message.receipt.delivered');
+  }
+  return t('message.receipt.sent');
+};

package/src/helpers/repairFilenameEncoding.ts

@@ -0,0 +1,82 @@
+/**
+ * Repairs file names the backend returns as UTF-8 bytes read as Latin-1
+ * (the classic multer/busboy `originalname` problem): "Список.pdf" arrives
+ * as "СпиÑок.pdf".
+ *
+ * Pure and conservative: a name is only replaced when every character fits
+ * in one byte, the bytes decode as strict UTF-8, the result differs, holds
+ * no replacement or control characters and contains at least one letter
+ * outside basic Latin. A correct name is returned untouched.
+ */
+
+const hasMultiByteSignature = (value: string): boolean =>
+  // UTF-8 lead bytes C2-F4 followed by a continuation byte 80-BF.
+  /[Â-ô][\u0080-¿]/.test(value);
+
+const looksLikePercentEncoded = (value: string): boolean =>
+  /%[0-9A-Fa-f]{2}/.test(value);
+
+// C0 controls, DEL and the C1 range, checked per UTF-16 code unit.
+const hasControlChars = (value: string): boolean => {
+  for (let i = 0; i < value.length; i += 1) {
+    const code = value.charCodeAt(i);
+    if (code < 0x20 || (code >= 0x7f && code <= 0x9f)) return true;
+  }
+  return false;
+};
+
+// Any code unit above ASCII (same as the former [^\u0000-\u007F] test).
+const hasNonAscii = (value: string): boolean => /[\u0080-\uFFFF]/.test(value);
+
+const decodeLatin1AsUtf8 = (value: string): string | null => {
+  if (typeof TextDecoder === 'undefined') return null;
+  const bytes = new Uint8Array(value.length);
+  for (let i = 0; i < value.length; i += 1) {
+    const code = value.charCodeAt(i);
+    if (code > 0xff) return null;
+    bytes[i] = code;
+  }
+  try {
+    return new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+  } catch {
+    return null;
+  }
+};
+
+const isPlausibleRepair = (original: string, repaired: string): boolean =>
+  repaired !== original &&
+  !repaired.includes('�') &&
+  !hasControlChars(repaired) &&
+  // Must contain a letter from a non-Latin-1 script or a real accented
+  // letter, otherwise the "fix" is just noise.
+  hasNonAscii(repaired) &&
+  /\p{L}/u.test(repaired);
+
+const tryPercentDecode = (value: string): string => {
+  if (!looksLikePercentEncoded(value)) return value;
+  try {
+    const decoded = decodeURIComponent(value);
+    return hasControlChars(decoded) || decoded.includes('�') ? value : decoded;
+  } catch {
+    return value;
+  }
+};
+
+export const repairFilenameEncoding = (name: string): string => {
+  if (typeof name !== 'string' || name === '') return name;
+
+  let current = name;
+
+  // Percent-encoded names ("%D0%A1...") first; they may also be mojibake
+  // after decoding, so run the byte repair on the result.
+  const unescaped = tryPercentDecode(current);
+  if (unescaped !== current && hasNonAscii(unescaped)) {
+    current = unescaped;
+  }
+
+  if (!hasMultiByteSignature(current)) return current;
+
+  const repaired = decodeLatin1AsUtf8(current);
+  if (repaired !== null && isPlausibleRepair(current, repaired)) return repaired;
+  return current;
+};

package/src/helpers/safeJson.ts

@@ -0,0 +1,11 @@
+export const safeJsonParse = <T>(rawValue: unknown, fallback: T): T => {
+  if (typeof rawValue !== 'string' || rawValue.trim() === '') {
+    return fallback;
+  }
+
+  try {
+    return JSON.parse(rawValue) as T;
+  } catch {
+    return fallback;
+  }
+};

package/src/helpers/updateMessagesTillLast.tsx

@@ -74,7 +74,8 @@ export const updateMessagesTillLast = async (
                 { coalesceRoom: true, source: 'background', selfApplied: true }
               );
 
-              if (!fetchedMessages.length) {break;}
+              // undefined when the stanza was dropped (e.g. reconnecting).
+              if (!fetchedMessages?.length) {break;}
 
               counter++;