@convokitapp/vue-ui 0.3.0 → 0.4.1

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { Conversation as Conversation$1, MessageListOptions, Message, MessageMedia, RealtimeConnectionHandlers, RealtimeSubscription, MessageEvent, MessageDeletedEvent, ReadEvent, TypingEvent, ConvoKitClient } from '@convokitapp/sdk';
+import { Conversation as Conversation$1, MessageListOptions, Message, SendMessageInput, RealtimeConnectionHandlers, RealtimeSubscription, MessageEvent, MessageDeletedEvent, ReadEvent, TypingEvent, MessageMedia, ConvoKitClient } from '@convokitapp/sdk';
 import * as vue from 'vue';
 import { CSSProperties, HTMLAttributes, Ref, VNodeChild, PropType, MaybeRefOrGetter, TextareaHTMLAttributes } from 'vue';
 
@@ -16,17 +16,15 @@ interface ConvoKitUiClient {
     getMessages(options: MessageListOptions): Promise<Message[]>;
     /** Complete authorized message, including related media absent from raw row events. */
     getMessage(id: string): Promise<Message>;
-    sendMessage(input: {
-        conversationId: string;
-        text?: string;
-        media?: MessageMedia[];
-    }): Promise<Message>;
+    sendMessage(input: SendMessageInput): Promise<Message>;
     markConversationRead(conversationId: string): Promise<void>;
     sendTyping(input: {
         conversationId: string;
         isTyping: boolean;
     }): Promise<void>;
     onConnectionEvent(handlers: RealtimeConnectionHandlers): RealtimeSubscription;
+    /** Notify on inbox mutations AND on initial subscription/reconnect. No room data in the signal. */
+    onInboxChanged(handler: () => void, onError?: (error: Error) => void): RealtimeSubscription;
     onMessage(conversationId: string, handler: (event: MessageEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onMessageDeleted(conversationId: string, handler: (event: MessageDeletedEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onReadReceipt(conversationId: string, handler: (event: ReadEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Conversation as Conversation$1, MessageListOptions, Message, MessageMedia, RealtimeConnectionHandlers, RealtimeSubscription, MessageEvent, MessageDeletedEvent, ReadEvent, TypingEvent, ConvoKitClient } from '@convokitapp/sdk';
+import { Conversation as Conversation$1, MessageListOptions, Message, SendMessageInput, RealtimeConnectionHandlers, RealtimeSubscription, MessageEvent, MessageDeletedEvent, ReadEvent, TypingEvent, MessageMedia, ConvoKitClient } from '@convokitapp/sdk';
 import * as vue from 'vue';
 import { CSSProperties, HTMLAttributes, Ref, VNodeChild, PropType, MaybeRefOrGetter, TextareaHTMLAttributes } from 'vue';
 
@@ -16,17 +16,15 @@ interface ConvoKitUiClient {
     getMessages(options: MessageListOptions): Promise<Message[]>;
     /** Complete authorized message, including related media absent from raw row events. */
     getMessage(id: string): Promise<Message>;
-    sendMessage(input: {
-        conversationId: string;
-        text?: string;
-        media?: MessageMedia[];
-    }): Promise<Message>;
+    sendMessage(input: SendMessageInput): Promise<Message>;
     markConversationRead(conversationId: string): Promise<void>;
     sendTyping(input: {
         conversationId: string;
         isTyping: boolean;
     }): Promise<void>;
     onConnectionEvent(handlers: RealtimeConnectionHandlers): RealtimeSubscription;
+    /** Notify on inbox mutations AND on initial subscription/reconnect. No room data in the signal. */
+    onInboxChanged(handler: () => void, onError?: (error: Error) => void): RealtimeSubscription;
     onMessage(conversationId: string, handler: (event: MessageEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onMessageDeleted(conversationId: string, handler: (event: MessageDeletedEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onReadReceipt(conversationId: string, handler: (event: ReadEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;

package/dist/index.js

@@ -5,6 +5,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 } : {}
@@ -155,6 +159,7 @@ import {
 import { computed, getCurrentScope, onScopeDispose, shallowRef, toValue, watch } from "vue";
 
 // src/conversation-store.ts
+import { createClientMessageId } from "@convokitapp/sdk";
 function version(message) {
   return message.updatedAt?.getTime() ?? message.createdAt.getTime();
 }
@@ -221,7 +226,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;
@@ -236,6 +241,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();
   }
@@ -279,6 +288,7 @@ var ConversationStore = class {
     this.hydrationPool.queued.clear();
     this.deleted.clear();
     this.sendRevision = void 0;
+    this.activeSend = void 0;
     this.refreshQueued = false;
   }
   dispose = () => {
@@ -319,6 +329,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;
@@ -375,9 +393,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;
   }
@@ -623,9 +651,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 = createClientMessageId();
+    const pendingId = `convokit-pending-${clientMessageId}`;
     const pending = {
       id: pendingId,
+      clientMessageId,
       conversationId: this.room,
       senderId: this.user,
       text: normalized || null,
@@ -633,15 +663,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;
@@ -656,12 +690,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 });
       }
     }
@@ -889,13 +928,13 @@ var MessageListView = defineComponent2({
             ...mediaNodes,
             h2("span", { class: "ckui-message-time" }, [
               isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
-              isCurrentUser && !isPending ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Delivered" }) : null
+              isCurrentUser && !isPending ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Sent" }) : null
             ])
           ]),
           isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? h2("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
         ])
       ]);
     };
@@ -1380,6 +1419,9 @@ var ConversationListStore = class {
   lifecycleGeneration = 0;
   disposed = true;
   lifecycle;
+  inbox;
+  refreshQueued = false;
+  refreshing = false;
   listeners = /* @__PURE__ */ new Set();
   getSnapshot = () => this.state;
   subscribe = (listener) => {
@@ -1397,6 +1439,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 {
@@ -1409,6 +1452,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 });
@@ -1421,6 +1475,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));
@@ -1459,6 +1517,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 });
@@ -1467,12 +1526,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 {
@@ -1480,7 +1594,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) => {