@convokitapp/vue-ui 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.4.1
+
+- Describe a confirmed outgoing message without readers as `Sent` instead of
+  `Delivered` in the default receipt text and status icon label. ConvoKit does
+  not report recipient delivery; pending and read states are unchanged.
+
+## 0.4.0
+
+- Reconcile private inbox invalidations automatically, retaining filters and
+  loaded pages without clearing visible data on transient failures.
+- Reconcile open rooms after user/room cascade changes.
+- Replace optimistic bubbles by exact client send IDs before HTTP acknowledgement;
+  keep confirmed sends successful after a lost response, without restoring deleted rows.
+- Custom adapters must implement `onInboxChanged` (including initial/rejoin signals)
+  and forward `clientMessageId`. Requires core 0.4.0 and the coordinated backend.
+
 ## 0.3.0
 
 - Ignore late typing failures after newer input or connection interruption.

package/README.md

@@ -11,9 +11,9 @@ 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.3.0 session and history recovery
+## 0.4.0 live inbox, sending and recovery
 
-This release requires JavaScript SDK 0.3.x and the coordinated backend. The core
+This release requires JavaScript SDK 0.4.x and the coordinated backend. The core
 SDK discovers current private room/app topics automatically and rejoins when
 membership changes; no additional customer configuration is needed.
 
@@ -46,9 +46,9 @@ membership changes; no additional customer configuration is needed.
   monotonically. A successful mark-read request does not fabricate a timestamp
   from the device clock. Remote typing expires and clears on disconnect.
 - Pending sends are bound to their original room/session. Reconciliation uses
-  the returned message ID, never a guess based on identical text or file count.
-  Without server-provided request IDs, a Realtime echo can briefly coexist with
-  its pending row until the HTTP acknowledgement identifies it.
+  the exact clientMessageId, sender and room, never identical text or file count.
+  A matching live/history row replaces its pending bubble immediately, even
+  before HTTP acknowledgement; a later lost response cannot fail a confirmed send.
 - Custom `ConvoKitUiClient` adapters must implement `sessionIdentity`,
   `onConnectionEvent` (including `onSessionEnded`), typed `onMessage`,
   `onMessageDeleted`, `getMessage(id)`, and paired message cursors. The message
@@ -61,9 +61,17 @@ The managed API default and customer token-provider workflow are unchanged.
 The SDK discovers the Supabase URL and publishable key automatically; customers
 do not configure those values or ship a backend secret.
 
-The inbox still uses the existing paged REST contract. Session eviction is
-implemented, but live inbox/cascade invalidation requires the separate backend
-event contract; refresh or reopen the inbox after those changes.
+SDK-backed components consume private inbox invalidations automatically,
+including after reconnect, while preserving filters and the loaded page window.
+It also correlates pending messages with live/history rows using the exact
+`clientMessageId`, so a live-first delivery never produces two bubbles.
+These changes require the paired 0.4.0 core and coordinated backend update.
+
+For 0.4.0, custom adapters must add
+`onInboxChanged(handler, onError?)`, notifying on committed changes and every
+initial/reconnected subscription. Forward `clientMessageId` unchanged in sends
+and parsed messages. Default SDK adapters do this for you; no component props
+or demo-specific reconciliation code is required.
 
 ## Install published packages
 

package/dist/index.cjs

@@ -50,6 +50,10 @@ function createConvoKitUiClient(client) {
       return client.connected ? client.realtime : null;
     },
     onConnectionEvent: (handlers) => client.realtime.onConnectionEvent(handlers),
+    onInboxChanged: (handler, onError) => client.realtime.onInboxChanged(client.clientId, {
+      onEvent: handler,
+      ...onError ? { onError } : {}
+    }),
     onMessageDeleted: (conversationId, handler, onError) => client.realtime.onMessageDeleted(conversationId, {
       onEvent: handler,
       ...onError ? { onError } : {}
@@ -195,6 +199,7 @@ var import_vue7 = require("vue");
 var import_vue3 = require("vue");
 
 // src/conversation-store.ts
+var import_sdk = require("@convokitapp/sdk");
 function version(message) {
   return message.updatedAt?.getTime() ?? message.createdAt.getTime();
 }
@@ -261,7 +266,7 @@ var ConversationStore = class {
   // Keep tombstones until an explicit reload/session change, including across refreshes.
   deleted = /* @__PURE__ */ new Set();
   sendRevision;
-  pendingSequence = 0;
+  activeSend;
   refreshQueued = false;
   typingTimers = /* @__PURE__ */ new Map();
   ownTypingTimer;
@@ -276,6 +281,10 @@ var ConversationStore = class {
     };
   };
   patch(patch) {
+    if (patch.messages && this.activeSend) {
+      for (const message of patch.messages) this.confirmSend(message);
+      if (this.activeSend.confirmed) patch.messages = patch.messages.filter((message) => message.id !== this.activeSend.pending.id);
+    }
     this.state = { ...this.state, ...patch };
     for (const listener of this.listeners) listener();
   }
@@ -319,6 +328,7 @@ var ConversationStore = class {
     this.hydrationPool.queued.clear();
     this.deleted.clear();
     this.sendRevision = void 0;
+    this.activeSend = void 0;
     this.refreshQueued = false;
   }
   dispose = () => {
@@ -359,6 +369,14 @@ var ConversationStore = class {
         onError: report
       }));
       if (!data) return;
+      add(() => this.client.onInboxChanged(() => {
+        if (this.alive(generation)) this.queueRefresh();
+      }, (cause) => {
+        if (this.alive(generation)) {
+          report(cause);
+          this.queueRefresh();
+        }
+      }));
       add(() => this.client.onMessage(this.room, (event) => this.onMessage(event, generation), report));
       add(() => this.client.onMessageDeleted(this.room, ({ id, conversationId }) => {
         if (!this.alive(generation) || conversationId !== this.room || !id.trim()) return;
@@ -415,9 +433,19 @@ var ConversationStore = class {
   record(message, insert, revision, complete) {
     const existing = this.state.messages.find((item) => item.id === message.id);
     if (existing && version(existing) > version(message)) return;
+    if (this.confirmSend(message) && !complete && !message.media.length) {
+      message = { ...message, media: this.activeSend.pending.media };
+      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]) });
   }
+  confirmSend(message) {
+    const send = this.activeSend;
+    if (!send || !this.validMessage(message) || message.senderId !== this.user || message.clientMessageId !== send.pending.clientMessageId) return false;
+    send.confirmed = send.confirmed ? newest(send.confirmed, message) : message;
+    return true;
+  }
   currentHydration(job) {
     return this.alive(job.generation) && !this.deleted.has(job.message.id) && this.hydrations.get(job.message.id) === job;
   }
@@ -663,9 +691,11 @@ var ConversationStore = class {
     const generation = this.generation;
     const revision = this.revision;
     this.sendRevision = revision;
-    const pendingId = `convokit-pending-${Date.now()}-${++this.pendingSequence}`;
+    const clientMessageId = (0, import_sdk.createClientMessageId)();
+    const pendingId = `convokit-pending-${clientMessageId}`;
     const pending = {
       id: pendingId,
+      clientMessageId,
       conversationId: this.room,
       senderId: this.user,
       text: normalized || null,
@@ -673,15 +703,19 @@ var ConversationStore = class {
       createdAt: /* @__PURE__ */ new Date(),
       updatedAt: null
     };
+    const send = { pending };
+    this.activeSend = send;
     this.patch({ messages: mergeMessages(this.state.messages, [pending]), isSending: true, error: null });
     try {
       const message = await this.client.sendMessage({
         conversationId: this.room,
+        clientMessageId,
         ...normalized ? { text: normalized } : {},
         ...media?.length ? { media } : {}
       });
       if (!this.alive(generation)) return null;
       if (!this.validMessage(message) || message.senderId !== this.user) throw new Error("Send response belongs to a different room or sender");
+      if (message.clientMessageId && message.clientMessageId !== clientMessageId) throw new Error("Send response belongs to a different send");
       const live = this.changes.get(message.id);
       const existing = this.state.messages.find((item) => item.id === message.id);
       let latest = existing ? newest(message, existing, live?.complete !== false) : message;
@@ -696,12 +730,17 @@ var ConversationStore = class {
     } catch (cause) {
       if (this.alive(generation)) {
         this.patch({ messages: this.state.messages.filter((item) => item.id !== pendingId) });
+        if (send.confirmed) {
+          void this.updateTyping(false);
+          return send.confirmed;
+        }
         this.fail(cause, generation);
       }
       return null;
     } finally {
       if (this.alive(generation)) {
         this.sendRevision = void 0;
+        this.activeSend = void 0;
         this.patch({ isSending: false });
       }
     }
@@ -912,13 +951,13 @@ var MessageListView = (0, import_vue5.defineComponent)({
             ...mediaNodes,
             (0, import_vue5.h)("span", { class: "ckui-message-time" }, [
               isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
-              isCurrentUser && !isPending ? readerIds.size > 0 ? (0, import_vue5.h)(import_vue4.CheckCheck, { size: 14, "aria-label": "Read" }) : (0, import_vue5.h)(import_vue4.Check, { size: 14, "aria-label": "Delivered" }) : null
+              isCurrentUser && !isPending ? readerIds.size > 0 ? (0, import_vue5.h)(import_vue4.CheckCheck, { size: 14, "aria-label": "Read" }) : (0, import_vue5.h)(import_vue4.Check, { size: 14, "aria-label": "Sent" }) : null
             ])
           ]),
           isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? (0, import_vue5.h)("div", {
             class: partClass("receipt", currentAppearance, "ckui-read-receipt"),
             style: partStyle("receipt", currentAppearance)
-          }, readerIds.size > 0 ? `Read by ${readerIds.size}` : "Delivered") : null
+          }, readerIds.size > 0 ? `Read by ${readerIds.size}` : "Sent") : null
         ])
       ]);
     };
@@ -1398,6 +1437,9 @@ var ConversationListStore = class {
   lifecycleGeneration = 0;
   disposed = true;
   lifecycle;
+  inbox;
+  refreshQueued = false;
+  refreshing = false;
   listeners = /* @__PURE__ */ new Set();
   getSnapshot = () => this.state;
   subscribe = (listener) => {
@@ -1415,6 +1457,7 @@ var ConversationListStore = class {
   }
   start = (autoLoad = true) => {
     if (!this.owner || this.options.client.sessionIdentity !== this.owner) return;
+    if (!this.disposed) return;
     this.disposed = false;
     const lifecycleGeneration = ++this.lifecycleGeneration;
     try {
@@ -1427,6 +1470,17 @@ var ConversationListStore = class {
       });
       if (this.alive()) this.lifecycle = subscription;
       else void subscription.unsubscribe().catch(() => void 0);
+      if (!this.alive()) return;
+      const inbox = this.options.client.onInboxChanged(() => {
+        if (this.alive() && lifecycleGeneration === this.lifecycleGeneration) this.queueRefresh();
+      }, (cause) => {
+        if (this.alive() && lifecycleGeneration === this.lifecycleGeneration) {
+          this.patch({ error: cause });
+          this.queueRefresh();
+        }
+      });
+      if (this.alive()) this.inbox = inbox;
+      else void inbox.unsubscribe().catch(() => void 0);
       if (autoLoad) void this.loadInitial();
     } catch (cause) {
       if (this.alive()) this.patch({ error: cause });
@@ -1439,6 +1493,10 @@ var ConversationListStore = class {
     const subscription = this.lifecycle;
     this.lifecycle = void 0;
     if (subscription) void subscription.unsubscribe().catch(() => void 0);
+    if (this.inbox) void this.inbox.unsubscribe().catch(() => void 0);
+    this.inbox = void 0;
+    this.refreshQueued = false;
+    this.refreshing = false;
     this.source = [];
     this.offset = 0;
     this.patch(blank2(this.state.filter));
@@ -1477,6 +1535,7 @@ var ConversationListStore = class {
   loadInitial = async () => {
     if (!this.alive()) return;
     const generation = ++this.generation;
+    this.refreshing = false;
     this.source = [];
     this.offset = 0;
     this.patch({ ...blank2(this.state.filter), isInitialLoading: true });
@@ -1485,12 +1544,67 @@ var ConversationListStore = class {
     } catch (cause) {
       this.fail(cause, generation);
     } finally {
-      if (this.alive(generation)) this.patch({ isInitialLoading: false, hasLoaded: true });
+      if (this.alive(generation)) {
+        this.patch({ isInitialLoading: false, hasLoaded: true });
+        this.flushRefresh();
+      }
+    }
+  };
+  queueRefresh() {
+    this.refreshQueued = true;
+    this.flushRefresh();
+  }
+  flushRefresh() {
+    const lifecycle = this.lifecycleGeneration;
+    void Promise.resolve().then(() => {
+      if (!this.alive() || lifecycle !== this.lifecycleGeneration || !this.refreshQueued || this.refreshing || this.state.isInitialLoading || this.state.isLoadingMore) return;
+      this.refreshQueued = false;
+      void this.refresh();
+    });
+  }
+  /** Replace the loaded window atomically, retaining filters and rows during transient failures. */
+  refresh = async () => {
+    if (!this.alive()) return;
+    if (this.refreshing || this.state.isInitialLoading || this.state.isLoadingMore) {
+      this.refreshQueued = true;
+      return;
+    }
+    if (!this.state.hasLoaded) return this.loadInitial();
+    const generation = this.generation;
+    const filter = this.state.filter;
+    const target = Math.max(this.pageSize, this.offset);
+    const compare2 = (a, b) => a.createdAt.getTime() - b.createdAt.getTime() || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+    const boundary = this.options.pageLoader ? void 0 : this.source.reduce((oldest, row) => !oldest || compare2(row, oldest) < 0 ? row : oldest, void 0);
+    this.refreshing = true;
+    this.patch({ error: null });
+    try {
+      let rows = [], offset = 0, hasMore = true;
+      while (this.alive(generation)) {
+        const page = this.options.pageLoader ? await this.options.pageLoader({ limit: this.pageSize, offset, filter }) : await this.options.client.getConversations({ limit: this.pageSize, offset, archived: filter.archived ?? false });
+        if (!this.alive(generation)) return;
+        if (page.length > this.pageSize || page.some((row) => !row.id.trim())) throw new Error("Invalid conversation page");
+        const merged = mergeConversations(rows, page);
+        if (page.length === this.pageSize && merged.length === rows.length) throw new Error("Conversation pagination did not advance");
+        rows = merged;
+        offset += page.length;
+        hasMore = page.length === this.pageSize;
+        if (!hasMore || offset >= target && applyConversationFilter(rows, this.state.filter).length > 0 && (!boundary || page.some((row) => compare2(row, boundary) <= 0))) break;
+      }
+      if (!this.alive(generation)) return;
+      this.source = rows;
+      this.offset = offset;
+      this.patch({ conversations: applyConversationFilter(rows, this.state.filter), hasMore });
+    } catch (cause) {
+      this.fail(cause, generation);
+    } finally {
+      if (this.alive(generation)) {
+        this.refreshing = false;
+        this.flushRefresh();
+      }
     }
   };
-  refresh = () => this.loadInitial();
   loadMore = async () => {
-    if (!this.alive() || this.state.isInitialLoading || this.state.isLoadingMore || !this.state.hasMore) return;
+    if (!this.alive() || this.refreshing || this.state.isInitialLoading || this.state.isLoadingMore || !this.state.hasMore) return;
     const generation = this.generation;
     this.patch({ isLoadingMore: true, error: null });
     try {
@@ -1498,7 +1612,10 @@ var ConversationListStore = class {
     } catch (cause) {
       this.fail(cause, generation);
     } finally {
-      if (this.alive(generation)) this.patch({ isLoadingMore: false });
+      if (this.alive(generation)) {
+        this.patch({ isLoadingMore: false });
+        this.flushRefresh();
+      }
     }
   };
   setFilter = async (filter) => {