@adatechnology/conversations-ui 0.4.2 → 0.5.0

package/dist/participant/index.js

@@ -0,0 +1,1448 @@
+import {
+  MessageText
+} from "../chunk-WSFGNR5R.js";
+import {
+  StatusTicks,
+  channelCapabilityFor,
+  formatFileSize,
+  formatTimestamp,
+  isSameDay
+} from "../chunk-RJMSM3YA.js";
+import "../chunk-CBYEHPX6.js";
+
+// src/participant/ParticipantConversationsScreen.tsx
+import { useMemo as useMemo4, useReducer as useReducer2, useRef as useRef7, useState as useState7 } from "react";
+
+// src/participant/participantLabels.ts
+var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
+  inboxTitle: "Conversations",
+  sectionAwaiting: "Waiting for your reply",
+  sectionClosed: "Closed",
+  sectionOther: "Other",
+  filterAll: "All",
+  filtersGroup: "Filter by subject",
+  emptyInbox: "No conversations yet",
+  unreadCount: "{count} unread",
+  back: "Back",
+  openSubject: "Open subject",
+  me: "Me",
+  newMessages: "New messages",
+  loadOlder: "Load older messages",
+  closedNotice: "This conversation is closed",
+  messageInputLabel: "Message",
+  messageInputPlaceholder: "Write a message\u2026",
+  send: "Send",
+  attach: "Attach",
+  attachmentsList: "Selected attachments",
+  removeAttachment: "Remove attachment",
+  attachmentTooLarge: "Attachment too large",
+  attachmentTypeNotAccepted: "File type not accepted",
+  quickRepliesGroup: "Quick replies",
+  downloadAttachment: "Download",
+  statusSending: "Sending",
+  statusQueued: "Queued \u2014 sends when back online",
+  statusSent: "Sent",
+  statusDelivered: "Delivered",
+  statusRead: "Read",
+  statusFailed: "Failed \u2014 tap to retry",
+  statusFailedShort: "Failed",
+  retry: "Retry",
+  discard: "Discard",
+  edit: "Edit",
+  notFound: "Conversation not found",
+  loading: "Loading\u2026",
+  loadError: "Could not load. Check your connection and try again.",
+  loadMore: "Load more"
+};
+function formatParticipantLabel(template, count) {
+  return template.replace("{count}", String(count));
+}
+
+// src/participant/participantLoadView.ts
+function resolveLoadView({ status, hasItems }) {
+  return {
+    isLoading: (status === "idle" || status === "loading") && !hasItems,
+    hasError: status === "error",
+    isEmpty: status === "ready" && !hasItems
+  };
+}
+
+// src/participant/ParticipantLoadState.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ParticipantLoadError({ labels, onRetry }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cv-p-error", role: "alert", children: [
+    /* @__PURE__ */ jsx("p", { className: "cv-p-error__message", children: labels.loadError }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "cv-p-button", onClick: onRetry, children: labels.retry })
+  ] });
+}
+function ParticipantLoading({ labels }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cv-p-loading", children: [
+    /* @__PURE__ */ jsx("span", { className: "cv-p-skeleton", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "cv-p-skeleton", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "cv-p-sr-only", children: labels.loading })
+  ] });
+}
+
+// src/participant/ParticipantInbox.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ALL_FILTER = "all";
+function formatRowTime(iso, locale) {
+  const date = new Date(iso);
+  if (isSameDay(date, /* @__PURE__ */ new Date())) return formatTimestamp(iso);
+  return date.toLocaleDateString(locale, { day: "2-digit", month: "2-digit" });
+}
+function sectionTitle(section, props) {
+  if (section.key === "awaiting") return props.labels.sectionAwaiting;
+  if (section.key === "closed") return props.labels.sectionClosed;
+  if (section.key === "other") return props.labels.sectionOther;
+  return props.subjectGroups.find((group) => group.subjectType === section.key)?.label ?? section.key;
+}
+function Filters({ filters, active, labels, onChange }) {
+  return /* @__PURE__ */ jsx2("div", { className: "cv-p-filters", role: "group", "aria-label": labels.filtersGroup, children: filters.map((filter) => /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-chip",
+      "aria-pressed": filter.subjectType === active,
+      onClick: () => onChange(filter.subjectType),
+      children: [
+        filter.subjectType === ALL_FILTER ? labels.filterAll : filter.label,
+        filter.unreadCount > 0 ? /* @__PURE__ */ jsx2("b", { className: "cv-p-chip__count", children: filter.unreadCount }) : null
+      ]
+    },
+    filter.subjectType
+  )) });
+}
+function Row({ conversation, group, labels, locale, onSelect }) {
+  const kind = group?.label ?? conversation.subjectType;
+  const className = conversation.awaitingParticipant ? "cv-p-row cv-p-row--awaiting" : "cv-p-row";
+  const { subjectType, subjectId } = conversation;
+  return /* @__PURE__ */ jsxs2("button", { type: "button", className, onClick: () => onSelect({ subjectType, subjectId }), children: [
+    /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon", "aria-hidden": "true", children: group?.icon ?? kind.slice(0, 2) }),
+    /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__body", children: [
+      /* @__PURE__ */ jsx2("span", { className: "cv-p-row__kind", children: kind }),
+      /* @__PURE__ */ jsx2("span", { className: "cv-p-row__title", children: conversation.subjectLabel }),
+      conversation.lastMessagePreview ? /* @__PURE__ */ jsx2("span", { className: "cv-p-row__preview", children: conversation.lastMessagePreview }) : null
+    ] }),
+    /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__meta", children: [
+      conversation.lastMessageAt ? /* @__PURE__ */ jsx2("span", { children: formatRowTime(conversation.lastMessageAt, locale) }) : null,
+      conversation.unreadCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__unread", children: [
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: conversation.unreadCount }),
+        /* @__PURE__ */ jsx2("span", { className: "cv-p-sr-only", children: formatParticipantLabel(labels.unreadCount, conversation.unreadCount) })
+      ] }) : null
+    ] })
+  ] });
+}
+function SectionHeading({ title, count }) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("span", { className: "cv-p-section__title", children: title }),
+    /* @__PURE__ */ jsx2("span", { className: "cv-p-section__count", children: count })
+  ] });
+}
+function Section({ section, props }) {
+  const rows = section.conversations.map((conversation) => /* @__PURE__ */ jsx2(
+    Row,
+    {
+      conversation,
+      group: props.subjectGroups.find((group) => group.subjectType === conversation.subjectType),
+      labels: props.labels,
+      locale: props.locale,
+      onSelect: props.onSelect
+    },
+    `${conversation.subjectType}:${conversation.subjectId}`
+  ));
+  const heading = /* @__PURE__ */ jsx2(SectionHeading, { title: sectionTitle(section, props), count: section.conversations.length });
+  if (section.key === "closed") {
+    return /* @__PURE__ */ jsxs2("details", { className: "cv-p-section cv-p-section--closed", children: [
+      /* @__PURE__ */ jsx2("summary", { className: "cv-p-section__heading", children: heading }),
+      rows
+    ] });
+  }
+  const modifier = section.key === "awaiting" ? " cv-p-section--awaiting" : "";
+  return /* @__PURE__ */ jsxs2("section", { className: `cv-p-section${modifier}`, children: [
+    /* @__PURE__ */ jsx2("h3", { className: "cv-p-section__heading", children: heading }),
+    rows
+  ] });
+}
+function ParticipantInbox(props) {
+  const { view, labels, filter, onFilterChange } = props;
+  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 });
+  return /* @__PURE__ */ jsxs2("div", { className: "cv-p cv-p-inbox", "aria-busy": loadView.isLoading, children: [
+    /* @__PURE__ */ jsx2("h2", { className: "cv-p-inbox__title", children: labels.inboxTitle }),
+    view.showFilters ? /* @__PURE__ */ jsx2(Filters, { filters: view.filters, active: filter, labels, onChange: onFilterChange }) : null,
+    loadView.isLoading ? /* @__PURE__ */ jsx2(ParticipantLoading, { labels }) : null,
+    loadView.hasError ? /* @__PURE__ */ jsx2(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+    loadView.isEmpty ? /* @__PURE__ */ jsx2("p", { className: "cv-p-empty", children: labels.emptyInbox }) : null,
+    view.sections.map((section) => /* @__PURE__ */ jsx2(Section, { section, props }, section.key)),
+    props.hasMore ? /* @__PURE__ */ jsx2("button", { type: "button", className: "cv-p-button cv-p-inbox__more", onClick: props.loadMore, children: labels.loadMore }) : null
+  ] });
+}
+
+// src/participant/ParticipantThreadScreen.tsx
+import { useEffect as useEffect7, useMemo as useMemo3, useState as useState6 } from "react";
+
+// src/participant/ParticipantComposer.tsx
+import { useRef, useState } from "react";
+
+// src/participant/participantFileValidation.ts
+function matchesAcceptedType(mimeType, acceptedTypes) {
+  return acceptedTypes.some(
+    (accepted) => accepted.endsWith("/*") ? mimeType.startsWith(accepted.slice(0, -1)) : mimeType === accepted
+  );
+}
+function rejectionOf(file, params) {
+  if (params.acceptedTypes && !matchesAcceptedType(file.type, params.acceptedTypes)) return "typeNotAccepted";
+  if (file.size > params.maxBytes) return "tooLarge";
+  return void 0;
+}
+function reduceFilesSelection(params) {
+  const files = [...params.current];
+  const rejected = [];
+  for (const file of params.incoming) {
+    const reason = rejectionOf(file, params);
+    if (reason === void 0) files.push(file);
+    else rejected.push({ file, reason });
+  }
+  return { files, rejected };
+}
+function maxBytesForChannel(channel = "app") {
+  return channelCapabilityFor(channel).attachments.maxBytes;
+}
+
+// src/participant/participantQuickReply.ts
+function applyQuickReply(currentText, replyText) {
+  if (replyText === "") return currentText;
+  if (currentText.trim() === "") return replyText;
+  return /\s$/.test(currentText) ? `${currentText}${replyText}` : `${currentText} ${replyText}`;
+}
+
+// src/participant/ParticipantComposer.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function QuickReplyStrip({ quickReplies, labels, onPick }) {
+  return /* @__PURE__ */ jsx3("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx3("button", { type: "button", className: "cv-p-chip", onClick: () => onPick(quickReply.body), children: quickReply.title }, quickReply.id)) });
+}
+function FileList({ files, labels, onRemove }) {
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx3("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs3("li", { className: "cv-p-files__item", children: [
+    /* @__PURE__ */ jsx3("span", { className: "cv-p-files__name", children: file.name }),
+    /* @__PURE__ */ jsx3("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
+    /* @__PURE__ */ jsxs3("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, onClick: () => onRemove(file), children: [
+      /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\xD7" }),
+      /* @__PURE__ */ jsx3("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
+    ] })
+  ] }, `${file.name}-${file.size}-${index}`)) });
+}
+function rejectionText(rejection, labels) {
+  return rejection === "tooLarge" ? labels.attachmentTooLarge : labels.attachmentTypeNotAccepted;
+}
+function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ref: fileInputRef,
+        className: "cv-p-composer__file-input",
+        type: "file",
+        multiple: true,
+        hidden: true,
+        accept: acceptedTypes?.join(","),
+        onChange: onChosen
+      }
+    ),
+    /* @__PURE__ */ jsxs3("button", { type: "button", className: "cv-p-button", disabled, onClick: () => fileInputRef.current?.click(), children: [
+      /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\uFF0B" }),
+      /* @__PURE__ */ jsx3("span", { className: "cv-p-sr-only", children: labels.attach })
+    ] })
+  ] });
+}
+function useFileSelection(props) {
+  const [rejection, setRejection] = useState(void 0);
+  const { files, onFilesChange, channel } = props;
+  const maxBytes = maxBytesForChannel(channel);
+  function handleFilesChosen(event) {
+    const chosen = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    const result = reduceFilesSelection({ current: files, incoming: chosen, maxBytes, acceptedTypes: props.acceptedTypes });
+    setRejection(result.rejected[0]?.reason);
+    if (result.files.length !== files.length) onFilesChange(result.files);
+  }
+  function handleRemoveFile(file) {
+    setRejection(void 0);
+    onFilesChange(files.filter((current) => current !== file));
+  }
+  return { rejection, handleFilesChosen, handleRemoveFile };
+}
+function ParticipantComposer(props) {
+  const { value, onChange, files, onSend, labels, channel = "app", disabled = false, isSending = false } = props;
+  const { rejection, handleFilesChosen, handleRemoveFile } = useFileSelection(props);
+  const canSend = !disabled && !isSending && (value.trim().length > 0 || files.length > 0);
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (canSend) onSend();
+  }
+  return /* @__PURE__ */ jsxs3("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
+    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx3(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
+    /* @__PURE__ */ jsx3(FileList, { files, labels, onRemove: handleRemoveFile }),
+    rejection ? /* @__PURE__ */ jsx3("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
+    /* @__PURE__ */ jsxs3("div", { className: "cv-p-composer__row", children: [
+      channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx3(AttachControl, { labels, disabled, acceptedTypes: props.acceptedTypes, onChosen: handleFilesChosen }) : null,
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          className: "cv-p-composer__input",
+          "aria-label": labels.messageInputLabel,
+          placeholder: labels.messageInputPlaceholder,
+          rows: 1,
+          value,
+          maxLength: props.maxLength,
+          disabled,
+          onChange: (event) => onChange(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs3("button", { type: "submit", className: "cv-p-button cv-p-button--primary", disabled: !canSend, children: [
+        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u27A4" }),
+        /* @__PURE__ */ jsx3("span", { className: "cv-p-sr-only", children: labels.send })
+      ] })
+    ] })
+  ] });
+}
+
+// src/participant/participantBubbleActions.ts
+function bindPendingActions(actions, clientMessageId) {
+  const { retryHost } = actions;
+  return {
+    retryLocal: () => actions.retryLocal(clientMessageId),
+    discardLocal: () => actions.discardLocal(clientMessageId),
+    editLocal: () => actions.editLocal(clientMessageId),
+    ...retryHost ? { retryHost: () => retryHost(clientMessageId) } : {}
+  };
+}
+function resolveParticipantBubbleActions(item, handlers) {
+  if (item.kind === "server" || item.displayState !== "failed") return {};
+  if (item.origin === "host") return handlers.retryHost ? { onRetry: handlers.retryHost } : {};
+  return { onRetry: handlers.retryLocal, onDiscard: handlers.discardLocal, onEdit: handlers.editLocal };
+}
+
+// src/participant/ParticipantAttachmentItem.tsx
+import { useEffect, useState as useState2 } from "react";
+
+// src/participant/participantAttachmentUrl.ts
+var SAFE_ATTACHMENT_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "blob:"]);
+function isSafeAttachmentUrl(url) {
+  try {
+    return SAFE_ATTACHMENT_PROTOCOLS.has(new URL(url.trim()).protocol);
+  } catch {
+    return false;
+  }
+}
+
+// src/participant/ParticipantAttachmentItem.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function useAttachmentUrl(attachment, resolveAttachmentUrl) {
+  const [url, setUrl] = useState2(void 0);
+  const disposition = attachment.kind === "document" ? "attachment" : "inline";
+  useEffect(() => {
+    let isCurrent = true;
+    resolveAttachmentUrl(attachment, disposition).then(
+      (resolved) => {
+        if (isCurrent) setUrl(isSafeAttachmentUrl(resolved) ? resolved.trim() : void 0);
+      },
+      () => {
+        if (isCurrent) setUrl(void 0);
+      }
+    );
+    return () => {
+      isCurrent = false;
+    };
+  }, [attachment, disposition, resolveAttachmentUrl]);
+  return url;
+}
+function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }) {
+  const url = useAttachmentUrl(attachment, resolveAttachmentUrl);
+  if (attachment.kind === "image") {
+    return /* @__PURE__ */ jsxs4("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
+      url ? /* @__PURE__ */ jsx4("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
+      /* @__PURE__ */ jsx4("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
+    ] });
+  }
+  if (attachment.kind === "audio") {
+    return /* @__PURE__ */ jsxs4("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
+      /* @__PURE__ */ jsx4("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+      /* @__PURE__ */ jsx4("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "a",
+    {
+      className: "cv-p-attachment cv-p-attachment--document",
+      href: url,
+      download: attachment.filename,
+      "aria-label": `${labels.downloadAttachment}: ${attachment.filename}`,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+        /* @__PURE__ */ jsx4("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
+      ]
+    }
+  );
+}
+
+// src/participant/participantMessages.ts
+function isSameSubject(left, right) {
+  return left.subjectType === right.subjectType && left.subjectId === right.subjectId;
+}
+function createdAtOf(item) {
+  return Date.parse(item.kind === "server" ? item.message.createdAt : item.pending.createdAt);
+}
+function mergeParticipantMessages(params) {
+  const { serverMessages, hostPending, localPending, subject } = params;
+  const knownClientIds = /* @__PURE__ */ new Set();
+  for (const message of serverMessages) {
+    if (message.clientMessageId) knownClientIds.add(message.clientMessageId);
+  }
+  const items = serverMessages.map((message) => ({ kind: "server", message }));
+  for (const pending of hostPending) {
+    if (!isSameSubject(pending.subject, subject) || knownClientIds.has(pending.clientMessageId)) continue;
+    knownClientIds.add(pending.clientMessageId);
+    items.push({ kind: "pending", pending, origin: "host", displayState: pending.state });
+  }
+  for (const pending of localPending) {
+    if (!isSameSubject(pending.subject, subject) || knownClientIds.has(pending.clientMessageId)) continue;
+    items.push({ kind: "pending", pending, origin: "local", displayState: pending.state });
+  }
+  return items.sort((left, right) => createdAtOf(left) - createdAtOf(right));
+}
+function isOwnMessage(message) {
+  return message.direction === "inbound";
+}
+function resolveOwnMessageStatus(params) {
+  const { displayState, serverStatus, confirmsRead } = params;
+  if (displayState) return displayState;
+  if (serverStatus === void 0) return "sent";
+  if (serverStatus === "failed" || serverStatus === "bounced") return "failed";
+  if (serverStatus === "read") return confirmsRead ? "read" : "delivered";
+  return serverStatus;
+}
+
+// src/participant/ParticipantMessageBubble.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function describeItem(item) {
+  if (item.kind === "server") {
+    const { message } = item;
+    return {
+      isMine: isOwnMessage(message),
+      authorName: message.authorName ?? void 0,
+      text: message.text ?? void 0,
+      createdAt: message.createdAt,
+      attachments: message.attachments,
+      pendingFilenames: [],
+      serverStatus: message.status
+    };
+  }
+  return {
+    isMine: true,
+    text: item.pending.text,
+    createdAt: item.pending.createdAt,
+    attachments: [],
+    pendingFilenames: (item.pending.attachments ?? []).map((attachment) => attachment.filename),
+    displayState: item.displayState
+  };
+}
+function statusText(status, labels) {
+  const byStatus = {
+    sending: labels.statusSending,
+    queued: labels.statusQueued,
+    sent: labels.statusSent,
+    delivered: labels.statusDelivered,
+    read: labels.statusRead,
+    failed: labels.statusFailed
+  };
+  return byStatus[status];
+}
+function OwnStatus({ status, labels, onRetry }) {
+  const ticksStatus = status === "sending" ? "queued" : status;
+  const isVisibleText = status === "sending" || status === "queued" || status === "failed";
+  if (status === "failed" && onRetry) {
+    return /* @__PURE__ */ jsxs5("button", { type: "button", className: "cv-p-bubble__retry", onClick: onRetry, children: [
+      /* @__PURE__ */ jsx5(StatusTicks, { status: "failed" }),
+      /* @__PURE__ */ jsx5("span", { children: labels.statusFailed })
+    ] });
+  }
+  const text = status === "failed" ? labels.statusFailedShort : statusText(status, labels);
+  return /* @__PURE__ */ jsxs5("span", { className: "cv-p-bubble__status", children: [
+    /* @__PURE__ */ jsx5(StatusTicks, { status: ticksStatus }),
+    /* @__PURE__ */ jsx5("span", { className: isVisibleText ? "cv-p-bubble__status-text" : "cv-p-sr-only", children: text })
+  ] });
+}
+function FailedActions({ labels, onDiscard, onEdit }) {
+  if (!onDiscard && !onEdit) return null;
+  return /* @__PURE__ */ jsxs5("span", { className: "cv-p-bubble__actions", children: [
+    onEdit ? /* @__PURE__ */ jsx5("button", { type: "button", className: "cv-p-bubble__action", onClick: onEdit, children: labels.edit }) : null,
+    onDiscard ? /* @__PURE__ */ jsx5("button", { type: "button", className: "cv-p-bubble__action", onClick: onDiscard, children: labels.discard }) : null
+  ] });
+}
+function toTextPayload(text, createdAt, isMine) {
+  return {
+    id: createdAt,
+    type: "text",
+    content: text,
+    direction: isMine ? "inbound" : "outbound",
+    sender: isMine ? "customer" : "agent",
+    timestamp: createdAt
+  };
+}
+function ParticipantMessageBubble({
+  item,
+  labels,
+  confirmsRead,
+  resolveAttachmentUrl,
+  onRetry,
+  onDiscard,
+  onEdit
+}) {
+  const content = describeItem(item);
+  const { isMine } = content;
+  const ownStatus = isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
+  return /* @__PURE__ */ jsxs5("div", { className: isMine ? "cv-p-bubble cv-p-bubble--mine" : "cv-p-bubble", children: [
+    isMine ? /* @__PURE__ */ jsx5("span", { className: "cv-p-sr-only", children: labels.me }) : content.authorName ? /* @__PURE__ */ jsx5("span", { className: "cv-p-bubble__author", children: content.authorName }) : null,
+    content.text ? /* @__PURE__ */ jsx5(MessageText, { message: toTextPayload(content.text, content.createdAt, isMine), copyOnClick: false }) : null,
+    content.attachments.map((attachment) => /* @__PURE__ */ jsx5(
+      ParticipantAttachmentItem,
+      {
+        attachment,
+        resolveAttachmentUrl,
+        labels
+      },
+      attachment.id
+    )),
+    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx5("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
+    /* @__PURE__ */ jsxs5("span", { className: "cv-p-bubble__meta", children: [
+      /* @__PURE__ */ jsx5("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
+      ownStatus ? /* @__PURE__ */ jsx5(OwnStatus, { status: ownStatus, labels, onRetry }) : null
+    ] }),
+    ownStatus === "failed" ? /* @__PURE__ */ jsx5(FailedActions, { labels, onDiscard, onEdit }) : null
+  ] });
+}
+
+// src/participant/ParticipantThread.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function createdAtOf2(item) {
+  return item.kind === "server" ? item.message.createdAt : item.pending.createdAt;
+}
+function keyOf(item) {
+  return item.kind === "server" ? item.message.id : `pending:${item.pending.clientMessageId}`;
+}
+function resolveActions(item, pendingActions) {
+  if (!pendingActions || item.kind === "server") return {};
+  return resolveParticipantBubbleActions(item, bindPendingActions(pendingActions, item.pending.clientMessageId));
+}
+function Header({ props }) {
+  const { conversation, labels, onBack, onOpenSubject } = props;
+  const { subjectType, subjectId } = conversation;
+  return /* @__PURE__ */ jsxs6("header", { className: "cv-p-thread__header", children: [
+    onBack ? /* @__PURE__ */ jsxs6("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2039" }),
+      /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.back })
+    ] }) : null,
+    /* @__PURE__ */ jsx6("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "cv-p-thread__title-button",
+        "aria-label": `${labels.openSubject}: ${conversation.subjectLabel}`,
+        onClick: () => onOpenSubject({ subjectType, subjectId }),
+        children: conversation.subjectLabel
+      }
+    ) : conversation.subjectLabel })
+  ] });
+}
+function Timeline({ props }) {
+  const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props;
+  const confirmsRead = channelCapabilityFor(props.channel ?? "app").confirmsRead;
+  const nodes = [];
+  let previousDay;
+  for (const item of items) {
+    const day = new Date(createdAtOf2(item));
+    if (previousDay === void 0 || !isSameDay(previousDay, day)) {
+      nodes.push(
+        /* @__PURE__ */ jsx6("div", { className: "cv-p-day", role: "separator", children: day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" }) }, `day:${keyOf(item)}`)
+      );
+    }
+    previousDay = day;
+    nodes.push(
+      /* @__PURE__ */ jsx6(
+        ParticipantMessageBubble,
+        {
+          item,
+          labels,
+          confirmsRead,
+          resolveAttachmentUrl,
+          ...resolveActions(item, pendingActions)
+        },
+        keyOf(item)
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx6("div", { className: "cv-p-thread__messages", children: nodes });
+}
+function Footer({ props }) {
+  const { conversation, labels, draft } = props;
+  if (conversation.status === "closed") {
+    return /* @__PURE__ */ jsx6("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
+  }
+  return /* @__PURE__ */ jsx6(
+    ParticipantComposer,
+    {
+      value: draft.value,
+      onChange: draft.onChange,
+      files: draft.files,
+      onFilesChange: draft.onFilesChange,
+      onSend: props.onSend,
+      labels,
+      channel: props.channel,
+      isSending: props.isSending,
+      maxLength: props.maxLength,
+      acceptedTypes: props.acceptedTypes,
+      quickReplies: props.quickReplies
+    }
+  );
+}
+function ParticipantThread(props) {
+  const { conversation, labels, hasMore, onLoadOlder, renderSubjectCard } = props;
+  const subjectCard = renderSubjectCard?.(conversation);
+  const loadView = resolveLoadView({ status: props.status, hasItems: props.items.length > 0 });
+  return /* @__PURE__ */ jsxs6("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, children: [
+    /* @__PURE__ */ jsx6(Header, { props }),
+    subjectCard ? /* @__PURE__ */ jsx6("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, children: [
+      loadView.isLoading ? /* @__PURE__ */ jsx6(ParticipantLoading, { labels }) : null,
+      loadView.hasError ? /* @__PURE__ */ jsx6(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+      hasMore && onLoadOlder ? /* @__PURE__ */ jsx6("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
+      /* @__PURE__ */ jsx6(Timeline, { props })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: props.newMessagesCount > 0 ? labels.newMessages : "" }),
+    /* @__PURE__ */ jsx6(Footer, { props })
+  ] });
+}
+
+// src/participant/bindAttachmentUrlResolver.ts
+function bindAttachmentUrlResolver(api) {
+  return (attachment, disposition) => api.resolveAttachmentUrl(attachment, disposition);
+}
+
+// src/participant/participantSendController.ts
+function createParticipantSendEntry(params) {
+  const { clientMessageId, subject, content, createdAt, state = "sending" } = params;
+  return {
+    clientMessageId,
+    subject,
+    ...content.text ? { text: content.text } : {},
+    files: params.files ?? content.files ?? [],
+    createdAt,
+    state
+  };
+}
+function setState(entries, clientMessageId, allowedFrom, next) {
+  const target = entries.find((item) => item.clientMessageId === clientMessageId);
+  if (!target || !allowedFrom.includes(target.state) || target.state === next) return entries;
+  return entries.map((item) => item === target ? { ...item, state: next } : item);
+}
+function markSent(entries, clientMessageId, message) {
+  const target = entries.find((item) => item.clientMessageId === clientMessageId);
+  if (!target || target.state === "sent") return entries;
+  return entries.map((item) => item === target ? { ...item, state: "sent", sentMessage: message } : item);
+}
+function remove(entries, shouldRemove) {
+  const kept = entries.filter((item) => !shouldRemove(item));
+  return kept.length === entries.length ? entries : kept;
+}
+function participantSendReducer(entries, action) {
+  switch (action.type) {
+    case "started":
+      return [...entries.filter((item) => item.clientMessageId !== action.entry.clientMessageId), action.entry];
+    case "discarded":
+      return remove(entries, (item) => item.clientMessageId === action.clientMessageId);
+    case "sent":
+      return markSent(entries, action.clientMessageId, action.message);
+    case "queued":
+      return setState(entries, action.clientMessageId, ["sending"], "queued");
+    case "failed":
+      return setState(entries, action.clientMessageId, ["sending", "queued"], "failed");
+    case "retried":
+      return setState(entries, action.clientMessageId, ["failed"], "sending");
+    case "reflected":
+      return remove(entries, (item) => action.knownClientMessageIds.has(item.clientMessageId));
+  }
+}
+function findFailedEntry(entries, clientMessageId) {
+  return entries.find((item) => item.clientMessageId === clientMessageId && item.state === "failed");
+}
+function hasSendingEntry(entries) {
+  return entries.some((item) => item.state === "sending");
+}
+function collectKnownClientMessageIds(params) {
+  const known = /* @__PURE__ */ new Set();
+  for (const message of params.messages) {
+    if (message.clientMessageId) known.add(message.clientMessageId);
+  }
+  for (const pending of params.hostPending) known.add(pending.clientMessageId);
+  return known;
+}
+function toLocalPending(entries) {
+  return entries.map((item) => {
+    const attachments = item.files.map((file) => ({ filename: file.name, mimeType: file.type, sizeBytes: file.size }));
+    return {
+      clientMessageId: item.clientMessageId,
+      subject: item.subject,
+      createdAt: item.createdAt,
+      state: item.state,
+      ...item.text ? { text: item.text } : {},
+      ...attachments.length > 0 ? { attachments } : {}
+    };
+  });
+}
+function appendEntryToDraft(entry, current) {
+  const text = [entry.text, current.text].filter((part) => Boolean(part)).join("\n");
+  return { text, files: [...entry.files, ...current.files] };
+}
+
+// src/participant/useParticipantDraft.ts
+import { useState as useState3 } from "react";
+
+// src/participant/participantDrafts.ts
+var EMPTY_PARTICIPANT_DRAFT = { text: "", files: [] };
+function draftKey(subject) {
+  return `${subject.subjectType}:${subject.subjectId}`;
+}
+function getDraft(drafts, subject) {
+  return drafts.get(draftKey(subject)) ?? EMPTY_PARTICIPANT_DRAFT;
+}
+function setDraft(drafts, subject, draft) {
+  return new Map(drafts).set(draftKey(subject), draft);
+}
+function clearDraft(drafts, subject) {
+  const next = new Map(drafts);
+  next.delete(draftKey(subject));
+  return next;
+}
+function takeDraftForSend(drafts, subject) {
+  const draft = getDraft(drafts, subject);
+  const text = draft.text.trim();
+  if (!text && draft.files.length === 0) return { drafts };
+  return {
+    drafts: clearDraft(drafts, subject),
+    content: { ...text ? { text } : {}, ...draft.files.length > 0 ? { files: draft.files } : {} }
+  };
+}
+
+// src/participant/useParticipantDraft.ts
+function useParticipantDraft(draftsRef, subject) {
+  const [draft, setDraftState] = useState3(() => getDraft(draftsRef.current, subject));
+  function replaceDrafts(next) {
+    draftsRef.current = next;
+    setDraftState(getDraft(next, subject));
+  }
+  function update(change) {
+    replaceDrafts(setDraft(draftsRef.current, subject, { ...getDraft(draftsRef.current, subject), ...change }));
+  }
+  function takeForSend() {
+    const taken = takeDraftForSend(draftsRef.current, subject);
+    if (taken.content) replaceDrafts(taken.drafts);
+    return taken.content;
+  }
+  function restoreFromEntry(entry) {
+    update(appendEntryToDraft(entry, getDraft(draftsRef.current, subject)));
+  }
+  return { draft, setText: (text) => update({ text }), setFiles: (files) => update({ files }), takeForSend, restoreFromEntry };
+}
+
+// src/participant/useParticipantConversationView.ts
+import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
+
+// src/participant/participantSendStates.ts
+var NO_ENTRIES = [];
+function selectSendEntries(states, subject) {
+  return states.get(draftKey(subject)) ?? NO_ENTRIES;
+}
+function participantSendStatesReducer(states, { subject, action }) {
+  const current = selectSendEntries(states, subject);
+  const next = participantSendReducer(current, action);
+  if (next === current) return states;
+  const copy = new Map(states);
+  if (next.length === 0) copy.delete(draftKey(subject));
+  else copy.set(draftKey(subject), next);
+  return copy;
+}
+
+// src/participant/useParticipantThread.ts
+import { useCallback as useCallback2, useEffect as useEffect5, useMemo, useReducer, useRef as useRef4 } from "react";
+
+// src/participant/participantThreadState.ts
+var INITIAL_PARTICIPANT_THREAD_STATE = {
+  status: "idle",
+  messages: [],
+  hasMore: false
+};
+function unionById(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) => Date.parse(left.createdAt) - Date.parse(right.createdAt));
+}
+function mergeMessages(state, incoming, hasMore) {
+  const messages = unionById(state.messages, incoming);
+  const { error: _error, ...rest } = state;
+  return { ...rest, status: "ready", messages, hasMore };
+}
+function participantThreadReducer(state, action) {
+  switch (action.type) {
+    case "reset":
+      return INITIAL_PARTICIPANT_THREAD_STATE;
+    case "started":
+      return state.status === "ready" ? state : { ...state, status: "loading" };
+    case "loaded":
+      return mergeMessages(state, action.messages, state.messages.length === 0 ? action.hasMore : state.hasMore);
+    case "olderLoaded":
+      return mergeMessages(state, action.messages, action.hasMore);
+    case "failed":
+      return { ...state, status: "error", error: action.error };
+    case "sendConfirmed":
+      return { ...state, messages: unionById(state.messages, [action.message]) };
+  }
+}
+
+// src/participant/useParticipantMarkRead.ts
+import { useEffect as useEffect3 } from "react";
+
+// src/participant/shouldMarkRead.ts
+function shouldMarkParticipantRead(params) {
+  const { selected, subject, visibilityState, unreadCount } = params;
+  if (!selected) return false;
+  if (selected.subjectType !== subject.subjectType || selected.subjectId !== subject.subjectId) return false;
+  if (visibilityState !== "visible") return false;
+  return unreadCount > 0;
+}
+
+// src/participant/useDocumentVisibility.ts
+import { useEffect as useEffect2, useState as useState4 } from "react";
+function useDocumentVisibility() {
+  const [visibilityState, setVisibilityState] = useState4(
+    () => typeof document === "undefined" ? "visible" : document.visibilityState
+  );
+  useEffect2(() => {
+    function handleVisibilityChange() {
+      setVisibilityState(document.visibilityState);
+    }
+    handleVisibilityChange();
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, []);
+  return visibilityState;
+}
+
+// src/participant/useParticipantMarkRead.ts
+function useParticipantMarkRead(params) {
+  const { apiRef, subject, unreadCount, messageCount, onMarkedRead } = params;
+  const visibilityState = useDocumentVisibility();
+  useEffect3(() => {
+    if (!shouldMarkParticipantRead({ selected: subject, subject, visibilityState, unreadCount })) return;
+    void apiRef.current.markRead(subject).then(() => onMarkedRead?.(subject), () => void 0);
+  }, [apiRef, subject, visibilityState, unreadCount, messageCount, onMarkedRead]);
+}
+
+// src/participant/useParticipantRevalidation.ts
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+function useParticipantRevalidation(api, onRevalidate) {
+  const handlerRef = useRef2(onRevalidate);
+  handlerRef.current = onRevalidate;
+  useEffect4(() => {
+    function handleFocus() {
+      handlerRef.current();
+    }
+    if (api.subscribe) {
+      const unsubscribe = api.subscribe((event) => handlerRef.current(event));
+      window.addEventListener("online", handleFocus);
+      return () => {
+        unsubscribe();
+        window.removeEventListener("online", handleFocus);
+      };
+    }
+    function handleVisibilityChange() {
+      if (document.visibilityState === "visible") handlerRef.current();
+    }
+    window.addEventListener("focus", handleFocus);
+    window.addEventListener("online", handleFocus);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+      window.removeEventListener("online", handleFocus);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [api]);
+}
+
+// src/participant/useParticipantSend.ts
+import { useCallback, useRef as useRef3 } from "react";
+function useParticipantSend(params) {
+  const { apiRef, subject, dispatchSend, onSentMessage } = params;
+  const entriesRef = useRef3(params.entries);
+  entriesRef.current = params.entries;
+  const deliver = useCallback(
+    async (entry) => {
+      const { clientMessageId } = entry;
+      try {
+        const result = await apiRef.current.sendMessage({
+          subject: entry.subject,
+          clientMessageId,
+          ...entry.text ? { text: entry.text } : {},
+          ...entry.files.length > 0 ? { files: entry.files } : {}
+        });
+        if (result.outcome === "sent") {
+          onSentMessage(result.message);
+          dispatchSend({ type: "sent", clientMessageId, message: result.message });
+          return "sent";
+        }
+        dispatchSend({ type: "queued", clientMessageId });
+        return "queued";
+      } catch {
+        dispatchSend({ type: "failed", clientMessageId });
+        return "failed";
+      }
+    },
+    [apiRef, dispatchSend, onSentMessage]
+  );
+  const send = useCallback(
+    async (content) => {
+      const entry = createParticipantSendEntry({
+        clientMessageId: crypto.randomUUID(),
+        subject,
+        content,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      dispatchSend({ type: "started", entry });
+      return deliver(entry);
+    },
+    [deliver, dispatchSend, subject]
+  );
+  const retry = useCallback(
+    async (clientMessageId) => {
+      const entry = findFailedEntry(entriesRef.current, clientMessageId);
+      if (!entry) return;
+      dispatchSend({ type: "retried", clientMessageId });
+      await deliver({ ...entry, state: "sending" });
+    },
+    [deliver, dispatchSend]
+  );
+  return { send, retry };
+}
+
+// src/participant/useParticipantThread.ts
+var THREAD_PAGE_SIZE = 30;
+function describeError(error) {
+  return error instanceof Error ? error.message : "unknown error";
+}
+function isForSubject(event, subject) {
+  if (!event || event.type === "inbox-changed") return true;
+  return event.subject.subjectType === subject.subjectType && event.subject.subjectId === subject.subjectId;
+}
+function useParticipantThread(params) {
+  const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [] } = params;
+  const { subjectType, subjectId } = subject;
+  const stableSubject = useMemo(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
+  const [state, dispatch] = useReducer(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
+  const apiRef = useRef4(api);
+  apiRef.current = api;
+  const activeSubjectKey = useRef4("");
+  const confirmsRead = channelCapabilityFor(channel).confirmsRead;
+  const refresh = useCallback2(async () => {
+    const requestKey = `${subjectType}:${subjectId}`;
+    dispatch({ type: "started" });
+    try {
+      const messages = await apiRef.current.fetchMessages(stableSubject, { limit: THREAD_PAGE_SIZE });
+      if (activeSubjectKey.current === requestKey) {
+        dispatch({ type: "loaded", messages, hasMore: messages.length >= THREAD_PAGE_SIZE });
+      }
+    } catch (error) {
+      if (activeSubjectKey.current === requestKey) dispatch({ type: "failed", error: describeError(error) });
+    }
+  }, [stableSubject, subjectType, subjectId]);
+  const oldestMessageId = state.messages[0]?.id;
+  const loadOlder = useCallback2(async () => {
+    if (!oldestMessageId) return;
+    const requestKey = `${subjectType}:${subjectId}`;
+    try {
+      const messages = await apiRef.current.fetchMessages(stableSubject, { before: oldestMessageId, limit: THREAD_PAGE_SIZE });
+      if (activeSubjectKey.current === requestKey) {
+        dispatch({ type: "olderLoaded", messages, hasMore: messages.length >= THREAD_PAGE_SIZE });
+      }
+    } catch (error) {
+      if (activeSubjectKey.current === requestKey) dispatch({ type: "failed", error: describeError(error) });
+    }
+  }, [stableSubject, subjectType, subjectId, oldestMessageId]);
+  const handleSentMessage = useCallback2((message) => dispatch({ type: "sendConfirmed", message }), []);
+  const sending = useParticipantSend({ apiRef, subject: stableSubject, entries: sendEntries, dispatchSend, onSentMessage: handleSentMessage });
+  useEffect5(() => {
+    activeSubjectKey.current = `${subjectType}:${subjectId}`;
+    dispatch({ type: "reset" });
+    void refresh();
+  }, [refresh, subjectType, subjectId]);
+  useParticipantRevalidation(api, (event) => {
+    if (isForSubject(event, stableSubject)) void refresh();
+  });
+  useEffect5(() => {
+    if (sendEntries.length === 0) return;
+    dispatchSend({ type: "reflected", knownClientMessageIds: collectKnownClientMessageIds({ messages: state.messages, hostPending }) });
+  }, [sendEntries, state.messages, hostPending, dispatchSend]);
+  useParticipantMarkRead({ apiRef, subject: stableSubject, unreadCount, messageCount: state.messages.length, onMarkedRead });
+  const localPending = useMemo(() => toLocalPending(sendEntries), [sendEntries]);
+  return { ...state, localPending, confirmsRead, refresh, loadOlder, ...sending };
+}
+
+// src/participant/useParticipantConversationView.ts
+function useParticipantConversationView(params) {
+  const { api, subject, conversation, pendingMessages, sendStates, dispatchSendStates } = params;
+  const { subjectType, subjectId } = subject;
+  const sendEntries = selectSendEntries(sendStates, subject);
+  const dispatchSend = useCallback3(
+    (action) => dispatchSendStates({ subject: { subjectType, subjectId }, action }),
+    [dispatchSendStates, subjectType, subjectId]
+  );
+  const thread = useParticipantThread({
+    api,
+    subject,
+    channel: params.channel,
+    unreadCount: conversation.unreadCount,
+    onMarkedRead: params.onMarkedRead,
+    sendEntries,
+    dispatchSend,
+    hostPending: pendingMessages
+  });
+  const items = useMemo2(
+    () => mergeParticipantMessages({
+      serverMessages: thread.messages,
+      hostPending: pendingMessages ?? [],
+      localPending: thread.localPending,
+      subject
+    }),
+    [thread.messages, thread.localPending, pendingMessages, subject]
+  );
+  return { thread, items, sendEntries, dispatchSend };
+}
+
+// src/participant/useParticipantThreadScroll.ts
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+
+// src/participant/participantNewMessages.ts
+function collectServerMessageIds(items) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (item.kind === "server") ids.add(item.message.id);
+  }
+  return ids;
+}
+function latestSeenTime(previousIds, items) {
+  let latest = Number.NEGATIVE_INFINITY;
+  for (const item of items) {
+    if (item.kind === "server" && previousIds.has(item.message.id)) latest = Math.max(latest, Date.parse(item.message.createdAt));
+  }
+  return latest;
+}
+function countNewIncomingMessages(previousIds, currentItems) {
+  const latestSeen = latestSeenTime(previousIds, currentItems);
+  return currentItems.filter(
+    (item) => item.kind === "server" && item.message.direction === "outbound" && !previousIds.has(item.message.id) && Date.parse(item.message.createdAt) > latestSeen
+  ).length;
+}
+
+// src/participant/useStickToBottom.ts
+import { useCallback as useCallback4, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
+
+// src/participant/participantScroll.ts
+var NEAR_BOTTOM_THRESHOLD_PX = 80;
+function shouldStickToBottom(params) {
+  const { scrollTop, clientHeight, scrollHeight, threshold } = params;
+  return scrollHeight - scrollTop - clientHeight <= threshold;
+}
+function scrollAnchorAfterPrepend(params) {
+  return params.previousScrollTop + (params.scrollHeight - params.previousScrollHeight);
+}
+function resolveScrollAction(params) {
+  const { firstKey, lastKey } = params;
+  if (firstKey === void 0 || lastKey === void 0) return "none";
+  if (!params.hasPositioned) return "bottom";
+  if (lastKey !== params.previousLastKey && params.wasNearBottom) return "bottom";
+  if (firstKey !== params.previousFirstKey) return "anchor";
+  return "none";
+}
+
+// src/participant/useStickToBottom.ts
+function useStickToBottom({ firstKey, lastKey }) {
+  const ref = useRef5(null);
+  const snapshot = useRef5({ hasPositioned: false, firstKey: void 0, lastKey: void 0, scrollTop: 0, scrollHeight: 0 });
+  const [isNearBottom, setIsNearBottom] = useState5(true);
+  const isNearBottomRef = useRef5(true);
+  const onScroll = useCallback4((event) => {
+    const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
+    const isNear = shouldStickToBottom({ scrollTop, clientHeight, scrollHeight, threshold: NEAR_BOTTOM_THRESHOLD_PX });
+    snapshot.current.scrollTop = scrollTop;
+    snapshot.current.scrollHeight = scrollHeight;
+    isNearBottomRef.current = isNear;
+    setIsNearBottom(isNear);
+  }, []);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    const previous = snapshot.current;
+    if (!element) return;
+    const action = resolveScrollAction({
+      hasPositioned: previous.hasPositioned,
+      previousFirstKey: previous.firstKey,
+      previousLastKey: previous.lastKey,
+      firstKey,
+      lastKey,
+      wasNearBottom: isNearBottomRef.current
+    });
+    if (action === "bottom") {
+      element.scrollTop = element.scrollHeight;
+      isNearBottomRef.current = true;
+      setIsNearBottom(true);
+    }
+    if (action === "anchor") {
+      element.scrollTop = scrollAnchorAfterPrepend({
+        previousScrollTop: previous.scrollTop,
+        previousScrollHeight: previous.scrollHeight,
+        scrollHeight: element.scrollHeight
+      });
+    }
+    snapshot.current = {
+      hasPositioned: previous.hasPositioned || action === "bottom",
+      firstKey,
+      lastKey,
+      scrollTop: element.scrollTop,
+      scrollHeight: element.scrollHeight
+    };
+  }, [firstKey, lastKey]);
+  return { scroll: { ref, onScroll }, isNearBottom };
+}
+
+// src/participant/useParticipantThreadScroll.ts
+function keyOf2(item) {
+  if (!item) return void 0;
+  return item.kind === "server" ? item.message.id : `pending:${item.pending.clientMessageId}`;
+}
+function useParticipantThreadScroll(items) {
+  const { scroll, isNearBottom } = useStickToBottom({ firstKey: keyOf2(items[0]), lastKey: keyOf2(items[items.length - 1]) });
+  const seenIds = useRef6(/* @__PURE__ */ new Set());
+  useEffect6(() => {
+    if (isNearBottom) seenIds.current = collectServerMessageIds(items);
+  }, [isNearBottom, items]);
+  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items) };
+}
+
+// src/participant/ParticipantThreadScreen.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function useOpenedConversation(api, subject, isNeeded) {
+  const [opened, setOpened] = useState6({ status: "idle" });
+  const { subjectType, subjectId } = subject;
+  const canOpen = api.openConversation !== void 0;
+  useEffect7(() => {
+    if (!isNeeded || !canOpen) return;
+    let isCurrent = true;
+    setOpened({ status: "loading" });
+    api.openConversation?.({ subjectType, subjectId }).then(
+      (conversation) => isCurrent && setOpened({ status: "found", conversation }),
+      () => isCurrent && setOpened({ status: "missing" })
+    );
+    return () => {
+      isCurrent = false;
+    };
+  }, [api, canOpen, isNeeded, subjectType, subjectId]);
+  return opened;
+}
+function NotFound({ labels, onBack }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "cv-p cv-p-thread", children: [
+    /* @__PURE__ */ jsx7("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2039" }),
+      /* @__PURE__ */ jsx7("span", { className: "cv-p-sr-only", children: labels.back })
+    ] }) : null }),
+    /* @__PURE__ */ jsx7("p", { className: "cv-p-empty", children: labels.notFound })
+  ] });
+}
+function ParticipantThreadScreen(props) {
+  const { api, selected, inbox, labels } = props;
+  const listed = inbox.conversations.find(
+    (item) => item.subjectType === selected.subjectType && item.subjectId === selected.subjectId
+  );
+  const opened = useOpenedConversation(api, selected, listed === void 0);
+  const conversation = listed ?? (opened.status === "found" ? opened.conversation : void 0);
+  if (conversation) return /* @__PURE__ */ jsx7(LoadedThread, { ...props, conversation });
+  const isResolving = opened.status === "loading" || api.openConversation !== void 0 && opened.status === "idle";
+  const isListLoading = inbox.status === "idle" || inbox.status === "loading";
+  if (isResolving || api.openConversation === void 0 && isListLoading) return /* @__PURE__ */ jsx7("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
+  return /* @__PURE__ */ jsx7(NotFound, { labels, onBack: props.onBack });
+}
+function LoadedThread(props) {
+  const { api, selected, conversation, draftsRef, inbox } = props;
+  const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, selected);
+  const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView({
+    ...props,
+    subject: selected,
+    onMarkedRead: inbox.markSubjectRead
+  });
+  const resolveAttachmentUrl = useMemo3(() => bindAttachmentUrlResolver(api), [api]);
+  const { scroll, newMessagesCount } = useParticipantThreadScroll(items);
+  function handleSend() {
+    const content = takeForSend();
+    if (content) void thread.send(content);
+  }
+  function handleEdit(clientMessageId) {
+    const entry = findFailedEntry(sendEntries, clientMessageId);
+    if (!entry) return;
+    restoreFromEntry(entry);
+    dispatchSend({ type: "discarded", clientMessageId });
+  }
+  return /* @__PURE__ */ jsx7(
+    ParticipantThread,
+    {
+      conversation,
+      items,
+      hasMore: thread.hasMore,
+      labels: props.labels,
+      resolveAttachmentUrl,
+      draft: { value: draft.text, onChange: setText, files: draft.files, onFilesChange: setFiles },
+      onSend: handleSend,
+      status: thread.status,
+      refresh: () => void thread.refresh(),
+      scroll,
+      newMessagesCount,
+      isSending: hasSendingEntry(sendEntries),
+      channel: props.channel,
+      locale: props.locale,
+      onBack: props.onBack,
+      onOpenSubject: props.onOpenSubject,
+      onLoadOlder: () => void thread.loadOlder(),
+      pendingActions: {
+        retryLocal: (clientMessageId) => void thread.retry(clientMessageId),
+        discardLocal: (clientMessageId) => dispatchSend({ type: "discarded", clientMessageId }),
+        editLocal: handleEdit,
+        ...props.onRetryPending ? { retryHost: props.onRetryPending } : {}
+      },
+      quickReplies: props.quickReplies,
+      renderSubjectCard: props.renderSubjectCard
+    }
+  );
+}
+
+// src/participant/participantGrouping.ts
+var ALL_FILTER2 = "all";
+var SECTION_AWAITING = "awaiting";
+var SECTION_OTHER = "other";
+var SECTION_CLOSED = "closed";
+function compareConversations(left, right) {
+  if (left.lastMessageAt !== right.lastMessageAt) {
+    if (left.lastMessageAt === null) return 1;
+    if (right.lastMessageAt === null) return -1;
+    return left.lastMessageAt < right.lastMessageAt ? 1 : -1;
+  }
+  return left.subjectLabel.localeCompare(right.subjectLabel);
+}
+function sumUnread(conversations) {
+  return conversations.reduce((sum, conversation) => sum + conversation.unreadCount, 0);
+}
+function resolveSectionKey(conversation, knownTypes) {
+  if (conversation.status === "closed") return SECTION_CLOSED;
+  if (conversation.awaitingParticipant) return SECTION_AWAITING;
+  return knownTypes.has(conversation.subjectType) ? conversation.subjectType : SECTION_OTHER;
+}
+function buildSection(key, conversations) {
+  const sorted = [...conversations].sort(compareConversations);
+  return { key, conversations: sorted, unreadCount: sumUnread(sorted) };
+}
+function buildFilters(params) {
+  const groupFilters = [];
+  for (const group of params.subjectGroups) {
+    const own = params.conversations.filter((conversation) => conversation.subjectType === group.subjectType);
+    if (own.length === 0) continue;
+    groupFilters.push({ subjectType: group.subjectType, label: group.label, unreadCount: sumUnread(own) });
+  }
+  const all = {
+    subjectType: ALL_FILTER2,
+    label: "All",
+    unreadCount: sumUnread(params.conversations)
+  };
+  return { filters: [all, ...groupFilters], showFilters: groupFilters.length >= 2 };
+}
+function groupParticipantConversations(params) {
+  const { filter, subjectGroups } = params;
+  const isFiltered = filter !== void 0 && filter !== ALL_FILTER2;
+  const visible = isFiltered ? params.conversations.filter((conversation) => conversation.subjectType === filter) : params.conversations;
+  const knownTypes = new Set(subjectGroups.map((group) => group.subjectType));
+  const buckets = /* @__PURE__ */ new Map();
+  for (const conversation of visible) {
+    const key = resolveSectionKey(conversation, knownTypes);
+    buckets.set(key, [...buckets.get(key) ?? [], conversation]);
+  }
+  const orderedKeys = [SECTION_AWAITING, ...subjectGroups.map((group) => group.subjectType), SECTION_OTHER, SECTION_CLOSED];
+  const sections = orderedKeys.flatMap((key) => {
+    const bucket = buckets.get(key);
+    return bucket === void 0 ? [] : [buildSection(key, bucket)];
+  });
+  return { sections, ...buildFilters(params) };
+}
+
+// src/participant/participantTheme.ts
+var THEME_TO_VARIABLE = {
+  primaryColor: "--cv-p-accent",
+  backgroundColor: "--cv-p-surface",
+  textPrimary: "--cv-p-text",
+  textSecondary: "--cv-p-text-muted"
+};
+function buildParticipantThemeStyle(theme) {
+  if (!theme) return void 0;
+  const style = {};
+  for (const [key, variable] of Object.entries(THEME_TO_VARIABLE)) {
+    const value = theme[key];
+    if (value) style[variable] = value;
+  }
+  return Object.keys(style).length > 0 ? style : void 0;
+}
+
+// src/participant/ParticipantConversationsScreen.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ALL_FILTER3 = "all";
+function ParticipantConversationsScreen(props) {
+  const { selected, inbox, subjectGroups, classNames } = props;
+  const [filter, setFilter] = useState7(ALL_FILTER3);
+  const draftsRef = useRef7(/* @__PURE__ */ new Map());
+  const [sendStates, dispatchSendStates] = useReducer2(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  const labels = useMemo4(
+    () => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }),
+    [props.labels]
+  );
+  const view = useMemo4(
+    () => groupParticipantConversations({ conversations: inbox.conversations, subjectGroups, filter }),
+    [inbox.conversations, subjectGroups, filter]
+  );
+  const rootClassName = ["cv-p-root", props.className, classNames?.root].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx8("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx8("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx8(
+    ParticipantInbox,
+    {
+      view,
+      subjectGroups,
+      filter,
+      onFilterChange: setFilter,
+      onSelect: props.onSelect,
+      labels,
+      status: inbox.status,
+      refresh: () => void inbox.refresh(),
+      hasMore: inbox.hasMore,
+      loadMore: () => void inbox.loadMore(),
+      locale: props.locale
+    }
+  ) }) : /* @__PURE__ */ jsx8("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx8(
+    ParticipantThreadScreen,
+    {
+      ...props,
+      selected,
+      labels,
+      draftsRef,
+      sendStates,
+      dispatchSendStates
+    },
+    draftKey(selected)
+  ) }) });
+}
+
+// src/participant/useParticipantInbox.ts
+import { useCallback as useCallback5, useEffect as useEffect8, useReducer as useReducer3 } from "react";
+
+// src/participant/participantInboxState.ts
+var INITIAL_PARTICIPANT_INBOX_STATE = { status: "idle", conversations: [] };
+function subjectKey(subject) {
+  return `${subject.subjectType}:${subject.subjectId}`;
+}
+function withCursor(state, conversations, nextCursor) {
+  const { error: _error, nextCursor: _nextCursor, ...rest } = state;
+  return { ...rest, status: "ready", conversations, ...nextCursor === void 0 ? {} : { nextCursor } };
+}
+function mergeFirstPage(state, incoming, nextCursor) {
+  const incomingKeys = new Set(incoming.map(subjectKey));
+  const retained = state.conversations.filter((conversation) => !incomingKeys.has(subjectKey(conversation)));
+  const cursor = retained.length > 0 ? state.nextCursor : nextCursor;
+  return withCursor(state, [...incoming, ...retained], cursor);
+}
+function appendUnique(current, incoming) {
+  const incomingByKey = new Map(incoming.map((conversation) => [subjectKey(conversation), conversation]));
+  const updated = current.map((conversation) => incomingByKey.get(subjectKey(conversation)) ?? conversation);
+  const knownKeys = new Set(current.map(subjectKey));
+  return [...updated, ...incoming.filter((conversation) => !knownKeys.has(subjectKey(conversation)))];
+}
+function participantInboxReducer(state, action) {
+  switch (action.type) {
+    case "started":
+      return state.status === "ready" ? state : { ...state, status: "loading" };
+    case "loaded":
+      return mergeFirstPage(state, action.conversations, action.nextCursor);
+    case "appended":
+      return withCursor(state, appendUnique(state.conversations, action.conversations), action.nextCursor);
+    case "markedRead": {
+      const target = subjectKey(action.subject);
+      return {
+        ...state,
+        conversations: state.conversations.map(
+          (conversation) => subjectKey(conversation) === target ? { ...conversation, unreadCount: 0 } : conversation
+        )
+      };
+    }
+    case "failed":
+      return { ...state, status: "error", error: action.error };
+  }
+}
+
+// src/participant/useParticipantInbox.ts
+function describeError2(error) {
+  return error instanceof Error ? error.message : "unknown error";
+}
+function useParticipantInbox(api) {
+  const [state, dispatch] = useReducer3(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
+  const refresh = useCallback5(async () => {
+    dispatch({ type: "started" });
+    try {
+      const page = await api.listConversations();
+      dispatch({ type: "loaded", conversations: page.data, ...page.nextCursor ? { nextCursor: page.nextCursor } : {} });
+    } catch (error) {
+      dispatch({ type: "failed", error: describeError2(error) });
+    }
+  }, [api]);
+  const { nextCursor } = state;
+  const loadMore = useCallback5(async () => {
+    if (!nextCursor) return;
+    try {
+      const page = await api.listConversations({ cursor: nextCursor });
+      dispatch({ type: "appended", conversations: page.data, ...page.nextCursor ? { nextCursor: page.nextCursor } : {} });
+    } catch (error) {
+      dispatch({ type: "failed", error: describeError2(error) });
+    }
+  }, [api, nextCursor]);
+  const markSubjectRead = useCallback5((subject) => {
+    dispatch({ type: "markedRead", subject });
+  }, []);
+  useEffect8(() => {
+    void refresh();
+  }, [refresh]);
+  useParticipantRevalidation(api, () => {
+    void refresh();
+  });
+  return { ...state, hasMore: nextCursor !== void 0, refresh, loadMore, markSubjectRead };
+}
+
+// src/participant/ParticipantConversations.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ParticipantConversations(props) {
+  const inbox = useParticipantInbox(props.api);
+  const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox;
+  return /* @__PURE__ */ jsx9(ParticipantConversationsScreen, { ...props, inbox: { status, conversations, hasMore, refresh, loadMore, markSubjectRead } });
+}
+export {
+  DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
+  ParticipantConversations,
+  groupParticipantConversations
+};