@convokitapp/vue-ui 0.2.2 → 0.4.0

package/dist/index.cjs

@@ -46,12 +46,25 @@ module.exports = __toCommonJS(index_exports);
 // src/client.ts
 function createConvoKitUiClient(client) {
   return {
+    get sessionIdentity() {
+      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 } : {}
+    }),
     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),
@@ -72,16 +85,17 @@ function createConvoKitUiClient(client) {
 
 // src/components/avatar.ts
 var import_reka_ui = require("reka-ui");
-var import_vue = require("vue");
+var import_vue2 = require("vue");
 
 // src/utils.ts
 var import_clsx = require("clsx");
+var import_vue = require("vue");
 var pendingMessageIdPrefix = "convokit-pending-";
 function isConvoKitPendingMessage(message) {
   return message.id.startsWith(pendingMessageIdPrefix);
 }
 function cx(...values) {
-  return (0, import_clsx.clsx)(values);
+  return (0, import_clsx.clsx)(values.map(import_vue.normalizeClass));
 }
 function requestedParticipantIds(filter) {
   const values = filter.participantIds ?? [];
@@ -154,7 +168,7 @@ function initials(value) {
 }
 
 // src/components/avatar.ts
-var ConvoKitAvatar = (0, import_vue.defineComponent)({
+var ConvoKitAvatar = (0, import_vue2.defineComponent)({
   name: "ConvoKitAvatar",
   inheritAttrs: false,
   props: {
@@ -162,13 +176,13 @@ var ConvoKitAvatar = (0, import_vue.defineComponent)({
     src: { type: String, default: null }
   },
   setup(props, { attrs }) {
-    return () => (0, import_vue.h)(import_reka_ui.AvatarRoot, {
+    return () => (0, import_vue2.h)(import_reka_ui.AvatarRoot, {
       ...attrs,
       class: cx("ckui-avatar", attrs.class)
     }, {
       default: () => [
-        props.src ? (0, import_vue.h)(import_reka_ui.AvatarImage, { class: "ckui-avatar__image", src: props.src, alt: "" }) : null,
-        (0, import_vue.h)(import_reka_ui.AvatarFallback, {
+        props.src ? (0, import_vue2.h)(import_reka_ui.AvatarImage, { class: "ckui-avatar__image", src: props.src, alt: "" }) : null,
+        (0, import_vue2.h)(import_reka_ui.AvatarFallback, {
           class: "ckui-avatar__fallback",
           ...props.src ? { delayMs: 300 } : {}
         }, () => initials(props.name))
@@ -178,251 +192,623 @@ var ConvoKitAvatar = (0, import_vue.defineComponent)({
 });
 
 // src/components/conversation.ts
-var import_vue5 = require("@lucide/vue");
-var import_vue6 = require("vue");
+var import_vue6 = require("@lucide/vue");
+var import_vue7 = require("vue");
 
 // src/composables/use-conversation.ts
-var import_vue2 = require("vue");
-function useConversation(options) {
-  const messagePageSize = options.messagePageSize ?? 30;
-  const typingTimeoutMs = options.typingTimeoutMs ?? 3e3;
-  if (!(0, import_vue2.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 = (0, import_vue2.shallowRef)(null);
-  const messages = (0, import_vue2.shallowRef)([]);
-  const typingUserIds = (0, import_vue2.shallowRef)(/* @__PURE__ */ new Set());
-  const readAtByUserId = (0, import_vue2.shallowRef)(/* @__PURE__ */ new Map());
-  const isInitialLoading = (0, import_vue2.ref)(false);
-  const isLoadingOlder = (0, import_vue2.ref)(false);
-  const isSending = (0, import_vue2.ref)(false);
-  const hasOlderMessages = (0, import_vue2.ref)(true);
-  const hasLoaded = (0, import_vue2.ref)(false);
-  const error = (0, import_vue2.shallowRef)(null);
-  const currentUserId = (0, import_vue2.computed)(() => (0, import_vue2.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()));
+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();
+}
+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 = (0, import_vue2.toValue)(options.client);
-    const conversationId = (0, import_vue2.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;
+  activeSend;
+  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);
+    };
+  };
+  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();
+  }
+  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.activeSend = 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());
   };
-  const subscribe = (activeGeneration, client, conversationId) => {
-    const report = (cause) => {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+  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.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;
+        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;
+    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;
+  }
+  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 = (0, import_vue2.toValue)(options.client);
-    const conversationId = (0, import_vue2.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 = (0, import_vue2.toValue)(options.client);
-    const conversationId = (0, import_vue2.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 (0, import_vue2.toValue)(options.client).sendTyping({
-        conversationId: (0, import_vue2.toValue)(options.conversationId),
-        isTyping: nextTyping
-      });
+      await this.client.markConversationRead(this.room);
+    } catch (cause) {
+      this.fail(cause, generation);
+    }
+  };
+  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 (!disposed) error.value = cause;
+      if (this.alive(generation) && revision === this.typingRevision) {
+        this.sentTyping = false;
+        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 = {
+  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 clientMessageId = (0, import_sdk.createClientMessageId)();
+    const pendingId = `convokit-pending-${clientMessageId}`;
+    const pending = {
       id: pendingId,
-      conversationId: (0, import_vue2.toValue)(options.conversationId),
-      senderId: (0, import_vue2.toValue)(options.client).currentUserId,
-      text: normalizedText ?? null,
+      clientMessageId,
+      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;
+    const send = { pending };
+    this.activeSend = send;
+    this.patch({ messages: mergeMessages(this.state.messages, [pending]), isSending: true, error: null });
     try {
-      const message = await (0, import_vue2.toValue)(options.client).sendMessage({
-        conversationId: (0, import_vue2.toValue)(options.conversationId),
-        ...normalizedText ? { text: normalizedText } : {},
+      const message = await this.client.sendMessage({
+        conversationId: this.room,
+        clientMessageId,
+        ...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");
+      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;
+      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) });
+        if (send.confirmed) {
+          void this.updateTyping(false);
+          return send.confirmed;
+        }
+        this.fail(cause, generation);
       }
       return null;
     } finally {
-      if (!disposed && activeGeneration === generation) isSending.value = false;
+      if (this.alive(generation)) {
+        this.sendRevision = void 0;
+        this.activeSend = 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: (0, import_vue3.toValue)(options.client),
+    conversationId: (0, import_vue3.toValue)(options.conversationId)
+  });
+  let store = createStore();
+  const snapshot = (0, import_vue3.shallowRef)(store.getSnapshot());
+  let unsubscribe;
+  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)],
+    () => {
+      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) => (0, import_vue3.computed)(() => snapshot.value[key]);
   const dispose = async () => {
-    disposed = true;
-    generation += 1;
-    if (typingTimer) clearTimeout(typingTimer);
-    if (sentTyping) {
-      await (0, import_vue2.toValue)(options.client).sendTyping({
-        conversationId: (0, import_vue2.toValue)(options.conversationId),
-        isTyping: false
-      }).catch(() => void 0);
-    }
-    await unsubscribe();
+    stop();
+    store.dispose();
+    unsubscribe?.();
+    unsubscribe = void 0;
   };
-  if (options.autoLoad ?? true) {
-    (0, import_vue2.watch)(
-      () => [(0, import_vue2.toValue)(options.client), (0, import_vue2.toValue)(options.conversationId)],
-      () => {
-        disposed = false;
-        sentTyping = false;
-        void loadInitial();
-      },
-      { immediate: true }
-    );
-  }
-  if ((0, import_vue2.getCurrentScope)()) (0, import_vue2.onScopeDispose)(() => {
+  if ((0, import_vue3.getCurrentScope)()) (0, import_vue3.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
   };
 }
 
 // src/components/message-list.ts
-var import_vue3 = require("@lucide/vue");
-var import_vue4 = require("vue");
+var import_vue4 = require("@lucide/vue");
+var import_vue5 = require("vue");
 var appearanceProps = {
   classNames: { type: Object, default: void 0 },
   styles: { type: Object, default: void 0 },
@@ -436,33 +822,33 @@ function defaultMedia(media, open, imageLoading) {
   const tag = open ? "button" : "div";
   const interactive = open ? { type: "button", onClick: open } : {};
   if (media.type === "image") {
-    return (0, import_vue4.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--image" }, [
-      media.url ? (0, import_vue4.h)("img", { src: media.url, alt: media.name ?? "Shared image", loading: imageLoading }) : (0, import_vue4.h)("span", { class: "ckui-media-placeholder" }, [(0, import_vue4.h)(import_vue3.ImageOff, { "aria-hidden": "true" }), " Image unavailable"]),
-      media.name ? (0, import_vue4.h)("span", { class: "ckui-media-name" }, media.name) : null
+    return (0, import_vue5.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--image" }, [
+      media.url ? (0, import_vue5.h)("img", { src: media.url, alt: media.name ?? "Shared image", loading: imageLoading }) : (0, import_vue5.h)("span", { class: "ckui-media-placeholder" }, [(0, import_vue5.h)(import_vue4.ImageOff, { "aria-hidden": "true" }), " Image unavailable"]),
+      media.name ? (0, import_vue5.h)("span", { class: "ckui-media-name" }, media.name) : null
     ]);
   }
   if (media.type === "file") {
     const size = formatFileSize(media.size);
-    return (0, import_vue4.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--file" }, [
-      (0, import_vue4.h)(import_vue3.FileText, { "aria-hidden": "true" }),
-      (0, import_vue4.h)("span", [(0, import_vue4.h)("strong", media.name || "Attachment"), size ? (0, import_vue4.h)("small", size) : null]),
-      open ? (0, import_vue4.h)(import_vue3.Download, { size: 18, "aria-hidden": "true" }) : null
+    return (0, import_vue5.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--file" }, [
+      (0, import_vue5.h)(import_vue4.FileText, { "aria-hidden": "true" }),
+      (0, import_vue5.h)("span", [(0, import_vue5.h)("strong", media.name || "Attachment"), size ? (0, import_vue5.h)("small", size) : null]),
+      open ? (0, import_vue5.h)(import_vue4.Download, { size: 18, "aria-hidden": "true" }) : null
     ]);
   }
   if (media.type === "location") {
     const label = media.name || `${media.metadata.lat}, ${media.metadata.lng}`;
-    return (0, import_vue4.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--location" }, [
-      (0, import_vue4.h)(import_vue3.MapPin, { "aria-hidden": "true" }),
-      (0, import_vue4.h)("span", [(0, import_vue4.h)("strong", label), (0, import_vue4.h)("small", `${media.metadata.lat}, ${media.metadata.lng}`)])
+    return (0, import_vue5.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--location" }, [
+      (0, import_vue5.h)(import_vue4.MapPin, { "aria-hidden": "true" }),
+      (0, import_vue5.h)("span", [(0, import_vue5.h)("strong", label), (0, import_vue5.h)("small", `${media.metadata.lat}, ${media.metadata.lng}`)])
     ]);
   }
   const contact = media.metadata.email || media.metadata.phone || "Contact details";
-  return (0, import_vue4.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--contact" }, [
-    (0, import_vue4.h)(import_vue3.ContactRound, { "aria-hidden": "true" }),
-    (0, import_vue4.h)("span", [(0, import_vue4.h)("strong", media.name || "Shared contact"), (0, import_vue4.h)("small", String(contact))])
+  return (0, import_vue5.h)(tag, { ...interactive, class: "ckui-media-card ckui-media-card--contact" }, [
+    (0, import_vue5.h)(import_vue4.ContactRound, { "aria-hidden": "true" }),
+    (0, import_vue5.h)("span", [(0, import_vue5.h)("strong", media.name || "Shared contact"), (0, import_vue5.h)("small", String(contact))])
   ]);
 }
-var MessageListView = (0, import_vue4.defineComponent)({
+var MessageListView = (0, import_vue5.defineComponent)({
   name: "MessageListView",
   inheritAttrs: false,
   props: {
@@ -486,11 +872,11 @@ var MessageListView = (0, import_vue4.defineComponent)({
   },
   emits: ["load-older", "attachment-click"],
   setup(props, { attrs, emit, slots }) {
-    const internalElement = (0, import_vue4.ref)(null);
+    const internalElement = (0, import_vue5.ref)(null);
     let requestInFlight = false;
     let lastRequestedLength = null;
     let previousMessageCount = 0;
-    const participants = (0, import_vue4.computed)(() => new Map(props.conversation.participants.flatMap((participant) => [
+    const participants = (0, import_vue5.computed)(() => new Map(props.conversation.participants.flatMap((participant) => [
       [participant.id, participant],
       [participant.appUserId, participant]
     ])));
@@ -512,7 +898,7 @@ var MessageListView = (0, import_vue4.defineComponent)({
         requestInFlight = false;
       }
     };
-    (0, import_vue4.watch)(() => [props.messages.length, props.hasOlderMessages], async ([count, hasOlder]) => {
+    (0, import_vue5.watch)(() => [props.messages.length, props.hasOlderMessages], async ([count, hasOlder]) => {
       const previous = previousMessageCount;
       if (count !== previousMessageCount || !hasOlder) lastRequestedLength = null;
       const appended = count > previous;
@@ -521,7 +907,7 @@ var MessageListView = (0, import_vue4.defineComponent)({
       if (element && props.reverse && props.stickToBottom && appended) {
         const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
         if (previous === 0 || distanceFromBottom < 320) {
-          await (0, import_vue4.nextTick)();
+          await (0, import_vue5.nextTick)();
           element.scrollTop = element.scrollHeight;
         }
       }
@@ -533,7 +919,7 @@ var MessageListView = (0, import_vue4.defineComponent)({
       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 (0, import_vue4.h)("div", { key: message.id, role: "listitem" }, custom);
+      if (custom) return (0, import_vue5.h)("div", { key: message.id, role: "listitem" }, custom);
       const currentAppearance = appearance();
       const messagePart = isCurrentUser ? "outgoingMessage" : "incomingMessage";
       const mediaNodes = message.media.map((media, mediaIndex) => {
@@ -541,15 +927,15 @@ var MessageListView = (0, import_vue4.defineComponent)({
           props.onAttachmentClick?.(media, message);
         } : void 0;
         const mediaSlotProps = { media, message, isCurrentUser, ...open ? { open } : {} };
-        return (0, import_vue4.h)("div", {
+        return (0, import_vue5.h)("div", {
           key: media.id ?? `${media.type}-${mediaIndex}`,
           class: partClass("media", currentAppearance, "ckui-media"),
           style: partStyle("media", currentAppearance)
         }, slots.media?.(mediaSlotProps) ?? [defaultMedia(media, open, props.imageLoading)]);
       });
       const receiptSlotProps = { message, readerIds };
-      return (0, import_vue4.h)("div", { key: message.id, role: "listitem" }, [
-        (0, import_vue4.h)("article", {
+      return (0, import_vue5.h)("div", { key: message.id, role: "listitem" }, [
+        (0, import_vue5.h)("article", {
           class: cx(
             !props.unstyled && "ckui-message-row",
             isCurrentUser && !props.unstyled && "ckui-message-row--outgoing",
@@ -559,16 +945,16 @@ var MessageListView = (0, import_vue4.defineComponent)({
           style: [props.styles?.message, props.styles?.[messagePart]],
           "data-message-id": message.id
         }, [
-          (0, import_vue4.h)("div", { class: "ckui-message-bubble" }, [
-            !isCurrentUser ? (0, import_vue4.h)("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
-            message.text ? (0, import_vue4.h)("div", { class: "ckui-message-text" }, message.text) : null,
+          (0, import_vue5.h)("div", { class: "ckui-message-bubble" }, [
+            !isCurrentUser ? (0, import_vue5.h)("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
+            message.text ? (0, import_vue5.h)("div", { class: "ckui-message-text" }, message.text) : null,
             ...mediaNodes,
-            (0, import_vue4.h)("span", { class: "ckui-message-time" }, [
+            (0, import_vue5.h)("span", { class: "ckui-message-time" }, [
               isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
-              isCurrentUser && !isPending ? readerIds.size > 0 ? (0, import_vue4.h)(import_vue3.CheckCheck, { size: 14, "aria-label": "Read" }) : (0, import_vue4.h)(import_vue3.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": "Delivered" }) : null
             ])
           ]),
-          isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? (0, import_vue4.h)("div", {
+          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
@@ -579,34 +965,34 @@ var MessageListView = (0, import_vue4.defineComponent)({
       const currentAppearance = appearance();
       const children = [];
       if (props.isLoadingOlder) {
-        children.push(slots["loading-older"]?.() ?? (0, import_vue4.h)("div", {
+        children.push(slots["loading-older"]?.() ?? (0, import_vue5.h)("div", {
           class: partClass("loading", currentAppearance, "ckui-inline-state"),
           style: partStyle("loading", currentAppearance),
           role: "status"
-        }, [(0, import_vue4.h)(import_vue3.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading older messages\u2026"]));
+        }, [(0, import_vue5.h)(import_vue4.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading older messages\u2026"]));
       }
       if (props.error) {
         const retry = props.onLoadOlder ? () => {
           void requestOlder();
         } : void 0;
-        children.push(slots.error?.({ error: props.error, ...retry ? { retry } : {} }) ?? (0, import_vue4.h)("div", {
+        children.push(slots.error?.({ error: props.error, ...retry ? { retry } : {} }) ?? (0, import_vue5.h)("div", {
           class: partClass("error", currentAppearance, "ckui-inline-state ckui-state--error"),
           style: partStyle("error", currentAppearance),
           role: "alert"
         }, [
-          (0, import_vue4.h)("span", errorMessage(props.error)),
-          retry ? (0, import_vue4.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Retry") : null
+          (0, import_vue5.h)("span", errorMessage(props.error)),
+          retry ? (0, import_vue5.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Retry") : null
         ]));
       }
       if (props.messages.length === 0 && !props.isLoadingOlder) {
-        children.push(slots.empty?.() ?? (0, import_vue4.h)("div", {
+        children.push(slots.empty?.() ?? (0, import_vue5.h)("div", {
           class: partClass("empty", currentAppearance, "ckui-state"),
           style: partStyle("empty", currentAppearance)
-        }, [(0, import_vue4.h)(import_vue3.MessageCircle, { "aria-hidden": "true" }), " No messages yet"]));
+        }, [(0, import_vue5.h)(import_vue4.MessageCircle, { "aria-hidden": "true" }), " No messages yet"]));
       } else {
         children.push(...props.messages.map(renderMessage));
       }
-      return (0, import_vue4.h)("div", {
+      return (0, import_vue5.h)("div", {
         ...attrs,
         ref: (element) => {
           internalElement.value = element;
@@ -681,7 +1067,7 @@ function typingLabel(userIds, displayNameForUser) {
   if (names.length === 2) return `${names[0]} and ${names[1]} are typing\u2026`;
   return `${names[0]} and ${names.length - 1} others are typing\u2026`;
 }
-var ConversationView = (0, import_vue6.defineComponent)({
+var ConversationView = (0, import_vue7.defineComponent)({
   name: "ConversationView",
   inheritAttrs: false,
   props: viewProps,
@@ -696,8 +1082,8 @@ var ConversationView = (0, import_vue6.defineComponent)({
     "update:modelValue"
   ],
   setup(props, { attrs, emit, slots }) {
-    const internalDraft = (0, import_vue6.ref)(props.defaultDraft);
-    const submitting = (0, import_vue6.ref)(false);
+    const internalDraft = (0, import_vue7.ref)(props.defaultDraft);
+    const submitting = (0, import_vue7.ref)(false);
     const appearance = () => ({
       density: props.density,
       unstyled: props.unstyled,
@@ -747,23 +1133,23 @@ var ConversationView = (0, import_vue6.defineComponent)({
         ...props.onBack ? { onBack: goBack } : {},
         ...props.onRefresh ? { onRefresh: refresh } : {}
       };
-      return slots.header?.(slotProps) ?? (0, import_vue6.h)("header", {
+      return slots.header?.(slotProps) ?? (0, import_vue7.h)("header", {
         class: partClass("header", appearance(), "ckui-conversation-header"),
         style: partStyle("header", appearance())
       }, [
-        props.onBack ? (0, import_vue6.h)("button", {
+        props.onBack ? (0, import_vue7.h)("button", {
           type: "button",
           "aria-label": "Back",
           onClick: goBack,
           class: partClass("button", appearance(), "ckui-icon-button"),
           style: partStyle("button", appearance())
-        }, [(0, import_vue6.h)(import_vue5.ArrowLeft, { size: 20, "aria-hidden": "true" })]) : null,
-        (0, import_vue6.h)(ConvoKitAvatar, { name: props.conversation.displayTitle, src: props.conversation.imageUrl }),
-        (0, import_vue6.h)("div", { class: "ckui-conversation-header__body" }, [
-          (0, import_vue6.h)("strong", props.conversation.displayTitle),
-          (0, import_vue6.h)("span", `${props.conversation.participants.length} participant${props.conversation.participants.length === 1 ? "" : "s"}`)
+        }, [(0, import_vue7.h)(import_vue6.ArrowLeft, { size: 20, "aria-hidden": "true" })]) : null,
+        (0, import_vue7.h)(ConvoKitAvatar, { name: props.conversation.displayTitle, src: props.conversation.imageUrl }),
+        (0, import_vue7.h)("div", { class: "ckui-conversation-header__body" }, [
+          (0, import_vue7.h)("strong", props.conversation.displayTitle),
+          (0, import_vue7.h)("span", `${props.conversation.participants.length} participant${props.conversation.participants.length === 1 ? "" : "s"}`)
         ]),
-        props.onRefresh ? (0, import_vue6.h)("button", {
+        props.onRefresh ? (0, import_vue7.h)("button", {
           type: "button",
           "aria-label": "Refresh conversation",
           onClick: () => {
@@ -771,12 +1157,12 @@ var ConversationView = (0, import_vue6.defineComponent)({
           },
           class: partClass("button", appearance(), "ckui-icon-button"),
           style: partStyle("button", appearance())
-        }, [(0, import_vue6.h)(import_vue5.RefreshCw, { size: 18, "aria-hidden": "true" })]) : null
+        }, [(0, import_vue7.h)(import_vue6.RefreshCw, { size: 18, "aria-hidden": "true" })]) : null
       ]);
     };
     const renderTyping = () => {
       const slotProps = { userIds: props.typingUserIds, displayNameForUser: nameForUser };
-      return slots["typing-indicator"]?.(slotProps) ?? (0, import_vue6.h)("div", {
+      return slots["typing-indicator"]?.(slotProps) ?? (0, import_vue7.h)("div", {
         class: partClass("typing", appearance(), "ckui-typing"),
         style: partStyle("typing", appearance()),
         "aria-live": "polite"
@@ -792,7 +1178,7 @@ var ConversationView = (0, import_vue6.defineComponent)({
         },
         ...props.onAddAttachment ? { addAttachment } : {}
       };
-      return slots.composer?.(slotProps) ?? (0, import_vue6.h)("form", {
+      return slots.composer?.(slotProps) ?? (0, import_vue7.h)("form", {
         class: partClass("composer", appearance(), "ckui-composer"),
         style: partStyle("composer", appearance()),
         onSubmit: (event) => {
@@ -800,14 +1186,14 @@ var ConversationView = (0, import_vue6.defineComponent)({
           void submit();
         }
       }, [
-        props.onAddAttachment ? (0, import_vue6.h)("button", {
+        props.onAddAttachment ? (0, import_vue7.h)("button", {
           type: "button",
           "aria-label": "Add attachment",
           onClick: addAttachment,
           class: partClass("button", appearance(), "ckui-icon-button"),
           style: partStyle("button", appearance())
-        }, [(0, import_vue6.h)(import_vue5.Paperclip, { size: 20, "aria-hidden": "true" })]) : null,
-        (0, import_vue6.h)("textarea", {
+        }, [(0, import_vue7.h)(import_vue6.Paperclip, { size: 20, "aria-hidden": "true" })]) : null,
+        (0, import_vue7.h)("textarea", {
           ...props.composerProps,
           rows: props.composerProps?.rows ?? 1,
           placeholder: props.composerPlaceholder,
@@ -830,38 +1216,38 @@ var ConversationView = (0, import_vue6.defineComponent)({
             }
           }
         }),
-        (0, import_vue6.h)("button", {
+        (0, import_vue7.h)("button", {
           type: "submit",
           "aria-label": "Send message",
           disabled: !draft().trim() || props.isSending || submitting.value,
           class: partClass("button", appearance(), "ckui-send-button"),
           style: partStyle("button", appearance())
-        }, [props.isSending || submitting.value ? (0, import_vue6.h)(import_vue5.LoaderCircle, { class: "ckui-spin", size: 18, "aria-hidden": "true" }) : (0, import_vue6.h)(import_vue5.Send, { size: 18, "aria-hidden": "true" })])
+        }, [props.isSending || submitting.value ? (0, import_vue7.h)(import_vue6.LoaderCircle, { class: "ckui-spin", size: 18, "aria-hidden": "true" }) : (0, import_vue7.h)(import_vue6.Send, { size: 18, "aria-hidden": "true" })])
       ]);
     };
     return () => {
       if (props.isInitialLoading && props.messages.length === 0) {
-        return (0, import_vue6.h)("div", {
+        return (0, import_vue7.h)("div", {
           ...attrs,
           class: cx(!props.unstyled && "ckui ckui-conversation", props.classNames?.root, attrs.class),
           style: [props.styles?.root, attrs.style],
           "data-density": props.density
-        }, slots.loading?.() ?? (0, import_vue6.h)("div", {
+        }, slots.loading?.() ?? (0, import_vue7.h)("div", {
           class: partClass("loading", appearance(), "ckui-state"),
           style: partStyle("loading", appearance()),
           role: "status"
-        }, [(0, import_vue6.h)(import_vue5.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading conversation\u2026"]));
+        }, [(0, import_vue7.h)(import_vue6.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading conversation\u2026"]));
       }
       const children = [renderHeader()];
       if (props.error) {
         const retry = props.onRefresh ? () => {
           void refresh();
         } : void 0;
-        children.push(slots.error?.({ error: props.error, ...retry ? { retry } : {} }) ?? (0, import_vue6.h)("div", {
+        children.push(slots.error?.({ error: props.error, ...retry ? { retry } : {} }) ?? (0, import_vue7.h)("div", {
           class: partClass("error", appearance(), "ckui-conversation-error"),
           style: partStyle("error", appearance()),
           role: "alert"
-        }, [(0, import_vue6.h)("span", errorMessage(props.error)), retry ? (0, import_vue6.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Retry") : null]));
+        }, [(0, import_vue7.h)("span", errorMessage(props.error)), retry ? (0, import_vue7.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Retry") : null]));
       }
       const messageSlots = {
         ...slots.message ? { message: slots.message } : {},
@@ -871,7 +1257,7 @@ var ConversationView = (0, import_vue6.defineComponent)({
         ...slots["loading-older"] ? { "loading-older": slots["loading-older"] } : {},
         ...slots["message-error"] ? { error: slots["message-error"] } : {}
       };
-      children.push((0, import_vue6.h)(MessageListView, {
+      children.push((0, import_vue7.h)(MessageListView, {
         conversation: props.conversation,
         messages: props.messages,
         currentUserId: props.currentUserId,
@@ -895,7 +1281,7 @@ var ConversationView = (0, import_vue6.defineComponent)({
         unstyled: props.unstyled
       }, messageSlots));
       children.push(renderTyping(), renderComposer());
-      return (0, import_vue6.h)("section", {
+      return (0, import_vue7.h)("section", {
         ...attrs,
         class: cx(!props.unstyled && "ckui ckui-conversation", props.classNames?.root, attrs.class),
         style: [props.styles?.root, attrs.style],
@@ -905,7 +1291,7 @@ var ConversationView = (0, import_vue6.defineComponent)({
     };
   }
 });
-var Conversation = (0, import_vue6.defineComponent)({
+var Conversation = (0, import_vue7.defineComponent)({
   name: "Conversation",
   inheritAttrs: false,
   props: {
@@ -935,7 +1321,7 @@ var Conversation = (0, import_vue6.defineComponent)({
       autoLoad: props.autoLoad
     });
     expose({ controller });
-    (0, import_vue6.watchEffect)(() => {
+    (0, import_vue7.watchEffect)(() => {
       emit("controller-change", controller);
     });
     return () => {
@@ -944,16 +1330,16 @@ var Conversation = (0, import_vue6.defineComponent)({
         const retry = () => {
           void controller.refresh();
         };
-        return (0, import_vue6.h)("div", {
+        return (0, import_vue7.h)("div", {
           ...attrs,
           class: cx(!props.unstyled && "ckui ckui-conversation", props.classNames?.root, attrs.class),
           style: [props.styles?.root, attrs.style],
           "data-density": props.density
-        }, controller.error.value ? slots.error?.({ error: controller.error.value, retry }) ?? (0, import_vue6.h)("div", { class: "ckui-state ckui-state--error", role: "alert" }, [
-          (0, import_vue6.h)("span", errorMessage(controller.error.value)),
-          (0, import_vue6.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Try again")
-        ]) : slots.loading?.() ?? (0, import_vue6.h)("div", { class: "ckui-state", role: "status" }, [
-          (0, import_vue6.h)(import_vue5.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }),
+        }, controller.error.value ? slots.error?.({ error: controller.error.value, retry }) ?? (0, import_vue7.h)("div", { class: "ckui-state ckui-state--error", role: "alert" }, [
+          (0, import_vue7.h)("span", errorMessage(controller.error.value)),
+          (0, import_vue7.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Try again")
+        ]) : slots.loading?.() ?? (0, import_vue7.h)("div", { class: "ckui-state", role: "status" }, [
+          (0, import_vue7.h)(import_vue6.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }),
           " Loading conversation\u2026"
         ]));
       }
@@ -982,7 +1368,7 @@ var Conversation = (0, import_vue6.defineComponent)({
         error: _error,
         ...forwarded
       } = props;
-      return (0, import_vue6.h)(ConversationView, {
+      return (0, import_vue7.h)(ConversationView, {
         ...attrs,
         ...forwarded,
         conversation: loadedConversation,
@@ -1021,110 +1407,270 @@ var Conversation = (0, import_vue6.defineComponent)({
 });
 
 // src/components/conversation-list.ts
-var import_vue8 = require("@lucide/vue");
-var import_vue9 = require("vue");
+var import_vue9 = require("@lucide/vue");
+var import_vue10 = require("vue");
 
 // src/composables/use-conversation-list.ts
-var import_vue7 = require("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 = (0, import_vue7.shallowRef)([]);
-  const filter = (0, import_vue7.shallowRef)(options.initialFilter ?? {});
-  const isInitialLoading = (0, import_vue7.ref)(false);
-  const isLoadingMore = (0, import_vue7.ref)(false);
-  const hasMore = (0, import_vue7.ref)(true);
-  const hasLoaded = (0, import_vue7.ref)(false);
-  const error = (0, import_vue7.shallowRef)(null);
-  const conversations = (0, import_vue7.computed)(() => 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 (0, import_vue7.toValue)(options.client).getConversations({
-        limit: pageSize,
-        offset: request.offset,
-        archived: activeFilter.archived ?? false
+var import_vue8 = require("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;
+  inbox;
+  refreshQueued = false;
+  refreshing = false;
+  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;
+    if (!this.disposed) 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 (!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 });
     }
   };
-  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);
+    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));
+  };
+  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.refreshing = false;
+    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 });
+        this.flushRefresh();
       }
     }
   };
-  const loadMore = async () => {
-    if (isInitialLoading.value || isLoadingMore.value || !hasMore.value) return;
-    const activeGeneration = generation;
-    isLoadingMore.value = true;
-    error.value = null;
+  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 {
-      await loadUntilVisible(activeGeneration, filter.value);
+      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) {
-      if (!disposed && activeGeneration === generation) error.value = cause;
+      this.fail(cause, generation);
     } finally {
-      if (!disposed && activeGeneration === generation) isLoadingMore.value = false;
+      if (this.alive(generation)) {
+        this.refreshing = false;
+        this.flushRefresh();
+      }
     }
   };
-  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();
+  loadMore = async () => {
+    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 {
+      await this.loadUntilVisible(generation, this.state.filter);
+    } catch (cause) {
+      this.fail(cause, generation);
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isLoadingMore: false });
+        this.flushRefresh();
+      }
     }
   };
-  const setQuery = (query) => setFilter({ ...filter.value, query });
+  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();
+  };
+  setQuery = (query) => this.setFilter({ ...this.state.filter, query });
+};
+
+// src/composables/use-conversation-list.ts
+function useConversationList(options) {
+  const createStore = () => new ConversationListStore({ ...options, client: (0, import_vue8.toValue)(options.client) });
+  let store = createStore();
+  const snapshot = (0, import_vue8.shallowRef)(store.getSnapshot());
+  let unsubscribe;
+  const stop = (0, import_vue8.watch)(
+    () => [(0, import_vue8.toValue)(options.client), (0, import_vue8.toValue)(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) => (0, import_vue8.computed)(() => snapshot.value[key]);
   const dispose = async () => {
-    disposed = true;
-    generation += 1;
+    stop();
+    store.dispose();
+    unsubscribe?.();
+    unsubscribe = void 0;
   };
-  if (options.autoLoad ?? true) {
-    (0, import_vue7.watch)(() => (0, import_vue7.toValue)(options.client), () => {
-      disposed = false;
-      void loadInitialFor(filter.value);
-    }, { immediate: true });
-  }
-  if ((0, import_vue7.getCurrentScope)()) (0, import_vue7.onScopeDispose)(() => {
+  if ((0, import_vue8.getCurrentScope)()) (0, import_vue8.onScopeDispose)(() => {
     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
   };
 }
@@ -1151,7 +1697,7 @@ var listViewProps = {
   paginationThreshold: { type: Number, default: 240 },
   ariaLabel: { type: String, default: "Conversations" }
 };
-var ConversationListView = (0, import_vue9.defineComponent)({
+var ConversationListView = (0, import_vue10.defineComponent)({
   name: "ConversationListView",
   inheritAttrs: false,
   props: listViewProps,
@@ -1161,7 +1707,7 @@ var ConversationListView = (0, import_vue9.defineComponent)({
     "load-more": () => true
   },
   setup(props, { attrs, emit, slots }) {
-    const internalElement = (0, import_vue9.ref)(null);
+    const internalElement = (0, import_vue10.ref)(null);
     let requestInFlight = false;
     let lastRequestedLength = null;
     const appearance = () => ({
@@ -1191,36 +1737,36 @@ var ConversationListView = (0, import_vue9.defineComponent)({
     const renderContent = () => {
       const currentAppearance = appearance();
       if (props.isInitialLoading && props.conversations.length === 0) {
-        return slots["initial-loading"]?.() ?? (0, import_vue9.h)("div", {
+        return slots["initial-loading"]?.() ?? (0, import_vue10.h)("div", {
           class: partClass("loading", currentAppearance, "ckui-state"),
           style: partStyle("loading", currentAppearance),
           role: "status"
-        }, [(0, import_vue9.h)(import_vue8.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading conversations\u2026"]);
+        }, [(0, import_vue10.h)(import_vue9.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading conversations\u2026"]);
       }
       if (props.error && props.conversations.length === 0) {
         const retry = props.onRefresh ? () => {
           void refresh();
         } : void 0;
-        return slots.error?.({ error: props.error, ...retry ? { retry } : {} }) ?? (0, import_vue9.h)("div", {
+        return slots.error?.({ error: props.error, ...retry ? { retry } : {} }) ?? (0, import_vue10.h)("div", {
           class: partClass("error", currentAppearance, "ckui-state ckui-state--error"),
           style: partStyle("error", currentAppearance),
           role: "alert"
         }, [
-          (0, import_vue9.h)("span", errorMessage(props.error)),
-          retry ? (0, import_vue9.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Try again") : null
+          (0, import_vue10.h)("span", errorMessage(props.error)),
+          retry ? (0, import_vue10.h)("button", { type: "button", class: "ckui-link-button", onClick: retry }, "Try again") : null
         ]);
       }
       if (props.conversations.length === 0) {
-        return slots.empty?.() ?? (0, import_vue9.h)("div", {
+        return slots.empty?.() ?? (0, import_vue10.h)("div", {
           class: partClass("empty", currentAppearance, "ckui-state"),
           style: partStyle("empty", currentAppearance)
-        }, [(0, import_vue9.h)(import_vue8.Inbox, { "aria-hidden": "true" }), " No conversations yet"]);
+        }, [(0, import_vue10.h)(import_vue9.Inbox, { "aria-hidden": "true" }), " No conversations yet"]);
       }
       const children = props.conversations.flatMap((conversation, index) => {
         const selected = props.selectedConversationId === conversation.id;
         const select = () => selectConversation(conversation);
         const slotProps = { conversation, index, selected, select };
-        const item = slots["conversation-item"]?.(slotProps) ?? (0, import_vue9.h)("button", {
+        const item = slots["conversation-item"]?.(slotProps) ?? (0, import_vue10.h)("button", {
           type: "button",
           "data-selected": selected || void 0,
           "aria-current": selected ? "true" : void 0,
@@ -1228,54 +1774,54 @@ var ConversationListView = (0, import_vue9.defineComponent)({
           class: partClass("listItem", currentAppearance, "ckui-conversation-item"),
           style: partStyle("listItem", currentAppearance)
         }, [
-          (0, import_vue9.h)(ConvoKitAvatar, {
+          (0, import_vue10.h)(ConvoKitAvatar, {
             name: conversation.displayTitle,
             src: conversation.imageUrl,
             class: partClass("avatar", currentAppearance, ""),
             style: partStyle("avatar", currentAppearance)
           }),
-          (0, import_vue9.h)("span", { class: "ckui-conversation-item__body" }, [
-            (0, import_vue9.h)("strong", conversation.displayTitle),
-            (0, import_vue9.h)("span", conversation.participants.map((participant) => participant.name).join(", ") || conversation.description || "No participants")
+          (0, import_vue10.h)("span", { class: "ckui-conversation-item__body" }, [
+            (0, import_vue10.h)("strong", conversation.displayTitle),
+            (0, import_vue10.h)("span", conversation.participants.map((participant) => participant.name).join(", ") || conversation.description || "No participants")
           ]),
-          (0, import_vue9.h)(import_vue8.ChevronRight, { size: 18, "aria-hidden": "true" })
+          (0, import_vue10.h)(import_vue9.ChevronRight, { size: 18, "aria-hidden": "true" })
         ]);
-        const nodes = [(0, import_vue9.h)("div", { key: conversation.id, role: "listitem" }, [item])];
+        const nodes = [(0, import_vue10.h)("div", { key: conversation.id, role: "listitem" }, [item])];
         if (index < props.conversations.length - 1) {
-          nodes.push((0, import_vue9.h)("div", { key: `${conversation.id}-separator` }, slots.separator?.({ index }) ?? (0, import_vue9.h)("div", { class: "ckui-separator" })));
+          nodes.push((0, import_vue10.h)("div", { key: `${conversation.id}-separator` }, slots.separator?.({ index }) ?? (0, import_vue10.h)("div", { class: "ckui-separator" })));
         }
         return nodes;
       });
       if (props.error) {
-        children.push(slots.error?.({ error: props.error, retry: requestMore }) ?? (0, import_vue9.h)("div", {
+        children.push(slots.error?.({ error: props.error, retry: requestMore }) ?? (0, import_vue10.h)("div", {
           class: partClass("error", currentAppearance, "ckui-inline-state ckui-state--error"),
           style: partStyle("error", currentAppearance),
           role: "alert"
-        }, [(0, import_vue9.h)("span", errorMessage(props.error)), (0, import_vue9.h)("button", { type: "button", class: "ckui-link-button", onClick: () => {
+        }, [(0, import_vue10.h)("span", errorMessage(props.error)), (0, import_vue10.h)("button", { type: "button", class: "ckui-link-button", onClick: () => {
           void requestMore();
         } }, "Retry")]));
       } else if (props.isLoadingMore) {
-        children.push(slots["load-more"]?.() ?? (0, import_vue9.h)("div", {
+        children.push(slots["load-more"]?.() ?? (0, import_vue10.h)("div", {
           class: partClass("loading", currentAppearance, "ckui-inline-state"),
           style: partStyle("loading", currentAppearance),
           role: "status"
-        }, [(0, import_vue9.h)(import_vue8.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading more\u2026"]));
+        }, [(0, import_vue10.h)(import_vue9.LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading more\u2026"]));
       }
-      return (0, import_vue9.h)("div", {
+      return (0, import_vue10.h)("div", {
         role: "list",
         class: partClass("list", currentAppearance, "ckui-conversation-list__items"),
         style: partStyle("list", currentAppearance)
       }, children);
     };
-    return () => (0, import_vue9.h)("div", {
+    return () => (0, import_vue10.h)("div", {
       ...attrs,
       class: cx(!props.unstyled && "ckui ckui-conversation-list", props.classNames?.root, attrs.class),
       style: [props.styles?.root, attrs.style],
       "data-density": props.density
     }, [
-      props.onRefresh ? (0, import_vue9.h)("div", { class: "ckui-conversation-list__toolbar" }, [
-        (0, import_vue9.h)("span", props.ariaLabel),
-        (0, import_vue9.h)("button", {
+      props.onRefresh ? (0, import_vue10.h)("div", { class: "ckui-conversation-list__toolbar" }, [
+        (0, import_vue10.h)("span", props.ariaLabel),
+        (0, import_vue10.h)("button", {
           type: "button",
           "aria-label": "Refresh conversations",
           class: partClass("button", appearance(), "ckui-icon-button"),
@@ -1283,9 +1829,9 @@ var ConversationListView = (0, import_vue9.defineComponent)({
           onClick: () => {
             void refresh();
           }
-        }, [(0, import_vue9.h)(import_vue8.RefreshCw, { size: 17, "aria-hidden": "true" })])
+        }, [(0, import_vue10.h)(import_vue9.RefreshCw, { size: 17, "aria-hidden": "true" })])
       ]) : null,
-      (0, import_vue9.h)("div", {
+      (0, import_vue10.h)("div", {
         ref: (element) => {
           internalElement.value = element;
           if (props.scrollElement) props.scrollElement.value = element;
@@ -1303,7 +1849,7 @@ var ConversationListView = (0, import_vue9.defineComponent)({
     ]);
   }
 });
-var ConversationList = (0, import_vue9.defineComponent)({
+var ConversationList = (0, import_vue10.defineComponent)({
   name: "ConversationList",
   inheritAttrs: false,
   props: {
@@ -1326,7 +1872,7 @@ var ConversationList = (0, import_vue9.defineComponent)({
       autoLoad: props.autoLoad
     });
     expose({ controller });
-    (0, import_vue9.watchEffect)(() => {
+    (0, import_vue10.watchEffect)(() => {
       emit("controller-change", controller);
     });
     return () => {
@@ -1346,7 +1892,7 @@ var ConversationList = (0, import_vue9.defineComponent)({
         error: _error,
         ...forwarded
       } = props;
-      return (0, import_vue9.h)(ConversationListView, {
+      return (0, import_vue10.h)(ConversationListView, {
         ...attrs,
         ...forwarded,
         conversations: controller.conversations.value,
@@ -1365,7 +1911,7 @@ var ConversationList = (0, import_vue9.defineComponent)({
 });
 
 // src/theme.ts
-var import_vue10 = require("vue");
+var import_vue11 = require("vue");
 var defaultConvoKitTheme = {
   background: "#fafafa",
   surface: "#ffffff",
@@ -1382,8 +1928,8 @@ var defaultConvoKitTheme = {
   fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
 };
 var themeKey = /* @__PURE__ */ Symbol("ConvoKitTheme");
-var defaultThemeRef = (0, import_vue10.computed)(() => defaultConvoKitTheme);
-var ConvoKitThemeProvider = (0, import_vue10.defineComponent)({
+var defaultThemeRef = (0, import_vue11.computed)(() => defaultConvoKitTheme);
+var ConvoKitThemeProvider = (0, import_vue11.defineComponent)({
   name: "ConvoKitThemeProvider",
   inheritAttrs: false,
   props: {
@@ -1392,9 +1938,9 @@ var ConvoKitThemeProvider = (0, import_vue10.defineComponent)({
     style: { type: [String, Array, Object], default: void 0 }
   },
   setup(props, { attrs, slots }) {
-    const parent = (0, import_vue10.inject)(themeKey, defaultThemeRef);
-    const value = (0, import_vue10.computed)(() => ({ ...parent.value, ...props.theme }));
-    (0, import_vue10.provide)(themeKey, value);
+    const parent = (0, import_vue11.inject)(themeKey, defaultThemeRef);
+    const value = (0, import_vue11.computed)(() => ({ ...parent.value, ...props.theme }));
+    (0, import_vue11.provide)(themeKey, value);
     return () => {
       const theme = value.value;
       const variables = {
@@ -1412,7 +1958,7 @@ var ConvoKitThemeProvider = (0, import_vue10.defineComponent)({
         "--ckui-avatar-size": theme.avatarSize,
         "--ckui-font": theme.fontFamily
       };
-      return (0, import_vue10.h)("div", {
+      return (0, import_vue11.h)("div", {
         ...attrs,
         class: cx("ckui-theme", props.class, attrs.class),
         style: [variables, props.style, attrs.style]
@@ -1421,7 +1967,7 @@ var ConvoKitThemeProvider = (0, import_vue10.defineComponent)({
   }
 });
 function useConvoKitTheme() {
-  return (0, import_vue10.inject)(themeKey, defaultThemeRef);
+  return (0, import_vue11.inject)(themeKey, defaultThemeRef);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {