@adatechnology/conversations-ui 0.7.0 → 0.9.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,
@@ -1379,8 +1382,8 @@
 .cv-p-chip,
 .cv-p-row,
 .cv-p-thread__older,
-.cv-p-bubble__retry,
-.cv-p-bubble__action {
+.cv-p-failed-menu__trigger,
+.cv-p-failed-menu__item {
   font: inherit;
   color: inherit;
   cursor: pointer;
@@ -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 {
@@ -1967,8 +1970,7 @@
   min-width: 0;
   margin-inline-end: auto;
 }
-.cv-p-bubble > .cv-p-attachment,
-.cv-p-bubble > .cv-p-bubble__actions {
+.cv-p-bubble > .cv-p-attachment {
   flex: 1 0 100%;
 }
 .cv-p-bubble__meta {
@@ -1990,33 +1992,114 @@
   align-items: center;
   gap: 0.25rem;
 }
-.cv-p-bubble__retry {
-  min-height: var(--cv-p-i-touch);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0.5rem;
+.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);
+}
+@supports (color: color-mix(in srgb, red, blue)) {
+  .cv-p-bubble--failed {
+    border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border));
+    --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border));
+  }
+  .cv-p-bubble--mine.cv-p-bubble--failed {
+    border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent));
+    --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent));
+  }
+}
+.cv-p-failed-retry {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.125rem);
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: var(--cv-p-i-touch);
+  height: var(--cv-p-i-touch);
+  padding: 0;
   background: transparent;
-  border: 1px solid var(--cv-p-i-danger);
+  border: 0;
   color: var(--cv-p-i-danger);
-  border-radius: var(--cv-p-i-radius);
-  font-size: 0.7rem;
+  font: inherit;
+  cursor: pointer;
 }
-.cv-p-bubble__actions {
-  display: inline-flex;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
+.cv-p-failed-retry__icon {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--cv-p-i-danger);
+  border-radius: 50%;
 }
-.cv-p-bubble__action {
-  min-height: var(--cv-p-i-touch);
+.cv-p-failed-retry:hover .cv-p-failed-retry__icon,
+.cv-p-failed-retry:focus-visible .cv-p-failed-retry__icon {
+  background: var(--cv-p-i-surface-raised);
+}
+.cv-p-failed-menu {
   display: inline-flex;
-  align-items: center;
-  padding: 0 0.75rem;
+}
+.cv-p-failed-menu__trigger {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 0.75rem;
+  padding: 0;
   background: transparent;
+  border: 0;
+  color: var(--cv-p-i-text-muted);
+  font: inherit;
+  line-height: 0.75rem;
+  cursor: pointer;
+}
+.cv-p-failed-menu__trigger::after {
+  content: "";
+  position: absolute;
+  inset: -0.5rem -0.4rem;
+}
+.cv-p-failed-menu__list {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.25rem);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  min-width: 8rem;
+  background: var(--cv-p-i-surface-raised);
   border: 1px solid var(--cv-p-i-border);
-  color: inherit;
   border-radius: var(--cv-p-i-radius);
-  font-size: 0.7rem;
+}
+.cv-p-failed-menu__item {
+  min-height: var(--cv-p-i-touch);
+  padding: 0 0.75rem;
+  background: transparent;
+  border: 0;
+  color: var(--cv-p-i-text);
+  font:
+    0.7rem "SFMono-Regular",
+    Consolas,
+    monospace;
+  text-align: start;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+.cv-p-failed-menu__list--below {
+  bottom: auto;
+  top: calc(100% + 0.25rem);
+}
+.cv-p-failed-menu__item--danger {
+  color: var(--cv-p-i-danger);
+}
+.cv-p-failed-menu__item:hover,
+.cv-p-failed-menu__item:focus-visible {
+  background: var(--cv-p-i-highlight);
 }
 .cv-p-attachment {
   display: flex;
@@ -2483,7 +2566,45 @@
 .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;
+  }
+  .cv-p-failed-menu__list {
+    border-color: CanvasText;
+  }
+  .cv-p-failed-menu__item:focus-visible,
+  .cv-p-failed-menu__item:hover {
+    outline: 2px solid Highlight;
+  }
 }
 @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.9.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -49,6 +49,7 @@
     }
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^18.0.1",
     "@types/bun": "1.3.14",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19",

package/src/Tooltip.tsx

@@ -14,6 +14,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { createTooltipLayerRegistry } from './tooltipLayerRegistry'
+
 /** Atributo que marca um elemento como portador de dica. */
 export const TOOLTIP_ATTRIBUTE = 'data-cv-tooltip'
 
@@ -64,25 +66,16 @@ function tooltipStateFor(target: Element, text: string): TooltipState {
 /**
  * Só uma camada desenha por vez. A camada é montada por cada superfície do pacote (inbox, fluxos,
  * documentos) para o host não precisar montá-la à mão; duas superfícies na mesma tela renderizariam
- * dois balões sobrepostos sem essa trava.
+ * dois balões sobrepostos sem essa trava. Quando a dona desmonta, a posse passa à próxima montada.
  */
-let layerOwner: object | undefined
+const layerRegistry = createTooltipLayerRegistry()
 
 export function TooltipLayer() {
   const identity = useRef({})
   const [isOwner, setIsOwner] = useState(false)
   const [tooltip, setTooltip] = useState<TooltipState | undefined>(undefined)
 
-  useEffect(() => {
-    const owned = identity.current
-    if (layerOwner && layerOwner !== owned) return undefined
-    layerOwner = owned
-    setIsOwner(true)
-
-    return () => {
-      if (layerOwner === owned) layerOwner = undefined
-    }
-  }, [])
+  useEffect(() => layerRegistry.register(identity.current, setIsOwner), [])
 
   useEffect(() => {
     if (!isOwner) return undefined

package/src/TooltipDom.test.tsx

@@ -0,0 +1,78 @@
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+import { act, useRef } from 'react'
+
+import { setupDom, wait, type DomHarness } from './domHarness.test-helper'
+import { TooltipLayer } from './Tooltip'
+import { useSuppressTouchTooltips } from './participant/useSuppressTouchTooltips'
+
+let harness: DomHarness
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+afterAll(() => harness.teardown())
+
+function hover(target: Element): void {
+  act(() => void target.dispatchEvent(new Event('pointerover', { bubbles: true })))
+}
+
+function balloons(): number {
+  return document.body.querySelectorAll('[role="tooltip"]').length
+}
+
+function Target() {
+  return <button type="button" data-cv-tooltip="Hint">x</button>
+}
+
+describe('TooltipLayer ownership', () => {
+  it('draws one balloon with two layers, and keeps drawing after the owner unmounts', async () => {
+    const first = harness.mount(<TooltipLayer />)
+    harness.mount(<TooltipLayer />)
+    const target = harness.mount(<Target />).container.querySelector('button')!
+
+    hover(target)
+    await wait(200)
+    expect(balloons()).toBe(1)
+
+    first.unmount()
+    act(() => void target.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    hover(target)
+    await wait(200)
+    expect(balloons()).toBe(1)
+  })
+})
+
+function Thread() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  useSuppressTouchTooltips(rootRef)
+  return (
+    <div ref={rootRef}>
+      <Target />
+    </div>
+  )
+}
+
+describe('touch on the participant thread', () => {
+  it('does not light the balloon when a tap focuses the button', async () => {
+    harness.mount(<TooltipLayer />)
+    const button = harness.mount(<Thread />).container.querySelector('button')!
+
+    act(() => void button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'touch' })))
+    act(() => void button.dispatchEvent(new Event('focusin', { bubbles: true })))
+    await wait(200)
+
+    expect(balloons()).toBe(0)
+  })
+
+  it('still shows it for keyboard focus after a touch', async () => {
+    harness.mount(<TooltipLayer />)
+    const button = harness.mount(<Thread />).container.querySelector('button')!
+
+    act(() => void button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'touch' })))
+    act(() => void button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })))
+    act(() => void button.dispatchEvent(new Event('focusin', { bubbles: true })))
+    await wait(200)
+
+    expect(balloons()).toBe(1)
+  })
+})

package/src/domHarness.test-helper.ts

@@ -0,0 +1,53 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+import { act, type ReactElement } from 'react'
+import type { Root } from 'react-dom/client'
+
+export type MountedTree = {
+  readonly container: HTMLElement
+  readonly unmount: () => void
+}
+
+export type DomHarness = {
+  readonly mount: (element: ReactElement) => MountedTree
+  readonly teardown: () => void
+}
+
+/**
+ * Registers happy-dom for one test file only and mounts React trees into it. react-dom/client is
+ * imported after the registration because it reads the DOM globals when it loads.
+ */
+export async function setupDom(): Promise<DomHarness> {
+  GlobalRegistrator.register()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const { createRoot } = await import('react-dom/client')
+  const roots: Root[] = []
+
+  function mount(element: ReactElement): MountedTree {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    roots.push(root)
+    act(() => root.render(element))
+    return { container, unmount: () => act(() => root.unmount()) }
+  }
+
+  function teardown(): void {
+    for (const root of roots) act(() => root.unmount())
+    document.body.innerHTML = ''
+    GlobalRegistrator.unregister()
+  }
+
+  return { mount, teardown }
+}
+
+export function pressKey(target: Element, key: string): void {
+  act(() => {
+    target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+  })
+}
+
+export function wait(milliseconds: number): Promise<void> {
+  return act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, milliseconds))
+  })
+}

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')
+  })
+})