@adatechnology/conversations-ui 0.12.0 → 0.14.0

package/src/participant/participantTranscriptionText.ts

@@ -0,0 +1,28 @@
+import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
+
+export type ReadyTranscription = { readonly filename: string; readonly text: string }
+
+/** The audios of a message whose transcription is ready and says something, in attachment order. */
+export function readyTranscriptions(attachments: readonly ParticipantAttachment[]): readonly ReadyTranscription[] {
+  return attachments.flatMap((attachment) => {
+    const transcription = attachment.kind === 'audio' ? attachment.transcription : undefined
+    const text = transcription?.status === 'ready' ? transcription.text.trim() : ''
+    return text === '' ? [] : [{ filename: attachment.filename, text }]
+  })
+}
+
+/** One attachment in a copy or an export: `[file]`, followed by what was said when the audio was transcribed. */
+export function attachmentForCopy(attachment: ParticipantAttachment, transcriptionLabel: string): string {
+  const [ready] = readyTranscriptions([attachment])
+  return ready ? `[${attachment.filename}] ${transcriptionLabel}: ${ready.text}` : `[${attachment.filename}]`
+}
+
+/** The file name of one audio's transcription: the audio's name without its extension, then the label. */
+export function transcriptionFileName(audioFilename: string, transcriptionLabel: string): string {
+  const base = audioFilename.replace(/\.[^.]+$/, '')
+  const safe = `${base} ${transcriptionLabel}`
+    .replace(/[\\/:*?"<>|]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  return `${safe}.txt`
+}

package/src/participant/useOpenUpwards.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useState, type RefObject } from 'react'
+
+const SCROLLER_SELECTOR = '.cv-p-thread__scroll'
+
+/**
+ * A panel under a bubble opens downwards; when that would cross the bottom of the thread's scrolling area (the
+ * last messages), it opens upwards instead, so it is never cut off.
+ */
+export function useOpenUpwards(isOpen: boolean, panelRef: RefObject<HTMLElement | null>): boolean {
+  const [isUpwards, setUpwards] = useState(false)
+  useLayoutEffect(() => {
+    const panel = panelRef.current
+    if (!isOpen || !panel) {
+      setUpwards(false)
+      return
+    }
+    const scroller = panel.closest(SCROLLER_SELECTOR)
+    if (!scroller) return
+    setUpwards(panel.getBoundingClientRect().bottom > scroller.getBoundingClientRect().bottom)
+  }, [isOpen, panelRef])
+  return isUpwards
+}

package/src/participant/useParticipantFailedMenu.ts

@@ -21,6 +21,8 @@ export type ParticipantFailedMenuController = {
   readonly handleMenuKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
   readonly handleBlur: (event: FocusEvent<HTMLSpanElement>) => void
   readonly close: () => void
+  /** Opens with the first item focused, as a right-click or a long press does. */
+  readonly open: () => void
 }
 
 export function useParticipantFailedMenu(): ParticipantFailedMenuController {
@@ -56,5 +58,6 @@ export function useParticipantFailedMenu(): ParticipantFailedMenuController {
     handleMenuKeyDown: (event) => handleFailedMenuKeyDown({ event, menuRef, triggerRef, dispatch }),
     handleBlur,
     close: () => dispatch({ type: 'close' }),
+    open: () => dispatch({ type: 'open', initialFocus: 'first' }),
   }
 }

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; }
@@ -1327,6 +1328,45 @@
 .cv-p-failed-menu__list--below { bottom: auto; top: calc(100% + 0.25rem); }
 .cv-p-failed-menu__item--danger { color: var(--cv-p-i-danger); }
 .cv-p-failed-menu__item:hover, .cv-p-failed-menu__item:focus-visible { background: var(--cv-p-i-highlight); }
+/* Menu da mensagem (opt-in `messageMenu`): seta discreta no canto do balão, à vista só com o ponteiro em cima, com
+   foco ou com o menu aberto; no toque abre por toque longo e a seta não ocupa o balão. */
+.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; }
+/* Modo de seleção: caixa à esquerda de cada mensagem; a linha inteira marca e desmarca. */
+.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; gap: 0.25rem; margin-top: 0.35rem; color: inherit; }
 .cv-p-attachment--document { flex-direction: row; justify-content: space-between; min-height: var(--cv-p-i-touch); align-items: center; text-decoration: underline; }
 .cv-p-attachment__image { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
@@ -1389,6 +1429,7 @@
   .cv-p-thread__latest-button { animation: cv-p-latest-in 0.16s ease-out; }
   .cv-p-protocol__copy, .cv-p-search__input { transition: border-color 0.12s, background-color 0.12s; }
   .cv-p-row, .cv-p-button, .cv-p-chip, .cv-p-thread__back, .cv-p-composer__attach { transition: background-color 0.12s, border-color 0.12s; }
+  .cv-p-message-menu__trigger { transition: opacity 0.12s; }
 }
 
 /* Scrolls. Verticais: barra fina no tema. Faixas horizontais: sem barra, com esmaecimento nas bordas. O