@adatechnology/conversations-ui 0.7.0 → 0.8.0

package/dist/preview/index.d.ts

@@ -1,6 +1,6 @@
-import { M as MessagePayload } from '../quickReply.types-B4gmZsSr.js';
-import { C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-CrfFjiWh.js';
-export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, M as signPreviewPayload, N as simulatorPanelLabelsOf, O as toConversationSimulatorClient } from '../ConversationSimulatorPanel-CrfFjiWh.js';
+import { M as MessagePayload } from '../quickReply.types-DzWH3NYV.js';
+import { C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-q-wVgBCN.js';
+export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, M as signPreviewPayload, N as simulatorPanelLabelsOf, O as toConversationSimulatorClient } from '../ConversationSimulatorPanel-q-wVgBCN.js';
 import { InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing';
 import * as react from 'react';
 export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';

package/dist/{quickReply.types-B4gmZsSr.d.ts → quickReply.types-DzWH3NYV.d.ts}

@@ -271,4 +271,4 @@ type ConversationVariable = {
     readonly value: string;
 };
 
-export { type ConversationChannel as C, DEFAULT_CONVERSATION_CHANNEL as D, type FormatContactHandleParams as F, HANDLE_KIND as H, type InteractiveSelection as I, type MessagePayload as M, type QuickReply as Q, REOPEN_MECHANISM as R, type StoredAttachmentSendResult as S, type TranscriptionMode as T, type ConversationsTheme as a, type MessageTranscription as b, type QuickReplyInput as c, type QuickReplyAttachment as d, type InteractivePayload as e, type ConversationsFeatures as f, type QueuedAttachment as g, type ConversationVariable as h, type ChannelFilter as i, type ChannelFilterOption as j, CHANNEL_CAPABILITIES as k, CHANNEL_FILTER_ALL as l, CONVERSATION_CHANNEL as m, type ChannelCapabilities as n, type ConversationsUIConfig as o, type HandleKind as p, type InteractiveOption as q, type InteractiveSection as r, QUICK_REPLY_ATTACHMENT_LIMIT as s, type ReopenMechanism as t, type TranscriptionStatus as u, capabilitiesOf as v, channelFiltersFor as w, contactFlag as x, formatContactHandle as y };
+export { type ConversationChannel as C, DEFAULT_CONVERSATION_CHANNEL as D, type FormatContactHandleParams as F, HANDLE_KIND as H, type InteractiveSelection as I, type MessagePayload as M, type QuickReply as Q, REOPEN_MECHANISM as R, type StoredAttachmentSendResult as S, type TranscriptionMode as T, type MessageTranscription as a, type QuickReplyInput as b, type QuickReplyAttachment as c, type ConversationsTheme as d, type InteractivePayload as e, type ConversationsFeatures as f, type QueuedAttachment as g, type ConversationVariable as h, type ChannelFilter as i, type ChannelFilterOption as j, CHANNEL_CAPABILITIES as k, CHANNEL_FILTER_ALL as l, CONVERSATION_CHANNEL as m, type ChannelCapabilities as n, type ConversationsUIConfig as o, type HandleKind as p, type InteractiveOption as q, type InteractiveSection as r, QUICK_REPLY_ATTACHMENT_LIMIT as s, type ReopenMechanism as t, type TranscriptionStatus as u, capabilitiesOf as v, channelFiltersFor as w, contactFlag as x, formatContactHandle as y };

package/dist/styles.css

@@ -1314,12 +1314,14 @@
   --cv-p-i-border: var(--cv-p-border, #d5d9df);
   --cv-p-i-accent: var(--cv-p-accent, #a85a1c);
   --cv-p-i-accent-contrast: var(--cv-p-accent-contrast, #ffffff);
-  --cv-p-i-highlight: var(--cv-p-highlight, #fbefe2);
+  --cv-p-i-highlight: var(--cv-p-highlight, #fcf3ea);
   --cv-p-i-danger: var(--cv-p-danger, #c62828);
   --cv-p-i-radius: var(--cv-p-radius, 0);
   --cv-p-i-touch: 2.75rem;
   --cv-p-i-scrollbar-thumb: var(--cv-p-scrollbar-thumb, var(--cv-p-i-border));
   --cv-p-i-scrollbar-thumb-hover: var(--cv-p-scrollbar-thumb-hover, var(--cv-p-i-accent));
+  --cv-p-i-tick: var(--cv-p-tick, var(--cv-p-i-text-muted));
+  --cv-p-i-tick-read: var(--cv-p-tick-read, #0369a1);
   --cv-p-i-wallpaper-ink: var(--cv-p-i-border);
   --cv-p-i-wallpaper:
     radial-gradient(
@@ -1354,6 +1356,7 @@
   --cv-p-i-accent-contrast: var(--cv-p-accent-contrast, #10222c);
   --cv-p-i-highlight: var(--cv-p-highlight, rgb(213 138 71 / 10%));
   --cv-p-i-danger: var(--cv-p-danger, #ff6b63);
+  --cv-p-i-tick-read: var(--cv-p-tick-read, #5cc8ff);
 }
 .cv-p *,
 .cv-p *::before,
@@ -1463,6 +1466,9 @@
 .cv-p-error__message {
   margin: 0;
 }
+.cv-p-thread__scroll > .cv-p-error {
+  background: var(--cv-p-i-surface);
+}
 .cv-p-loading {
   display: flex;
   flex-direction: column;
@@ -1706,6 +1712,29 @@
   text-overflow: ellipsis;
   min-width: 0;
 }
+.cv-p-thread__counterpart {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.78rem;
+  line-height: 1.3;
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-thread__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+  max-width: 100%;
+}
+.cv-p-thread__header:has(.cv-p-thread__actions) {
+  flex-wrap: wrap;
+}
+.cv-p-thread__header:has(.cv-p-thread__actions) .cv-p-thread__heading {
+  min-width: 6rem;
+}
 .cv-p-thread__meta {
   display: flex;
   flex-wrap: wrap;
@@ -1770,6 +1799,7 @@
   padding: 0 1rem;
   font-size: 0.75rem;
   color: var(--cv-p-i-accent);
+  background: var(--cv-p-i-surface-raised);
 }
 .cv-p-thread__live:empty {
   position: absolute;
@@ -1911,33 +1941,6 @@
 .cv-p-bubble--no-tail::after {
   content: none;
 }
-@media (forced-colors: active) {
-  .cv-p-bubble::before,
-  .cv-p-bubble::after {
-    content: none;
-  }
-  .cv-p-bubble,
-  .cv-p-bubble--mine {
-    border-radius: var(--cv-p-i-radius);
-  }
-  .cv-p-thread__scroll {
-    background-image: none;
-  }
-  .cv-p-thread__scroll,
-  .cv-p-inbox,
-  .cv-p-composer__input {
-    scrollbar-width: auto;
-    scrollbar-color: auto;
-  }
-  .cv-p-filters,
-  .cv-p-quick {
-    mask-image: none;
-    -webkit-mask-image: none;
-  }
-  .cv-p-thread__latest-badge {
-    border: 1px solid ButtonText;
-  }
-}
 @media print {
   .cv-p-bubble::before,
   .cv-p-bubble::after {
@@ -1990,6 +1993,17 @@
   align-items: center;
   gap: 0.25rem;
 }
+.cv-p-bubble .cv-status-ticks--queued,
+.cv-p-bubble .cv-status-ticks--sent,
+.cv-p-bubble .cv-status-ticks--delivered {
+  color: var(--cv-p-i-tick);
+}
+.cv-p-bubble .cv-status-ticks--read {
+  color: var(--cv-p-i-tick-read);
+}
+.cv-p-bubble .cv-status-ticks--failed {
+  color: var(--cv-p-i-danger);
+}
 .cv-p-bubble__retry {
   min-height: var(--cv-p-i-touch);
   display: inline-flex;
@@ -2483,7 +2497,38 @@
 .cv-p-copyable__done {
   margin-inline-start: 0.35rem;
   font-size: 0.85em;
-  color: var(--cv-p-i-accent);
+  color: var(--cv-p-i-text);
+}
+@media (forced-colors: active) {
+  .cv-p-bubble::before,
+  .cv-p-bubble::after {
+    content: none;
+  }
+  .cv-p-bubble,
+  .cv-p-bubble--mine {
+    border-radius: var(--cv-p-i-radius);
+  }
+  .cv-p-thread__scroll {
+    background-image: none;
+  }
+  .cv-p-thread__scroll,
+  .cv-p-inbox,
+  .cv-p-composer__input {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  .cv-p-filters,
+  .cv-p-quick {
+    mask-image: none;
+    -webkit-mask-image: none;
+  }
+  .cv-p-thread__latest-badge {
+    border: 1px solid ButtonText;
+  }
+  .cv-p-bubble .cv-status-ticks,
+  .cv-p-copyable__done {
+    color: CanvasText;
+  }
 }
 @media (forced-colors: active) {
   .cv-p-text__code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/participant/ConversationThread.test.tsx

@@ -0,0 +1,165 @@
+import { afterAll, beforeAll, describe, expect, it, mock } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { ParticipantMessage } from '@adatechnology/conversation-contracts'
+
+import type { ConversationThreadApi } from './conversationThreadApi'
+import type { ConversationThreadProps } from './ConversationThread'
+import { buildMessage, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import * as realThreadModule from './useParticipantThread'
+
+const COUNTERPART = buildMessage({
+  id: 'a',
+  direction: 'inbound',
+  authorName: 'Ana Souza',
+  createdAt: '2026-10-01T10:00:00.000Z',
+})
+const OWN_READ = buildMessage({ id: 'b', direction: 'outbound', status: 'read', createdAt: '2026-10-01T10:01:00.000Z' })
+const OWN_DELIVERED = buildMessage({
+  id: 'c',
+  direction: 'outbound',
+  status: 'delivered',
+  createdAt: '2026-10-01T10:02:00.000Z',
+})
+
+const realUseParticipantThread = realThreadModule.useParticipantThread
+let injected: readonly ParticipantMessage[] | undefined
+
+const API: ConversationThreadApi = {
+  fetchMessages: async () => [],
+  sendMessage: async () => ({ outcome: 'queued' }),
+  resolveAttachmentUrl: async () => 'https://files.example/a',
+}
+
+let ConversationThread: typeof import('./ConversationThread').ConversationThread
+
+beforeAll(async () => {
+  // Server rendering runs no effects, so the messages are injected over the real hook.
+  mock.module('./useParticipantThread', () => ({
+    ...realThreadModule,
+    useParticipantThread: (...args: Parameters<typeof realUseParticipantThread>) => {
+      const result = realUseParticipantThread(...args)
+      return injected ? { ...result, messages: injected, status: 'ready' as const } : result
+    },
+  }))
+  ConversationThread = (await import('./ConversationThread')).ConversationThread
+})
+
+afterAll(() => {
+  injected = undefined
+})
+
+function render(messages: readonly ParticipantMessage[], overrides: Partial<ConversationThreadProps> = {}): string {
+  injected = messages
+  return renderToStaticMarkup(
+    <ConversationThread api={API} subject={{ subjectType: 'case', subjectId: '7' }} title="Case 7" {...overrides} />,
+  )
+}
+
+function bubblesOf(markup: string): string[] {
+  return markup.split('<div class="cv-p-bubble').slice(1)
+}
+
+describe('ConversationThread, operator perspective', () => {
+  const MESSAGES = [COUNTERPART, OWN_READ, OWN_DELIVERED]
+
+  it('owns the outbound messages and not the inbound ones', () => {
+    const bubbles = bubblesOf(render(MESSAGES, { perspective: 'operator' }))
+    expect(bubbles.map((bubble) => bubble.startsWith(' cv-p-bubble--mine'))).toEqual([false, true, true])
+  })
+
+  it('draws the ticks on the operator messages only', () => {
+    const [received, readOwn, deliveredOwn] = bubblesOf(render(MESSAGES, { perspective: 'operator' }))
+    expect(received).not.toContain('cv-status-ticks')
+    expect(readOwn).toContain('cv-status-ticks--read')
+    expect(deliveredOwn).toContain('cv-status-ticks--delivered')
+  })
+
+  it('draws the initials on the counterpart and never on the operator messages', () => {
+    const markup = render(MESSAGES, { perspective: 'operator', avatars: 'initials' })
+    expect(markup.match(/class="cv-p-avatar" aria-hidden="true">AS</g)?.length).toBe(1)
+    expect(markup.match(/class="cv-p-bubble-row"/g)?.length).toBe(1)
+    expect(render([OWN_READ, OWN_DELIVERED], { perspective: 'operator', avatars: 'initials' })).not.toContain(
+      'cv-p-avatar',
+    )
+  })
+
+  it('labels the received bubble with the author name', () => {
+    expect(render(MESSAGES, { perspective: 'operator' })).toContain(
+      '<span class="cv-p-bubble__author">Ana Souza</span>',
+    )
+  })
+})
+
+describe('ConversationThread, default perspective', () => {
+  const MESSAGES = [COUNTERPART, OWN_READ]
+
+  it('is the participant: inbound is mine, and naming it explicitly changes nothing', () => {
+    const implicit = render(MESSAGES)
+    expect(bubblesOf(implicit).map((bubble) => bubble.startsWith(' cv-p-bubble--mine'))).toEqual([true, false])
+    expect(render(MESSAGES, { perspective: 'participant' })).toBe(implicit)
+  })
+})
+
+describe('ConversationThread, header and footer', () => {
+  it('shows the host actions and the counterpart line in the header, and nothing without them', () => {
+    const plain = render([COUNTERPART])
+    expect(plain).not.toContain('cv-p-thread__actions')
+    expect(plain).not.toContain('cv-p-thread__counterpart')
+    const markup = render([COUNTERPART], {
+      headerActions: <button type="button">Close</button>,
+      counterpartLabel: 'Participant: Ana',
+    })
+    expect(markup).toContain('<div class="cv-p-thread__actions"><button type="button">Close</button></div>')
+    expect(markup).toContain('<p class="cv-p-thread__counterpart">Participant: Ana</p>')
+    expect(markup.indexOf('cv-p-thread__actions')).toBeLessThan(markup.indexOf('</header>'))
+  })
+
+  it('removes the composer and shows the notice when closed, and keeps it when open', () => {
+    const closed = render([COUNTERPART], { status: 'closed', perspective: 'operator' })
+    expect(closed).toContain('This conversation is closed')
+    expect(closed).not.toContain('<form')
+    expect(render([COUNTERPART], { status: 'open' })).toContain('<form')
+    expect(render([COUNTERPART])).toContain('<form')
+  })
+
+  it('draws the title, protocol and channels only from what the host gave', () => {
+    expect(render([COUNTERPART])).not.toContain('cv-p-protocol')
+    expect(render([COUNTERPART])).not.toContain('cv-p-channels')
+    const markup = render([COUNTERPART], { protocol: '261009-K7M2', channels: ['app', 'whatsapp'] })
+    expect(markup).toContain('261009-K7M2')
+    expect(markup).toContain('cv-p-channel--whatsapp')
+    expect(markup).toContain('Case 7')
+  })
+
+  it('draws no back arrow without onBack', () => {
+    expect(render([COUNTERPART])).not.toContain('cv-p-thread__back')
+    expect(render([COUNTERPART], { onBack: () => undefined })).toContain('cv-p-thread__back')
+  })
+
+  it('offers quick replies as plain buttons that only fill the field', () => {
+    const markup = render([COUNTERPART], {
+      quickReplies: [{ id: '1', title: 'Thanks', shortcut: 'ty', body: 'Thank you' }],
+    })
+    const chips = [...markup.matchAll(/<button[^>]*class="cv-p-chip"[^>]*>/g)].map((match) => match[0])
+    expect(chips).toHaveLength(1)
+    expect(chips[0]).toContain('type="button"')
+    expect(render([COUNTERPART])).not.toContain('cv-p-quick')
+  })
+
+  it('applies the theme and the class on a wrapper and uses only the package classes', () => {
+    const markup = render([COUNTERPART, OWN_READ], {
+      theme: { primaryColor: '#123456' },
+      className: 'host-panel',
+      onBack: () => undefined,
+    })
+    expect(markup).toContain('--cv-p-accent:#123456')
+    expect(markup).toContain('cv-p-root host-panel')
+    expect(findUtilityClassTokens(markup.replace('host-panel', ''))).toEqual([])
+    expect(findForeignClassTokens(markup.replace('host-panel', ''))).toEqual([])
+  })
+
+  it('draws the conversation without any provider or list around it', () => {
+    expect(render([])).toContain('cv-p-thread__title')
+  })
+})

package/src/participant/ConversationThread.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useMemo, useReducer, useRef, type ReactNode } from 'react'
+
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import type { ConversationChannel } from '../conversationChannel'
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import type { ConversationsTheme } from '../types'
+import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import { ParticipantThread } from './ParticipantThread'
+import { toParticipantApi, type ConversationThreadApi } from './conversationThreadApi'
+import { buildThreadSummary } from './conversationThreadSummary'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import type { ParticipantPendingMessage } from './participantApi.types'
+import { draftKey, type ParticipantDrafts } from './participantDrafts'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
+import { participantSendStatesReducer } from './participantSendStates'
+import { buildParticipantThemeStyle } from './participantTheme'
+import { useParticipantThreadController, type ParticipantThreadCoreProps } from './useParticipantThreadController'
+
+export type ConversationThreadProps = {
+  readonly api: ConversationThreadApi
+  readonly subject: ParticipantSubjectRef
+  /** `participant` (default) is the outside party; `operator` is the company, which owns the outbound messages. */
+  readonly perspective?: ParticipantPerspective
+  readonly title: string
+  readonly protocol?: string
+  readonly channels?: ParticipantConversationSummary['channels']
+  /** `closed` removes the composer and shows `labels.closedNotice`. */
+  readonly status?: 'open' | 'closed'
+  /** Short line under the title, written by the host (for example "Participant: Ana"). */
+  readonly counterpartLabel?: string
+  /** Slot at the end of the header bar for the host's own actions (close, reopen...). The package knows none of them. */
+  readonly headerActions?: ReactNode
+  /** Absent draws no back arrow. */
+  readonly onBack?: () => void
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+  readonly subjectGroups?: readonly ParticipantSubjectGroup[]
+  /** Chips above the field: tapping one fills the text, it never sends. */
+  readonly quickReplies?: readonly QuickReply[]
+  readonly labels?: Partial<ParticipantConversationsLabels>
+  readonly theme?: ConversationsTheme
+  readonly className?: string
+  readonly locale?: string
+  readonly channel?: ConversationChannel
+  readonly pendingMessages?: readonly ParticipantPendingMessage[]
+  readonly onRetryPending?: (clientMessageId: string) => void
+  /** Tells the host the other side's messages were marked read, to refresh its own badges. */
+  readonly onMarkedRead?: (subject: ParticipantSubjectRef) => void
+  readonly tail?: boolean
+  readonly avatars?: 'initials'
+  readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+}
+
+function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
+  const { perspective = 'participant' } = props
+  const { subjectType, subjectId } = props.subject
+  const subject = useMemo<ParticipantSubjectRef>(() => ({ subjectType, subjectId }), [subjectType, subjectId])
+  const onMarkedReadRef = useRef(props.onMarkedRead)
+  onMarkedReadRef.current = props.onMarkedRead
+  const handleMarkedRead = useCallback((marked: ParticipantSubjectRef) => onMarkedReadRef.current?.(marked), [])
+  const api = useMemo(() => toParticipantApi(props.api), [props.api])
+  const draftsRef = useRef<ParticipantDrafts>(new Map())
+  const [sendStates, dispatchSendStates] = useReducer(participantSendStatesReducer, new Map())
+  const labels = useMemo(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels])
+  const { title, protocol, channels, status } = props
+  const conversation = useMemo(
+    () => 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: ConversationThreadProps) {
+  const core = useConversationThreadCore(props)
+
+  return (
+    <div
+      className={['cv-p-root', props.className].filter(Boolean).join(' ')}
+      style={buildParticipantThemeStyle(props.theme)}
+    >
+      <div className="cv-p-root__screen">
+        <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}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** One conversation about one subject, drawn like the participant app and seen from either side. */
+export function ConversationThread(props: ConversationThreadProps) {
+  return <ConversationThreadBody key={draftKey(props.subject)} {...props} />
+}

package/src/participant/ParticipantMessageBubble.tsx

@@ -7,6 +7,7 @@ import { FailedActions, OwnStatus } from './ParticipantBubbleStatus'
 import { ParticipantMessageText } from './ParticipantMessageText'
 import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
 import {
   isOwnMessage,
   resolveOwnMessageStatus,
@@ -29,6 +30,8 @@ export type ParticipantMessageBubbleProps = {
   readonly avatar?: ReactNode
   /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
   readonly tail?: boolean
+  /** Who is looking; absent is the participant. The operator owns the outbound messages. */
+  readonly perspective?: ParticipantPerspective
 }
 
 type BubbleContent = {
@@ -42,11 +45,11 @@ type BubbleContent = {
   readonly serverStatus?: MessageDeliveryStatus
 }
 
-function describeItem(item: ParticipantTimelineItem): BubbleContent {
+function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPerspective): BubbleContent {
   if (item.kind === 'server') {
     const { message } = item
     return {
-      isMine: isOwnMessage(message),
+      isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? undefined,
       text: message.text ?? undefined,
       createdAt: message.createdAt,
@@ -82,8 +85,9 @@ export function ParticipantMessageBubble({
   onEdit,
   avatar,
   tail = true,
+  perspective,
 }: ParticipantMessageBubbleProps) {
-  const content = describeItem(item)
+  const content = describeItem(item, perspective)
   const { isMine } = content
   const ownStatus = isMine
     ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead })

package/src/participant/ParticipantThread.tsx

@@ -12,6 +12,7 @@ import type { ParticipantPendingActions } from './participantBubbleActions'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadView'
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
+import type { ParticipantPerspective } from './participantPerspective'
 import type { ParticipantThreadScroll } from './useStickToBottom'
 import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
 import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
@@ -62,6 +63,12 @@ export type ParticipantThreadProps = {
   readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
   /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
   readonly tail?: boolean
+  /** Who is looking; absent is the participant, so nothing changes for the existing screen. */
+  readonly perspective?: ParticipantPerspective
+  /** Short line under the title, written by the host. */
+  readonly counterpartLabel?: string
+  /** Host slot at the end of the header bar (close, reopen...). */
+  readonly headerActions?: ReactNode
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -100,6 +107,8 @@ function ThreadBody(props: ParticipantThreadProps) {
         renderSubjectIcon={props.renderSubjectIcon}
         onBack={props.onBack}
         onOpenSubject={props.onOpenSubject}
+        counterpartLabel={props.counterpartLabel}
+        actions={props.headerActions}
       />
       {subjectCard ? <div className="cv-p-thread__subject-card">{subjectCard}</div> : null}
       <div className="cv-p-thread__scroll" ref={props.scroll.ref} onScroll={props.scroll.onScroll} tabIndex={-1}>

package/src/participant/ParticipantThreadHeader.tsx

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react'
+
 import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
 import { ParticipantBackButton } from './ParticipantBackButton'
@@ -16,6 +18,10 @@ export type ParticipantThreadHeaderProps = {
   readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
   readonly onBack?: () => void
   readonly onOpenSubject?: (subject: ParticipantSubjectRef) => void
+  /** Short line under the title, written by the host (for example who is on the other side). */
+  readonly counterpartLabel?: string
+  /** Host slot at the end of the bar; the package knows none of these actions. */
+  readonly actions?: ReactNode
 }
 
 type TitleProps = Pick<ParticipantThreadHeaderProps, 'conversation' | 'labels' | 'onOpenSubject'>
@@ -47,6 +53,8 @@ export function ParticipantThreadHeader({
   renderSubjectIcon,
   onBack,
   onOpenSubject,
+  counterpartLabel,
+  actions,
 }: ParticipantThreadHeaderProps) {
   const group = subjectGroups?.find((candidate) => candidate.subjectType === conversation.subjectType)
   const icon = resolveConversationIcon({ conversation, group, renderSubjectIcon })
@@ -59,6 +67,7 @@ export function ParticipantThreadHeader({
       <div className="cv-p-thread__heading">
         {icon === undefined && group ? <p className="cv-p-thread__eyebrow">{group.label}</p> : null}
         <Title conversation={conversation} labels={labels} onOpenSubject={onOpenSubject} />
+        {counterpartLabel ? <p className="cv-p-thread__counterpart">{counterpartLabel}</p> : null}
         {conversation.protocol || hasChannels ? (
           <div className="cv-p-thread__meta">
             {conversation.protocol ? (
@@ -68,6 +77,7 @@ export function ParticipantThreadHeader({
           </div>
         ) : null}
       </div>
+      {actions ? <div className="cv-p-thread__actions">{actions}</div> : null}
     </header>
   )
 }

package/src/participant/ParticipantThreadScreen.tsx

@@ -1,19 +1,15 @@
-import { useEffect, useMemo, useState, type Dispatch, type MutableRefObject } from 'react'
+import { useEffect, useState, type Dispatch, type MutableRefObject } from 'react'
 
 import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
 import { ParticipantBackButton } from './ParticipantBackButton'
 import { ParticipantThread } from './ParticipantThread'
 import type { ParticipantConversationsScreenProps } from './ParticipantConversationsScreen'
-import { bindAttachmentUrlResolver } from './bindAttachmentUrlResolver'
 import type { ParticipantDrafts } from './participantDrafts'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import type { ParticipantConversationsApi } from './participantApi.types'
-import { findFailedEntry, hasSendingEntry } from './participantSendController'
 import type { ParticipantSendStates, ParticipantSendStatesAction } from './participantSendStates'
-import { useParticipantDraft } from './useParticipantDraft'
-import { useParticipantConversationView } from './useParticipantConversationView'
-import { useParticipantThreadScroll } from './useParticipantThreadScroll'
+import { useParticipantThreadController } from './useParticipantThreadController'
 
 export type ParticipantThreadScreenProps = Omit<ParticipantConversationsScreenProps, 'selected' | 'labels'> & {
   readonly selected: ParticipantSubjectRef
@@ -90,53 +86,17 @@ export function ParticipantThreadScreen(props: ParticipantThreadScreenProps) {
 type LoadedThreadProps = ParticipantThreadScreenProps & { readonly conversation: ParticipantConversationSummary }
 
 function LoadedThread(props: LoadedThreadProps) {
-  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 = useMemo(() => bindAttachmentUrlResolver(api), [api])
-  const { scroll, newMessagesCount } = useParticipantThreadScroll(items)
-
-  function handleSend(): void {
-    const content = takeForSend()
-    if (content) void thread.send(content)
-  }
-
-  function handleEdit(clientMessageId: string): void {
-    const entry = findFailedEntry(sendEntries, clientMessageId)
-    if (!entry) return
-    restoreFromEntry(entry)
-    dispatchSend({ type: 'discarded', clientMessageId })
-  }
 
   return (
     <ParticipantThread
-      conversation={conversation}
-      items={items}
-      hasMore={thread.hasMore}
-      labels={props.labels}
-      resolveAttachmentUrl={resolveAttachmentUrl}
-      draft={{ value: draft.text, onChange: setText, files: draft.files, onFilesChange: setFiles }}
-      onSend={handleSend}
-      status={thread.status}
-      refresh={() => void thread.refresh()}
-      scroll={scroll}
-      newMessagesCount={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}