@adatechnology/conversations-ui 0.7.0 → 0.9.0

package/src/participant/participantFailedMenuDom.test.tsx

@@ -0,0 +1,154 @@
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it } from 'bun:test'
+import { act } from 'react'
+
+import { setupDom, pressKey, type DomHarness } from '../domHarness.test-helper'
+import { ParticipantFailedMenu } from './ParticipantFailedMenu'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as LABELS } from './participantLabels'
+
+let harness: DomHarness
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+afterAll(() => harness.teardown())
+
+const noop = (): void => undefined
+
+function mountMenu() {
+  const tree = harness.mount(
+    <div className="cv-p-thread__scroll">
+      <div className="cv-p-bubble">
+        <ParticipantFailedMenu labels={LABELS} onEdit={noop} onDiscard={noop} />
+      </div>
+    </div>,
+  )
+  const trigger = tree.container.querySelector<HTMLButtonElement>('.cv-p-failed-menu__trigger')!
+  return { ...tree, trigger }
+}
+
+function click(element: Element): void {
+  act(() => element.dispatchEvent(new MouseEvent('click', { bubbles: true })))
+}
+
+function items(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+}
+
+describe('failed menu in a DOM', () => {
+  it('opens on click, names the menu by the trigger and focuses the first item', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+
+    const menu = container.querySelector('[role="menu"]')!
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+    expect(menu.getAttribute('aria-labelledby')).toBe(trigger.id)
+    expect(document.activeElement).toBe(items(container)[0])
+    expect(items(container).every((item) => item.tabIndex === -1)).toBe(true)
+    expect(trigger.hasAttribute('data-cv-tooltip')).toBe(false)
+  })
+
+  it('ArrowUp on the trigger opens the menu on the last item', () => {
+    const { container, trigger } = mountMenu()
+    act(() => trigger.focus())
+    pressKey(trigger, 'ArrowUp')
+
+    expect(document.activeElement).toBe(items(container)[1])
+  })
+
+  it('Escape closes, gives the focus back to the trigger and does not reach the host', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    let hostSawEscape = false
+    const hostListener = (): void => void (hostSawEscape = true)
+    document.addEventListener('keydown', hostListener)
+
+    pressKey(items(container)[0]!, 'Escape')
+    document.removeEventListener('keydown', hostListener)
+
+    expect(container.querySelector('[role="menu"]')).toBeNull()
+    expect(document.activeElement).toBe(trigger)
+    expect(hostSawEscape).toBe(false)
+  })
+
+  it('Tab closes the menu without pulling the focus back to the trigger', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    pressKey(items(container)[0]!, 'Tab')
+
+    expect(container.querySelector('[role="menu"]')).toBeNull()
+    expect(document.activeElement).not.toBe(trigger)
+  })
+
+  it('closes on a pointer press outside and keeps open on one inside', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    act(() => void items(container)[0]!.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    expect(container.querySelector('[role="menu"]')).not.toBeNull()
+
+    act(() => void document.body.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    expect(container.querySelector('[role="menu"]')).toBeNull()
+  })
+
+  it('removes its document listener when unmounted with the menu open', () => {
+    const added: string[] = []
+    const removed: string[] = []
+    const add = document.addEventListener.bind(document)
+    const remove = document.removeEventListener.bind(document)
+    document.addEventListener = ((type: string, ...rest: unknown[]) => {
+      added.push(type)
+      return (add as (...args: unknown[]) => void)(type, ...rest)
+    }) as typeof document.addEventListener
+    document.removeEventListener = ((type: string, ...rest: unknown[]) => {
+      removed.push(type)
+      return (remove as (...args: unknown[]) => void)(type, ...rest)
+    }) as typeof document.removeEventListener
+
+    const { unmount, trigger } = mountMenu()
+    click(trigger)
+    unmount()
+    document.addEventListener = add
+    document.removeEventListener = remove
+
+    expect(added.filter((type) => type === 'pointerdown')).toHaveLength(1)
+    expect(removed.filter((type) => type === 'pointerdown')).toHaveLength(1)
+    expect(() => document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }))).not.toThrow()
+  })
+})
+
+describe('failed menu placement in a DOM', () => {
+  let original: typeof Element.prototype.getBoundingClientRect
+
+  beforeEach(() => {
+    original = Element.prototype.getBoundingClientRect
+  })
+  afterEach(() => {
+    Element.prototype.getBoundingClientRect = original
+  })
+
+  function stubLayout(bubbleTop: number): void {
+    Element.prototype.getBoundingClientRect = function (this: Element) {
+      const top = this.classList.contains('cv-p-thread__scroll') ? 100 : this.classList.contains('cv-p-bubble') ? bubbleTop : 0
+      const height = this.getAttribute('role') === 'menu' ? 90 : 20
+      return { top, bottom: top + height, left: 0, right: 0, width: 0, height, x: 0, y: top, toJSON: () => ({}) }
+    }
+  }
+
+  it('flips below when the bubble is the first of the conversation', () => {
+    stubLayout(108)
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    Element.prototype.getBoundingClientRect = original
+
+    expect(container.querySelector('.cv-p-failed-menu__list--below')).not.toBeNull()
+  })
+
+  it('stays above when there is room', () => {
+    stubLayout(500)
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    Element.prototype.getBoundingClientRect = original
+
+    expect(container.querySelector('[role="menu"]')).not.toBeNull()
+    expect(container.querySelector('.cv-p-failed-menu__list--below')).toBeNull()
+  })
+})

package/src/participant/participantFailedMenuState.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  CLOSED_FAILED_MENU,
+  failedMenuReducer,
+  resolveFailedMenuKey,
+  resolveFailedMenuPlacement,
+  resolveFailedMenuTriggerKey,
+} from './participantFailedMenuState'
+
+describe('failed menu state', () => {
+  it('toggles open on first focus item and closes again', () => {
+    const open = failedMenuReducer(CLOSED_FAILED_MENU, { type: 'toggle' })
+    expect(open).toEqual({ isOpen: true, initialFocus: 'first' })
+    expect(failedMenuReducer(open, { type: 'toggle' })).toEqual(CLOSED_FAILED_MENU)
+  })
+
+  it('opens on the last item when asked and ignores a close while closed', () => {
+    expect(failedMenuReducer(CLOSED_FAILED_MENU, { type: 'open', initialFocus: 'last' }).initialFocus).toBe('last')
+    expect(failedMenuReducer(CLOSED_FAILED_MENU, { type: 'close' })).toBe(CLOSED_FAILED_MENU)
+  })
+})
+
+describe('failed menu keyboard', () => {
+  it('Escape closes and gives the focus back to the trigger', () => {
+    expect(resolveFailedMenuKey({ key: 'Escape', index: 0, count: 2 })).toEqual({ type: 'close', shouldRestoreFocus: true })
+  })
+
+  it('Tab closes without trapping: focus is not pulled back', () => {
+    expect(resolveFailedMenuKey({ key: 'Tab', index: 1, count: 2 })).toEqual({ type: 'close', shouldRestoreFocus: false })
+  })
+
+  it('arrows wrap around, Home and End jump', () => {
+    expect(resolveFailedMenuKey({ key: 'ArrowDown', index: 1, count: 2 })).toEqual({ type: 'focus', index: 0 })
+    expect(resolveFailedMenuKey({ key: 'ArrowUp', index: 0, count: 2 })).toEqual({ type: 'focus', index: 1 })
+    expect(resolveFailedMenuKey({ key: 'Home', index: 1, count: 2 })).toEqual({ type: 'focus', index: 0 })
+    expect(resolveFailedMenuKey({ key: 'End', index: 0, count: 2 })).toEqual({ type: 'focus', index: 1 })
+    expect(resolveFailedMenuKey({ key: 'a', index: 0, count: 2 })).toBeUndefined()
+  })
+
+  it('ArrowDown and ArrowUp open the menu from the trigger on the matching end', () => {
+    expect(resolveFailedMenuTriggerKey('ArrowDown')).toBe('first')
+    expect(resolveFailedMenuTriggerKey('ArrowUp')).toBe('last')
+    expect(resolveFailedMenuTriggerKey('Enter')).toBeUndefined()
+  })
+})
+
+describe('failed menu placement', () => {
+  it('opens above when the scroller leaves room for the menu', () => {
+    expect(resolveFailedMenuPlacement({ anchorTop: 300, scrollerTop: 100, menuHeight: 90 })).toBe('above')
+  })
+
+  it('flips below for the first bubble of the conversation, where the scroller would clip it', () => {
+    expect(resolveFailedMenuPlacement({ anchorTop: 112, scrollerTop: 100, menuHeight: 90 })).toBe('below')
+  })
+
+  it('needs the gap too: room for exactly the menu is not enough', () => {
+    expect(resolveFailedMenuPlacement({ anchorTop: 190, scrollerTop: 100, menuHeight: 90 })).toBe('below')
+    expect(resolveFailedMenuPlacement({ anchorTop: 198, scrollerTop: 100, menuHeight: 90 })).toBe('above')
+  })
+})

package/src/participant/participantFailedMenuState.ts

@@ -0,0 +1,57 @@
+export type FailedMenuFocus = 'first' | 'last'
+
+export type FailedMenuState = { readonly isOpen: boolean; readonly initialFocus: FailedMenuFocus }
+
+export type FailedMenuAction =
+  | { readonly type: 'open'; readonly initialFocus: FailedMenuFocus }
+  | { readonly type: 'close' }
+  | { readonly type: 'toggle' }
+
+export const CLOSED_FAILED_MENU: FailedMenuState = { isOpen: false, initialFocus: 'first' }
+
+export function failedMenuReducer(state: FailedMenuState, action: FailedMenuAction): FailedMenuState {
+  if (action.type === 'open') return { isOpen: true, initialFocus: action.initialFocus }
+  if (action.type === 'close') return state.isOpen ? CLOSED_FAILED_MENU : state
+  return state.isOpen ? CLOSED_FAILED_MENU : { isOpen: true, initialFocus: 'first' }
+}
+
+export type FailedMenuKeyResult =
+  | { readonly type: 'focus'; readonly index: number }
+  | { readonly type: 'close'; readonly shouldRestoreFocus: boolean }
+
+type MenuKeyParams = { readonly key: string; readonly index: number; readonly count: number }
+
+/** Roving focus inside the open menu; Tab is never trapped, it closes the menu and lets focus move on. */
+export function resolveFailedMenuKey({ key, index, count }: MenuKeyParams): FailedMenuKeyResult | undefined {
+  if (key === 'Escape') return { type: 'close', shouldRestoreFocus: true }
+  if (key === 'Tab') return { type: 'close', shouldRestoreFocus: false }
+  if (key === 'ArrowDown') return { type: 'focus', index: (index + 1) % count }
+  if (key === 'ArrowUp') return { type: 'focus', index: (index - 1 + count) % count }
+  if (key === 'Home') return { type: 'focus', index: 0 }
+  if (key === 'End') return { type: 'focus', index: count - 1 }
+  return undefined
+}
+
+/** Keys that open the menu from its trigger; Enter and Space already open it through the click. */
+export function resolveFailedMenuTriggerKey(key: string): FailedMenuFocus | undefined {
+  if (key === 'ArrowDown') return 'first'
+  if (key === 'ArrowUp') return 'last'
+  return undefined
+}
+
+export type FailedMenuPlacement = 'above' | 'below'
+
+const MENU_GAP_PX = 8
+
+type MenuPlacementParams = {
+  /** Top edge of the bubble the menu hangs from. */
+  readonly anchorTop: number
+  /** Top edge of the scroller that clips the menu. */
+  readonly scrollerTop: number
+  readonly menuHeight: number
+}
+
+/** The menu opens above its bubble; it flips below when the scroller would clip it. */
+export function resolveFailedMenuPlacement({ anchorTop, scrollerTop, menuHeight }: MenuPlacementParams): FailedMenuPlacement {
+  return anchorTop - scrollerTop >= menuHeight + MENU_GAP_PX ? 'above' : 'below'
+}

package/src/participant/participantFailedMessage.test.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { OwnStatus, RetryButton } from './ParticipantBubbleStatus'
+import { ParticipantFailedMenu } from './ParticipantFailedMenu'
+import { declarationsIn } from './participantCss.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as LABELS } from './participantLabels'
+
+const noop = (): void => undefined
+
+describe('failed message: markup', () => {
+  it('puts retry in a round icon button with the long text as its name, no visible text', () => {
+    const markup = renderToStaticMarkup(<RetryButton labels={LABELS} onRetry={noop} />)
+
+    expect(markup).toContain('aria-label="Failed — tap to retry"')
+    expect(markup).toContain('aria-hidden="true"')
+    expect(markup.replace(/<svg.*<\/svg>/, '')).not.toMatch(/>[A-Za-z]/)
+  })
+
+  it('keeps the meta of a failed bubble to the red icon, with the short text for screen readers only', () => {
+    const withRetry = renderToStaticMarkup(<OwnStatus status="failed" labels={LABELS} onRetry={noop} />)
+    const withoutRetry = renderToStaticMarkup(<OwnStatus status="failed" labels={LABELS} />)
+
+    expect(withRetry).not.toContain('<button')
+    expect(withRetry).toContain('cv-status-ticks--failed')
+    expect(withRetry).toContain('cv-p-sr-only">Failed<')
+    expect(withoutRetry).toContain('cv-p-bubble__status-text">Failed<')
+  })
+
+  it('renders a closed menu trigger with the menu button semantics, and no menu without handlers', () => {
+    const markup = renderToStaticMarkup(<ParticipantFailedMenu labels={LABELS} onEdit={noop} onDiscard={noop} />)
+
+    expect(markup).toContain('aria-haspopup="menu"')
+    expect(markup).toContain('aria-expanded="false"')
+    expect(markup).toContain('data-cv-tooltip="Message options"')
+    expect(markup).toContain('aria-label="Message options"')
+    expect(markup).not.toContain('role="menu"')
+    expect(renderToStaticMarkup(<ParticipantFailedMenu labels={LABELS} />)).toBe('')
+  })
+})
+
+describe('failed message: styles', () => {
+  it('hangs the retry button beside the bubble: 44px target, 2rem circle, no layout space taken', () => {
+    const button = declarationsIn('.cv-p-failed-retry')
+    const icon = declarationsIn('.cv-p-failed-retry__icon')
+
+    expect(button.get('position')).toBe('absolute')
+    expect(button.get('right')).toContain('100%')
+    expect(button.get('width')).toBe('var(--cv-p-i-touch)')
+    expect(button.get('height')).toBe('var(--cv-p-i-touch)')
+    expect(icon.get('width')).toBe('2rem')
+    expect(icon.get('border-radius')).toBe('50%')
+    expect(button.get('color')).toBe('var(--cv-p-i-danger)')
+  })
+
+  it('keeps the bubble cap of 85% by not wrapping the bubble in a row', () => {
+    expect(declarationsIn('.cv-p-bubble-row--failed').size).toBe(0)
+    expect(declarationsIn('.cv-p-bubble').get('max-width')).toBe('85%')
+  })
+
+  it('flips the menu below the bubble with a modifier', () => {
+    expect(declarationsIn('.cv-p-failed-menu__list--below').get('top')).toContain('100%')
+    expect(declarationsIn('.cv-p-failed-menu__list--below').get('bottom')).toBe('auto')
+  })
+
+  it('draws the menu with square corners, text and danger tokens, 44px items', () => {
+    expect(declarationsIn('.cv-p-failed-menu__list').get('border-radius')).toBe('var(--cv-p-i-radius)')
+    expect(declarationsIn('.cv-p-failed-menu__list').get('bottom')).toContain('100%')
+    expect(declarationsIn('.cv-p-failed-menu__item').get('color')).toBe('var(--cv-p-i-text)')
+    expect(declarationsIn('.cv-p-failed-menu__item').get('min-height')).toBe('var(--cv-p-i-touch)')
+    expect(declarationsIn('.cv-p-failed-menu__item--danger').get('color')).toBe('var(--cv-p-i-danger)')
+  })
+
+  it('keeps the trigger hit area inside the bubble padding (0.5rem), never into other rows', () => {
+    expect(declarationsIn('.cv-p-failed-menu__trigger::after').get('inset')).toBe('-0.5rem -0.4rem')
+  })
+
+  it('has no leftover action-row or bordered-retry rules', () => {
+    for (const selector of ['.cv-p-bubble__retry', '.cv-p-bubble__action', '.cv-p-bubble__actions']) {
+      expect(declarationsIn(selector).size).toBe(0)
+    }
+  })
+})

package/src/participant/participantGolden.test.tsx

@@ -0,0 +1,46 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { beforeAll, describe, expect, it } from 'bun:test'
+
+import { ParticipantConversations } from './ParticipantConversations'
+import { ParticipantThread } from './ParticipantThread'
+import { renderGoldenScenarios, type GoldenComponents } from './participantGoldenScenarios.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+
+const FIXTURES_DIRECTORY = join(import.meta.dir, 'test-fixtures')
+
+function readGolden(name: string): string {
+  return readFileSync(join(FIXTURES_DIRECTORY, `${name}.golden.html`), 'utf8')
+}
+
+describe('participant default markup against the recorded origin/main output', () => {
+  let rendered: Record<string, string> = {}
+
+  beforeAll(() => {
+    process.env.TZ = 'UTC'
+    rendered = renderGoldenScenarios({
+      ParticipantThread,
+      ParticipantConversations,
+      labels: DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
+    } as unknown as GoldenComponents)
+  })
+
+  const scenarioNames = [
+    'thread-default',
+    'thread-plain',
+    'thread-avatars-initials',
+    'thread-tail-off',
+    'thread-error',
+    'thread-loading',
+    'thread-closed',
+    'conversations-list',
+    'conversations-selected',
+  ]
+
+  for (const name of scenarioNames) {
+    it(`${name} is byte-identical`, () => {
+      expect(rendered[name]).toBe(readGolden(name))
+    })
+  }
+})

package/src/participant/participantGoldenScenarios.test-helper.tsx

@@ -0,0 +1,57 @@
+import type { ComponentType } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, buildMessage } from './participantFixtures.test-helper'
+
+/** The components under comparison are injected so the same scenarios render against any checkout. */
+export type GoldenComponents = {
+  readonly ParticipantThread: ComponentType<Record<string, unknown>>
+  readonly ParticipantConversations: ComponentType<Record<string, unknown>>
+  readonly labels: unknown
+}
+
+const NOOP = (): void => undefined
+const SUBJECT_GROUPS = [{ subjectType: 'invoice', label: 'Invoices' }]
+
+const ITEMS = [
+  { kind: 'server', message: buildMessage({ id: 'a', direction: 'inbound', authorName: 'Ana Souza', text: '**oi** 11 98888-7777 a@b.com https://x.com', createdAt: '2026-10-01T12:00:00.000Z' }) },
+  { kind: 'server', message: buildMessage({ id: 'b', direction: 'outbound', authorName: 'Op', status: 'read', createdAt: '2026-10-01T12:05:00.000Z' }) },
+  { kind: 'server', message: buildMessage({ id: 'b2', direction: 'inbound', status: 'delivered', createdAt: '2026-10-02T12:05:00.000Z' }) },
+  { kind: 'pending', origin: 'local', displayState: 'failed', pending: { clientMessageId: 'c', subject: { subjectType: 'invoice', subjectId: '1' }, text: 'W', createdAt: '2026-10-02T12:06:00.000Z', state: 'failed' } },
+]
+
+function buildThreadProps(labels: unknown): Record<string, unknown> {
+  return {
+    conversation: buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521', protocol: 'P-1', channels: ['app', 'whatsapp'] }),
+    items: ITEMS, hasMore: true, onLoadOlder: NOOP, labels, resolveAttachmentUrl: async () => 'x',
+    draft: { value: 'abc', onChange: NOOP, files: [], onFilesChange: NOOP }, onSend: NOOP, status: 'ready', refresh: NOOP,
+    scroll: { ref: { current: null }, onScroll: NOOP, isAwayFromBottom: true, scrollToLatest: NOOP },
+    newMessagesCount: 2, isSending: false, onBack: NOOP,
+    pendingActions: { retryLocal: NOOP, discardLocal: NOOP, editLocal: NOOP },
+    quickReplies: [{ id: '1', title: 'T', shortcut: 't', body: 'b' }],
+  }
+}
+
+const THREAD_VARIANTS: Record<string, Record<string, unknown>> = {
+  'thread-default': {},
+  'thread-plain': { hasMore: false, newMessagesCount: 0, quickReplies: [], scroll: { ref: { current: null }, onScroll: NOOP, isAwayFromBottom: false, scrollToLatest: NOOP }, items: ITEMS.slice(0, 2) },
+  'thread-avatars-initials': { avatars: 'initials' },
+  'thread-tail-off': { tail: false },
+  'thread-error': { status: 'error', items: [] },
+  'thread-loading': { status: 'loading', items: [] },
+  'thread-closed': { conversation: buildConversation({ subjectId: '2', status: 'closed' }) },
+}
+
+export function renderGoldenScenarios({ ParticipantThread, ParticipantConversations, labels }: GoldenComponents): Record<string, string> {
+  const base = buildThreadProps(labels)
+  const html: Record<string, string> = {}
+  for (const [name, extra] of Object.entries(THREAD_VARIANTS)) {
+    html[name] = renderToStaticMarkup(<ParticipantThread {...base} {...extra} />)
+  }
+  const api = { listConversations: async () => ({ data: [] }), fetchMessages: async () => [], sendMessage: async () => ({ outcome: 'queued' }), markRead: async () => undefined, resolveAttachmentUrl: async () => 'x' }
+  html['conversations-list'] = renderToStaticMarkup(<ParticipantConversations api={api} subjectGroups={SUBJECT_GROUPS} />)
+  html['conversations-selected'] = renderToStaticMarkup(
+    <ParticipantConversations api={api} subjectGroups={SUBJECT_GROUPS} selected={{ subjectType: 'invoice', subjectId: '1' }} />,
+  )
+  return html
+}

package/src/participant/participantLabels.ts

@@ -1,3 +1,5 @@
+export const DEFAULT_MESSAGE_OPTIONS_LABEL = 'Message options'
+
 export type ParticipantConversationsLabels = {
   readonly inboxTitle: string
   readonly sectionAwaiting: string
@@ -33,9 +35,12 @@ export type ParticipantConversationsLabels = {
   readonly statusRead: string
   readonly statusFailed: string
   readonly statusFailedShort: string
+  /** @deprecated No longer rendered by the default view: the retry button is icon-only and named by `statusFailed`. */
   readonly retry: string
   readonly discard: string
   readonly edit: string
+  /** Name of the menu button on a failed message. Optional; translated hosts should fill it, otherwise the English default shows. */
+  readonly messageOptions?: string
   readonly notFound: string
   readonly loading: string
   readonly loadError: string
@@ -98,6 +103,7 @@ export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsL
   retry: 'Retry',
   discard: 'Discard',
   edit: 'Edit',
+  messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
   notFound: 'Conversation not found',
   loading: 'Loading…',
   loadError: 'Could not load. Check your connection and try again.',

package/src/participant/participantMessages.ts

@@ -1,6 +1,7 @@
 import type { MessageDeliveryStatus, ParticipantMessage, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
 import type { ParticipantLocalPendingMessage, ParticipantPendingMessage } from './participantApi.types'
+import { isMessageMine, type ParticipantPerspective } from './participantPerspective'
 
 export type ParticipantPendingDisplayState = 'sending' | 'queued' | 'failed' | 'sent'
 export type ParticipantOwnMessageStatus = 'sending' | 'queued' | 'sent' | 'delivered' | 'read' | 'failed'
@@ -58,9 +59,9 @@ export function mergeParticipantMessages(params: MergeParticipantMessagesParams)
   return items.sort((left, right) => createdAtOf(left) - createdAtOf(right))
 }
 
-/** Direction is from the company perspective: the participant is the inbound side. */
-export function isOwnMessage(message: ParticipantMessage): boolean {
-  return message.direction === 'inbound'
+/** Direction is from the company side: the participant is the inbound side, the operator the outbound one. */
+export function isOwnMessage(message: ParticipantMessage, perspective?: ParticipantPerspective): boolean {
+  return isMessageMine(message, perspective)
 }
 
 export function resolveOwnMessageStatus(params: ResolveOwnMessageStatusParams): ParticipantOwnMessageStatus {

package/src/participant/participantNewMessages.test.ts

@@ -52,3 +52,24 @@ describe('collectServerMessageIds', () => {
     expect([...collectServerMessageIds([server('a', 'inbound'), server('b', 'outbound')])]).toEqual(['a', 'b'])
   })
 })
+
+describe('countNewIncomingMessages with the operator perspective', () => {
+  const seen = [server('s', 'inbound', '2026-10-01T10:00:00.000Z')]
+  const seenIds = collectServerMessageIds(seen)
+
+  it('counts a new inbound message as news', () => {
+    const items = [...seen, server('n', 'inbound', '2026-10-01T10:05:00.000Z')]
+    expect(countNewIncomingMessages(seenIds, items, 'operator')).toBe(1)
+  })
+
+  it('does not count a new outbound message (written by the operator)', () => {
+    const items = [...seen, server('n', 'outbound', '2026-10-01T10:05:00.000Z')]
+    expect(countNewIncomingMessages(seenIds, items, 'operator')).toBe(0)
+  })
+
+  it('keeps the participant behavior when the perspective is omitted or participant', () => {
+    const items = [...seen, server('n', 'outbound', '2026-10-01T10:05:00.000Z'), server('m', 'inbound', '2026-10-01T10:06:00.000Z')]
+    expect(countNewIncomingMessages(seenIds, items)).toBe(1)
+    expect(countNewIncomingMessages(seenIds, items, 'participant')).toBe(1)
+  })
+})

package/src/participant/participantNewMessages.ts

@@ -1,4 +1,5 @@
 import type { ParticipantTimelineItem } from './participantMessages'
+import { isMessageMine, type ParticipantPerspective } from './participantPerspective'
 
 export function collectServerMessageIds(items: readonly ParticipantTimelineItem[]): ReadonlySet<string> {
   const ids = new Set<string>()
@@ -16,13 +17,17 @@ function latestSeenTime(previousIds: ReadonlySet<string>, items: readonly Partic
   return latest
 }
 
-/** Messages from the other side ('outbound') newer than what the participant has seen; older history loaded above is not news. */
-export function countNewIncomingMessages(previousIds: ReadonlySet<string>, currentItems: readonly ParticipantTimelineItem[]): number {
+/** Messages from the other side of the viewer's perspective newer than what the participant has seen; older history loaded above is not news. */
+export function countNewIncomingMessages(
+  previousIds: ReadonlySet<string>,
+  currentItems: readonly ParticipantTimelineItem[],
+  perspective?: ParticipantPerspective,
+): number {
   const latestSeen = latestSeenTime(previousIds, currentItems)
   return currentItems.filter(
     (item) =>
       item.kind === 'server' &&
-      item.message.direction === 'outbound' &&
+      !isMessageMine(item.message, perspective) &&
       !previousIds.has(item.message.id) &&
       Date.parse(item.message.createdAt) > latestSeen,
   ).length

package/src/participant/participantPerspective.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'bun:test'
+
+import { buildMessage } from './participantFixtures.test-helper'
+import { isOwnMessage } from './participantMessages'
+import {
+  countOtherSideMessages,
+  countUnreadByViewer,
+  isMessageMine,
+  resolveViewerUnread,
+} from './participantPerspective'
+
+const INBOUND = buildMessage({ id: 'i', direction: 'inbound' })
+const OUTBOUND = buildMessage({ id: 'o', direction: 'outbound' })
+
+describe('isMessageMine', () => {
+  it('treats inbound as mine for the participant, and by default', () => {
+    expect(isMessageMine(INBOUND, 'participant')).toBe(true)
+    expect(isMessageMine(OUTBOUND, 'participant')).toBe(false)
+    expect(isMessageMine(INBOUND)).toBe(true)
+    expect(isMessageMine(OUTBOUND)).toBe(false)
+  })
+
+  it('inverts for the operator: outbound is mine', () => {
+    expect(isMessageMine(OUTBOUND, 'operator')).toBe(true)
+    expect(isMessageMine(INBOUND, 'operator')).toBe(false)
+  })
+
+  it('keeps isOwnMessage identical without a perspective', () => {
+    expect(isOwnMessage(INBOUND)).toBe(true)
+    expect(isOwnMessage(OUTBOUND)).toBe(false)
+    expect(isOwnMessage(OUTBOUND, 'operator')).toBe(true)
+  })
+})
+
+describe('unread by the viewer', () => {
+  const MESSAGES = [
+    buildMessage({ id: 'a', direction: 'inbound' }),
+    buildMessage({ id: 'b', direction: 'inbound', status: 'read' }),
+    buildMessage({ id: 'c', direction: 'inbound', readAt: '2026-10-01T11:00:00.000Z' }),
+    buildMessage({ id: 'd', direction: 'outbound' }),
+    buildMessage({ id: 'e', direction: 'outbound' }),
+  ]
+
+  it('counts only the other side, never the viewer own messages', () => {
+    expect(countUnreadByViewer(MESSAGES, 'operator')).toBe(1)
+    expect(countUnreadByViewer(MESSAGES, 'participant')).toBe(2)
+    expect(countOtherSideMessages(MESSAGES, 'operator')).toBe(3)
+    expect(countOtherSideMessages(MESSAGES, 'participant')).toBe(2)
+  })
+
+  it('reads nothing as unread when the operator has only outbound messages', () => {
+    expect(countUnreadByViewer([OUTBOUND, OUTBOUND], 'operator')).toBe(0)
+  })
+
+  it('resolves to zero until something new arrives after the acknowledgement', () => {
+    const base = { messages: MESSAGES, perspective: 'operator' } as const
+    expect(resolveViewerUnread({ ...base, acknowledgedCount: 0 })).toBe(1)
+    expect(resolveViewerUnread({ ...base, acknowledgedCount: 3 })).toBe(0)
+    expect(
+      resolveViewerUnread({
+        ...base,
+        messages: [...MESSAGES, buildMessage({ id: 'f', direction: 'inbound' })],
+        acknowledgedCount: 3,
+      }),
+    ).toBe(2)
+  })
+})