@adatechnology/conversations-ui 0.12.0 → 0.14.0

package/src/participant/ParticipantMessageBubble.tsx

@@ -1,8 +1,11 @@
-import { useId, type ReactNode } from 'react'
+import { useId, type HTMLAttributes, type ReactNode, type Ref } from 'react'
 
 import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
 
 import { BubbleBody } from './ParticipantBubbleBody'
+import { ParticipantMenuBubble } from './ParticipantMenuBubble'
+import { useParticipantMessageMenu } from './ParticipantMessageMenuContext'
+import type { ParticipantMessageActionsRenderer } from './ParticipantAuthorAvatar'
 import { RetryButton } from './ParticipantBubbleStatus'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import type { ParticipantConversationsLabels } from './participantLabels'
@@ -31,6 +34,8 @@ export type ParticipantMessageBubbleProps = {
   readonly tail?: boolean
   /** Who is looking; absent is the participant. The operator owns the outbound messages. */
   readonly perspective?: ParticipantPerspective
+  /** Host actions at the end of the meta line of a server message; pending ones have nothing to act on yet. */
+  readonly renderMessageActions?: ParticipantMessageActionsRenderer
 }
 
 export type BubbleContent = {
@@ -43,6 +48,7 @@ export type BubbleContent = {
   readonly pendingFilenames: readonly string[]
   readonly displayState?: ParticipantPendingDisplayState
   readonly serverStatus?: MessageDeliveryStatus
+  readonly messageId?: string
 }
 
 function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPerspective): BubbleContent {
@@ -57,6 +63,7 @@ function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPe
       attachments: message.attachments,
       pendingFilenames: [],
       serverStatus: message.status,
+      messageId: message.id,
     }
   }
   return {
@@ -77,20 +84,35 @@ function bubbleClassName(isMine: boolean, hasTail: boolean, hasFailed: boolean):
   return classes.join(' ')
 }
 
-export function ParticipantMessageBubble(props: ParticipantMessageBubbleProps) {
-  const { item, labels, confirmsRead, onRetry, avatar, tail = true, perspective } = props
-  const textId = useId()
-  const content = describeItem(item, perspective)
+/** What the message menu adds to a bubble: its ref and handlers, a corner slot and a state class. */
+export type ParticipantBubbleFrame = {
+  readonly ref?: Ref<HTMLDivElement>
+  readonly handlers?: HTMLAttributes<HTMLDivElement>
+  readonly corner?: ReactNode
+  readonly className?: string
+}
+
+type RenderBubbleParams = {
+  readonly props: ParticipantMessageBubbleProps
+  readonly content: BubbleContent
+  readonly textId: string
+  readonly frame?: ParticipantBubbleFrame
+}
+
+export function renderParticipantBubble({ props, content, textId, frame }: RenderBubbleParams): ReactNode {
+  const { confirmsRead, onRetry, avatar, tail = true } = props
   const ownStatus = content.isMine
     ? resolveOwnMessageStatus({ displayState: content.displayState, serverStatus: content.serverStatus, confirmsRead })
     : undefined
   const isFailed = ownStatus === 'failed'
   const canRetry = isFailed && onRetry !== undefined
+  const className = [bubbleClassName(content.isMine, tail, isFailed), frame?.className].filter(Boolean).join(' ')
 
   const bubble = (
-    <div className={bubbleClassName(content.isMine, tail, isFailed)}>
-      {canRetry ? <RetryButton labels={labels} onRetry={onRetry} describedBy={textId} /> : null}
+    <div className={className} ref={frame?.ref} {...frame?.handlers}>
+      {canRetry ? <RetryButton labels={props.labels} onRetry={onRetry} describedBy={textId} /> : null}
       <BubbleBody {...props} content={content} ownStatus={ownStatus} textId={canRetry ? textId : undefined} />
+      {frame?.corner}
     </div>
   )
   if (avatar === undefined || content.isMine) return bubble
@@ -101,3 +123,13 @@ export function ParticipantMessageBubble(props: ParticipantMessageBubbleProps) {
     </div>
   )
 }
+
+export function ParticipantMessageBubble(props: ParticipantMessageBubbleProps) {
+  const textId = useId()
+  const menu = useParticipantMessageMenu()
+  const content = describeItem(props.item, props.perspective)
+  if (menu && content.messageId !== undefined) {
+    return <ParticipantMenuBubble props={props} content={content} textId={textId} state={menu} />
+  }
+  return renderParticipantBubble({ props, content, textId })
+}

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'
@@ -16,9 +17,12 @@ import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadVi
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
 import type { ParticipantPerspective } from './participantPerspective'
 import type { ParticipantThreadScroll } from './useStickToBottom'
-import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+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'
@@ -62,6 +66,10 @@ export type ParticipantThreadProps = {
   readonly avatars?: 'initials'
   /** Host slot for the author's photo; wins over 'initials' and enables avatars on its own. */
   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. */
@@ -82,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>
   }
@@ -113,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}
@@ -122,7 +141,7 @@ function Header({ props }: { readonly props: ParticipantThreadProps }) {
       onBack={props.onBack}
       onOpenSubject={props.onOpenSubject}
       counterpartLabel={props.counterpartLabel}
-      actions={props.headerActions}
+      actions={actions}
     />
   )
 }
@@ -164,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

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

package/src/participant/ParticipantTimeline.tsx

@@ -4,7 +4,11 @@ import { channelCapabilityFor } from '../channelCapability'
 import type { ConversationChannel } from '../conversationChannel'
 import { isSameDay } from '../lib/format'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
-import { ParticipantAuthorAvatar, type ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import {
+  ParticipantAuthorAvatar,
+  type ParticipantAuthorAvatarRenderer,
+  type ParticipantMessageActionsRenderer,
+} from './ParticipantAuthorAvatar'
 import { ParticipantDayDivider } from './ParticipantDayDivider'
 import { ParticipantMessageBubble } from './ParticipantMessageBubble'
 import { shouldShowAvatar, type ParticipantAvatarAuthor } from './participantAvatar'
@@ -26,6 +30,7 @@ export type ParticipantTimelineProps = {
   readonly pendingActions?: ParticipantPendingActions
   readonly avatars?: 'initials'
   readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  readonly renderMessageActions?: ParticipantMessageActionsRenderer
   readonly tail?: boolean
   readonly perspective?: ParticipantPerspective
 }
@@ -98,6 +103,7 @@ export function ParticipantTimeline(props: ParticipantTimelineProps) {
         tail={props.tail}
         perspective={props.perspective}
         avatar={avatar}
+        renderMessageActions={props.renderMessageActions}
         {...resolveActions(item, pendingActions)}
       />,
     )

package/src/participant/index.ts

@@ -2,7 +2,11 @@ export { ParticipantConversations, type ParticipantConversationsProps } from './
 export { ConversationThread, type ConversationThreadProps } from './ConversationThread'
 export type { ConversationThreadApi } from './conversationThreadApi'
 export type { ParticipantPerspective } from './participantPerspective'
-export type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+export type {
+  ParticipantAuthorAvatarRenderer,
+  ParticipantMessageActionsRenderer,
+  ParticipantMessageActionsTarget,
+} from './ParticipantAuthorAvatar'
 export { groupParticipantConversations } from './participantGrouping'
 export { DEFAULT_MAX_RECORDING_BYTES, type ParticipantAudioRecordingOptions } from './participantAudio.types'
 export { DEFAULT_PARTICIPANT_AUDIO_LABELS, type ParticipantAudioLabels } from './participantAudioLabels'
@@ -31,3 +35,9 @@ export type {
   ParticipantSubjectRef,
   ParticipantTranscription,
 } from '@adatechnology/conversation-contracts'
+export type {
+  ParticipantMessageMenuItem,
+  ParticipantMessageMenuOptions,
+  ParticipantSelectionAction,
+} from './participantMessageMenuModel'
+export { formatMessagesForCopy } from './participantMessageMenuModel'