@adatechnology/conversations-ui 0.6.1 → 0.8.0

package/dist/participant/index.js

@@ -1,6 +1,3 @@
-import {
-  MessageText
-} from "../chunk-OVFCLRQQ.js";
 import {
   StatusTicks,
   channelCapabilityFor,
@@ -8,10 +5,9 @@ import {
   formatTimestamp,
   isSameDay
 } from "../chunk-O6457XHK.js";
-import "../chunk-CBYEHPX6.js";
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { useMemo as useMemo4, useReducer as useReducer3, useRef as useRef7, useState as useState7 } from "react";
+import { useMemo as useMemo5, useReducer as useReducer5, useRef as useRef10, useState as useState8 } from "react";
 
 // src/participant/participantLoadView.ts
 function resolveLoadView({ status, hasItems }) {
@@ -37,6 +33,7 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   me: "Me",
   newMessages: "New messages",
   loadOlder: "Load older messages",
+  scrollToLatest: "Scroll to latest message",
   closedNotice: "This conversation is closed",
   messageInputLabel: "Message",
   messageInputPlaceholder: "Write a message\u2026",
@@ -75,7 +72,10 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   channelWhatsapp: "WhatsApp",
   channelEmail: "Email",
   channelPortal: "Portal",
-  channelWebchat: "Web chat"
+  channelWebchat: "Web chat",
+  externalLinkHint: "opens in a new tab",
+  copyValue: "Copy",
+  valueCopied: "Copied"
 };
 function formatParticipantLabel(template, count) {
   return template.replace("{count}", String(count));
@@ -110,14 +110,19 @@ var ICONS = {
   Globe,
   MessagesSquare
 };
-function BadgeContent({ descriptor, labels, separator }) {
+function BadgeContent({ descriptor, labels, separator, iconSize }) {
   const Icon = ICONS[descriptor.iconName];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Icon, { size: 14, "aria-hidden": true }),
+    /* @__PURE__ */ jsx(Icon, { size: iconSize, "aria-hidden": true }),
     /* @__PURE__ */ jsx("span", { className: "cv-p-sr-only", children: `${resolveParticipantChannelLabel(descriptor, labels)}${separator}` })
   ] });
 }
-function ParticipantChannelBadges({ channels, labels, variant = "list" }) {
+function ParticipantChannelBadges({
+  channels,
+  labels,
+  variant = "list",
+  iconSize = 14
+}) {
   const descriptors = resolveParticipantChannels(channels);
   if (descriptors.length === 0) return null;
   if (variant === "inline") {
@@ -128,12 +133,27 @@ function ParticipantChannelBadges({ channels, labels, variant = "list" }) {
         {
           descriptor,
           labels,
-          separator: index < descriptors.length - 1 ? ", " : ""
+          separator: index < descriptors.length - 1 ? ", " : "",
+          iconSize
         }
       ) }, descriptor.channel))
     ] });
   }
-  return /* @__PURE__ */ jsx("ul", { className: "cv-p-channels", "aria-label": labels.channelsGroup, children: descriptors.map((descriptor) => /* @__PURE__ */ jsx("li", { className: `cv-p-channel cv-p-channel--${descriptor.channel}`, children: /* @__PURE__ */ jsx(BadgeContent, { descriptor, labels, separator: "" }) }, descriptor.channel)) });
+  return /* @__PURE__ */ jsx("ul", { className: "cv-p-channels", "aria-label": labels.channelsGroup, children: descriptors.map((descriptor) => /* @__PURE__ */ jsx("li", { className: `cv-p-channel cv-p-channel--${descriptor.channel}`, children: /* @__PURE__ */ jsx(BadgeContent, { descriptor, labels, separator: "", iconSize }) }, descriptor.channel)) });
+}
+
+// src/participant/participantSubjectIcon.ts
+function isDrawable(node) {
+  return node !== null && node !== void 0 && node !== false && node !== "";
+}
+function resolveConversationIcon({
+  conversation,
+  group,
+  renderSubjectIcon
+}) {
+  const custom = renderSubjectIcon?.(conversation);
+  if (isDrawable(custom)) return custom;
+  return isDrawable(group?.icon) ? group?.icon : void 0;
 }
 
 // src/participant/ParticipantInboxRow.tsx
@@ -144,11 +164,12 @@ function formatRowTime(iso, locale) {
   return date.toLocaleDateString(locale, { day: "2-digit", month: "2-digit" });
 }
 function RowIcon({ props, kind }) {
-  const custom = props.renderSubjectIcon?.(props.conversation);
-  if (custom !== null && custom !== void 0 && custom !== false && custom !== "") {
-    return /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon cv-p-inbox__icon", "aria-hidden": "true", children: custom });
+  const { conversation, group, renderSubjectIcon } = props;
+  const hostIcon = renderSubjectIcon?.(conversation);
+  if (isDrawable(hostIcon)) {
+    return /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon cv-p-inbox__icon", "aria-hidden": "true", children: hostIcon });
   }
-  return /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon", "aria-hidden": "true", children: props.group?.icon ?? kind.slice(0, 2) });
+  return /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon", "aria-hidden": "true", children: resolveConversationIcon({ conversation, group }) ?? kind.slice(0, 2) });
 }
 function ParticipantInboxRow(props) {
   const { conversation, group, labels, locale, onSelect } = props;
@@ -220,6 +241,41 @@ function ParticipantLoading({ labels }) {
   ] });
 }
 
+// src/participant/useRevealActiveChip.ts
+import { useEffect, useRef } from "react";
+
+// src/participant/participantScrollView.ts
+var BADGE_CAP = 99;
+function resolveScrollToLatestView(params) {
+  const { isAwayFromBottom, newMessagesCount, hasMessages } = params;
+  if (!isAwayFromBottom || !hasMessages) return { isVisible: false, badge: void 0 };
+  if (newMessagesCount <= 0) return { isVisible: true, badge: void 0 };
+  return { isVisible: true, badge: newMessagesCount > BADGE_CAP ? `${BADGE_CAP}+` : String(newMessagesCount) };
+}
+function scrollToLatestOptions(params) {
+  return { top: params.scrollHeight, behavior: params.isReducedMotion ? "auto" : "smooth" };
+}
+function scrollIntoViewOptions(isReducedMotion) {
+  return { block: "nearest", inline: "nearest", behavior: isReducedMotion ? "auto" : "smooth" };
+}
+function readPrefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/participant/useRevealActiveChip.ts
+function useRevealActiveChip(active) {
+  const strip = useRef(null);
+  const previousActive = useRef(void 0);
+  useEffect(() => {
+    const wasActive = previousActive.current;
+    previousActive.current = active;
+    if (wasActive === void 0 || wasActive === active) return;
+    strip.current?.querySelector('[aria-pressed="true"]')?.scrollIntoView(scrollIntoViewOptions(readPrefersReducedMotion()));
+  }, [active]);
+  return strip;
+}
+
 // src/participant/ParticipantInbox.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ALL_FILTER = "all";
@@ -234,7 +290,8 @@ function sectionTitle(section, props) {
   return props.subjectGroups.find((group) => group.subjectType === section.key)?.label ?? section.key;
 }
 function Filters({ filters, active, labels, onChange }) {
-  return /* @__PURE__ */ jsx5("div", { className: "cv-p-filters", role: "group", "aria-label": labels.filtersGroup, children: filters.map((filter) => /* @__PURE__ */ jsxs5(
+  const strip = useRevealActiveChip(active);
+  return /* @__PURE__ */ jsx5("div", { className: "cv-p-filters", role: "group", "aria-label": labels.filtersGroup, ref: strip, children: filters.map((filter) => /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
@@ -304,10 +361,90 @@ function ParticipantInbox(props) {
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { useEffect as useEffect8, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
+
+// src/participant/ParticipantBackButton.tsx
+import { ArrowLeft } from "lucide-react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ParticipantBackButton({ label, onBack }) {
+  return /* @__PURE__ */ jsx6("button", { type: "button", className: "cv-p-thread__back", "aria-label": label, onClick: onBack, children: /* @__PURE__ */ jsx6(ArrowLeft, { size: 24, "aria-hidden": "true", focusable: "false" }) });
+}
 
 // src/participant/ParticipantComposer.tsx
-import { useRef, useState } from "react";
+import { useState } from "react";
+
+// src/participant/ParticipantComposerControls.tsx
+import { useLayoutEffect, useRef as useRef2 } from "react";
+import { Paperclip, Send } from "lucide-react";
+
+// src/participant/participantAutoGrow.ts
+function fitTextareaHeight(target) {
+  target.style.height = "auto";
+  target.style.height = `${target.scrollHeight + (target.offsetHeight - target.clientHeight)}px`;
+}
+
+// src/participant/ParticipantComposerControls.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
+  const fileInputRef = useRef2(null);
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        ref: fileInputRef,
+        className: "cv-p-composer__file-input",
+        type: "file",
+        multiple: true,
+        hidden: true,
+        accept: acceptedTypes?.join(","),
+        onChange: onChosen
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "cv-p-composer__attach",
+        "aria-label": labels.attach,
+        disabled,
+        onClick: () => fileInputRef.current?.click(),
+        children: /* @__PURE__ */ jsx7(Paperclip, { size: 24, "aria-hidden": "true", focusable: "false" })
+      }
+    )
+  ] });
+}
+function SendButton({ label, disabled }) {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "submit",
+      className: "cv-p-button cv-p-button--primary cv-p-composer__send",
+      "aria-label": label,
+      disabled,
+      children: /* @__PURE__ */ jsx7(Send, { size: 20, "aria-hidden": "true", focusable: "false" })
+    }
+  );
+}
+function MessageField({ value, label, placeholder, disabled, maxLength, onChange }) {
+  const fieldRef = useRef2(null);
+  useLayoutEffect(() => {
+    if (fieldRef.current) fitTextareaHeight(fieldRef.current);
+  }, [value]);
+  return /* @__PURE__ */ jsx7(
+    "textarea",
+    {
+      ref: fieldRef,
+      className: "cv-p-composer__input",
+      "aria-label": label,
+      placeholder,
+      rows: 1,
+      value,
+      maxLength,
+      disabled,
+      onChange: (event) => onChange(event.target.value)
+    }
+  );
+}
 
 // src/participant/participantFileValidation.ts
 function matchesAcceptedType(mimeType, acceptedTypes) {
@@ -342,45 +479,24 @@ function applyQuickReply(currentText, replyText) {
 }
 
 // src/participant/ParticipantComposer.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function QuickReplyStrip({ quickReplies, labels, onPick }) {
-  return /* @__PURE__ */ jsx6("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx6("button", { type: "button", className: "cv-p-chip", onClick: () => onPick(quickReply.body), children: quickReply.title }, quickReply.id)) });
+  return /* @__PURE__ */ jsx8("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx8("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__ */ jsx6("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs6("li", { className: "cv-p-files__item", children: [
-    /* @__PURE__ */ jsx6("span", { className: "cv-p-files__name", children: file.name }),
-    /* @__PURE__ */ jsx6("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
-    /* @__PURE__ */ jsxs6("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, onClick: () => onRemove(file), children: [
-      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\xD7" }),
-      /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
+  return /* @__PURE__ */ jsx8("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs7("li", { className: "cv-p-files__item", children: [
+    /* @__PURE__ */ jsx8("span", { className: "cv-p-files__name", children: file.name }),
+    /* @__PURE__ */ jsx8("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
+    /* @__PURE__ */ jsxs7("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, onClick: () => onRemove(file), children: [
+      /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\xD7" }),
+      /* @__PURE__ */ jsx8("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__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx6(
-      "input",
-      {
-        ref: fileInputRef,
-        className: "cv-p-composer__file-input",
-        type: "file",
-        multiple: true,
-        hidden: true,
-        accept: acceptedTypes?.join(","),
-        onChange: onChosen
-      }
-    ),
-    /* @__PURE__ */ jsxs6("button", { type: "button", className: "cv-p-button", disabled, onClick: () => fileInputRef.current?.click(), children: [
-      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\uFF0B" }),
-      /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.attach })
-    ] })
-  ] });
-}
 function useFileSelection(props) {
   const [rejection, setRejection] = useState(void 0);
   const { files, onFilesChange, channel } = props;
@@ -406,51 +522,737 @@ function ParticipantComposer(props) {
     event.preventDefault();
     if (canSend) onSend();
   }
-  return /* @__PURE__ */ jsxs6("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
-    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx6(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
-    /* @__PURE__ */ jsx6(FileList, { files, labels, onRemove: handleRemoveFile }),
-    rejection ? /* @__PURE__ */ jsx6("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
-    /* @__PURE__ */ jsxs6("div", { className: "cv-p-composer__row", children: [
-      channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx6(AttachControl, { labels, disabled, acceptedTypes: props.acceptedTypes, onChosen: handleFilesChosen }) : null,
-      /* @__PURE__ */ jsx6(
-        "textarea",
+  return /* @__PURE__ */ jsxs7("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
+    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx8(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
+    /* @__PURE__ */ jsx8(FileList, { files, labels, onRemove: handleRemoveFile }),
+    rejection ? /* @__PURE__ */ jsx8("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
+    /* @__PURE__ */ jsxs7("div", { className: "cv-p-composer__row", children: [
+      channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx8(AttachControl, { labels, disabled, acceptedTypes: props.acceptedTypes, onChosen: handleFilesChosen }) : null,
+      /* @__PURE__ */ jsx8(
+        MessageField,
         {
-          className: "cv-p-composer__input",
-          "aria-label": labels.messageInputLabel,
-          placeholder: labels.messageInputPlaceholder,
-          rows: 1,
           value,
-          maxLength: props.maxLength,
+          label: labels.messageInputLabel,
+          placeholder: labels.messageInputPlaceholder,
           disabled,
-          onChange: (event) => onChange(event.target.value)
+          maxLength: props.maxLength,
+          onChange
         }
       ),
-      /* @__PURE__ */ jsxs6("button", { type: "submit", className: "cv-p-button cv-p-button--primary", disabled: !canSend, children: [
-        /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u27A4" }),
-        /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.send })
-      ] })
+      /* @__PURE__ */ jsx8(SendButton, { label: labels.send, disabled: !canSend })
     ] })
   ] });
 }
 
-// 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) } : {}
+// src/participant/ParticipantCopyAnnouncer.tsx
+import { createContext, useCallback, useContext, useEffect as useEffect2, useReducer, useRef as useRef3 } from "react";
+
+// src/participant/participantCopyAnnouncement.ts
+var INITIAL_COPY_ANNOUNCEMENT = { text: "", tick: 0 };
+var REPEAT_MARKER = "\u200B";
+function copyAnnouncementReducer(state, action) {
+  if (action.type === "announce") return { text: action.text, tick: state.tick + 1 };
+  return { ...state, text: "" };
+}
+function resolveLiveText(params) {
+  const { copy, notice, baselineNotice } = params;
+  if (copy.text !== "") {
+    const marker = copy.tick % 2 === 0 ? REPEAT_MARKER : "";
+    return { text: `${copy.text}${marker}`, baselineNotice: baselineNotice ?? notice };
+  }
+  if (baselineNotice !== void 0 && baselineNotice === notice) return { text: "", baselineNotice };
+  return { text: notice, baselineNotice: void 0 };
+}
+
+// src/participant/ParticipantCopyAnnouncer.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ANNOUNCEMENT_MS = 3e3;
+var AnnounceContext = createContext(() => void 0);
+var AnnouncementContext = createContext(INITIAL_COPY_ANNOUNCEMENT);
+function useAnnounceCopy() {
+  return useContext(AnnounceContext);
+}
+function ParticipantCopyAnnouncer({ children }) {
+  const [announcement, dispatch] = useReducer(copyAnnouncementReducer, INITIAL_COPY_ANNOUNCEMENT);
+  const announce = useCallback((text) => dispatch({ type: "announce", text }), []);
+  useEffect2(() => {
+    if (announcement.text === "") return void 0;
+    const timer = setTimeout(() => dispatch({ type: "expired" }), ANNOUNCEMENT_MS);
+    return () => clearTimeout(timer);
+  }, [announcement.tick, announcement.text]);
+  return /* @__PURE__ */ jsx9(AnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx9(AnnouncementContext.Provider, { value: announcement, children }) });
+}
+function ParticipantThreadLive({ notice }) {
+  const copy = useContext(AnnouncementContext);
+  const baselineNotice = useRef3(void 0);
+  const resolution = resolveLiveText({ copy, notice, baselineNotice: baselineNotice.current });
+  baselineNotice.current = resolution.baselineNotice;
+  return /* @__PURE__ */ jsx9("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: resolution.text });
+}
+
+// src/participant/ParticipantScrollToLatest.tsx
+import { ChevronDown } from "lucide-react";
+
+// src/participant/participantScrollFocus.ts
+var SCROLLER_SELECTOR = ".cv-p-thread__scroll";
+function focusScrollerOf(button) {
+  button.closest(SCROLLER_SELECTOR)?.focus({ preventScroll: true });
+}
+
+// src/participant/ParticipantScrollToLatest.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function ParticipantScrollToLatest({
+  label,
+  isAwayFromBottom,
+  hasMessages,
+  newMessagesCount,
+  onClick
+}) {
+  const { isVisible, badge } = resolveScrollToLatestView({ isAwayFromBottom, newMessagesCount, hasMessages });
+  if (!isVisible || onClick === void 0) return null;
+  return /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__latest", children: /* @__PURE__ */ jsxs8(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-thread__latest-button",
+      "aria-label": label,
+      onClick: (event) => {
+        focusScrollerOf(event.currentTarget);
+        onClick();
+      },
+      children: [
+        /* @__PURE__ */ jsx10(ChevronDown, { size: 24, "aria-hidden": "true", focusable: "false" }),
+        badge ? /* @__PURE__ */ jsx10("span", { className: "cv-p-thread__latest-badge", "aria-hidden": "true", children: badge }) : null
+      ]
+    }
+  ) });
+}
+
+// src/participant/ParticipantAuthorAvatar.tsx
+import { User } from "lucide-react";
+
+// src/participant/participantAvatar.ts
+var NAME_PARTICLES = /* @__PURE__ */ new Set([
+  "a",
+  "e",
+  "o",
+  "da",
+  "das",
+  "de",
+  "del",
+  "di",
+  "do",
+  "dos",
+  "du",
+  "la",
+  "le",
+  "van",
+  "von"
+]);
+function lettersOf(word) {
+  return word.replace(/[^\p{L}\p{M}]/gu, "");
+}
+function firstLetter(word) {
+  return (Array.from(word.normalize("NFC"))[0] ?? "").toUpperCase();
+}
+function authorInitials(name) {
+  const [first, ...rest] = (name ?? "").split(/\s+/).map(lettersOf).filter(Boolean);
+  if (first === void 0) return void 0;
+  const last = rest.filter((word) => !NAME_PARTICLES.has(word.toLowerCase())).pop();
+  return `${firstLetter(first)}${last === void 0 ? "" : firstLetter(last)}`;
+}
+function shouldShowAvatar({ previousAuthor, author, isMine }) {
+  if (isMine) return false;
+  if (previousAuthor === void 0) return true;
+  return previousAuthor !== author;
+}
+
+// src/participant/ParticipantAuthorAvatar.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ParticipantAuthorAvatar({ name, render }) {
+  const fromHost = render?.({ name });
+  const hasHostContent = !(fromHost == null || fromHost === false || fromHost === "");
+  const initials = authorInitials(name);
+  const fallback = initials ?? /* @__PURE__ */ jsx11(User, { size: 16, "aria-hidden": true });
+  return /* @__PURE__ */ jsx11("span", { className: "cv-p-avatar", "aria-hidden": "true", children: hasHostContent ? fromHost : fallback });
+}
+
+// src/participant/participantDay.ts
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function toDateTimeAttribute(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+// src/participant/ParticipantDayDivider.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function ParticipantDayDivider({ day, locale }) {
+  const label = day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" });
+  return /* @__PURE__ */ jsx12("div", { className: "cv-p-day", role: "separator", "aria-label": label, children: /* @__PURE__ */ jsx12("time", { className: "cv-p-day__label", dateTime: toDateTimeAttribute(day), children: label }) });
+}
+
+// src/participant/ParticipantBubbleStatus.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+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 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 };
+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__ */ jsxs9("button", { type: "button", className: "cv-p-bubble__retry", onClick: onRetry, children: [
+      /* @__PURE__ */ jsx13(StatusTicks, { status: "failed", appearance: "stylesheet" }),
+      /* @__PURE__ */ jsx13("span", { children: labels.statusFailed })
+    ] });
+  }
+  const text = status === "failed" ? labels.statusFailedShort : statusText(status, labels);
+  return /* @__PURE__ */ jsxs9("span", { className: "cv-p-bubble__status", children: [
+    /* @__PURE__ */ jsx13(StatusTicks, { status: ticksStatus, appearance: "stylesheet" }),
+    /* @__PURE__ */ jsx13("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__ */ jsxs9("span", { className: "cv-p-bubble__actions", children: [
+    onEdit ? /* @__PURE__ */ jsx13("button", { type: "button", className: "cv-p-bubble__action", onClick: onEdit, children: labels.edit }) : null,
+    onDiscard ? /* @__PURE__ */ jsx13("button", { type: "button", className: "cv-p-bubble__action", onClick: onDiscard, children: labels.discard }) : null
+  ] });
+}
+
+// src/participant/ParticipantMessageText.tsx
+import { useMemo } from "react";
+
+// src/participant/ParticipantCopyableToken.tsx
+import { Check, Copy } from "lucide-react";
+
+// src/participant/useParticipantCopyFeedback.ts
+import { useEffect as useEffect3, useReducer as useReducer2 } from "react";
+
+// src/participant/participantProtocolCopy.ts
+async function copyProtocolToClipboard(protocol, clipboard) {
+  if (clipboard === void 0) return false;
+  try {
+    await clipboard.writeText(protocol);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var INITIAL_PROTOCOL_COPY_STATE = { copyCount: 0, isCopied: false };
+function protocolCopyReducer(state, action) {
+  if (action.type === "copied") return { copyCount: state.copyCount + 1, isCopied: true };
+  return { ...state, isCopied: false };
+}
+
+// src/participant/useParticipantCopyFeedback.ts
+var COPIED_FEEDBACK_MS = 2e3;
+function useParticipantCopyFeedback() {
+  const [state, dispatch] = useReducer2(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
+  const announce = useAnnounceCopy();
+  const { isCopied, copyCount } = state;
+  useEffect3(() => {
+    if (!isCopied) return void 0;
+    const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_FEEDBACK_MS);
+    return () => clearTimeout(timer);
+  }, [isCopied, copyCount]);
+  async function copyValue(value, announcement) {
+    const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+    if (!await copyProtocolToClipboard(value, clipboard)) return;
+    dispatch({ type: "copied" });
+    announce(announcement);
+  }
+  return { isCopied, copy: (value, announcement) => void copyValue(value, announcement) };
+}
+
+// src/participant/ParticipantCopyableToken.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function ParticipantCopyableToken({ copyKind, value, labels }) {
+  const { isCopied, copy } = useParticipantCopyFeedback();
+  return /* @__PURE__ */ jsxs10(
+    "button",
+    {
+      type: "button",
+      className: `cv-p-copyable cv-p-copyable--${copyKind}`,
+      "aria-label": `${labels.copyValue} ${value}`,
+      onClick: () => copy(value, labels.valueCopied),
+      children: [
+        value,
+        isCopied ? /* @__PURE__ */ jsxs10("span", { className: "cv-p-copyable__done", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx14(Check, { size: 12, "aria-hidden": true }),
+          " ",
+          labels.valueCopied
+        ] }) : null
+      ]
+    }
+  );
+}
+function ParticipantLinkCopyButton({ value, labels }) {
+  const { isCopied, copy } = useParticipantCopyFeedback();
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-text__link-copy",
+      "aria-label": `${labels.copyValue} ${value}`,
+      onClick: () => copy(value, labels.valueCopied),
+      children: isCopied ? /* @__PURE__ */ jsx14(Check, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx14(Copy, { size: 14, "aria-hidden": true })
+    }
+  );
+}
+
+// src/participant/ParticipantMessageNodes.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var LINK_REL = "noopener noreferrer nofollow ugc";
+function renderLink(node, labels, key) {
+  const isExternal = /^https?:/i.test(node.href);
+  return /* @__PURE__ */ jsxs11("span", { className: "cv-p-text__link-group", children: [
+    /* @__PURE__ */ jsxs11("a", { className: "cv-p-text__link", href: node.href, rel: LINK_REL, target: isExternal ? "_blank" : void 0, children: [
+      node.label,
+      isExternal ? /* @__PURE__ */ jsxs11("span", { className: "cv-p-sr-only", children: [
+        " (",
+        labels.externalLinkHint,
+        ")"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx15(ParticipantLinkCopyButton, { value: node.href, labels })
+  ] }, key);
+}
+function renderInlineNodes(nodes, labels) {
+  return nodes.map((node, key) => {
+    switch (node.kind) {
+      case "text":
+        return node.value;
+      case "strong":
+        return /* @__PURE__ */ jsx15("strong", { children: renderInlineNodes(node.children, labels) }, key);
+      case "em":
+        return /* @__PURE__ */ jsx15("em", { children: renderInlineNodes(node.children, labels) }, key);
+      case "del":
+        return /* @__PURE__ */ jsx15("del", { children: renderInlineNodes(node.children, labels) }, key);
+      case "code":
+        return /* @__PURE__ */ jsx15("code", { className: "cv-p-text__code", children: node.value }, key);
+      case "link":
+        return renderLink(node, labels, key);
+      case "copyable":
+        return /* @__PURE__ */ jsx15(ParticipantCopyableToken, { copyKind: node.copyKind, value: node.value, labels }, key);
+    }
+  });
+}
+
+// src/participant/participantDocuments.ts
+var CNPJ_FIRST_WEIGHTS = [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+var CNPJ_SECOND_WEIGHTS = [6, ...CNPJ_FIRST_WEIGHTS];
+function charValue(character) {
+  return character.charCodeAt(0) - 48;
+}
+function isRepeatedSequence(value) {
+  return new Set(value).size === 1;
+}
+function weightedSum(characters, weights) {
+  let sum = 0;
+  for (let index = 0; index < weights.length; index += 1) {
+    sum += charValue(characters.charAt(index)) * (weights[index] ?? 0);
+  }
+  return sum;
+}
+function cnpjCheckDigit(characters, weights) {
+  const remainder = weightedSum(characters, weights) % 11;
+  return remainder < 2 ? 0 : 11 - remainder;
+}
+function cpfCheckDigit(digits, length) {
+  const weights = Array.from({ length }, (_, index) => length + 1 - index);
+  return weightedSum(digits, weights) * 10 % 11 % 10;
+}
+function isValidCpf(digits) {
+  if (!/^\d{11}$/.test(digits) || isRepeatedSequence(digits)) return false;
+  return cpfCheckDigit(digits, 9) === charValue(digits.charAt(9)) && cpfCheckDigit(digits, 10) === charValue(digits.charAt(10));
+}
+function isValidCnpj(characters) {
+  if (!/^[A-Z0-9]{12}\d{2}$/.test(characters) || isRepeatedSequence(characters)) return false;
+  const first = cnpjCheckDigit(characters, CNPJ_FIRST_WEIGHTS);
+  if (first !== charValue(characters.charAt(12))) return false;
+  return cnpjCheckDigit(characters, CNPJ_SECOND_WEIGHTS) === charValue(characters.charAt(13));
+}
+
+// src/participant/participantMessageCopyables.ts
+var DOCUMENT_SEPARATORS = /[.\-/\s]/g;
+var ACCESS_KEY_PATTERN = /\d{44}|\d{4}(?: \d{4}){10}/gu;
+var CNPJ_PATTERN = /[A-Z0-9]{2}\.[A-Z0-9]{3}\.[A-Z0-9]{3}\/[A-Z0-9]{4}-\d{2}|[A-Z0-9]{12}\d{2}/gu;
+var CPF_PATTERN = /\d{3}\.\d{3}\.\d{3}-\d{2}|\d{11}/gu;
+var BRAZIL_PHONE_PATTERN = /(?:\+?55[\s.-]?)?(?:\([1-9][1-9]\)|[1-9][1-9])[\s.-]?(?:9\d{4}|[2-5]\d{3})[\s.-]?\d{4}/gu;
+var INTERNATIONAL_PHONE_PATTERN = /\+\d{1,3}(?:[\s.-]?\d{2,5}){2,4}/gu;
+var EMAIL_LOCAL = /^[\p{L}\p{N}._%+-]+$/u;
+var EMAIL_DOMAIN = /^[\p{L}\p{N}-]+(?:\.[\p{L}\p{N}-]+)*\.\p{L}{2,}$/u;
+function bare(raw) {
+  return raw.replace(DOCUMENT_SEPARATORS, "");
+}
+function isWordCharacter(character) {
+  return character !== void 0 && /[\p{L}\p{N}]/u.test(character);
+}
+function hasPhoneDigitCount(raw) {
+  const count = raw.replace(/\D/g, "").length;
+  return count >= 10 && count <= 15;
+}
+function isFormattedBrazilPhone(raw) {
+  return /^\+|\(|^\d{2}[\s.-]/u.test(raw) && hasPhoneDigitCount(raw);
+}
+var SCANNERS = [
+  { copyKind: "accessKey", pattern: ACCESS_KEY_PATTERN, isValid: (raw) => !/^(\d)\1+$/.test(bare(raw)) },
+  { copyKind: "cnpj", pattern: CNPJ_PATTERN, isValid: (raw) => isValidCnpj(bare(raw)) },
+  { copyKind: "cpf", pattern: CPF_PATTERN, isValid: (raw) => isValidCpf(bare(raw)) },
+  { copyKind: "phone", pattern: BRAZIL_PHONE_PATTERN, isValid: isFormattedBrazilPhone },
+  {
+    copyKind: "phone",
+    pattern: INTERNATIONAL_PHONE_PATTERN,
+    isValid: (raw) => hasPhoneDigitCount(raw) && !raw.startsWith("+55")
+  }
+];
+function scan(text, scanner) {
+  const atoms = [];
+  for (const match of text.matchAll(scanner.pattern)) {
+    const [value] = match;
+    const start = match.index;
+    const end = start + value.length;
+    if (isWordCharacter(text[start - 1]) || isWordCharacter(text[end])) continue;
+    if (!scanner.isValid(value)) continue;
+    atoms.push({ start, end, node: { kind: "copyable", copyKind: scanner.copyKind, value } });
+  }
+  return atoms;
+}
+function findEmailAtoms(text) {
+  const atoms = [];
+  for (let at = text.indexOf("@"); at !== -1; at = text.indexOf("@", at + 1)) {
+    let start = at;
+    while (start > 0 && /[\p{L}\p{N}._%+-]/u.test(text[start - 1] ?? "")) start -= 1;
+    let end = at + 1;
+    while (end < text.length && /[\p{L}\p{N}.-]/u.test(text[end] ?? "")) end += 1;
+    while (end > at + 1 && /[.-]/.test(text[end - 1] ?? "")) end -= 1;
+    const isValid = EMAIL_LOCAL.test(text.slice(start, at)) && EMAIL_DOMAIN.test(text.slice(at + 1, end));
+    if (isValid) {
+      atoms.push({ start, end, node: { kind: "copyable", copyKind: "email", value: text.slice(start, end) } });
+    }
+  }
+  return atoms;
+}
+function findCopyableAtoms(text) {
+  return [...SCANNERS.flatMap((scanner) => scan(text, scanner)), ...findEmailAtoms(text)];
+}
+
+// src/participant/participantMessageLinks.ts
+var ALLOWED_LINK_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+var URL_PATTERN = /https?:\/\/[^\s<>`\u0000-\u001f]+/giu;
+var TRAILING_PUNCTUATION = `.,;:!?*_~'"]}>`;
+function isAllowedLinkHref(href) {
+  try {
+    const url = new URL(href);
+    return ALLOWED_LINK_PROTOCOLS.has(url.protocol) && url.username === "" && url.password === "";
+  } catch {
+    return false;
+  }
+}
+function isAlphanumeric(character) {
+  return character !== void 0 && /[\p{L}\p{N}]/u.test(character);
+}
+function countOf(text, character) {
+  let count = 0;
+  for (const current of text) if (current === character) count += 1;
+  return count;
+}
+function trimUrl(raw) {
+  let openCount = countOf(raw, "(");
+  let closeCount = countOf(raw, ")");
+  let end = raw.length;
+  while (end > 0) {
+    const last = raw.charAt(end - 1);
+    if (last === ")" && closeCount > openCount) closeCount -= 1;
+    else if (!TRAILING_PUNCTUATION.includes(last)) break;
+    end -= 1;
+  }
+  return raw.slice(0, end);
+}
+function toLinkAtom(text, start, raw) {
+  const label = trimUrl(raw);
+  if (/^https?:\/\/$/i.test(label) || isAlphanumeric(text[start - 1])) return void 0;
+  const href = label.replace(/^https?/i, (scheme) => scheme.toLowerCase());
+  if (!isAllowedLinkHref(href)) return void 0;
+  return { start, end: start + label.length, node: { kind: "link", href, label } };
+}
+function findLinkAtoms(text) {
+  const atoms = [];
+  for (const match of text.matchAll(URL_PATTERN)) {
+    const atom = toLinkAtom(text, match.index, match[0]);
+    if (atom) atoms.push(atom);
+  }
+  return atoms;
+}
+
+// src/participant/participantMessageAtoms.ts
+var TRIPLE_FENCE = "```";
+function spanAt(text, open) {
+  const isTriple = text.startsWith(TRIPLE_FENCE, open);
+  const width = isTriple ? 3 : 1;
+  const close = text.indexOf(isTriple ? TRIPLE_FENCE : "`", open + width);
+  if (close === -1) return void 0;
+  return { contentStart: open + width, close, width };
+}
+function findCodeAtoms(text) {
+  const atoms = [];
+  let cursor = text.indexOf("`");
+  while (cursor !== -1) {
+    const span = spanAt(text, cursor);
+    if (span === void 0) {
+      if (!text.startsWith(TRIPLE_FENCE, cursor)) break;
+      cursor = text.indexOf("`", cursor + 3);
+      continue;
+    }
+    if (span.close === span.contentStart) {
+      cursor = text.indexOf("`", cursor + span.width);
+      continue;
+    }
+    const end = span.close + span.width;
+    atoms.push({ start: cursor, end, node: { kind: "code", value: text.slice(span.contentStart, span.close) } });
+    cursor = text.indexOf("`", end);
+  }
+  return atoms;
+}
+function findInlineAtoms(text) {
+  const candidates = [...findCodeAtoms(text), ...findLinkAtoms(text), ...findCopyableAtoms(text)];
+  const ordered = candidates.map((atom, rank) => ({ atom, rank })).sort((a, b) => a.atom.start - b.atom.start || a.rank - b.rank);
+  const accepted = [];
+  let lastEnd = 0;
+  for (const { atom } of ordered) {
+    if (atom.start < lastEnd) continue;
+    accepted.push(atom);
+    lastEnd = atom.end;
+  }
+  return accepted;
+}
+
+// src/participant/participantMessageInline.ts
+var MARKS = { "*": "strong", _: "em", "~": "del" };
+function isWord(character) {
+  return character !== void 0 && /[\p{L}\p{N}]/u.test(character);
+}
+function isSpace(character) {
+  return character === void 0 || /\s/u.test(character);
+}
+function characterBefore(text, index) {
+  if (index <= 0) return void 0;
+  const code = text.charCodeAt(index - 1);
+  const isLowSurrogate = code >= 56320 && code <= 57343;
+  if (isLowSurrogate && index >= 2) return String.fromCodePoint(text.codePointAt(index - 2) ?? code);
+  return text.charAt(index - 1);
+}
+function buildContext(text) {
+  const atoms = findInlineAtoms(text);
+  const isMasked = new Array(text.length).fill(false);
+  for (const atom of atoms) isMasked.fill(true, atom.start, atom.end);
+  const closers = { "*": [], _: [], "~": [] };
+  for (let index = 1; index < text.length; index += 1) {
+    const character = text.charAt(index);
+    const list = closers[character];
+    const isCloser = list !== void 0 && !isMasked[index] && !isSpace(text[index - 1]) && !isWord(text[index + 1]);
+    if (isCloser) list.push(index);
+  }
+  return { text, atomAt: new Map(atoms.map((atom) => [atom.start, atom])), isMasked, closers };
+}
+function isOpener(context, index) {
+  const { text } = context;
+  const next = text[index + 1];
+  if (context.isMasked[index] || next === void 0 || isSpace(next) || next === text[index]) return false;
+  return !isWord(characterBefore(text, index));
+}
+function findCloser(context, mark, from, limit) {
+  const list = context.closers[mark] ?? [];
+  let low = 0;
+  let high = list.length;
+  while (low < high) {
+    const middle = low + high >> 1;
+    if ((list[middle] ?? 0) < from) low = middle + 1;
+    else high = middle;
+  }
+  const found = list[low];
+  return found !== void 0 && found < limit ? found : void 0;
+}
+function parseRange(context, start, end) {
+  const nodes = [];
+  let textStart = start;
+  let index = start;
+  const flush = (until) => {
+    if (until > textStart) nodes.push({ kind: "text", value: context.text.slice(textStart, until) });
+  };
+  while (index < end) {
+    const atom = context.atomAt.get(index);
+    const mark = MARKS[context.text.charAt(index)];
+    const closer = mark !== void 0 && !atom && isOpener(context, index) ? findCloser(context, context.text.charAt(index), index + 2, end) : void 0;
+    if (atom) {
+      flush(index);
+      nodes.push(atom.node);
+      index = atom.end;
+    } else if (mark !== void 0 && closer !== void 0) {
+      flush(index);
+      nodes.push({ kind: mark, children: parseRange(context, index + 1, closer) });
+      index = closer + 1;
+    } else {
+      index += 1;
+      continue;
+    }
+    textStart = index;
+  }
+  flush(end);
+  return nodes;
+}
+function parseInline(line) {
+  return parseRange(buildContext(line), 0, line.length);
+}
+
+// src/participant/participantMessageFormat.ts
+var MAX_FORMATTED_LENGTH = 8e3;
+var FENCE = "```";
+var LANGUAGE_LABEL = /^[a-z][a-z0-9+#.-]{0,19}$/i;
+var QUOTE_PREFIX = /^> /;
+var BULLET_PREFIX = /^[-*•] +(?=\S)/;
+var ORDERED_PREFIX = /^(\d{1,3})[.)] +(?=\S)/;
+function joinLines(lines) {
+  const nodes = [];
+  lines.forEach((line, index) => {
+    if (index > 0) nodes.push({ kind: "text", value: "\n" });
+    nodes.push(...parseInline(line));
+  });
+  return mergeText(nodes);
+}
+function mergeText(nodes) {
+  const merged = [];
+  for (const node of nodes) {
+    const previous = merged[merged.length - 1];
+    if (node.kind === "text" && previous?.kind === "text") {
+      merged[merged.length - 1] = { kind: "text", value: previous.value + node.value };
+    } else {
+      merged.push(node);
+    }
+  }
+  return merged;
+}
+function plainParagraph(text) {
+  return [{ kind: "paragraph", children: [{ kind: "text", value: text }] }];
+}
+function readFence(lines, index) {
+  const first = (lines[index] ?? "").trimStart();
+  if (!first.startsWith(FENCE)) return void 0;
+  const inner = first.slice(FENCE.length);
+  if (inner.trimEnd().endsWith(FENCE) && inner.trim() !== FENCE) {
+    return { value: inner.trimEnd().slice(0, -FENCE.length), nextIndex: index + 1 };
+  }
+  const hasLabel = LANGUAGE_LABEL.test(inner.trim());
+  const body = inner === "" || hasLabel ? [] : [inner];
+  for (let cursor = index + 1; cursor < lines.length; cursor += 1) {
+    const line = (lines[cursor] ?? "").trimEnd();
+    if (!line.endsWith(FENCE)) {
+      body.push(line);
+      continue;
+    }
+    const last = line.slice(0, -FENCE.length);
+    if (last !== "") body.push(last);
+    if (last !== "" && hasLabel && body.length === 1) body.unshift(inner);
+    return { value: body.join("\n"), nextIndex: cursor + 1 };
+  }
+  return void 0;
+}
+function startsSpecialBlock(line) {
+  const trimmed = line.trimStart();
+  return trimmed.startsWith(FENCE) || QUOTE_PREFIX.test(line) || BULLET_PREFIX.test(line) || ORDERED_PREFIX.test(line);
+}
+function readQuote(lines, index) {
+  const quoted = [];
+  let cursor = index;
+  while (cursor < lines.length && QUOTE_PREFIX.test(lines[cursor] ?? "")) {
+    quoted.push((lines[cursor] ?? "").slice(2));
+    cursor += 1;
+  }
+  return { block: { kind: "quote", children: joinLines(quoted) }, nextIndex: cursor };
+}
+function readList(lines, index) {
+  const ordered = ORDERED_PREFIX.test(lines[index] ?? "");
+  const prefix = ordered ? ORDERED_PREFIX : BULLET_PREFIX;
+  const start = ordered ? Number(ORDERED_PREFIX.exec(lines[index] ?? "")?.[1] ?? 1) : 1;
+  const items = [];
+  let cursor = index;
+  while (cursor < lines.length && prefix.test(lines[cursor] ?? "")) {
+    items.push(parseInline((lines[cursor] ?? "").replace(prefix, "")));
+    cursor += 1;
+  }
+  return { block: { kind: "list", ordered, start, items }, nextIndex: cursor };
+}
+function readParagraph(lines, index) {
+  const collected = [lines[index] ?? ""];
+  let cursor = index + 1;
+  while (cursor < lines.length && !startsSpecialBlock(lines[cursor] ?? "")) {
+    collected.push(lines[cursor] ?? "");
+    cursor += 1;
+  }
+  return { block: { kind: "paragraph", children: joinLines(collected) }, nextIndex: cursor };
+}
+function readBlock(lines, index, canFence) {
+  const line = lines[index] ?? "";
+  const fence = canFence ? readFence(lines, index) : void 0;
+  if (fence) return { block: { kind: "pre", value: fence.value }, nextIndex: fence.nextIndex };
+  if (QUOTE_PREFIX.test(line)) return readQuote(lines, index);
+  if (BULLET_PREFIX.test(line) || ORDERED_PREFIX.test(line)) return readList(lines, index);
+  return readParagraph(lines, index);
+}
+function parseParticipantMessage(text) {
+  if (typeof text !== "string" || text.trim() === "") return [];
+  if (text.length > MAX_FORMATTED_LENGTH) return plainParagraph(text);
+  const lines = text.split(/\r\n?|\n/);
+  const blocks = [];
+  let canFence = true;
+  let index = 0;
+  while (index < lines.length) {
+    const { block, nextIndex } = readBlock(lines, index, canFence);
+    if (block.kind === "paragraph" && startsFenceLine(lines[index])) canFence = false;
+    blocks.push(block);
+    index = nextIndex;
+  }
+  return blocks;
+}
+function startsFenceLine(line) {
+  return (line ?? "").trimStart().startsWith(FENCE);
+}
+
+// src/participant/ParticipantMessageText.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function renderBlock(block, labels, key) {
+  if (block.kind === "paragraph") return /* @__PURE__ */ jsx16("span", { children: renderInlineNodes(block.children, labels) }, key);
+  if (block.kind === "pre") {
+    return /* @__PURE__ */ jsx16("pre", { className: "cv-p-text__pre", children: /* @__PURE__ */ jsx16("code", { children: block.value }) }, key);
+  }
+  if (block.kind === "quote") {
+    return /* @__PURE__ */ jsx16("blockquote", { className: "cv-p-text__quote", children: renderInlineNodes(block.children, labels) }, key);
+  }
+  const items = block.items.map((item, index) => /* @__PURE__ */ jsx16("li", { children: renderInlineNodes(item, labels) }, index));
+  if (block.ordered) {
+    return /* @__PURE__ */ jsx16("ol", { className: "cv-p-text__list", start: block.start === 1 ? void 0 : block.start, children: items }, key);
+  }
+  return /* @__PURE__ */ jsx16("ul", { className: "cv-p-text__list", children: items }, key);
+}
+function ParticipantMessageText({ text, labels }) {
+  const blocks = useMemo(() => parseParticipantMessage(text), [text]);
+  if (blocks.length === 0) return null;
+  const [only] = blocks;
+  const children = blocks.length === 1 && only?.kind === "paragraph" ? renderInlineNodes(only.children, labels) : blocks.map((block, key) => renderBlock(block, labels, key));
+  return /* @__PURE__ */ jsx16("div", { className: "cv-p-text", children });
 }
 
 // src/participant/ParticipantAttachmentItem.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 
 // src/participant/participantAttachmentUrl.ts
 var SAFE_ATTACHMENT_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "blob:"]);
@@ -463,11 +1265,11 @@ function isSafeAttachmentUrl(url) {
 }
 
 // src/participant/ParticipantAttachmentItem.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function useAttachmentUrl(attachment, resolveAttachmentUrl) {
   const [url, setUrl] = useState2(void 0);
   const disposition = attachment.kind === "document" ? "attachment" : "inline";
-  useEffect(() => {
+  useEffect4(() => {
     let isCurrent = true;
     resolveAttachmentUrl(attachment, disposition).then(
       (resolved) => {
@@ -486,18 +1288,18 @@ function useAttachmentUrl(attachment, resolveAttachmentUrl) {
 function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }) {
   const url = useAttachmentUrl(attachment, resolveAttachmentUrl);
   if (attachment.kind === "image") {
-    return /* @__PURE__ */ jsxs7("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
-      url ? /* @__PURE__ */ jsx7("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
-      /* @__PURE__ */ jsx7("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
+    return /* @__PURE__ */ jsxs12("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
+      url ? /* @__PURE__ */ jsx17("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
+      /* @__PURE__ */ jsx17("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
     ] });
   }
   if (attachment.kind === "audio") {
-    return /* @__PURE__ */ jsxs7("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
-      /* @__PURE__ */ jsx7("span", { className: "cv-p-attachment__name", children: attachment.filename }),
-      /* @__PURE__ */ jsx7("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
+    return /* @__PURE__ */ jsxs12("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
+      /* @__PURE__ */ jsx17("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+      /* @__PURE__ */ jsx17("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
     ] });
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs12(
     "a",
     {
       className: "cv-p-attachment cv-p-attachment--document",
@@ -505,13 +1307,37 @@ function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels })
       download: attachment.filename,
       "aria-label": `${labels.downloadAttachment}: ${attachment.filename}`,
       children: [
-        /* @__PURE__ */ jsx7("span", { className: "cv-p-attachment__name", children: attachment.filename }),
-        /* @__PURE__ */ jsx7("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
+        /* @__PURE__ */ jsx17("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+        /* @__PURE__ */ jsx17("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
       ]
     }
   );
 }
 
+// src/participant/participantPerspective.ts
+var DEFAULT_PARTICIPANT_PERSPECTIVE = "participant";
+var OWN_DIRECTION = {
+  participant: "inbound",
+  operator: "outbound"
+};
+function isMessageMine(message, perspective = DEFAULT_PARTICIPANT_PERSPECTIVE) {
+  return message.direction === OWN_DIRECTION[perspective];
+}
+function isUnreadByViewer(message, perspective) {
+  if (isMessageMine(message, perspective)) return false;
+  return !message.readAt && message.status !== "read";
+}
+function countOtherSideMessages(messages, perspective) {
+  return messages.filter((message) => !isMessageMine(message, perspective)).length;
+}
+function countUnreadByViewer(messages, perspective) {
+  return messages.filter((message) => isUnreadByViewer(message, perspective)).length;
+}
+function resolveViewerUnread({ messages, perspective, acknowledgedCount }) {
+  if (countOtherSideMessages(messages, perspective) <= acknowledgedCount) return 0;
+  return countUnreadByViewer(messages, perspective);
+}
+
 // src/participant/participantMessages.ts
 function isSameSubject(left, right) {
   return left.subjectType === right.subjectType && left.subjectId === right.subjectId;
@@ -537,8 +1363,8 @@ function mergeParticipantMessages(params) {
   }
   return items.sort((left, right) => createdAtOf(left) - createdAtOf(right));
 }
-function isOwnMessage(message) {
-  return message.direction === "inbound";
+function isOwnMessage(message, perspective) {
+  return isMessageMine(message, perspective);
 }
 function resolveOwnMessageStatus(params) {
   const { displayState, serverStatus, confirmsRead } = params;
@@ -550,12 +1376,12 @@ function resolveOwnMessageStatus(params) {
 }
 
 // src/participant/ParticipantMessageBubble.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function describeItem(item) {
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function describeItem(item, perspective) {
   if (item.kind === "server") {
     const { message } = item;
     return {
-      isMine: isOwnMessage(message),
+      isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? void 0,
       text: message.text ?? void 0,
       createdAt: message.createdAt,
@@ -573,48 +1399,11 @@ function describeItem(item) {
     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__ */ jsxs8("button", { type: "button", className: "cv-p-bubble__retry", onClick: onRetry, children: [
-      /* @__PURE__ */ jsx8(StatusTicks, { status: "failed", appearance: "stylesheet" }),
-      /* @__PURE__ */ jsx8("span", { children: labels.statusFailed })
-    ] });
-  }
-  const text = status === "failed" ? labels.statusFailedShort : statusText(status, labels);
-  return /* @__PURE__ */ jsxs8("span", { className: "cv-p-bubble__status", children: [
-    /* @__PURE__ */ jsx8(StatusTicks, { status: ticksStatus, appearance: "stylesheet" }),
-    /* @__PURE__ */ jsx8("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__ */ jsxs8("span", { className: "cv-p-bubble__actions", children: [
-    onEdit ? /* @__PURE__ */ jsx8("button", { type: "button", className: "cv-p-bubble__action", onClick: onEdit, children: labels.edit }) : null,
-    onDiscard ? /* @__PURE__ */ jsx8("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 bubbleClassName(isMine, hasTail) {
+  const classes = ["cv-p-bubble"];
+  if (isMine) classes.push("cv-p-bubble--mine");
+  if (!hasTail) classes.push("cv-p-bubble--no-tail");
+  return classes.join(" ");
 }
 function ParticipantMessageBubble({
   item,
@@ -623,15 +1412,18 @@ function ParticipantMessageBubble({
   resolveAttachmentUrl,
   onRetry,
   onDiscard,
-  onEdit
+  onEdit,
+  avatar,
+  tail = true,
+  perspective
 }) {
-  const content = describeItem(item);
+  const content = describeItem(item, perspective);
   const { isMine } = content;
   const ownStatus = isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
-  return /* @__PURE__ */ jsxs8("div", { className: isMine ? "cv-p-bubble cv-p-bubble--mine" : "cv-p-bubble", children: [
-    isMine ? /* @__PURE__ */ jsx8("span", { className: "cv-p-sr-only", children: labels.me }) : content.authorName ? /* @__PURE__ */ jsx8("span", { className: "cv-p-bubble__author", children: content.authorName }) : null,
-    content.text ? /* @__PURE__ */ jsx8(MessageText, { message: toTextPayload(content.text, content.createdAt, isMine), copyOnClick: false, appearance: "stylesheet" }) : null,
-    content.attachments.map((attachment) => /* @__PURE__ */ jsx8(
+  const bubble = /* @__PURE__ */ jsxs13("div", { className: bubbleClassName(isMine, tail), children: [
+    isMine ? /* @__PURE__ */ jsx18("span", { className: "cv-p-sr-only", children: labels.me }) : content.authorName ? /* @__PURE__ */ jsx18("span", { className: "cv-p-bubble__author", children: content.authorName }) : null,
+    content.text ? /* @__PURE__ */ jsx18(ParticipantMessageText, { text: content.text, labels }) : null,
+    content.attachments.map((attachment) => /* @__PURE__ */ jsx18(
       ParticipantAttachmentItem,
       {
         attachment,
@@ -640,36 +1432,110 @@ function ParticipantMessageBubble({
       },
       attachment.id
     )),
-    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx8("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
-    /* @__PURE__ */ jsxs8("span", { className: "cv-p-bubble__meta", children: [
-      /* @__PURE__ */ jsx8("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
-      ownStatus ? /* @__PURE__ */ jsx8(OwnStatus, { status: ownStatus, labels, onRetry }) : null
+    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx18("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
+    /* @__PURE__ */ jsxs13("span", { className: "cv-p-bubble__meta", children: [
+      /* @__PURE__ */ jsx18("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
+      ownStatus ? /* @__PURE__ */ jsx18(OwnStatus, { status: ownStatus, labels, onRetry }) : null
     ] }),
-    ownStatus === "failed" ? /* @__PURE__ */ jsx8(FailedActions, { labels, onDiscard, onEdit }) : null
+    ownStatus === "failed" ? /* @__PURE__ */ jsx18(FailedActions, { labels, onDiscard, onEdit }) : null
   ] });
+  if (avatar === void 0 || isMine) return bubble;
+  return /* @__PURE__ */ jsxs13("div", { className: "cv-p-bubble-row", children: [
+    /* @__PURE__ */ jsx18("span", { className: "cv-p-bubble-row__avatar", children: avatar }),
+    bubble
+  ] });
+}
+
+// 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/ParticipantProtocolBadge.tsx
-import { useEffect as useEffect2, useReducer } from "react";
-
-// src/participant/participantProtocolCopy.ts
-async function copyProtocolToClipboard(protocol, clipboard) {
-  if (clipboard === void 0) return false;
-  try {
-    await clipboard.writeText(protocol);
-    return true;
-  } catch {
-    return false;
+// src/participant/ParticipantTimeline.tsx
+import { jsx as jsx19 } 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 authorOf(item, perspective) {
+  if (item.kind === "pending") return { isMine: true, author: null };
+  return { isMine: isOwnMessage(item.message, perspective), author: item.message.authorName ?? null };
+}
+function resolveActions(item, pendingActions) {
+  if (!pendingActions || item.kind === "server") return {};
+  return resolveParticipantBubbleActions(item, bindPendingActions(pendingActions, item.pending.clientMessageId));
+}
+function resolveAvatarSlot({ isEnabled, isMine, showAvatar, author, render }) {
+  if (!isEnabled || isMine) return void 0;
+  return showAvatar ? /* @__PURE__ */ jsx19(ParticipantAuthorAvatar, { name: author, render }) : null;
+}
+function ParticipantTimeline(props) {
+  const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props;
+  const confirmsRead = channelCapabilityFor(props.channel ?? "app").confirmsRead;
+  const isAvatarEnabled = props.avatars === "initials" || props.renderAuthorAvatar !== void 0;
+  const nodes = [];
+  let previousDay;
+  let previousAuthor;
+  for (const item of items) {
+    const day = new Date(createdAtOf2(item));
+    if (previousDay === void 0 || !isSameDay(previousDay, day)) {
+      nodes.push(/* @__PURE__ */ jsx19(ParticipantDayDivider, { day, locale }, `day:${keyOf(item)}`));
+      previousAuthor = void 0;
+    }
+    previousDay = day;
+    const { isMine, author } = authorOf(item, props.perspective);
+    const showAvatar = shouldShowAvatar({ previousAuthor, author, isMine });
+    previousAuthor = isMine ? void 0 : author;
+    const avatar = resolveAvatarSlot({
+      isEnabled: isAvatarEnabled,
+      isMine,
+      showAvatar,
+      author,
+      render: props.renderAuthorAvatar
+    });
+    nodes.push(
+      /* @__PURE__ */ jsx19(
+        ParticipantMessageBubble,
+        {
+          item,
+          labels,
+          confirmsRead,
+          resolveAttachmentUrl,
+          tail: props.tail,
+          perspective: props.perspective,
+          avatar,
+          ...resolveActions(item, pendingActions)
+        },
+        keyOf(item)
+      )
+    );
   }
+  return /* @__PURE__ */ jsx19("div", { className: "cv-p-thread__messages", children: nodes });
 }
-var INITIAL_PROTOCOL_COPY_STATE = { copyCount: 0, isCopied: false };
-function protocolCopyReducer(state, action) {
-  if (action.type === "copied") return { copyCount: state.copyCount + 1, isCopied: true };
-  return { ...state, isCopied: false };
+
+// src/participant/ParticipantConversationAvatar.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ParticipantConversationAvatar({ icon }) {
+  return /* @__PURE__ */ jsx20("span", { className: "cv-p-thread__avatar", "aria-hidden": "true", children: icon });
 }
 
 // src/participant/ParticipantProtocolBadge.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Check as Check2, Copy as Copy2 } from "lucide-react";
+import { useEffect as useEffect5, useReducer as useReducer3 } from "react";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var COPIED_ANNOUNCEMENT_MS = 3e3;
 function ParticipantProtocolBadgeView({
   protocol,
@@ -678,31 +1544,36 @@ function ParticipantProtocolBadgeView({
   onCopy
 }) {
   const { isCopied, copyCount } = copyState;
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsxs9("div", { className: "cv-p-protocol cv-p-protocol--header", children: [
-      /* @__PURE__ */ jsxs9("span", { className: "cv-p-protocol__code", children: [
-        /* @__PURE__ */ jsxs9("span", { className: "cv-p-sr-only", children: [
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsxs14("span", { className: "cv-p-protocol cv-p-protocol--header", children: [
+      /* @__PURE__ */ jsxs14("span", { className: "cv-p-protocol__code", children: [
+        /* @__PURE__ */ jsxs14("span", { className: "cv-p-sr-only", children: [
           labels.protocolPrefix,
           " "
         ] }),
         protocol
       ] }),
-      /* @__PURE__ */ jsxs9("button", { type: "button", className: "cv-p-protocol__copy", onClick: onCopy, children: [
-        /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: isCopied ? labels.protocolCopied : labels.copyProtocol }),
-        /* @__PURE__ */ jsxs9("span", { className: "cv-p-sr-only", children: [
-          labels.copyProtocol,
-          " ",
-          protocol
-        ] })
-      ] })
+      /* @__PURE__ */ jsxs14(
+        "button",
+        {
+          type: "button",
+          className: "cv-p-protocol__copy",
+          "aria-label": `${labels.copyProtocol} ${protocol}`,
+          onClick: onCopy,
+          children: [
+            isCopied ? /* @__PURE__ */ jsx21(Check2, { size: 18, "aria-hidden": true }) : /* @__PURE__ */ jsx21(Copy2, { size: 18, "aria-hidden": true }),
+            isCopied ? /* @__PURE__ */ jsx21("span", { className: "cv-p-protocol__copied", "aria-hidden": "true", children: labels.protocolCopied }) : null
+          ]
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx9("span", { children: labels.protocolCopied }, copyCount) : null })
+    /* @__PURE__ */ jsx21("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx21("span", { children: labels.protocolCopied }, copyCount) : null })
   ] });
 }
 function ParticipantProtocolBadge({ protocol, labels }) {
-  const [copyState, dispatch] = useReducer(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
+  const [copyState, dispatch] = useReducer3(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
   const { isCopied, copyCount } = copyState;
-  useEffect2(() => {
+  useEffect5(() => {
     if (!isCopied) return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_ANNOUNCEMENT_MS);
     return () => clearTimeout(timer);
@@ -711,7 +1582,7 @@ function ParticipantProtocolBadge({ protocol, labels }) {
     const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
     if (await copyProtocolToClipboard(protocol, clipboard)) dispatch({ type: "copied" });
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx21(
     ParticipantProtocolBadgeView,
     {
       protocol,
@@ -722,77 +1593,58 @@ function ParticipantProtocolBadge({ protocol, labels }) {
   );
 }
 
-// src/participant/ParticipantThread.tsx
-import { jsx as jsx10, jsxs as jsxs10 } 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));
+// src/participant/ParticipantThreadHeader.tsx
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+function Title({ conversation, labels, onOpenSubject }) {
+  const { subjectType, subjectId, subjectLabel } = conversation;
+  return /* @__PURE__ */ jsx22("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx22(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-thread__title-button",
+      "aria-label": `${labels.openSubject}: ${subjectLabel}`,
+      onClick: () => onOpenSubject({ subjectType, subjectId }),
+      children: /* @__PURE__ */ jsx22("span", { className: "cv-p-thread__title-text", children: subjectLabel })
+    }
+  ) : /* @__PURE__ */ jsx22("span", { className: "cv-p-thread__title-text", children: subjectLabel }) });
 }
-function Header({ props }) {
-  const { conversation, labels, onBack, onOpenSubject } = props;
-  const { subjectType, subjectId } = conversation;
-  return /* @__PURE__ */ jsxs10("header", { className: "cv-p-thread__header", children: [
-    onBack ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
-      /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: "\u2039" }),
-      /* @__PURE__ */ jsx10("span", { className: "cv-p-sr-only", children: labels.back })
-    ] }) : null,
-    /* @__PURE__ */ jsxs10("div", { className: "cv-p-thread__heading", children: [
-      /* @__PURE__ */ jsx10("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx10(
-        "button",
-        {
-          type: "button",
-          className: "cv-p-thread__title-button",
-          "aria-label": `${labels.openSubject}: ${conversation.subjectLabel}`,
-          onClick: () => onOpenSubject({ subjectType, subjectId }),
-          children: conversation.subjectLabel
-        }
-      ) : conversation.subjectLabel }),
-      conversation.protocol ? /* @__PURE__ */ jsx10(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
-      /* @__PURE__ */ jsx10(ParticipantChannelBadges, { channels: conversation.channels, labels })
-    ] })
+function ParticipantThreadHeader({
+  conversation,
+  labels,
+  subjectGroups,
+  renderSubjectIcon,
+  onBack,
+  onOpenSubject,
+  counterpartLabel,
+  actions
+}) {
+  const group = subjectGroups?.find((candidate) => candidate.subjectType === conversation.subjectType);
+  const icon = resolveConversationIcon({ conversation, group, renderSubjectIcon });
+  const hasChannels = resolveParticipantChannels(conversation.channels).length > 0;
+  return /* @__PURE__ */ jsxs15("header", { className: "cv-p-thread__header", children: [
+    onBack ? /* @__PURE__ */ jsx22(ParticipantBackButton, { label: labels.back, onBack }) : null,
+    icon !== void 0 ? /* @__PURE__ */ jsx22(ParticipantConversationAvatar, { icon }) : null,
+    /* @__PURE__ */ jsxs15("div", { className: "cv-p-thread__heading", children: [
+      icon === void 0 && group ? /* @__PURE__ */ jsx22("p", { className: "cv-p-thread__eyebrow", children: group.label }) : null,
+      /* @__PURE__ */ jsx22(Title, { conversation, labels, onOpenSubject }),
+      counterpartLabel ? /* @__PURE__ */ jsx22("p", { className: "cv-p-thread__counterpart", children: counterpartLabel }) : null,
+      conversation.protocol || hasChannels ? /* @__PURE__ */ jsxs15("div", { className: "cv-p-thread__meta", children: [
+        conversation.protocol ? /* @__PURE__ */ jsx22(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
+        /* @__PURE__ */ jsx22(ParticipantChannelBadges, { channels: conversation.channels, labels, variant: "inline", iconSize: 16 })
+      ] }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx22("div", { className: "cv-p-thread__actions", children: actions }) : null
   ] });
 }
-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__ */ jsx10("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__ */ jsx10(
-        ParticipantMessageBubble,
-        {
-          item,
-          labels,
-          confirmsRead,
-          resolveAttachmentUrl,
-          ...resolveActions(item, pendingActions)
-        },
-        keyOf(item)
-      )
-    );
-  }
-  return /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__messages", children: nodes });
-}
+
+// src/participant/ParticipantThread.tsx
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function Footer({ props }) {
   const { conversation, labels, draft } = props;
   if (conversation.status === "closed") {
-    return /* @__PURE__ */ jsx10("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
+    return /* @__PURE__ */ jsx23("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx23(
     ParticipantComposer,
     {
       value: draft.value,
@@ -809,23 +1661,51 @@ function Footer({ props }) {
     }
   );
 }
-function ParticipantThread(props) {
+function ThreadBody(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__ */ jsxs10("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, children: [
-    /* @__PURE__ */ jsx10(Header, { props }),
-    subjectCard ? /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
-    /* @__PURE__ */ jsxs10("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, children: [
-      loadView.isLoading ? /* @__PURE__ */ jsx10(ParticipantLoading, { labels }) : null,
-      loadView.hasError ? /* @__PURE__ */ jsx10(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
-      hasMore && onLoadOlder ? /* @__PURE__ */ jsx10("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
-      /* @__PURE__ */ jsx10(Timeline, { props })
+  return /* @__PURE__ */ jsxs16("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, children: [
+    /* @__PURE__ */ jsx23(
+      ParticipantThreadHeader,
+      {
+        conversation,
+        labels,
+        subjectGroups: props.subjectGroups,
+        renderSubjectIcon: props.renderSubjectIcon,
+        onBack: props.onBack,
+        onOpenSubject: props.onOpenSubject,
+        counterpartLabel: props.counterpartLabel,
+        actions: props.headerActions
+      }
+    ),
+    subjectCard ? /* @__PURE__ */ jsx23("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
+    /* @__PURE__ */ jsxs16("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, tabIndex: -1, children: [
+      loadView.isLoading ? /* @__PURE__ */ jsx23(ParticipantLoading, { labels }) : null,
+      loadView.hasError ? /* @__PURE__ */ jsx23(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+      hasMore && onLoadOlder ? /* @__PURE__ */ jsx23("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
+      /* @__PURE__ */ jsx23(ParticipantTimeline, { ...props }),
+      /* @__PURE__ */ jsx23(
+        ParticipantScrollToLatest,
+        {
+          label: labels.scrollToLatest,
+          isAwayFromBottom: props.scroll.isAwayFromBottom === true,
+          hasMessages: props.items.length > 0,
+          newMessagesCount: props.newMessagesCount,
+          onClick: props.scroll.scrollToLatest
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: props.newMessagesCount > 0 ? labels.newMessages : "" }),
-    /* @__PURE__ */ jsx10(Footer, { props })
+    /* @__PURE__ */ jsx23(ParticipantThreadLive, { notice: props.newMessagesCount > 0 ? labels.newMessages : "" }),
+    /* @__PURE__ */ jsx23(Footer, { props })
   ] });
 }
+function ParticipantThread(props) {
+  return /* @__PURE__ */ jsx23(ParticipantCopyAnnouncer, { children: /* @__PURE__ */ jsx23(ThreadBody, { ...props }) });
+}
+
+// src/participant/useParticipantThreadController.ts
+import { useMemo as useMemo4 } from "react";
 
 // src/participant/bindAttachmentUrlResolver.ts
 function bindAttachmentUrlResolver(api) {
@@ -908,8 +1788,8 @@ function appendEntryToDraft(entry, current) {
   return { text, files: [...entry.files, ...current.files] };
 }
 
-// src/participant/useParticipantDraft.ts
-import { useState as useState3 } from "react";
+// src/participant/useParticipantConversationView.ts
+import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
 
 // src/participant/participantDrafts.ts
 var EMPTY_PARTICIPANT_DRAFT = { text: "", files: [] };
@@ -937,30 +1817,6 @@ function takeDraftForSend(drafts, subject) {
   };
 }
 
-// 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) {
@@ -977,7 +1833,7 @@ function participantSendStatesReducer(states, { subject, action }) {
 }
 
 // src/participant/useParticipantThread.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo, useReducer as useReducer2, useRef as useRef4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo2, useReducer as useReducer4, useRef as useRef7 } from "react";
 
 // src/participant/participantThreadState.ts
 var INITIAL_PARTICIPANT_THREAD_STATE = {
@@ -1013,7 +1869,7 @@ function participantThreadReducer(state, action) {
 }
 
 // src/participant/useParticipantMarkRead.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/participant/shouldMarkRead.ts
 function shouldMarkParticipantRead(params) {
@@ -1025,12 +1881,12 @@ function shouldMarkParticipantRead(params) {
 }
 
 // src/participant/useDocumentVisibility.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState3 } from "react";
 function useDocumentVisibility() {
-  const [visibilityState, setVisibilityState] = useState4(
+  const [visibilityState, setVisibilityState] = useState3(
     () => typeof document === "undefined" ? "visible" : document.visibilityState
   );
-  useEffect3(() => {
+  useEffect6(() => {
     function handleVisibilityChange() {
       setVisibilityState(document.visibilityState);
     }
@@ -1045,18 +1901,18 @@ function useDocumentVisibility() {
 function useParticipantMarkRead(params) {
   const { apiRef, subject, unreadCount, messageCount, onMarkedRead } = params;
   const visibilityState = useDocumentVisibility();
-  useEffect4(() => {
+  useEffect7(() => {
     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 useEffect5, useRef as useRef2 } from "react";
+import { useEffect as useEffect8, useRef as useRef4 } from "react";
 function useParticipantRevalidation(api, onRevalidate) {
-  const handlerRef = useRef2(onRevalidate);
+  const handlerRef = useRef4(onRevalidate);
   handlerRef.current = onRevalidate;
-  useEffect5(() => {
+  useEffect8(() => {
     function handleFocus() {
       handlerRef.current();
     }
@@ -1083,12 +1939,12 @@ function useParticipantRevalidation(api, onRevalidate) {
 }
 
 // src/participant/useParticipantSend.ts
-import { useCallback, useRef as useRef3 } from "react";
+import { useCallback as useCallback2, useRef as useRef5 } from "react";
 function useParticipantSend(params) {
   const { apiRef, subject, dispatchSend, onSentMessage } = params;
-  const entriesRef = useRef3(params.entries);
+  const entriesRef = useRef5(params.entries);
   entriesRef.current = params.entries;
-  const deliver = useCallback(
+  const deliver = useCallback2(
     async (entry) => {
       const { clientMessageId } = entry;
       try {
@@ -1112,7 +1968,7 @@ function useParticipantSend(params) {
     },
     [apiRef, dispatchSend, onSentMessage]
   );
-  const send = useCallback(
+  const send = useCallback2(
     async (content) => {
       const entry = createParticipantSendEntry({
         clientMessageId: crypto.randomUUID(),
@@ -1125,7 +1981,7 @@ function useParticipantSend(params) {
     },
     [deliver, dispatchSend, subject]
   );
-  const retry = useCallback(
+  const retry = useCallback2(
     async (clientMessageId) => {
       const entry = findFailedEntry(entriesRef.current, clientMessageId);
       if (!entry) return;
@@ -1137,6 +1993,24 @@ function useParticipantSend(params) {
   return { send, retry };
 }
 
+// src/participant/useParticipantUnread.ts
+import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
+function useParticipantUnread(params) {
+  const { messages, perspective, reportedUnreadCount, onMarkedRead } = params;
+  const [acknowledgedCount, setAcknowledgedCount] = useState4(0);
+  const messagesRef = useRef6(messages);
+  messagesRef.current = messages;
+  const handleMarkedRead = useCallback3(
+    (subject) => {
+      if (perspective) setAcknowledgedCount(countOtherSideMessages(messagesRef.current, perspective));
+      onMarkedRead?.(subject);
+    },
+    [perspective, onMarkedRead]
+  );
+  const unreadCount = perspective ? resolveViewerUnread({ messages, perspective, acknowledgedCount }) : reportedUnreadCount;
+  return { unreadCount, handleMarkedRead };
+}
+
 // src/participant/useParticipantThread.ts
 var THREAD_PAGE_SIZE = 30;
 function describeError(error) {
@@ -1147,15 +2021,15 @@ function isForSubject(event, subject) {
   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 { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [], perspective } = params;
   const { subjectType, subjectId } = subject;
-  const stableSubject = useMemo(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
-  const [state, dispatch] = useReducer2(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
-  const apiRef = useRef4(api);
+  const stableSubject = useMemo2(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
+  const [state, dispatch] = useReducer4(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
+  const apiRef = useRef7(api);
   apiRef.current = api;
-  const activeSubjectKey = useRef4("");
+  const activeSubjectKey = useRef7("");
   const confirmsRead = channelCapabilityFor(channel).confirmsRead;
-  const refresh = useCallback2(async () => {
+  const refresh = useCallback4(async () => {
     const requestKey = `${subjectType}:${subjectId}`;
     dispatch({ type: "started" });
     try {
@@ -1168,7 +2042,7 @@ function useParticipantThread(params) {
     }
   }, [stableSubject, subjectType, subjectId]);
   const oldestMessageId = state.messages[0]?.id;
-  const loadOlder = useCallback2(async () => {
+  const loadOlder = useCallback4(async () => {
     if (!oldestMessageId) return;
     const requestKey = `${subjectType}:${subjectId}`;
     try {
@@ -1180,9 +2054,9 @@ function useParticipantThread(params) {
       if (activeSubjectKey.current === requestKey) dispatch({ type: "failed", error: describeError(error) });
     }
   }, [stableSubject, subjectType, subjectId, oldestMessageId]);
-  const handleSentMessage = useCallback2((message) => dispatch({ type: "sendConfirmed", message }), []);
+  const handleSentMessage = useCallback4((message) => dispatch({ type: "sendConfirmed", message }), []);
   const sending = useParticipantSend({ apiRef, subject: stableSubject, entries: sendEntries, dispatchSend, onSentMessage: handleSentMessage });
-  useEffect6(() => {
+  useEffect9(() => {
     activeSubjectKey.current = `${subjectType}:${subjectId}`;
     dispatch({ type: "reset" });
     void refresh();
@@ -1190,12 +2064,19 @@ function useParticipantThread(params) {
   useParticipantRevalidation(api, (event) => {
     if (isForSubject(event, stableSubject)) void refresh();
   });
-  useEffect6(() => {
+  useEffect9(() => {
     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]);
+  const unread = useParticipantUnread({ messages: state.messages, perspective, reportedUnreadCount: unreadCount, onMarkedRead });
+  useParticipantMarkRead({
+    apiRef,
+    subject: stableSubject,
+    unreadCount: unread.unreadCount,
+    messageCount: state.messages.length,
+    onMarkedRead: unread.handleMarkedRead
+  });
+  const localPending = useMemo2(() => toLocalPending(sendEntries), [sendEntries]);
   return { ...state, localPending, confirmsRead, refresh, loadOlder, ...sending };
 }
 
@@ -1204,7 +2085,7 @@ function useParticipantConversationView(params) {
   const { api, subject, conversation, pendingMessages, sendStates, dispatchSendStates } = params;
   const { subjectType, subjectId } = subject;
   const sendEntries = selectSendEntries(sendStates, subject);
-  const dispatchSend = useCallback3(
+  const dispatchSend = useCallback5(
     (action) => dispatchSendStates({ subject: { subjectType, subjectId }, action }),
     [dispatchSendStates, subjectType, subjectId]
   );
@@ -1216,9 +2097,10 @@ function useParticipantConversationView(params) {
     onMarkedRead: params.onMarkedRead,
     sendEntries,
     dispatchSend,
-    hostPending: pendingMessages
+    hostPending: pendingMessages,
+    perspective: params.perspective
   });
-  const items = useMemo2(
+  const items = useMemo3(
     () => mergeParticipantMessages({
       serverMessages: thread.messages,
       hostPending: pendingMessages ?? [],
@@ -1230,8 +2112,30 @@ function useParticipantConversationView(params) {
   return { thread, items, sendEntries, dispatchSend };
 }
 
+// src/participant/useParticipantDraft.ts
+import { useState as useState5 } from "react";
+function useParticipantDraft(draftsRef, subject) {
+  const [draft, setDraftState] = useState5(() => 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/useParticipantThreadScroll.ts
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
 
 // src/participant/participantNewMessages.ts
 function collectServerMessageIds(items) {
@@ -1248,15 +2152,28 @@ function latestSeenTime(previousIds, items) {
   }
   return latest;
 }
-function countNewIncomingMessages(previousIds, currentItems) {
+function countNewIncomingMessages(previousIds, currentItems, perspective) {
   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
+    (item) => item.kind === "server" && !isMessageMine(item.message, perspective) && !previousIds.has(item.message.id) && Date.parse(item.message.createdAt) > latestSeen
   ).length;
 }
 
+// src/participant/useScrollAwayState.ts
+import { useCallback as useCallback6 } from "react";
+function useScrollAwayState(ref, isNearBottom) {
+  const scrollToLatest = useCallback6(() => {
+    const element = ref.current;
+    if (!element) return;
+    element.scrollTo(
+      scrollToLatestOptions({ scrollHeight: element.scrollHeight, isReducedMotion: readPrefersReducedMotion() })
+    );
+  }, [ref]);
+  return { isAwayFromBottom: !isNearBottom, scrollToLatest };
+}
+
 // src/participant/useStickToBottom.ts
-import { useCallback as useCallback4, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState6 } from "react";
 
 // src/participant/participantScroll.ts
 var NEAR_BOTTOM_THRESHOLD_PX = 80;
@@ -1278,11 +2195,17 @@ function resolveScrollAction(params) {
 
 // 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 ref = useRef8(null);
+  const snapshot = useRef8({
+    hasPositioned: false,
+    firstKey: void 0,
+    lastKey: void 0,
+    scrollTop: 0,
+    scrollHeight: 0
+  });
+  const [isNearBottom, setIsNearBottom] = useState6(true);
+  const isNearBottomRef = useRef8(true);
+  const onScroll = useCallback7((event) => {
     const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
     const isNear = shouldStickToBottom({ scrollTop, clientHeight, scrollHeight, threshold: NEAR_BOTTOM_THRESHOLD_PX });
     snapshot.current.scrollTop = scrollTop;
@@ -1290,7 +2213,7 @@ function useStickToBottom({ firstKey, lastKey }) {
     isNearBottomRef.current = isNear;
     setIsNearBottom(isNear);
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const element = ref.current;
     const previous = snapshot.current;
     if (!element) return;
@@ -1330,22 +2253,73 @@ 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());
-  useEffect7(() => {
+function useParticipantThreadScroll(items, perspective) {
+  const { scroll: base, isNearBottom } = useStickToBottom({
+    firstKey: keyOf2(items[0]),
+    lastKey: keyOf2(items[items.length - 1])
+  });
+  const { isAwayFromBottom, scrollToLatest } = useScrollAwayState(base.ref, isNearBottom);
+  const scroll = { ...base, isAwayFromBottom, scrollToLatest };
+  const seenIds = useRef9(/* @__PURE__ */ new Set());
+  useEffect10(() => {
     if (isNearBottom) seenIds.current = collectServerMessageIds(items);
   }, [isNearBottom, items]);
-  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items) };
+  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items, perspective) };
+}
+
+// src/participant/useParticipantThreadController.ts
+function buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending }) {
+  return {
+    retryLocal: (clientMessageId) => void thread.retry(clientMessageId),
+    discardLocal: (clientMessageId) => dispatchSend({ type: "discarded", clientMessageId }),
+    editLocal: handleEdit,
+    ...onRetryPending ? { retryHost: onRetryPending } : {}
+  };
+}
+function useParticipantThreadController(params) {
+  const { api, subject, conversation, draftsRef } = params;
+  const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, subject);
+  const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView(params);
+  const resolveAttachmentUrl = useMemo4(() => bindAttachmentUrlResolver(api), [api]);
+  const { scroll, newMessagesCount } = useParticipantThreadScroll(items, params.perspective);
+  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 {
+    conversation,
+    items,
+    hasMore: thread.hasMore,
+    labels: params.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: params.channel,
+    locale: params.locale,
+    onLoadOlder: () => void thread.loadOlder(),
+    pendingActions: buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending: params.onRetryPending }),
+    perspective: params.perspective
+  };
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function useOpenedConversation(api, subject, isNeeded) {
-  const [opened, setOpened] = useState6({ status: "idle" });
+  const [opened, setOpened] = useState7({ status: "idle" });
   const { subjectType, subjectId } = subject;
   const canOpen = api.openConversation !== void 0;
-  useEffect8(() => {
+  useEffect11(() => {
     if (!isNeeded || !canOpen) return;
     let isCurrent = true;
     setOpened({ status: "loading" });
@@ -1359,13 +2333,13 @@ function useOpenedConversation(api, subject, isNeeded) {
   }, [api, canOpen, isNeeded, subjectType, subjectId]);
   return opened;
 }
-function NotFound({ labels, onBack }) {
-  return /* @__PURE__ */ jsxs11("div", { className: "cv-p cv-p-thread", children: [
-    /* @__PURE__ */ jsx11("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsxs11("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
-      /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u2039" }),
-      /* @__PURE__ */ jsx11("span", { className: "cv-p-sr-only", children: labels.back })
-    ] }) : null }),
-    /* @__PURE__ */ jsx11("p", { className: "cv-p-empty", children: labels.notFound })
+function NotFound({
+  labels,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs17("div", { className: "cv-p cv-p-thread", children: [
+    /* @__PURE__ */ jsx24("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsx24(ParticipantBackButton, { label: labels.back, onBack }) : null }),
+    /* @__PURE__ */ jsx24("p", { className: "cv-p-empty", children: labels.notFound })
   ] });
 }
 function ParticipantThreadScreen(props) {
@@ -1375,60 +2349,32 @@ function ParticipantThreadScreen(props) {
   );
   const opened = useOpenedConversation(api, selected, listed === void 0);
   const conversation = listed ?? (opened.status === "found" ? opened.conversation : void 0);
-  if (conversation) return /* @__PURE__ */ jsx11(LoadedThread, { ...props, conversation });
+  if (conversation) return /* @__PURE__ */ jsx24(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__ */ jsx11("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
-  return /* @__PURE__ */ jsx11(NotFound, { labels, onBack: props.onBack });
+  if (isResolving || api.openConversation === void 0 && isListLoading)
+    return /* @__PURE__ */ jsx24("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
+  return /* @__PURE__ */ jsx24(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({
+  const core = useParticipantThreadController({
     ...props,
-    subject: selected,
-    onMarkedRead: inbox.markSubjectRead
+    subject: props.selected,
+    onMarkedRead: props.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__ */ jsx11(
+  return /* @__PURE__ */ jsx24(
     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,
+      ...core,
       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
+      renderSubjectCard: props.renderSubjectCard,
+      subjectGroups: props.subjectGroups,
+      renderSubjectIcon: props.renderSubjectIcon,
+      avatars: props.avatars,
+      renderAuthorAvatar: props.renderAuthorAvatar,
+      tail: props.tail
     }
   );
 }
@@ -1554,16 +2500,16 @@ function buildParticipantThemeStyle(theme) {
 }
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ALL_FILTER3 = "all";
 function ParticipantConversationsScreen(props) {
   const { selected, inbox, subjectGroups, classNames } = props;
-  const [filter, setFilter] = useState7(ALL_FILTER3);
-  const [searchQuery, setSearchQuery] = useState7("");
-  const draftsRef = useRef7(/* @__PURE__ */ new Map());
-  const [sendStates, dispatchSendStates] = useReducer3(participantSendStatesReducer, /* @__PURE__ */ new Map());
-  const labels = useMemo4(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
-  const view = useMemo4(
+  const [filter, setFilter] = useState8(ALL_FILTER3);
+  const [searchQuery, setSearchQuery] = useState8("");
+  const draftsRef = useRef10(/* @__PURE__ */ new Map());
+  const [sendStates, dispatchSendStates] = useReducer5(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  const labels = useMemo5(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
+  const view = useMemo5(
     () => groupParticipantConversations({
       conversations: inbox.conversations,
       subjectGroups,
@@ -1574,7 +2520,7 @@ function ParticipantConversationsScreen(props) {
   );
   const isSearchVisible = isInboxSearchVisible({ conversations: inbox.conversations, searchQuery });
   const rootClassName = ["cv-p-root", props.className, classNames?.root].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx12("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx12("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx25("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx25("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx25(
     ParticipantInbox,
     {
       view,
@@ -1591,7 +2537,7 @@ function ParticipantConversationsScreen(props) {
       renderSubjectIcon: props.renderSubjectIcon,
       search: { value: searchQuery, onChange: setSearchQuery, isVisible: isSearchVisible }
     }
-  ) }) : /* @__PURE__ */ jsx12("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx12(
+  ) }) : /* @__PURE__ */ jsx25("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx25(
     ParticipantThreadScreen,
     {
       ...props,
@@ -1606,7 +2552,7 @@ function ParticipantConversationsScreen(props) {
 }
 
 // src/participant/useParticipantInbox.ts
-import { useCallback as useCallback5, useEffect as useEffect9, useReducer as useReducer4 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useReducer as useReducer6 } from "react";
 
 // src/participant/participantInboxState.ts
 var INITIAL_PARTICIPANT_INBOX_STATE = { status: "idle", conversations: [] };
@@ -1656,8 +2602,8 @@ function describeError2(error) {
   return error instanceof Error ? error.message : "unknown error";
 }
 function useParticipantInbox(api) {
-  const [state, dispatch] = useReducer4(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
-  const refresh = useCallback5(async () => {
+  const [state, dispatch] = useReducer6(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
+  const refresh = useCallback8(async () => {
     dispatch({ type: "started" });
     try {
       const page = await api.listConversations();
@@ -1667,7 +2613,7 @@ function useParticipantInbox(api) {
     }
   }, [api]);
   const { nextCursor } = state;
-  const loadMore = useCallback5(async () => {
+  const loadMore = useCallback8(async () => {
     if (!nextCursor) return;
     try {
       const page = await api.listConversations({ cursor: nextCursor });
@@ -1676,10 +2622,10 @@ function useParticipantInbox(api) {
       dispatch({ type: "failed", error: describeError2(error) });
     }
   }, [api, nextCursor]);
-  const markSubjectRead = useCallback5((subject) => {
+  const markSubjectRead = useCallback8((subject) => {
     dispatch({ type: "markedRead", subject });
   }, []);
-  useEffect9(() => {
+  useEffect12(() => {
     void refresh();
   }, [refresh]);
   useParticipantRevalidation(api, () => {
@@ -1689,11 +2635,11 @@ function useParticipantInbox(api) {
 }
 
 // src/participant/ParticipantConversations.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function ParticipantConversations(props) {
   const inbox = useParticipantInbox(props.api);
   const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx26(
     ParticipantConversationsScreen,
     {
       ...props,
@@ -1701,7 +2647,111 @@ function ParticipantConversations(props) {
     }
   );
 }
+
+// src/participant/ConversationThread.tsx
+import { useCallback as useCallback9, useMemo as useMemo6, useReducer as useReducer7, useRef as useRef11 } from "react";
+
+// src/participant/conversationThreadApi.ts
+function toParticipantApi(api) {
+  const { subscribe } = api;
+  return {
+    listConversations: async () => ({ data: [] }),
+    fetchMessages: (subject, params) => api.fetchMessages(subject, params),
+    sendMessage: (input) => api.sendMessage(input),
+    markRead: async (subject) => {
+      if (!api.markRead) throw new Error("The host api has no markRead");
+      await api.markRead(subject);
+    },
+    resolveAttachmentUrl: (attachment, disposition) => api.resolveAttachmentUrl(attachment, disposition),
+    ...subscribe ? { subscribe: (listener) => api.subscribe?.(listener) ?? (() => void 0) } : {}
+  };
+}
+
+// src/participant/conversationThreadSummary.ts
+function buildThreadSummary({
+  subject,
+  title,
+  protocol,
+  channels,
+  status
+}) {
+  return {
+    subjectType: subject.subjectType,
+    subjectId: subject.subjectId,
+    subjectLabel: title,
+    lastMessageAt: null,
+    unreadCount: 0,
+    awaitingParticipant: false,
+    status: status ?? "open",
+    ...protocol ? { protocol } : {},
+    ...channels ? { channels } : {}
+  };
+}
+
+// src/participant/ConversationThread.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function useConversationThreadCore(props) {
+  const { perspective = "participant" } = props;
+  const { subjectType, subjectId } = props.subject;
+  const subject = useMemo6(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
+  const onMarkedReadRef = useRef11(props.onMarkedRead);
+  onMarkedReadRef.current = props.onMarkedRead;
+  const handleMarkedRead = useCallback9((marked) => onMarkedReadRef.current?.(marked), []);
+  const api = useMemo6(() => toParticipantApi(props.api), [props.api]);
+  const draftsRef = useRef11(/* @__PURE__ */ new Map());
+  const [sendStates, dispatchSendStates] = useReducer7(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  const labels = useMemo6(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
+  const { title, protocol, channels, status } = props;
+  const conversation = useMemo6(
+    () => buildThreadSummary({ subject, title, protocol, channels, status }),
+    [subject, title, protocol, channels, status]
+  );
+  return useParticipantThreadController({
+    api,
+    subject,
+    conversation,
+    labels,
+    draftsRef,
+    sendStates,
+    dispatchSendStates,
+    onMarkedRead: handleMarkedRead,
+    channel: props.channel,
+    locale: props.locale,
+    pendingMessages: props.pendingMessages,
+    onRetryPending: props.onRetryPending,
+    perspective
+  });
+}
+function ConversationThreadBody(props) {
+  const core = useConversationThreadCore(props);
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: ["cv-p-root", props.className].filter(Boolean).join(" "),
+      style: buildParticipantThemeStyle(props.theme),
+      children: /* @__PURE__ */ jsx27("div", { className: "cv-p-root__screen", children: /* @__PURE__ */ jsx27(
+        ParticipantThread,
+        {
+          ...core,
+          onBack: props.onBack,
+          quickReplies: props.quickReplies,
+          subjectGroups: props.subjectGroups,
+          renderSubjectIcon: props.renderSubjectIcon,
+          avatars: props.avatars,
+          renderAuthorAvatar: props.renderAuthorAvatar,
+          tail: props.tail,
+          counterpartLabel: props.counterpartLabel,
+          headerActions: props.headerActions
+        }
+      ) })
+    }
+  );
+}
+function ConversationThread(props) {
+  return /* @__PURE__ */ jsx27(ConversationThreadBody, { ...props }, draftKey(props.subject));
+}
 export {
+  ConversationThread,
   DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
   ParticipantConversations,
   groupParticipantConversations