@adatechnology/conversations-ui 0.8.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 useRef10, useState as useState8 } 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, useState as useState7 } 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 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
+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
+  ] });
+}
+
+// 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,56 @@ 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;
-}
-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) })
-      ]
-    }
-  );
+      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
+    ] })
+  ] });
 }
 
 // src/participant/participantPerspective.ts
@@ -1376,7 +1649,7 @@ function resolveOwnMessageStatus(params) {
 }
 
 // src/participant/ParticipantMessageBubble.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function describeItem(item, perspective) {
   if (item.kind === "server") {
     const { message } = item;
@@ -1399,49 +1672,27 @@ function describeItem(item, perspective) {
     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,
-  perspective
-}) {
+function ParticipantMessageBubble(props) {
+  const { item, labels, confirmsRead, onRetry, avatar, tail = true, perspective } = props;
+  const textId = useId3();
   const content = describeItem(item, perspective);
-  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
+  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
   ] });
 }
@@ -1463,7 +1714,7 @@ 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;
 }
@@ -1480,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;
@@ -1492,7 +1743,7 @@ 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;
@@ -1507,7 +1758,7 @@ function ParticipantTimeline(props) {
       render: props.renderAuthorAvatar
     });
     nodes.push(
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx22(
         ParticipantMessageBubble,
         {
           item,
@@ -1523,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,
@@ -1544,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);
@@ -1582,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,
@@ -1594,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,
@@ -1621,30 +1873,30 @@ function ParticipantThreadHeader({
   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 })
+  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__ */ jsx22("div", { className: "cv-p-thread__actions", children: actions }) : 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,
@@ -1661,31 +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,
-        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(
+  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,
@@ -1696,12 +1953,15 @@ 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
@@ -1833,7 +2093,7 @@ function participantSendStatesReducer(states, { subject, action }) {
 }
 
 // src/participant/useParticipantThread.ts
-import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo2, useReducer as useReducer4, useRef as useRef7 } 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 = {
@@ -1869,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) {
@@ -1881,12 +2141,12 @@ function shouldMarkParticipantRead(params) {
 }
 
 // src/participant/useDocumentVisibility.ts
-import { useEffect as useEffect6, useState as useState3 } from "react";
+import { useEffect as useEffect8, useState as useState4 } from "react";
 function useDocumentVisibility() {
-  const [visibilityState, setVisibilityState] = useState3(
+  const [visibilityState, setVisibilityState] = useState4(
     () => typeof document === "undefined" ? "visible" : document.visibilityState
   );
-  useEffect6(() => {
+  useEffect8(() => {
     function handleVisibilityChange() {
       setVisibilityState(document.visibilityState);
     }
@@ -1901,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();
     }
@@ -1939,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) => {
@@ -1994,11 +2254,11 @@ function useParticipantSend(params) {
 }
 
 // src/participant/useParticipantUnread.ts
-import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback as useCallback3, useRef as useRef8, useState as useState5 } from "react";
 function useParticipantUnread(params) {
   const { messages, perspective, reportedUnreadCount, onMarkedRead } = params;
-  const [acknowledgedCount, setAcknowledgedCount] = useState4(0);
-  const messagesRef = useRef6(messages);
+  const [acknowledgedCount, setAcknowledgedCount] = useState5(0);
+  const messagesRef = useRef8(messages);
   messagesRef.current = messages;
   const handleMarkedRead = useCallback3(
     (subject) => {
@@ -2024,10 +2284,10 @@ function useParticipantThread(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 = useRef7(api);
+  const [state, dispatch] = useReducer5(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
+  const apiRef = useRef9(api);
   apiRef.current = api;
-  const activeSubjectKey = useRef7("");
+  const activeSubjectKey = useRef9("");
   const confirmsRead = channelCapabilityFor(channel).confirmsRead;
   const refresh = useCallback4(async () => {
     const requestKey = `${subjectType}:${subjectId}`;
@@ -2056,7 +2316,7 @@ function useParticipantThread(params) {
   }, [stableSubject, subjectType, subjectId, oldestMessageId]);
   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();
@@ -2064,7 +2324,7 @@ 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]);
@@ -2113,9 +2373,9 @@ function useParticipantConversationView(params) {
 }
 
 // src/participant/useParticipantDraft.ts
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 function useParticipantDraft(draftsRef, subject) {
-  const [draft, setDraftState] = useState5(() => getDraft(draftsRef.current, subject));
+  const [draft, setDraftState] = useState6(() => getDraft(draftsRef.current, subject));
   function replaceDrafts(next) {
     draftsRef.current = next;
     setDraftState(getDraft(next, subject));
@@ -2135,7 +2395,7 @@ function useParticipantDraft(draftsRef, subject) {
 }
 
 // src/participant/useParticipantThreadScroll.ts
-import { useEffect as useEffect10, useRef as useRef9 } from "react";
+import { useEffect as useEffect12, useRef as useRef11 } from "react";
 
 // src/participant/participantNewMessages.ts
 function collectServerMessageIds(items) {
@@ -2173,7 +2433,7 @@ function useScrollAwayState(ref, isNearBottom) {
 }
 
 // src/participant/useStickToBottom.ts
-import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState6 } 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;
@@ -2195,16 +2455,16 @@ function resolveScrollAction(params) {
 
 // src/participant/useStickToBottom.ts
 function useStickToBottom({ firstKey, lastKey }) {
-  const ref = useRef8(null);
-  const snapshot = useRef8({
+  const ref = useRef10(null);
+  const snapshot = useRef10({
     hasPositioned: false,
     firstKey: void 0,
     lastKey: void 0,
     scrollTop: 0,
     scrollHeight: 0
   });
-  const [isNearBottom, setIsNearBottom] = useState6(true);
-  const isNearBottomRef = useRef8(true);
+  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 });
@@ -2213,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;
@@ -2260,8 +2520,8 @@ function useParticipantThreadScroll(items, perspective) {
   });
   const { isAwayFromBottom, scrollToLatest } = useScrollAwayState(base.ref, isNearBottom);
   const scroll = { ...base, isAwayFromBottom, scrollToLatest };
-  const seenIds = useRef9(/* @__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, perspective) };
@@ -2314,12 +2574,12 @@ function useParticipantThreadController(params) {
 }
 
 // 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] = useState7({ 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" });
@@ -2337,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) {
@@ -2349,12 +2609,12 @@ 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 core = useParticipantThreadController({
@@ -2362,7 +2622,7 @@ function LoadedThread(props) {
     subject: props.selected,
     onMarkedRead: props.inbox.markSubjectRead
   });
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     ParticipantThread,
     {
       ...core,
@@ -2500,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] = useState8(ALL_FILTER3);
-  const [searchQuery, setSearchQuery] = useState8("");
-  const draftsRef = useRef10(/* @__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({
@@ -2520,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,
@@ -2537,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,
@@ -2552,7 +2812,7 @@ function ParticipantConversationsScreen(props) {
 }
 
 // src/participant/useParticipantInbox.ts
-import { useCallback as useCallback8, 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: [] };
@@ -2602,7 +2862,7 @@ function describeError2(error) {
   return error instanceof Error ? error.message : "unknown error";
 }
 function useParticipantInbox(api) {
-  const [state, dispatch] = useReducer6(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
+  const [state, dispatch] = useReducer7(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
   const refresh = useCallback8(async () => {
     dispatch({ type: "started" });
     try {
@@ -2625,7 +2885,7 @@ function useParticipantInbox(api) {
   const markSubjectRead = useCallback8((subject) => {
     dispatch({ type: "markedRead", subject });
   }, []);
-  useEffect12(() => {
+  useEffect14(() => {
     void refresh();
   }, [refresh]);
   useParticipantRevalidation(api, () => {
@@ -2635,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,
@@ -2649,7 +2909,7 @@ function ParticipantConversations(props) {
 }
 
 // src/participant/ConversationThread.tsx
-import { useCallback as useCallback9, useMemo as useMemo6, useReducer as useReducer7, useRef as useRef11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo6, useReducer as useReducer8, useRef as useRef13 } from "react";
 
 // src/participant/conversationThreadApi.ts
 function toParticipantApi(api) {
@@ -2689,17 +2949,17 @@ function buildThreadSummary({
 }
 
 // src/participant/ConversationThread.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+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 = useRef11(props.onMarkedRead);
+  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 = useRef11(/* @__PURE__ */ new Map());
-  const [sendStates, dispatchSendStates] = useReducer7(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  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(
@@ -2724,12 +2984,12 @@ function useConversationThreadCore(props) {
 }
 function ConversationThreadBody(props) {
   const core = useConversationThreadCore(props);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx30(
     "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(
+      children: /* @__PURE__ */ jsx30("div", { className: "cv-p-root__screen", children: /* @__PURE__ */ jsx30(
         ParticipantThread,
         {
           ...core,
@@ -2748,7 +3008,7 @@ function ConversationThreadBody(props) {
   );
 }
 function ConversationThread(props) {
-  return /* @__PURE__ */ jsx27(ConversationThreadBody, { ...props }, draftKey(props.subject));
+  return /* @__PURE__ */ jsx30(ConversationThreadBody, { ...props }, draftKey(props.subject));
 }
 export {
   ConversationThread,