@convokitapp/vue-ui 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.5.0
+
+- Precise read positions. Receipts resolve per user from a monotonic read-through
+  position `(createdAt, id)` when the server provides one, and fall back to the
+  acknowledgement time only for legacy participants without a position. A read
+  request that arrives late no longer marks messages that were rendered after it
+  as read. The state exposes `readPositionByUserId` beside `readAtByUserId`;
+  `readerIdsFor`, `defaultReadersResolver`, `MessageListView` and
+  `ConversationView` accept both (`readAtByUserId` alone still works).
+- Targeted acknowledgements. Automatic and explicit reads name the newest
+  rendered, non-pending message (`throughMessageId`); nothing is sent while
+  nothing is rendered. A withheld media-only row is acknowledged once its
+  hydration renders it. One request is in flight at a time, a follow-up is
+  resolved at send time, and targets at or before the accepted one are skipped.
+  A target the server does not know (`MESSAGE_NOT_FOUND`) is skipped and the
+  next newest row is acknowledged once; membership failures still surface as
+  errors.
+- Visibility gating. Automatic acknowledgements wait while the document is
+  hidden and resume when it becomes visible; the SDK-backed `Conversation`
+  wires `document.visibilityState` and `visibilitychange`, and controllers gain
+  `setVisible(visible)`. Unknown, prerender and server environments count as
+  visible. `markReadOnLoad` / `markReadOnReceive` keep their meaning; with both
+  off no request is ever sent, including on visibility changes.
+- 0.5.0 adapter change: `ConvoKitUiClient.markConversationRead(conversationId,
+  options?)` receives `{ throughMessageId }`. Custom adapters must forward it
+  and report an unknown target with `code: 'MESSAGE_NOT_FOUND'` (or a 404
+  without a code). One-argument implementations still type-check but would
+  acknowledge the server's newest message instead of the rendered one.
+- Requires core SDK 0.5.x (`Participant.readPosition`, `ReadEvent.readPosition`,
+  `markConversationRead` target) and the coordinated backend. Mixed fleet:
+  precise receipts need both the sender's and the reader's clients on 0.5;
+  0.4 readers keep timestamp semantics and keep parsing the additive payload.
+
 ## 0.4.1
 
 - Describe a confirmed outgoing message without readers as `Sent` instead of

package/PARITY.md

@@ -18,6 +18,9 @@ while using Vue-native composition patterns.
 | Realtime messages, typing, reads | Yes | Yes | Yes |
 | Pending state without provisional timestamps or receipts | Yes | Yes | Yes |
 | Read markers and reader resolution | Yes | Yes | Yes |
+| Read positions (`readPositionByUserId`, `lastReadAt` fallback) | Yes | Yes | Yes |
+| Targeted acknowledgements (`throughMessageId`, newest rendered row) | Yes | Yes | Yes |
+| Visibility-gated auto-read | `WidgetsBindingObserver` | `visibilitychange` | `visibilitychange` |
 | Mark read on load/receive | Yes | Yes | Yes |
 | Typing idle timeout | Yes | Yes | Yes |
 | Image, file, location, contact rendering | Yes | Yes | Yes |
@@ -32,10 +35,14 @@ Vue also exposes controlled/uncontrolled composer text through `v-model`,
 per-part `classNames` and `styles`, `unstyled` mode, native root attributes,
 image loading policy, time formatting, scroll behavior controls, callback props,
 and exposed composable controllers.
-## Unreleased recovery parity
+## Read-position parity (0.5.0)
 
-Room and inbox session eviction, value-cursor history, full viewed-range reconnect
-reconciliation, ID-only deletions and server-sourced read positions are tested in
-this feature branch. They require the unpublished core SDK recovery contract.
-The parity script checks API presence only; the controller, rendered-view and
-actual-SDK protocol tests verify behavior. See README 0.3.0 behavior and integration notes.
+Every UI applies the same receipt rule per user: a read position wins when
+present (`covers` by `(createdAt, id)`), otherwise `lastReadAt` is compared
+with `createdAt`. Acknowledgements target the newest rendered non-pending
+message, coalesce to one request in flight, skip targets at or before the last
+accepted one, re-issue once on a `MESSAGE_NOT_FOUND` miss, and wait while the
+platform reports the view as hidden. The adapter interface gained the optional
+target in all libraries (`markConversationRead(conversationId, options?)` here).
+The parity script checks API presence only; the store, rendered-view and
+actual-SDK protocol tests verify behavior.

package/README.md

@@ -11,6 +11,48 @@ React package: system typography, separated rows, subtle borders, compact
 actions, and restrained radii. It remains framework-CSS independent and does
 not require Tailwind in the host application.
 
+## 0.5.0 precise read positions
+
+This release requires JavaScript SDK 0.5.x and the coordinated backend.
+
+- Read receipts resolve per user from a monotonic read-through position, the
+  `(createdAt, id)` of a concrete message the server resolved, and fall back to
+  the acknowledgement time only for legacy participants without a position. A
+  read request that arrives late no longer marks messages rendered after it as
+  read. `useConversation` and `Conversation` expose `readPositionByUserId`
+  beside `readAtByUserId`; both are seeded from participants and advanced by
+  server read events only, never from the device clock.
+- Acknowledgements name the newest rendered, non-pending message
+  (`throughMessageId`). Nothing is sent while nothing is rendered, and a
+  media-only row is acknowledged only once its hydration renders it. One
+  request is in flight at a time; a follow-up is resolved at send time and
+  skipped when the newest row is already acknowledged. A target the server
+  does not know (`MESSAGE_NOT_FOUND`, for example deleted meanwhile) is
+  skipped and the next newest row is acknowledged once. Membership failures
+  still surface as errors.
+- Automatic acknowledgements wait while the document is hidden and resume when
+  it becomes visible. The SDK-backed `Conversation` follows
+  `document.visibilityState` and `visibilitychange`; controllers gain
+  `setVisible(visible)` for host-driven surfaces (tabs, drawers, background
+  routes). Unknown, prerender and server environments count as visible.
+  `markReadOnLoad` and `markReadOnReceive` keep their meaning; with both off,
+  no request is ever sent, including on visibility changes. `markRead()` is
+  the host's decision and is not gated.
+- Controlled views accept `readPositionByUserId` next to `readAtByUserId`;
+  `readerIdsFor(message, readAtByUserId, readPositionByUserId?)` and
+  `defaultReadersResolver` apply the unified rule. Custom `#message` and
+  `#read-receipt` slots and `readersResolver` receive the same reader IDs.
+- Adapter change: `ConvoKitUiClient.markConversationRead(conversationId,
+  options?)` receives `{ throughMessageId }`. Custom adapters must forward it
+  to the core SDK (or their backend) and report an unknown target with
+  `code: 'MESSAGE_NOT_FOUND'` (or a 404 without a code). One-argument
+  implementations still type-check but acknowledge the server's newest message
+  instead of the rendered one.
+- Mixed fleet: precise receipts need both the sender's and the reader's
+  clients on 0.5. 0.4 readers keep timestamp semantics and keep parsing the
+  additive payload; the dashboard shows both the read-through and the last
+  acknowledgement time.
+
 ## 0.4.0 live inbox, sending and recovery
 
 This release requires JavaScript SDK 0.4.x and the coordinated backend. The core
@@ -45,6 +87,7 @@ membership changes; no additional customer configuration is needed.
 - Read receipts use persisted participant positions and server read events,
   monotonically. A successful mark-read request does not fabricate a timestamp
   from the device clock. Remote typing expires and clears on disconnect.
+  (0.5.0 replaces the timestamp comparison with read positions; see above.)
 - Pending sends are bound to their original room/session. Reconciliation uses
   the exact clientMessageId, sender and room, never identical text or file count.
   A matching live/history row replaces its pending bubble immediately, even
@@ -148,6 +191,9 @@ Available slots include `conversation-item`, `separator`, `header`, `message`,
 Use `useConversationList` and `useConversation` when you want ConvoKit's
 pagination, de-duplication, realtime, typing, and read state without the
 default UI. Both return readonly Vue refs plus actions and a `dispose()` method.
+`useConversation` also exposes `readPositionByUserId`, `readerIdsFor(message)`,
+`markRead()` and `setVisible(visible)`; call `setVisible(false)` while your own
+surface hides the room so automatic acknowledgements wait until it is shown.
 
 Optimistic rows display `Sending…` until acknowledgement. The final server
 timestamp is formatted in the viewer's local timezone. Custom message slots can

package/dist/index.cjs

@@ -66,7 +66,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,
@@ -88,9 +88,13 @@ var import_reka_ui = require("reka-ui");
 var import_vue2 = require("vue");
 
 // src/utils.ts
+var import_sdk = require("@convokitapp/sdk");
 var import_clsx = require("clsx");
 var import_vue = require("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);
 }
@@ -139,13 +143,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 && (0, import_sdk.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]);
@@ -199,7 +206,7 @@ var import_vue7 = require("vue");
 var import_vue3 = require("vue");
 
 // src/conversation-store.ts
-var import_sdk = require("@convokitapp/sdk");
+var import_sdk2 = require("@convokitapp/sdk");
 function version(message) {
   return message.updatedAt?.getTime() ?? message.createdAt.getTime();
 }
@@ -209,8 +216,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 {
@@ -218,6 +237,7 @@ function blank(currentUserId = "") {
     messages: [],
     typingUserIds: /* @__PURE__ */ new Set(),
     readAtByUserId: /* @__PURE__ */ new Map(),
+    readPositionByUserId: /* @__PURE__ */ new Map(),
     isInitialLoading: false,
     isLoadingOlder: false,
     isReconciling: false,
@@ -265,6 +285,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;
@@ -327,6 +350,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;
@@ -382,8 +406,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;
@@ -426,9 +450,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);
@@ -438,7 +459,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;
@@ -450,11 +473,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;
@@ -491,13 +522,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");
@@ -554,9 +595,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 {
@@ -612,14 +653,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);
@@ -654,15 +690,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;
@@ -691,7 +780,7 @@ var ConversationStore = class {
     const generation = this.generation;
     const revision = this.revision;
     this.sendRevision = revision;
-    const clientMessageId = (0, import_sdk.createClientMessageId)();
+    const clientMessageId = (0, import_sdk2.createClientMessageId)();
     const pendingId = `convokit-pending-${clientMessageId}`;
     const pending = {
       id: pendingId,
@@ -745,7 +834,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
@@ -758,6 +847,7 @@ function useConversation(options) {
   let store = createStore();
   const snapshot = (0, import_vue3.shallowRef)(store.getSnapshot());
   let unsubscribe;
+  let visible = true;
   const stop = (0, import_vue3.watch)(
     () => [(0, import_vue3.toValue)(options.client), (0, import_vue3.toValue)(options.client).sessionIdentity, (0, import_vue3.toValue)(options.conversationId)],
     () => {
@@ -768,6 +858,7 @@ function useConversation(options) {
       unsubscribe = store.subscribe(() => {
         snapshot.value = store.getSnapshot();
       });
+      store.setVisible(visible);
       store.start(options.autoLoad ?? true);
     },
     { immediate: true, flush: "sync" }
@@ -787,6 +878,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"),
@@ -802,6 +894,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
   };
 }
@@ -857,6 +953,7 @@ var MessageListView = (0, import_vue5.defineComponent)({
     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 },
@@ -916,7 +1013,7 @@ var MessageListView = (0, import_vue5.defineComponent)({
       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 (0, import_vue5.h)("div", { key: message.id, role: "listitem" }, custom);
@@ -1015,8 +1112,8 @@ var MessageListView = (0, import_vue5.defineComponent)({
     };
   }
 });
-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
@@ -1034,6 +1131,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 },
@@ -1262,6 +1360,7 @@ var ConversationView = (0, import_vue7.defineComponent)({
         messages: props.messages,
         currentUserId: props.currentUserId,
         readAtByUserId: props.readAtByUserId,
+        readPositionByUserId: props.readPositionByUserId,
         ...props.readersResolver ? { readersResolver: props.readersResolver } : {},
         ...props.onLoadOlder ? { onLoadOlder: loadOlder } : {},
         hasOlderMessages: props.hasOlderMessages,
@@ -1324,6 +1423,12 @@ var Conversation = (0, import_vue7.defineComponent)({
     (0, import_vue7.watchEffect)(() => {
       emit("controller-change", controller);
     });
+    if (typeof document !== "undefined") {
+      const syncVisibility = () => controller.setVisible(document.visibilityState !== "hidden");
+      syncVisibility();
+      document.addEventListener("visibilitychange", syncVisibility);
+      (0, import_vue7.onBeforeUnmount)(() => document.removeEventListener("visibilitychange", syncVisibility));
+    }
     return () => {
       const loadedConversation = controller.conversation.value;
       if (!loadedConversation) {
@@ -1358,6 +1463,7 @@ var Conversation = (0, import_vue7.defineComponent)({
         onSendMessage: _onSendMessage,
         typingUserIds: _typingUserIds,
         readAtByUserId: _readAtByUserId,
+        readPositionByUserId: _readPositionByUserId,
         onRefresh: _onRefresh,
         onLoadOlder: _onLoadOlder,
         onTypingChange: _onTypingChange,
@@ -1380,6 +1486,7 @@ var Conversation = (0, import_vue7.defineComponent)({
         },
         typingUserIds: controller.typingUserIds.value,
         readAtByUserId: controller.readAtByUserId.value,
+        readPositionByUserId: controller.readPositionByUserId.value,
         onRefresh: controller.refresh,
         onLoadOlder: controller.loadOlderMessages,
         onTypingChange: controller.updateTyping,