@adatechnology/conversations-ui 0.12.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;
@@ -242,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. */
@@ -289,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. */
@@ -299,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

@@ -2579,6 +2579,16 @@ function BubbleHeading({ content, labels }) {
   if (!content.authorName) return null;
   return /* @__PURE__ */ jsx27("span", { className: "cv-p-bubble__author", children: content.authorName });
 }
+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;
@@ -2587,7 +2597,8 @@ function OriginalText({ content, labels }) {
     /* @__PURE__ */ jsx27("div", { className: "cv-p-bubble__original-text", children: original })
   ] });
 }
-function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }) {
+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,
@@ -2604,7 +2615,8 @@ 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 })
   ] });
@@ -2684,7 +2696,8 @@ function describeItem(item, perspective) {
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],
-      serverStatus: message.status
+      serverStatus: message.status,
+      messageId: message.id
     };
   }
   return {
@@ -2792,6 +2805,7 @@ function ParticipantTimeline(props) {
           tail: props.tail,
           perspective: props.perspective,
           avatar,
+          renderMessageActions: props.renderMessageActions,
           ...resolveActions(item, pendingActions)
         },
         keyOf(item)
@@ -3690,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
@@ -4057,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,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.12.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.7.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,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,6 +26,17 @@ 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,
+  })
+}
+
 /** 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()
@@ -36,7 +49,8 @@ function OriginalText({ content, labels }: Pick<BubbleBodyProps, 'content' | 'la
   )
 }
 
-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} />
@@ -60,6 +74,7 @@ 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

@@ -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')
+  })
+})

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,6 +32,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 +46,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 +61,7 @@ function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPe
       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/styles.css

@@ -1302,6 +1302,7 @@
 .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__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; }