@convokitapp/vue-ui 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,12 +1,21 @@
 // src/client.ts
 function createConvoKitUiClient(client) {
   return {
+    get sessionIdentity() {
+      return client.connected ? client.realtime : null;
+    },
+    onConnectionEvent: (handlers) => client.realtime.onConnectionEvent(handlers),
+    onMessageDeleted: (conversationId, handler, onError) => client.realtime.onMessageDeleted(conversationId, {
+      onEvent: handler,
+      ...onError ? { onError } : {}
+    }),
     get currentUserId() {
-      return client.currentUserId;
+      return client.connected ? client.currentUserId : "";
     },
     getConversations: (options) => client.getConversations(options),
     getConversation: (conversationId) => client.getConversation(conversationId),
     getMessages: (options) => client.getMessages(options),
+    getMessage: (id) => client.getMessage(id),
     sendMessage: (input) => client.sendMessage(input),
     markConversationRead: (conversationId) => client.markConversationRead(conversationId),
     sendTyping: (input) => client.sendTyping(input),
@@ -31,8 +40,13 @@ import { defineComponent, h } from "vue";
 
 // src/utils.ts
 import { clsx } from "clsx";
+import { normalizeClass } from "vue";
+var pendingMessageIdPrefix = "convokit-pending-";
+function isConvoKitPendingMessage(message) {
+  return message.id.startsWith(pendingMessageIdPrefix);
+}
 function cx(...values) {
-  return clsx(values);
+  return clsx(values.map(normalizeClass));
 }
 function requestedParticipantIds(filter) {
   const values = filter.participantIds ?? [];
@@ -73,11 +87,15 @@ function mergeMessages(current, incoming) {
   const byId = new Map(current.map((message) => [message.id, message]));
   for (const message of incoming) byId.set(message.id, message);
   return [...byId.values()].sort((left, right) => {
+    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;
   });
 }
 function readerIdsFor(message, readAtByUserId) {
+  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));
 }
 function partClass(part, appearance, defaultClass) {
@@ -129,253 +147,582 @@ import { ArrowLeft, LoaderCircle as LoaderCircle2, Paperclip, RefreshCw, Send }
 import {
   defineComponent as defineComponent3,
   h as h3,
-  ref as ref3,
+  ref as ref2,
   watchEffect
 } from "vue";
 
 // src/composables/use-conversation.ts
-import {
-  computed,
-  getCurrentScope,
-  onScopeDispose,
-  ref,
-  shallowRef,
-  toValue,
-  watch
-} from "vue";
-function useConversation(options) {
-  const messagePageSize = options.messagePageSize ?? 30;
-  const typingTimeoutMs = options.typingTimeoutMs ?? 3e3;
-  if (!toValue(options.conversationId).trim()) throw new TypeError("conversationId is required");
-  if (!Number.isInteger(messagePageSize) || messagePageSize <= 0) throw new RangeError("messagePageSize must be a positive integer");
-  if (!Number.isFinite(typingTimeoutMs) || typingTimeoutMs < 0) throw new RangeError("typingTimeoutMs must be non-negative");
-  const conversation = shallowRef(null);
-  const messages = shallowRef([]);
-  const typingUserIds = shallowRef(/* @__PURE__ */ new Set());
-  const readAtByUserId = shallowRef(/* @__PURE__ */ new Map());
-  const isInitialLoading = ref(false);
-  const isLoadingOlder = ref(false);
-  const isSending = ref(false);
-  const hasOlderMessages = ref(true);
-  const hasLoaded = ref(false);
-  const error = shallowRef(null);
-  const currentUserId = computed(() => toValue(options.client).currentUserId);
-  let generation = 0;
-  let disposed = false;
-  let sentTyping = false;
-  let typingTimer = null;
-  let subscriptions = [];
-  const pendingIds = /* @__PURE__ */ new Set();
-  let pendingSequence = 0;
-  const unsubscribe = async () => {
-    const active = subscriptions;
-    subscriptions = [];
-    await Promise.all(active.map((subscription) => subscription.unsubscribe()));
+import { computed, getCurrentScope, onScopeDispose, shallowRef, toValue, watch } from "vue";
+
+// src/conversation-store.ts
+function version(message) {
+  return message.updatedAt?.getTime() ?? message.createdAt.getTime();
+}
+function hasContent(message) {
+  return !!message.text?.trim() || message.media.length > 0;
+}
+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);
+}
+function blank(currentUserId = "") {
+  return {
+    conversation: null,
+    messages: [],
+    typingUserIds: /* @__PURE__ */ new Set(),
+    readAtByUserId: /* @__PURE__ */ new Map(),
+    isInitialLoading: false,
+    isLoadingOlder: false,
+    isReconciling: false,
+    isSending: false,
+    hasOlderMessages: true,
+    hasLoaded: false,
+    error: null,
+    currentUserId
   };
-  const markRead = async () => {
-    const client = toValue(options.client);
-    const conversationId = toValue(options.conversationId);
-    try {
-      await client.markConversationRead(conversationId);
-      if (disposed) return;
-      readAtByUserId.value = new Map(readAtByUserId.value).set(client.currentUserId, /* @__PURE__ */ new Date());
-    } catch (cause) {
-      if (!disposed) error.value = cause;
+}
+var ConversationStore = class {
+  constructor(options) {
+    this.options = options;
+    this.client = options.client;
+    this.room = options.conversationId.trim();
+    this.pageSize = options.messagePageSize ?? 30;
+    this.typingTimeout = options.typingTimeoutMs ?? 3e3;
+    if (!this.room) throw new TypeError("conversationId is required");
+    if (!Number.isInteger(this.pageSize) || this.pageSize < 1 || this.pageSize > 100) {
+      throw new RangeError("messagePageSize must be an integer between 1 and 100");
+    }
+    if (!Number.isFinite(this.typingTimeout) || this.typingTimeout < 0) {
+      throw new RangeError("typingTimeoutMs must be non-negative");
     }
+    this.owner = this.client.sessionIdentity;
+    this.user = this.owner ? this.client.currentUserId : "";
+    this.state = blank(this.user);
+  }
+  options;
+  client;
+  room;
+  owner;
+  user;
+  pageSize;
+  typingTimeout;
+  state;
+  listeners = /* @__PURE__ */ new Set();
+  subscriptions = [];
+  disposed = true;
+  generation = 0;
+  cursor;
+  revision = 0;
+  changes = /* @__PURE__ */ new Map();
+  hydrations = /* @__PURE__ */ new Map();
+  hydrationPool = { running: /* @__PURE__ */ new Set(), queued: /* @__PURE__ */ new Map() };
+  // Keep tombstones until an explicit reload/session change, including across refreshes.
+  deleted = /* @__PURE__ */ new Set();
+  sendRevision;
+  pendingSequence = 0;
+  refreshQueued = false;
+  typingTimers = /* @__PURE__ */ new Map();
+  ownTypingTimer;
+  sentTyping = false;
+  typingRevision = 0;
+  lastTypingSentAt = -Infinity;
+  getSnapshot = () => this.state;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
   };
-  const subscribe = (activeGeneration, client, conversationId) => {
-    const report = (cause) => {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+  patch(patch) {
+    this.state = { ...this.state, ...patch };
+    for (const listener of this.listeners) listener();
+  }
+  alive(generation = this.generation) {
+    return !this.disposed && generation === this.generation && this.owner !== null && this.client.sessionIdentity === this.owner;
+  }
+  start = (autoLoad = true) => {
+    if (this.owner === null || this.client.sessionIdentity !== this.owner) return;
+    this.disposed = false;
+    this.patch({ currentUserId: this.user });
+    if (autoLoad) void this.loadInitial();
+    else {
+      try {
+        this.attach(this.generation, false);
+      } catch {
+      }
+    }
+  };
+  detach() {
+    const active = this.subscriptions;
+    this.subscriptions = [];
+    for (const subscription of active) void subscription.unsubscribe().catch(() => void 0);
+  }
+  clearTyping() {
+    for (const timer of this.typingTimers.values()) clearTimeout(timer);
+    this.typingTimers.clear();
+    clearTimeout(this.ownTypingTimer);
+    this.ownTypingTimer = void 0;
+    this.sentTyping = false;
+    this.typingRevision++;
+    this.lastTypingSentAt = -Infinity;
+    this.patch({ typingUserIds: /* @__PURE__ */ new Set() });
+  }
+  clear() {
+    this.generation++;
+    this.detach();
+    this.clearTyping();
+    this.cursor = void 0;
+    this.changes.clear();
+    this.hydrations.clear();
+    this.hydrationPool.queued.clear();
+    this.deleted.clear();
+    this.sendRevision = void 0;
+    this.refreshQueued = false;
+  }
+  dispose = () => {
+    if (this.alive() && this.sentTyping) {
+      void this.client.sendTyping({ conversationId: this.room, isTyping: false }).catch(() => void 0);
+    }
+    this.disposed = true;
+    this.clear();
+    this.patch(blank());
+  };
+  fail(cause, generation, history = false) {
+    if (!this.alive(generation)) return;
+    const status = typeof cause === "object" && cause !== null && "status" in cause ? cause.status : void 0;
+    if (history && (status === 401 || status === 403 || status === 404)) {
+      this.clear();
+      this.patch({ ...blank(this.user), error: cause, hasLoaded: true, hasOlderMessages: false });
+    } else this.patch({ error: cause });
+  }
+  attach(generation, data = true) {
+    const report = (cause) => this.fail(cause, generation);
+    const add = (create) => {
+      if (!this.alive(generation)) return;
+      const subscription = create();
+      if (this.alive(generation)) this.subscriptions.push(subscription);
+      else void subscription.unsubscribe().catch(() => void 0);
     };
-    subscriptions = [
-      client.onMessage(conversationId, (message) => {
-        if (disposed || activeGeneration !== generation) return;
-        const pending = messages.value.find((candidate) => pendingIds.has(candidate.id) && message.senderId === client.currentUserId && candidate.text === message.text && candidate.media.length === message.media.length);
-        if (pending) pendingIds.delete(pending.id);
-        messages.value = mergeMessages(
-          pending ? messages.value.filter((candidate) => candidate.id !== pending.id) : messages.value,
-          [message]
-        );
-        if ((options.markReadOnReceive ?? true) && message.senderId !== client.currentUserId) void markRead();
-      }, report),
-      client.onReadReceipt(conversationId, ({ userId, readAt }) => {
-        if (disposed || activeGeneration !== generation) return;
-        readAtByUserId.value = new Map(readAtByUserId.value).set(userId, readAt);
-      }, report),
-      client.onTyping(conversationId, ({ userId, isTyping }) => {
-        if (disposed || activeGeneration !== generation || userId === client.currentUserId) return;
-        const next = new Set(typingUserIds.value);
-        if (isTyping) next.add(userId);
-        else next.delete(userId);
-        typingUserIds.value = next;
-      }, report)
-    ];
+    try {
+      add(() => this.client.onConnectionEvent({
+        onEvent: ({ topic, status }) => {
+          if (!data || !this.alive(generation) || topic !== `messages:${this.room}` && topic !== `conversation:${this.room}`) return;
+          if (status === "SUBSCRIBED") this.queueRefresh();
+          else this.clearTyping();
+        },
+        onSessionEnded: () => {
+          if (this.disposed || generation !== this.generation) return;
+          this.dispose();
+        },
+        onError: report
+      }));
+      if (!data) return;
+      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;
+        this.removeMessage(id);
+      }, report));
+      add(() => this.client.onReadReceipt(this.room, ({ userId, readAt }) => {
+        if (this.alive(generation)) this.mergeReads([[userId, readAt]]);
+      }, report));
+      add(() => this.client.onTyping(this.room, ({ userId, isTyping }) => {
+        if (!this.alive(generation) || !userId.trim() || userId === this.user) return;
+        clearTimeout(this.typingTimers.get(userId));
+        this.typingTimers.delete(userId);
+        const next = new Set(this.state.typingUserIds);
+        if (isTyping) {
+          next.add(userId);
+          this.typingTimers.set(userId, setTimeout(() => {
+            this.typingTimers.delete(userId);
+            if (!this.alive(generation)) return;
+            const remaining = new Set(this.state.typingUserIds);
+            remaining.delete(userId);
+            this.patch({ typingUserIds: remaining });
+          }, this.typingTimeout));
+        } else next.delete(userId);
+        this.patch({ typingUserIds: next });
+      }, report));
+    } catch (cause) {
+      this.detach();
+      this.fail(cause, generation);
+      throw cause;
+    }
+  }
+  validMessage(message) {
+    return message.conversationId === this.room && !!message.id.trim() && !!message.senderId.trim() && !isConvoKitPendingMessage(message) && Number.isFinite(message.createdAt.getTime()) && Number.isFinite(version(message));
+  }
+  onMessage(event, generation) {
+    const { message, type } = event;
+    if (!this.alive(generation) || type !== "insert" && type !== "update" || !this.validMessage(message) || this.deleted.has(message.id)) return;
+    const existing = this.state.messages.find((item) => item.id === message.id);
+    const known = existing ?? this.changes.get(message.id)?.message;
+    if (known && version(message) < version(known)) return;
+    const insert = type === "insert" || this.changes.get(message.id)?.insert === true;
+    if (!existing && !insert && type === "update" && !this.state.isInitialLoading && !this.state.isLoadingOlder && !this.state.isReconciling) return;
+    const revision = ++this.revision;
+    const provisional = existing && !message.media.length ? { ...message, media: existing.media } : message;
+    this.record(provisional, insert, revision, false);
+    const job = { revision, generation, message, insert };
+    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);
+    if (existing && version(existing) > version(message)) return;
+    this.changes.set(message.id, { revision, message, insert, complete });
+    if (existing || insert && hasContent(message)) this.patch({ messages: mergeMessages(this.state.messages, [message]) });
+  }
+  currentHydration(job) {
+    return this.alive(job.generation) && !this.deleted.has(job.message.id) && this.hydrations.get(job.message.id) === job;
+  }
+  removeMessage(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) });
+  }
+  drainHydration() {
+    const pool = this.hydrationPool;
+    for (const [id, job] of pool.queued) {
+      if (pool.running.size >= 8) break;
+      if (pool.running.has(id)) continue;
+      pool.queued.delete(id);
+      if (!this.currentHydration(job)) continue;
+      pool.running.add(id);
+      void this.hydrate(job, pool);
+    }
+  }
+  async hydrate(job, pool) {
+    const id = job.message.id;
+    try {
+      if (!this.currentHydration(job)) return;
+      const full = await this.client.getMessage(id);
+      if (!this.currentHydration(job)) return;
+      if (!this.validMessage(full) || full.id !== id || full.senderId !== job.message.senderId || version(full) < version(job.message)) {
+        throw new Error("Complete message response does not match the observed resource/revision");
+      }
+      this.record(full, job.insert, job.revision, true);
+    } catch (cause) {
+      if (!this.currentHydration(job)) return;
+      const status = typeof cause === "object" && cause !== null && "status" in cause ? cause.status : void 0;
+      if (status === 404) this.removeMessage(id);
+      this.fail(cause, job.generation);
+      this.queueRefresh();
+    } finally {
+      if (this.hydrations.get(id) === job) this.hydrations.delete(id);
+      pool.running.delete(id);
+      queueMicrotask(() => {
+        if (this.hydrationPool === pool) this.drainHydration();
+      });
+    }
+  }
+  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);
+    }
+    this.patch({ readAtByUserId: next });
+  }
+  validatePage(page, before) {
+    if (page.length > this.pageSize) throw new Error("Message page exceeds the requested limit");
+    let previous = before;
+    for (const message of page) {
+      if (!this.validMessage(message) || previous && compare(message, previous) >= 0) {
+        throw new Error("Message history must contain distinct, room-scoped rows in newest-first cursor order");
+      }
+      previous = message;
+    }
+  }
+  fetchPage(before) {
+    return this.client.getMessages({
+      conversationId: this.room,
+      limit: this.pageSize,
+      ...before ? { beforeCreatedAt: before.createdAt, beforeId: before.id } : {}
+    });
+  }
+  overlay(rows, revision) {
+    const byId = new Map(rows.filter((message) => !this.deleted.has(message.id)).map((message) => [message.id, message]));
+    for (const [id, change] of this.changes) {
+      if (change.revision > revision && !this.deleted.has(id) && (change.insert || byId.has(id))) {
+        const current = byId.get(id);
+        if (current || change.complete || hasContent(change.message)) {
+          byId.set(id, current ? newest(current, change.message, change.complete) : change.message);
+        }
+      }
+    }
+    for (const message of this.state.messages) {
+      if (isConvoKitPendingMessage(message)) byId.set(message.id, message);
+    }
+    return mergeMessages([], [...byId.values()]);
+  }
+  prune(revision) {
+    const safeRevision = Math.min(revision, this.sendRevision ?? Infinity);
+    for (const [id, change] of this.changes) if (change.revision <= safeRevision) this.changes.delete(id);
+    for (const [id, job] of this.hydrations) if (job.revision <= revision) {
+      this.hydrations.delete(id);
+      this.hydrationPool.queued.delete(id);
+    }
+  }
+  loadInitial = async () => {
+    if (!this.alive()) return;
+    this.clear();
+    const generation = this.generation;
+    this.patch({ ...blank(this.user), isInitialLoading: true });
+    const revision = this.revision;
+    try {
+      this.attach(generation);
+      if (!this.alive(generation)) return;
+      const [conversation, page] = await Promise.all([this.client.getConversation(this.room), this.fetchPage()]);
+      if (!this.alive(generation)) return;
+      if (conversation.id !== this.room) throw new Error("Conversation response belongs to a different room");
+      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.prune(revision);
+      if (this.options.markReadOnLoad ?? true) await this.markRead();
+    } catch (cause) {
+      this.fail(cause, generation, true);
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isInitialLoading: false, hasLoaded: true });
+        this.flushRefresh();
+      }
+    }
   };
-  const loadInitial = async () => {
-    const client = toValue(options.client);
-    const conversationId = toValue(options.conversationId).trim();
-    if (!conversationId) throw new TypeError("conversationId is required");
-    const activeGeneration = ++generation;
-    await unsubscribe();
-    if (disposed || activeGeneration !== generation) return;
-    messages.value = [];
-    pendingIds.clear();
-    conversation.value = null;
-    typingUserIds.value = /* @__PURE__ */ new Set();
-    readAtByUserId.value = /* @__PURE__ */ new Map();
-    hasOlderMessages.value = true;
-    error.value = null;
-    isInitialLoading.value = true;
-    isLoadingOlder.value = false;
-    subscribe(activeGeneration, client, conversationId);
+  queueRefresh() {
+    this.refreshQueued = true;
+    this.flushRefresh();
+  }
+  flushRefresh() {
+    const generation = this.generation;
+    void Promise.resolve().then(() => {
+      if (!this.alive(generation) || !this.refreshQueued || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling) return;
+      this.refreshQueued = false;
+      void this.refresh();
+    });
+  }
+  /** Re-fetch the entire viewed range atomically; a first-page-only refresh loses history. */
+  refresh = async () => {
+    if (!this.alive()) return;
+    if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling) {
+      this.refreshQueued = true;
+      return;
+    }
+    if (!this.state.hasLoaded || !this.subscriptions.length) return this.loadInitial();
+    const generation = this.generation;
+    const revision = this.revision;
+    const observed = this.state.messages.filter((message) => !isConvoKitPendingMessage(message)).concat([...this.changes.values()].filter((change) => change.insert).map((change) => change.message));
+    const boundary = observed.reduce((oldest, message) => !oldest || compare(message, oldest) < 0 ? message : oldest, this.cursor);
+    const previouslyExhausted = !this.state.hasOlderMessages;
+    this.patch({ isReconciling: true, error: null });
     try {
-      const [nextConversation, page] = await Promise.all([
-        client.getConversation(conversationId),
-        client.getMessages({ conversationId, limit: messagePageSize, offset: 0 })
-      ]);
-      if (disposed || activeGeneration !== generation) return;
-      conversation.value = nextConversation;
-      readAtByUserId.value = new Map(nextConversation.participants.flatMap((participant) => participant.lastReadAt ? [[participant.appUserId, participant.lastReadAt]] : []));
-      messages.value = mergeMessages([], page);
-      hasOlderMessages.value = page.length === messagePageSize;
-      if (options.markReadOnLoad ?? true) await markRead();
+      const conversation = await this.client.getConversation(this.room);
+      if (!this.alive(generation)) return;
+      if (conversation.id !== this.room) throw new Error("Conversation response belongs to a different room");
+      const rows = [];
+      let before;
+      let hasOlder = true;
+      while (this.alive(generation)) {
+        const page = await this.fetchPage(before);
+        if (!this.alive(generation)) return;
+        this.validatePage(page, before);
+        rows.push(...page);
+        before = page.at(-1) ?? before;
+        hasOlder = page.length === this.pageSize;
+        if (!hasOlder || !boundary || !previouslyExhausted && before && compare(before, boundary) < 0) break;
+      }
+      this.cursor = before;
+      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);
+      }
+      this.patch({ conversation, messages: reconciled, hasOlderMessages: hasOlder });
+      this.mergeReads(conversation.participants.flatMap((participant) => participant.lastReadAt ? [[participant.appUserId, participant.lastReadAt]] : []));
+      this.prune(revision);
     } catch (cause) {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+      this.fail(cause, generation, true);
     } finally {
-      if (!disposed && activeGeneration === generation) {
-        isInitialLoading.value = false;
-        hasLoaded.value = true;
+      if (this.alive(generation)) {
+        this.patch({ isReconciling: false });
+        this.flushRefresh();
       }
     }
   };
-  const loadOlderMessages = async () => {
-    if (isInitialLoading.value || isLoadingOlder.value || !hasOlderMessages.value) return;
-    const activeGeneration = generation;
-    const client = toValue(options.client);
-    const conversationId = toValue(options.conversationId);
-    isLoadingOlder.value = true;
-    error.value = null;
+  loadOlderMessages = async () => {
+    if (!this.alive() || !this.state.hasLoaded || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling || !this.state.hasOlderMessages) return;
+    const generation = this.generation;
+    const revision = this.revision;
+    const cursor = this.cursor;
+    this.patch({ isLoadingOlder: true, error: null });
     try {
-      const page = await client.getMessages({
-        conversationId,
-        limit: messagePageSize,
-        offset: messages.value.filter((message) => !pendingIds.has(message.id)).length
+      const page = await this.fetchPage(cursor);
+      if (!this.alive(generation)) return;
+      this.validatePage(page, cursor);
+      this.cursor = page.at(-1) ?? cursor;
+      this.patch({
+        messages: this.overlay(mergeMessages(page, this.state.messages), revision),
+        hasOlderMessages: page.length === this.pageSize
       });
-      if (disposed || activeGeneration !== generation) return;
-      messages.value = mergeMessages(messages.value, page);
-      hasOlderMessages.value = page.length === messagePageSize;
     } catch (cause) {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+      this.fail(cause, generation, true);
     } finally {
-      if (!disposed && activeGeneration === generation) isLoadingOlder.value = false;
+      if (this.alive(generation)) {
+        this.patch({ isLoadingOlder: false });
+        this.flushRefresh();
+      }
     }
   };
-  const updateTyping = async (nextTyping) => {
-    if (typingTimer) clearTimeout(typingTimer);
-    if (nextTyping) typingTimer = setTimeout(() => {
-      void updateTyping(false);
-    }, typingTimeoutMs);
-    if (sentTyping === nextTyping) return;
-    sentTyping = nextTyping;
+  markRead = async () => {
+    if (!this.alive()) return;
+    const generation = this.generation;
     try {
-      await toValue(options.client).sendTyping({
-        conversationId: toValue(options.conversationId),
-        isTyping: nextTyping
-      });
+      await this.client.markConversationRead(this.room);
     } catch (cause) {
-      if (!disposed) error.value = cause;
+      this.fail(cause, generation);
     }
   };
-  const sendMessage = async ({ text, media }) => {
-    const normalizedText = text?.trim();
-    if (!normalizedText && (!media || media.length === 0)) return null;
-    if (isSending.value) return null;
-    const pendingId = `convokit-pending-${Date.now()}-${++pendingSequence}`;
-    const pendingMessage = {
+  updateTyping = async (isTyping) => {
+    if (!this.alive()) return;
+    const generation = this.generation;
+    clearTimeout(this.ownTypingTimer);
+    if (isTyping) this.ownTypingTimer = setTimeout(() => {
+      if (this.alive(generation)) void this.updateTyping(false);
+    }, this.typingTimeout);
+    const now = performance.now();
+    const renew = isTyping && now - this.lastTypingSentAt >= Math.max(1, this.typingTimeout / 2);
+    if (this.sentTyping === isTyping && !renew) return;
+    const revision = ++this.typingRevision;
+    this.sentTyping = isTyping;
+    this.lastTypingSentAt = isTyping ? now : -Infinity;
+    try {
+      await this.client.sendTyping({ conversationId: this.room, isTyping });
+    } catch (cause) {
+      if (this.alive(generation) && revision === this.typingRevision) {
+        this.sentTyping = false;
+        this.fail(cause, generation);
+      }
+    }
+  };
+  sendMessage = async ({ text, media }) => {
+    const normalized = text?.trim();
+    if (!this.alive() || this.state.isSending || !normalized && !media?.length) return null;
+    const generation = this.generation;
+    const revision = this.revision;
+    this.sendRevision = revision;
+    const pendingId = `convokit-pending-${Date.now()}-${++this.pendingSequence}`;
+    const pending = {
       id: pendingId,
-      conversationId: toValue(options.conversationId),
-      senderId: toValue(options.client).currentUserId,
-      text: normalizedText ?? null,
+      conversationId: this.room,
+      senderId: this.user,
+      text: normalized || null,
       media: media ?? [],
       createdAt: /* @__PURE__ */ new Date(),
       updatedAt: null
     };
-    pendingIds.add(pendingId);
-    messages.value = mergeMessages(messages.value, [pendingMessage]);
-    isSending.value = true;
-    error.value = null;
-    const activeGeneration = generation;
+    this.patch({ messages: mergeMessages(this.state.messages, [pending]), isSending: true, error: null });
     try {
-      const message = await toValue(options.client).sendMessage({
-        conversationId: toValue(options.conversationId),
-        ...normalizedText ? { text: normalizedText } : {},
+      const message = await this.client.sendMessage({
+        conversationId: this.room,
+        ...normalized ? { text: normalized } : {},
         ...media?.length ? { media } : {}
       });
-      pendingIds.delete(pendingId);
-      if (!disposed && activeGeneration === generation) {
-        messages.value = mergeMessages(
-          messages.value.filter((candidate) => candidate.id !== pendingId),
-          [message]
-        );
-      }
-      await updateTyping(false);
-      return message;
+      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");
+      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;
+      if (live && live.revision > revision) latest = newest(latest, live.message, live.complete);
+      if (!this.deleted.has(message.id)) this.changes.set(message.id, { revision: ++this.revision, message: latest, insert: true, complete: true });
+      this.patch({ messages: mergeMessages(
+        this.state.messages.filter((item) => item.id !== pendingId),
+        this.deleted.has(message.id) ? [] : [latest]
+      ) });
+      void this.updateTyping(false);
+      return this.alive(generation) ? latest : null;
     } catch (cause) {
-      pendingIds.delete(pendingId);
-      if (!disposed) {
-        messages.value = messages.value.filter((candidate) => candidate.id !== pendingId);
-        error.value = cause;
+      if (this.alive(generation)) {
+        this.patch({ messages: this.state.messages.filter((item) => item.id !== pendingId) });
+        this.fail(cause, generation);
       }
       return null;
     } finally {
-      if (!disposed && activeGeneration === generation) isSending.value = false;
+      if (this.alive(generation)) {
+        this.sendRevision = void 0;
+        this.patch({ isSending: false });
+      }
     }
   };
+  readerIdsFor = (message) => readerIdsFor(message, this.state.readAtByUserId);
+};
+
+// src/composables/use-conversation.ts
+function useConversation(options) {
+  const createStore = () => new ConversationStore({
+    ...options,
+    client: toValue(options.client),
+    conversationId: toValue(options.conversationId)
+  });
+  let store = createStore();
+  const snapshot = shallowRef(store.getSnapshot());
+  let unsubscribe;
+  const stop = watch(
+    () => [toValue(options.client), toValue(options.client).sessionIdentity, toValue(options.conversationId)],
+    () => {
+      store.dispose();
+      unsubscribe?.();
+      store = createStore();
+      snapshot.value = store.getSnapshot();
+      unsubscribe = store.subscribe(() => {
+        snapshot.value = store.getSnapshot();
+      });
+      store.start(options.autoLoad ?? true);
+    },
+    { immediate: true, flush: "sync" }
+  );
+  const field = (key) => computed(() => snapshot.value[key]);
   const dispose = async () => {
-    disposed = true;
-    generation += 1;
-    if (typingTimer) clearTimeout(typingTimer);
-    if (sentTyping) {
-      await toValue(options.client).sendTyping({
-        conversationId: toValue(options.conversationId),
-        isTyping: false
-      }).catch(() => void 0);
-    }
-    await unsubscribe();
+    stop();
+    store.dispose();
+    unsubscribe?.();
+    unsubscribe = void 0;
   };
-  if (options.autoLoad ?? true) {
-    watch(
-      () => [toValue(options.client), toValue(options.conversationId)],
-      () => {
-        disposed = false;
-        sentTyping = false;
-        void loadInitial();
-      },
-      { immediate: true }
-    );
-  }
   if (getCurrentScope()) onScopeDispose(() => {
     void dispose();
   });
   return {
-    conversation,
-    messages,
-    typingUserIds,
-    readAtByUserId,
-    isInitialLoading,
-    isLoadingOlder,
-    isSending,
-    hasOlderMessages,
-    hasLoaded,
-    error,
-    currentUserId,
-    readerIdsFor: (message) => readerIdsFor(message, readAtByUserId.value),
-    loadInitial,
-    refresh: loadInitial,
-    loadOlderMessages,
-    sendMessage,
-    markRead,
-    updateTyping,
+    conversation: field("conversation"),
+    messages: field("messages"),
+    typingUserIds: field("typingUserIds"),
+    readAtByUserId: field("readAtByUserId"),
+    isInitialLoading: field("isInitialLoading"),
+    isLoadingOlder: field("isLoadingOlder"),
+    isReconciling: field("isReconciling"),
+    isSending: field("isSending"),
+    hasOlderMessages: field("hasOlderMessages"),
+    hasLoaded: field("hasLoaded"),
+    error: field("error"),
+    currentUserId: field("currentUserId"),
+    readerIdsFor: (message) => store.readerIdsFor(message),
+    loadInitial: () => store.loadInitial(),
+    refresh: () => store.refresh(),
+    loadOlderMessages: () => store.loadOlderMessages(),
+    sendMessage: (input) => store.sendMessage(input),
+    markRead: () => store.markRead(),
+    updateTyping: (isTyping) => store.updateTyping(isTyping),
     dispose
   };
 }
@@ -397,7 +744,7 @@ import {
   defineComponent as defineComponent2,
   h as h2,
   nextTick,
-  ref as ref2,
+  ref,
   watch as watch2
 } from "vue";
 var appearanceProps = {
@@ -463,7 +810,7 @@ var MessageListView = defineComponent2({
   },
   emits: ["load-older", "attachment-click"],
   setup(props, { attrs, emit, slots }) {
-    const internalElement = ref2(null);
+    const internalElement = ref(null);
     let requestInFlight = false;
     let lastRequestedLength = null;
     let previousMessageCount = 0;
@@ -506,7 +853,8 @@ var MessageListView = defineComponent2({
     const renderMessage = (message, index) => {
       const isCurrentUser = message.senderId === props.currentUserId;
       const sender = participants.value.get(message.senderId);
-      const readerIds = props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId);
+      const isPending = isConvoKitPendingMessage(message);
+      const readerIds = isPending ? /* @__PURE__ */ new Set() : props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId);
       const slotProps = { message, chronologicalIndex: index, isCurrentUser, sender, readerIds };
       const custom = slots.message?.(slotProps);
       if (custom) return h2("div", { key: message.id, role: "listitem" }, custom);
@@ -539,12 +887,12 @@ var MessageListView = defineComponent2({
             !isCurrentUser ? h2("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
             message.text ? h2("div", { class: "ckui-message-text" }, message.text) : null,
             ...mediaNodes,
-            h2("time", { class: "ckui-message-time", datetime: message.createdAt.toISOString() }, [
-              props.formatTime(message.createdAt),
-              isCurrentUser ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Delivered" }) : null
+            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 ? slots["read-receipt"]?.(receiptSlotProps) ?? h2("div", {
+          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
@@ -672,8 +1020,8 @@ var ConversationView = defineComponent3({
     "update:modelValue"
   ],
   setup(props, { attrs, emit, slots }) {
-    const internalDraft = ref3(props.defaultDraft);
-    const submitting = ref3(false);
+    const internalDraft = ref2(props.defaultDraft);
+    const submitting = ref2(false);
     const appearance = () => ({
       density: props.density,
       unstyled: props.unstyled,
@@ -1001,119 +1349,193 @@ import { ChevronRight, Inbox, LoaderCircle as LoaderCircle3, RefreshCw as Refres
 import {
   defineComponent as defineComponent4,
   h as h4,
-  ref as ref5,
+  ref as ref3,
   watchEffect as watchEffect2
 } from "vue";
 
 // src/composables/use-conversation-list.ts
-import {
-  computed as computed3,
-  getCurrentScope as getCurrentScope2,
-  onScopeDispose as onScopeDispose2,
-  ref as ref4,
-  shallowRef as shallowRef2,
-  toValue as toValue2,
-  watch as watch3
-} from "vue";
-function useConversationList(options) {
-  const pageSize = options.pageSize ?? 30;
-  if (!Number.isInteger(pageSize) || pageSize <= 0) throw new RangeError("pageSize must be a positive integer");
-  const source = shallowRef2([]);
-  const filter = shallowRef2(options.initialFilter ?? {});
-  const isInitialLoading = ref4(false);
-  const isLoadingMore = ref4(false);
-  const hasMore = ref4(true);
-  const hasLoaded = ref4(false);
-  const error = shallowRef2(null);
-  const conversations = computed3(() => applyConversationFilter(source.value, filter.value));
-  let offset = 0;
-  let generation = 0;
-  let disposed = false;
-  const loadUntilVisible = async (activeGeneration, activeFilter) => {
-    const visibleBefore = applyConversationFilter(source.value, activeFilter).length;
-    while (true) {
-      const request = { limit: pageSize, offset, filter: activeFilter };
-      const page = options.pageLoader ? await options.pageLoader(request) : await toValue2(options.client).getConversations({
-        limit: pageSize,
-        offset: request.offset,
-        archived: activeFilter.archived ?? false
+import { computed as computed3, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, shallowRef as shallowRef2, toValue as toValue2, watch as watch3 } from "vue";
+
+// src/conversation-list-store.ts
+function blank2(filter) {
+  return { conversations: [], filter, isInitialLoading: false, isLoadingMore: false, hasMore: true, hasLoaded: false, error: null };
+}
+var ConversationListStore = class {
+  constructor(options) {
+    this.options = options;
+    this.owner = options.client.sessionIdentity;
+    this.pageSize = options.pageSize ?? 30;
+    if (!Number.isInteger(this.pageSize) || this.pageSize < 1 || this.pageSize > 100) {
+      throw new RangeError("pageSize must be an integer between 1 and 100");
+    }
+    this.state = blank2(options.initialFilter ?? {});
+  }
+  options;
+  owner;
+  pageSize;
+  state;
+  source = [];
+  offset = 0;
+  generation = 0;
+  lifecycleGeneration = 0;
+  disposed = true;
+  lifecycle;
+  listeners = /* @__PURE__ */ new Set();
+  getSnapshot = () => this.state;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  patch(patch) {
+    this.state = { ...this.state, ...patch };
+    for (const listener of this.listeners) listener();
+  }
+  alive(generation = this.generation) {
+    return !this.disposed && generation === this.generation && this.owner !== null && this.options.client.sessionIdentity === this.owner;
+  }
+  start = (autoLoad = true) => {
+    if (!this.owner || this.options.client.sessionIdentity !== this.owner) return;
+    this.disposed = false;
+    const lifecycleGeneration = ++this.lifecycleGeneration;
+    try {
+      const subscription = this.options.client.onConnectionEvent({
+        onEvent: () => {
+        },
+        onSessionEnded: () => {
+          if (!this.disposed && lifecycleGeneration === this.lifecycleGeneration) this.dispose();
+        }
       });
-      if (disposed || activeGeneration !== generation) return;
-      offset += page.length;
-      hasMore.value = page.length === pageSize;
-      source.value = mergeConversations(source.value, page);
-      if (!hasMore.value || applyConversationFilter(source.value, activeFilter).length > visibleBefore) return;
+      if (this.alive()) this.lifecycle = subscription;
+      else void subscription.unsubscribe().catch(() => void 0);
+      if (autoLoad) void this.loadInitial();
+    } catch (cause) {
+      if (this.alive()) this.patch({ error: cause });
     }
   };
-  const loadInitialFor = async (activeFilter = filter.value) => {
-    const activeGeneration = ++generation;
-    source.value = [];
-    offset = 0;
-    hasMore.value = true;
-    isInitialLoading.value = true;
-    isLoadingMore.value = false;
-    error.value = null;
+  dispose = () => {
+    this.disposed = true;
+    this.generation++;
+    this.lifecycleGeneration++;
+    const subscription = this.lifecycle;
+    this.lifecycle = void 0;
+    if (subscription) void subscription.unsubscribe().catch(() => void 0);
+    this.source = [];
+    this.offset = 0;
+    this.patch(blank2(this.state.filter));
+  };
+  fail(cause, generation) {
+    if (!this.alive(generation)) return;
+    const status = typeof cause === "object" && cause !== null && "status" in cause ? cause.status : void 0;
+    if (status === 401 || status === 403 || status === 404) {
+      this.source = [];
+      this.offset = 0;
+      this.patch({ conversations: [], hasMore: false });
+    }
+    this.patch({ error: cause });
+  }
+  async loadUntilVisible(generation, filter) {
+    const visibleBefore = applyConversationFilter(this.source, filter).length;
+    while (this.alive(generation)) {
+      const request = { limit: this.pageSize, offset: this.offset, filter };
+      const page = this.options.pageLoader ? await this.options.pageLoader(request) : await this.options.client.getConversations({ limit: this.pageSize, offset: this.offset, archived: filter.archived ?? false });
+      if (!this.alive(generation)) return;
+      if (page.length > this.pageSize || page.some((conversation) => !conversation.id.trim())) {
+        throw new Error("Invalid conversation page");
+      }
+      const merged = mergeConversations(this.source, page);
+      if (page.length === this.pageSize && merged.length === this.source.length) {
+        throw new Error("Conversation pagination did not advance");
+      }
+      this.offset += page.length;
+      this.source = merged;
+      const visible = applyConversationFilter(merged, filter);
+      const hasMore = page.length === this.pageSize;
+      this.patch({ conversations: visible, hasMore });
+      if (!hasMore || visible.length > visibleBefore) return;
+    }
+  }
+  loadInitial = async () => {
+    if (!this.alive()) return;
+    const generation = ++this.generation;
+    this.source = [];
+    this.offset = 0;
+    this.patch({ ...blank2(this.state.filter), isInitialLoading: true });
     try {
-      await loadUntilVisible(activeGeneration, activeFilter);
+      await this.loadUntilVisible(generation, this.state.filter);
     } catch (cause) {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+      this.fail(cause, generation);
     } finally {
-      if (!disposed && activeGeneration === generation) {
-        isInitialLoading.value = false;
-        hasLoaded.value = true;
-      }
+      if (this.alive(generation)) this.patch({ isInitialLoading: false, hasLoaded: true });
     }
   };
-  const loadMore = async () => {
-    if (isInitialLoading.value || isLoadingMore.value || !hasMore.value) return;
-    const activeGeneration = generation;
-    isLoadingMore.value = true;
-    error.value = null;
+  refresh = () => this.loadInitial();
+  loadMore = async () => {
+    if (!this.alive() || this.state.isInitialLoading || this.state.isLoadingMore || !this.state.hasMore) return;
+    const generation = this.generation;
+    this.patch({ isLoadingMore: true, error: null });
     try {
-      await loadUntilVisible(activeGeneration, filter.value);
+      await this.loadUntilVisible(generation, this.state.filter);
     } catch (cause) {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+      this.fail(cause, generation);
     } finally {
-      if (!disposed && activeGeneration === generation) isLoadingMore.value = false;
+      if (this.alive(generation)) this.patch({ isLoadingMore: false });
     }
   };
-  const setFilter = async (nextFilter) => {
-    const previousArchived = filter.value.archived ?? false;
-    filter.value = nextFilter;
-    error.value = null;
-    if ((nextFilter.archived ?? false) !== previousArchived || !hasLoaded.value) {
-      await loadInitialFor(nextFilter);
-    } else if (applyConversationFilter(source.value, nextFilter).length === 0 && hasMore.value) {
-      await loadMore();
-    }
+  setFilter = async (filter) => {
+    if (!this.alive()) return;
+    const reload = this.options.pageLoader || !this.state.hasLoaded || this.state.isInitialLoading || this.state.isLoadingMore || (filter.archived ?? false) !== (this.state.filter.archived ?? false);
+    this.patch({ filter, conversations: applyConversationFilter(this.source, filter), error: null });
+    if (reload) await this.loadInitial();
+    else if (!this.state.conversations.length && this.state.hasMore) await this.loadMore();
   };
-  const setQuery = (query) => setFilter({ ...filter.value, query });
+  setQuery = (query) => this.setFilter({ ...this.state.filter, query });
+};
+
+// src/composables/use-conversation-list.ts
+function useConversationList(options) {
+  const createStore = () => new ConversationListStore({ ...options, client: toValue2(options.client) });
+  let store = createStore();
+  const snapshot = shallowRef2(store.getSnapshot());
+  let unsubscribe;
+  const stop = watch3(
+    () => [toValue2(options.client), toValue2(options.client).sessionIdentity],
+    () => {
+      store.dispose();
+      unsubscribe?.();
+      store = createStore();
+      snapshot.value = store.getSnapshot();
+      unsubscribe = store.subscribe(() => {
+        snapshot.value = store.getSnapshot();
+      });
+      store.start(options.autoLoad ?? true);
+    },
+    { immediate: true, flush: "sync" }
+  );
+  const field = (key) => computed3(() => snapshot.value[key]);
   const dispose = async () => {
-    disposed = true;
-    generation += 1;
+    stop();
+    store.dispose();
+    unsubscribe?.();
+    unsubscribe = void 0;
   };
-  if (options.autoLoad ?? true) {
-    watch3(() => toValue2(options.client), () => {
-      disposed = false;
-      void loadInitialFor(filter.value);
-    }, { immediate: true });
-  }
   if (getCurrentScope2()) onScopeDispose2(() => {
     void dispose();
   });
   return {
-    conversations,
-    filter,
-    isInitialLoading,
-    isLoadingMore,
-    hasMore,
-    hasLoaded,
-    error,
-    loadInitial: loadInitialFor,
-    refresh: loadInitialFor,
-    loadMore,
-    setFilter,
-    setQuery,
+    conversations: field("conversations"),
+    filter: field("filter"),
+    isInitialLoading: field("isInitialLoading"),
+    isLoadingMore: field("isLoadingMore"),
+    hasMore: field("hasMore"),
+    hasLoaded: field("hasLoaded"),
+    error: field("error"),
+    loadInitial: () => store.loadInitial(),
+    refresh: () => store.refresh(),
+    loadMore: () => store.loadMore(),
+    setFilter: (filter) => store.setFilter(filter),
+    setQuery: (query) => store.setQuery(query),
     dispose
   };
 }
@@ -1150,7 +1572,7 @@ var ConversationListView = defineComponent4({
     "load-more": () => true
   },
   setup(props, { attrs, emit, slots }) {
-    const internalElement = ref5(null);
+    const internalElement = ref3(null);
     let requestInFlight = false;
     let lastRequestedLength = null;
     const appearance = () => ({
@@ -1431,6 +1853,7 @@ export {
   defaultConvoKitTheme,
   defaultReadersResolver,
   formatFileSize,
+  isConvoKitPendingMessage,
   matchesConversation,
   mergeConversations,
   mergeMessages,