@adatechnology/conversations-ui 0.12.0 → 0.14.0

package/dist/styles.css

@@ -1978,6 +1978,11 @@
 .cv-p-bubble > .cv-p-attachment {
   flex: 1 0 100%;
 }
+.cv-p-bubble__host-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 .cv-p-bubble__original {
   flex: 1 0 100%;
   margin-top: 0.2rem;
@@ -2140,6 +2145,216 @@
 .cv-p-failed-menu__item:focus-visible {
   background: var(--cv-p-i-highlight);
 }
+.cv-p-message-menu {
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  display: inline-flex;
+}
+.cv-p-message-menu__trigger {
+  display: inline-grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-text-muted);
+  background: var(--cv-p-tail-fill, var(--cv-p-i-surface-raised));
+  box-shadow: -0.5rem 0 0.5rem var(--cv-p-tail-fill, var(--cv-p-i-surface-raised));
+  cursor: pointer;
+  opacity: 0;
+}
+.cv-p-bubble:hover .cv-p-message-menu__trigger,
+.cv-p-message-menu__trigger:focus-visible,
+.cv-p-message-menu[data-open] .cv-p-message-menu__trigger {
+  opacity: 1;
+}
+.cv-p-message-menu__trigger:hover {
+  color: var(--cv-p-i-text);
+}
+@media (hover: none) {
+  .cv-p-message-menu__trigger:not(:focus-visible) {
+    pointer-events: none;
+  }
+}
+.cv-p-message-menu__list {
+  min-width: 11rem;
+}
+.cv-p-message-menu__list {
+  bottom: auto;
+  top: calc(100% + 0.25rem);
+}
+.cv-p-message-menu__list.cv-p-message-menu__list--up {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+}
+.cv-p-message-menu__item {
+  display: flex;
+  align-items: center;
+  font: inherit;
+  font-size: 0.85rem;
+  text-transform: none;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.cv-p-message-menu__item:disabled,
+.cv-p-message-menu__item[aria-disabled=true] {
+  color: var(--cv-p-i-text-muted);
+  cursor: default;
+}
+.cv-p-bubble--menu-open {
+  z-index: 3;
+}
+.cv-p-bubble:has(.cv-p-message-menu[data-open]) {
+  z-index: 3;
+}
+.cv-p-conversation-menu {
+  position: relative;
+  display: inline-flex;
+}
+.cv-p-conversation-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--cv-p-i-touch);
+  min-height: var(--cv-p-i-touch);
+  padding: 0;
+  border: 0;
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+.cv-p-conversation-menu__trigger:hover,
+.cv-p-conversation-menu__trigger:focus-visible,
+.cv-p-conversation-menu__trigger[aria-expanded=true] {
+  color: var(--cv-p-i-text);
+  background: var(--cv-p-i-highlight);
+}
+.cv-p-conversation-menu__list {
+  z-index: 4;
+}
+.cv-p-message-info {
+  min-width: 14rem;
+  padding: 0.5rem 0.75rem 0.65rem;
+  color: var(--cv-p-i-text);
+  font-size: 0.85rem;
+  cursor: default;
+}
+.cv-p-message-info__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.35rem;
+}
+.cv-p-message-info__title {
+  font-weight: 600;
+}
+.cv-p-message-info__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem;
+  border: 0;
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+.cv-p-message-info__close:hover,
+.cv-p-message-info__close:focus-visible {
+  color: var(--cv-p-i-text);
+  background: var(--cv-p-i-highlight);
+}
+.cv-p-message-info__rows {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0;
+}
+.cv-p-message-info__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.cv-p-message-info__row dt {
+  color: var(--cv-p-i-text-muted);
+}
+.cv-p-message-info__row dd {
+  margin: 0;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+.cv-p-select-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  cursor: pointer;
+  border-radius: var(--cv-p-i-radius);
+}
+.cv-p-select-row[data-selected] {
+  background: var(--cv-p-i-highlight);
+}
+.cv-p-select-row > .cv-p-bubble--mine {
+  margin-inline-start: auto;
+}
+.cv-p-select-row > .cv-p-bubble-row {
+  max-width: 92%;
+}
+.cv-p-select-row__check {
+  flex: 0 0 auto;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: 0 0 0 0.25rem;
+  accent-color: var(--cv-p-i-accent);
+  cursor: pointer;
+}
+.cv-p-selection-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.75rem;
+  border-top: 1px solid var(--cv-p-i-border);
+  background: var(--cv-p-i-surface-raised);
+}
+.cv-p-selection-bar__count {
+  margin-inline-end: auto;
+  font-weight: 600;
+  color: var(--cv-p-i-text);
+}
+.cv-p-selection-bar__close,
+.cv-p-selection-bar__action {
+  min-height: var(--cv-p-i-touch);
+  padding: 0 0.75rem;
+  border: 1px solid var(--cv-p-i-border);
+  border-radius: var(--cv-p-i-radius);
+  color: var(--cv-p-i-text);
+  background: transparent;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.cv-p-selection-bar__close {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--cv-p-i-touch);
+  padding: 0;
+  border-color: transparent;
+}
+.cv-p-selection-bar__action:disabled {
+  color: var(--cv-p-i-text-muted);
+  cursor: default;
+}
+.cv-p-selection-bar__close:hover,
+.cv-p-selection-bar__action:hover:not(:disabled),
+.cv-p-selection-bar__close:focus-visible,
+.cv-p-selection-bar__action:focus-visible {
+  background: var(--cv-p-i-highlight);
+}
 .cv-p-attachment {
   display: flex;
   flex-direction: column;
@@ -2524,6 +2739,9 @@
   .cv-p-composer__attach {
     transition: background-color 0.12s, border-color 0.12s;
   }
+  .cv-p-message-menu__trigger {
+    transition: opacity 0.12s;
+  }
 }
 .cv-p-thread__scroll,
 .cv-p-inbox,

package/package.json

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

package/src/conversationTranscript.ts

@@ -75,7 +75,8 @@ export function buildTranscriptFilename(whatsappNumber: string, generatedAt: Dat
 
 /**
  * Dispara o download no navegador. `revokeObjectURL` no fim não é higiene opcional: sem ele cada
- * export retém o blob inteiro em memória até a aba fechar.
+ * export retém o blob inteiro em memória até a aba fechar. O link entra no documento enquanto é clicado,
+ * como o Firefox exige, e a revogação vai para o tique seguinte, depois de o download começar.
  */
 export function downloadTextFile(filename: string, content: string): void {
   const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
@@ -84,6 +85,9 @@ export function downloadTextFile(filename: string, content: string): void {
 
   anchor.href = url
   anchor.download = filename
+  anchor.rel = 'noopener'
+  document.body.appendChild(anchor)
   anchor.click()
-  URL.revokeObjectURL(url)
+  anchor.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
 }

package/src/participant/ConversationThread.tsx

@@ -5,7 +5,7 @@ import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@ada
 import type { ConversationChannel } from '../conversationChannel'
 import type { QuickReply } from '../quickReplies/quickReply.types'
 import type { ConversationsTheme } from '../types'
-import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import type { ParticipantAuthorAvatarRenderer, ParticipantMessageActionsRenderer } from './ParticipantAuthorAvatar'
 import { ParticipantThread } from './ParticipantThread'
 import { toParticipantApi, type ConversationThreadApi } from './conversationThreadApi'
 import { buildThreadSummary } from './conversationThreadSummary'
@@ -18,6 +18,7 @@ import type { ParticipantPerspective } from './participantPerspective'
 import { participantSendStatesReducer } from './participantSendStates'
 import { buildParticipantThemeStyle } from './participantTheme'
 import { useParticipantThreadController, type ParticipantThreadCoreProps } from './useParticipantThreadController'
+import type { ParticipantMessageMenuOptions } from './participantMessageMenuModel'
 
 export type ConversationThreadProps = {
   readonly api: ConversationThreadApi
@@ -51,6 +52,10 @@ export type ConversationThreadProps = {
   readonly tail?: boolean
   readonly avatars?: 'initials'
   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 as in common chat apps: copy, select messages, plus the host's entries. */
+  readonly messageMenu?: ParticipantMessageMenuOptions
   /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
   readonly audioRecording?: ParticipantAudioRecordingOptions
   /** Return a node to replace the composer (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
@@ -107,6 +112,8 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           renderSubjectIcon={props.renderSubjectIcon}
           avatars={props.avatars}
           renderAuthorAvatar={props.renderAuthorAvatar}
+          renderMessageActions={props.renderMessageActions}
+          messageMenu={props.messageMenu}
           tail={props.tail}
           counterpartLabel={props.counterpartLabel}
           headerActions={props.headerActions}

package/src/participant/ParticipantAuthorAvatar.tsx

@@ -1,10 +1,28 @@
 import { User } from 'lucide-react'
+import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
 import type { ReactNode } from 'react'
 
 import { authorInitials } from './participantAvatar'
 
 export type ParticipantAuthorAvatarRenderer = (author: { name: string | null }) => ReactNode
 
+/** What the host receives to draw per-message actions (copy, forward...); only messages the server already holds. */
+export type ParticipantMessageActionsTarget = {
+  readonly id: string
+  readonly text: string | null
+  readonly authorName: string | null
+  readonly isMine: boolean
+  readonly attachments: readonly ParticipantAttachment[]
+  /** When the message was written (ISO 8601). */
+  readonly createdAt: string
+  /** Delivery state of a message this side sent, when the channel reports one. */
+  readonly status?: MessageDeliveryStatus | undefined
+  /** When the other side read it (ISO 8601), when known. */
+  readonly readAt?: string | null
+}
+
+export type ParticipantMessageActionsRenderer = (message: ParticipantMessageActionsTarget) => ReactNode
+
 export type ParticipantAuthorAvatarProps = {
   readonly name: string | null
   /** Host slot (a photo, for instance); its result wins over the initials. */

package/src/participant/ParticipantBubbleBody.tsx

@@ -2,6 +2,7 @@ import { formatTimestamp } from '../lib/format'
 import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import { OwnStatus } from './ParticipantBubbleStatus'
 import { ParticipantFailedMenu } from './ParticipantFailedMenu'
+import type { ParticipantMessageActionsRenderer } from './ParticipantAuthorAvatar'
 import type { BubbleContent } from './ParticipantMessageBubble'
 import { ParticipantMessageText } from './ParticipantMessageText'
 import { DEFAULT_SHOW_ORIGINAL_TEXT_LABEL, type ParticipantConversationsLabels } from './participantLabels'
@@ -16,6 +17,7 @@ type BubbleBodyProps = {
   readonly onRetry?: () => void
   readonly onDiscard?: () => void
   readonly onEdit?: () => void
+  readonly renderMessageActions?: ParticipantMessageActionsRenderer
 }
 
 function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'labels'>) {
@@ -24,19 +26,44 @@ function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'l
   return <span className="cv-p-bubble__author">{content.authorName}</span>
 }
 
+function hostActions(content: BubbleContent, render?: ParticipantMessageActionsRenderer) {
+  if (!render || content.messageId === undefined) return null
+  return render({
+    id: content.messageId,
+    text: content.text ?? null,
+    authorName: content.authorName ?? null,
+    isMine: content.isMine,
+    attachments: content.attachments,
+    createdAt: content.createdAt,
+  })
+}
+
 /** Collapsed by default: the trimmed text is what the reader needs, the original is there on demand. */
 function OriginalText({ content, labels }: Pick<BubbleBodyProps, 'content' | 'labels'>) {
   const original = content.originalText?.trim()
   if (!original || original === content.text?.trim()) return null
   return (
     <details className="cv-p-bubble__original">
-      <summary className="cv-p-bubble__original-toggle">{labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL}</summary>
+      <summary className="cv-p-bubble__original-toggle">
+        {labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL}
+      </summary>
       <div className="cv-p-bubble__original-text">{original}</div>
     </details>
   )
 }
 
-export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }: BubbleBodyProps) {
+export function BubbleBody({
+  content,
+  labels,
+  ownStatus,
+  textId,
+  resolveAttachmentUrl,
+  onRetry,
+  onDiscard,
+  onEdit,
+  renderMessageActions,
+}: BubbleBodyProps) {
+  const actions = hostActions(content, renderMessageActions)
   return (
     <>
       <BubbleHeading content={content} labels={labels} />
@@ -59,7 +86,10 @@ export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachme
           {formatTimestamp(content.createdAt)}
         </time>
         {ownStatus ? <OwnStatus status={ownStatus} labels={labels} onRetry={onRetry} /> : null}
-        {ownStatus === 'failed' ? <ParticipantFailedMenu labels={labels} onEdit={onEdit} onDiscard={onDiscard} /> : null}
+        {ownStatus === 'failed' ? (
+          <ParticipantFailedMenu labels={labels} onEdit={onEdit} onDiscard={onDiscard} />
+        ) : null}
+        {actions ? <span className="cv-p-bubble__host-actions">{actions}</span> : null}
       </span>
       {/* Last child so the ids React derives for the siblings above stay as they were; CSS keeps the meta after it. */}
       <OriginalText content={content} labels={labels} />

package/src/participant/ParticipantConversationMenu.tsx

@@ -0,0 +1,89 @@
+import { EllipsisVertical } from 'lucide-react'
+import { useId } from 'react'
+
+import type { ParticipantMessageMenuState } from './ParticipantMessageMenuContext'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as DEFAULTS } from './participantLabels'
+import { downloadTextFile } from '../conversationTranscript'
+import { conversationExportFileName, conversationExportText } from './participantMessageInfoModel'
+import { useParticipantFailedMenu } from './useParticipantFailedMenu'
+
+type ParticipantConversationMenuProps = {
+  readonly state: ParticipantMessageMenuState
+  /** Title of the conversation: first line of the file and its name. */
+  readonly title: string
+}
+
+/**
+ * The header's menu of a thread with `messageMenu`, as in common chat apps: enter selection mode with nothing
+ * checked yet, or download the loaded messages as text (`[date time] author: text`, one per line), through the
+ * same download the WhatsApp workspace uses.
+ */
+export function ParticipantConversationMenu({ state, title }: ParticipantConversationMenuProps) {
+  const menu = useParticipantFailedMenu()
+  const triggerId = useId()
+  const { labels } = state
+  const listClass = `cv-p-failed-menu__list cv-p-message-menu__list cv-p-conversation-menu__list${menu.placement === 'below' ? ' cv-p-failed-menu__list--below' : ''}`
+  const entries = [
+    { id: 'select', label: labels.selectMessages ?? DEFAULTS.selectMessages, run: () => state.start() },
+    {
+      id: 'download',
+      label: labels.downloadConversation ?? DEFAULTS.downloadConversation,
+      disabled: state.messages.length === 0,
+      run: () =>
+        downloadTextFile(
+          conversationExportFileName(title),
+          conversationExportText({
+            title,
+            messages: state.messages,
+            locale: state.locale,
+            meLabel: labels.me,
+            transcriptionLabel: labels.transcriptionPrefix ?? DEFAULTS.transcriptionPrefix,
+          }),
+        ),
+    },
+  ]
+
+  return (
+    <span className="cv-p-conversation-menu" ref={menu.containerRef} onBlur={menu.handleBlur}>
+      <button
+        type="button"
+        id={triggerId}
+        ref={menu.triggerRef}
+        className="cv-p-conversation-menu__trigger"
+        aria-haspopup="menu"
+        aria-expanded={menu.state.isOpen}
+        aria-label={labels.conversationOptions ?? DEFAULTS.conversationOptions}
+        onClick={menu.handleTriggerClick}
+        onKeyDown={menu.handleTriggerKeyDown}
+      >
+        <EllipsisVertical size={18} aria-hidden={true} />
+      </button>
+      {menu.state.isOpen ? (
+        <div
+          role="menu"
+          aria-labelledby={triggerId}
+          ref={menu.menuRef}
+          className={listClass}
+          onKeyDown={menu.handleMenuKeyDown}
+        >
+          {entries.map((entry) => (
+            <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={() => {
+                menu.close()
+                entry.run()
+              }}
+            >
+              {entry.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </span>
+  )
+}

package/src/participant/ParticipantConversations.tsx

@@ -5,7 +5,7 @@ import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@ada
 import type { ConversationChannel } from '../conversationChannel'
 import type { QuickReply } from '../quickReplies/quickReply.types'
 import type { ConversationsTheme } from '../types'
-import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import type { ParticipantAuthorAvatarRenderer, ParticipantMessageActionsRenderer } from './ParticipantAuthorAvatar'
 import { ParticipantConversationsScreen } from './ParticipantConversationsScreen'
 import type {
   ParticipantConversationsClassNames,
@@ -16,6 +16,7 @@ import type { ParticipantConversationsApi, ParticipantPendingMessage } from './p
 import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { useParticipantInbox } from './useParticipantInbox'
+import type { ParticipantMessageMenuOptions } from './participantMessageMenuModel'
 
 export type ParticipantConversationsProps = {
   api: ParticipantConversationsApi
@@ -40,6 +41,10 @@ export type ParticipantConversationsProps = {
   avatars?: 'initials'
   /** Host slot for the author's photo; wins over 'initials' and enables avatars on its own. */
   renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  /** Host slot at the end of each message's meta line (copy, forward...). The package knows no action. */
+  renderMessageActions?: ParticipantMessageActionsRenderer
+  /** Opt-in message menu as in common chat apps: copy, select messages, plus the host's entries. */
+  messageMenu?: ParticipantMessageMenuOptions
   /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
   tail?: boolean
   /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */

package/src/participant/ParticipantMenuBubble.tsx

@@ -0,0 +1,106 @@
+import { useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
+
+import { ParticipantMessageMenu } from './ParticipantMessageMenu'
+import type { ParticipantMessageMenuState } from './ParticipantMessageMenuContext'
+import {
+  renderParticipantBubble,
+  type BubbleContent,
+  type ParticipantMessageBubbleProps,
+} from './ParticipantMessageBubble'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as DEFAULTS } from './participantLabels'
+import { selectedTextWithin } from './participantMessageMenuModel'
+import { useParticipantFailedMenu } from './useParticipantFailedMenu'
+
+const LONG_PRESS_MS = 500
+
+type ParticipantMenuBubbleProps = {
+  readonly props: ParticipantMessageBubbleProps
+  readonly content: BubbleContent
+  readonly textId: string
+  readonly state: ParticipantMessageMenuState
+}
+
+/** A server bubble with the message menu: chevron on hover, right-click or long press, and selection mode. */
+export function ParticipantMenuBubble({ props, content, textId, state }: ParticipantMenuBubbleProps) {
+  const menu = useParticipantFailedMenu()
+  const bubbleRef = useRef<HTMLDivElement | null>(null)
+  const pressTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const [selectedText, setSelectedText] = useState('')
+  const id = content.messageId ?? ''
+  const message = state.messages.find((candidate) => candidate.id === id)
+
+  function captureSelection(): void {
+    if (!menu.state.isOpen) setSelectedText(selectedTextWithin(bubbleRef.current))
+  }
+
+  function openFromGesture(): void {
+    captureSelection()
+    if (!menu.state.isOpen) menu.open()
+  }
+
+  function cancelPress(): void {
+    clearTimeout(pressTimer.current)
+  }
+
+  if (state.isSelecting)
+    return (
+      <SelectRow state={state} id={id}>
+        {renderParticipantBubble({ props, content, textId })}
+      </SelectRow>
+    )
+  if (!message) return renderParticipantBubble({ props, content, textId })
+
+  return renderParticipantBubble({
+    props,
+    content,
+    textId,
+    frame: {
+      ref: bubbleRef,
+      className: menu.state.isOpen ? 'cv-p-bubble--menu-open' : undefined,
+      handlers: {
+        onContextMenu: (event) => {
+          event.preventDefault()
+          openFromGesture()
+        },
+        onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => {
+          if (event.pointerType !== 'touch') return
+          cancelPress()
+          pressTimer.current = setTimeout(openFromGesture, LONG_PRESS_MS)
+        },
+        onPointerUp: cancelPress,
+        onPointerCancel: cancelPress,
+        onPointerMove: cancelPress,
+      },
+      corner: (
+        <ParticipantMessageMenu
+          menu={menu}
+          state={state}
+          message={message}
+          selectedText={selectedText}
+          onTriggerPointerDown={captureSelection}
+        />
+      ),
+    },
+  })
+}
+
+type SelectRowProps = { readonly state: ParticipantMessageMenuState; readonly id: string; readonly children: ReactNode }
+
+/** Selection mode: a check box beside the bubble; a click anywhere on the row checks or unchecks it. */
+function SelectRow({ state, id, children }: SelectRowProps) {
+  const isSelected = state.selectedIds.includes(id)
+  const label = state.labels.selectMessage ?? DEFAULTS.selectMessage ?? ''
+  return (
+    <div className="cv-p-select-row" data-selected={isSelected ? 'true' : undefined} onClick={() => state.toggle(id)}>
+      <input
+        type="checkbox"
+        className="cv-p-select-row__check"
+        checked={isSelected}
+        aria-label={label}
+        onChange={() => state.toggle(id)}
+        onClick={(event) => event.stopPropagation()}
+      />
+      {children}
+    </div>
+  )
+}

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -247,3 +247,54 @@ describe('ParticipantMessageBubble avatar slot', () => {
     expect(own).not.toContain('cv-p-bubble-row')
   })
 })
+
+describe('renderMessageActions', () => {
+  const message = buildMessage({ id: 'm-actions' })
+
+  it('draws the host actions at the end of a server message and hands over the message', () => {
+    const received: string[] = []
+    const markup = renderToStaticMarkup(
+      <ParticipantMessageBubble
+        item={{ kind: 'server', message }}
+        labels={LABELS}
+        confirmsRead
+        resolveAttachmentUrl={resolveAttachmentUrl}
+        renderMessageActions={(target) => {
+          received.push(target.id)
+          return <button type="button">copy</button>
+        }}
+      />,
+    )
+    expect(received).toEqual(['m-actions'])
+    expect(markup).toContain('cv-p-bubble__host-actions')
+    expect(markup).toContain('>copy<')
+  })
+
+  it('draws nothing for a message the server does not hold yet', () => {
+    const markup = renderToStaticMarkup(
+      <ParticipantMessageBubble
+        item={{
+          kind: 'pending',
+          origin: 'host',
+          displayState: 'sending',
+          pending: {
+            clientMessageId: 'c1',
+            subject: { subjectType: 'invoice', subjectId: '1' },
+            text: 'oi',
+            createdAt: '2026-01-01T10:00:00.000Z',
+            state: 'queued',
+          },
+        }}
+        labels={LABELS}
+        confirmsRead
+        resolveAttachmentUrl={resolveAttachmentUrl}
+        renderMessageActions={() => <button type="button">copy</button>}
+      />,
+    )
+    expect(markup).not.toContain('cv-p-bubble__host-actions')
+  })
+
+  it('stays as before when the host gives no slot', () => {
+    expect(renderServer(message)).not.toContain('cv-p-bubble__host-actions')
+  })
+})