@convokitapp/vue-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1405 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Conversation: () => Conversation,
+  ConversationList: () => ConversationList,
+  ConversationListView: () => ConversationListView,
+  ConversationView: () => ConversationView,
+  ConvoKitAvatar: () => ConvoKitAvatar,
+  ConvoKitThemeProvider: () => ConvoKitThemeProvider,
+  MessageListView: () => MessageListView,
+  applyConversationFilter: () => applyConversationFilter,
+  createConvoKitUiClient: () => createConvoKitUiClient,
+  defaultConvoKitTheme: () => defaultConvoKitTheme,
+  defaultReadersResolver: () => defaultReadersResolver,
+  formatFileSize: () => formatFileSize,
+  matchesConversation: () => matchesConversation,
+  mergeConversations: () => mergeConversations,
+  mergeMessages: () => mergeMessages,
+  readerIdsFor: () => readerIdsFor,
+  useConversation: () => useConversation,
+  useConversationList: () => useConversationList,
+  useConvoKitTheme: () => useConvoKitTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client.ts
+function createConvoKitUiClient(client) {
+  return {
+    get currentUserId() {
+      return client.currentUserId;
+    },
+    getConversations: (options) => client.getConversations(options),
+    getConversation: (conversationId) => client.getConversation(conversationId),
+    getMessages: (options) => client.getMessages(options),
+    sendMessage: (input) => client.sendMessage(input),
+    markConversationRead: (conversationId) => client.markConversationRead(conversationId),
+    sendTyping: (input) => client.sendTyping(input),
+    onMessage: (conversationId, handler, onError) => client.realtime.onMessage(conversationId, {
+      onEvent: handler,
+      ...onError ? { onError } : {}
+    }),
+    onReadReceipt: (conversationId, handler, onError) => client.realtime.onReadReceipt(conversationId, {
+      onEvent: handler,
+      ...onError ? { onError } : {}
+    }),
+    onTyping: (conversationId, handler, onError) => client.realtime.onTyping(conversationId, {
+      onEvent: handler,
+      ...onError ? { onError } : {}
+    })
+  };
+}
+
+// src/components/avatar.ts
+var import_reka_ui = require("reka-ui");
+var import_vue = require("vue");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+function cx(...values) {
+  return (0, import_clsx.clsx)(values);
+}
+function requestedParticipantIds(filter) {
+  const values = filter.participantIds ?? [];
+  return values instanceof Set ? values : new Set(values);
+}
+function matchesConversation(conversation, filter) {
+  const query = filter.query?.trim().toLocaleLowerCase() ?? "";
+  if (query) {
+    const haystack = [
+      conversation.id,
+      conversation.displayTitle,
+      conversation.title ?? "",
+      conversation.description ?? "",
+      ...conversation.participants.flatMap((participant) => [participant.id, participant.appUserId, participant.name])
+    ].join(" ").toLocaleLowerCase();
+    if (!haystack.includes(query)) return false;
+  }
+  const requested = requestedParticipantIds(filter);
+  if (requested.size > 0) {
+    const available = new Set(conversation.participants.flatMap((participant) => [participant.id, participant.appUserId]));
+    const values = [...requested];
+    const matches = filter.requireAllParticipants ? values.every((id) => available.has(id)) : values.some((id) => available.has(id));
+    if (!matches) return false;
+  }
+  return filter.predicate?.(conversation) ?? true;
+}
+function applyConversationFilter(conversations, filter) {
+  const result = conversations.filter((conversation) => matchesConversation(conversation, filter));
+  if (filter.comparator) result.sort(filter.comparator);
+  return result;
+}
+function mergeConversations(current, incoming) {
+  const byId = new Map(current.map((conversation) => [conversation.id, conversation]));
+  for (const conversation of incoming) byId.set(conversation.id, conversation);
+  return [...byId.values()];
+}
+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 byTime = left.createdAt.getTime() - right.createdAt.getTime();
+    return byTime === 0 ? left.id.localeCompare(right.id) : byTime;
+  });
+}
+function readerIdsFor(message, readAtByUserId) {
+  return new Set([...readAtByUserId.entries()].filter(([userId, readAt]) => userId !== message.senderId && readAt.getTime() >= message.createdAt.getTime()).map(([userId]) => userId));
+}
+function partClass(part, appearance, defaultClass) {
+  return cx(!appearance.unstyled && defaultClass, appearance.classNames?.[part]);
+}
+function partStyle(part, appearance) {
+  return appearance.styles?.[part];
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function formatFileSize(size) {
+  if (size === void 0 || !Number.isFinite(size) || size < 0) return null;
+  if (size < 1024) return `${Math.round(size)} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(size < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(size < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+}
+function initials(value) {
+  const words = value.trim().split(/\s+/).filter(Boolean);
+  return (words.length > 1 ? `${words[0]?.[0] ?? ""}${words.at(-1)?.[0] ?? ""}` : value[0] ?? "?").toLocaleUpperCase();
+}
+
+// src/components/avatar.ts
+var ConvoKitAvatar = (0, import_vue.defineComponent)({
+  name: "ConvoKitAvatar",
+  inheritAttrs: false,
+  props: {
+    name: { type: String, required: true },
+    src: { type: String, default: null }
+  },
+  setup(props, { attrs }) {
+    return () => (0, import_vue.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, {
+          class: "ckui-avatar__fallback",
+          ...props.src ? { delayMs: 300 } : {}
+        }, () => initials(props.name))
+      ]
+    });
+  }
+});
+
+// src/components/conversation.ts
+var import_vue5 = require("@lucide/vue");
+var import_vue6 = 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 unsubscribe = async () => {
+    const active = subscriptions;
+    subscriptions = [];
+    await Promise.all(active.map((subscription) => subscription.unsubscribe()));
+  };
+  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;
+    }
+  };
+  const subscribe = (activeGeneration, client, conversationId) => {
+    const report = (cause) => {
+      if (!disposed && activeGeneration === generation) error.value = cause;
+    };
+    subscriptions = [
+      client.onMessage(conversationId, (message) => {
+        if (disposed || activeGeneration !== generation) return;
+        messages.value = mergeMessages(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)
+    ];
+  };
+  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 = [];
+    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);
+    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();
+    } catch (cause) {
+      if (!disposed && activeGeneration === generation) error.value = cause;
+    } finally {
+      if (!disposed && activeGeneration === generation) {
+        isInitialLoading.value = false;
+        hasLoaded.value = true;
+      }
+    }
+  };
+  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;
+    try {
+      const page = await client.getMessages({
+        conversationId,
+        limit: messagePageSize,
+        offset: messages.value.length
+      });
+      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;
+    } finally {
+      if (!disposed && activeGeneration === generation) isLoadingOlder.value = false;
+    }
+  };
+  const updateTyping = async (nextTyping) => {
+    if (typingTimer) clearTimeout(typingTimer);
+    if (nextTyping) typingTimer = setTimeout(() => {
+      void updateTyping(false);
+    }, typingTimeoutMs);
+    if (sentTyping === nextTyping) return;
+    sentTyping = nextTyping;
+    try {
+      await (0, import_vue2.toValue)(options.client).sendTyping({
+        conversationId: (0, import_vue2.toValue)(options.conversationId),
+        isTyping: nextTyping
+      });
+    } catch (cause) {
+      if (!disposed) error.value = cause;
+    }
+  };
+  const sendMessage = async ({ text, media }) => {
+    const normalizedText = text?.trim();
+    if (!normalizedText && (!media || media.length === 0)) return null;
+    if (isSending.value) return null;
+    isSending.value = true;
+    error.value = null;
+    const activeGeneration = generation;
+    try {
+      const message = await (0, import_vue2.toValue)(options.client).sendMessage({
+        conversationId: (0, import_vue2.toValue)(options.conversationId),
+        ...normalizedText ? { text: normalizedText } : {},
+        ...media?.length ? { media } : {}
+      });
+      if (!disposed && activeGeneration === generation) messages.value = mergeMessages(messages.value, [message]);
+      await updateTyping(false);
+      return message;
+    } catch (cause) {
+      if (!disposed) error.value = cause;
+      return null;
+    } finally {
+      if (!disposed && activeGeneration === generation) isSending.value = false;
+    }
+  };
+  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();
+  };
+  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)(() => {
+    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,
+    dispose
+  };
+}
+
+// src/components/message-list.ts
+var import_vue3 = require("@lucide/vue");
+var import_vue4 = require("vue");
+var appearanceProps = {
+  classNames: { type: Object, default: void 0 },
+  styles: { type: Object, default: void 0 },
+  density: { type: String, default: "comfortable" },
+  unstyled: { type: Boolean, default: false }
+};
+function defaultFormatTime(date) {
+  return new Intl.DateTimeFormat(void 0, { hour: "numeric", minute: "2-digit" }).format(date);
+}
+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
+    ]);
+  }
+  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
+    ]);
+  }
+  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}`)])
+    ]);
+  }
+  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))])
+  ]);
+}
+var MessageListView = (0, import_vue4.defineComponent)({
+  name: "MessageListView",
+  inheritAttrs: false,
+  props: {
+    ...appearanceProps,
+    conversation: { type: Object, required: true },
+    messages: { type: Array, required: true },
+    currentUserId: { type: String, required: true },
+    readAtByUserId: { type: Object, default: () => /* @__PURE__ */ new Map() },
+    readersResolver: { type: Function, default: void 0 },
+    onLoadOlder: { type: Function, default: void 0 },
+    hasOlderMessages: { type: Boolean, default: false },
+    isLoadingOlder: { type: Boolean, default: false },
+    error: { type: null, required: false },
+    onAttachmentClick: { type: Function, default: void 0 },
+    scrollElement: { type: Object, default: void 0 },
+    paginationThreshold: { type: Number, default: 240 },
+    reverse: { type: Boolean, default: true },
+    stickToBottom: { type: Boolean, default: true },
+    formatTime: { type: Function, default: defaultFormatTime },
+    imageLoading: { type: String, default: "lazy" }
+  },
+  emits: ["load-older", "attachment-click"],
+  setup(props, { attrs, emit, slots }) {
+    const internalElement = (0, import_vue4.ref)(null);
+    let requestInFlight = false;
+    let lastRequestedLength = null;
+    let previousMessageCount = 0;
+    const participants = (0, import_vue4.computed)(() => new Map(props.conversation.participants.flatMap((participant) => [
+      [participant.id, participant],
+      [participant.appUserId, participant]
+    ])));
+    const appearance = () => ({
+      density: props.density,
+      unstyled: props.unstyled,
+      ...props.classNames ? { classNames: props.classNames } : {},
+      ...props.styles ? { styles: props.styles } : {}
+    });
+    const requestOlder = async () => {
+      if (requestInFlight || lastRequestedLength === props.messages.length || props.isLoadingOlder || !props.hasOlderMessages || !props.onLoadOlder) return;
+      requestInFlight = true;
+      lastRequestedLength = props.messages.length;
+      try {
+        await props.onLoadOlder();
+      } catch {
+        lastRequestedLength = null;
+      } finally {
+        requestInFlight = false;
+      }
+    };
+    (0, import_vue4.watch)(() => [props.messages.length, props.hasOlderMessages], async ([count, hasOlder]) => {
+      const previous = previousMessageCount;
+      if (count !== previousMessageCount || !hasOlder) lastRequestedLength = null;
+      const appended = count > previous;
+      const element = internalElement.value;
+      previousMessageCount = count;
+      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)();
+          element.scrollTop = element.scrollHeight;
+        }
+      }
+    }, { flush: "post", immediate: true });
+    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 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);
+      const currentAppearance = appearance();
+      const messagePart = isCurrentUser ? "outgoingMessage" : "incomingMessage";
+      const mediaNodes = message.media.map((media, mediaIndex) => {
+        const open = props.onAttachmentClick ? () => {
+          props.onAttachmentClick?.(media, message);
+        } : void 0;
+        const mediaSlotProps = { media, message, isCurrentUser, ...open ? { open } : {} };
+        return (0, import_vue4.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", {
+          class: cx(
+            !props.unstyled && "ckui-message-row",
+            isCurrentUser && !props.unstyled && "ckui-message-row--outgoing",
+            props.classNames?.message,
+            props.classNames?.[messagePart]
+          ),
+          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,
+            ...mediaNodes,
+            (0, import_vue4.h)("time", { class: "ckui-message-time", datetime: message.createdAt.toISOString() }, [
+              props.formatTime(message.createdAt),
+              isCurrentUser ? 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 ? slots["read-receipt"]?.(receiptSlotProps) ?? (0, import_vue4.h)("div", {
+            class: partClass("receipt", currentAppearance, "ckui-read-receipt"),
+            style: partStyle("receipt", currentAppearance)
+          }, readerIds.size > 0 ? `Read by ${readerIds.size}` : "Delivered") : null
+        ])
+      ]);
+    };
+    return () => {
+      const currentAppearance = appearance();
+      const children = [];
+      if (props.isLoadingOlder) {
+        children.push(slots["loading-older"]?.() ?? (0, import_vue4.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"]));
+      }
+      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", {
+          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
+        ]));
+      }
+      if (props.messages.length === 0 && !props.isLoadingOlder) {
+        children.push(slots.empty?.() ?? (0, import_vue4.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"]));
+      } else {
+        children.push(...props.messages.map(renderMessage));
+      }
+      return (0, import_vue4.h)("div", {
+        ...attrs,
+        ref: (element) => {
+          internalElement.value = element;
+          if (props.scrollElement) props.scrollElement.value = element;
+        },
+        class: cx(!props.unstyled && "ckui ckui-message-list", props.classNames?.messages, attrs.class),
+        style: [props.styles?.messages, attrs.style],
+        "data-density": props.density,
+        role: "log",
+        "aria-live": "polite",
+        "aria-label": `Messages in ${props.conversation.displayTitle}`,
+        onScroll: (event) => {
+          const nativeHandler = attrs.onScroll;
+          if (typeof nativeHandler === "function") nativeHandler(event);
+          const element = event.currentTarget;
+          const distanceFromOldest = props.reverse ? element.scrollTop : element.scrollHeight - element.scrollTop - element.clientHeight;
+          if (distanceFromOldest <= props.paginationThreshold) void requestOlder();
+        }
+      }, children);
+    };
+  }
+});
+function defaultReadersResolver(readAtByUserId) {
+  return (message) => readerIdsFor(message, readAtByUserId);
+}
+
+// src/components/conversation.ts
+var appearanceProps2 = {
+  classNames: { type: Object, default: void 0 },
+  styles: { type: Object, default: void 0 },
+  density: { type: String, default: "comfortable" },
+  unstyled: { type: Boolean, default: false }
+};
+var viewProps = {
+  ...appearanceProps2,
+  conversation: { type: Object, required: true },
+  messages: { type: Array, required: true },
+  currentUserId: { type: String, required: true },
+  onSendMessage: { type: Function, required: true },
+  typingUserIds: { type: Object, default: () => /* @__PURE__ */ new Set() },
+  readAtByUserId: { type: Object, default: () => /* @__PURE__ */ new Map() },
+  readersResolver: { type: Function, default: void 0 },
+  onBack: { type: Function, default: void 0 },
+  onRefresh: { type: Function, default: void 0 },
+  onLoadOlder: { type: Function, default: void 0 },
+  onTypingChange: { type: Function, default: void 0 },
+  onAddAttachment: { type: Function, default: void 0 },
+  onAttachmentClick: { type: Function, default: void 0 },
+  isInitialLoading: { type: Boolean, default: false },
+  isLoadingOlder: { type: Boolean, default: false },
+  isSending: { type: Boolean, default: false },
+  hasOlderMessages: { type: Boolean, default: false },
+  error: { type: null, required: false },
+  messageError: { type: null, required: false },
+  displayNameForUser: { type: Function, default: void 0 },
+  reverseMessages: { type: Boolean, default: true },
+  stickToBottom: { type: Boolean, default: true },
+  paginationThreshold: { type: Number, default: 240 },
+  formatTime: { type: Function, default: void 0 },
+  imageLoading: { type: String, default: "lazy" },
+  composerPlaceholder: { type: String, default: "Write a message" },
+  composerAriaLabel: { type: String, default: "Message" },
+  composerProps: { type: Object, default: void 0 },
+  modelValue: { type: String, default: void 0 },
+  defaultDraft: { type: String, default: "" },
+  onDraftChange: { type: Function, default: void 0 }
+};
+function typingLabel(userIds, displayNameForUser) {
+  const names = [...userIds].map(displayNameForUser);
+  if (names.length === 0) return "";
+  if (names.length === 1) return `${names[0]} is typing\u2026`;
+  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)({
+  name: "ConversationView",
+  inheritAttrs: false,
+  props: viewProps,
+  emits: [
+    "send-message",
+    "typing-change",
+    "back",
+    "refresh",
+    "load-older",
+    "add-attachment",
+    "attachment-click",
+    "update:modelValue"
+  ],
+  setup(props, { attrs, emit, slots }) {
+    const internalDraft = (0, import_vue6.ref)(props.defaultDraft);
+    const submitting = (0, import_vue6.ref)(false);
+    const appearance = () => ({
+      density: props.density,
+      unstyled: props.unstyled,
+      ...props.classNames ? { classNames: props.classNames } : {},
+      ...props.styles ? { styles: props.styles } : {}
+    });
+    const draft = () => props.modelValue ?? internalDraft.value;
+    const setDraft = (value) => {
+      if (props.modelValue === void 0) internalDraft.value = value;
+      props.onDraftChange?.(value);
+      emit("update:modelValue", value);
+      const isTyping = value.trim().length > 0;
+      void props.onTypingChange?.(isTyping);
+    };
+    const submit = async () => {
+      const text = draft().trim();
+      if (!text || props.isSending || submitting.value) return;
+      submitting.value = true;
+      try {
+        const shouldClear = await props.onSendMessage(text);
+        if (shouldClear !== false) setDraft("");
+      } finally {
+        submitting.value = false;
+      }
+    };
+    const nameForUser = (userId) => {
+      const custom = props.displayNameForUser?.(userId)?.trim();
+      if (custom) return custom;
+      const participant = props.conversation.participants.find((value) => value.id === userId || value.appUserId === userId);
+      return participant?.name.trim() || userId;
+    };
+    const goBack = () => {
+      props.onBack?.();
+    };
+    const refresh = () => props.onRefresh?.();
+    const loadOlder = () => props.onLoadOlder?.();
+    const addAttachment = () => {
+      props.onAddAttachment?.();
+    };
+    const renderHeader = () => {
+      const slotProps = {
+        conversation: props.conversation,
+        ...props.onBack ? { onBack: goBack } : {},
+        ...props.onRefresh ? { onRefresh: refresh } : {}
+      };
+      return slots.header?.(slotProps) ?? (0, import_vue6.h)("header", {
+        class: partClass("header", appearance(), "ckui-conversation-header"),
+        style: partStyle("header", appearance())
+      }, [
+        props.onBack ? (0, import_vue6.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"}`)
+        ]),
+        props.onRefresh ? (0, import_vue6.h)("button", {
+          type: "button",
+          "aria-label": "Refresh conversation",
+          onClick: () => {
+            void refresh();
+          },
+          class: partClass("button", appearance(), "ckui-icon-button"),
+          style: partStyle("button", appearance())
+        }, [(0, import_vue6.h)(import_vue5.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", {
+        class: partClass("typing", appearance(), "ckui-typing"),
+        style: partStyle("typing", appearance()),
+        "aria-live": "polite"
+      }, typingLabel(props.typingUserIds, nameForUser));
+    };
+    const renderComposer = () => {
+      const slotProps = {
+        value: draft(),
+        setValue: setDraft,
+        isSending: props.isSending || submitting.value,
+        send: () => {
+          void submit();
+        },
+        ...props.onAddAttachment ? { addAttachment } : {}
+      };
+      return slots.composer?.(slotProps) ?? (0, import_vue6.h)("form", {
+        class: partClass("composer", appearance(), "ckui-composer"),
+        style: partStyle("composer", appearance()),
+        onSubmit: (event) => {
+          event.preventDefault();
+          void submit();
+        }
+      }, [
+        props.onAddAttachment ? (0, import_vue6.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", {
+          ...props.composerProps,
+          rows: props.composerProps?.rows ?? 1,
+          placeholder: props.composerPlaceholder,
+          "aria-label": props.composerAriaLabel,
+          class: cx(!props.unstyled && "ckui-composer__input", props.classNames?.input, props.composerProps?.class),
+          style: [props.styles?.input, props.composerProps?.style],
+          value: draft(),
+          disabled: props.isSending || submitting.value,
+          onInput: (event) => {
+            const handler = props.composerProps?.onInput;
+            if (typeof handler === "function") handler(event);
+            if (!event.defaultPrevented) setDraft(event.currentTarget.value);
+          },
+          onKeydown: (event) => {
+            const handler = props.composerProps?.onKeydown;
+            if (typeof handler === "function") handler(event);
+            if (event.defaultPrevented) return;
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              void submit();
+            }
+          }
+        }),
+        (0, import_vue6.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" })])
+      ]);
+    };
+    return () => {
+      if (props.isInitialLoading && props.messages.length === 0) {
+        return (0, import_vue6.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", {
+          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"]));
+      }
+      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", {
+          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]));
+      }
+      const messageSlots = {
+        ...slots.message ? { message: slots.message } : {},
+        ...slots.media ? { media: slots.media } : {},
+        ...slots["read-receipt"] ? { "read-receipt": slots["read-receipt"] } : {},
+        ...slots.empty ? { empty: slots.empty } : {},
+        ...slots["loading-older"] ? { "loading-older": slots["loading-older"] } : {},
+        ...slots["message-error"] ? { error: slots["message-error"] } : {}
+      };
+      children.push((0, import_vue6.h)(MessageListView, {
+        conversation: props.conversation,
+        messages: props.messages,
+        currentUserId: props.currentUserId,
+        readAtByUserId: props.readAtByUserId,
+        ...props.readersResolver ? { readersResolver: props.readersResolver } : {},
+        ...props.onLoadOlder ? { onLoadOlder: loadOlder } : {},
+        hasOlderMessages: props.hasOlderMessages,
+        isLoadingOlder: props.isLoadingOlder,
+        ...props.messageError == null ? {} : { error: props.messageError },
+        ...props.onAttachmentClick ? { onAttachmentClick: (media, message) => {
+          props.onAttachmentClick?.(media, message);
+        } } : {},
+        reverse: props.reverseMessages,
+        stickToBottom: props.stickToBottom,
+        paginationThreshold: props.paginationThreshold,
+        ...props.formatTime ? { formatTime: props.formatTime } : {},
+        imageLoading: props.imageLoading,
+        ...props.classNames ? { classNames: props.classNames } : {},
+        ...props.styles ? { styles: props.styles } : {},
+        density: props.density,
+        unstyled: props.unstyled
+      }, messageSlots));
+      children.push(renderTyping(), renderComposer());
+      return (0, import_vue6.h)("section", {
+        ...attrs,
+        class: cx(!props.unstyled && "ckui ckui-conversation", props.classNames?.root, attrs.class),
+        style: [props.styles?.root, attrs.style],
+        "data-density": props.density,
+        "aria-label": props.conversation.displayTitle
+      }, children);
+    };
+  }
+});
+var Conversation = (0, import_vue6.defineComponent)({
+  name: "Conversation",
+  inheritAttrs: false,
+  props: {
+    ...viewProps,
+    conversation: { type: Object, default: void 0 },
+    messages: { type: Array, default: () => [] },
+    currentUserId: { type: String, default: "" },
+    onSendMessage: { type: Function, default: void 0 },
+    client: { type: Object, required: true },
+    conversationId: { type: String, required: true },
+    messagePageSize: { type: Number, default: 30 },
+    markReadOnLoad: { type: Boolean, default: true },
+    markReadOnReceive: { type: Boolean, default: true },
+    typingTimeoutMs: { type: Number, default: 3e3 },
+    autoLoad: { type: Boolean, default: true },
+    onControllerChange: { type: Function, default: void 0 }
+  },
+  emits: ["controller-change", "send-message", "typing-change", "back", "refresh", "load-older", "add-attachment", "attachment-click", "update:modelValue"],
+  setup(props, { attrs, emit, expose, slots }) {
+    const controller = useConversation({
+      client: () => props.client,
+      conversationId: () => props.conversationId,
+      messagePageSize: props.messagePageSize,
+      markReadOnLoad: props.markReadOnLoad,
+      markReadOnReceive: props.markReadOnReceive,
+      typingTimeoutMs: props.typingTimeoutMs,
+      autoLoad: props.autoLoad
+    });
+    expose({ controller });
+    (0, import_vue6.watchEffect)(() => {
+      emit("controller-change", controller);
+    });
+    return () => {
+      const loadedConversation = controller.conversation.value;
+      if (!loadedConversation) {
+        const retry = () => {
+          void controller.refresh();
+        };
+        return (0, import_vue6.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" }),
+          " Loading conversation\u2026"
+        ]));
+      }
+      const {
+        client: _client,
+        conversationId: _conversationId,
+        messagePageSize: _messagePageSize,
+        markReadOnLoad: _markReadOnLoad,
+        markReadOnReceive: _markReadOnReceive,
+        typingTimeoutMs: _typingTimeoutMs,
+        autoLoad: _autoLoad,
+        onControllerChange: _onControllerChange,
+        conversation: _conversation,
+        messages: _messages,
+        currentUserId: _currentUserId,
+        onSendMessage: _onSendMessage,
+        typingUserIds: _typingUserIds,
+        readAtByUserId: _readAtByUserId,
+        onRefresh: _onRefresh,
+        onLoadOlder: _onLoadOlder,
+        onTypingChange: _onTypingChange,
+        isInitialLoading: _isInitialLoading,
+        isLoadingOlder: _isLoadingOlder,
+        isSending: _isSending,
+        hasOlderMessages: _hasOlderMessages,
+        error: _error,
+        ...forwarded
+      } = props;
+      return (0, import_vue6.h)(ConversationView, {
+        ...attrs,
+        ...forwarded,
+        conversation: loadedConversation,
+        messages: controller.messages.value,
+        currentUserId: controller.currentUserId.value,
+        onSendMessage: async (text) => {
+          emit("send-message", text);
+          return await controller.sendMessage({ text }) !== null;
+        },
+        typingUserIds: controller.typingUserIds.value,
+        readAtByUserId: controller.readAtByUserId.value,
+        onRefresh: controller.refresh,
+        onLoadOlder: controller.loadOlderMessages,
+        onTypingChange: controller.updateTyping,
+        isInitialLoading: controller.isInitialLoading.value,
+        isLoadingOlder: controller.isLoadingOlder.value,
+        isSending: controller.isSending.value,
+        hasOlderMessages: controller.hasOlderMessages.value,
+        ...controller.error.value == null ? {} : { error: controller.error.value },
+        "onUpdate:modelValue": (value) => emit("update:modelValue", value),
+        ...props.onBack ? { onBack: () => {
+          props.onBack?.();
+          emit("back");
+        } } : {},
+        ...props.onAddAttachment ? { onAddAttachment: () => {
+          props.onAddAttachment?.();
+          emit("add-attachment");
+        } } : {},
+        ...props.onAttachmentClick ? { onAttachmentClick: (media, message) => {
+          props.onAttachmentClick?.(media, message);
+          emit("attachment-click", media, message);
+        } } : {}
+      }, slots);
+    };
+  }
+});
+
+// src/components/conversation-list.ts
+var import_vue8 = require("@lucide/vue");
+var import_vue9 = 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
+      });
+      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;
+    }
+  };
+  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;
+    try {
+      await loadUntilVisible(activeGeneration, activeFilter);
+    } catch (cause) {
+      if (!disposed && activeGeneration === generation) error.value = cause;
+    } finally {
+      if (!disposed && activeGeneration === generation) {
+        isInitialLoading.value = false;
+        hasLoaded.value = true;
+      }
+    }
+  };
+  const loadMore = async () => {
+    if (isInitialLoading.value || isLoadingMore.value || !hasMore.value) return;
+    const activeGeneration = generation;
+    isLoadingMore.value = true;
+    error.value = null;
+    try {
+      await loadUntilVisible(activeGeneration, filter.value);
+    } catch (cause) {
+      if (!disposed && activeGeneration === generation) error.value = cause;
+    } finally {
+      if (!disposed && activeGeneration === generation) isLoadingMore.value = 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();
+    }
+  };
+  const setQuery = (query) => setFilter({ ...filter.value, query });
+  const dispose = async () => {
+    disposed = true;
+    generation += 1;
+  };
+  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)(() => {
+    void dispose();
+  });
+  return {
+    conversations,
+    filter,
+    isInitialLoading,
+    isLoadingMore,
+    hasMore,
+    hasLoaded,
+    error,
+    loadInitial: loadInitialFor,
+    refresh: loadInitialFor,
+    loadMore,
+    setFilter,
+    setQuery,
+    dispose
+  };
+}
+
+// src/components/conversation-list.ts
+var appearanceProps3 = {
+  classNames: { type: Object, default: void 0 },
+  styles: { type: Object, default: void 0 },
+  density: { type: String, default: "comfortable" },
+  unstyled: { type: Boolean, default: false }
+};
+var listViewProps = {
+  ...appearanceProps3,
+  conversations: { type: Array, required: true },
+  selectedConversationId: { type: String, default: void 0 },
+  onConversationSelect: { type: Function, default: void 0 },
+  onRefresh: { type: Function, default: void 0 },
+  onLoadMore: { type: Function, default: void 0 },
+  isInitialLoading: { type: Boolean, default: false },
+  isLoadingMore: { type: Boolean, default: false },
+  hasMore: { type: Boolean, default: false },
+  error: { type: null, required: false },
+  scrollElement: { type: Object, default: void 0 },
+  paginationThreshold: { type: Number, default: 240 },
+  ariaLabel: { type: String, default: "Conversations" }
+};
+var ConversationListView = (0, import_vue9.defineComponent)({
+  name: "ConversationListView",
+  inheritAttrs: false,
+  props: listViewProps,
+  emits: {
+    "conversation-select": (_conversation) => true,
+    refresh: () => true,
+    "load-more": () => true
+  },
+  setup(props, { attrs, emit, slots }) {
+    const internalElement = (0, import_vue9.ref)(null);
+    let requestInFlight = false;
+    let lastRequestedLength = null;
+    const appearance = () => ({
+      density: props.density,
+      unstyled: props.unstyled,
+      ...props.classNames ? { classNames: props.classNames } : {},
+      ...props.styles ? { styles: props.styles } : {}
+    });
+    const requestMore = async () => {
+      if (requestInFlight || lastRequestedLength === props.conversations.length || props.isInitialLoading || props.isLoadingMore || !props.hasMore || !props.onLoadMore) return;
+      requestInFlight = true;
+      lastRequestedLength = props.conversations.length;
+      try {
+        await props.onLoadMore();
+      } catch {
+        lastRequestedLength = null;
+      } finally {
+        requestInFlight = false;
+      }
+    };
+    const selectConversation = (conversation) => {
+      props.onConversationSelect?.(conversation);
+    };
+    const refresh = () => {
+      return props.onRefresh?.();
+    };
+    const renderContent = () => {
+      const currentAppearance = appearance();
+      if (props.isInitialLoading && props.conversations.length === 0) {
+        return slots["initial-loading"]?.() ?? (0, import_vue9.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"]);
+      }
+      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", {
+          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
+        ]);
+      }
+      if (props.conversations.length === 0) {
+        return slots.empty?.() ?? (0, import_vue9.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"]);
+      }
+      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", {
+          type: "button",
+          "data-selected": selected || void 0,
+          "aria-current": selected ? "true" : void 0,
+          onClick: select,
+          class: partClass("listItem", currentAppearance, "ckui-conversation-item"),
+          style: partStyle("listItem", currentAppearance)
+        }, [
+          (0, import_vue9.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_vue9.h)(import_vue8.ChevronRight, { size: 18, "aria-hidden": "true" })
+        ]);
+        const nodes = [(0, import_vue9.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" })));
+        }
+        return nodes;
+      });
+      if (props.error) {
+        children.push(slots.error?.({ error: props.error, retry: requestMore }) ?? (0, import_vue9.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: () => {
+          void requestMore();
+        } }, "Retry")]));
+      } else if (props.isLoadingMore) {
+        children.push(slots["load-more"]?.() ?? (0, import_vue9.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"]));
+      }
+      return (0, import_vue9.h)("div", {
+        role: "list",
+        class: partClass("list", currentAppearance, "ckui-conversation-list__items"),
+        style: partStyle("list", currentAppearance)
+      }, children);
+    };
+    return () => (0, import_vue9.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", {
+          type: "button",
+          "aria-label": "Refresh conversations",
+          class: partClass("button", appearance(), "ckui-icon-button"),
+          style: partStyle("button", appearance()),
+          onClick: () => {
+            void refresh();
+          }
+        }, [(0, import_vue9.h)(import_vue8.RefreshCw, { size: 17, "aria-hidden": "true" })])
+      ]) : null,
+      (0, import_vue9.h)("div", {
+        ref: (element) => {
+          internalElement.value = element;
+          if (props.scrollElement) props.scrollElement.value = element;
+        },
+        class: cx(!props.unstyled && "ckui-scroll-area", props.classNames?.list),
+        style: props.styles?.list,
+        "aria-label": props.ariaLabel,
+        onScroll: (event) => {
+          const nativeHandler = attrs.onScroll;
+          if (typeof nativeHandler === "function") nativeHandler(event);
+          const element = event.currentTarget;
+          if (element.scrollHeight - element.scrollTop - element.clientHeight <= props.paginationThreshold) void requestMore();
+        }
+      }, [renderContent()])
+    ]);
+  }
+});
+var ConversationList = (0, import_vue9.defineComponent)({
+  name: "ConversationList",
+  inheritAttrs: false,
+  props: {
+    ...listViewProps,
+    conversations: { type: Array, default: () => [] },
+    client: { type: Object, required: true },
+    pageLoader: { type: Function, default: void 0 },
+    initialFilter: { type: Object, default: void 0 },
+    pageSize: { type: Number, default: 30 },
+    autoLoad: { type: Boolean, default: true },
+    onControllerChange: { type: Function, default: void 0 }
+  },
+  emits: ["conversation-select", "controller-change"],
+  setup(props, { attrs, emit, expose, slots }) {
+    const controller = useConversationList({
+      client: () => props.client,
+      ...props.pageLoader ? { pageLoader: props.pageLoader } : {},
+      ...props.initialFilter ? { initialFilter: props.initialFilter } : {},
+      pageSize: props.pageSize,
+      autoLoad: props.autoLoad
+    });
+    expose({ controller });
+    (0, import_vue9.watchEffect)(() => {
+      emit("controller-change", controller);
+    });
+    return () => {
+      const {
+        client: _client,
+        pageLoader: _pageLoader,
+        initialFilter: _initialFilter,
+        pageSize: _pageSize,
+        autoLoad: _autoLoad,
+        onControllerChange: _onControllerChange,
+        conversations: _conversations,
+        onRefresh: _onRefresh,
+        onLoadMore: _onLoadMore,
+        isInitialLoading: _isInitialLoading,
+        isLoadingMore: _isLoadingMore,
+        hasMore: _hasMore,
+        error: _error,
+        ...forwarded
+      } = props;
+      return (0, import_vue9.h)(ConversationListView, {
+        ...attrs,
+        ...forwarded,
+        conversations: controller.conversations.value,
+        onRefresh: controller.refresh,
+        onLoadMore: controller.loadMore,
+        isInitialLoading: controller.isInitialLoading.value,
+        isLoadingMore: controller.isLoadingMore.value,
+        hasMore: controller.hasMore.value,
+        ...controller.error.value == null ? {} : { error: controller.error.value },
+        onConversationSelect: (conversation) => {
+          emit("conversation-select", conversation);
+        }
+      }, slots);
+    };
+  }
+});
+
+// src/theme.ts
+var import_vue10 = require("vue");
+var defaultConvoKitTheme = {
+  background: "#f7f9f8",
+  surface: "#ffffff",
+  primary: "#148f78",
+  text: "#17211f",
+  mutedText: "#66736f",
+  border: "#dde5e2",
+  error: "#ba1a1a",
+  incomingBubble: "#ffffff",
+  outgoingBubble: "#148f78",
+  outgoingText: "#ffffff",
+  radius: "16px",
+  avatarSize: "44px",
+  fontFamily: 'Inter, 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)({
+  name: "ConvoKitThemeProvider",
+  inheritAttrs: false,
+  props: {
+    theme: { type: Object, default: () => ({}) },
+    class: { type: [String, Array, Object], default: void 0 },
+    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);
+    return () => {
+      const theme = value.value;
+      const variables = {
+        "--ckui-background": theme.background,
+        "--ckui-surface": theme.surface,
+        "--ckui-primary": theme.primary,
+        "--ckui-text": theme.text,
+        "--ckui-muted": theme.mutedText,
+        "--ckui-border": theme.border,
+        "--ckui-error": theme.error,
+        "--ckui-incoming": theme.incomingBubble,
+        "--ckui-outgoing": theme.outgoingBubble,
+        "--ckui-outgoing-text": theme.outgoingText,
+        "--ckui-radius": theme.radius,
+        "--ckui-avatar-size": theme.avatarSize,
+        "--ckui-font": theme.fontFamily
+      };
+      return (0, import_vue10.h)("div", {
+        ...attrs,
+        class: cx("ckui-theme", props.class, attrs.class),
+        style: [variables, props.style, attrs.style]
+      }, slots.default?.());
+    };
+  }
+});
+function useConvoKitTheme() {
+  return (0, import_vue10.inject)(themeKey, defaultThemeRef);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Conversation,
+  ConversationList,
+  ConversationListView,
+  ConversationView,
+  ConvoKitAvatar,
+  ConvoKitThemeProvider,
+  MessageListView,
+  applyConversationFilter,
+  createConvoKitUiClient,
+  defaultConvoKitTheme,
+  defaultReadersResolver,
+  formatFileSize,
+  matchesConversation,
+  mergeConversations,
+  mergeMessages,
+  readerIdsFor,
+  useConversation,
+  useConversationList,
+  useConvoKitTheme
+});
+//# sourceMappingURL=index.cjs.map