@adatechnology/conversations-ui 0.7.0 → 0.8.0

package/dist/participant/index.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-O6457XHK.js";
 
 // src/participant/ParticipantConversationsScreen.tsx
-import { useMemo as useMemo5, useReducer as useReducer5, useRef as useRef9, useState as useState7 } from "react";
+import { useMemo as useMemo5, useReducer as useReducer5, useRef as useRef10, useState as useState8 } from "react";
 
 // src/participant/participantLoadView.ts
 function resolveLoadView({ status, hasItems }) {
@@ -361,7 +361,7 @@ function ParticipantInbox(props) {
 }
 
 // src/participant/ParticipantThreadScreen.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
 
 // src/participant/ParticipantBackButton.tsx
 import { ArrowLeft } from "lucide-react";
@@ -1314,6 +1314,30 @@ function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels })
   );
 }
 
+// src/participant/participantPerspective.ts
+var DEFAULT_PARTICIPANT_PERSPECTIVE = "participant";
+var OWN_DIRECTION = {
+  participant: "inbound",
+  operator: "outbound"
+};
+function isMessageMine(message, perspective = DEFAULT_PARTICIPANT_PERSPECTIVE) {
+  return message.direction === OWN_DIRECTION[perspective];
+}
+function isUnreadByViewer(message, perspective) {
+  if (isMessageMine(message, perspective)) return false;
+  return !message.readAt && message.status !== "read";
+}
+function countOtherSideMessages(messages, perspective) {
+  return messages.filter((message) => !isMessageMine(message, perspective)).length;
+}
+function countUnreadByViewer(messages, perspective) {
+  return messages.filter((message) => isUnreadByViewer(message, perspective)).length;
+}
+function resolveViewerUnread({ messages, perspective, acknowledgedCount }) {
+  if (countOtherSideMessages(messages, perspective) <= acknowledgedCount) return 0;
+  return countUnreadByViewer(messages, perspective);
+}
+
 // src/participant/participantMessages.ts
 function isSameSubject(left, right) {
   return left.subjectType === right.subjectType && left.subjectId === right.subjectId;
@@ -1339,8 +1363,8 @@ function mergeParticipantMessages(params) {
   }
   return items.sort((left, right) => createdAtOf(left) - createdAtOf(right));
 }
-function isOwnMessage(message) {
-  return message.direction === "inbound";
+function isOwnMessage(message, perspective) {
+  return isMessageMine(message, perspective);
 }
 function resolveOwnMessageStatus(params) {
   const { displayState, serverStatus, confirmsRead } = params;
@@ -1353,11 +1377,11 @@ function resolveOwnMessageStatus(params) {
 
 // src/participant/ParticipantMessageBubble.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-function describeItem(item) {
+function describeItem(item, perspective) {
   if (item.kind === "server") {
     const { message } = item;
     return {
-      isMine: isOwnMessage(message),
+      isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? void 0,
       text: message.text ?? void 0,
       createdAt: message.createdAt,
@@ -1390,9 +1414,10 @@ function ParticipantMessageBubble({
   onDiscard,
   onEdit,
   avatar,
-  tail = true
+  tail = true,
+  perspective
 }) {
-  const content = describeItem(item);
+  const content = describeItem(item, perspective);
   const { isMine } = content;
   const ownStatus = isMine ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead }) : void 0;
   const bubble = /* @__PURE__ */ jsxs13("div", { className: bubbleClassName(isMine, tail), children: [
@@ -1445,9 +1470,9 @@ function createdAtOf2(item) {
 function keyOf(item) {
   return item.kind === "server" ? item.message.id : `pending:${item.pending.clientMessageId}`;
 }
-function authorOf(item) {
+function authorOf(item, perspective) {
   if (item.kind === "pending") return { isMine: true, author: null };
-  return { isMine: isOwnMessage(item.message), author: item.message.authorName ?? null };
+  return { isMine: isOwnMessage(item.message, perspective), author: item.message.authorName ?? null };
 }
 function resolveActions(item, pendingActions) {
   if (!pendingActions || item.kind === "server") return {};
@@ -1471,7 +1496,7 @@ function ParticipantTimeline(props) {
       previousAuthor = void 0;
     }
     previousDay = day;
-    const { isMine, author } = authorOf(item);
+    const { isMine, author } = authorOf(item, props.perspective);
     const showAvatar = shouldShowAvatar({ previousAuthor, author, isMine });
     previousAuthor = isMine ? void 0 : author;
     const avatar = resolveAvatarSlot({
@@ -1490,6 +1515,7 @@ function ParticipantTimeline(props) {
           confirmsRead,
           resolveAttachmentUrl,
           tail: props.tail,
+          perspective: props.perspective,
           avatar,
           ...resolveActions(item, pendingActions)
         },
@@ -1588,7 +1614,9 @@ function ParticipantThreadHeader({
   subjectGroups,
   renderSubjectIcon,
   onBack,
-  onOpenSubject
+  onOpenSubject,
+  counterpartLabel,
+  actions
 }) {
   const group = subjectGroups?.find((candidate) => candidate.subjectType === conversation.subjectType);
   const icon = resolveConversationIcon({ conversation, group, renderSubjectIcon });
@@ -1599,11 +1627,13 @@ function ParticipantThreadHeader({
     /* @__PURE__ */ jsxs15("div", { className: "cv-p-thread__heading", children: [
       icon === void 0 && group ? /* @__PURE__ */ jsx22("p", { className: "cv-p-thread__eyebrow", children: group.label }) : null,
       /* @__PURE__ */ jsx22(Title, { conversation, labels, onOpenSubject }),
+      counterpartLabel ? /* @__PURE__ */ jsx22("p", { className: "cv-p-thread__counterpart", children: counterpartLabel }) : null,
       conversation.protocol || hasChannels ? /* @__PURE__ */ jsxs15("div", { className: "cv-p-thread__meta", children: [
         conversation.protocol ? /* @__PURE__ */ jsx22(ParticipantProtocolBadge, { protocol: conversation.protocol, labels }) : null,
         /* @__PURE__ */ jsx22(ParticipantChannelBadges, { channels: conversation.channels, labels, variant: "inline", iconSize: 16 })
       ] }) : null
-    ] })
+    ] }),
+    actions ? /* @__PURE__ */ jsx22("div", { className: "cv-p-thread__actions", children: actions }) : null
   ] });
 }
 
@@ -1644,7 +1674,9 @@ function ThreadBody(props) {
         subjectGroups: props.subjectGroups,
         renderSubjectIcon: props.renderSubjectIcon,
         onBack: props.onBack,
-        onOpenSubject: props.onOpenSubject
+        onOpenSubject: props.onOpenSubject,
+        counterpartLabel: props.counterpartLabel,
+        actions: props.headerActions
       }
     ),
     subjectCard ? /* @__PURE__ */ jsx23("div", { className: "cv-p-thread__subject-card", children: subjectCard }) : null,
@@ -1672,6 +1704,9 @@ function ParticipantThread(props) {
   return /* @__PURE__ */ jsx23(ParticipantCopyAnnouncer, { children: /* @__PURE__ */ jsx23(ThreadBody, { ...props }) });
 }
 
+// src/participant/useParticipantThreadController.ts
+import { useMemo as useMemo4 } from "react";
+
 // src/participant/bindAttachmentUrlResolver.ts
 function bindAttachmentUrlResolver(api) {
   return (attachment, disposition) => api.resolveAttachmentUrl(attachment, disposition);
@@ -1753,8 +1788,8 @@ function appendEntryToDraft(entry, current) {
   return { text, files: [...entry.files, ...current.files] };
 }
 
-// src/participant/useParticipantDraft.ts
-import { useState as useState3 } from "react";
+// src/participant/useParticipantConversationView.ts
+import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
 
 // src/participant/participantDrafts.ts
 var EMPTY_PARTICIPANT_DRAFT = { text: "", files: [] };
@@ -1782,30 +1817,6 @@ function takeDraftForSend(drafts, subject) {
   };
 }
 
-// src/participant/useParticipantDraft.ts
-function useParticipantDraft(draftsRef, subject) {
-  const [draft, setDraftState] = useState3(() => getDraft(draftsRef.current, subject));
-  function replaceDrafts(next) {
-    draftsRef.current = next;
-    setDraftState(getDraft(next, subject));
-  }
-  function update(change) {
-    replaceDrafts(setDraft(draftsRef.current, subject, { ...getDraft(draftsRef.current, subject), ...change }));
-  }
-  function takeForSend() {
-    const taken = takeDraftForSend(draftsRef.current, subject);
-    if (taken.content) replaceDrafts(taken.drafts);
-    return taken.content;
-  }
-  function restoreFromEntry(entry) {
-    update(appendEntryToDraft(entry, getDraft(draftsRef.current, subject)));
-  }
-  return { draft, setText: (text) => update({ text }), setFiles: (files) => update({ files }), takeForSend, restoreFromEntry };
-}
-
-// src/participant/useParticipantConversationView.ts
-import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
-
 // src/participant/participantSendStates.ts
 var NO_ENTRIES = [];
 function selectSendEntries(states, subject) {
@@ -1822,7 +1833,7 @@ function participantSendStatesReducer(states, { subject, action }) {
 }
 
 // src/participant/useParticipantThread.ts
-import { useCallback as useCallback3, useEffect as useEffect9, useMemo as useMemo2, useReducer as useReducer4, useRef as useRef6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo2, useReducer as useReducer4, useRef as useRef7 } from "react";
 
 // src/participant/participantThreadState.ts
 var INITIAL_PARTICIPANT_THREAD_STATE = {
@@ -1870,9 +1881,9 @@ function shouldMarkParticipantRead(params) {
 }
 
 // src/participant/useDocumentVisibility.ts
-import { useEffect as useEffect6, useState as useState4 } from "react";
+import { useEffect as useEffect6, useState as useState3 } from "react";
 function useDocumentVisibility() {
-  const [visibilityState, setVisibilityState] = useState4(
+  const [visibilityState, setVisibilityState] = useState3(
     () => typeof document === "undefined" ? "visible" : document.visibilityState
   );
   useEffect6(() => {
@@ -1982,6 +1993,24 @@ function useParticipantSend(params) {
   return { send, retry };
 }
 
+// src/participant/useParticipantUnread.ts
+import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
+function useParticipantUnread(params) {
+  const { messages, perspective, reportedUnreadCount, onMarkedRead } = params;
+  const [acknowledgedCount, setAcknowledgedCount] = useState4(0);
+  const messagesRef = useRef6(messages);
+  messagesRef.current = messages;
+  const handleMarkedRead = useCallback3(
+    (subject) => {
+      if (perspective) setAcknowledgedCount(countOtherSideMessages(messagesRef.current, perspective));
+      onMarkedRead?.(subject);
+    },
+    [perspective, onMarkedRead]
+  );
+  const unreadCount = perspective ? resolveViewerUnread({ messages, perspective, acknowledgedCount }) : reportedUnreadCount;
+  return { unreadCount, handleMarkedRead };
+}
+
 // src/participant/useParticipantThread.ts
 var THREAD_PAGE_SIZE = 30;
 function describeError(error) {
@@ -1992,15 +2021,15 @@ function isForSubject(event, subject) {
   return event.subject.subjectType === subject.subjectType && event.subject.subjectId === subject.subjectId;
 }
 function useParticipantThread(params) {
-  const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [] } = params;
+  const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [], perspective } = params;
   const { subjectType, subjectId } = subject;
   const stableSubject = useMemo2(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
   const [state, dispatch] = useReducer4(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE);
-  const apiRef = useRef6(api);
+  const apiRef = useRef7(api);
   apiRef.current = api;
-  const activeSubjectKey = useRef6("");
+  const activeSubjectKey = useRef7("");
   const confirmsRead = channelCapabilityFor(channel).confirmsRead;
-  const refresh = useCallback3(async () => {
+  const refresh = useCallback4(async () => {
     const requestKey = `${subjectType}:${subjectId}`;
     dispatch({ type: "started" });
     try {
@@ -2013,7 +2042,7 @@ function useParticipantThread(params) {
     }
   }, [stableSubject, subjectType, subjectId]);
   const oldestMessageId = state.messages[0]?.id;
-  const loadOlder = useCallback3(async () => {
+  const loadOlder = useCallback4(async () => {
     if (!oldestMessageId) return;
     const requestKey = `${subjectType}:${subjectId}`;
     try {
@@ -2025,7 +2054,7 @@ function useParticipantThread(params) {
       if (activeSubjectKey.current === requestKey) dispatch({ type: "failed", error: describeError(error) });
     }
   }, [stableSubject, subjectType, subjectId, oldestMessageId]);
-  const handleSentMessage = useCallback3((message) => dispatch({ type: "sendConfirmed", message }), []);
+  const handleSentMessage = useCallback4((message) => dispatch({ type: "sendConfirmed", message }), []);
   const sending = useParticipantSend({ apiRef, subject: stableSubject, entries: sendEntries, dispatchSend, onSentMessage: handleSentMessage });
   useEffect9(() => {
     activeSubjectKey.current = `${subjectType}:${subjectId}`;
@@ -2039,7 +2068,14 @@ function useParticipantThread(params) {
     if (sendEntries.length === 0) return;
     dispatchSend({ type: "reflected", knownClientMessageIds: collectKnownClientMessageIds({ messages: state.messages, hostPending }) });
   }, [sendEntries, state.messages, hostPending, dispatchSend]);
-  useParticipantMarkRead({ apiRef, subject: stableSubject, unreadCount, messageCount: state.messages.length, onMarkedRead });
+  const unread = useParticipantUnread({ messages: state.messages, perspective, reportedUnreadCount: unreadCount, onMarkedRead });
+  useParticipantMarkRead({
+    apiRef,
+    subject: stableSubject,
+    unreadCount: unread.unreadCount,
+    messageCount: state.messages.length,
+    onMarkedRead: unread.handleMarkedRead
+  });
   const localPending = useMemo2(() => toLocalPending(sendEntries), [sendEntries]);
   return { ...state, localPending, confirmsRead, refresh, loadOlder, ...sending };
 }
@@ -2049,7 +2085,7 @@ function useParticipantConversationView(params) {
   const { api, subject, conversation, pendingMessages, sendStates, dispatchSendStates } = params;
   const { subjectType, subjectId } = subject;
   const sendEntries = selectSendEntries(sendStates, subject);
-  const dispatchSend = useCallback4(
+  const dispatchSend = useCallback5(
     (action) => dispatchSendStates({ subject: { subjectType, subjectId }, action }),
     [dispatchSendStates, subjectType, subjectId]
   );
@@ -2061,7 +2097,8 @@ function useParticipantConversationView(params) {
     onMarkedRead: params.onMarkedRead,
     sendEntries,
     dispatchSend,
-    hostPending: pendingMessages
+    hostPending: pendingMessages,
+    perspective: params.perspective
   });
   const items = useMemo3(
     () => mergeParticipantMessages({
@@ -2075,8 +2112,30 @@ function useParticipantConversationView(params) {
   return { thread, items, sendEntries, dispatchSend };
 }
 
+// src/participant/useParticipantDraft.ts
+import { useState as useState5 } from "react";
+function useParticipantDraft(draftsRef, subject) {
+  const [draft, setDraftState] = useState5(() => getDraft(draftsRef.current, subject));
+  function replaceDrafts(next) {
+    draftsRef.current = next;
+    setDraftState(getDraft(next, subject));
+  }
+  function update(change) {
+    replaceDrafts(setDraft(draftsRef.current, subject, { ...getDraft(draftsRef.current, subject), ...change }));
+  }
+  function takeForSend() {
+    const taken = takeDraftForSend(draftsRef.current, subject);
+    if (taken.content) replaceDrafts(taken.drafts);
+    return taken.content;
+  }
+  function restoreFromEntry(entry) {
+    update(appendEntryToDraft(entry, getDraft(draftsRef.current, subject)));
+  }
+  return { draft, setText: (text) => update({ text }), setFiles: (files) => update({ files }), takeForSend, restoreFromEntry };
+}
+
 // src/participant/useParticipantThreadScroll.ts
-import { useEffect as useEffect10, useRef as useRef8 } from "react";
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
 
 // src/participant/participantNewMessages.ts
 function collectServerMessageIds(items) {
@@ -2093,17 +2152,17 @@ function latestSeenTime(previousIds, items) {
   }
   return latest;
 }
-function countNewIncomingMessages(previousIds, currentItems) {
+function countNewIncomingMessages(previousIds, currentItems, perspective) {
   const latestSeen = latestSeenTime(previousIds, currentItems);
   return currentItems.filter(
-    (item) => item.kind === "server" && item.message.direction === "outbound" && !previousIds.has(item.message.id) && Date.parse(item.message.createdAt) > latestSeen
+    (item) => item.kind === "server" && !isMessageMine(item.message, perspective) && !previousIds.has(item.message.id) && Date.parse(item.message.createdAt) > latestSeen
   ).length;
 }
 
 // src/participant/useScrollAwayState.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 function useScrollAwayState(ref, isNearBottom) {
-  const scrollToLatest = useCallback5(() => {
+  const scrollToLatest = useCallback6(() => {
     const element = ref.current;
     if (!element) return;
     element.scrollTo(
@@ -2114,7 +2173,7 @@ function useScrollAwayState(ref, isNearBottom) {
 }
 
 // src/participant/useStickToBottom.ts
-import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState6 } from "react";
 
 // src/participant/participantScroll.ts
 var NEAR_BOTTOM_THRESHOLD_PX = 80;
@@ -2136,17 +2195,17 @@ function resolveScrollAction(params) {
 
 // src/participant/useStickToBottom.ts
 function useStickToBottom({ firstKey, lastKey }) {
-  const ref = useRef7(null);
-  const snapshot = useRef7({
+  const ref = useRef8(null);
+  const snapshot = useRef8({
     hasPositioned: false,
     firstKey: void 0,
     lastKey: void 0,
     scrollTop: 0,
     scrollHeight: 0
   });
-  const [isNearBottom, setIsNearBottom] = useState5(true);
-  const isNearBottomRef = useRef7(true);
-  const onScroll = useCallback6((event) => {
+  const [isNearBottom, setIsNearBottom] = useState6(true);
+  const isNearBottomRef = useRef8(true);
+  const onScroll = useCallback7((event) => {
     const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
     const isNear = shouldStickToBottom({ scrollTop, clientHeight, scrollHeight, threshold: NEAR_BOTTOM_THRESHOLD_PX });
     snapshot.current.scrollTop = scrollTop;
@@ -2194,24 +2253,70 @@ function keyOf2(item) {
   if (!item) return void 0;
   return item.kind === "server" ? item.message.id : `pending:${item.pending.clientMessageId}`;
 }
-function useParticipantThreadScroll(items) {
+function useParticipantThreadScroll(items, perspective) {
   const { scroll: base, isNearBottom } = useStickToBottom({
     firstKey: keyOf2(items[0]),
     lastKey: keyOf2(items[items.length - 1])
   });
   const { isAwayFromBottom, scrollToLatest } = useScrollAwayState(base.ref, isNearBottom);
   const scroll = { ...base, isAwayFromBottom, scrollToLatest };
-  const seenIds = useRef8(/* @__PURE__ */ new Set());
+  const seenIds = useRef9(/* @__PURE__ */ new Set());
   useEffect10(() => {
     if (isNearBottom) seenIds.current = collectServerMessageIds(items);
   }, [isNearBottom, items]);
-  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items) };
+  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items, perspective) };
+}
+
+// src/participant/useParticipantThreadController.ts
+function buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending }) {
+  return {
+    retryLocal: (clientMessageId) => void thread.retry(clientMessageId),
+    discardLocal: (clientMessageId) => dispatchSend({ type: "discarded", clientMessageId }),
+    editLocal: handleEdit,
+    ...onRetryPending ? { retryHost: onRetryPending } : {}
+  };
+}
+function useParticipantThreadController(params) {
+  const { api, subject, conversation, draftsRef } = params;
+  const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, subject);
+  const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView(params);
+  const resolveAttachmentUrl = useMemo4(() => bindAttachmentUrlResolver(api), [api]);
+  const { scroll, newMessagesCount } = useParticipantThreadScroll(items, params.perspective);
+  function handleSend() {
+    const content = takeForSend();
+    if (content) void thread.send(content);
+  }
+  function handleEdit(clientMessageId) {
+    const entry = findFailedEntry(sendEntries, clientMessageId);
+    if (!entry) return;
+    restoreFromEntry(entry);
+    dispatchSend({ type: "discarded", clientMessageId });
+  }
+  return {
+    conversation,
+    items,
+    hasMore: thread.hasMore,
+    labels: params.labels,
+    resolveAttachmentUrl,
+    draft: { value: draft.text, onChange: setText, files: draft.files, onFilesChange: setFiles },
+    onSend: handleSend,
+    status: thread.status,
+    refresh: () => void thread.refresh(),
+    scroll,
+    newMessagesCount,
+    isSending: hasSendingEntry(sendEntries),
+    channel: params.channel,
+    locale: params.locale,
+    onLoadOlder: () => void thread.loadOlder(),
+    pendingActions: buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending: params.onRetryPending }),
+    perspective: params.perspective
+  };
 }
 
 // src/participant/ParticipantThreadScreen.tsx
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function useOpenedConversation(api, subject, isNeeded) {
-  const [opened, setOpened] = useState6({ status: "idle" });
+  const [opened, setOpened] = useState7({ status: "idle" });
   const { subjectType, subjectId } = subject;
   const canOpen = api.openConversation !== void 0;
   useEffect11(() => {
@@ -2252,51 +2357,17 @@ function ParticipantThreadScreen(props) {
   return /* @__PURE__ */ jsx24(NotFound, { labels, onBack: props.onBack });
 }
 function LoadedThread(props) {
-  const { api, selected, conversation, draftsRef, inbox } = props;
-  const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, selected);
-  const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView({
+  const core = useParticipantThreadController({
     ...props,
-    subject: selected,
-    onMarkedRead: inbox.markSubjectRead
+    subject: props.selected,
+    onMarkedRead: props.inbox.markSubjectRead
   });
-  const resolveAttachmentUrl = useMemo4(() => bindAttachmentUrlResolver(api), [api]);
-  const { scroll, newMessagesCount } = useParticipantThreadScroll(items);
-  function handleSend() {
-    const content = takeForSend();
-    if (content) void thread.send(content);
-  }
-  function handleEdit(clientMessageId) {
-    const entry = findFailedEntry(sendEntries, clientMessageId);
-    if (!entry) return;
-    restoreFromEntry(entry);
-    dispatchSend({ type: "discarded", clientMessageId });
-  }
   return /* @__PURE__ */ jsx24(
     ParticipantThread,
     {
-      conversation,
-      items,
-      hasMore: thread.hasMore,
-      labels: props.labels,
-      resolveAttachmentUrl,
-      draft: { value: draft.text, onChange: setText, files: draft.files, onFilesChange: setFiles },
-      onSend: handleSend,
-      status: thread.status,
-      refresh: () => void thread.refresh(),
-      scroll,
-      newMessagesCount,
-      isSending: hasSendingEntry(sendEntries),
-      channel: props.channel,
-      locale: props.locale,
+      ...core,
       onBack: props.onBack,
       onOpenSubject: props.onOpenSubject,
-      onLoadOlder: () => void thread.loadOlder(),
-      pendingActions: {
-        retryLocal: (clientMessageId) => void thread.retry(clientMessageId),
-        discardLocal: (clientMessageId) => dispatchSend({ type: "discarded", clientMessageId }),
-        editLocal: handleEdit,
-        ...props.onRetryPending ? { retryHost: props.onRetryPending } : {}
-      },
       quickReplies: props.quickReplies,
       renderSubjectCard: props.renderSubjectCard,
       subjectGroups: props.subjectGroups,
@@ -2433,9 +2504,9 @@ import { jsx as jsx25 } from "react/jsx-runtime";
 var ALL_FILTER3 = "all";
 function ParticipantConversationsScreen(props) {
   const { selected, inbox, subjectGroups, classNames } = props;
-  const [filter, setFilter] = useState7(ALL_FILTER3);
-  const [searchQuery, setSearchQuery] = useState7("");
-  const draftsRef = useRef9(/* @__PURE__ */ new Map());
+  const [filter, setFilter] = useState8(ALL_FILTER3);
+  const [searchQuery, setSearchQuery] = useState8("");
+  const draftsRef = useRef10(/* @__PURE__ */ new Map());
   const [sendStates, dispatchSendStates] = useReducer5(participantSendStatesReducer, /* @__PURE__ */ new Map());
   const labels = useMemo5(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
   const view = useMemo5(
@@ -2481,7 +2552,7 @@ function ParticipantConversationsScreen(props) {
 }
 
 // src/participant/useParticipantInbox.ts
-import { useCallback as useCallback7, useEffect as useEffect12, useReducer as useReducer6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useReducer as useReducer6 } from "react";
 
 // src/participant/participantInboxState.ts
 var INITIAL_PARTICIPANT_INBOX_STATE = { status: "idle", conversations: [] };
@@ -2532,7 +2603,7 @@ function describeError2(error) {
 }
 function useParticipantInbox(api) {
   const [state, dispatch] = useReducer6(participantInboxReducer, INITIAL_PARTICIPANT_INBOX_STATE);
-  const refresh = useCallback7(async () => {
+  const refresh = useCallback8(async () => {
     dispatch({ type: "started" });
     try {
       const page = await api.listConversations();
@@ -2542,7 +2613,7 @@ function useParticipantInbox(api) {
     }
   }, [api]);
   const { nextCursor } = state;
-  const loadMore = useCallback7(async () => {
+  const loadMore = useCallback8(async () => {
     if (!nextCursor) return;
     try {
       const page = await api.listConversations({ cursor: nextCursor });
@@ -2551,7 +2622,7 @@ function useParticipantInbox(api) {
       dispatch({ type: "failed", error: describeError2(error) });
     }
   }, [api, nextCursor]);
-  const markSubjectRead = useCallback7((subject) => {
+  const markSubjectRead = useCallback8((subject) => {
     dispatch({ type: "markedRead", subject });
   }, []);
   useEffect12(() => {
@@ -2576,7 +2647,111 @@ function ParticipantConversations(props) {
     }
   );
 }
+
+// src/participant/ConversationThread.tsx
+import { useCallback as useCallback9, useMemo as useMemo6, useReducer as useReducer7, useRef as useRef11 } from "react";
+
+// src/participant/conversationThreadApi.ts
+function toParticipantApi(api) {
+  const { subscribe } = api;
+  return {
+    listConversations: async () => ({ data: [] }),
+    fetchMessages: (subject, params) => api.fetchMessages(subject, params),
+    sendMessage: (input) => api.sendMessage(input),
+    markRead: async (subject) => {
+      if (!api.markRead) throw new Error("The host api has no markRead");
+      await api.markRead(subject);
+    },
+    resolveAttachmentUrl: (attachment, disposition) => api.resolveAttachmentUrl(attachment, disposition),
+    ...subscribe ? { subscribe: (listener) => api.subscribe?.(listener) ?? (() => void 0) } : {}
+  };
+}
+
+// src/participant/conversationThreadSummary.ts
+function buildThreadSummary({
+  subject,
+  title,
+  protocol,
+  channels,
+  status
+}) {
+  return {
+    subjectType: subject.subjectType,
+    subjectId: subject.subjectId,
+    subjectLabel: title,
+    lastMessageAt: null,
+    unreadCount: 0,
+    awaitingParticipant: false,
+    status: status ?? "open",
+    ...protocol ? { protocol } : {},
+    ...channels ? { channels } : {}
+  };
+}
+
+// src/participant/ConversationThread.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function useConversationThreadCore(props) {
+  const { perspective = "participant" } = props;
+  const { subjectType, subjectId } = props.subject;
+  const subject = useMemo6(() => ({ subjectType, subjectId }), [subjectType, subjectId]);
+  const onMarkedReadRef = useRef11(props.onMarkedRead);
+  onMarkedReadRef.current = props.onMarkedRead;
+  const handleMarkedRead = useCallback9((marked) => onMarkedReadRef.current?.(marked), []);
+  const api = useMemo6(() => toParticipantApi(props.api), [props.api]);
+  const draftsRef = useRef11(/* @__PURE__ */ new Map());
+  const [sendStates, dispatchSendStates] = useReducer7(participantSendStatesReducer, /* @__PURE__ */ new Map());
+  const labels = useMemo6(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels]);
+  const { title, protocol, channels, status } = props;
+  const conversation = useMemo6(
+    () => buildThreadSummary({ subject, title, protocol, channels, status }),
+    [subject, title, protocol, channels, status]
+  );
+  return useParticipantThreadController({
+    api,
+    subject,
+    conversation,
+    labels,
+    draftsRef,
+    sendStates,
+    dispatchSendStates,
+    onMarkedRead: handleMarkedRead,
+    channel: props.channel,
+    locale: props.locale,
+    pendingMessages: props.pendingMessages,
+    onRetryPending: props.onRetryPending,
+    perspective
+  });
+}
+function ConversationThreadBody(props) {
+  const core = useConversationThreadCore(props);
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: ["cv-p-root", props.className].filter(Boolean).join(" "),
+      style: buildParticipantThemeStyle(props.theme),
+      children: /* @__PURE__ */ jsx27("div", { className: "cv-p-root__screen", children: /* @__PURE__ */ jsx27(
+        ParticipantThread,
+        {
+          ...core,
+          onBack: props.onBack,
+          quickReplies: props.quickReplies,
+          subjectGroups: props.subjectGroups,
+          renderSubjectIcon: props.renderSubjectIcon,
+          avatars: props.avatars,
+          renderAuthorAvatar: props.renderAuthorAvatar,
+          tail: props.tail,
+          counterpartLabel: props.counterpartLabel,
+          headerActions: props.headerActions
+        }
+      ) })
+    }
+  );
+}
+function ConversationThread(props) {
+  return /* @__PURE__ */ jsx27(ConversationThreadBody, { ...props }, draftKey(props.subject));
+}
 export {
+  ConversationThread,
   DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
   ParticipantConversations,
   groupParticipantConversations