@convokitapp/vue-ui 0.4.1 → 0.5.0

package/dist/index.js

@@ -21,7 +21,7 @@ function createConvoKitUiClient(client) {
     getMessages: (options) => client.getMessages(options),
     getMessage: (id) => client.getMessage(id),
     sendMessage: (input) => client.sendMessage(input),
-    markConversationRead: (conversationId) => client.markConversationRead(conversationId),
+    markConversationRead: (conversationId, options) => client.markConversationRead(conversationId, options),
     sendTyping: (input) => client.sendTyping(input),
     onMessage: (conversationId, handler, onError) => client.realtime.onMessage(conversationId, {
       onEvent: handler,
@@ -43,9 +43,13 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui";
 import { defineComponent, h } from "vue";
 
 // src/utils.ts
+import { readThrough } from "@convokitapp/sdk";
 import { clsx } from "clsx";
 import { normalizeClass } from "vue";
 var pendingMessageIdPrefix = "convokit-pending-";
+function compareMessageOrder(left, right) {
+  return left.createdAt.getTime() - right.createdAt.getTime() || (left.id < right.id ? -1 : left.id > right.id ? 1 : 0);
+}
 function isConvoKitPendingMessage(message) {
   return message.id.startsWith(pendingMessageIdPrefix);
 }
@@ -94,13 +98,16 @@ function mergeMessages(current, incoming) {
     const leftPending = isConvoKitPendingMessage(left);
     const rightPending = isConvoKitPendingMessage(right);
     if (leftPending !== rightPending) return leftPending ? 1 : -1;
-    const byTime = left.createdAt.getTime() - right.createdAt.getTime();
-    return byTime === 0 ? left.id.localeCompare(right.id) : byTime;
+    return compareMessageOrder(left, right);
   });
 }
-function readerIdsFor(message, readAtByUserId) {
+function readerIdsFor(message, readAtByUserId, readPositionByUserId = /* @__PURE__ */ new Map()) {
   if (isConvoKitPendingMessage(message)) return /* @__PURE__ */ new Set();
-  return new Set([...readAtByUserId.entries()].filter(([userId, readAt]) => userId !== message.senderId && readAt.getTime() >= message.createdAt.getTime()).map(([userId]) => userId));
+  const userIds = /* @__PURE__ */ new Set([...readAtByUserId.keys(), ...readPositionByUserId.keys()]);
+  return new Set([...userIds].filter((userId) => userId !== message.senderId && readThrough({
+    readPosition: readPositionByUserId.get(userId) ?? null,
+    lastReadAt: readAtByUserId.get(userId) ?? null
+  }, message)));
 }
 function partClass(part, appearance, defaultClass) {
   return cx(!appearance.unstyled && defaultClass, appearance.classNames?.[part]);
@@ -151,6 +158,7 @@ import { ArrowLeft, LoaderCircle as LoaderCircle2, Paperclip, RefreshCw, Send }
 import {
   defineComponent as defineComponent3,
   h as h3,
+  onBeforeUnmount,
   ref as ref2,
   watchEffect
 } from "vue";
@@ -169,8 +177,20 @@ function hasContent(message) {
 function newest(current, incoming, incomingComplete = true) {
   return version(current) > version(incoming) || !incomingComplete && version(current) === version(incoming) ? current : incoming;
 }
-function compare(left, right) {
-  return left.createdAt.getTime() - right.createdAt.getTime() || (left.id < right.id ? -1 : left.id > right.id ? 1 : 0);
+var compare = compareMessageOrder;
+function positionCursor(position) {
+  return { createdAt: position.createdAt, id: position.messageId };
+}
+function readEntry(participant) {
+  return { userId: participant.appUserId, readAt: participant.lastReadAt, readPosition: participant.readPosition };
+}
+function acknowledgement() {
+  return { inFlight: void 0, followUp: false, suppressed: false, target: void 0, acknowledged: void 0, unacknowledgeable: /* @__PURE__ */ new Set() };
+}
+function isTargetMiss(cause) {
+  if (typeof cause !== "object" || cause === null) return false;
+  const { code, status } = cause;
+  return code === "MESSAGE_NOT_FOUND" || code === void 0 && status === 404;
 }
 function blank(currentUserId = "") {
   return {
@@ -178,6 +198,7 @@ function blank(currentUserId = "") {
     messages: [],
     typingUserIds: /* @__PURE__ */ new Set(),
     readAtByUserId: /* @__PURE__ */ new Map(),
+    readPositionByUserId: /* @__PURE__ */ new Map(),
     isInitialLoading: false,
     isLoadingOlder: false,
     isReconciling: false,
@@ -225,6 +246,9 @@ var ConversationStore = class {
   hydrationPool = { running: /* @__PURE__ */ new Set(), queued: /* @__PURE__ */ new Map() };
   // Keep tombstones until an explicit reload/session change, including across refreshes.
   deleted = /* @__PURE__ */ new Set();
+  ack = acknowledgement();
+  // Visible until the platform reports otherwise; unknown/prerender/no document count as visible.
+  visible = true;
   sendRevision;
   activeSend;
   refreshQueued = false;
@@ -287,6 +311,7 @@ var ConversationStore = class {
     this.hydrations.clear();
     this.hydrationPool.queued.clear();
     this.deleted.clear();
+    this.ack = acknowledgement();
     this.sendRevision = void 0;
     this.activeSend = void 0;
     this.refreshQueued = false;
@@ -342,8 +367,8 @@ var ConversationStore = class {
         if (!this.alive(generation) || conversationId !== this.room || !id.trim()) return;
         this.removeMessage(id);
       }, report));
-      add(() => this.client.onReadReceipt(this.room, ({ userId, readAt }) => {
-        if (this.alive(generation)) this.mergeReads([[userId, readAt]]);
+      add(() => this.client.onReadReceipt(this.room, ({ userId, readAt, readPosition }) => {
+        if (this.alive(generation)) this.mergeReads([{ userId, readAt, readPosition }]);
       }, report));
       add(() => this.client.onTyping(this.room, ({ userId, isTyping }) => {
         if (!this.alive(generation) || !userId.trim() || userId === this.user) return;
@@ -386,9 +411,6 @@ var ConversationStore = class {
     this.hydrations.set(message.id, job);
     this.hydrationPool.queued.set(message.id, job);
     this.drainHydration();
-    if (type === "insert" && !existing && message.senderId !== this.user && (this.options.markReadOnReceive ?? true)) {
-      void this.markRead();
-    }
   }
   record(message, insert, revision, complete) {
     const existing = this.state.messages.find((item) => item.id === message.id);
@@ -398,7 +420,9 @@ var ConversationStore = class {
       this.confirmSend(message);
     }
     this.changes.set(message.id, { revision, message, insert, complete });
-    if (existing || insert && hasContent(message)) this.patch({ messages: mergeMessages(this.state.messages, [message]) });
+    if (!existing && !(insert && hasContent(message))) return;
+    this.patch({ messages: mergeMessages(this.state.messages, [message]) });
+    if (!existing && message.senderId !== this.user && (this.options.markReadOnReceive ?? true)) void this.acknowledge(true);
   }
   confirmSend(message) {
     const send = this.activeSend;
@@ -410,11 +434,19 @@ var ConversationStore = class {
     return this.alive(job.generation) && !this.deleted.has(job.message.id) && this.hydrations.get(job.message.id) === job;
   }
   removeMessage(id) {
+    this.forget(id);
+    this.patch({ messages: this.state.messages.filter((message) => message.id !== id) });
+  }
+  /** Tombstone a row learned to be gone; a removed acknowledgement target is re-resolved from what remains. */
+  forget(id) {
     this.deleted.add(id);
     this.changes.delete(id);
     this.hydrations.delete(id);
     this.hydrationPool.queued.delete(id);
-    this.patch({ messages: this.state.messages.filter((message) => message.id !== id) });
+    const ack = this.ack;
+    if (ack.target !== id && ack.acknowledged?.id !== id) return;
+    ack.unacknowledgeable.add(id);
+    if (ack.target === id) ack.followUp = true;
   }
   drainHydration() {
     const pool = this.hydrationPool;
@@ -451,13 +483,23 @@ var ConversationStore = class {
       });
     }
   }
+  /** Both maps only ever advance: acknowledgement times by time, positions by (createdAt, id). Participants and
+   * read events are the only sources; the local user's own read is never written from the device clock.
+   */
   mergeReads(entries) {
-    const next = new Map(this.state.readAtByUserId);
-    for (const [userId, readAt] of entries) {
-      if (!userId.trim() || !Number.isFinite(readAt.getTime())) continue;
-      if (readAt.getTime() > (next.get(userId)?.getTime() ?? -Infinity)) next.set(userId, readAt);
+    const readAt = new Map(this.state.readAtByUserId);
+    const positions = new Map(this.state.readPositionByUserId);
+    for (const entry of entries) {
+      const { userId, readPosition } = entry;
+      if (!userId.trim()) continue;
+      if (entry.readAt && Number.isFinite(entry.readAt.getTime()) && entry.readAt.getTime() > (readAt.get(userId)?.getTime() ?? -Infinity)) {
+        readAt.set(userId, entry.readAt);
+      }
+      if (!readPosition || typeof readPosition.messageId !== "string" || !readPosition.messageId.trim() || !(readPosition.createdAt instanceof Date) || !Number.isFinite(readPosition.createdAt.getTime())) continue;
+      const current = positions.get(userId);
+      if (!current || compare(positionCursor(readPosition), positionCursor(current)) > 0) positions.set(userId, readPosition);
     }
-    this.patch({ readAtByUserId: next });
+    this.patch({ readAtByUserId: readAt, readPositionByUserId: positions });
   }
   validatePage(page, before) {
     if (page.length > this.pageSize) throw new Error("Message page exceeds the requested limit");
@@ -514,9 +556,9 @@ var ConversationStore = class {
       this.validatePage(page);
       this.cursor = page.at(-1);
       this.patch({ conversation, messages: this.overlay(page, revision), hasOlderMessages: page.length === this.pageSize });
-      this.mergeReads(conversation.participants.flatMap((participant) => participant.lastReadAt ? [[participant.appUserId, participant.lastReadAt]] : []));
+      this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
-      if (this.options.markReadOnLoad ?? true) await this.markRead();
+      if (this.options.markReadOnLoad ?? true) await this.acknowledge(true);
     } catch (cause) {
       this.fail(cause, generation, true);
     } finally {
@@ -572,14 +614,9 @@ var ConversationStore = class {
       const reconciled = this.overlay(rows, revision);
       const survivingIds = new Set(reconciled.map((message) => message.id));
       const known = this.state.messages.filter((message) => !isConvoKitPendingMessage(message)).map((message) => message.id).concat([...this.changes].filter(([, change]) => change.insert && change.revision <= revision).map(([id]) => id));
-      for (const id of known) if (!survivingIds.has(id)) {
-        this.deleted.add(id);
-        this.changes.delete(id);
-        this.hydrations.delete(id);
-        this.hydrationPool.queued.delete(id);
-      }
+      for (const id of known) if (!survivingIds.has(id)) this.forget(id);
       this.patch({ conversation, messages: reconciled, hasOlderMessages: hasOlder });
-      this.mergeReads(conversation.participants.flatMap((participant) => participant.lastReadAt ? [[participant.appUserId, participant.lastReadAt]] : []));
+      this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
     } catch (cause) {
       this.fail(cause, generation, true);
@@ -614,15 +651,68 @@ var ConversationStore = class {
       }
     }
   };
-  markRead = async () => {
-    if (!this.alive()) return;
-    const generation = this.generation;
+  /** Acknowledge through the newest rendered row now, regardless of visibility; no request without a target. */
+  markRead = () => this.alive() ? this.acknowledge(false) : Promise.resolve();
+  /** Automatic acknowledgements wait while hidden and are re-issued (once) on becoming visible. */
+  setVisible = (visible) => {
+    this.visible = visible;
+    if (!visible || !this.ack.suppressed || !this.alive()) return;
+    this.ack.suppressed = false;
+    void this.acknowledge(true);
+  };
+  /** The newest non-pending rendered row by (createdAt, id), never by list index and never a raw realtime
+   * row; rows the server does not know are skipped, and nothing at or before the accepted target is re-sent.
+   */
+  ackTarget(ack) {
+    let target;
+    for (const message of this.state.messages) {
+      if (isConvoKitPendingMessage(message) || ack.unacknowledgeable.has(message.id)) continue;
+      if (!target || compare(message, target) > 0) target = { createdAt: message.createdAt, id: message.id };
+    }
+    return target && (!ack.acknowledged || compare(target, ack.acknowledged) > 0) ? target : void 0;
+  }
+  /** Resolves when the request this call issued or joined settles; a follow-up is issued, not awaited. */
+  acknowledge(automatic) {
+    const ack = this.ack;
+    if (automatic && !this.visible) {
+      ack.suppressed = true;
+      return Promise.resolve();
+    }
+    if (ack.inFlight) {
+      ack.followUp = true;
+      return ack.inFlight;
+    }
+    return this.issue(ack, this.generation) ?? Promise.resolve();
+  }
+  issue(ack, generation) {
+    ack.followUp = false;
+    const target = this.ackTarget(ack);
+    if (!target) return void 0;
+    ack.target = target.id;
+    ack.inFlight = this.send(ack, generation, target).finally(() => {
+      ack.inFlight = void 0;
+      ack.target = void 0;
+      if (!this.alive(generation) || !ack.followUp) return;
+      if (!this.visible) {
+        ack.followUp = false;
+        ack.suppressed = true;
+      } else this.issue(ack, generation);
+    });
+    return ack.inFlight;
+  }
+  async send(ack, generation, target) {
     try {
-      await this.client.markConversationRead(this.room);
+      await this.client.markConversationRead(this.room, { throughMessageId: target.id });
+      if (!this.alive(generation)) return;
+      if (!ack.acknowledged || compare(target, ack.acknowledged) > 0) ack.acknowledged = target;
     } catch (cause) {
-      this.fail(cause, generation);
+      if (!this.alive(generation)) return;
+      if (isTargetMiss(cause)) {
+        ack.unacknowledgeable.add(target.id);
+        ack.followUp = true;
+      } else this.fail(cause, generation);
     }
-  };
+  }
   updateTyping = async (isTyping) => {
     if (!this.alive()) return;
     const generation = this.generation;
@@ -705,7 +795,7 @@ var ConversationStore = class {
       }
     }
   };
-  readerIdsFor = (message) => readerIdsFor(message, this.state.readAtByUserId);
+  readerIdsFor = (message) => readerIdsFor(message, this.state.readAtByUserId, this.state.readPositionByUserId);
 };
 
 // src/composables/use-conversation.ts
@@ -718,6 +808,7 @@ function useConversation(options) {
   let store = createStore();
   const snapshot = shallowRef(store.getSnapshot());
   let unsubscribe;
+  let visible = true;
   const stop = watch(
     () => [toValue(options.client), toValue(options.client).sessionIdentity, toValue(options.conversationId)],
     () => {
@@ -728,6 +819,7 @@ function useConversation(options) {
       unsubscribe = store.subscribe(() => {
         snapshot.value = store.getSnapshot();
       });
+      store.setVisible(visible);
       store.start(options.autoLoad ?? true);
     },
     { immediate: true, flush: "sync" }
@@ -747,6 +839,7 @@ function useConversation(options) {
     messages: field("messages"),
     typingUserIds: field("typingUserIds"),
     readAtByUserId: field("readAtByUserId"),
+    readPositionByUserId: field("readPositionByUserId"),
     isInitialLoading: field("isInitialLoading"),
     isLoadingOlder: field("isLoadingOlder"),
     isReconciling: field("isReconciling"),
@@ -762,6 +855,10 @@ function useConversation(options) {
     sendMessage: (input) => store.sendMessage(input),
     markRead: () => store.markRead(),
     updateTyping: (isTyping) => store.updateTyping(isTyping),
+    setVisible: (value) => {
+      visible = value;
+      store.setVisible(value);
+    },
     dispose
   };
 }
@@ -834,6 +931,7 @@ var MessageListView = defineComponent2({
     messages: { type: Array, required: true },
     currentUserId: { type: String, required: true },
     readAtByUserId: { type: Object, default: () => /* @__PURE__ */ new Map() },
+    readPositionByUserId: { type: Object, default: () => /* @__PURE__ */ new Map() },
     readersResolver: { type: Function, default: void 0 },
     onLoadOlder: { type: Function, default: void 0 },
     hasOlderMessages: { type: Boolean, default: false },
@@ -893,7 +991,7 @@ var MessageListView = defineComponent2({
       const isCurrentUser = message.senderId === props.currentUserId;
       const sender = participants.value.get(message.senderId);
       const isPending = isConvoKitPendingMessage(message);
-      const readerIds = isPending ? /* @__PURE__ */ new Set() : props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId);
+      const readerIds = isPending ? /* @__PURE__ */ new Set() : props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId, props.readPositionByUserId);
       const slotProps = { message, chronologicalIndex: index, isCurrentUser, sender, readerIds };
       const custom = slots.message?.(slotProps);
       if (custom) return h2("div", { key: message.id, role: "listitem" }, custom);
@@ -992,8 +1090,8 @@ var MessageListView = defineComponent2({
     };
   }
 });
-function defaultReadersResolver(readAtByUserId) {
-  return (message) => readerIdsFor(message, readAtByUserId);
+function defaultReadersResolver(readAtByUserId, readPositionByUserId = /* @__PURE__ */ new Map()) {
+  return (message) => readerIdsFor(message, readAtByUserId, readPositionByUserId);
 }
 
 // src/components/conversation.ts
@@ -1011,6 +1109,7 @@ var viewProps = {
   onSendMessage: { type: Function, required: true },
   typingUserIds: { type: Object, default: () => /* @__PURE__ */ new Set() },
   readAtByUserId: { type: Object, default: () => /* @__PURE__ */ new Map() },
+  readPositionByUserId: { type: Object, default: () => /* @__PURE__ */ new Map() },
   readersResolver: { type: Function, default: void 0 },
   onBack: { type: Function, default: void 0 },
   onRefresh: { type: Function, default: void 0 },
@@ -1239,6 +1338,7 @@ var ConversationView = defineComponent3({
         messages: props.messages,
         currentUserId: props.currentUserId,
         readAtByUserId: props.readAtByUserId,
+        readPositionByUserId: props.readPositionByUserId,
         ...props.readersResolver ? { readersResolver: props.readersResolver } : {},
         ...props.onLoadOlder ? { onLoadOlder: loadOlder } : {},
         hasOlderMessages: props.hasOlderMessages,
@@ -1301,6 +1401,12 @@ var Conversation = defineComponent3({
     watchEffect(() => {
       emit("controller-change", controller);
     });
+    if (typeof document !== "undefined") {
+      const syncVisibility = () => controller.setVisible(document.visibilityState !== "hidden");
+      syncVisibility();
+      document.addEventListener("visibilitychange", syncVisibility);
+      onBeforeUnmount(() => document.removeEventListener("visibilitychange", syncVisibility));
+    }
     return () => {
       const loadedConversation = controller.conversation.value;
       if (!loadedConversation) {
@@ -1335,6 +1441,7 @@ var Conversation = defineComponent3({
         onSendMessage: _onSendMessage,
         typingUserIds: _typingUserIds,
         readAtByUserId: _readAtByUserId,
+        readPositionByUserId: _readPositionByUserId,
         onRefresh: _onRefresh,
         onLoadOlder: _onLoadOlder,
         onTypingChange: _onTypingChange,
@@ -1357,6 +1464,7 @@ var Conversation = defineComponent3({
         },
         typingUserIds: controller.typingUserIds.value,
         readAtByUserId: controller.readAtByUserId.value,
+        readPositionByUserId: controller.readPositionByUserId.value,
         onRefresh: controller.refresh,
         onLoadOlder: controller.loadOlderMessages,
         onTypingChange: controller.updateTyping,