@adatechnology/conversations-ui 0.5.0 → 0.6.0

package/dist/participant/index.js

@@ -1,17 +1,26 @@
 import {
   MessageText
-} from "../chunk-WSFGNR5R.js";
+} from "../chunk-OVFCLRQQ.js";
 import {
   StatusTicks,
   channelCapabilityFor,
   formatFileSize,
   formatTimestamp,
   isSameDay
-} from "../chunk-RJMSM3YA.js";
+} from "../chunk-O6457XHK.js";
 import "../chunk-CBYEHPX6.js";
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { useMemo as useMemo4, useReducer as useReducer2, useRef as useRef7, useState as useState7 } from "react";
+import { useMemo as useMemo4, useReducer as useReducer3, useRef as useRef7, useState as useState7 } from "react";
+
+// src/participant/participantLoadView.ts
+function resolveLoadView({ status, hasItems }) {
+  return {
+    isLoading: (status === "idle" || status === "loading") && !hasItems,
+    hasError: status === "error",
+    isEmpty: status === "ready" && !hasItems
+  };
+}
 
 // src/participant/participantLabels.ts
 var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
@@ -52,44 +61,171 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   notFound: "Conversation not found",
   loading: "Loading\u2026",
   loadError: "Could not load. Check your connection and try again.",
-  loadMore: "Load more"
+  loadMore: "Load more",
+  searchLabel: "Search conversations",
+  searchPlaceholder: "Search by title or protocol",
+  noResults: "No conversations found",
+  noResultsInFilter: "No results in this filter \u2014 try All",
+  noResultsLoadedOnly: "Nothing in the loaded conversations \u2014 load more",
+  protocolPrefix: "Protocol",
+  copyProtocol: "Copy protocol",
+  protocolCopied: "Protocol copied",
+  channelsGroup: "Channels in this conversation",
+  channelApp: "App",
+  channelWhatsapp: "WhatsApp",
+  channelEmail: "Email",
+  channelPortal: "Portal",
+  channelWebchat: "Web chat"
 };
 function formatParticipantLabel(template, count) {
   return template.replace("{count}", String(count));
 }
 
-// src/participant/participantLoadView.ts
-function resolveLoadView({ status, hasItems }) {
-  return {
-    isLoading: (status === "idle" || status === "loading") && !hasItems,
-    hasError: status === "error",
-    isEmpty: status === "ready" && !hasItems
-  };
+// src/participant/ParticipantChannelBadges.tsx
+import { Globe, Mail, MessageCircle, MessagesSquare, Smartphone } from "lucide-react";
+
+// src/participant/participantChannels.ts
+var PARTICIPANT_CHANNEL_ORDER = [
+  { channel: "app", iconName: "Smartphone", labelKey: "channelApp" },
+  { channel: "whatsapp", iconName: "MessageCircle", labelKey: "channelWhatsapp" },
+  { channel: "email", iconName: "Mail", labelKey: "channelEmail" },
+  { channel: "portal", iconName: "Globe", labelKey: "channelPortal" },
+  { channel: "webchat", iconName: "MessagesSquare", labelKey: "channelWebchat" }
+];
+function resolveParticipantChannels(channels) {
+  if (channels === void 0 || channels.length === 0) return [];
+  const present = new Set(channels);
+  return PARTICIPANT_CHANNEL_ORDER.filter((descriptor) => present.has(descriptor.channel));
+}
+function resolveParticipantChannelLabel(descriptor, labels) {
+  return labels[descriptor.labelKey];
+}
+
+// src/participant/ParticipantChannelBadges.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ICONS = {
+  Smartphone,
+  MessageCircle,
+  Mail,
+  Globe,
+  MessagesSquare
+};
+function BadgeContent({ descriptor, labels, separator }) {
+  const Icon = ICONS[descriptor.iconName];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { size: 14, "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "cv-p-sr-only", children: `${resolveParticipantChannelLabel(descriptor, labels)}${separator}` })
+  ] });
+}
+function ParticipantChannelBadges({ channels, labels, variant = "list" }) {
+  const descriptors = resolveParticipantChannels(channels);
+  if (descriptors.length === 0) return null;
+  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,
+        {
+          descriptor,
+          labels,
+          separator: index < descriptors.length - 1 ? ", " : ""
+        }
+      ) }, descriptor.channel))
+    ] });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "cv-p-channels", "aria-label": labels.channelsGroup, children: descriptors.map((descriptor) => /* @__PURE__ */ jsx("li", { className: `cv-p-channel cv-p-channel--${descriptor.channel}`, children: /* @__PURE__ */ jsx(BadgeContent, { descriptor, labels, separator: "" }) }, descriptor.channel)) });
+}
+
+// src/participant/ParticipantInboxRow.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatRowTime(iso, locale) {
+  const date = new Date(iso);
+  if (isSameDay(date, /* @__PURE__ */ new Date())) return formatTimestamp(iso);
+  return date.toLocaleDateString(locale, { day: "2-digit", month: "2-digit" });
+}
+function RowIcon({ props, kind }) {
+  const custom = props.renderSubjectIcon?.(props.conversation);
+  if (custom !== null && custom !== void 0 && custom !== false && custom !== "") {
+    return /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon cv-p-inbox__icon", "aria-hidden": "true", children: custom });
+  }
+  return /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon", "aria-hidden": "true", children: props.group?.icon ?? kind.slice(0, 2) });
+}
+function ParticipantInboxRow(props) {
+  const { conversation, group, labels, locale, onSelect } = props;
+  const kind = group?.label ?? conversation.subjectType;
+  const className = conversation.awaitingParticipant ? "cv-p-row cv-p-row--awaiting" : "cv-p-row";
+  const { subjectType, subjectId } = conversation;
+  return /* @__PURE__ */ jsxs2("button", { type: "button", className, onClick: () => onSelect({ subjectType, subjectId }), children: [
+    /* @__PURE__ */ jsx2(RowIcon, { props, kind }),
+    /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__body", children: [
+      /* @__PURE__ */ jsx2("span", { className: "cv-p-row__kind", children: kind }),
+      /* @__PURE__ */ jsx2("span", { className: "cv-p-row__title", children: conversation.subjectLabel }),
+      /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__tags", children: [
+        conversation.protocol ? /* @__PURE__ */ jsxs2("span", { className: "cv-p-protocol", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "cv-p-sr-only", children: [
+            labels.protocolPrefix,
+            " "
+          ] }),
+          conversation.protocol
+        ] }) : null,
+        /* @__PURE__ */ jsx2(ParticipantChannelBadges, { channels: conversation.channels, labels, variant: "inline" })
+      ] }),
+      conversation.lastMessagePreview ? /* @__PURE__ */ jsx2("span", { className: "cv-p-row__preview", children: conversation.lastMessagePreview }) : null
+    ] }),
+    /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__meta", children: [
+      conversation.lastMessageAt ? /* @__PURE__ */ jsx2("span", { children: formatRowTime(conversation.lastMessageAt, locale) }) : null,
+      conversation.unreadCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__unread", children: [
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: conversation.unreadCount }),
+        /* @__PURE__ */ jsx2("span", { className: "cv-p-sr-only", children: formatParticipantLabel(labels.unreadCount, conversation.unreadCount) })
+      ] }) : null
+    ] })
+  ] });
+}
+
+// src/participant/ParticipantInboxSearchField.tsx
+import { useId } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ParticipantInboxSearchField({ search, labels }) {
+  const inputId = useId();
+  return /* @__PURE__ */ jsxs3("div", { className: "cv-p-search", children: [
+    /* @__PURE__ */ jsx3("label", { className: "cv-p-sr-only", htmlFor: inputId, children: labels.searchLabel }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        id: inputId,
+        type: "search",
+        className: "cv-p-search__input",
+        value: search.value,
+        placeholder: labels.searchPlaceholder,
+        autoComplete: "off",
+        onChange: (event) => search.onChange(event.target.value)
+      }
+    )
+  ] });
 }
 
 // src/participant/ParticipantLoadState.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ParticipantLoadError({ labels, onRetry }) {
-  return /* @__PURE__ */ jsxs("div", { className: "cv-p-error", role: "alert", children: [
-    /* @__PURE__ */ jsx("p", { className: "cv-p-error__message", children: labels.loadError }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "cv-p-button", onClick: onRetry, children: labels.retry })
+  return /* @__PURE__ */ jsxs4("div", { className: "cv-p-error", role: "alert", children: [
+    /* @__PURE__ */ jsx4("p", { className: "cv-p-error__message", children: labels.loadError }),
+    /* @__PURE__ */ jsx4("button", { type: "button", className: "cv-p-button", onClick: onRetry, children: labels.retry })
   ] });
 }
 function ParticipantLoading({ labels }) {
-  return /* @__PURE__ */ jsxs("div", { className: "cv-p-loading", children: [
-    /* @__PURE__ */ jsx("span", { className: "cv-p-skeleton", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx("span", { className: "cv-p-skeleton", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx("span", { className: "cv-p-sr-only", children: labels.loading })
+  return /* @__PURE__ */ jsxs4("div", { className: "cv-p-loading", children: [
+    /* @__PURE__ */ jsx4("span", { className: "cv-p-skeleton", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx4("span", { className: "cv-p-skeleton", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx4("span", { className: "cv-p-sr-only", children: labels.loading })
   ] });
 }
 
 // src/participant/ParticipantInbox.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ALL_FILTER = "all";
-function formatRowTime(iso, locale) {
-  const date = new Date(iso);
-  if (isSameDay(date, /* @__PURE__ */ new Date())) return formatTimestamp(iso);
-  return date.toLocaleDateString(locale, { day: "2-digit", month: "2-digit" });
+function resolveNoResultsLabel({ view, hasMore, labels }) {
+  if (view.hasMatchesOutsideFilter) return labels.noResultsInFilter;
+  return hasMore ? labels.noResultsLoadedOnly : labels.noResults;
 }
 function sectionTitle(section, props) {
   if (section.key === "awaiting") return props.labels.sectionAwaiting;
@@ -98,7 +234,7 @@ function sectionTitle(section, props) {
   return props.subjectGroups.find((group) => group.subjectType === section.key)?.label ?? section.key;
 }
 function Filters({ filters, active, labels, onChange }) {
-  return /* @__PURE__ */ jsx2("div", { className: "cv-p-filters", role: "group", "aria-label": labels.filtersGroup, children: filters.map((filter) => /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx5("div", { className: "cv-p-filters", role: "group", "aria-label": labels.filtersGroup, children: filters.map((filter) => /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
@@ -107,79 +243,68 @@ function Filters({ filters, active, labels, onChange }) {
       onClick: () => onChange(filter.subjectType),
       children: [
         filter.subjectType === ALL_FILTER ? labels.filterAll : filter.label,
-        filter.unreadCount > 0 ? /* @__PURE__ */ jsx2("b", { className: "cv-p-chip__count", children: filter.unreadCount }) : null
+        filter.unreadCount > 0 ? /* @__PURE__ */ jsx5("b", { className: "cv-p-chip__count", children: filter.unreadCount }) : null
       ]
     },
     filter.subjectType
   )) });
 }
-function Row({ conversation, group, labels, locale, onSelect }) {
-  const kind = group?.label ?? conversation.subjectType;
-  const className = conversation.awaitingParticipant ? "cv-p-row cv-p-row--awaiting" : "cv-p-row";
-  const { subjectType, subjectId } = conversation;
-  return /* @__PURE__ */ jsxs2("button", { type: "button", className, onClick: () => onSelect({ subjectType, subjectId }), children: [
-    /* @__PURE__ */ jsx2("span", { className: "cv-p-row__icon", "aria-hidden": "true", children: group?.icon ?? kind.slice(0, 2) }),
-    /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__body", children: [
-      /* @__PURE__ */ jsx2("span", { className: "cv-p-row__kind", children: kind }),
-      /* @__PURE__ */ jsx2("span", { className: "cv-p-row__title", children: conversation.subjectLabel }),
-      conversation.lastMessagePreview ? /* @__PURE__ */ jsx2("span", { className: "cv-p-row__preview", children: conversation.lastMessagePreview }) : null
-    ] }),
-    /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__meta", children: [
-      conversation.lastMessageAt ? /* @__PURE__ */ jsx2("span", { children: formatRowTime(conversation.lastMessageAt, locale) }) : null,
-      conversation.unreadCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "cv-p-row__unread", children: [
-        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: conversation.unreadCount }),
-        /* @__PURE__ */ jsx2("span", { className: "cv-p-sr-only", children: formatParticipantLabel(labels.unreadCount, conversation.unreadCount) })
-      ] }) : null
-    ] })
-  ] });
-}
 function SectionHeading({ title, count }) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2("span", { className: "cv-p-section__title", children: title }),
-    /* @__PURE__ */ jsx2("span", { className: "cv-p-section__count", children: count })
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "cv-p-section__title", children: title }),
+    /* @__PURE__ */ jsx5("span", { className: "cv-p-section__count", children: count })
   ] });
 }
-function Section({ section, props }) {
-  const rows = section.conversations.map((conversation) => /* @__PURE__ */ jsx2(
-    Row,
+function Section({
+  section,
+  props
+}) {
+  const rows = section.conversations.map((conversation) => /* @__PURE__ */ jsx5(
+    ParticipantInboxRow,
     {
       conversation,
       group: props.subjectGroups.find((group) => group.subjectType === conversation.subjectType),
       labels: props.labels,
       locale: props.locale,
-      onSelect: props.onSelect
+      onSelect: props.onSelect,
+      renderSubjectIcon: props.renderSubjectIcon
     },
     `${conversation.subjectType}:${conversation.subjectId}`
   ));
-  const heading = /* @__PURE__ */ jsx2(SectionHeading, { title: sectionTitle(section, props), count: section.conversations.length });
+  const heading = /* @__PURE__ */ jsx5(SectionHeading, { title: sectionTitle(section, props), count: section.conversations.length });
   if (section.key === "closed") {
-    return /* @__PURE__ */ jsxs2("details", { className: "cv-p-section cv-p-section--closed", children: [
-      /* @__PURE__ */ jsx2("summary", { className: "cv-p-section__heading", children: heading }),
+    return /* @__PURE__ */ jsxs5("details", { className: "cv-p-section cv-p-section--closed", children: [
+      /* @__PURE__ */ jsx5("summary", { className: "cv-p-section__heading", children: heading }),
       rows
     ] });
   }
   const modifier = section.key === "awaiting" ? " cv-p-section--awaiting" : "";
-  return /* @__PURE__ */ jsxs2("section", { className: `cv-p-section${modifier}`, children: [
-    /* @__PURE__ */ jsx2("h3", { className: "cv-p-section__heading", children: heading }),
+  return /* @__PURE__ */ jsxs5("section", { className: `cv-p-section${modifier}`, children: [
+    /* @__PURE__ */ jsx5("h3", { className: "cv-p-section__heading", children: heading }),
     rows
   ] });
 }
 function ParticipantInbox(props) {
   const { view, labels, filter, onFilterChange } = props;
-  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 });
-  return /* @__PURE__ */ jsxs2("div", { className: "cv-p cv-p-inbox", "aria-busy": loadView.isLoading, children: [
-    /* @__PURE__ */ jsx2("h2", { className: "cv-p-inbox__title", children: labels.inboxTitle }),
-    view.showFilters ? /* @__PURE__ */ jsx2(Filters, { filters: view.filters, active: filter, labels, onChange: onFilterChange }) : null,
-    loadView.isLoading ? /* @__PURE__ */ jsx2(ParticipantLoading, { labels }) : null,
-    loadView.hasError ? /* @__PURE__ */ jsx2(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
-    loadView.isEmpty ? /* @__PURE__ */ jsx2("p", { className: "cv-p-empty", children: labels.emptyInbox }) : null,
-    view.sections.map((section) => /* @__PURE__ */ jsx2(Section, { section, props }, section.key)),
-    props.hasMore ? /* @__PURE__ */ jsx2("button", { type: "button", className: "cv-p-button cv-p-inbox__more", onClick: props.loadMore, children: labels.loadMore }) : null
+  const isSearching = (props.search?.value.trim() ?? "") !== "";
+  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 || isSearching });
+  const hasNoResults = isSearching && view.sections.length === 0 && props.status === "ready";
+  const noResultsLabel = resolveNoResultsLabel(props);
+  return /* @__PURE__ */ jsxs5("div", { className: "cv-p cv-p-inbox", "aria-busy": loadView.isLoading, children: [
+    /* @__PURE__ */ jsx5("h2", { className: "cv-p-inbox__title", children: labels.inboxTitle }),
+    view.showFilters ? /* @__PURE__ */ jsx5(Filters, { filters: view.filters, active: view.activeFilter, labels, onChange: onFilterChange }) : null,
+    props.search?.isVisible ? /* @__PURE__ */ jsx5(ParticipantInboxSearchField, { search: props.search, labels }) : null,
+    loadView.isLoading ? /* @__PURE__ */ jsx5(ParticipantLoading, { labels }) : null,
+    loadView.hasError ? /* @__PURE__ */ jsx5(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+    loadView.isEmpty ? /* @__PURE__ */ jsx5("p", { className: "cv-p-empty", children: labels.emptyInbox }) : null,
+    hasNoResults ? /* @__PURE__ */ jsx5("p", { className: "cv-p-empty", children: noResultsLabel }) : null,
+    view.sections.map((section) => /* @__PURE__ */ jsx5(Section, { section, props }, section.key)),
+    props.hasMore ? /* @__PURE__ */ jsx5("button", { type: "button", className: "cv-p-button cv-p-inbox__more", onClick: props.loadMore, children: labels.loadMore }) : null
   ] });
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { useEffect as useEffect7, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/participant/ParticipantComposer.tsx
 import { useRef, useState } from "react";
@@ -217,18 +342,18 @@ function applyQuickReply(currentText, replyText) {
 }
 
 // src/participant/ParticipantComposer.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function QuickReplyStrip({ quickReplies, labels, onPick }) {
-  return /* @__PURE__ */ jsx3("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx3("button", { type: "button", className: "cv-p-chip", onClick: () => onPick(quickReply.body), children: quickReply.title }, quickReply.id)) });
+  return /* @__PURE__ */ jsx6("div", { className: "cv-p-quick", role: "group", "aria-label": labels.quickRepliesGroup, children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx6("button", { type: "button", className: "cv-p-chip", onClick: () => onPick(quickReply.body), children: quickReply.title }, quickReply.id)) });
 }
 function FileList({ files, labels, onRemove }) {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx3("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs3("li", { className: "cv-p-files__item", children: [
-    /* @__PURE__ */ jsx3("span", { className: "cv-p-files__name", children: file.name }),
-    /* @__PURE__ */ jsx3("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
-    /* @__PURE__ */ jsxs3("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, onClick: () => onRemove(file), children: [
-      /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\xD7" }),
-      /* @__PURE__ */ jsx3("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
+  return /* @__PURE__ */ jsx6("ul", { className: "cv-p-files", "aria-label": labels.attachmentsList, children: files.map((file, index) => /* @__PURE__ */ jsxs6("li", { className: "cv-p-files__item", children: [
+    /* @__PURE__ */ jsx6("span", { className: "cv-p-files__name", children: file.name }),
+    /* @__PURE__ */ jsx6("span", { className: "cv-p-files__size", children: formatFileSize(file.size) }),
+    /* @__PURE__ */ jsxs6("button", { type: "button", className: "cv-p-files__remove", "aria-label": `${labels.removeAttachment}: ${file.name}`, onClick: () => onRemove(file), children: [
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\xD7" }),
+      /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.removeAttachment })
     ] })
   ] }, `${file.name}-${file.size}-${index}`)) });
 }
@@ -237,8 +362,8 @@ function rejectionText(rejection, labels) {
 }
 function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
   const fileInputRef = useRef(null);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
       "input",
       {
         ref: fileInputRef,
@@ -250,9 +375,9 @@ function AttachControl({ labels, disabled, acceptedTypes, onChosen }) {
         onChange: onChosen
       }
     ),
-    /* @__PURE__ */ jsxs3("button", { type: "button", className: "cv-p-button", disabled, onClick: () => fileInputRef.current?.click(), children: [
-      /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\uFF0B" }),
-      /* @__PURE__ */ jsx3("span", { className: "cv-p-sr-only", children: labels.attach })
+    /* @__PURE__ */ jsxs6("button", { type: "button", className: "cv-p-button", disabled, onClick: () => fileInputRef.current?.click(), children: [
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\uFF0B" }),
+      /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.attach })
     ] })
   ] });
 }
@@ -281,13 +406,13 @@ function ParticipantComposer(props) {
     event.preventDefault();
     if (canSend) onSend();
   }
-  return /* @__PURE__ */ jsxs3("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
-    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx3(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
-    /* @__PURE__ */ jsx3(FileList, { files, labels, onRemove: handleRemoveFile }),
-    rejection ? /* @__PURE__ */ jsx3("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
-    /* @__PURE__ */ jsxs3("div", { className: "cv-p-composer__row", children: [
-      channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx3(AttachControl, { labels, disabled, acceptedTypes: props.acceptedTypes, onChosen: handleFilesChosen }) : null,
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs6("form", { className: "cv-p-composer", onSubmit: handleSubmit, children: [
+    props.quickReplies && props.quickReplies.length > 0 ? /* @__PURE__ */ jsx6(QuickReplyStrip, { quickReplies: props.quickReplies, labels, onPick: (body) => onChange(applyQuickReply(value, body)) }) : null,
+    /* @__PURE__ */ jsx6(FileList, { files, labels, onRemove: handleRemoveFile }),
+    rejection ? /* @__PURE__ */ jsx6("p", { className: "cv-p-composer__error", role: "alert", children: rejectionText(rejection, labels) }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "cv-p-composer__row", children: [
+      channelCapabilityFor(channel).attachments.accepted ? /* @__PURE__ */ jsx6(AttachControl, { labels, disabled, acceptedTypes: props.acceptedTypes, onChosen: handleFilesChosen }) : null,
+      /* @__PURE__ */ jsx6(
         "textarea",
         {
           className: "cv-p-composer__input",
@@ -300,9 +425,9 @@ function ParticipantComposer(props) {
           onChange: (event) => onChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs3("button", { type: "submit", className: "cv-p-button cv-p-button--primary", disabled: !canSend, children: [
-        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u27A4" }),
-        /* @__PURE__ */ jsx3("span", { className: "cv-p-sr-only", children: labels.send })
+      /* @__PURE__ */ jsxs6("button", { type: "submit", className: "cv-p-button cv-p-button--primary", disabled: !canSend, children: [
+        /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u27A4" }),
+        /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.send })
       ] })
     ] })
   ] });
@@ -338,7 +463,7 @@ function isSafeAttachmentUrl(url) {
 }
 
 // src/participant/ParticipantAttachmentItem.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function useAttachmentUrl(attachment, resolveAttachmentUrl) {
   const [url, setUrl] = useState2(void 0);
   const disposition = attachment.kind === "document" ? "attachment" : "inline";
@@ -361,18 +486,18 @@ function useAttachmentUrl(attachment, resolveAttachmentUrl) {
 function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }) {
   const url = useAttachmentUrl(attachment, resolveAttachmentUrl);
   if (attachment.kind === "image") {
-    return /* @__PURE__ */ jsxs4("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
-      url ? /* @__PURE__ */ jsx4("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
-      /* @__PURE__ */ jsx4("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
+    return /* @__PURE__ */ jsxs7("figure", { className: "cv-p-attachment cv-p-attachment--image", children: [
+      url ? /* @__PURE__ */ jsx7("img", { className: "cv-p-attachment__image", src: url, alt: attachment.filename }) : null,
+      /* @__PURE__ */ jsx7("figcaption", { className: "cv-p-attachment__name", children: attachment.filename })
     ] });
   }
   if (attachment.kind === "audio") {
-    return /* @__PURE__ */ jsxs4("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
-      /* @__PURE__ */ jsx4("span", { className: "cv-p-attachment__name", children: attachment.filename }),
-      /* @__PURE__ */ jsx4("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
+    return /* @__PURE__ */ jsxs7("div", { className: "cv-p-attachment cv-p-attachment--audio", children: [
+      /* @__PURE__ */ jsx7("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+      /* @__PURE__ */ jsx7("audio", { className: "cv-p-attachment__audio", controls: true, preload: "none", src: url })
     ] });
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     "a",
     {
       className: "cv-p-attachment cv-p-attachment--document",
@@ -380,8 +505,8 @@ function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels })
       download: attachment.filename,
       "aria-label": `${labels.downloadAttachment}: ${attachment.filename}`,
       children: [
-        /* @__PURE__ */ jsx4("span", { className: "cv-p-attachment__name", children: attachment.filename }),
-        /* @__PURE__ */ jsx4("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
+        /* @__PURE__ */ jsx7("span", { className: "cv-p-attachment__name", children: attachment.filename }),
+        /* @__PURE__ */ jsx7("span", { className: "cv-p-attachment__size", children: formatFileSize(attachment.sizeBytes) })
       ]
     }
   );
@@ -425,7 +550,7 @@ function resolveOwnMessageStatus(params) {
 }
 
 // src/participant/ParticipantMessageBubble.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function describeItem(item) {
   if (item.kind === "server") {
     const { message } = item;
@@ -463,22 +588,22 @@ function OwnStatus({ status, labels, onRetry }) {
   const ticksStatus = status === "sending" ? "queued" : status;
   const isVisibleText = status === "sending" || status === "queued" || status === "failed";
   if (status === "failed" && onRetry) {
-    return /* @__PURE__ */ jsxs5("button", { type: "button", className: "cv-p-bubble__retry", onClick: onRetry, children: [
-      /* @__PURE__ */ jsx5(StatusTicks, { status: "failed" }),
-      /* @__PURE__ */ jsx5("span", { children: labels.statusFailed })
+    return /* @__PURE__ */ jsxs8("button", { type: "button", className: "cv-p-bubble__retry", onClick: onRetry, children: [
+      /* @__PURE__ */ jsx8(StatusTicks, { status: "failed", appearance: "stylesheet" }),
+      /* @__PURE__ */ jsx8("span", { children: labels.statusFailed })
     ] });
   }
   const text = status === "failed" ? labels.statusFailedShort : statusText(status, labels);
-  return /* @__PURE__ */ jsxs5("span", { className: "cv-p-bubble__status", children: [
-    /* @__PURE__ */ jsx5(StatusTicks, { status: ticksStatus }),
-    /* @__PURE__ */ jsx5("span", { className: isVisibleText ? "cv-p-bubble__status-text" : "cv-p-sr-only", children: text })
+  return /* @__PURE__ */ jsxs8("span", { className: "cv-p-bubble__status", children: [
+    /* @__PURE__ */ jsx8(StatusTicks, { status: ticksStatus, appearance: "stylesheet" }),
+    /* @__PURE__ */ jsx8("span", { className: isVisibleText ? "cv-p-bubble__status-text" : "cv-p-sr-only", children: text })
   ] });
 }
 function FailedActions({ labels, onDiscard, onEdit }) {
   if (!onDiscard && !onEdit) return null;
-  return /* @__PURE__ */ jsxs5("span", { className: "cv-p-bubble__actions", children: [
-    onEdit ? /* @__PURE__ */ jsx5("button", { type: "button", className: "cv-p-bubble__action", onClick: onEdit, children: labels.edit }) : null,
-    onDiscard ? /* @__PURE__ */ jsx5("button", { type: "button", className: "cv-p-bubble__action", onClick: onDiscard, children: labels.discard }) : null
+  return /* @__PURE__ */ jsxs8("span", { className: "cv-p-bubble__actions", children: [
+    onEdit ? /* @__PURE__ */ jsx8("button", { type: "button", className: "cv-p-bubble__action", onClick: onEdit, children: labels.edit }) : null,
+    onDiscard ? /* @__PURE__ */ jsx8("button", { type: "button", className: "cv-p-bubble__action", onClick: onDiscard, children: labels.discard }) : null
   ] });
 }
 function toTextPayload(text, createdAt, isMine) {
@@ -503,10 +628,10 @@ function ParticipantMessageBubble({
   const content = describeItem(item);
   const { isMine } = content;
   const ownStatus = isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
-  return /* @__PURE__ */ jsxs5("div", { className: isMine ? "cv-p-bubble cv-p-bubble--mine" : "cv-p-bubble", children: [
-    isMine ? /* @__PURE__ */ jsx5("span", { className: "cv-p-sr-only", children: labels.me }) : content.authorName ? /* @__PURE__ */ jsx5("span", { className: "cv-p-bubble__author", children: content.authorName }) : null,
-    content.text ? /* @__PURE__ */ jsx5(MessageText, { message: toTextPayload(content.text, content.createdAt, isMine), copyOnClick: false }) : null,
-    content.attachments.map((attachment) => /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs8("div", { className: isMine ? "cv-p-bubble cv-p-bubble--mine" : "cv-p-bubble", children: [
+    isMine ? /* @__PURE__ */ jsx8("span", { className: "cv-p-sr-only", children: labels.me }) : content.authorName ? /* @__PURE__ */ jsx8("span", { className: "cv-p-bubble__author", children: content.authorName }) : null,
+    content.text ? /* @__PURE__ */ jsx8(MessageText, { message: toTextPayload(content.text, content.createdAt, isMine), copyOnClick: false, appearance: "stylesheet" }) : null,
+    content.attachments.map((attachment) => /* @__PURE__ */ jsx8(
       ParticipantAttachmentItem,
       {
         attachment,
@@ -515,17 +640,90 @@ function ParticipantMessageBubble({
       },
       attachment.id
     )),
-    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx5("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
-    /* @__PURE__ */ jsxs5("span", { className: "cv-p-bubble__meta", children: [
-      /* @__PURE__ */ jsx5("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
-      ownStatus ? /* @__PURE__ */ jsx5(OwnStatus, { status: ownStatus, labels, onRetry }) : null
+    content.pendingFilenames.map((filename, index) => /* @__PURE__ */ jsx8("span", { className: "cv-p-attachment cv-p-attachment--pending", children: filename }, `${filename}-${index}`)),
+    /* @__PURE__ */ jsxs8("span", { className: "cv-p-bubble__meta", children: [
+      /* @__PURE__ */ jsx8("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
+      ownStatus ? /* @__PURE__ */ jsx8(OwnStatus, { status: ownStatus, labels, onRetry }) : null
     ] }),
-    ownStatus === "failed" ? /* @__PURE__ */ jsx5(FailedActions, { labels, onDiscard, onEdit }) : null
+    ownStatus === "failed" ? /* @__PURE__ */ jsx8(FailedActions, { labels, onDiscard, onEdit }) : null
   ] });
 }
 
+// src/participant/ParticipantProtocolBadge.tsx
+import { useEffect as useEffect2, useReducer } from "react";
+
+// src/participant/participantProtocolCopy.ts
+async function copyProtocolToClipboard(protocol, clipboard) {
+  if (clipboard === void 0) return false;
+  try {
+    await clipboard.writeText(protocol);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var INITIAL_PROTOCOL_COPY_STATE = { copyCount: 0, isCopied: false };
+function protocolCopyReducer(state, action) {
+  if (action.type === "copied") return { copyCount: state.copyCount + 1, isCopied: true };
+  return { ...state, isCopied: false };
+}
+
+// src/participant/ParticipantProtocolBadge.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var COPIED_ANNOUNCEMENT_MS = 3e3;
+function ParticipantProtocolBadgeView({
+  protocol,
+  labels,
+  copyState,
+  onCopy
+}) {
+  const { isCopied, copyCount } = copyState;
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsxs9("div", { className: "cv-p-protocol cv-p-protocol--header", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "cv-p-protocol__code", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "cv-p-sr-only", children: [
+          labels.protocolPrefix,
+          " "
+        ] }),
+        protocol
+      ] }),
+      /* @__PURE__ */ jsxs9("button", { type: "button", className: "cv-p-protocol__copy", onClick: onCopy, children: [
+        /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: isCopied ? labels.protocolCopied : labels.copyProtocol }),
+        /* @__PURE__ */ jsxs9("span", { className: "cv-p-sr-only", children: [
+          labels.copyProtocol,
+          " ",
+          protocol
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "cv-p-sr-only", role: "status", "aria-live": "polite", children: isCopied ? /* @__PURE__ */ jsx9("span", { children: labels.protocolCopied }, copyCount) : null })
+  ] });
+}
+function ParticipantProtocolBadge({ protocol, labels }) {
+  const [copyState, dispatch] = useReducer(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE);
+  const { isCopied, copyCount } = copyState;
+  useEffect2(() => {
+    if (!isCopied) return void 0;
+    const timer = setTimeout(() => dispatch({ type: "expired" }), COPIED_ANNOUNCEMENT_MS);
+    return () => clearTimeout(timer);
+  }, [isCopied, copyCount]);
+  async function handleCopy() {
+    const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+    if (await copyProtocolToClipboard(protocol, clipboard)) dispatch({ type: "copied" });
+  }
+  return /* @__PURE__ */ jsx9(
+    ParticipantProtocolBadgeView,
+    {
+      protocol,
+      labels,
+      copyState,
+      onCopy: () => void handleCopy()
+    }
+  );
+}
+
 // src/participant/ParticipantThread.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function createdAtOf2(item) {
   return item.kind === "server" ? item.message.createdAt : item.pending.createdAt;
 }
@@ -539,21 +737,25 @@ function resolveActions(item, pendingActions) {
 function Header({ props }) {
   const { conversation, labels, onBack, onOpenSubject } = props;
   const { subjectType, subjectId } = conversation;
-  return /* @__PURE__ */ jsxs6("header", { className: "cv-p-thread__header", children: [
-    onBack ? /* @__PURE__ */ jsxs6("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
-      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2039" }),
-      /* @__PURE__ */ jsx6("span", { className: "cv-p-sr-only", children: labels.back })
+  return /* @__PURE__ */ jsxs10("header", { className: "cv-p-thread__header", children: [
+    onBack ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: "\u2039" }),
+      /* @__PURE__ */ jsx10("span", { className: "cv-p-sr-only", children: labels.back })
     ] }) : null,
-    /* @__PURE__ */ jsx6("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx6(
-      "button",
-      {
-        type: "button",
-        className: "cv-p-thread__title-button",
-        "aria-label": `${labels.openSubject}: ${conversation.subjectLabel}`,
-        onClick: () => onOpenSubject({ subjectType, subjectId }),
-        children: conversation.subjectLabel
-      }
-    ) : conversation.subjectLabel })
+    /* @__PURE__ */ jsxs10("div", { className: "cv-p-thread__heading", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "cv-p-thread__title", children: onOpenSubject ? /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: "cv-p-thread__title-button",
+          "aria-label": `${labels.openSubject}: ${conversation.subjectLabel}`,
+          onClick: () => onOpenSubject({ subjectType, subjectId }),
+          children: conversation.subjectLabel
+        }
+      ) : conversation.subjectLabel }),
+      conversation.protocol ? /* @__PURE__ */ jsx10(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
+      /* @__PURE__ */ jsx10(ParticipantChannelBadges, { channels: conversation.channels, labels })
+    ] })
   ] });
 }
 function Timeline({ props }) {
@@ -565,12 +767,12 @@ function Timeline({ props }) {
     const day = new Date(createdAtOf2(item));
     if (previousDay === void 0 || !isSameDay(previousDay, day)) {
       nodes.push(
-        /* @__PURE__ */ jsx6("div", { className: "cv-p-day", role: "separator", children: day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" }) }, `day:${keyOf(item)}`)
+        /* @__PURE__ */ jsx10("div", { className: "cv-p-day", role: "separator", children: day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" }) }, `day:${keyOf(item)}`)
       );
     }
     previousDay = day;
     nodes.push(
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx10(
         ParticipantMessageBubble,
         {
           item,
@@ -583,14 +785,14 @@ function Timeline({ props }) {
       )
     );
   }
-  return /* @__PURE__ */ jsx6("div", { className: "cv-p-thread__messages", children: nodes });
+  return /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__messages", children: nodes });
 }
 function Footer({ props }) {
   const { conversation, labels, draft } = props;
   if (conversation.status === "closed") {
-    return /* @__PURE__ */ jsx6("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
+    return /* @__PURE__ */ jsx10("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     ParticipantComposer,
     {
       value: draft.value,
@@ -611,17 +813,17 @@ function ParticipantThread(props) {
   const { conversation, labels, hasMore, onLoadOlder, renderSubjectCard } = props;
   const subjectCard = renderSubjectCard?.(conversation);
   const loadView = resolveLoadView({ status: props.status, hasItems: props.items.length > 0 });
-  return /* @__PURE__ */ jsxs6("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, children: [
-    /* @__PURE__ */ jsx6(Header, { props }),
-    subjectCard ? /* @__PURE__ */ jsx6("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
-    /* @__PURE__ */ jsxs6("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, children: [
-      loadView.isLoading ? /* @__PURE__ */ jsx6(ParticipantLoading, { labels }) : null,
-      loadView.hasError ? /* @__PURE__ */ jsx6(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
-      hasMore && onLoadOlder ? /* @__PURE__ */ jsx6("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
-      /* @__PURE__ */ jsx6(Timeline, { props })
+  return /* @__PURE__ */ jsxs10("div", { className: "cv-p cv-p-thread", "aria-busy": loadView.isLoading, children: [
+    /* @__PURE__ */ jsx10(Header, { props }),
+    subjectCard ? /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
+    /* @__PURE__ */ jsxs10("div", { className: "cv-p-thread__scroll", ref: props.scroll.ref, onScroll: props.scroll.onScroll, children: [
+      loadView.isLoading ? /* @__PURE__ */ jsx10(ParticipantLoading, { labels }) : null,
+      loadView.hasError ? /* @__PURE__ */ jsx10(ParticipantLoadError, { labels, onRetry: props.refresh }) : null,
+      hasMore && onLoadOlder ? /* @__PURE__ */ jsx10("button", { type: "button", className: "cv-p-thread__older", onClick: onLoadOlder, children: labels.loadOlder }) : null,
+      /* @__PURE__ */ jsx10(Timeline, { props })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: props.newMessagesCount > 0 ? labels.newMessages : "" }),
-    /* @__PURE__ */ jsx6(Footer, { props })
+    /* @__PURE__ */ jsx10("div", { className: "cv-p-thread__live", role: "status", "aria-live": "polite", children: props.newMessagesCount > 0 ? labels.newMessages : "" }),
+    /* @__PURE__ */ jsx10(Footer, { props })
   ] });
 }
 
@@ -775,7 +977,7 @@ function participantSendStatesReducer(states, { subject, action }) {
 }
 
 // src/participant/useParticipantThread.ts
-import { useCallback as useCallback2, useEffect as useEffect5, useMemo, useReducer, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo, useReducer as useReducer2, useRef as useRef4 } from "react";
 
 // src/participant/participantThreadState.ts
 var INITIAL_PARTICIPANT_THREAD_STATE = {
@@ -811,7 +1013,7 @@ function participantThreadReducer(state, action) {
 }
 
 // src/participant/useParticipantMarkRead.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 
 // src/participant/shouldMarkRead.ts
 function shouldMarkParticipantRead(params) {
@@ -823,12 +1025,12 @@ function shouldMarkParticipantRead(params) {
 }
 
 // src/participant/useDocumentVisibility.ts
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 function useDocumentVisibility() {
   const [visibilityState, setVisibilityState] = useState4(
     () => typeof document === "undefined" ? "visible" : document.visibilityState
   );
-  useEffect2(() => {
+  useEffect3(() => {
     function handleVisibilityChange() {
       setVisibilityState(document.visibilityState);
     }
@@ -843,18 +1045,18 @@ function useDocumentVisibility() {
 function useParticipantMarkRead(params) {
   const { apiRef, subject, unreadCount, messageCount, onMarkedRead } = params;
   const visibilityState = useDocumentVisibility();
-  useEffect3(() => {
+  useEffect4(() => {
     if (!shouldMarkParticipantRead({ selected: subject, subject, visibilityState, unreadCount })) return;
     void apiRef.current.markRead(subject).then(() => onMarkedRead?.(subject), () => void 0);
   }, [apiRef, subject, visibilityState, unreadCount, messageCount, onMarkedRead]);
 }
 
 // src/participant/useParticipantRevalidation.ts
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 function useParticipantRevalidation(api, onRevalidate) {
   const handlerRef = useRef2(onRevalidate);
   handlerRef.current = onRevalidate;
-  useEffect4(() => {
+  useEffect5(() => {
     function handleFocus() {
       handlerRef.current();
     }
@@ -948,7 +1150,7 @@ function useParticipantThread(params) {
   const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [] } = params;
   const { subjectType, subjectId } = subject;
   const stableSubject = useMemo(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
-  const [state, dispatch] = useReducer(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
+  const [state, dispatch] = useReducer2(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
   const apiRef = useRef4(api);
   apiRef.current = api;
   const activeSubjectKey = useRef4("");
@@ -980,7 +1182,7 @@ function useParticipantThread(params) {
   }, [stableSubject, subjectType, subjectId, oldestMessageId]);
   const handleSentMessage = useCallback2((message) => dispatch({ type: "sendConfirmed", message }), []);
   const sending = useParticipantSend({ apiRef, subject: stableSubject, entries: sendEntries, dispatchSend, onSentMessage: handleSentMessage });
-  useEffect5(() => {
+  useEffect6(() => {
     activeSubjectKey.current = `${subjectType}:${subjectId}`;
     dispatch({ type: "reset" });
     void refresh();
@@ -988,7 +1190,7 @@ function useParticipantThread(params) {
   useParticipantRevalidation(api, (event) => {
     if (isForSubject(event, stableSubject)) void refresh();
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (sendEntries.length === 0) return;
     dispatchSend({ type: "reflected", knownClientMessageIds: collectKnownClientMessageIds({ messages: state.messages, hostPending }) });
   }, [sendEntries, state.messages, hostPending, dispatchSend]);
@@ -1029,7 +1231,7 @@ function useParticipantConversationView(params) {
 }
 
 // src/participant/useParticipantThreadScroll.ts
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
 
 // src/participant/participantNewMessages.ts
 function collectServerMessageIds(items) {
@@ -1131,19 +1333,19 @@ function keyOf2(item) {
 function useParticipantThreadScroll(items) {
   const { scroll, isNearBottom } = useStickToBottom({ firstKey: keyOf2(items[0]), lastKey: keyOf2(items[items.length - 1]) });
   const seenIds = useRef6(/* @__PURE__ */ new Set());
-  useEffect6(() => {
+  useEffect7(() => {
     if (isNearBottom) seenIds.current = collectServerMessageIds(items);
   }, [isNearBottom, items]);
   return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items) };
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function useOpenedConversation(api, subject, isNeeded) {
   const [opened, setOpened] = useState6({ status: "idle" });
   const { subjectType, subjectId } = subject;
   const canOpen = api.openConversation !== void 0;
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isNeeded || !canOpen) return;
     let isCurrent = true;
     setOpened({ status: "loading" });
@@ -1158,12 +1360,12 @@ function useOpenedConversation(api, subject, isNeeded) {
   return opened;
 }
 function NotFound({ labels, onBack }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "cv-p cv-p-thread", children: [
-    /* @__PURE__ */ jsx7("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
-      /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2039" }),
-      /* @__PURE__ */ jsx7("span", { className: "cv-p-sr-only", children: labels.back })
+  return /* @__PURE__ */ jsxs11("div", { className: "cv-p cv-p-thread", children: [
+    /* @__PURE__ */ jsx11("header", { className: "cv-p-thread__header", children: onBack ? /* @__PURE__ */ jsxs11("button", { type: "button", className: "cv-p-button cv-p-thread__back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u2039" }),
+      /* @__PURE__ */ jsx11("span", { className: "cv-p-sr-only", children: labels.back })
     ] }) : null }),
-    /* @__PURE__ */ jsx7("p", { className: "cv-p-empty", children: labels.notFound })
+    /* @__PURE__ */ jsx11("p", { className: "cv-p-empty", children: labels.notFound })
   ] });
 }
 function ParticipantThreadScreen(props) {
@@ -1173,11 +1375,11 @@ 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__ */ jsx7(LoadedThread, { ...props, conversation });
+  if (conversation) return /* @__PURE__ */ jsx11(LoadedThread, { ...props, conversation });
   const isResolving = opened.status === "loading" || api.openConversation !== void 0 && opened.status === "idle";
   const isListLoading = inbox.status === "idle" || inbox.status === "loading";
-  if (isResolving || api.openConversation === void 0 && isListLoading) return /* @__PURE__ */ jsx7("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
-  return /* @__PURE__ */ jsx7(NotFound, { labels, onBack: props.onBack });
+  if (isResolving || api.openConversation === void 0 && isListLoading) return /* @__PURE__ */ jsx11("div", { className: "cv-p cv-p-thread", "aria-busy": "true" });
+  return /* @__PURE__ */ jsx11(NotFound, { labels, onBack: props.onBack });
 }
 function LoadedThread(props) {
   const { api, selected, conversation, draftsRef, inbox } = props;
@@ -1199,7 +1401,7 @@ function LoadedThread(props) {
     restoreFromEntry(entry);
     dispatchSend({ type: "discarded", clientMessageId });
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     ParticipantThread,
     {
       conversation,
@@ -1231,6 +1433,39 @@ function LoadedThread(props) {
   );
 }
 
+// src/participant/participantProtocol.ts
+var PROTOCOL_SEARCH_CONVERSATION_THRESHOLD = 8;
+function normalizeProtocolQuery(text) {
+  return text.replace(/[-\s]/g, "").toUpperCase();
+}
+function matchesProtocolQuery(protocol, query) {
+  const normalizedQuery = normalizeProtocolQuery(query);
+  if (normalizedQuery === "") return true;
+  if (protocol === void 0) return false;
+  return normalizeProtocolQuery(protocol).includes(normalizedQuery);
+}
+function foldText(text) {
+  return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+function matchesTitle(subjectLabel, query) {
+  return foldText(subjectLabel).includes(foldText(query));
+}
+function filterConversationsBySearch(conversations, query) {
+  const trimmedQuery = query.trim();
+  if (trimmedQuery === "") return conversations;
+  const hasProtocolTerm = normalizeProtocolQuery(trimmedQuery) !== "";
+  return conversations.filter(
+    (conversation) => matchesTitle(conversation.subjectLabel, trimmedQuery) || hasProtocolTerm && matchesProtocolQuery(conversation.protocol, trimmedQuery)
+  );
+}
+function isInboxSearchVisible({ conversations, searchQuery }) {
+  return searchQuery !== "" || shouldShowInboxSearch(conversations);
+}
+function shouldShowInboxSearch(conversations) {
+  if (conversations.length > PROTOCOL_SEARCH_CONVERSATION_THRESHOLD) return true;
+  return conversations.some((conversation) => conversation.protocol !== void 0);
+}
+
 // src/participant/participantGrouping.ts
 var ALL_FILTER2 = "all";
 var SECTION_AWAITING = "awaiting";
@@ -1270,22 +1505,35 @@ function buildFilters(params) {
   };
   return { filters: [all, ...groupFilters], showFilters: groupFilters.length >= 2 };
 }
+function resolveActiveFilter(params) {
+  const { filter, conversations } = params;
+  if (filter === void 0 || filter === ALL_FILTER2) return ALL_FILTER2;
+  return conversations.some((conversation) => conversation.subjectType === filter) ? filter : ALL_FILTER2;
+}
 function groupParticipantConversations(params) {
-  const { filter, subjectGroups } = params;
-  const isFiltered = filter !== void 0 && filter !== ALL_FILTER2;
-  const visible = isFiltered ? params.conversations.filter((conversation) => conversation.subjectType === filter) : params.conversations;
+  const { subjectGroups } = params;
+  const filter = resolveActiveFilter(params);
+  const isFiltered = filter !== ALL_FILTER2;
+  const searched = filterConversationsBySearch(params.conversations, params.searchQuery ?? "");
+  const visible = isFiltered ? searched.filter((conversation) => conversation.subjectType === filter) : searched;
   const knownTypes = new Set(subjectGroups.map((group) => group.subjectType));
   const buckets = /* @__PURE__ */ new Map();
   for (const conversation of visible) {
     const key = resolveSectionKey(conversation, knownTypes);
     buckets.set(key, [...buckets.get(key) ?? [], conversation]);
   }
-  const orderedKeys = [SECTION_AWAITING, ...subjectGroups.map((group) => group.subjectType), SECTION_OTHER, SECTION_CLOSED];
+  const orderedKeys = [
+    SECTION_AWAITING,
+    ...subjectGroups.map((group) => group.subjectType),
+    SECTION_OTHER,
+    SECTION_CLOSED
+  ];
   const sections = orderedKeys.flatMap((key) => {
     const bucket = buckets.get(key);
     return bucket === void 0 ? [] : [buildSection(key, bucket)];
   });
-  return { sections, ...buildFilters(params) };
+  const hasMatchesOutsideFilter = isFiltered && visible.length === 0 && searched.length > 0;
+  return { sections, hasMatchesOutsideFilter, activeFilter: filter, ...buildFilters(params) };
 }
 
 // src/participant/participantTheme.ts
@@ -1306,23 +1554,27 @@ function buildParticipantThemeStyle(theme) {
 }
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var ALL_FILTER3 = "all";
 function ParticipantConversationsScreen(props) {
   const { selected, inbox, subjectGroups, classNames } = props;
   const [filter, setFilter] = useState7(ALL_FILTER3);
+  const [searchQuery, setSearchQuery] = useState7("");
   const draftsRef = useRef7(/* @__PURE__ */ new Map());
-  const [sendStates, dispatchSendStates] = useReducer2(participantSendStatesReducer, /* @__PURE__ */ new Map());
-  const labels = useMemo4(
-    () => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }),
-    [props.labels]
-  );
+  const [sendStates, dispatchSendStates] = useReducer3(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  const labels = useMemo4(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
   const view = useMemo4(
-    () => groupParticipantConversations({ conversations: inbox.conversations, subjectGroups, filter }),
-    [inbox.conversations, subjectGroups, filter]
+    () => groupParticipantConversations({
+      conversations: inbox.conversations,
+      subjectGroups,
+      filter,
+      searchQuery
+    }),
+    [inbox.conversations, subjectGroups, filter, searchQuery]
   );
+  const isSearchVisible = isInboxSearchVisible({ conversations: inbox.conversations, searchQuery });
   const rootClassName = ["cv-p-root", props.className, classNames?.root].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx8("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx8("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx12("div", { className: rootClassName, style: buildParticipantThemeStyle(props.theme), children: selected === void 0 ? /* @__PURE__ */ jsx12("div", { className: ["cv-p-root__screen", classNames?.inbox].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx12(
     ParticipantInbox,
     {
       view,
@@ -1335,9 +1587,11 @@ function ParticipantConversationsScreen(props) {
       refresh: () => void inbox.refresh(),
       hasMore: inbox.hasMore,
       loadMore: () => void inbox.loadMore(),
-      locale: props.locale
+      locale: props.locale,
+      renderSubjectIcon: props.renderSubjectIcon,
+      search: { value: searchQuery, onChange: setSearchQuery, isVisible: isSearchVisible }
     }
-  ) }) : /* @__PURE__ */ jsx8("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx8(
+  ) }) : /* @__PURE__ */ jsx12("div", { className: ["cv-p-root__screen", classNames?.thread].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx12(
     ParticipantThreadScreen,
     {
       ...props,
@@ -1352,7 +1606,7 @@ function ParticipantConversationsScreen(props) {
 }
 
 // src/participant/useParticipantInbox.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useReducer as useReducer3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useReducer as useReducer4 } from "react";
 
 // src/participant/participantInboxState.ts
 var INITIAL_PARTICIPANT_INBOX_STATE = { status: "idle", conversations: [] };
@@ -1402,7 +1656,7 @@ function describeError2(error) {
   return error instanceof Error ? error.message : "unknown error";
 }
 function useParticipantInbox(api) {
-  const [state, dispatch] = useReducer3(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
+  const [state, dispatch] = useReducer4(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
   const refresh = useCallback5(async () => {
     dispatch({ type: "started" });
     try {
@@ -1425,7 +1679,7 @@ function useParticipantInbox(api) {
   const markSubjectRead = useCallback5((subject) => {
     dispatch({ type: "markedRead", subject });
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     void refresh();
   }, [refresh]);
   useParticipantRevalidation(api, () => {
@@ -1435,11 +1689,17 @@ function useParticipantInbox(api) {
 }
 
 // src/participant/ParticipantConversations.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function ParticipantConversations(props) {
   const inbox = useParticipantInbox(props.api);
   const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox;
-  return /* @__PURE__ */ jsx9(ParticipantConversationsScreen, { ...props, inbox: { status, conversations, hasMore, refresh, loadMore, markSubjectRead } });
+  return /* @__PURE__ */ jsx13(
+    ParticipantConversationsScreen,
+    {
+      ...props,
+      inbox: { status, conversations, hasMore, refresh, loadMore, markSubjectRead }
+    }
+  );
 }
 export {
   DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,