@convokitapp/react-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1412 @@
+'use strict';
+
+var Avatar = require('@radix-ui/react-avatar');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Avatar__namespace = /*#__PURE__*/_interopNamespace(Avatar);
+
+// 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 } : {}
+    })
+  };
+}
+function cx(...values) {
+  return clsx.clsx(values);
+}
+function participantIds(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 requestedParticipants = participantIds(filter);
+  if (requestedParticipants.size > 0) {
+    const available = new Set(
+      conversation.participants.flatMap((participant) => [
+        participant.id,
+        participant.appUserId
+      ])
+    );
+    const values = [...requestedParticipants];
+    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 partProps(part, appearance, defaultClassName) {
+  return {
+    className: cx(!appearance.unstyled && defaultClassName, appearance.classNames?.[part]),
+    style: 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();
+}
+function ConvoKitAvatar({ name, src, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Avatar__namespace.Root, { className: cx("ckui-avatar", className), ...props, children: [
+    src ? /* @__PURE__ */ jsxRuntime.jsx(Avatar__namespace.Image, { className: "ckui-avatar__image", src, alt: "" }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar__namespace.Fallback, { className: "ckui-avatar__fallback", delayMs: src ? 300 : 0, children: initials(name) })
+  ] });
+}
+function useConversation({
+  client,
+  conversationId,
+  messagePageSize = 30,
+  markReadOnLoad = true,
+  markReadOnReceive = true,
+  typingTimeoutMs = 3e3,
+  autoLoad = true
+}) {
+  if (!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, setConversation] = react.useState(null);
+  const [messages, setMessages] = react.useState([]);
+  const [typingUserIds, setTypingUserIds] = react.useState(/* @__PURE__ */ new Set());
+  const [readAtByUserId, setReadAtByUserId] = react.useState(/* @__PURE__ */ new Map());
+  const [isInitialLoading, setInitialLoading] = react.useState(false);
+  const [isLoadingOlder, setLoadingOlder] = react.useState(false);
+  const [isSending, setSending] = react.useState(false);
+  const [hasOlderMessages, setHasOlderMessages] = react.useState(true);
+  const [hasLoaded, setHasLoaded] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const messagesRef = react.useRef(messages);
+  const generationRef = react.useRef(0);
+  const mountedRef = react.useRef(true);
+  const initialLoadingRef = react.useRef(false);
+  const loadingOlderRef = react.useRef(false);
+  const sendingRef = react.useRef(false);
+  const hasOlderRef = react.useRef(true);
+  const sentTypingRef = react.useRef(false);
+  const typingTimerRef = react.useRef(null);
+  const subscriptionsRef = react.useRef([]);
+  const storeMessages = react.useCallback((next) => {
+    messagesRef.current = next;
+    setMessages(next);
+  }, []);
+  const markRead = react.useCallback(async () => {
+    try {
+      await client.markConversationRead(conversationId);
+      if (!mountedRef.current) return;
+      setReadAtByUserId((current) => {
+        const next = new Map(current);
+        next.set(client.currentUserId, /* @__PURE__ */ new Date());
+        return next;
+      });
+    } catch (cause) {
+      if (mountedRef.current) setError(cause);
+    }
+  }, [client, conversationId]);
+  const unsubscribe = react.useCallback(async () => {
+    const active = subscriptionsRef.current;
+    subscriptionsRef.current = [];
+    await Promise.all(active.map((subscription) => subscription.unsubscribe()));
+  }, []);
+  const subscribe = react.useCallback(
+    (generation) => {
+      const report = (cause) => {
+        if (mountedRef.current && generation === generationRef.current) setError(cause);
+      };
+      subscriptionsRef.current = [
+        client.onMessage(
+          conversationId,
+          (message) => {
+            if (!mountedRef.current || generation !== generationRef.current) return;
+            storeMessages(mergeMessages(messagesRef.current, [message]));
+            if (markReadOnReceive && message.senderId !== client.currentUserId) {
+              void markRead();
+            }
+          },
+          report
+        ),
+        client.onReadReceipt(
+          conversationId,
+          ({ userId, readAt }) => {
+            if (!mountedRef.current || generation !== generationRef.current) return;
+            setReadAtByUserId((current) => new Map(current).set(userId, readAt));
+          },
+          report
+        ),
+        client.onTyping(
+          conversationId,
+          ({ userId, isTyping }) => {
+            if (!mountedRef.current || generation !== generationRef.current || userId === client.currentUserId) {
+              return;
+            }
+            setTypingUserIds((current) => {
+              const next = new Set(current);
+              if (isTyping) next.add(userId);
+              else next.delete(userId);
+              return next;
+            });
+          },
+          report
+        )
+      ];
+    },
+    [client, conversationId, markRead, markReadOnReceive, storeMessages]
+  );
+  const loadInitial = react.useCallback(async () => {
+    const generation = ++generationRef.current;
+    await unsubscribe();
+    storeMessages([]);
+    setTypingUserIds(/* @__PURE__ */ new Set());
+    setReadAtByUserId(/* @__PURE__ */ new Map());
+    hasOlderRef.current = true;
+    setHasOlderMessages(true);
+    setError(null);
+    initialLoadingRef.current = true;
+    setInitialLoading(true);
+    subscribe(generation);
+    try {
+      const [nextConversation, page] = await Promise.all([
+        client.getConversation(conversationId),
+        client.getMessages({
+          conversationId,
+          limit: messagePageSize,
+          offset: 0
+        })
+      ]);
+      if (!mountedRef.current || generation !== generationRef.current) return;
+      setConversation(nextConversation);
+      setReadAtByUserId(
+        new Map(
+          nextConversation.participants.flatMap(
+            (participant) => participant.lastReadAt ? [[participant.appUserId, participant.lastReadAt]] : []
+          )
+        )
+      );
+      storeMessages(mergeMessages([], page));
+      hasOlderRef.current = page.length === messagePageSize;
+      setHasOlderMessages(hasOlderRef.current);
+      if (markReadOnLoad) await markRead();
+    } catch (cause) {
+      if (mountedRef.current && generation === generationRef.current) setError(cause);
+    } finally {
+      if (mountedRef.current && generation === generationRef.current) {
+        initialLoadingRef.current = false;
+        setInitialLoading(false);
+        setHasLoaded(true);
+      }
+    }
+  }, [
+    client,
+    conversationId,
+    markRead,
+    markReadOnLoad,
+    messagePageSize,
+    storeMessages,
+    subscribe,
+    unsubscribe
+  ]);
+  const loadOlderMessages = react.useCallback(async () => {
+    if (initialLoadingRef.current || loadingOlderRef.current || !hasOlderRef.current) return;
+    const generation = generationRef.current;
+    loadingOlderRef.current = true;
+    setLoadingOlder(true);
+    setError(null);
+    try {
+      const page = await client.getMessages({
+        conversationId,
+        limit: messagePageSize,
+        offset: messagesRef.current.length
+      });
+      if (!mountedRef.current || generation !== generationRef.current) return;
+      storeMessages(mergeMessages(messagesRef.current, page));
+      hasOlderRef.current = page.length === messagePageSize;
+      setHasOlderMessages(hasOlderRef.current);
+    } catch (cause) {
+      if (mountedRef.current && generation === generationRef.current) setError(cause);
+    } finally {
+      if (mountedRef.current && generation === generationRef.current) {
+        loadingOlderRef.current = false;
+        setLoadingOlder(false);
+      }
+    }
+  }, [client, conversationId, messagePageSize, storeMessages]);
+  const updateTyping = react.useCallback(
+    async (isTyping) => {
+      if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+      if (isTyping) {
+        typingTimerRef.current = setTimeout(() => void updateTyping(false), typingTimeoutMs);
+      }
+      if (sentTypingRef.current === isTyping) return;
+      sentTypingRef.current = isTyping;
+      try {
+        await client.sendTyping({ conversationId, isTyping });
+      } catch (cause) {
+        if (mountedRef.current) setError(cause);
+      }
+    },
+    [client, conversationId, typingTimeoutMs]
+  );
+  const sendMessage = react.useCallback(
+    async ({ text, media }) => {
+      const normalizedText = text?.trim();
+      if (!normalizedText && (!media || media.length === 0)) return null;
+      if (sendingRef.current) return null;
+      sendingRef.current = true;
+      setSending(true);
+      setError(null);
+      try {
+        const message = await client.sendMessage({
+          conversationId,
+          ...normalizedText ? { text: normalizedText } : {},
+          ...media?.length ? { media } : {}
+        });
+        if (mountedRef.current) storeMessages(mergeMessages(messagesRef.current, [message]));
+        await updateTyping(false);
+        return message;
+      } catch (cause) {
+        if (mountedRef.current) setError(cause);
+        return null;
+      } finally {
+        sendingRef.current = false;
+        if (mountedRef.current) setSending(false);
+      }
+    },
+    [client, conversationId, storeMessages, updateTyping]
+  );
+  react.useEffect(() => {
+    mountedRef.current = true;
+    if (autoLoad) void loadInitial();
+    return () => {
+      mountedRef.current = false;
+      generationRef.current += 1;
+      if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+      if (sentTypingRef.current) {
+        void client.sendTyping({ conversationId, isTyping: false }).catch(() => void 0);
+      }
+      void unsubscribe();
+    };
+  }, [autoLoad, client, conversationId, loadInitial, unsubscribe]);
+  const currentUserId = client.currentUserId;
+  const stateReaderIdsFor = react.useCallback(
+    (message) => readerIdsFor(message, readAtByUserId),
+    [readAtByUserId]
+  );
+  return react.useMemo(
+    () => ({
+      conversation,
+      messages,
+      typingUserIds,
+      readAtByUserId,
+      isInitialLoading,
+      isLoadingOlder,
+      isSending,
+      hasOlderMessages,
+      hasLoaded,
+      error,
+      currentUserId,
+      readerIdsFor: stateReaderIdsFor,
+      loadInitial,
+      refresh: loadInitial,
+      loadOlderMessages,
+      sendMessage,
+      markRead,
+      updateTyping
+    }),
+    [
+      conversation,
+      currentUserId,
+      error,
+      hasLoaded,
+      hasOlderMessages,
+      isInitialLoading,
+      isLoadingOlder,
+      isSending,
+      loadInitial,
+      loadOlderMessages,
+      markRead,
+      messages,
+      readAtByUserId,
+      sendMessage,
+      stateReaderIdsFor,
+      typingUserIds,
+      updateTyping
+    ]
+  );
+}
+function MessageListView({
+  conversation,
+  messages,
+  currentUserId,
+  readAtByUserId = /* @__PURE__ */ new Map(),
+  readersResolver,
+  onLoadOlder,
+  hasOlderMessages = false,
+  isLoadingOlder = false,
+  error = null,
+  renderMessage,
+  renderMedia,
+  renderReadReceipt,
+  onAttachmentClick,
+  renderEmpty,
+  renderLoadingOlder,
+  renderError,
+  scrollRef,
+  paginationThreshold = 240,
+  reverse = true,
+  stickToBottom = true,
+  formatTime = defaultFormatTime,
+  imageLoading = "lazy",
+  className,
+  style,
+  classNames,
+  styles,
+  density = "comfortable",
+  unstyled = false,
+  onScroll,
+  ...rootProps
+}) {
+  const appearance = {
+    density,
+    unstyled,
+    ...classNames ? { classNames } : {},
+    ...styles ? { styles } : {}
+  };
+  const internalRef = react.useRef(null);
+  const requestInFlight = react.useRef(false);
+  const lastRequestedLength = react.useRef(null);
+  const previousMessageCount = react.useRef(0);
+  const participants = react.useMemo(
+    () => new Map(
+      conversation.participants.flatMap((participant) => [
+        [participant.id, participant],
+        [participant.appUserId, participant]
+      ])
+    ),
+    [conversation.participants]
+  );
+  const requestOlder = react.useCallback(async () => {
+    if (requestInFlight.current || lastRequestedLength.current === messages.length || isLoadingOlder || !hasOlderMessages || !onLoadOlder) {
+      return;
+    }
+    requestInFlight.current = true;
+    lastRequestedLength.current = messages.length;
+    try {
+      await onLoadOlder();
+    } catch {
+      lastRequestedLength.current = null;
+    } finally {
+      requestInFlight.current = false;
+    }
+  }, [hasOlderMessages, isLoadingOlder, messages.length, onLoadOlder]);
+  react.useEffect(() => {
+    if (messages.length !== previousMessageCount.current || !hasOlderMessages) {
+      lastRequestedLength.current = null;
+    }
+    const element = internalRef.current;
+    const appended = messages.length > previousMessageCount.current;
+    if (element && reverse && stickToBottom && appended) {
+      const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+      if (previousMessageCount.current === 0 || distanceFromBottom < 320) {
+        requestAnimationFrame(() => {
+          element.scrollTop = element.scrollHeight;
+        });
+      }
+    }
+    previousMessageCount.current = messages.length;
+  }, [hasOlderMessages, messages.length, reverse, stickToBottom]);
+  const handleScroll = (event) => {
+    onScroll?.(event);
+    const element = event.currentTarget;
+    const distanceFromOldest = reverse ? element.scrollTop : element.scrollHeight - element.scrollTop - element.clientHeight;
+    if (distanceFromOldest <= paginationThreshold) void requestOlder();
+  };
+  const messageNodes = messages.map((message, index) => {
+    const isCurrentUser = message.senderId === currentUserId;
+    const sender = participants.get(message.senderId);
+    const readerIds = readersResolver ? readersResolver(message) : readerIdsFor(message, readAtByUserId);
+    const renderProps = {
+      message,
+      chronologicalIndex: index,
+      isCurrentUser,
+      sender,
+      readerIds
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", children: renderMessage?.(renderProps) ?? /* @__PURE__ */ jsxRuntime.jsx(
+      DefaultMessage,
+      {
+        ...renderProps,
+        ...renderMedia ? { renderMedia } : {},
+        ...renderReadReceipt ? { renderReadReceipt } : {},
+        ...onAttachmentClick ? { onAttachmentClick } : {},
+        formatTime,
+        imageLoading,
+        appearance
+      }
+    ) }, message.id);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rootProps,
+      ref: (node) => {
+        internalRef.current = node;
+        if (scrollRef) scrollRef.current = node;
+      },
+      className: cx(!unstyled && "ckui ckui-message-list", classNames?.messages, className),
+      style: { ...styles?.messages, ...style },
+      "data-density": density,
+      onScroll: handleScroll,
+      role: "log",
+      "aria-live": "polite",
+      "aria-label": `Messages in ${conversation.displayTitle}`,
+      children: [
+        isLoadingOlder ? renderLoadingOlder?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("loading", appearance, "ckui-inline-state"), role: "status", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "ckui-spin", "aria-hidden": "true" }),
+          " Loading older messages\u2026"
+        ] }) : null,
+        error ? renderError?.({ error, ...onLoadOlder ? { retry: () => void requestOlder() } : {} }) ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("error", appearance, "ckui-inline-state ckui-state--error"), role: "alert", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage(error) }),
+          onLoadOlder ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ckui-link-button", onClick: () => void requestOlder(), children: "Retry" }) : null
+        ] }) : null,
+        messages.length === 0 && !isLoadingOlder ? renderEmpty?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("empty", appearance, "ckui-state"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { "aria-hidden": "true" }),
+          " No messages yet"
+        ] }) : messageNodes
+      ]
+    }
+  );
+}
+function DefaultMessage({
+  message,
+  isCurrentUser,
+  sender,
+  readerIds,
+  renderMedia,
+  renderReadReceipt,
+  onAttachmentClick,
+  formatTime,
+  imageLoading,
+  appearance
+}) {
+  const messagePart = isCurrentUser ? "outgoingMessage" : "incomingMessage";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: cx(
+        !appearance.unstyled && "ckui-message-row",
+        isCurrentUser && !appearance.unstyled && "ckui-message-row--outgoing",
+        appearance.classNames?.message,
+        appearance.classNames?.[messagePart]
+      ),
+      style: { ...appearance.styles?.message, ...appearance.styles?.[messagePart] },
+      "data-message-id": message.id,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ckui-message-bubble", children: [
+          !isCurrentUser ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "ckui-message-sender", children: sender?.name || message.senderId }) : null,
+          message.text ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ckui-message-text", children: message.text }) : null,
+          message.media.map((media, mediaIndex) => {
+            const open = onAttachmentClick ? () => onAttachmentClick(media, message) : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { ...partProps("media", appearance, "ckui-media"), children: renderMedia?.({ media, message, isCurrentUser, ...open ? { onOpen: open } : {} }) ?? /* @__PURE__ */ jsxRuntime.jsx(
+              DefaultMedia,
+              {
+                media,
+                message,
+                isCurrentUser,
+                ...open ? { onOpen: open } : {},
+                imageLoading
+              }
+            ) }, media.id ?? `${media.type}-${mediaIndex}`);
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("time", { className: "ckui-message-time", dateTime: message.createdAt.toISOString(), children: [
+            formatTime(message.createdAt),
+            isCurrentUser ? readerIds.size > 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { size: 14, "aria-label": "Read" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, "aria-label": "Delivered" }) : null
+          ] })
+        ] }),
+        isCurrentUser ? renderReadReceipt?.({ message, readerIds }) ?? /* @__PURE__ */ jsxRuntime.jsx("div", { ...partProps("receipt", appearance, "ckui-read-receipt"), children: readerIds.size > 0 ? `Read by ${readerIds.size}` : "Delivered" }) : null
+      ]
+    }
+  );
+}
+function DefaultMedia({ media, onOpen, imageLoading }) {
+  const Wrapper = onOpen ? "button" : "div";
+  if (media.type === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Wrapper,
+      {
+        ...onOpen ? { type: "button", onClick: onOpen } : {},
+        className: "ckui-media-card ckui-media-card--image",
+        children: [
+          media.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: media.url, alt: media.name ?? "Shared image", loading: imageLoading }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ckui-media-placeholder", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageOff, { "aria-hidden": "true" }),
+            " Image unavailable"
+          ] }),
+          media.name ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ckui-media-name", children: media.name }) : null
+        ]
+      }
+    );
+  }
+  if (media.type === "file") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Wrapper,
+      {
+        ...onOpen ? { type: "button", onClick: onOpen } : {},
+        className: "ckui-media-card ckui-media-card--file",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: media.name || "Attachment" }),
+            formatFileSize(media.size) ? /* @__PURE__ */ jsxRuntime.jsx("small", { children: formatFileSize(media.size) }) : null
+          ] }),
+          onOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { "aria-hidden": "true", size: 18 }) : null
+        ]
+      }
+    );
+  }
+  if (media.type === "location") {
+    const label = media.name || `${media.metadata.lat}, ${media.metadata.lng}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Wrapper,
+      {
+        ...onOpen ? { type: "button", onClick: onOpen } : {},
+        className: "ckui-media-card ckui-media-card--detail",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("small", { children: "Shared location" })
+          ] })
+        ]
+      }
+    );
+  }
+  if (media.type === "contact") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Wrapper,
+      {
+        ...onOpen ? { type: "button", onClick: onOpen } : {},
+        className: "ckui-media-card ckui-media-card--detail",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ContactRound, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: media.name || "Shared contact" }),
+            /* @__PURE__ */ jsxRuntime.jsx("small", { children: media.metadata.email || media.metadata.phone || "Contact details" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ckui-media-card", children: "Unsupported attachment" });
+}
+function defaultFormatTime(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+}
+function ConversationView({
+  conversation,
+  messages,
+  currentUserId,
+  onSendMessage,
+  typingUserIds = /* @__PURE__ */ new Set(),
+  readAtByUserId = /* @__PURE__ */ new Map(),
+  readersResolver,
+  onBack,
+  onRefresh,
+  onLoadOlder,
+  onTypingChange,
+  onAddAttachment,
+  onAttachmentClick,
+  isInitialLoading = false,
+  isLoadingOlder = false,
+  isSending = false,
+  hasOlderMessages = false,
+  error = null,
+  messageError = null,
+  renderHeader,
+  renderMessage,
+  renderMedia,
+  renderReadReceipt,
+  renderComposer,
+  renderTypingIndicator,
+  renderEmpty,
+  renderLoading,
+  renderError,
+  renderLoadingOlder,
+  renderMessageError,
+  displayNameForUser,
+  reverseMessages = true,
+  stickToBottom = true,
+  paginationThreshold,
+  formatTime,
+  imageLoading,
+  composerPlaceholder = "Write a message",
+  composerAriaLabel = "Message",
+  composerProps,
+  draft: controlledDraft,
+  defaultDraft = "",
+  onDraftChange,
+  className,
+  classNames,
+  styles,
+  density = "comfortable",
+  unstyled = false,
+  ...rootProps
+}) {
+  const appearance = {
+    unstyled,
+    ...classNames ? { classNames } : {},
+    ...styles ? { styles } : {}
+  };
+  const [internalDraft, setInternalDraft] = react.useState(defaultDraft);
+  const [submitting, setSubmitting] = react.useState(false);
+  const draft = controlledDraft ?? internalDraft;
+  const setDraft = react.useCallback(
+    (value) => {
+      if (controlledDraft === void 0) setInternalDraft(value);
+      onDraftChange?.(value);
+      void onTypingChange?.(value.trim().length > 0);
+    },
+    [controlledDraft, onDraftChange, onTypingChange]
+  );
+  const submit = react.useCallback(async () => {
+    const text = draft.trim();
+    if (!text || isSending || submitting) return;
+    setSubmitting(true);
+    try {
+      const shouldClear = await onSendMessage(text);
+      if (shouldClear !== false) setDraft("");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [draft, isSending, onSendMessage, setDraft, submitting]);
+  const nameForUser = react.useCallback(
+    (userId) => {
+      const custom = displayNameForUser?.(userId)?.trim();
+      if (custom) return custom;
+      const participant = conversation.participants.find(
+        (value) => value.id === userId || value.appUserId === userId
+      );
+      return participant?.name.trim() || userId;
+    },
+    [conversation.participants, displayNameForUser]
+  );
+  if (isInitialLoading && messages.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...rootProps,
+        className: cx(!unstyled && "ckui ckui-conversation", classNames?.root, className),
+        style: { ...styles?.root, ...rootProps.style },
+        "data-density": density,
+        children: renderLoading?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("loading", appearance, "ckui-state"), role: "status", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "ckui-spin", "aria-hidden": "true" }),
+          " Loading conversation\u2026"
+        ] })
+      }
+    );
+  }
+  const header = renderHeader?.({
+    conversation,
+    ...onBack ? { onBack } : {},
+    ...onRefresh ? { onRefresh } : {}
+  }) ?? /* @__PURE__ */ jsxRuntime.jsxs("header", { ...partProps("header", appearance, "ckui-conversation-header"), children: [
+    onBack ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Back", onClick: onBack, ...partProps("button", appearance, "ckui-icon-button"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { "aria-hidden": "true", size: 20 }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ConvoKitAvatar, { name: conversation.displayTitle, src: conversation.imageUrl }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ckui-conversation-header__body", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: conversation.displayTitle }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        conversation.participants.length,
+        " participant",
+        conversation.participants.length === 1 ? "" : "s"
+      ] })
+    ] }),
+    onRefresh ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Refresh conversation", onClick: () => void onRefresh(), ...partProps("button", appearance, "ckui-icon-button"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { "aria-hidden": "true", size: 18 }) }) : null
+  ] });
+  const typing = renderTypingIndicator?.({
+    userIds: typingUserIds,
+    displayNameForUser: nameForUser
+  }) ?? /* @__PURE__ */ jsxRuntime.jsx("div", { ...partProps("typing", appearance, "ckui-typing"), "aria-live": "polite", children: typingLabel(typingUserIds, nameForUser) });
+  const composer = renderComposer?.({
+    value: draft,
+    setValue: setDraft,
+    isSending: isSending || submitting,
+    send: () => void submit(),
+    ...onAddAttachment ? { addAttachment: onAddAttachment } : {}
+  }) ?? /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ...partProps("composer", appearance, "ckui-composer"),
+      onSubmit: (event) => {
+        event.preventDefault();
+        void submit();
+      },
+      children: [
+        onAddAttachment ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Add attachment", onClick: onAddAttachment, ...partProps("button", appearance, "ckui-icon-button"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Paperclip, { "aria-hidden": "true", size: 20 }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            rows: 1,
+            placeholder: composerPlaceholder,
+            "aria-label": composerAriaLabel,
+            ...composerProps,
+            ...partProps("input", appearance, "ckui-composer__input"),
+            className: cx(!unstyled && "ckui-composer__input", classNames?.input, composerProps?.className),
+            style: { ...styles?.input, ...composerProps?.style },
+            value: draft,
+            disabled: isSending || submitting,
+            onChange: (event) => setDraft(event.currentTarget.value),
+            onKeyDown: (event) => {
+              composerProps?.onKeyDown?.(event);
+              if (event.defaultPrevented) return;
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                void submit();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            "aria-label": "Send message",
+            disabled: !draft.trim() || isSending || submitting,
+            ...partProps("button", appearance, "ckui-send-button"),
+            children: isSending || submitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "ckui-spin", "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { "aria-hidden": "true", size: 18 })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ...rootProps,
+      className: cx(!unstyled && "ckui ckui-conversation", classNames?.root, className),
+      style: { ...styles?.root, ...rootProps.style },
+      "data-density": density,
+      "aria-label": conversation.displayTitle,
+      children: [
+        header,
+        error ? renderError?.({ error, ...onRefresh ? { retry: () => void onRefresh() } : {} }) ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("error", appearance, "ckui-conversation-error"), role: "alert", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage(error) }),
+          onRefresh ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ckui-link-button", onClick: () => void onRefresh(), children: "Retry" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MessageListView,
+          {
+            conversation,
+            messages,
+            currentUserId,
+            readAtByUserId,
+            ...readersResolver ? { readersResolver } : {},
+            ...onLoadOlder ? { onLoadOlder } : {},
+            hasOlderMessages,
+            isLoadingOlder,
+            error: messageError,
+            ...renderMessage ? { renderMessage } : {},
+            ...renderMedia ? { renderMedia } : {},
+            ...renderReadReceipt ? { renderReadReceipt } : {},
+            ...onAttachmentClick ? { onAttachmentClick } : {},
+            ...renderEmpty ? { renderEmpty } : {},
+            ...renderLoadingOlder ? { renderLoadingOlder } : {},
+            ...renderMessageError ? { renderError: renderMessageError } : {},
+            reverse: reverseMessages,
+            stickToBottom,
+            ...paginationThreshold === void 0 ? {} : { paginationThreshold },
+            ...formatTime ? { formatTime } : {},
+            ...imageLoading ? { imageLoading } : {},
+            ...classNames ? { classNames } : {},
+            ...styles ? { styles } : {},
+            density,
+            unstyled
+          }
+        ),
+        typing,
+        composer
+      ]
+    }
+  );
+}
+function Conversation({
+  client,
+  conversationId,
+  messagePageSize,
+  markReadOnLoad,
+  markReadOnReceive,
+  typingTimeoutMs,
+  autoLoad,
+  renderLoading,
+  onControllerChange,
+  ...viewProps
+}) {
+  const controller = useConversation({
+    client,
+    conversationId,
+    ...messagePageSize === void 0 ? {} : { messagePageSize },
+    ...markReadOnLoad === void 0 ? {} : { markReadOnLoad },
+    ...markReadOnReceive === void 0 ? {} : { markReadOnReceive },
+    ...typingTimeoutMs === void 0 ? {} : { typingTimeoutMs },
+    ...autoLoad === void 0 ? {} : { autoLoad }
+  });
+  react.useEffect(() => onControllerChange?.(controller), [controller, onControllerChange]);
+  if (!controller.conversation) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx(
+          !viewProps.unstyled && "ckui ckui-conversation",
+          viewProps.classNames?.root,
+          viewProps.className
+        ),
+        style: { ...viewProps.styles?.root, ...viewProps.style },
+        "data-density": viewProps.density ?? "comfortable",
+        children: controller.error ? viewProps.renderError?.({ error: controller.error, retry: controller.refresh }) ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ckui-state ckui-state--error", role: "alert", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage(controller.error) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "ckui-link-button",
+              onClick: () => void controller.refresh(),
+              children: "Try again"
+            }
+          )
+        ] }) : renderLoading?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ckui-state", role: "status", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "ckui-spin", "aria-hidden": "true" }),
+          "Loading conversation\u2026"
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ConversationView,
+    {
+      ...viewProps,
+      conversation: controller.conversation,
+      messages: controller.messages,
+      currentUserId: controller.currentUserId,
+      onSendMessage: async (text) => await controller.sendMessage({ text }) !== null,
+      typingUserIds: controller.typingUserIds,
+      readAtByUserId: controller.readAtByUserId,
+      onRefresh: controller.refresh,
+      onLoadOlder: controller.loadOlderMessages,
+      onTypingChange: controller.updateTyping,
+      isInitialLoading: controller.isInitialLoading,
+      isLoadingOlder: controller.isLoadingOlder,
+      isSending: controller.isSending,
+      hasOlderMessages: controller.hasOlderMessages,
+      error: controller.error
+    }
+  );
+}
+function defaultReadersResolver(readAtByUserId) {
+  return (message) => readerIdsFor(message, readAtByUserId);
+}
+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 EMPTY_FILTER = {};
+function useConversationList({
+  client,
+  pageLoader,
+  initialFilter = EMPTY_FILTER,
+  pageSize = 30,
+  autoLoad = true
+}) {
+  if (!Number.isInteger(pageSize) || pageSize <= 0) {
+    throw new RangeError("pageSize must be a positive integer");
+  }
+  const [source, setSource] = react.useState([]);
+  const [filter, setFilterState] = react.useState(initialFilter);
+  const [isInitialLoading, setInitialLoading] = react.useState(false);
+  const [isLoadingMore, setLoadingMore] = react.useState(false);
+  const [hasMore, setHasMore] = react.useState(true);
+  const [hasLoaded, setHasLoaded] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const sourceRef = react.useRef(source);
+  const filterRef = react.useRef(filter);
+  const offsetRef = react.useRef(0);
+  const hasMoreRef = react.useRef(true);
+  const initialLoadingRef = react.useRef(false);
+  const loadingMoreRef = react.useRef(false);
+  const generationRef = react.useRef(0);
+  const mountedRef = react.useRef(true);
+  react.useEffect(() => {
+    sourceRef.current = source;
+  }, [source]);
+  react.useEffect(() => {
+    filterRef.current = filter;
+  }, [filter]);
+  react.useEffect(
+    () => () => {
+      mountedRef.current = false;
+      generationRef.current += 1;
+    },
+    []
+  );
+  const loadUntilVisible = react.useCallback(
+    async (generation, activeFilter) => {
+      const visibleBefore = applyConversationFilter(sourceRef.current, activeFilter).length;
+      while (true) {
+        const request = {
+          limit: pageSize,
+          offset: offsetRef.current,
+          filter: activeFilter
+        };
+        const page = pageLoader ? await pageLoader(request) : await client.getConversations({
+          limit: pageSize,
+          offset: request.offset,
+          archived: activeFilter.archived ?? false
+        });
+        if (!mountedRef.current || generation !== generationRef.current) return;
+        offsetRef.current += page.length;
+        hasMoreRef.current = page.length === pageSize;
+        setHasMore(hasMoreRef.current);
+        const merged = mergeConversations(sourceRef.current, page);
+        sourceRef.current = merged;
+        setSource(merged);
+        if (!hasMoreRef.current || applyConversationFilter(merged, activeFilter).length > visibleBefore) {
+          return;
+        }
+      }
+    },
+    [client, pageLoader, pageSize]
+  );
+  const loadInitialFor = react.useCallback(
+    async (activeFilter = filterRef.current) => {
+      const generation = ++generationRef.current;
+      sourceRef.current = [];
+      offsetRef.current = 0;
+      hasMoreRef.current = true;
+      initialLoadingRef.current = true;
+      loadingMoreRef.current = false;
+      setSource([]);
+      setHasMore(true);
+      setError(null);
+      setInitialLoading(true);
+      setLoadingMore(false);
+      try {
+        await loadUntilVisible(generation, activeFilter);
+      } catch (cause) {
+        if (mountedRef.current && generation === generationRef.current) setError(cause);
+      } finally {
+        if (mountedRef.current && generation === generationRef.current) {
+          initialLoadingRef.current = false;
+          setInitialLoading(false);
+          setHasLoaded(true);
+        }
+      }
+    },
+    [loadUntilVisible]
+  );
+  const loadMore = react.useCallback(async () => {
+    if (initialLoadingRef.current || loadingMoreRef.current || !hasMoreRef.current) {
+      return;
+    }
+    const generation = generationRef.current;
+    loadingMoreRef.current = true;
+    setLoadingMore(true);
+    setError(null);
+    try {
+      await loadUntilVisible(generation, filterRef.current);
+    } catch (cause) {
+      if (mountedRef.current && generation === generationRef.current) setError(cause);
+    } finally {
+      if (mountedRef.current && generation === generationRef.current) {
+        loadingMoreRef.current = false;
+        setLoadingMore(false);
+      }
+    }
+  }, [loadUntilVisible]);
+  const setFilter = react.useCallback(
+    async (nextFilter) => {
+      const previousArchived = filterRef.current.archived ?? false;
+      filterRef.current = nextFilter;
+      setFilterState(nextFilter);
+      setError(null);
+      if ((nextFilter.archived ?? false) !== previousArchived || !hasLoaded) {
+        await loadInitialFor(nextFilter);
+      } else if (applyConversationFilter(sourceRef.current, nextFilter).length === 0 && hasMoreRef.current) {
+        await loadMore();
+      }
+    },
+    [hasLoaded, loadInitialFor, loadMore]
+  );
+  const setQuery = react.useCallback(
+    (query) => setFilter({ ...filterRef.current, query }),
+    [setFilter]
+  );
+  react.useEffect(() => {
+    if (autoLoad) void loadInitialFor(filterRef.current);
+  }, [autoLoad, loadInitialFor]);
+  const conversations = react.useMemo(
+    () => applyConversationFilter(source, filter),
+    [filter, source]
+  );
+  return {
+    conversations,
+    filter,
+    isInitialLoading,
+    isLoadingMore,
+    hasMore,
+    hasLoaded,
+    error,
+    loadInitial: loadInitialFor,
+    refresh: loadInitialFor,
+    loadMore,
+    setFilter,
+    setQuery
+  };
+}
+function ConversationListView({
+  conversations,
+  onConversationSelect,
+  selectedConversationId,
+  onRefresh,
+  onLoadMore,
+  isInitialLoading = false,
+  isLoadingMore = false,
+  hasMore = false,
+  error = null,
+  renderConversationItem,
+  renderSeparator,
+  renderEmpty,
+  renderInitialLoading,
+  renderError,
+  renderLoadMore,
+  scrollRef,
+  paginationThreshold = 240,
+  ariaLabel = "Conversations",
+  className,
+  style,
+  classNames,
+  styles,
+  density = "comfortable",
+  unstyled = false,
+  onScroll,
+  ...rootProps
+}) {
+  const appearance = {
+    unstyled,
+    ...classNames ? { classNames } : {},
+    ...styles ? { styles } : {}
+  };
+  const internalRef = react.useRef(null);
+  const requestInFlight = react.useRef(false);
+  const lastRequestedLength = react.useRef(null);
+  const requestMore = react.useCallback(async () => {
+    if (requestInFlight.current || lastRequestedLength.current === conversations.length || isInitialLoading || isLoadingMore || !hasMore || !onLoadMore) {
+      return;
+    }
+    requestInFlight.current = true;
+    lastRequestedLength.current = conversations.length;
+    try {
+      await onLoadMore();
+    } catch {
+      lastRequestedLength.current = null;
+    } finally {
+      requestInFlight.current = false;
+    }
+  }, [conversations.length, hasMore, isInitialLoading, isLoadingMore, onLoadMore]);
+  const handleScroll = (event) => {
+    onScroll?.(event);
+    const element = event.currentTarget;
+    if (element.scrollHeight - element.scrollTop - element.clientHeight <= paginationThreshold) {
+      void requestMore();
+    }
+  };
+  let content;
+  if (isInitialLoading && conversations.length === 0) {
+    content = renderInitialLoading?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("loading", appearance, "ckui-state"), role: "status", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "ckui-spin", "aria-hidden": "true" }),
+      " Loading conversations\u2026"
+    ] });
+  } else if (error && conversations.length === 0) {
+    const retry = onRefresh ? () => void onRefresh() : void 0;
+    content = renderError?.({ error, ...retry ? { retry } : {} }) ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("error", appearance, "ckui-state ckui-state--error"), role: "alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage(error) }),
+      retry ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: retry, className: "ckui-link-button", children: "Try again" }) : null
+    ] });
+  } else if (conversations.length === 0) {
+    content = renderEmpty?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("empty", appearance, "ckui-state"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Inbox, { "aria-hidden": "true" }),
+      " No conversations yet"
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "list", ...partProps("list", appearance, "ckui-conversation-list__items"), children: [
+      conversations.map((conversation, index) => {
+        const selected = selectedConversationId === conversation.id;
+        const select = () => onConversationSelect(conversation);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", children: [
+          renderConversationItem?.({ conversation, index, selected, onSelect: select }) ?? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "data-selected": selected || void 0,
+              "aria-current": selected ? "true" : void 0,
+              onClick: select,
+              ...partProps("listItem", appearance, "ckui-conversation-item"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ConvoKitAvatar,
+                  {
+                    name: conversation.displayTitle,
+                    src: conversation.imageUrl,
+                    ...partProps("avatar", appearance, "")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ckui-conversation-item__body", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: conversation.displayTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: conversation.participants.map((participant) => participant.name).join(", ") || conversation.description || "No participants" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", size: 18 })
+              ]
+            }
+          ),
+          index < conversations.length - 1 ? renderSeparator?.(index) ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ckui-separator" }) : null
+        ] }, conversation.id);
+      }),
+      error ? renderError?.({ error, retry: requestMore }) ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("error", appearance, "ckui-inline-state ckui-state--error"), role: "alert", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage(error) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void requestMore(), className: "ckui-link-button", children: "Retry" })
+      ] }) : isLoadingMore ? renderLoadMore?.() ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { ...partProps("loading", appearance, "ckui-inline-state"), role: "status", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "ckui-spin", "aria-hidden": "true" }),
+        " Loading more\u2026"
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rootProps,
+      ...partProps("root", appearance, "ckui ckui-conversation-list"),
+      className: cx(!unstyled && "ckui ckui-conversation-list", classNames?.root, className),
+      style: { ...styles?.root, ...style },
+      "data-density": density,
+      children: [
+        onRefresh ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ckui-conversation-list__toolbar", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ariaLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Refresh conversations",
+              onClick: () => void onRefresh(),
+              ...partProps("button", appearance, "ckui-icon-button"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: 17, "aria-hidden": "true" })
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: (node) => {
+              internalRef.current = node;
+              if (scrollRef) scrollRef.current = node;
+            },
+            className: cx(!unstyled && "ckui-scroll-area", classNames?.list),
+            style: styles?.list,
+            onScroll: handleScroll,
+            "aria-label": ariaLabel,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+function ConversationList({
+  client,
+  pageLoader,
+  initialFilter,
+  pageSize,
+  autoLoad,
+  onControllerChange,
+  ...viewProps
+}) {
+  const controller = useConversationList({
+    client,
+    ...pageLoader ? { pageLoader } : {},
+    ...initialFilter ? { initialFilter } : {},
+    ...pageSize === void 0 ? {} : { pageSize },
+    ...autoLoad === void 0 ? {} : { autoLoad }
+  });
+  react.useEffect(() => onControllerChange?.(controller), [controller, onControllerChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ConversationListView,
+    {
+      ...viewProps,
+      conversations: controller.conversations,
+      onRefresh: controller.refresh,
+      onLoadMore: controller.loadMore,
+      isInitialLoading: controller.isInitialLoading,
+      isLoadingMore: controller.isLoadingMore,
+      hasMore: controller.hasMore,
+      error: controller.error
+    }
+  );
+}
+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 ThemeContext = react.createContext(defaultConvoKitTheme);
+function ConvoKitThemeProvider({
+  children,
+  theme,
+  className,
+  style
+}) {
+  const parent = react.useContext(ThemeContext);
+  const value = react.useMemo(() => ({ ...parent, ...theme }), [parent, theme]);
+  const variables = {
+    "--ckui-background": value.background,
+    "--ckui-surface": value.surface,
+    "--ckui-primary": value.primary,
+    "--ckui-text": value.text,
+    "--ckui-muted": value.mutedText,
+    "--ckui-border": value.border,
+    "--ckui-error": value.error,
+    "--ckui-incoming": value.incomingBubble,
+    "--ckui-outgoing": value.outgoingBubble,
+    "--ckui-outgoing-text": value.outgoingText,
+    "--ckui-radius": value.radius,
+    "--ckui-avatar-size": value.avatarSize,
+    "--ckui-font": value.fontFamily,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("ckui-theme", className), style: variables, children }) });
+}
+function useConvoKitTheme() {
+  return react.useContext(ThemeContext);
+}
+
+exports.Conversation = Conversation;
+exports.ConversationList = ConversationList;
+exports.ConversationListView = ConversationListView;
+exports.ConversationView = ConversationView;
+exports.ConvoKitAvatar = ConvoKitAvatar;
+exports.ConvoKitThemeProvider = ConvoKitThemeProvider;
+exports.MessageListView = MessageListView;
+exports.applyConversationFilter = applyConversationFilter;
+exports.createConvoKitUiClient = createConvoKitUiClient;
+exports.defaultConvoKitTheme = defaultConvoKitTheme;
+exports.defaultReadersResolver = defaultReadersResolver;
+exports.formatFileSize = formatFileSize;
+exports.matchesConversation = matchesConversation;
+exports.mergeConversations = mergeConversations;
+exports.mergeMessages = mergeMessages;
+exports.readerIdsFor = readerIdsFor;
+exports.useConversation = useConversation;
+exports.useConversationList = useConversationList;
+exports.useConvoKitTheme = useConvoKitTheme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map