@adatechnology/conversations-ui 0.7.0 → 0.9.0

package/dist/participant/index.js

@@ -1,3 +1,6 @@
+import {
+  TooltipLayer
+} from "../chunk-NSOAUYNE.js";
 import {
   StatusTicks,
   channelCapabilityFor,
@@ -7,7 +10,7 @@ import {
 } from "../chunk-O6457XHK.js";
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { useMemo as useMemo5, useReducer as useReducer5, useRef as useRef9, useState as useState7 } from "react";
+import { useMemo as useMemo5, useReducer as useReducer6, useRef as useRef12, useState as useState9 } from "react";
 
 // src/participant/participantLoadView.ts
 function resolveLoadView({ status, hasItems }) {
@@ -19,6 +22,7 @@ function resolveLoadView({ status, hasItems }) {
 }
 
 // src/participant/participantLabels.ts
+var DEFAULT_MESSAGE_OPTIONS_LABEL = "Message options";
 var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   inboxTitle: "Conversations",
   sectionAwaiting: "Waiting for your reply",
@@ -55,6 +59,7 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   retry: "Retry",
   discard: "Discard",
   edit: "Edit",
+  messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
   notFound: "Conversation not found",
   loading: "Loading\u2026",
   loadError: "Could not load. Check your connection and try again.",
@@ -128,18 +133,34 @@ function ParticipantChannelBadges({
   if (variant === "inline") {
     return /* @__PURE__ */ jsxs("span", { className: "cv-p-channels", children: [
       /* @__PURE__ */ jsx("span", { className: "cv-p-sr-only", children: `${labels.channelsGroup}: ` }),
-      descriptors.map((descriptor, index) => /* @__PURE__ */ jsx("span", { className: `cv-p-channel cv-p-channel--${descriptor.channel}`, children: /* @__PURE__ */ jsx(
-        BadgeContent,
+      descriptors.map((descriptor, index) => /* @__PURE__ */ jsx(
+        "span",
         {
-          descriptor,
-          labels,
-          separator: index < descriptors.length - 1 ? ", " : "",
-          iconSize
-        }
-      ) }, descriptor.channel))
+          className: `cv-p-channel cv-p-channel--${descriptor.channel}`,
+          "data-cv-tooltip": resolveParticipantChannelLabel(descriptor, labels),
+          children: /* @__PURE__ */ jsx(
+            BadgeContent,
+            {
+              descriptor,
+              labels,
+              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: "", 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}`,
+      "data-cv-tooltip": resolveParticipantChannelLabel(descriptor, labels),
+      children: /* @__PURE__ */ jsx(BadgeContent, { descriptor, labels, separator: "", iconSize })
+    },
+    descriptor.channel
+  )) });
 }
 
 // src/participant/participantSubjectIcon.ts
@@ -361,15 +382,18 @@ function ParticipantInbox(props) {
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useState as useState6 } from "react";
+import { useEffect as useEffect13, useState as useState8 } 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" }) });
+  return /* @__PURE__ */ jsx6("button", { type: "button", className: "cv-p-thread__back", "aria-label": label, "data-cv-tooltip": label, onClick: onBack, children: /* @__PURE__ */ jsx6(ArrowLeft, { size: 24, "aria-hidden": "true", focusable: "false" }) });
 }
 
+// src/participant/ParticipantThread.tsx
+import { useRef as useRef5 } from "react";
+
 // src/participant/ParticipantComposer.tsx
 import { useState } from "react";
 
@@ -406,6 +430,7 @@ function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
         type: "button",
         className: "cv-p-composer__attach",
         "aria-label": labels.attach,
+        "data-cv-tooltip": labels.attach,
         disabled,
         onClick: () => fileInputRef.current?.click(),
         children: /* @__PURE__ */ jsx7(Paperclip, { size: 24, "aria-hidden": "true", focusable: "false" })
@@ -420,6 +445,7 @@ function SendButton({ label, disabled }) {
       type: "submit",
       className: "cv-p-button cv-p-button--primary cv-p-composer__send",
       "aria-label": label,
+      "data-cv-tooltip": label,
       disabled,
       children: /* @__PURE__ */ jsx7(Send, { size: 20, "aria-hidden": "true", focusable: "false" })
     }
@@ -488,7 +514,7 @@ function FileList({ files, labels, onRemove }) {
   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__ */ jsxs7("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, "data-cv-tooltip": labels.removeAttachment, onClick: () => onRemove(file), children: [
       /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\xD7" }),
       /* @__PURE__ */ jsx8("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
     ] })
@@ -544,8 +570,40 @@ function ParticipantComposer(props) {
   ] });
 }
 
+// src/participant/useSuppressTouchTooltips.ts
+import { useEffect as useEffect2 } from "react";
+function useSuppressTouchTooltips(rootRef) {
+  useEffect2(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    let isTouching = false;
+    function handlePointerDown(event) {
+      isTouching = event.pointerType === "touch";
+    }
+    function handlePointerOver(event) {
+      if (event.pointerType === "touch") event.stopPropagation();
+    }
+    function handleFocusIn(event) {
+      if (isTouching) event.stopPropagation();
+    }
+    function handleKeyDown() {
+      isTouching = false;
+    }
+    root.addEventListener("pointerdown", handlePointerDown, true);
+    root.addEventListener("pointerover", handlePointerOver);
+    root.addEventListener("focusin", handleFocusIn);
+    root.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      root.removeEventListener("pointerdown", handlePointerDown, true);
+      root.removeEventListener("pointerover", handlePointerOver);
+      root.removeEventListener("focusin", handleFocusIn);
+      root.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [rootRef]);
+}
+
 // src/participant/ParticipantCopyAnnouncer.tsx
-import { createContext, useCallback, useContext, useEffect as useEffect2, useReducer, useRef as useRef3 } from "react";
+import { createContext, useCallback, useContext, useEffect as useEffect3, useReducer, useRef as useRef3 } from "react";
 
 // src/participant/participantCopyAnnouncement.ts
 var INITIAL_COPY_ANNOUNCEMENT = { text: "", tick: 0 };
@@ -575,7 +633,7 @@ function useAnnounceCopy() {
 function ParticipantCopyAnnouncer({ children }) {
   const [announcement, dispatch] = useReducer(copyAnnouncementReducer, INITIAL_COPY_ANNOUNCEMENT);
   const announce = useCallback((text) => dispatch({ type: "announce", text }), []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (announcement.text === "") return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), ANNOUNCEMENT_MS);
     return () => clearTimeout(timer);
@@ -616,6 +674,7 @@ function ParticipantScrollToLatest({
       type: "button",
       className: "cv-p-thread__latest-button",
       "aria-label": label,
+      "data-cv-tooltip": label,
       onClick: (event) => {
         focusScrollerOf(event.currentTarget);
         onClick();
@@ -692,8 +751,74 @@ function ParticipantDayDivider({ day, locale }) {
   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
+// src/participant/ParticipantMessageBubble.tsx
+import { useId as useId3 } from "react";
+
+// src/participant/ParticipantAttachmentItem.tsx
+import { useEffect as useEffect4, useState as useState2 } from "react";
+
+// src/participant/participantAttachmentUrl.ts
+var SAFE_ATTACHMENT_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "blob:"]);
+function isSafeAttachmentUrl(url) {
+  try {
+    return SAFE_ATTACHMENT_PROTOCOLS.has(new URL(url.trim()).protocol);
+  } catch {
+    return false;
+  }
+}
+
+// src/participant/ParticipantAttachmentItem.tsx
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function useAttachmentUrl(attachment, resolveAttachmentUrl) {
+  const [url, setUrl] = useState2(void 0);
+  const disposition = attachment.kind === "document" ? "attachment" : "inline";
+  useEffect4(() => {
+    let isCurrent = true;
+    resolveAttachmentUrl(attachment, disposition).then(
+      (resolved) => {
+        if (isCurrent) setUrl(isSafeAttachmentUrl(resolved) ? resolved.trim() : void 0);
+      },
+      () => {
+        if (isCurrent) setUrl(void 0);
+      }
+    );
+    return () => {
+      isCurrent = false;
+    };
+  }, [attachment, disposition, resolveAttachmentUrl]);
+  return url;
+}
+function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }) {
+  const url = useAttachmentUrl(attachment, resolveAttachmentUrl);
+  if (attachment.kind === "image") {
+    return /* @__PURE__ */ jsxs9("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
+      url ? /* @__PURE__ */ jsx13("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
+      /* @__PURE__ */ jsx13("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
+    ] });
+  }
+  if (attachment.kind === "audio") {
+    return /* @__PURE__ */ jsxs9("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
+      /* @__PURE__ */ jsx13("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+      /* @__PURE__ */ jsx13("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9(
+    "a",
+    {
+      className: "cv-p-attachment cv-p-attachment--document",
+      href: url,
+      download: attachment.filename,
+      "aria-label": `${labels.downloadAttachment}: ${attachment.filename}`,
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+        /* @__PURE__ */ jsx13("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
+      ]
+    }
+  );
+}
+
+// src/participant/ParticipantBubbleStatus.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function statusText(status, labels) {
   const byStatus = {
     sending: labels.statusSending,
@@ -708,23 +833,204 @@ function statusText(status, labels) {
 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 })
+  const isTextVisible = isVisibleText && !(status === "failed" && onRetry);
+  return /* @__PURE__ */ jsxs10("span", { className: "cv-p-bubble__status", children: [
+    /* @__PURE__ */ jsx14(StatusTicks, { status: ticksStatus, appearance: "stylesheet", title: isTextVisible ? void 0 : text }),
+    /* @__PURE__ */ jsx14("span", { className: isTextVisible ? "cv-p-bubble__status-text" : "cv-p-sr-only", children: text })
+  ] });
+}
+function RetryButton({ labels, onRetry, describedBy }) {
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      className: "cv-p-failed-retry",
+      "aria-label": labels.statusFailed,
+      "aria-describedby": describedBy,
+      "data-cv-tooltip": labels.statusFailed,
+      onClick: onRetry,
+      children: /* @__PURE__ */ jsx14("span", { className: "cv-p-failed-retry__icon", children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx14("path", { d: "M13 8a5 5 0 1 1-1.6-3.7M13 2.5v3h-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) })
+    }
+  );
+}
+
+// src/participant/ParticipantFailedMenu.tsx
+import { useId as useId2 } from "react";
+
+// src/participant/ParticipantFailedMenuList.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function ParticipantFailedMenuList({ menu, labelledBy, labels, onEdit, onDiscard }) {
+  function runAndClose(action) {
+    return () => {
+      menu.close();
+      action();
+    };
+  }
+  const className = `cv-p-failed-menu__list${menu.placement === "below" ? " cv-p-failed-menu__list--below" : ""}`;
+  return /* @__PURE__ */ jsxs11("div", { role: "menu", "aria-labelledby": labelledBy, ref: menu.menuRef, className, onKeyDown: menu.handleMenuKeyDown, children: [
+    onEdit ? /* @__PURE__ */ jsx15("button", { type: "button", role: "menuitem", tabIndex: -1, className: "cv-p-failed-menu__item", onClick: runAndClose(onEdit), children: labels.edit }) : null,
+    onDiscard ? /* @__PURE__ */ jsx15(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        tabIndex: -1,
+        className: "cv-p-failed-menu__item cv-p-failed-menu__item--danger",
+        onClick: runAndClose(onDiscard),
+        children: labels.discard
+      }
+    ) : null
   ] });
 }
-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/useParticipantFailedMenu.ts
+import { useReducer as useReducer2, useRef as useRef4 } from "react";
+
+// src/participant/participantFailedMenuState.ts
+var CLOSED_FAILED_MENU = { isOpen: false, initialFocus: "first" };
+function failedMenuReducer(state, action) {
+  if (action.type === "open") return { isOpen: true, initialFocus: action.initialFocus };
+  if (action.type === "close") return state.isOpen ? CLOSED_FAILED_MENU : state;
+  return state.isOpen ? CLOSED_FAILED_MENU : { isOpen: true, initialFocus: "first" };
+}
+function resolveFailedMenuKey({ key, index, count }) {
+  if (key === "Escape") return { type: "close", shouldRestoreFocus: true };
+  if (key === "Tab") return { type: "close", shouldRestoreFocus: false };
+  if (key === "ArrowDown") return { type: "focus", index: (index + 1) % count };
+  if (key === "ArrowUp") return { type: "focus", index: (index - 1 + count) % count };
+  if (key === "Home") return { type: "focus", index: 0 };
+  if (key === "End") return { type: "focus", index: count - 1 };
+  return void 0;
+}
+function resolveFailedMenuTriggerKey(key) {
+  if (key === "ArrowDown") return "first";
+  if (key === "ArrowUp") return "last";
+  return void 0;
+}
+var MENU_GAP_PX = 8;
+function resolveFailedMenuPlacement({ anchorTop, scrollerTop, menuHeight }) {
+  return anchorTop - scrollerTop >= menuHeight + MENU_GAP_PX ? "above" : "below";
+}
+
+// src/participant/failedMenuKeyboard.ts
+function handleFailedMenuKeyDown({ event, menuRef, triggerRef, dispatch }) {
+  const items = Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+  const index = items.findIndex((item) => item === document.activeElement);
+  const result = resolveFailedMenuKey({ key: event.key, index, count: items.length });
+  if (!result) return;
+  if (result.type === "focus") {
+    event.preventDefault();
+    items[result.index]?.focus();
+    return;
+  }
+  if (result.shouldRestoreFocus) {
+    event.preventDefault();
+    event.stopPropagation();
+    triggerRef.current?.focus();
+  }
+  dispatch({ type: "close" });
+}
+
+// src/participant/useFailedMenuEffects.ts
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useState as useState3 } from "react";
+var SCROLLER_SELECTOR2 = ".cv-p-thread__scroll";
+function useFailedMenuInitialFocus(state, menuRef) {
+  useEffect5(() => {
+    if (!state.isOpen) return;
+    const items = Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+    const target = state.initialFocus === "last" ? items[items.length - 1] : items[0];
+    target?.focus();
+  }, [state, menuRef]);
+}
+function useFailedMenuOutsideClose(isOpen, containerRef, dispatch) {
+  useEffect5(() => {
+    if (!isOpen) return;
+    function handlePointerDown(event) {
+      if (event.target instanceof Node && containerRef.current?.contains(event.target)) return;
+      dispatch({ type: "close" });
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [isOpen, containerRef, dispatch]);
+}
+function useFailedMenuPlacement(isOpen, { triggerRef, menuRef }) {
+  const [placement, setPlacement] = useState3("above");
+  useLayoutEffect2(() => {
+    const trigger = triggerRef.current;
+    const menu = menuRef.current;
+    if (!isOpen || !trigger || !menu) return;
+    const anchor = trigger.closest(".cv-p-bubble") ?? trigger;
+    const scroller = trigger.closest(SCROLLER_SELECTOR2);
+    setPlacement(
+      resolveFailedMenuPlacement({
+        anchorTop: anchor.getBoundingClientRect().top,
+        scrollerTop: scroller?.getBoundingClientRect().top ?? 0,
+        menuHeight: menu.getBoundingClientRect().height
+      })
+    );
+  }, [isOpen, triggerRef, menuRef]);
+  return placement;
+}
+
+// src/participant/useParticipantFailedMenu.ts
+function useParticipantFailedMenu() {
+  const [state, dispatch] = useReducer2(failedMenuReducer, CLOSED_FAILED_MENU);
+  const containerRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const menuRef = useRef4(null);
+  useFailedMenuInitialFocus(state, menuRef);
+  useFailedMenuOutsideClose(state.isOpen, containerRef, dispatch);
+  const placement = useFailedMenuPlacement(state.isOpen, { triggerRef, menuRef });
+  function handleTriggerKeyDown(event) {
+    const initialFocus = resolveFailedMenuTriggerKey(event.key);
+    if (!initialFocus) return;
+    event.preventDefault();
+    dispatch({ type: "open", initialFocus });
+  }
+  function handleBlur(event) {
+    const next = event.relatedTarget;
+    if (next instanceof Node && !containerRef.current?.contains(next)) dispatch({ type: "close" });
+  }
+  return {
+    state,
+    placement,
+    containerRef,
+    triggerRef,
+    menuRef,
+    handleTriggerClick: () => dispatch({ type: "toggle" }),
+    handleTriggerKeyDown,
+    handleMenuKeyDown: (event) => handleFailedMenuKeyDown({ event, menuRef, triggerRef, dispatch }),
+    handleBlur,
+    close: () => dispatch({ type: "close" })
+  };
+}
+
+// src/participant/ParticipantFailedMenu.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function ParticipantFailedMenu({ labels, onEdit, onDiscard }) {
+  const menu = useParticipantFailedMenu();
+  const triggerId = useId2();
+  if (!onEdit && !onDiscard) return null;
+  const label = labels.messageOptions ?? DEFAULT_MESSAGE_OPTIONS_LABEL;
+  return /* @__PURE__ */ jsxs12("span", { className: "cv-p-failed-menu", ref: menu.containerRef, onBlur: menu.handleBlur, children: [
+    /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        ref: menu.triggerRef,
+        className: "cv-p-failed-menu__trigger",
+        "aria-haspopup": "menu",
+        "aria-expanded": menu.state.isOpen,
+        "aria-label": label,
+        "data-cv-tooltip": menu.state.isOpen ? void 0 : label,
+        onClick: menu.handleTriggerClick,
+        onKeyDown: menu.handleTriggerKeyDown,
+        children: /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "\u22EF" })
+      }
+    ),
+    menu.state.isOpen ? /* @__PURE__ */ jsx16(ParticipantFailedMenuList, { menu, labelledBy: triggerId, labels, onEdit, onDiscard }) : null
   ] });
 }
 
@@ -735,7 +1041,7 @@ import { useMemo } from "react";
 import { Check, Copy } from "lucide-react";
 
 // src/participant/useParticipantCopyFeedback.ts
-import { useEffect as useEffect3, useReducer as useReducer2 } from "react";
+import { useEffect as useEffect6, useReducer as useReducer3 } from "react";
 
 // src/participant/participantProtocolCopy.ts
 async function copyProtocolToClipboard(protocol, clipboard) {
@@ -756,10 +1062,10 @@ function protocolCopyReducer(state, action) {
 // src/participant/useParticipantCopyFeedback.ts
 var COPIED_FEEDBACK_MS = 2e3;
 function useParticipantCopyFeedback() {
-  const [state, dispatch] = useReducer2(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
+  const [state, dispatch] = useReducer3(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
   const announce = useAnnounceCopy();
   const { isCopied, copyCount } = state;
-  useEffect3(() => {
+  useEffect6(() => {
     if (!isCopied) return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_FEEDBACK_MS);
     return () => clearTimeout(timer);
@@ -774,10 +1080,10 @@ function useParticipantCopyFeedback() {
 }
 
 // src/participant/ParticipantCopyableToken.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function ParticipantCopyableToken({ copyKind, value, labels }) {
   const { isCopied, copy } = useParticipantCopyFeedback();
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs13(
     "button",
     {
       type: "button",
@@ -786,8 +1092,8 @@ function ParticipantCopyableToken({ copyKind, value, labels }) {
       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 }),
+        isCopied ? /* @__PURE__ */ jsxs13("span", { className: "cv-p-copyable__done", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx17(Check, { size: 12, "aria-hidden": true }),
           " ",
           labels.valueCopied
         ] }) : null
@@ -797,33 +1103,34 @@ function ParticipantCopyableToken({ copyKind, value, labels }) {
 }
 function ParticipantLinkCopyButton({ value, labels }) {
   const { isCopied, copy } = useParticipantCopyFeedback();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "button",
     {
       type: "button",
       className: "cv-p-text__link-copy",
       "aria-label": `${labels.copyValue} ${value}`,
+      "data-cv-tooltip": labels.copyValue,
       onClick: () => copy(value, labels.valueCopied),
-      children: isCopied ? /* @__PURE__ */ jsx14(Check, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx14(Copy, { size: 14, "aria-hidden": true })
+      children: isCopied ? /* @__PURE__ */ jsx17(Check, { size: 14, "aria-hidden": true }) : /* @__PURE__ */ jsx17(Copy, { size: 14, "aria-hidden": true })
     }
   );
 }
 
 // src/participant/ParticipantMessageNodes.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } 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: [
+  return /* @__PURE__ */ jsxs14("span", { className: "cv-p-text__link-group", children: [
+    /* @__PURE__ */ jsxs14("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: [
+      isExternal ? /* @__PURE__ */ jsxs14("span", { className: "cv-p-sr-only", children: [
         " (",
         labels.externalLinkHint,
         ")"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx15(ParticipantLinkCopyButton, { value: node.href, labels })
+    /* @__PURE__ */ jsx18(ParticipantLinkCopyButton, { value: node.href, labels })
   ] }, key);
 }
 function renderInlineNodes(nodes, labels) {
@@ -832,17 +1139,17 @@ function renderInlineNodes(nodes, labels) {
       case "text":
         return node.value;
       case "strong":
-        return /* @__PURE__ */ jsx15("strong", { children: renderInlineNodes(node.children, labels) }, key);
+        return /* @__PURE__ */ jsx18("strong", { children: renderInlineNodes(node.children, labels) }, key);
       case "em":
-        return /* @__PURE__ */ jsx15("em", { children: renderInlineNodes(node.children, labels) }, key);
+        return /* @__PURE__ */ jsx18("em", { children: renderInlineNodes(node.children, labels) }, key);
       case "del":
-        return /* @__PURE__ */ jsx15("del", { children: renderInlineNodes(node.children, labels) }, key);
+        return /* @__PURE__ */ jsx18("del", { children: renderInlineNodes(node.children, labels) }, key);
       case "code":
-        return /* @__PURE__ */ jsx15("code", { className: "cv-p-text__code", children: node.value }, key);
+        return /* @__PURE__ */ jsx18("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);
+        return /* @__PURE__ */ jsx18(ParticipantCopyableToken, { copyKind: node.copyKind, value: node.value, labels }, key);
     }
   });
 }
@@ -1228,90 +1535,80 @@ function startsFenceLine(line) {
 }
 
 // src/participant/ParticipantMessageText.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } 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 === "paragraph") return /* @__PURE__ */ jsx19("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);
+    return /* @__PURE__ */ jsx19("pre", { className: "cv-p-text__pre", children: /* @__PURE__ */ jsx19("code", { children: block.value }) }, key);
   }
   if (block.kind === "quote") {
-    return /* @__PURE__ */ jsx16("blockquote", { className: "cv-p-text__quote", children: renderInlineNodes(block.children, labels) }, key);
+    return /* @__PURE__ */ jsx19("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));
+  const items = block.items.map((item, index) => /* @__PURE__ */ jsx19("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__ */ jsx19("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);
+  return /* @__PURE__ */ jsx19("ul", { className: "cv-p-text__list", children: items }, key);
 }
-function ParticipantMessageText({ text, labels }) {
+function ParticipantMessageText({ text, labels, id }) {
   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 });
+  return /* @__PURE__ */ jsx19("div", { className: "cv-p-text", id, children });
 }
 
-// src/participant/ParticipantAttachmentItem.tsx
-import { useEffect as useEffect4, useState as useState2 } from "react";
-
-// src/participant/participantAttachmentUrl.ts
-var SAFE_ATTACHMENT_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:", "blob:"]);
-function isSafeAttachmentUrl(url) {
-  try {
-    return SAFE_ATTACHMENT_PROTOCOLS.has(new URL(url.trim()).protocol);
-  } catch {
-    return false;
-  }
+// src/participant/ParticipantBubbleBody.tsx
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function BubbleHeading({ content, labels }) {
+  if (content.isMine) return /* @__PURE__ */ jsx20("span", { className: "cv-p-sr-only", children: labels.me });
+  if (!content.authorName) return null;
+  return /* @__PURE__ */ jsx20("span", { className: "cv-p-bubble__author", children: content.authorName });
 }
-
-// src/participant/ParticipantAttachmentItem.tsx
-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";
-  useEffect4(() => {
-    let isCurrent = true;
-    resolveAttachmentUrl(attachment, disposition).then(
-      (resolved) => {
-        if (isCurrent) setUrl(isSafeAttachmentUrl(resolved) ? resolved.trim() : void 0);
+function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }) {
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    /* @__PURE__ */ jsx20(BubbleHeading, { content, labels }),
+    content.text ? /* @__PURE__ */ jsx20(ParticipantMessageText, { text: content.text, labels, id: textId }) : null,
+    content.attachments.map((attachment) => /* @__PURE__ */ jsx20(
+      ParticipantAttachmentItem,
+      {
+        attachment,
+        resolveAttachmentUrl,
+        labels
       },
-      () => {
-        if (isCurrent) setUrl(void 0);
-      }
-    );
-    return () => {
-      isCurrent = false;
-    };
-  }, [attachment, disposition, resolveAttachmentUrl]);
-  return url;
+      attachment.id
+    )),
+    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx20("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
+    /* @__PURE__ */ jsxs15("span", { className: "cv-p-bubble__meta", children: [
+      /* @__PURE__ */ jsx20("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
+      ownStatus ? /* @__PURE__ */ jsx20(OwnStatus, { status: ownStatus, labels, onRetry }) : null,
+      ownStatus === "failed" ? /* @__PURE__ */ jsx20(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null
+    ] })
+  ] });
 }
-function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }) {
-  const url = useAttachmentUrl(attachment, resolveAttachmentUrl);
-  if (attachment.kind === "image") {
-    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__ */ 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__ */ jsxs12(
-    "a",
-    {
-      className: "cv-p-attachment cv-p-attachment--document",
-      href: url,
-      download: attachment.filename,
-      "aria-label": `${labels.downloadAttachment}: ${attachment.filename}`,
-      children: [
-        /* @__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
@@ -1339,8 +1636,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;
@@ -1352,12 +1649,12 @@ function resolveOwnMessageStatus(params) {
 }
 
 // src/participant/ParticipantMessageBubble.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-function describeItem(item) {
+import { jsx as jsx21, jsxs as jsxs16 } 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,
@@ -1375,48 +1672,27 @@ function describeItem(item) {
     displayState: item.displayState
   };
 }
-function bubbleClassName(isMine, hasTail) {
+function bubbleClassName(isMine, hasTail, hasFailed) {
   const classes = ["cv-p-bubble"];
   if (isMine) classes.push("cv-p-bubble--mine");
+  if (hasFailed) classes.push("cv-p-bubble--failed");
   if (!hasTail) classes.push("cv-p-bubble--no-tail");
   return classes.join(" ");
 }
-function ParticipantMessageBubble({
-  item,
-  labels,
-  confirmsRead,
-  resolveAttachmentUrl,
-  onRetry,
-  onDiscard,
-  onEdit,
-  avatar,
-  tail = true
-}) {
-  const content = describeItem(item);
-  const { isMine } = content;
-  const ownStatus = isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
-  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,
-        resolveAttachmentUrl,
-        labels
-      },
-      attachment.id
-    )),
-    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__ */ jsx18(FailedActions, { labels, onDiscard, onEdit }) : null
+function ParticipantMessageBubble(props) {
+  const { item, labels, confirmsRead, onRetry, avatar, tail = true, perspective } = props;
+  const textId = useId3();
+  const content = describeItem(item, perspective);
+  const ownStatus = content.isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
+  const isFailed = ownStatus === "failed";
+  const canRetry = isFailed && onRetry !== void 0;
+  const bubble = /* @__PURE__ */ jsxs16("div", { className: bubbleClassName(content.isMine, tail, isFailed), children: [
+    canRetry ? /* @__PURE__ */ jsx21(RetryButton, { labels, onRetry, describedBy: textId }) : null,
+    /* @__PURE__ */ jsx21(BubbleBody, { ...props, content, ownStatus, textId: canRetry ? textId : void 0 })
   ] });
-  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 }),
+  if (avatar === void 0 || content.isMine) return bubble;
+  return /* @__PURE__ */ jsxs16("div", { className: "cv-p-bubble-row", children: [
+    /* @__PURE__ */ jsx21("span", { className: "cv-p-bubble-row__avatar", children: avatar }),
     bubble
   ] });
 }
@@ -1438,16 +1714,16 @@ function resolveParticipantBubbleActions(item, handlers) {
 }
 
 // src/participant/ParticipantTimeline.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } 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) {
+function authorOf(item, perspective) {
   if (item.kind === "pending") return { isMine: true, author: null };
-  return { isMine: isOwnMessage(item.message), author: item.message.authorName ?? null };
+  return { isMine: isOwnMessage(item.message, perspective), author: item.message.authorName ?? null };
 }
 function resolveActions(item, pendingActions) {
   if (!pendingActions || item.kind === "server") return {};
@@ -1455,7 +1731,7 @@ function resolveActions(item, pendingActions) {
 }
 function resolveAvatarSlot({ isEnabled, isMine, showAvatar, author, render }) {
   if (!isEnabled || isMine) return void 0;
-  return showAvatar ? /* @__PURE__ */ jsx19(ParticipantAuthorAvatar, { name: author, render }) : null;
+  return showAvatar ? /* @__PURE__ */ jsx22(ParticipantAuthorAvatar, { name: author, render }) : null;
 }
 function ParticipantTimeline(props) {
   const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props;
@@ -1467,11 +1743,11 @@ function ParticipantTimeline(props) {
   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)}`));
+      nodes.push(/* @__PURE__ */ jsx22(ParticipantDayDivider, { day, locale }, `day:${keyOf(item)}`));
       previousAuthor = void 0;
     }
     previousDay = day;
-    const { isMine, author } = authorOf(item);
+    const { isMine, author } = authorOf(item, props.perspective);
     const showAvatar = shouldShowAvatar({ previousAuthor, author, isMine });
     previousAuthor = isMine ? void 0 : author;
     const avatar = resolveAvatarSlot({
@@ -1482,7 +1758,7 @@ function ParticipantTimeline(props) {
       render: props.renderAuthorAvatar
     });
     nodes.push(
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx22(
         ParticipantMessageBubble,
         {
           item,
@@ -1490,6 +1766,7 @@ function ParticipantTimeline(props) {
           confirmsRead,
           resolveAttachmentUrl,
           tail: props.tail,
+          perspective: props.perspective,
           avatar,
           ...resolveActions(item, pendingActions)
         },
@@ -1497,19 +1774,19 @@ function ParticipantTimeline(props) {
       )
     );
   }
-  return /* @__PURE__ */ jsx19("div", { className: "cv-p-thread__messages", children: nodes });
+  return /* @__PURE__ */ jsx22("div", { className: "cv-p-thread__messages", children: nodes });
 }
 
 // src/participant/ParticipantConversationAvatar.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function ParticipantConversationAvatar({ icon }) {
-  return /* @__PURE__ */ jsx20("span", { className: "cv-p-thread__avatar", "aria-hidden": "true", children: icon });
+  return /* @__PURE__ */ jsx23("span", { className: "cv-p-thread__avatar", "aria-hidden": "true", children: icon });
 }
 
 // src/participant/ParticipantProtocolBadge.tsx
 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";
+import { useEffect as useEffect7, useReducer as useReducer4 } from "react";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var COPIED_ANNOUNCEMENT_MS = 3e3;
 function ParticipantProtocolBadgeView({
   protocol,
@@ -1518,36 +1795,37 @@ function ParticipantProtocolBadgeView({
   onCopy
 }) {
   const { isCopied, copyCount } = copyState;
-  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: [
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsxs17("span", { className: "cv-p-protocol cv-p-protocol--header", children: [
+      /* @__PURE__ */ jsxs17("span", { className: "cv-p-protocol__code", children: [
+        /* @__PURE__ */ jsxs17("span", { className: "cv-p-sr-only", children: [
           labels.protocolPrefix,
           " "
         ] }),
         protocol
       ] }),
-      /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs17(
         "button",
         {
           type: "button",
           className: "cv-p-protocol__copy",
           "aria-label": `${labels.copyProtocol} ${protocol}`,
+          "data-cv-tooltip": labels.copyProtocol,
           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
+            isCopied ? /* @__PURE__ */ jsx24(Check2, { size: 18, "aria-hidden": true }) : /* @__PURE__ */ jsx24(Copy2, { size: 18, "aria-hidden": true }),
+            isCopied ? /* @__PURE__ */ jsx24("span", { className: "cv-p-protocol__copied", "aria-hidden": "true", children: labels.protocolCopied }) : null
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx21("span", { children: labels.protocolCopied }, copyCount) : null })
+    /* @__PURE__ */ jsx24("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx24("span", { children: labels.protocolCopied }, copyCount) : null })
   ] });
 }
 function ParticipantProtocolBadge({ protocol, labels }) {
-  const [copyState, dispatch] = useReducer3(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
+  const [copyState, dispatch] = useReducer4(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
   const { isCopied, copyCount } = copyState;
-  useEffect5(() => {
+  useEffect7(() => {
     if (!isCopied) return void 0;
     const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_ANNOUNCEMENT_MS);
     return () => clearTimeout(timer);
@@ -1556,7 +1834,7 @@ function ParticipantProtocolBadge({ protocol, labels }) {
     const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
     if (await copyProtocolToClipboard(protocol, clipboard)) dispatch({ type: "copied" });
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     ParticipantProtocolBadgeView,
     {
       protocol,
@@ -1568,19 +1846,19 @@ function ParticipantProtocolBadge({ protocol, labels }) {
 }
 
 // src/participant/ParticipantThreadHeader.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } 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(
+  return /* @__PURE__ */ jsx25("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx25(
     "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 })
+      children: /* @__PURE__ */ jsx25("span", { className: "cv-p-thread__title-text", children: subjectLabel })
     }
-  ) : /* @__PURE__ */ jsx22("span", { className: "cv-p-thread__title-text", children: subjectLabel }) });
+  ) : /* @__PURE__ */ jsx25("span", { className: "cv-p-thread__title-text", children: subjectLabel }) });
 }
 function ParticipantThreadHeader({
   conversation,
@@ -1588,33 +1866,37 @@ function ParticipantThreadHeader({
   subjectGroups,
   renderSubjectIcon,
   onBack,
-  onOpenSubject
+  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 }),
-      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 })
+  return /* @__PURE__ */ jsxs18("header", { className: "cv-p-thread__header", children: [
+    onBack ? /* @__PURE__ */ jsx25(ParticipantBackButton, { label: labels.back, onBack }) : null,
+    icon !== void 0 ? /* @__PURE__ */ jsx25(ParticipantConversationAvatar, { icon }) : null,
+    /* @__PURE__ */ jsxs18("div", { className: "cv-p-thread__heading", children: [
+      icon === void 0 && group ? /* @__PURE__ */ jsx25("p", { className: "cv-p-thread__eyebrow", children: group.label }) : null,
+      /* @__PURE__ */ jsx25(Title, { conversation, labels, onOpenSubject }),
+      counterpartLabel ? /* @__PURE__ */ jsx25("p", { className: "cv-p-thread__counterpart", children: counterpartLabel }) : null,
+      conversation.protocol || hasChannels ? /* @__PURE__ */ jsxs18("div", { className: "cv-p-thread__meta", children: [
+        conversation.protocol ? /* @__PURE__ */ jsx25(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
+        /* @__PURE__ */ jsx25(ParticipantChannelBadges, { channels: conversation.channels, labels, variant: "inline", iconSize: 16 })
       ] }) : null
-    ] })
+    ] }),
+    actions ? /* @__PURE__ */ jsx25("div", { className: "cv-p-thread__actions", children: actions }) : null
   ] });
 }
 
 // src/participant/ParticipantThread.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function Footer({ props }) {
   const { conversation, labels, draft } = props;
   if (conversation.status === "closed") {
-    return /* @__PURE__ */ jsx23("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
+    return /* @__PURE__ */ jsx26("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     ParticipantComposer,
     {
       value: draft.value,
@@ -1631,29 +1913,36 @@ function Footer({ props }) {
     }
   );
 }
+function Header({ props }) {
+  return /* @__PURE__ */ jsx26(
+    ParticipantThreadHeader,
+    {
+      conversation: props.conversation,
+      labels: props.labels,
+      subjectGroups: props.subjectGroups,
+      renderSubjectIcon: props.renderSubjectIcon,
+      onBack: props.onBack,
+      onOpenSubject: props.onOpenSubject,
+      counterpartLabel: props.counterpartLabel,
+      actions: props.headerActions
+    }
+  );
+}
 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__ */ 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
-      }
-    ),
-    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(
+  const rootRef = useRef5(null);
+  useSuppressTouchTooltips(rootRef);
+  return /* @__PURE__ */ jsxs19("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, ref: rootRef, children: [
+    /* @__PURE__ */ jsx26(Header, { props }),
+    subjectCard ? /* @__PURE__ */ jsx26("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
+    /* @__PURE__ */ jsxs19("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, tabIndex: -1, children: [
+      loadView.isLoading ? /* @__PURE__ */ jsx26(ParticipantLoading, { labels }) : null,
+      loadView.hasError ? /* @__PURE__ */ jsx26(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+      hasMore && onLoadOlder ? /* @__PURE__ */ jsx26("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
+      /* @__PURE__ */ jsx26(ParticipantTimeline, { ...props }),
+      /* @__PURE__ */ jsx26(
         ParticipantScrollToLatest,
         {
           label: labels.scrollToLatest,
@@ -1664,14 +1953,20 @@ function ThreadBody(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx23(ParticipantThreadLive, { notice: props.newMessagesCount > 0 ? labels.newMessages : "" }),
-    /* @__PURE__ */ jsx23(Footer, { props })
+    /* @__PURE__ */ jsx26(ParticipantThreadLive, { notice: props.newMessagesCount > 0 ? labels.newMessages : "" }),
+    /* @__PURE__ */ jsx26(Footer, { props })
   ] });
 }
 function ParticipantThread(props) {
-  return /* @__PURE__ */ jsx23(ParticipantCopyAnnouncer, { children: /* @__PURE__ */ jsx23(ThreadBody, { ...props }) });
+  return /* @__PURE__ */ jsxs19(ParticipantCopyAnnouncer, { children: [
+    /* @__PURE__ */ jsx26(ThreadBody, { ...props }),
+    /* @__PURE__ */ jsx26(TooltipLayer, {})
+  ] });
 }
 
+// src/participant/useParticipantThreadController.ts
+import { useMemo as useMemo4 } from "react";
+
 // src/participant/bindAttachmentUrlResolver.ts
 function bindAttachmentUrlResolver(api) {
   return (attachment, disposition) => api.resolveAttachmentUrl(attachment, disposition);
@@ -1753,8 +2048,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: [] };
@@ -1782,30 +2077,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 useCallback4, useMemo as useMemo3 } from "react";
-
 // src/participant/participantSendStates.ts
 var NO_ENTRIES = [];
 function selectSendEntries(states, subject) {
@@ -1822,7 +2093,7 @@ function participantSendStatesReducer(states, { subject, action }) {
 }
 
 // src/participant/useParticipantThread.ts
-import { useCallback as useCallback3, useEffect as useEffect9, useMemo as useMemo2, useReducer as useReducer4, useRef as useRef6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo2, useReducer as useReducer5, useRef as useRef9 } from "react";
 
 // src/participant/participantThreadState.ts
 var INITIAL_PARTICIPANT_THREAD_STATE = {
@@ -1858,7 +2129,7 @@ function participantThreadReducer(state, action) {
 }
 
 // src/participant/useParticipantMarkRead.ts
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // src/participant/shouldMarkRead.ts
 function shouldMarkParticipantRead(params) {
@@ -1870,12 +2141,12 @@ function shouldMarkParticipantRead(params) {
 }
 
 // src/participant/useDocumentVisibility.ts
-import { useEffect as useEffect6, useState as useState4 } from "react";
+import { useEffect as useEffect8, useState as useState4 } from "react";
 function useDocumentVisibility() {
   const [visibilityState, setVisibilityState] = useState4(
     () => typeof document === "undefined" ? "visible" : document.visibilityState
   );
-  useEffect6(() => {
+  useEffect8(() => {
     function handleVisibilityChange() {
       setVisibilityState(document.visibilityState);
     }
@@ -1890,18 +2161,18 @@ function useDocumentVisibility() {
 function useParticipantMarkRead(params) {
   const { apiRef, subject, unreadCount, messageCount, onMarkedRead } = params;
   const visibilityState = useDocumentVisibility();
-  useEffect7(() => {
+  useEffect9(() => {
     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 useEffect8, useRef as useRef4 } from "react";
+import { useEffect as useEffect10, useRef as useRef6 } from "react";
 function useParticipantRevalidation(api, onRevalidate) {
-  const handlerRef = useRef4(onRevalidate);
+  const handlerRef = useRef6(onRevalidate);
   handlerRef.current = onRevalidate;
-  useEffect8(() => {
+  useEffect10(() => {
     function handleFocus() {
       handlerRef.current();
     }
@@ -1928,10 +2199,10 @@ function useParticipantRevalidation(api, onRevalidate) {
 }
 
 // src/participant/useParticipantSend.ts
-import { useCallback as useCallback2, useRef as useRef5 } from "react";
+import { useCallback as useCallback2, useRef as useRef7 } from "react";
 function useParticipantSend(params) {
   const { apiRef, subject, dispatchSend, onSentMessage } = params;
-  const entriesRef = useRef5(params.entries);
+  const entriesRef = useRef7(params.entries);
   entriesRef.current = params.entries;
   const deliver = useCallback2(
     async (entry) => {
@@ -1982,6 +2253,24 @@ function useParticipantSend(params) {
   return { send, retry };
 }
 
+// src/participant/useParticipantUnread.ts
+import { useCallback as useCallback3, useRef as useRef8, useState as useState5 } from "react";
+function useParticipantUnread(params) {
+  const { messages, perspective, reportedUnreadCount, onMarkedRead } = params;
+  const [acknowledgedCount, setAcknowledgedCount] = useState5(0);
+  const messagesRef = useRef8(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) {
@@ -1992,15 +2281,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 = useMemo2(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
-  const [state, dispatch] = useReducer4(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
-  const apiRef = useRef6(api);
+  const [state, dispatch] = useReducer5(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
+  const apiRef = useRef9(api);
   apiRef.current = api;
-  const activeSubjectKey = useRef6("");
+  const activeSubjectKey = useRef9("");
   const confirmsRead = channelCapabilityFor(channel).confirmsRead;
-  const refresh = useCallback3(async () => {
+  const refresh = useCallback4(async () => {
     const requestKey = `${subjectType}:${subjectId}`;
     dispatch({ type: "started" });
     try {
@@ -2013,7 +2302,7 @@ function useParticipantThread(params) {
     }
   }, [stableSubject, subjectType, subjectId]);
   const oldestMessageId = state.messages[0]?.id;
-  const loadOlder = useCallback3(async () => {
+  const loadOlder = useCallback4(async () => {
     if (!oldestMessageId) return;
     const requestKey = `${subjectType}:${subjectId}`;
     try {
@@ -2025,9 +2314,9 @@ function useParticipantThread(params) {
       if (activeSubjectKey.current === requestKey) dispatch({ type: "failed", error: describeError(error) });
     }
   }, [stableSubject, subjectType, subjectId, oldestMessageId]);
-  const handleSentMessage = useCallback3((message) => dispatch({ type: "sendConfirmed", message }), []);
+  const handleSentMessage = useCallback4((message) => dispatch({ type: "sendConfirmed", message }), []);
   const sending = useParticipantSend({ apiRef, subject: stableSubject, entries: sendEntries, dispatchSend, onSentMessage: handleSentMessage });
-  useEffect9(() => {
+  useEffect11(() => {
     activeSubjectKey.current = `${subjectType}:${subjectId}`;
     dispatch({ type: "reset" });
     void refresh();
@@ -2035,11 +2324,18 @@ function useParticipantThread(params) {
   useParticipantRevalidation(api, (event) => {
     if (isForSubject(event, stableSubject)) void refresh();
   });
-  useEffect9(() => {
+  useEffect11(() => {
     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 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 };
 }
@@ -2049,7 +2345,7 @@ function useParticipantConversationView(params) {
   const { api, subject, conversation, pendingMessages, sendStates, dispatchSendStates } = params;
   const { subjectType, subjectId } = subject;
   const sendEntries = selectSendEntries(sendStates, subject);
-  const dispatchSend = useCallback4(
+  const dispatchSend = useCallback5(
     (action) => dispatchSendStates({ subject: { subjectType, subjectId }, action }),
     [dispatchSendStates, subjectType, subjectId]
   );
@@ -2061,7 +2357,8 @@ function useParticipantConversationView(params) {
     onMarkedRead: params.onMarkedRead,
     sendEntries,
     dispatchSend,
-    hostPending: pendingMessages
+    hostPending: pendingMessages,
+    perspective: params.perspective
   });
   const items = useMemo3(
     () => mergeParticipantMessages({
@@ -2075,8 +2372,30 @@ function useParticipantConversationView(params) {
   return { thread, items, sendEntries, dispatchSend };
 }
 
+// src/participant/useParticipantDraft.ts
+import { useState as useState6 } from "react";
+function useParticipantDraft(draftsRef, subject) {
+  const [draft, setDraftState] = useState6(() => 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 useEffect10, useRef as useRef8 } from "react";
+import { useEffect as useEffect12, useRef as useRef11 } from "react";
 
 // src/participant/participantNewMessages.ts
 function collectServerMessageIds(items) {
@@ -2093,17 +2412,17 @@ 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 useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 function useScrollAwayState(ref, isNearBottom) {
-  const scrollToLatest = useCallback5(() => {
+  const scrollToLatest = useCallback6(() => {
     const element = ref.current;
     if (!element) return;
     element.scrollTo(
@@ -2114,7 +2433,7 @@ function useScrollAwayState(ref, isNearBottom) {
 }
 
 // src/participant/useStickToBottom.ts
-import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState7 } from "react";
 
 // src/participant/participantScroll.ts
 var NEAR_BOTTOM_THRESHOLD_PX = 80;
@@ -2136,17 +2455,17 @@ function resolveScrollAction(params) {
 
 // src/participant/useStickToBottom.ts
 function useStickToBottom({ firstKey, lastKey }) {
-  const ref = useRef7(null);
-  const snapshot = useRef7({
+  const ref = useRef10(null);
+  const snapshot = useRef10({
     hasPositioned: false,
     firstKey: void 0,
     lastKey: void 0,
     scrollTop: 0,
     scrollHeight: 0
   });
-  const [isNearBottom, setIsNearBottom] = useState5(true);
-  const isNearBottomRef = useRef7(true);
-  const onScroll = useCallback6((event) => {
+  const [isNearBottom, setIsNearBottom] = useState7(true);
+  const isNearBottomRef = useRef10(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;
@@ -2154,7 +2473,7 @@ function useStickToBottom({ firstKey, lastKey }) {
     isNearBottomRef.current = isNear;
     setIsNearBottom(isNear);
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const element = ref.current;
     const previous = snapshot.current;
     if (!element) return;
@@ -2194,27 +2513,73 @@ function keyOf2(item) {
   if (!item) return void 0;
   return item.kind === "server" ? item.message.id : `pending:${item.pending.clientMessageId}`;
 }
-function useParticipantThreadScroll(items) {
+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 = useRef8(/* @__PURE__ */ new Set());
-  useEffect10(() => {
+  const seenIds = useRef11(/* @__PURE__ */ new Set());
+  useEffect12(() => {
     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 jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function useOpenedConversation(api, subject, isNeeded) {
-  const [opened, setOpened] = useState6({ status: "idle" });
+  const [opened, setOpened] = useState8({ status: "idle" });
   const { subjectType, subjectId } = subject;
   const canOpen = api.openConversation !== void 0;
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isNeeded || !canOpen) return;
     let isCurrent = true;
     setOpened({ status: "loading" });
@@ -2232,9 +2597,9 @@ 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 })
+  return /* @__PURE__ */ jsxs20("div", { className: "cv-p cv-p-thread", children: [
+    /* @__PURE__ */ jsx27("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsx27(ParticipantBackButton, { label: labels.back, onBack }) : null }),
+    /* @__PURE__ */ jsx27("p", { className: "cv-p-empty", children: labels.notFound })
   ] });
 }
 function ParticipantThreadScreen(props) {
@@ -2244,59 +2609,25 @@ 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__ */ jsx24(LoadedThread, { ...props, conversation });
+  if (conversation) return /* @__PURE__ */ jsx27(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__ */ jsx24("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
-  return /* @__PURE__ */ jsx24(NotFound, { labels, onBack: props.onBack });
+    return /* @__PURE__ */ jsx27("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
+  return /* @__PURE__ */ jsx27(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 = useMemo4(() => 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__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     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,
       subjectGroups: props.subjectGroups,
@@ -2429,14 +2760,14 @@ function buildParticipantThemeStyle(theme) {
 }
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx28 } 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 = useRef9(/* @__PURE__ */ new Map());
-  const [sendStates, dispatchSendStates] = useReducer5(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  const [filter, setFilter] = useState9(ALL_FILTER3);
+  const [searchQuery, setSearchQuery] = useState9("");
+  const draftsRef = useRef12(/* @__PURE__ */ new Map());
+  const [sendStates, dispatchSendStates] = useReducer6(participantSendStatesReducer, /* @__PURE__ */ new Map());
   const labels = useMemo5(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
   const view = useMemo5(
     () => groupParticipantConversations({
@@ -2449,7 +2780,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__ */ 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(
+  return /* @__PURE__ */ jsx28("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx28("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx28(
     ParticipantInbox,
     {
       view,
@@ -2466,7 +2797,7 @@ function ParticipantConversationsScreen(props) {
       renderSubjectIcon: props.renderSubjectIcon,
       search: { value: searchQuery, onChange: setSearchQuery, isVisible: isSearchVisible }
     }
-  ) }) : /* @__PURE__ */ jsx25("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx25(
+  ) }) : /* @__PURE__ */ jsx28("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx28(
     ParticipantThreadScreen,
     {
       ...props,
@@ -2481,7 +2812,7 @@ function ParticipantConversationsScreen(props) {
 }
 
 // src/participant/useParticipantInbox.ts
-import { useCallback as useCallback7, useEffect as useEffect12, useReducer as useReducer6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useReducer as useReducer7 } from "react";
 
 // src/participant/participantInboxState.ts
 var INITIAL_PARTICIPANT_INBOX_STATE = { status: "idle", conversations: [] };
@@ -2531,8 +2862,8 @@ function describeError2(error) {
   return error instanceof Error ? error.message : "unknown error";
 }
 function useParticipantInbox(api) {
-  const [state, dispatch] = useReducer6(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
-  const refresh = useCallback7(async () => {
+  const [state, dispatch] = useReducer7(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
+  const refresh = useCallback8(async () => {
     dispatch({ type: "started" });
     try {
       const page = await api.listConversations();
@@ -2542,7 +2873,7 @@ function useParticipantInbox(api) {
     }
   }, [api]);
   const { nextCursor } = state;
-  const loadMore = useCallback7(async () => {
+  const loadMore = useCallback8(async () => {
     if (!nextCursor) return;
     try {
       const page = await api.listConversations({ cursor: nextCursor });
@@ -2551,10 +2882,10 @@ function useParticipantInbox(api) {
       dispatch({ type: "failed", error: describeError2(error) });
     }
   }, [api, nextCursor]);
-  const markSubjectRead = useCallback7((subject) => {
+  const markSubjectRead = useCallback8((subject) => {
     dispatch({ type: "markedRead", subject });
   }, []);
-  useEffect12(() => {
+  useEffect14(() => {
     void refresh();
   }, [refresh]);
   useParticipantRevalidation(api, () => {
@@ -2564,11 +2895,11 @@ function useParticipantInbox(api) {
 }
 
 // src/participant/ParticipantConversations.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function ParticipantConversations(props) {
   const inbox = useParticipantInbox(props.api);
   const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     ParticipantConversationsScreen,
     {
       ...props,
@@ -2576,7 +2907,111 @@ function ParticipantConversations(props) {
     }
   );
 }
+
+// src/participant/ConversationThread.tsx
+import { useCallback as useCallback9, useMemo as useMemo6, useReducer as useReducer8, useRef as useRef13 } 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 jsx30 } 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 = useRef13(props.onMarkedRead);
+  onMarkedReadRef.current = props.onMarkedRead;
+  const handleMarkedRead = useCallback9((marked) => onMarkedReadRef.current?.(marked), []);
+  const api = useMemo6(() => toParticipantApi(props.api), [props.api]);
+  const draftsRef = useRef13(/* @__PURE__ */ new Map());
+  const [sendStates, dispatchSendStates] = useReducer8(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__ */ jsx30(
+    "div",
+    {
+      className: ["cv-p-root", props.className].filter(Boolean).join(" "),
+      style: buildParticipantThemeStyle(props.theme),
+      children: /* @__PURE__ */ jsx30("div", { className: "cv-p-root__screen", children: /* @__PURE__ */ jsx30(
+        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__ */ jsx30(ConversationThreadBody, { ...props }, draftKey(props.subject));
+}
 export {
+  ConversationThread,
   DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
   ParticipantConversations,
   groupParticipantConversations