@adatechnology/conversations-ui 0.13.0 → 0.14.0

package/src/participant/ParticipantMessageInfo.tsx

@@ -0,0 +1,70 @@
+import { X } from 'lucide-react'
+import { useEffect, useRef } from 'react'
+
+import type { ParticipantMessageActionsTarget } from './ParticipantAuthorAvatar'
+import type { ParticipantMessageMenuState } from './ParticipantMessageMenuContext'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as DEFAULTS } from './participantLabels'
+import { messageInfoRows } from './participantMessageInfoModel'
+import { useOpenUpwards } from './useOpenUpwards'
+
+type ParticipantMessageInfoProps = {
+  readonly state: ParticipantMessageMenuState
+  readonly message: ParticipantMessageActionsTarget
+  readonly onClose: () => void
+}
+
+/** Small panel beside the bubble: author, when it was sent and, for this side's messages, delivery and reading. */
+export function ParticipantMessageInfo({ state, message, onClose }: ParticipantMessageInfoProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const closeRef = useRef<HTMLButtonElement | null>(null)
+  const { labels } = state
+  const title = labels.messageInfo ?? DEFAULTS.messageInfo ?? ''
+  const rows = messageInfoRows(message, labels, state.locale)
+  const isUpwards = useOpenUpwards(true, panelRef)
+
+  useEffect(() => {
+    closeRef.current?.focus()
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') onClose()
+    }
+    function handlePointerDown(event: PointerEvent): void {
+      if (event.target instanceof Node && !panelRef.current?.contains(event.target)) onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('pointerdown', handlePointerDown)
+    }
+  }, [onClose])
+
+  return (
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-label={title}
+      className={`cv-p-failed-menu__list cv-p-message-menu__list cv-p-message-info${isUpwards ? ' cv-p-message-menu__list--up' : ''}`}
+    >
+      <div className="cv-p-message-info__head">
+        <span className="cv-p-message-info__title">{title}</span>
+        <button
+          ref={closeRef}
+          type="button"
+          className="cv-p-message-info__close"
+          aria-label={labels.closeMessageInfo ?? DEFAULTS.closeMessageInfo}
+          onClick={onClose}
+        >
+          <X size={14} aria-hidden={true} />
+        </button>
+      </div>
+      <dl className="cv-p-message-info__rows">
+        {rows.map((row) => (
+          <div key={row.id} className="cv-p-message-info__row">
+            <dt>{row.label}</dt>
+            <dd>{row.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  )
+}

package/src/participant/ParticipantMessageMenu.tsx

@@ -0,0 +1,168 @@
+import { ChevronDown } from 'lucide-react'
+import { useCallback, useId, useState } from 'react'
+
+import type { ParticipantMessageActionsTarget } from './ParticipantAuthorAvatar'
+import { downloadTextFile } from '../conversationTranscript'
+import { ParticipantMessageInfo } from './ParticipantMessageInfo'
+import { formatMessageMoment } from './participantMessageMoment'
+import { readyTranscriptions, transcriptionFileName } from './participantTranscriptionText'
+import type { ParticipantMessageMenuState } from './ParticipantMessageMenuContext'
+import {
+  DEFAULT_MESSAGE_OPTIONS_LABEL,
+  DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as DEFAULTS,
+} from './participantLabels'
+import { copyableText, type ParticipantMessageMenuItem } from './participantMessageMenuModel'
+import type { ParticipantFailedMenuController } from './useParticipantFailedMenu'
+import { useOpenUpwards } from './useOpenUpwards'
+import { useParticipantCopyFeedback } from './useParticipantCopyFeedback'
+
+type ParticipantMessageMenuProps = {
+  readonly menu: ParticipantFailedMenuController
+  readonly state: ParticipantMessageMenuState
+  readonly message: ParticipantMessageActionsTarget
+  /** Text the user had selected inside the bubble when the menu opened; empty when none. */
+  readonly selectedText: string
+  readonly onTriggerPointerDown: () => void
+}
+
+type Entry = ParticipantMessageMenuItem & { readonly run?: () => void }
+
+/** A transcribed audio: copy what was said, or save it as a text file named after the audio. */
+function transcriptionEntries(props: ParticipantMessageMenuProps, copy: (value: string) => void): readonly Entry[] {
+  const { state, message } = props
+  const { labels } = state
+  const ready = readyTranscriptions(message.attachments)
+  const [first] = ready
+  if (!first) return []
+  const prefix = labels.transcriptionPrefix ?? DEFAULTS.transcriptionPrefix ?? ''
+  const text = ready.map((entry) => entry.text).join('\n\n')
+  const author = message.isMine ? labels.me : (message.authorName ?? '')
+  const head = `[${formatMessageMoment(message.createdAt, state.locale)}]${author === '' ? '' : ` ${author}`}`
+  return [
+    {
+      id: 'copy-transcription',
+      label: labels.copyTranscription ?? DEFAULTS.copyTranscription ?? '',
+      run: () => copy(text),
+    },
+    {
+      id: 'download-transcription',
+      label: labels.downloadTranscription ?? DEFAULTS.downloadTranscription ?? '',
+      run: () => downloadTextFile(transcriptionFileName(first.filename, prefix), `${head}\n\n${text}\n`),
+    },
+  ]
+}
+
+function entriesFor(
+  props: ParticipantMessageMenuProps,
+  copy: (value: string) => void,
+  showInfo: () => void,
+): readonly Entry[] {
+  const { state, message, selectedText } = props
+  const { labels } = state
+  const text = copyableText(message)
+  const own: Entry[] = []
+  if (selectedText !== '' && selectedText !== text) {
+    own.push({
+      id: 'copy-selection',
+      label: labels.copySelection ?? DEFAULTS.copySelection ?? '',
+      run: () => copy(selectedText),
+    })
+  }
+  if (text !== null)
+    own.push({ id: 'copy', label: labels.copyMessage ?? DEFAULTS.copyMessage ?? '', run: () => copy(text) })
+  own.push({
+    id: 'select',
+    label: labels.selectMessages ?? DEFAULTS.selectMessages ?? '',
+    run: () => state.start(message.id),
+  })
+  own.push(...transcriptionEntries(props, copy))
+  own.push({ id: 'info', label: labels.messageInfo ?? DEFAULTS.messageInfo ?? '', run: showInfo })
+  return [...own, ...(state.options.items?.(message) ?? []).map((item) => ({ ...item, run: item.onSelect }))]
+}
+
+/** The chevron that shows on hover or focus, and the menu it opens: the package's entries (copy, select, info), then the host's. */
+export function ParticipantMessageMenu(props: ParticipantMessageMenuProps) {
+  const { menu, state } = props
+  const triggerId = useId()
+  const { copy } = useParticipantCopyFeedback()
+  const label = state.labels.messageOptions ?? DEFAULT_MESSAGE_OPTIONS_LABEL
+  const [isInfoOpen, setInfoOpen] = useState(false)
+  const closeInfo = useCallback(() => setInfoOpen(false), [])
+  const entries = entriesFor(
+    props,
+    (value) => copy(value, state.labels.valueCopied),
+    () => setInfoOpen(true),
+  )
+  const isUpwards = useOpenUpwards(menu.state.isOpen, menu.menuRef)
+  const listClass = `cv-p-failed-menu__list cv-p-message-menu__list${isUpwards ? ' cv-p-message-menu__list--up' : ''}`
+
+  function choose(entry: Entry): void {
+    menu.close()
+    entry.run?.()
+  }
+
+  return (
+    <span
+      className="cv-p-message-menu"
+      data-open={menu.state.isOpen || isInfoOpen ? 'true' : undefined}
+      ref={menu.containerRef}
+      onBlur={menu.handleBlur}
+    >
+      <button
+        type="button"
+        id={triggerId}
+        ref={menu.triggerRef}
+        className="cv-p-message-menu__trigger"
+        aria-haspopup="menu"
+        aria-expanded={menu.state.isOpen}
+        aria-label={label}
+        onPointerDown={props.onTriggerPointerDown}
+        onClick={menu.handleTriggerClick}
+        onKeyDown={menu.handleTriggerKeyDown}
+      >
+        <ChevronDown size={16} aria-hidden={true} />
+      </button>
+      {menu.state.isOpen ? (
+        <div
+          role="menu"
+          aria-labelledby={triggerId}
+          ref={menu.menuRef}
+          className={listClass}
+          onKeyDown={menu.handleMenuKeyDown}
+        >
+          {entries.map((entry) =>
+            entry.href ? (
+              <a
+                key={entry.id}
+                role="menuitem"
+                tabIndex={-1}
+                className="cv-p-failed-menu__item cv-p-message-menu__item"
+                href={entry.href}
+                download={entry.download}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-disabled={entry.disabled ? 'true' : undefined}
+                onClick={() => choose(entry)}
+              >
+                {entry.label}
+              </a>
+            ) : (
+              <button
+                key={entry.id}
+                type="button"
+                role="menuitem"
+                tabIndex={-1}
+                className="cv-p-failed-menu__item cv-p-message-menu__item"
+                disabled={entry.disabled}
+                onClick={() => choose(entry)}
+              >
+                {entry.label}
+              </button>
+            ),
+          )}
+        </div>
+      ) : null}
+      {isInfoOpen ? <ParticipantMessageInfo state={state} message={props.message} onClose={closeInfo} /> : null}
+    </span>
+  )
+}

package/src/participant/ParticipantMessageMenuContext.tsx

@@ -0,0 +1,109 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
+
+import type { ParticipantMessageActionsTarget } from './ParticipantAuthorAvatar'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { isOwnMessage, type ParticipantTimelineItem } from './participantMessages'
+import { toggleSelectedId, type ParticipantMessageMenuOptions } from './participantMessageMenuModel'
+import type { ParticipantPerspective } from './participantPerspective'
+
+export type ParticipantMessageMenuState = {
+  readonly options: ParticipantMessageMenuOptions
+  readonly labels: ParticipantConversationsLabels
+  readonly locale?: string
+  /** Server messages of the thread, in conversation order: what the selection bar acts on. */
+  readonly messages: readonly ParticipantMessageActionsTarget[]
+  readonly selectedIds: readonly string[]
+  readonly isSelecting: boolean
+  /** Enters selection mode, with this message already checked when one is given. */
+  readonly start: (id?: string) => void
+  readonly toggle: (id: string) => void
+  readonly clear: () => void
+}
+
+const MessageMenuContext = createContext<ParticipantMessageMenuState | null>(null)
+
+/** Null when the host did not opt in: the bubble stays as it was. */
+export function useParticipantMessageMenu(): ParticipantMessageMenuState | null {
+  return useContext(MessageMenuContext)
+}
+
+export function toMessageTargets(
+  items: readonly ParticipantTimelineItem[],
+  perspective?: ParticipantPerspective,
+): readonly ParticipantMessageActionsTarget[] {
+  return items.flatMap((item) =>
+    item.kind === 'server'
+      ? [
+          {
+            id: item.message.id,
+            text: item.message.text ?? null,
+            authorName: item.message.authorName ?? null,
+            isMine: isOwnMessage(item.message, perspective),
+            attachments: item.message.attachments,
+            createdAt: item.message.createdAt,
+            status: item.message.status,
+            readAt: item.message.readAt ?? null,
+          },
+        ]
+      : [],
+  )
+}
+
+type ProviderProps = {
+  readonly options?: ParticipantMessageMenuOptions
+  readonly labels: ParticipantConversationsLabels
+  readonly locale?: string
+  readonly items: readonly ParticipantTimelineItem[]
+  readonly perspective?: ParticipantPerspective
+  readonly children: ReactNode
+}
+
+/** Holds the selection of one thread; Escape leaves selection mode, as in any system selection. */
+export function ParticipantMessageMenuProvider({
+  options,
+  labels,
+  locale,
+  items,
+  perspective,
+  children,
+}: ProviderProps) {
+  const [selection, setSelection] = useState<{ readonly isSelecting: boolean; readonly ids: readonly string[] }>({
+    isSelecting: false,
+    ids: [],
+  })
+  const clear = useCallback(() => setSelection({ isSelecting: false, ids: [] }), [])
+  const start = useCallback((id?: string) => setSelection({ isSelecting: true, ids: id ? [id] : [] }), [])
+  const toggle = useCallback(
+    (id: string) => setSelection((current) => ({ ...current, ids: toggleSelectedId(current.ids, id) })),
+    [],
+  )
+  const messages = useMemo(() => toMessageTargets(items, perspective), [items, perspective])
+
+  useEffect(() => {
+    if (!selection.isSelecting) return undefined
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') clear()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [selection.isSelecting, clear])
+
+  const value = useMemo<ParticipantMessageMenuState | null>(
+    () =>
+      options
+        ? {
+            options,
+            labels,
+            locale,
+            messages,
+            selectedIds: selection.ids,
+            isSelecting: selection.isSelecting,
+            start,
+            toggle,
+            clear,
+          }
+        : null,
+    [options, labels, locale, messages, selection, start, toggle, clear],
+  )
+  return <MessageMenuContext.Provider value={value}>{children}</MessageMenuContext.Provider>
+}

package/src/participant/ParticipantSelectionBar.tsx

@@ -0,0 +1,64 @@
+import { X } from 'lucide-react'
+
+import type { ParticipantMessageMenuState } from './ParticipantMessageMenuContext'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as DEFAULTS, formatParticipantLabel } from './participantLabels'
+import { formatMessagesForCopy, selectedInOrder } from './participantMessageMenuModel'
+import { useParticipantCopyFeedback } from './useParticipantCopyFeedback'
+
+/**
+ * Takes the composer's place while messages are selected: how many, Copy (with date, time and author, one
+ * line each) and the host's actions, all in conversation order. The close button and Escape leave the mode.
+ */
+export function ParticipantSelectionBar({ state }: { readonly state: ParticipantMessageMenuState }) {
+  const { labels } = state
+  const { copy } = useParticipantCopyFeedback()
+  const selected = selectedInOrder(state.messages, state.selectedIds)
+  const count = formatParticipantLabel(labels.selectedCount ?? DEFAULTS.selectedCount ?? '{count}', selected.length)
+  const actions = state.options.selectionActions?.(selected) ?? []
+  const isEmpty = selected.length === 0
+
+  function copySelected(): void {
+    copy(
+      formatMessagesForCopy(selected, {
+        locale: state.locale,
+        meLabel: labels.me,
+        transcriptionLabel: labels.transcriptionPrefix ?? DEFAULTS.transcriptionPrefix,
+      }),
+      labels.valueCopied,
+    )
+    state.clear()
+  }
+
+  return (
+    <div className="cv-p-selection-bar" role="toolbar" aria-label={count}>
+      <button
+        type="button"
+        className="cv-p-selection-bar__close"
+        aria-label={labels.cancelSelection ?? DEFAULTS.cancelSelection}
+        onClick={state.clear}
+      >
+        <X size={18} aria-hidden={true} />
+      </button>
+      <span className="cv-p-selection-bar__count" aria-live="polite">
+        {count}
+      </span>
+      <button type="button" className="cv-p-selection-bar__action" disabled={isEmpty} onClick={copySelected}>
+        {labels.copyMessage ?? DEFAULTS.copyMessage}
+      </button>
+      {actions.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          className="cv-p-selection-bar__action"
+          disabled={isEmpty || action.disabled}
+          onClick={() => {
+            action.onSelect(selected)
+            state.clear()
+          }}
+        >
+          {action.label}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/participant/ParticipantThread.tsx

@@ -7,6 +7,7 @@ import type { QuickReply } from '../quickReplies/quickReply.types'
 import type { ParticipantTimelineItem } from './participantMessages'
 import { TooltipLayer } from '../Tooltip'
 import { ParticipantComposer } from './ParticipantComposer'
+import { ParticipantConversationMenu } from './ParticipantConversationMenu'
 import { useSuppressTouchTooltips } from './useSuppressTouchTooltips'
 import { ParticipantCopyAnnouncer, ParticipantThreadLive } from './ParticipantCopyAnnouncer'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
@@ -19,6 +20,9 @@ import type { ParticipantThreadScroll } from './useStickToBottom'
 import type { ParticipantAuthorAvatarRenderer, ParticipantMessageActionsRenderer } from './ParticipantAuthorAvatar'
 import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
 import { ParticipantTimeline } from './ParticipantTimeline'
+import { ParticipantMessageMenuProvider, useParticipantMessageMenu } from './ParticipantMessageMenuContext'
+import type { ParticipantMessageMenuOptions } from './participantMessageMenuModel'
+import { ParticipantSelectionBar } from './ParticipantSelectionBar'
 import { ParticipantThreadHeader } from './ParticipantThreadHeader'
 import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
 import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
@@ -64,6 +68,8 @@ export type ParticipantThreadProps = {
   readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
   /** Host slot at the end of each message's meta line (copy, forward...). The package knows no action. */
   readonly renderMessageActions?: ParticipantMessageActionsRenderer
+  /** Opt-in message menu (copy, select messages, host entries); absent leaves the bubbles as they were. */
+  readonly messageMenu?: ParticipantMessageMenuOptions
   /** Host icon of the conversation avatar in the header; absent or empty falls back to the subject group icon. */
   readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
   /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
@@ -84,6 +90,8 @@ export type ParticipantThreadProps = {
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
   const { conversation, labels, draft } = props
+  const menu = useParticipantMessageMenu()
+  if (menu?.isSelecting) return <ParticipantSelectionBar state={menu} />
   if (conversation.status === 'closed') {
     return <p className="cv-p-thread__closed">{labels.closedNotice}</p>
   }
@@ -115,6 +123,15 @@ function Footer({ props }: { readonly props: ParticipantThreadProps }) {
 }
 
 function Header({ props }: { readonly props: ParticipantThreadProps }) {
+  const menu = useParticipantMessageMenu()
+  const actions = menu ? (
+    <>
+      {props.headerActions}
+      <ParticipantConversationMenu state={menu} title={props.conversation.subjectLabel} />
+    </>
+  ) : (
+    props.headerActions
+  )
   return (
     <ParticipantThreadHeader
       conversation={props.conversation}
@@ -124,7 +141,7 @@ function Header({ props }: { readonly props: ParticipantThreadProps }) {
       onBack={props.onBack}
       onOpenSubject={props.onOpenSubject}
       counterpartLabel={props.counterpartLabel}
-      actions={props.headerActions}
+      actions={actions}
     />
   )
 }
@@ -166,7 +183,15 @@ function ThreadBody(props: ParticipantThreadProps) {
 export function ParticipantThread(props: ParticipantThreadProps) {
   return (
     <ParticipantCopyAnnouncer>
-      <ThreadBody {...props} />
+      <ParticipantMessageMenuProvider
+        options={props.messageMenu}
+        labels={props.labels}
+        locale={props.locale}
+        items={props.items}
+        perspective={props.perspective}
+      >
+        <ThreadBody {...props} />
+      </ParticipantMessageMenuProvider>
       <TooltipLayer />
     </ParticipantCopyAnnouncer>
   )

package/src/participant/ParticipantThreadScreen.tsx

@@ -104,6 +104,7 @@ function LoadedThread(props: LoadedThreadProps) {
       avatars={props.avatars}
       renderAuthorAvatar={props.renderAuthorAvatar}
       renderMessageActions={props.renderMessageActions}
+      messageMenu={props.messageMenu}
       tail={props.tail}
       audioRecording={props.audioRecording}
       renderComposerLock={props.renderComposerLock}

package/src/participant/index.ts

@@ -35,3 +35,9 @@ export type {
   ParticipantSubjectRef,
   ParticipantTranscription,
 } from '@adatechnology/conversation-contracts'
+export type {
+  ParticipantMessageMenuItem,
+  ParticipantMessageMenuOptions,
+  ParticipantSelectionAction,
+} from './participantMessageMenuModel'
+export { formatMessagesForCopy } from './participantMessageMenuModel'

package/src/participant/participantConversationMenuDom.test.tsx

@@ -0,0 +1,166 @@
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+import { act } from 'react'
+
+import { setupDom, pressKey, type DomHarness } from '../domHarness.test-helper'
+import { ParticipantConversationMenu } from './ParticipantConversationMenu'
+import { ParticipantMessageMenuProvider, useParticipantMessageMenu } from './ParticipantMessageMenuContext'
+import { ParticipantTimeline } from './ParticipantTimeline'
+import { buildMessage } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as LABELS } from './participantLabels'
+import type { ParticipantTimelineItem } from './participantMessages'
+
+let harness: DomHarness
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+afterAll(() => harness.teardown())
+
+const ITEMS: readonly ParticipantTimelineItem[] = [
+  {
+    kind: 'server',
+    message: buildMessage({
+      id: 'm1',
+      text: 'Mine',
+      direction: 'inbound',
+      status: 'read',
+      readAt: '2026-10-01T10:30:00.000Z',
+    }),
+  },
+  {
+    kind: 'server',
+    message: buildMessage({
+      id: 'm2',
+      text: null,
+      direction: 'outbound',
+      authorName: 'Bruno',
+      attachments: [
+        {
+          id: 'a1',
+          kind: 'audio',
+          filename: 'voz.ogg',
+          mimeType: 'audio/ogg',
+          sizeBytes: 10,
+          transcription: { status: 'ready', text: 'Cheguei na doca.', generatedAt: '2026-10-01T10:31:00.000Z' },
+        },
+      ],
+    }),
+  },
+]
+
+function HeaderMenu() {
+  const menu = useParticipantMessageMenu()
+  return menu ? (
+    <>
+      <ParticipantConversationMenu state={menu} title="Order 12" />
+      <span data-testid="selecting">{menu.isSelecting ? `on:${menu.selectedIds.length}` : 'off'}</span>
+    </>
+  ) : null
+}
+
+function mount() {
+  return harness.mount(
+    <ParticipantMessageMenuProvider options={{}} labels={LABELS} items={ITEMS}>
+      <HeaderMenu />
+      <div className="cv-p-thread__scroll">
+        <ParticipantTimeline items={ITEMS} labels={LABELS} resolveAttachmentUrl={() => Promise.resolve('')} />
+      </div>
+    </ParticipantMessageMenuProvider>,
+  )
+}
+
+function fire(element: Element, type: string): void {
+  act(() => element.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true })))
+}
+
+function item(container: HTMLElement, label: string): Element {
+  return Array.from(container.querySelectorAll('[role="menuitem"]')).find((entry) => entry.textContent === label)!
+}
+
+describe('message info and conversation menu in a DOM', () => {
+  it('shows who sent it, when, the delivery state and the read time; Escape closes', () => {
+    const { container, unmount } = mount()
+    fire(container.querySelector('.cv-p-message-menu__trigger')!, 'click')
+    fire(item(container, 'Message info'), 'click')
+    const panel = container.querySelector('[role="dialog"]')!
+    expect(panel.getAttribute('aria-label')).toBe('Message info')
+    expect(Array.from(panel.querySelectorAll('dt')).map((dt) => dt.textContent)).toEqual([
+      'From',
+      'Sent',
+      'Status',
+      'Read',
+    ])
+    expect(panel.querySelectorAll('dd')[2]?.textContent).toBe(LABELS.statusRead)
+    pressKey(document.body, 'Escape')
+    expect(container.querySelector('[role="dialog"]')).toBeNull()
+    unmount()
+  })
+
+  it('enters selection mode with nothing checked from the header', () => {
+    const { container, unmount } = mount()
+    const trigger = container.querySelector('.cv-p-conversation-menu__trigger')!
+    expect(trigger.getAttribute('aria-label')).toBe('Conversation options')
+    fire(trigger, 'click')
+    expect(
+      Array.from(container.querySelectorAll('.cv-p-conversation-menu [role="menuitem"]')).map((e) => e.textContent),
+    ).toEqual(['Select messages', 'Download conversation'])
+    fire(item(container, 'Select messages'), 'click')
+    expect(container.querySelector('[data-testid="selecting"]')?.textContent).toBe('on:0')
+    unmount()
+  })
+
+  it('downloads the conversation as a text file named after the title', async () => {
+    const saved: { name: string; blob: Blob | null } = { name: '', blob: null }
+    const originalCreate = URL.createObjectURL
+    const originalRevoke = URL.revokeObjectURL
+    const originalClick = HTMLAnchorElement.prototype.click
+    URL.createObjectURL = (blob: Blob) => {
+      saved.blob = blob
+      return 'blob:test'
+    }
+    URL.revokeObjectURL = () => undefined
+    HTMLAnchorElement.prototype.click = function click(this: HTMLAnchorElement) {
+      saved.name = this.download
+    }
+    try {
+      const { container, unmount } = mount()
+      fire(container.querySelector('.cv-p-conversation-menu__trigger')!, 'click')
+      fire(item(container, 'Download conversation'), 'click')
+      expect(saved.name).toBe('Order 12.txt')
+      const text = await saved.blob!.text()
+      expect(text.startsWith('Order 12\n\n[')).toBe(true)
+      expect(text).toContain(`${LABELS.me}: Mine`)
+      expect(text).toContain('Bruno: [voz.ogg] Transcription: Cheguei na doca.')
+      unmount()
+    } finally {
+      URL.createObjectURL = originalCreate
+      URL.revokeObjectURL = originalRevoke
+      HTMLAnchorElement.prototype.click = originalClick
+    }
+  })
+
+  it('offers to copy and to download what was said in a transcribed audio', () => {
+    let savedName = ''
+    const originalCreate = URL.createObjectURL
+    const originalRevoke = URL.revokeObjectURL
+    const originalClick = HTMLAnchorElement.prototype.click
+    URL.createObjectURL = () => 'blob:test'
+    URL.revokeObjectURL = () => undefined
+    HTMLAnchorElement.prototype.click = function click(this: HTMLAnchorElement) {
+      savedName = this.download
+    }
+    try {
+      const { container, unmount } = mount()
+      fire(container.querySelectorAll('.cv-p-message-menu__trigger')[1]!, 'click')
+      const labels = Array.from(container.querySelectorAll('[role="menuitem"]')).map((entry) => entry.textContent)
+      expect(labels).toEqual(['Select messages', 'Copy transcription', 'Download transcription', 'Message info'])
+      fire(item(container, 'Download transcription'), 'click')
+      expect(savedName).toBe('voz Transcription.txt')
+      unmount()
+    } finally {
+      URL.createObjectURL = originalCreate
+      URL.revokeObjectURL = originalRevoke
+      HTMLAnchorElement.prototype.click = originalClick
+    }
+  })
+})