@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/i18n/strings.ts

@@ -14,6 +14,17 @@
 export type UiStringTable = Record<string, string>;
 
 const en: UiStringTable = {
+  'attachment.moreCount': '+{count}',
+  'attachment.moreLabel': '{count} more files',
+  'attachment.previous': 'Previous file',
+  'attachment.next': 'Next file',
+  'attachment.position': '{index} of {total}',
+  'attachment.count': '{count} attachments',
+  'attachment.limit': 'You can attach up to {count} files to one message',
+  'attachment.tooLarge': '"{name}" is over the {max} limit',
+  'attachment.uploadFailed': 'Upload failed',
+  'attachment.retryUpload': 'Retry',
+  'attachment.remove': 'Remove file',
   'search.placeholder': 'Search...',
   'roomList.title': 'Chats',
   'connection.connecting': 'Connecting…',
@@ -37,6 +48,11 @@ const en: UiStringTable = {
   'date.yesterday': 'Yesterday',
   'message.deleted': 'Message deleted',
   'message.edited': 'edited',
+  'message.receipt.sent': 'Sent',
+  'message.receipt.delivered': 'Delivered',
+  'message.receipt.read': 'Read',
+  'message.receipt.readBy': 'Read by {names}',
+  'message.receipt.deliveredTo': 'Delivered to {names}',
   'message.sending': 'sending...',
   'message.failedRetry': '! Failed — tap to retry',
   'thread.title': 'Thread',
@@ -116,6 +132,14 @@ const en: UiStringTable = {
   'call.action.startCamera': 'Turn camera on',
   'call.action.switchCamera': 'Switch camera',
   'call.action.swapVideo': 'Swap videos',
+  'call.action.fillVideo': 'Stretch video',
+  'call.action.fitVideo': 'Show whole video',
+  'call.notification.ongoing': 'Ongoing call',
+  'call.notification.ongoingVideo': 'Ongoing video call',
+  'call.notification.mute': 'Mute',
+  'call.notification.unmute': 'Unmute',
+  'call.notification.cameraOn': 'Camera on',
+  'call.notification.cameraOff': 'Camera off',
   'call.action.speakerOn': 'Turn speaker on',
   'call.action.speakerOff': 'Turn speaker off',
   'call.action.startAudioCall': 'Start audio call',
@@ -395,6 +419,17 @@ const en: UiStringTable = {
 };
 
 const fr: UiStringTable = {
+  'attachment.moreCount': '+{count}',
+  'attachment.moreLabel': '{count} fichiers de plus',
+  'attachment.previous': 'Fichier précédent',
+  'attachment.next': 'Fichier suivant',
+  'attachment.position': '{index} sur {total}',
+  'attachment.count': '{count} pièces jointes',
+  'attachment.limit': 'Un message peut contenir au plus {count} fichiers',
+  'attachment.tooLarge': '« {name} » dépasse la limite de {max}',
+  'attachment.uploadFailed': 'Échec du téléversement',
+  'attachment.retryUpload': 'Réessayer',
+  'attachment.remove': 'Retirer le fichier',
   'search.placeholder': 'Rechercher...',
   'roomList.title': 'Discussions',
   'connection.connecting': 'Connexion…',
@@ -418,6 +453,11 @@ const fr: UiStringTable = {
   'date.yesterday': 'Hier',
   'message.deleted': 'Message supprimé',
   'message.edited': 'modifié',
+  'message.receipt.sent': 'Envoyé',
+  'message.receipt.delivered': 'Distribué',
+  'message.receipt.read': 'Lu',
+  'message.receipt.readBy': 'Lu par {names}',
+  'message.receipt.deliveredTo': 'Distribué à {names}',
   'message.sending': 'envoi...',
   'message.failedRetry': '! Échec — touchez pour réessayer',
   'thread.title': 'Fil',
@@ -497,6 +537,14 @@ const fr: UiStringTable = {
   'call.action.startCamera': 'Activer la caméra',
   'call.action.switchCamera': 'Changer de caméra',
   'call.action.swapVideo': 'Inverser les vidéos',
+  'call.action.fillVideo': 'Étirer la vidéo',
+  'call.action.fitVideo': 'Afficher toute la vidéo',
+  'call.notification.ongoing': 'Appel en cours',
+  'call.notification.ongoingVideo': 'Appel vidéo en cours',
+  'call.notification.mute': 'Couper',
+  'call.notification.unmute': 'Réactiver',
+  'call.notification.cameraOn': 'Caméra on',
+  'call.notification.cameraOff': 'Caméra off',
   'call.action.speakerOn': 'Activer le haut-parleur',
   'call.action.speakerOff': 'Désactiver le haut-parleur',
   'call.action.startAudioCall': 'Démarrer un appel audio',
@@ -776,6 +824,17 @@ const fr: UiStringTable = {
 };
 
 const es: UiStringTable = {
+  'attachment.moreCount': '+{count}',
+  'attachment.moreLabel': '{count} archivos más',
+  'attachment.previous': 'Archivo anterior',
+  'attachment.next': 'Archivo siguiente',
+  'attachment.position': '{index} de {total}',
+  'attachment.count': '{count} archivos adjuntos',
+  'attachment.limit': 'Puedes adjuntar hasta {count} archivos en un mensaje',
+  'attachment.tooLarge': '"{name}" supera el límite de {max}',
+  'attachment.uploadFailed': 'Error al subir',
+  'attachment.retryUpload': 'Reintentar',
+  'attachment.remove': 'Quitar archivo',
   'search.placeholder': 'Buscar...',
   'roomList.title': 'Conversaciones',
   'connection.connecting': 'Conectando…',
@@ -799,6 +858,11 @@ const es: UiStringTable = {
   'date.yesterday': 'Ayer',
   'message.deleted': 'Mensaje eliminado',
   'message.edited': 'editado',
+  'message.receipt.sent': 'Enviado',
+  'message.receipt.delivered': 'Entregado',
+  'message.receipt.read': 'Leído',
+  'message.receipt.readBy': 'Leído por {names}',
+  'message.receipt.deliveredTo': 'Entregado a {names}',
   'message.sending': 'enviando...',
   'message.failedRetry': '! Error — toca para reintentar',
   'thread.title': 'Hilo',
@@ -878,6 +942,14 @@ const es: UiStringTable = {
   'call.action.startCamera': 'Encender la cámara',
   'call.action.switchCamera': 'Cambiar de cámara',
   'call.action.swapVideo': 'Intercambiar vídeos',
+  'call.action.fillVideo': 'Ampliar vídeo',
+  'call.action.fitVideo': 'Ver vídeo completo',
+  'call.notification.ongoing': 'Llamada en curso',
+  'call.notification.ongoingVideo': 'Videollamada en curso',
+  'call.notification.mute': 'Silenciar',
+  'call.notification.unmute': 'Activar',
+  'call.notification.cameraOn': 'Cámara on',
+  'call.notification.cameraOff': 'Cámara off',
   'call.action.speakerOn': 'Activar el altavoz',
   'call.action.speakerOff': 'Desactivar el altavoz',
   'call.action.startAudioCall': 'Iniciar llamada de audio',
@@ -1157,6 +1229,17 @@ const es: UiStringTable = {
 };
 
 const pt: UiStringTable = {
+  'attachment.moreCount': '+{count}',
+  'attachment.moreLabel': 'mais {count} arquivos',
+  'attachment.previous': 'Arquivo anterior',
+  'attachment.next': 'Próximo arquivo',
+  'attachment.position': '{index} de {total}',
+  'attachment.count': '{count} anexos',
+  'attachment.limit': 'Pode anexar até {count} ficheiros a uma mensagem',
+  'attachment.tooLarge': '"{name}" excede o limite de {max}',
+  'attachment.uploadFailed': 'Falha no carregamento',
+  'attachment.retryUpload': 'Tentar novamente',
+  'attachment.remove': 'Remover ficheiro',
   'search.placeholder': 'Pesquisar...',
   'roomList.title': 'Conversas',
   'connection.connecting': 'A ligar…',
@@ -1180,6 +1263,11 @@ const pt: UiStringTable = {
   'date.yesterday': 'Ontem',
   'message.deleted': 'Mensagem eliminada',
   'message.edited': 'editado',
+  'message.receipt.sent': 'Enviada',
+  'message.receipt.delivered': 'Entregue',
+  'message.receipt.read': 'Lida',
+  'message.receipt.readBy': 'Lida por {names}',
+  'message.receipt.deliveredTo': 'Entregue para {names}',
   'message.sending': 'a enviar...',
   'message.failedRetry': '! Falhou — toque para tentar de novo',
   'thread.title': 'Tópico',
@@ -1259,6 +1347,14 @@ const pt: UiStringTable = {
   'call.action.startCamera': 'Ligar a câmara',
   'call.action.switchCamera': 'Mudar de câmara',
   'call.action.swapVideo': 'Trocar vídeos',
+  'call.action.fillVideo': 'Esticar vídeo',
+  'call.action.fitVideo': 'Mostrar vídeo inteiro',
+  'call.notification.ongoing': 'Chamada em andamento',
+  'call.notification.ongoingVideo': 'Videochamada em andamento',
+  'call.notification.mute': 'Silenciar',
+  'call.notification.unmute': 'Ativar som',
+  'call.notification.cameraOn': 'Ligar câmera',
+  'call.notification.cameraOff': 'Desligar câmera',
   'call.action.speakerOn': 'Ligar o altifalante',
   'call.action.speakerOff': 'Desligar o altifalante',
   'call.action.startAudioCall': 'Iniciar chamada de áudio',
@@ -1538,6 +1634,17 @@ const pt: UiStringTable = {
 };
 
 const ht: UiStringTable = {
+  'attachment.moreCount': '+{count}',
+  'attachment.moreLabel': '{count} lòt fichye ankò',
+  'attachment.previous': 'Fichye anvan an',
+  'attachment.next': 'Fichye ki vini an',
+  'attachment.position': '{index} sou {total}',
+  'attachment.count': '{count} pyès jwenn',
+  'attachment.limit': 'Ou ka mete jiska {count} fichye nan yon mesaj',
+  'attachment.tooLarge': '"{name}" depase limit {max} la',
+  'attachment.uploadFailed': 'Telechajman an echwe',
+  'attachment.retryUpload': 'Eseye ankò',
+  'attachment.remove': 'Retire fichye a',
   'search.placeholder': 'Chèche...',
   'roomList.title': 'Chat yo',
   'connection.connecting': 'Ap konekte…',
@@ -1561,6 +1668,11 @@ const ht: UiStringTable = {
   'date.yesterday': 'Yè',
   'message.deleted': 'Mesaj efase',
   'message.edited': 'modifye',
+  'message.receipt.sent': 'Voye',
+  'message.receipt.delivered': 'Livre',
+  'message.receipt.read': 'Li',
+  'message.receipt.readBy': 'Li pa {names}',
+  'message.receipt.deliveredTo': 'Livre a {names}',
   'message.sending': 'ap voye...',
   'message.failedRetry': '! Echwe — tape pou eseye ankò',
   'thread.title': 'Fil',
@@ -1640,6 +1752,14 @@ const ht: UiStringTable = {
   'call.action.startCamera': 'Limen kamera a',
   'call.action.switchCamera': 'Chanje kamera',
   'call.action.swapVideo': 'Chanje videyo yo',
+  'call.action.fillVideo': 'Lonje videyo a',
+  'call.action.fitVideo': 'Montre tout videyo a',
+  'call.notification.ongoing': 'Apèl k ap fèt',
+  'call.notification.ongoingVideo': 'Apèl videyo k ap fèt',
+  'call.notification.mute': 'Fèmen mikwo',
+  'call.notification.unmute': 'Louvri mikwo',
+  'call.notification.cameraOn': 'Limen kamera',
+  'call.notification.cameraOff': 'Etenn kamera',
   'call.action.speakerOn': 'Limen opalè a',
   'call.action.speakerOff': 'Etenn opalè a',
   'call.action.startAudioCall': 'Kòmanse yon apèl odyo',
@@ -1919,6 +2039,17 @@ const ht: UiStringTable = {
 };
 
 const zh: UiStringTable = {
+  'attachment.moreCount': '+{count}',
+  'attachment.moreLabel': '另外 {count} 个文件',
+  'attachment.previous': '上一个文件',
+  'attachment.next': '下一个文件',
+  'attachment.position': '第 {index} 个，共 {total} 个',
+  'attachment.count': '{count} 个附件',
+  'attachment.limit': '一条消息最多附带 {count} 个文件',
+  'attachment.tooLarge': '"{name}" 超过 {max} 的限制',
+  'attachment.uploadFailed': '上传失败',
+  'attachment.retryUpload': '重试',
+  'attachment.remove': '移除文件',
   'search.placeholder': '搜索...',
   'roomList.title': '聊天',
   'connection.connecting': '连接中…',
@@ -1942,6 +2073,11 @@ const zh: UiStringTable = {
   'date.yesterday': '昨天',
   'message.deleted': '消息已删除',
   'message.edited': '已编辑',
+  'message.receipt.sent': '已发送',
+  'message.receipt.delivered': '已送达',
+  'message.receipt.read': '已读',
+  'message.receipt.readBy': '已读：{names}',
+  'message.receipt.deliveredTo': '已送达：{names}',
   'message.sending': '发送中...',
   'message.failedRetry': '! 发送失败 — 点击重试',
   'thread.title': '话题',
@@ -2021,6 +2157,14 @@ const zh: UiStringTable = {
   'call.action.startCamera': '打开摄像头',
   'call.action.switchCamera': '切换摄像头',
   'call.action.swapVideo': '切换画面',
+  'call.action.fillVideo': '铺满画面',
+  'call.action.fitVideo': '显示完整画面',
+  'call.notification.ongoing': '通话中',
+  'call.notification.ongoingVideo': '视频通话中',
+  'call.notification.mute': '静音',
+  'call.notification.unmute': '取消静音',
+  'call.notification.cameraOn': '开启摄像头',
+  'call.notification.cameraOff': '关闭摄像头',
   'call.action.speakerOn': '打开扬声器',
   'call.action.speakerOff': '关闭扬声器',
   'call.action.startAudioCall': '发起语音通话',

package/src/main.ts

@@ -91,6 +91,9 @@ export type {
   ChatTextStyle,
   VideoCallsConfig,
   VideoCallIcons,
+  OngoingCallNotification,
+  OngoingCallNotificationAction,
+  OngoingCallNotificationState,
 } from './types/types';
 export type { Iso639_1Codes } from './types/models/language.model';
 export type { TranslateMode } from './utils/translateModePolicy';

package/src/networking/api-requests/auth.api.ts

@@ -189,10 +189,14 @@ const cloneFormData = (formData: FormData): FormData => {
   return copy;
 };
 
+// How long an upload may sit without progress before it is aborted.
+const UPLOAD_STALL_MS = 90_000;
+
 function postMultipart(
   url: string,
   body: FormData,
-  path: string
+  path: string,
+  onProgress?: (percent: number) => void
 ): Promise<{ data: any }> {
   const token = store.getState().chatSettingStore?.user?.token ?? '';
 
@@ -249,10 +253,59 @@ function postMultipart(
     xhr.ontimeout = () => failNetwork('Upload timed out');
     xhr.onabort = () => failNetwork('Upload aborted');
 
+    // A stalled connection must not hold an upload (and the message waiting on
+    // it) forever: abort when the body makes no progress for UPLOAD_STALL_MS,
+    // and again while the server takes that long to answer once it is up.
+    let stallTimer: ReturnType<typeof setTimeout> | null = null;
+    const armStall = () => {
+      if (stallTimer) {clearTimeout(stallTimer);}
+      stallTimer = setTimeout(() => {
+        try {
+          xhr.abort();
+        } catch {
+          // already finished
+        }
+      }, UPLOAD_STALL_MS);
+    };
+    const disarmStall = () => {
+      if (stallTimer) {clearTimeout(stallTimer);}
+      stallTimer = null;
+    };
+    const settledOnload = xhr.onload;
+    xhr.onload = (...args: any[]) => {
+      disarmStall();
+      (settledOnload as any)?.apply(xhr, args);
+    };
+    const settledOnerror = xhr.onerror;
+    xhr.onerror = (...args: any[]) => {
+      disarmStall();
+      (settledOnerror as any)?.apply(xhr, args);
+    };
+    const settledOnabort = xhr.onabort;
+    xhr.onabort = (...args: any[]) => {
+      disarmStall();
+      (settledOnabort as any)?.apply(xhr, args);
+    };
+
+    if (xhr.upload) {
+      xhr.upload.onprogress = (event: ProgressEvent) => {
+        armStall();
+        if (!onProgress) {return;}
+        if (!event.lengthComputable || !(event.total > 0)) {return;}
+        const percent = Math.min(100, Math.max(0, Math.round((event.loaded / event.total) * 100)));
+        try {
+          onProgress(percent);
+        } catch {
+          // A progress listener must never fail the upload itself.
+        }
+      };
+    }
+
     xhr.open('POST', url);
     xhr.setRequestHeader('Authorization', token);
     xhr.setRequestHeader('Accept', '*/*');
     // Deliberately no Content-Type — see the note above.
+    armStall();
     xhr.send(body as any);
   });
 }
@@ -268,6 +321,8 @@ let secureUploadUnavailable = false;
 
 export interface UploadFileOptions {
   clientEncrypted?: boolean;
+  /** Called with 0 to 100 as the request body goes up (XHR upload progress). */
+  onProgress?: (percent: number) => void;
 }
 
 export async function uploadFileV2(
@@ -289,7 +344,8 @@ export async function uploadFileV2(
       return await postMultipart(
         `${apiRoot}${SECURE_UPLOAD_PATH}`,
         body,
-        SECURE_UPLOAD_PATH
+        SECURE_UPLOAD_PATH,
+        options.onProgress
       );
     } catch (error) {
       if (!canFallBackToLegacyUpload(error)) {throw error;}
@@ -305,7 +361,8 @@ export async function uploadFileV2(
   return postMultipart(
     `${apiRoot}${LEGACY_UPLOAD_PATH}`,
     formData,
-    LEGACY_UPLOAD_PATH
+    LEGACY_UPLOAD_PATH,
+    options.onProgress
   );
 }
 

package/src/networking/stanzaHandlers.ts

@@ -1,5 +1,6 @@
 import { Element } from 'ltx';
 import { store } from '../roomStore';
+import type XmppClient from './xmppClient';
 import {
   claimMamResult,
   collectMamMessage,
@@ -14,6 +15,8 @@ import {
   editRoomMessage,
   setComposing,
   setCurrentRoom,
+  setDisplayedMarker,
+  setReceivedReceipt,
   setRoomRole,
   setReactions,
   updateRoom,
@@ -31,6 +34,35 @@ import { translateKey } from '../i18n/strings';
 import { isWindowQueryId } from './xmpp/mamQueryIds';
 import { loadRoomMembers } from './api-requests/rooms.api';
 import { subscribeRoomForPush } from '../services/pushSubscriptionService';
+import { isReceiptMarkerId } from '../helpers/readReceipts';
+
+const RECEIPTS_NS = 'urn:xmpp:receipts';
+const CHAT_MARKERS_NS = 'urn:xmpp:chat-markers:0';
+
+// XEP-0184 / XEP-0333 frames: broadcast to the room, carry no <data>, and are
+// never chat messages (no bubble, no unread, no toast).
+const isReceiptMarkerStanza = (stanza: any): boolean =>
+  isReceiptMarkerId(stanza?.attrs?.id) ||
+  !!stanza?.getChild?.('received', RECEIPTS_NS) ||
+  !!stanza?.getChild?.('displayed', CHAT_MARKERS_NS);
+
+// XEP-0184: ack a message from someone else so their client can move its
+// tick to "delivered". Our own echo and system messages are never acked.
+const ackReceivedMessage = (
+  message: IMessage,
+  roomJID: string,
+  stanzaFrom: string | undefined,
+  senderJID: string | undefined,
+  xmppWs?: XmppClient
+): void => {
+  if (!xmppWs?.sendReceivedReceiptStanza || !message?.id) {return;}
+  if (message.isSystemMessage === 'true') {return;}
+  // A call-log row is built on this device; the sender has no such message.
+  if (String(message.id).startsWith('calllog-')) {return;}
+  const user = store.getState().chatSettingStore.user;
+  if (isOwnIncomingMessage({ message, stanzaFrom, senderJID, user })) {return;}
+  xmppWs.sendReceivedReceiptStanza(String(message.id), roomJID);
+};
 
 // TO DO: we are thinking to refactor this code in the following way:
 // each stanza will be parsed for 'type'
@@ -41,7 +73,8 @@ import { subscribeRoomForPush } from '../services/pushSubscriptionService';
 // types can be added into our chat protocol (XMPP stanza add field type="") to make it easier to parse here
 
 //core default
-const onRealtimeMessage = async (stanza: Element) => {
+const onRealtimeMessage = async (stanza: Element, xmppWs?: XmppClient) => {
+  if (isReceiptMarkerStanza(stanza)) {return;}
   if (
     !stanza?.getChild('result') &&
     !stanza.getChild('composing') &&
@@ -120,6 +153,7 @@ const onRealtimeMessage = async (stanza: Element) => {
         message,
       })
     );
+    ackReceivedMessage(message, roomJID, stanza.attrs.from, senderJID, xmppWs);
     // A sender missing from usersSet (a big room only carries 30 members)
     // is resolved lazily; known and recently failed ids are dropped inside.
     try {
@@ -196,6 +230,38 @@ const onDeleteMessage = async (stanza: Element) => {
   }
 };
 
+// XEP-0184 delivery receipt from an occupant. The real sender travels in the
+// <received> `from` attr, because the stanza's own `from` is the room nick.
+const onReceivedReceipt = (stanza: Element) => {
+  if (!String(stanza?.attrs?.id || '').startsWith('message-received')) {return;}
+  const received = stanza.getChild('received', RECEIPTS_NS);
+  if (!received) {return;}
+  const messageId = received.attrs.id;
+  const fromXmppUsername = String(received.attrs.from || '').split('@')[0];
+  const roomJID = String(stanza.attrs.from || '').split('/')[0];
+  if (!messageId || !fromXmppUsername || !roomJID) {return;}
+  store.dispatch(
+    setReceivedReceipt({
+      roomJID,
+      messageId,
+      fromXmppUsername,
+      timestamp: Date.now(),
+    })
+  );
+};
+
+// XEP-0333 read marker from an occupant: one watermark per user and room.
+const onDisplayedMarker = (stanza: Element) => {
+  if (!String(stanza?.attrs?.id || '').startsWith('message-displayed')) {return;}
+  const displayed = stanza.getChild('displayed', CHAT_MARKERS_NS);
+  if (!displayed) {return;}
+  const messageId = displayed.attrs.id;
+  const xmppUsername = String(displayed.attrs.from || '').split('@')[0];
+  const roomJID = String(stanza.attrs.from || '').split('/')[0];
+  if (!messageId || !xmppUsername || !roomJID) {return;}
+  store.dispatch(setDisplayedMarker({ roomJID, xmppUsername, messageId }));
+};
+
 const onEditMessage = async (stanza: Element) => {
   if (stanza?.attrs?.id?.includes('edit-message')) {
     const stanzaId = stanza.getChild('stanza-id');
@@ -225,6 +291,11 @@ const parseMamResult = async (stanza: any): Promise<IMessage | undefined> => {
       .getChild('result')
       ?.getChild('forwarded')
       ?.getChild('message');
+    // A receipt or read marker archived with the room is not a message: the
+    // page still counts it (the paging cursor follows it), nothing is shown.
+    if (isReceiptMarkerStanza(forwardedMsg)) {
+      return undefined;
+    }
     if (forwardedMsg?.getChild?.('reactions')) {
       const reaction = extractReaction(
         forwardedMsg,
@@ -341,7 +412,7 @@ const parseMamResult = async (stanza: any): Promise<IMessage | undefined> => {
   }
 };
 
-const onMessageHistory = async (stanza: any) => {
+const onMessageHistory = async (stanza: any, xmppWs?: XmppClient) => {
   if (!isMamResult(stanza)) {return;}
   // A windowed query (a jump target's neighbourhood, a time lookup) belongs
   // to the caller that asked: its rows are collected and returned there and
@@ -356,6 +427,21 @@ const onMessageHistory = async (stanza: any) => {
       collectMamMessage(stanza, message);
     }
   }
+  if (message) {
+    // A message fetched by catch-up never reaches the live ack, so it is
+    // acked here (the client remembers which ones it already acked).
+    const innerFrom = stanza
+      .getChild('result')
+      ?.getChild('forwarded')
+      ?.getChild('message')?.attrs?.from;
+    ackReceivedMessage(
+      message,
+      String(stanza.attrs?.from || '').split('/')[0],
+      innerFrom,
+      undefined,
+      xmppWs
+    );
+  }
   if (!claimed && message) {
     store.dispatch(
       addRoomMessage({
@@ -677,6 +763,9 @@ const onRoomKicked = (stanza: Element | any) => {
 export {
   onRealtimeMessage,
   onMessageHistory,
+  onReceivedReceipt,
+  onDisplayedMarker,
+  isReceiptMarkerStanza,
   onPresenceInRoom,
   onGetLastMessageArchive,
   handleComposing,

package/src/networking/xmpp/handleStanzas.xmpp.ts

@@ -5,6 +5,8 @@ import {
   onEditMessage,
   onRealtimeMessage,
   onMessageHistory,
+  onReceivedReceipt,
+  onDisplayedMarker,
   onGetLastMessageArchive,
   handleComposing,
   onChatInvite,
@@ -127,8 +129,10 @@ function dispatchStanza(stanza: Element, xmppWs: XmppClient) {
       onDeleteMessage(unwrapped);
       onEditMessage(unwrapped);
       onChatInvite(unwrapped, xmppWs);
-      onRealtimeMessage(unwrapped);
-      onMessageHistory(unwrapped);
+      onReceivedReceipt(unwrapped);
+      onDisplayedMarker(unwrapped);
+      onRealtimeMessage(unwrapped, xmppWs);
+      onMessageHistory(unwrapped, xmppWs);
       handleComposing(unwrapped, xmppWs.username);
       onPresenceInRoom(unwrapped);
       break;

package/src/networking/xmpp/sendDisplayedMarker.xmpp.ts

@@ -0,0 +1,31 @@
+import { Client, xml } from '@xmpp/client';
+
+// XEP-0333 read marker, broadcast to the room (same convention as
+// sendReceivedReceipt.xmpp.ts / sendMessageReaction.xmpp.ts). `messageId` is
+// the id of the newest message the user has displayed - a single watermark
+// per room, not one marker per message.
+export function sendDisplayedMarker(
+  client: Client,
+  messageId: string,
+  roomJid: string
+) {
+  const id = `message-displayed:${Date.now().toString()}`;
+
+  const message = xml(
+    'message',
+    {
+      id,
+      type: 'groupchat',
+      from: client.jid?.toString(),
+      to: roomJid,
+    },
+    xml('displayed', {
+      xmlns: 'urn:xmpp:chat-markers:0',
+      id: messageId,
+      from: client.jid?.toString(),
+    }),
+    xml('store', { xmlns: 'urn:xmpp:hints' })
+  );
+
+  client.send(message);
+}