@adatechnology/conversations-ui 0.13.0 → 0.14.0

package/dist/styles.css

@@ -2145,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;
@@ -2529,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.13.0",
+  "version": "0.14.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/meta-whatsapp-contracts": "0.6.0",
-    "@adatechnology/conversation-contracts": "0.7.0"
+    "@adatechnology/conversation-contracts": "0.7.0",
+    "@adatechnology/meta-whatsapp-contracts": "0.6.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

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

@@ -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
@@ -53,6 +54,8 @@ export type ConversationThreadProps = {
   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. */
@@ -110,6 +113,7 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           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,5 +1,5 @@
 import { User } from 'lucide-react'
-import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
+import type { MessageDeliveryStatus, ParticipantAttachment } from '@adatechnology/conversation-contracts'
 import type { ReactNode } from 'react'
 
 import { authorInitials } from './participantAvatar'
@@ -13,6 +13,12 @@ export type ParticipantMessageActionsTarget = {
   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

package/src/participant/ParticipantBubbleBody.tsx

@@ -34,6 +34,7 @@ function hostActions(content: BubbleContent, render?: ParticipantMessageActionsR
     authorName: content.authorName ?? null,
     isMine: content.isMine,
     attachments: content.attachments,
+    createdAt: content.createdAt,
   })
 }
 
@@ -43,13 +44,25 @@ function OriginalText({ content, labels }: Pick<BubbleBodyProps, 'content' | 'la
   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, renderMessageActions }: BubbleBodyProps) {
+export function BubbleBody({
+  content,
+  labels,
+  ownStatus,
+  textId,
+  resolveAttachmentUrl,
+  onRetry,
+  onDiscard,
+  onEdit,
+  renderMessageActions,
+}: BubbleBodyProps) {
   const actions = hostActions(content, renderMessageActions)
   return (
     <>
@@ -73,7 +86,9 @@ 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. */}

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

@@ -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
@@ -42,6 +43,8 @@ export type ParticipantConversationsProps = {
   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.tsx

@@ -1,8 +1,10 @@
-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'
@@ -82,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
@@ -106,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 })
+}