@adatechnology/conversations-ui 0.11.0 → 0.13.0

package/dist/participant/index.d.ts

@@ -1,12 +1,21 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { ParticipantConversationSummary, ParticipantConversationPage, ParticipantSubjectRef, ParticipantMessage, ParticipantAttachment } from '@adatechnology/conversation-contracts';
+import { ParticipantAttachment, ParticipantConversationSummary, ParticipantConversationPage, ParticipantSubjectRef, ParticipantMessage } from '@adatechnology/conversation-contracts';
 export { ParticipantAttachment, ParticipantConversationPage, ParticipantConversationSummary, ParticipantMessage, ParticipantSubjectRef, ParticipantTranscription } from '@adatechnology/conversation-contracts';
 import { C as ConversationChannel, d as ConversationsTheme, Q as QuickReply } from '../quickReply.types-DzWH3NYV.js';
 
 type ParticipantAuthorAvatarRenderer = (author: {
     name: string | null;
 }) => ReactNode;
+/** What the host receives to draw per-message actions (copy, forward...); only messages the server already holds. */
+type ParticipantMessageActionsTarget = {
+    readonly id: string;
+    readonly text: string | null;
+    readonly authorName: string | null;
+    readonly isMine: boolean;
+    readonly attachments: readonly ParticipantAttachment[];
+};
+type ParticipantMessageActionsRenderer = (message: ParticipantMessageActionsTarget) => ReactNode;
 
 type ParticipantSubjectGroup = {
     readonly subjectType: string;
@@ -190,6 +199,8 @@ type ParticipantConversationsLabels = {
     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;
+    /** Toggle that opens the message as received (e.g. the whole email). Optional; the English default shows otherwise. */
+    readonly showOriginalText?: string;
     readonly notFound: string;
     readonly loading: string;
     readonly loadError: string;
@@ -240,6 +251,8 @@ 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;
     /** 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. */
@@ -287,6 +300,8 @@ 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;
     /** 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. */
@@ -297,4 +312,4 @@ declare function ConversationThread(props: ConversationThreadProps): react.JSX.E
 
 declare function groupParticipantConversations(params: GroupParticipantConversationsParams): ParticipantInboxView;
 
-export { ConversationThread, type ConversationThreadApi, type ConversationThreadProps, DEFAULT_MAX_RECORDING_BYTES, DEFAULT_PARTICIPANT_AUDIO_LABELS, DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type GroupParticipantConversationsParams, type ParticipantAudioLabels, type ParticipantAudioRecordingOptions, type ParticipantAuthorAvatarRenderer, type ParticipantConversationEvent, ParticipantConversations, type ParticipantConversationsApi, type ParticipantConversationsClassNames, type ParticipantConversationsLabels, type ParticipantConversationsProps, type ParticipantInboxSection, type ParticipantInboxView, type ParticipantLocalPendingMessage, type ParticipantPendingMessage, type ParticipantPerspective, type ParticipantSendInput, type ParticipantSendResult, type ParticipantSubjectGroup, type ParticipantSubjectIconRenderer, groupParticipantConversations };
+export { ConversationThread, type ConversationThreadApi, type ConversationThreadProps, DEFAULT_MAX_RECORDING_BYTES, DEFAULT_PARTICIPANT_AUDIO_LABELS, DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type GroupParticipantConversationsParams, type ParticipantAudioLabels, type ParticipantAudioRecordingOptions, type ParticipantAuthorAvatarRenderer, type ParticipantConversationEvent, ParticipantConversations, type ParticipantConversationsApi, type ParticipantConversationsClassNames, type ParticipantConversationsLabels, type ParticipantConversationsProps, type ParticipantInboxSection, type ParticipantInboxView, type ParticipantLocalPendingMessage, type ParticipantMessageActionsRenderer, type ParticipantMessageActionsTarget, type ParticipantPendingMessage, type ParticipantPerspective, type ParticipantSendInput, type ParticipantSendResult, type ParticipantSubjectGroup, type ParticipantSubjectIconRenderer, groupParticipantConversations };

package/dist/participant/index.js

@@ -64,6 +64,7 @@ function formatRecordingElapsedLabel(template, elapsed, limit) {
 
 // src/participant/participantLabels.ts
 var DEFAULT_MESSAGE_OPTIONS_LABEL = "Message options";
+var DEFAULT_SHOW_ORIGINAL_TEXT_LABEL = "Show original";
 var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   inboxTitle: "Conversations",
   sectionAwaiting: "Waiting for your reply",
@@ -101,6 +102,7 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   discard: "Discard",
   edit: "Edit",
   messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
+  showOriginalText: DEFAULT_SHOW_ORIGINAL_TEXT_LABEL,
   notFound: "Conversation not found",
   loading: "Loading\u2026",
   loadError: "Could not load. Check your connection and try again.",
@@ -2577,7 +2579,26 @@ function BubbleHeading({ content, labels }) {
   if (!content.authorName) return null;
   return /* @__PURE__ */ jsx27("span", { className: "cv-p-bubble__author", children: content.authorName });
 }
-function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }) {
+function hostActions(content, render) {
+  if (!render || content.messageId === void 0) return null;
+  return render({
+    id: content.messageId,
+    text: content.text ?? null,
+    authorName: content.authorName ?? null,
+    isMine: content.isMine,
+    attachments: content.attachments
+  });
+}
+function OriginalText({ content, labels }) {
+  const original = content.originalText?.trim();
+  if (!original || original === content.text?.trim()) return null;
+  return /* @__PURE__ */ jsxs21("details", { className: "cv-p-bubble__original", children: [
+    /* @__PURE__ */ jsx27("summary", { className: "cv-p-bubble__original-toggle", children: labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL }),
+    /* @__PURE__ */ jsx27("div", { className: "cv-p-bubble__original-text", children: original })
+  ] });
+}
+function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit, renderMessageActions }) {
+  const actions = hostActions(content, renderMessageActions);
   return /* @__PURE__ */ jsxs21(Fragment6, { children: [
     /* @__PURE__ */ jsx27(BubbleHeading, { content, labels }),
     content.text ? /* @__PURE__ */ jsx27(ParticipantMessageText, { text: content.text, labels, id: textId }) : null,
@@ -2594,8 +2615,10 @@ function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl,
     /* @__PURE__ */ jsxs21("span", { className: "cv-p-bubble__meta", children: [
       /* @__PURE__ */ jsx27("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
       ownStatus ? /* @__PURE__ */ jsx27(OwnStatus, { status: ownStatus, labels, onRetry }) : null,
-      ownStatus === "failed" ? /* @__PURE__ */ jsx27(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null
-    ] })
+      ownStatus === "failed" ? /* @__PURE__ */ jsx27(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null,
+      actions ? /* @__PURE__ */ jsx27("span", { className: "cv-p-bubble__host-actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsx27(OriginalText, { content, labels })
   ] });
 }
 
@@ -2669,10 +2692,12 @@ function describeItem(item, perspective) {
       isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? void 0,
       text: message.text ?? void 0,
+      originalText: message.originalText ?? void 0,
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],
-      serverStatus: message.status
+      serverStatus: message.status,
+      messageId: message.id
     };
   }
   return {
@@ -2780,6 +2805,7 @@ function ParticipantTimeline(props) {
           tail: props.tail,
           perspective: props.perspective,
           avatar,
+          renderMessageActions: props.renderMessageActions,
           ...resolveActions(item, pendingActions)
         },
         keyOf(item)
@@ -3678,6 +3704,7 @@ function LoadedThread(props) {
       renderSubjectIcon: props.renderSubjectIcon,
       avatars: props.avatars,
       renderAuthorAvatar: props.renderAuthorAvatar,
+      renderMessageActions: props.renderMessageActions,
       tail: props.tail,
       audioRecording: props.audioRecording,
       renderComposerLock: props.renderComposerLock
@@ -4045,6 +4072,7 @@ function ConversationThreadBody(props) {
           renderSubjectIcon: props.renderSubjectIcon,
           avatars: props.avatars,
           renderAuthorAvatar: props.renderAuthorAvatar,
+          renderMessageActions: props.renderMessageActions,
           tail: props.tail,
           counterpartLabel: props.counterpartLabel,
           headerActions: props.headerActions,

package/dist/styles.css

@@ -1978,7 +1978,46 @@
 .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;
+}
+.cv-p-bubble__original-toggle {
+  display: inline-block;
+  font-size: 0.7rem;
+  color: var(--cv-p-i-text-muted);
+  cursor: pointer;
+  list-style: none;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+}
+.cv-p-bubble__original-toggle::-webkit-details-marker {
+  display: none;
+}
+.cv-p-bubble__original-toggle:focus-visible {
+  outline: 2px solid var(--cv-p-i-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.cv-p-bubble__original-text {
+  margin-top: 0.3rem;
+  padding-inline-start: 0.5rem;
+  border-inline-start: 2px solid var(--cv-p-i-border);
+  max-height: 16rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 0.8rem;
+  color: var(--cv-p-i-text-muted);
+}
 .cv-p-bubble__meta {
+  order: 1;
   display: flex;
   flex: 0 0 auto;
   justify-content: flex-end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -35,8 +35,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/conversation-contracts": "0.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.6.0"
+    "@adatechnology/meta-whatsapp-contracts": "0.6.0",
+    "@adatechnology/conversation-contracts": "0.7.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

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'
@@ -51,6 +51,8 @@ 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
   /** 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 +109,7 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           renderSubjectIcon={props.renderSubjectIcon}
           avatars={props.avatars}
           renderAuthorAvatar={props.renderAuthorAvatar}
+          renderMessageActions={props.renderMessageActions}
           tail={props.tail}
           counterpartLabel={props.counterpartLabel}
           headerActions={props.headerActions}

package/src/participant/ParticipantAuthorAvatar.tsx

@@ -1,10 +1,22 @@
 import { User } from 'lucide-react'
+import type { 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[]
+}
+
+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,9 +2,10 @@ 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 type { ParticipantConversationsLabels } from './participantLabels'
+import { DEFAULT_SHOW_ORIGINAL_TEXT_LABEL, type ParticipantConversationsLabels } from './participantLabels'
 import type { ParticipantOwnMessageStatus } from './participantMessages'
 
 type BubbleBodyProps = {
@@ -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,7 +26,31 @@ function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'l
   return <span className="cv-p-bubble__author">{content.authorName}</span>
 }
 
-export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }: BubbleBodyProps) {
+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,
+  })
+}
+
+/** 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>
+      <div className="cv-p-bubble__original-text">{original}</div>
+    </details>
+  )
+}
+
+export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit, renderMessageActions }: BubbleBodyProps) {
+  const actions = hostActions(content, renderMessageActions)
   return (
     <>
       <BubbleHeading content={content} labels={labels} />
@@ -48,7 +74,10 @@ export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachme
         </time>
         {ownStatus ? <OwnStatus status={ownStatus} labels={labels} onRetry={onRetry} /> : 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/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,
@@ -40,6 +40,8 @@ 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
   /** 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/ParticipantMessageBubble.test.tsx

@@ -70,6 +70,41 @@ describe('ParticipantMessageBubble', () => {
     expect(mine).not.toContain('Marina')
   })
 
+  it('keeps the original text collapsed behind a discreet toggle inside the bubble', () => {
+    const original = 'Pode descarregar.\n\nEm ter., 20 de out. de 2026, Equipe escreveu:\n> Autorizam?'
+    const markup = renderServer(buildMessage({ id: 'a', text: 'Pode descarregar.', originalText: original }))
+
+    expect(markup).toContain('<details class="cv-p-bubble__original">')
+    expect(markup).not.toContain('<details class="cv-p-bubble__original" open')
+    expect(markup).toContain('<summary class="cv-p-bubble__original-toggle">Show original</summary>')
+    expect(markup).toContain('Em ter., 20 de out. de 2026, Equipe escreveu:')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('uses the host label for the original-text toggle', () => {
+    const item: ParticipantTimelineItem = {
+      kind: 'server',
+      message: buildMessage({ id: 'a', text: 'Ok', originalText: 'Ok\n> antes' }),
+    }
+    const markup = renderToStaticMarkup(
+      <ParticipantMessageBubble
+        item={item}
+        labels={{ ...LABELS, showOriginalText: 'ver histórico' }}
+        confirmsRead
+        resolveAttachmentUrl={resolveAttachmentUrl}
+      />,
+    )
+
+    expect(markup).toContain('>ver histórico</summary>')
+  })
+
+  it('shows no toggle when the original is absent, blank or the same as the text', () => {
+    expect(renderServer(buildMessage({ id: 'a', text: 'Ok' }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'b', text: 'Ok', originalText: null }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'c', text: 'Ok', originalText: '  ' }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'd', text: 'Ok', originalText: ' Ok\n' }))).not.toContain('<details')
+  })
+
   it('renders a time element with the ISO dateTime', () => {
     expect(renderServer()).toMatch(/<time[^>]*dateTime="2026-10-01T10:00:00.000Z"/)
   })
@@ -212,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')
+  })
+})

package/src/participant/ParticipantMessageBubble.tsx

@@ -3,6 +3,7 @@ import { useId, type ReactNode } from 'react'
 import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
 
 import { BubbleBody } from './ParticipantBubbleBody'
+import type { ParticipantMessageActionsRenderer } from './ParticipantAuthorAvatar'
 import { RetryButton } from './ParticipantBubbleStatus'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
 import type { ParticipantConversationsLabels } from './participantLabels'
@@ -31,17 +32,21 @@ 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 = {
   readonly isMine: boolean
   readonly authorName?: string
   readonly text?: string
+  readonly originalText?: string
   readonly createdAt: string
   readonly attachments: readonly ParticipantAttachment[]
   readonly pendingFilenames: readonly string[]
   readonly displayState?: ParticipantPendingDisplayState
   readonly serverStatus?: MessageDeliveryStatus
+  readonly messageId?: string
 }
 
 function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPerspective): BubbleContent {
@@ -51,10 +56,12 @@ function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPe
       isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? undefined,
       text: message.text ?? undefined,
+      originalText: message.originalText ?? undefined,
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],
       serverStatus: message.status,
+      messageId: message.id,
     }
   }
   return {

package/src/participant/ParticipantThread.tsx

@@ -16,7 +16,7 @@ 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 { ParticipantThreadHeader } from './ParticipantThreadHeader'
@@ -62,6 +62,8 @@ 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
   /** 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. */

package/src/participant/ParticipantThreadScreen.tsx

@@ -103,6 +103,7 @@ function LoadedThread(props: LoadedThreadProps) {
       renderSubjectIcon={props.renderSubjectIcon}
       avatars={props.avatars}
       renderAuthorAvatar={props.renderAuthorAvatar}
+      renderMessageActions={props.renderMessageActions}
       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'

package/src/participant/participantLabels.ts

@@ -1,6 +1,7 @@
 import { DEFAULT_PARTICIPANT_AUDIO_LABELS, type ParticipantAudioLabels } from './participantAudioLabels'
 
 export const DEFAULT_MESSAGE_OPTIONS_LABEL = 'Message options'
+export const DEFAULT_SHOW_ORIGINAL_TEXT_LABEL = 'Show original'
 
 export type ParticipantConversationsLabels = {
   readonly inboxTitle: string
@@ -43,6 +44,8 @@ export type ParticipantConversationsLabels = {
   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
+  /** Toggle that opens the message as received (e.g. the whole email). Optional; the English default shows otherwise. */
+  readonly showOriginalText?: string
   readonly notFound: string
   readonly loading: string
   readonly loadError: string
@@ -106,6 +109,7 @@ export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsL
   discard: 'Discard',
   edit: 'Edit',
   messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
+  showOriginalText: DEFAULT_SHOW_ORIGINAL_TEXT_LABEL,
   notFound: 'Conversation not found',
   loading: 'Loading…',
   loadError: 'Could not load. Check your connection and try again.',

package/src/styles.css

@@ -1302,7 +1302,13 @@
 .cv-p-bubble__author { display: block; flex: 1 0 100%; margin-bottom: 0.15rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; color: var(--cv-p-i-accent); }
 .cv-p-bubble > .cv-p-text { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
 .cv-p-bubble > .cv-p-attachment { flex: 1 0 100%; }
-.cv-p-bubble__meta { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
+.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; }
+.cv-p-bubble__original-toggle { display: inline-block; font-size: 0.7rem; color: var(--cv-p-i-text-muted); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
+.cv-p-bubble__original-toggle::-webkit-details-marker { display: none; }
+.cv-p-bubble__original-toggle:focus-visible { outline: 2px solid var(--cv-p-i-accent); outline-offset: 2px; border-radius: 2px; }
+.cv-p-bubble__original-text { margin-top: 0.3rem; padding-inline-start: 0.5rem; border-inline-start: 2px solid var(--cv-p-i-border); max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; color: var(--cv-p-i-text-muted); }
+.cv-p-bubble__meta { order: 1; display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
 .cv-p-bubble__status { display: inline-flex; align-items: center; gap: 0.25rem; }
 .cv-p-bubble .cv-status-ticks--queued, .cv-p-bubble .cv-status-ticks--sent, .cv-p-bubble .cv-status-ticks--delivered { color: var(--cv-p-i-tick); }
 .cv-p-bubble .cv-status-ticks--read { color: var(--cv-p-i-tick-read); }