@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.0

package/src/AudioTranscription.tsx

@@ -0,0 +1,252 @@
+import { useCallback, useState } from 'react'
+import { Check, Copy, FileText, Loader2, RefreshCw } from 'lucide-react'
+import { useConversationLocales } from './ConversationLocalesProvider'
+import { cn } from './lib/cn'
+import type { MessageTranscription } from './types'
+
+export interface AudioTranscriptionProps {
+  transcription?: MessageTranscription | null
+  /**
+   * Pede a transcrição ao backend. Ausente, o bloco nunca oferece o botão — um host em modo
+   * automático não tem rota para isso, e desenhar um botão que estoura no clique é pior do que não
+   * desenhar nada.
+   *
+   * O que for devolvido é exibido na hora. Sem isso o texto só apareceria no próximo refetch da
+   * lista, e transcrição não emite evento de tempo real: o operador clicaria, veria o spinner
+   * terminar e continuaria sem o texto na tela.
+   */
+  onTranscribe?: () => Promise<MessageTranscription | void>
+  isMine?: boolean
+}
+
+/** Feedback de "copiado" some sozinho — confirmação que exige clique para fechar é ruído. */
+const COPIED_FEEDBACK_MS = 2000
+
+/**
+ * Acima disto a transcrição nasce recolhida.
+ *
+ * Medido: 1147 caracteres (cerca de um minuto de fala) produziram uma bolha de 854px — mais alta que
+ * a área visível da conversa, empurrando todo o resto para fora. Nota de voz de três minutos
+ * triplicaria. O limite é em caracteres, e não em linhas de CSS, porque a decisão precisa acontecer
+ * antes de renderizar: `line-clamp` sozinho esconde o texto mas ainda paga o layout inteiro.
+ */
+const COLLAPSE_ABOVE_CHARS = 320
+
+/** Linhas visíveis quando recolhido — o bastante para saber do que o cliente está falando. */
+const COLLAPSED_LINE_CLAMP = 4
+
+/**
+ * Transcrição sob a nota de voz, com botão de copiar.
+ *
+ * Copiar é o motivo de o bloco existir: o operador cola o pedido do cliente no sistema interno, no
+ * orçamento, na busca. Seleção manual de texto dentro de um balão de chat é exatamente onde o
+ * arrasto do mouse falha — pega o balão vizinho, o horário, o nome do remetente.
+ *
+ * `navigator.clipboard.writeText` com try/catch silencioso, mesmo padrão de `MessageText.tsx`: a API
+ * exige contexto seguro e permissão, e um host servindo em HTTP simples não a tem. Falhar sem alarme
+ * é o certo — o texto continua na tela para seleção manual.
+ */
+export function AudioTranscription({ transcription, onTranscribe, isMine = false }: AudioTranscriptionProps) {
+  const { transcription: locales } = useConversationLocales()
+  const [hasCopied, setHasCopied] = useState(false)
+  const [isTranscribing, setIsTranscribing] = useState(false)
+  const [hasRequestFailed, setHasRequestFailed] = useState(false)
+  /**
+   * Resultado que acabou de voltar do backend, exibido antes de a lista ser refeita.
+   *
+   * Tem precedência sobre a prop porque é o dado mais novo: o refetch, quando vier, traz a mesma
+   * coisa. Sem isto o clique terminaria em nada visível.
+   */
+  const [justTranscribed, setJustTranscribed] = useState<MessageTranscription | undefined>()
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const effective = justTranscribed ?? transcription
+  const text = effective?.text?.trim() ?? ''
+  const status = effective?.status
+
+  // Nasce recolhido e o operador decide: abrir tudo por padrão faria a nota de voz longa esconder as
+  // mensagens seguintes, que é justamente o contexto de que ele precisa para responder.
+  const isLong = text.length > COLLAPSE_ABOVE_CHARS
+  const isTruncated = isLong && !isExpanded
+  const isDone = status === 'done'
+  const hasText = isDone && text.length > 0
+  // Silêncio já processado: dizer "sem fala detectada" evita o operador clicar em transcrever de novo
+  // atrás de um texto que não existe.
+  const isSilent = isDone && text.length === 0
+
+  const handleCopy = useCallback(async () => {
+    if (!text) return
+    try {
+      await navigator.clipboard.writeText(text)
+      setHasCopied(true)
+      setTimeout(() => setHasCopied(false), COPIED_FEEDBACK_MS)
+    } catch {
+      // Clipboard indisponível (contexto não seguro, permissão negada) — o texto segue selecionável.
+    }
+  }, [text])
+
+  const handleTranscribe = useCallback(async () => {
+    if (!onTranscribe || isTranscribing) return
+    setIsTranscribing(true)
+    setHasRequestFailed(false)
+    try {
+      const result = await onTranscribe()
+      if (result) setJustTranscribed(result)
+    } catch {
+      setHasRequestFailed(true)
+    } finally {
+      setIsTranscribing(false)
+    }
+  }, [onTranscribe, isTranscribing])
+
+  const dividerClass = isMine ? 'border-black/10 dark:border-white/10' : 'border-black/10 dark:border-white/10'
+
+  // Nada avaliado e sem rota para pedir: o balão fica como era antes da transcrição existir.
+  if (!status && !onTranscribe) return null
+
+  if (!status || status === 'pending' || status === 'failed') {
+    return (
+      <div className={`mt-1.5 border-t pt-1.5 ${dividerClass}`}>
+        <TranscribeButton
+          label={resolveActionLabel({ status, hasRequestFailed, isTranscribing, locales })}
+          isBusy={isTranscribing}
+          onClick={handleTranscribe}
+          isDisabled={!onTranscribe}
+        />
+      </div>
+    )
+  }
+
+  if (status === 'unsupported') {
+    return (
+      <div className={`mt-1.5 border-t pt-1.5 ${dividerClass}`}>
+        <p className="text-xs italic text-gray-500 dark:text-gray-400">{locales.unsupported}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`mt-1.5 border-t pt-1.5 ${dividerClass}`}>
+      <div className="mb-0.5 flex items-center gap-1.5">
+        <FileText size={11} className="flex-shrink-0 text-gray-500 dark:text-gray-400" aria-hidden />
+        <span className="text-[11px] font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+          {locales.label}
+        </span>
+
+        {hasText && (
+          <button
+            onClick={handleCopy}
+            data-cv-tooltip={locales.copy}
+            aria-label={hasCopied ? locales.copied : locales.copy}
+            className="ml-auto flex flex-shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"
+          >
+            {hasCopied ? (
+              <>
+                <Check size={11} aria-hidden />
+                <span>{locales.copied}</span>
+              </>
+            ) : (
+              <>
+                <Copy size={11} aria-hidden />
+                <span>{locales.copy}</span>
+              </>
+            )}
+          </button>
+        )}
+      </div>
+
+      {isSilent ? (
+        <p className="text-xs italic text-gray-500 dark:text-gray-400">{locales.empty}</p>
+      ) : (
+        <>
+          {/* `select-all` para o clique único selecionar tudo: é o fallback quando o clipboard não
+              está disponível, e o caminho de quem prefere copiar com o teclado. */}
+          <p
+            className={cn(
+              'select-all whitespace-pre-wrap break-words text-[13px] leading-[18px] text-gray-700 dark:text-gray-200',
+              isTruncated && 'overflow-hidden',
+            )}
+            style={
+              isTruncated
+                ? {
+                    display: '-webkit-box',
+                    WebkitBoxOrient: 'vertical',
+                    WebkitLineClamp: COLLAPSED_LINE_CLAMP,
+                  }
+                : undefined
+            }
+          >
+            {text}
+          </p>
+          {/* O botão de copiar leva o texto INTEIRO, recolhido ou não — recolher é sobre altura na
+              tela, não sobre o que o operador cola no sistema interno. */}
+          {isLong && (
+            <button
+              data-cv-tooltip={isExpanded ? locales.showLess : locales.showMore} aria-label={isExpanded ? locales.showLess : locales.showMore}
+              onClick={() => setIsExpanded((current) => !current)}
+              className="mt-1 text-[11px] font-medium text-gray-500 underline decoration-dotted hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            >
+              {isExpanded ? locales.showLess : locales.showMore}
+            </button>
+          )}
+        </>
+      )}
+
+      {/* Retranscrever fica escondido atrás do hover do balão: é ação rara e paga cota de engine. */}
+      {onTranscribe && (
+        <button
+          data-cv-tooltip={isTranscribing ? locales.transcribing : locales.retry} aria-label={isTranscribing ? locales.transcribing : locales.retry}
+          onClick={handleTranscribe}
+          disabled={isTranscribing}
+          className="mt-1 flex items-center gap-1 text-[11px] text-gray-400 opacity-0 transition-opacity hover:text-gray-600 focus:opacity-100 group-hover:opacity-100 disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-300"
+        >
+          {isTranscribing ? <Loader2 size={10} className="animate-spin" aria-hidden /> : <RefreshCw size={10} aria-hidden />}
+          <span>{isTranscribing ? locales.transcribing : locales.retry}</span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+function resolveActionLabel(params: {
+  status?: MessageTranscription['status']
+  hasRequestFailed: boolean
+  isTranscribing: boolean
+  locales: { transcribe: string; transcribing: string; retry: string; failed: string }
+}): string {
+  if (params.isTranscribing) return params.locales.transcribing
+  if (params.hasRequestFailed) return params.locales.retry
+  // `pending` é cota estourada ou falha transitória do lado do servidor: já foi tentado e vai sair,
+  // mas o operador que não quer esperar a retomada pode forçar agora.
+  if (params.status === 'pending') return params.locales.transcribing
+  if (params.status === 'failed') return params.locales.failed
+  return params.locales.transcribe
+}
+
+function TranscribeButton({
+  label,
+  isBusy,
+  isDisabled,
+  onClick,
+}: {
+  label: string
+  isBusy: boolean
+  isDisabled: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      data-cv-tooltip={label} aria-label={label}
+      onClick={onClick}
+      disabled={isBusy || isDisabled}
+      className="flex items-center gap-1.5 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"
+    >
+      {isBusy ? (
+        <Loader2 size={11} className="animate-spin" aria-hidden />
+      ) : (
+        <FileText size={11} aria-hidden />
+      )}
+      <span>{label}</span>
+    </button>
+  )
+}

package/src/Avatar.tsx

@@ -81,7 +81,7 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '', labels }:
   return (
     <div
       className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`}
-      title={name}
+      data-cv-tooltip={name}
     >
       {getInitials(name)}
     </div>

package/src/ConversationContextPanel.tsx

@@ -1,31 +1,51 @@
 /**
  * "Suas Seleções": o que o bot já coletou na conversa. Para o atendente que assume no meio, é a
- * diferença entre ler o transcript inteiro e ver o estado em duas linhas.
+ * diferença entre ler o transcript inteiro e ver o estado de relance.
  *
  * O pacote não interpreta o contexto — ele é `Record<string, unknown>` e cada produto nomeia as
  * próprias chaves. O host traduz para `entries`; aqui só se decide como mostrar.
+ *
+ * Desenho em paridade com financiamento-imobiliario-bot/apps/web/src/components/SelectionsSummary.tsx:
+ * card com gradiente, badge de contagem, pills de status no cabeçalho e grid de cards com borda
+ * colorida por estado. O que ficou diferente de lá, e por quê, está comentado no ponto.
  */
 
 import { useState } from 'react'
+import { Check, ChevronDown, ChevronUp, Clock, Pencil } from 'lucide-react'
 
 import { cn } from './lib/cn'
 import { useIsNarrow } from './useIsNarrow'
 
+/**
+ * `completed` tem valor, `pending` ainda não foi coletado, `editing` é o cliente refazendo a
+ * resposta. O host só precisa mandar `status` para o terceiro caso — os dois primeiros saem do
+ * próprio `value`, e exigir o campo quebraria quem já usa o painel.
+ */
+export type ConversationContextStatus = 'completed' | 'pending' | 'editing'
+
 export interface ConversationContextEntry {
   key: string
   label: string
   value?: string | undefined
   icon?: string
+  status?: ConversationContextStatus
 }
 
 export interface ConversationContextPanelLabels {
   title: string
   empty: string
+  collapse: string
+  expand: string
+  /** Placeholder do card ainda não coletado. */
+  notCollected: string
 }
 
 export const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels = {
-  title: '📋 Suas Seleções',
+  title: 'Suas Seleções',
   empty: 'Nada coletado ainda nesta conversa.',
+  collapse: 'fechar',
+  expand: 'abrir',
+  notCollected: 'a coletar',
 }
 
 export interface ConversationContextPanelClassNames {
@@ -37,70 +57,224 @@ export interface ConversationContextPanelClassNames {
 
 export interface ConversationContextPanelProps {
   entries: readonly ConversationContextEntry[]
+  /**
+   * Estado inicial. Ausente, abre sozinho no desktop quando há algum dado preenchido.
+   *
+   * Existe porque "abre sozinho" nem sempre é o que o produto quer: com 1 de 6 campos preenchidos o
+   * painel ocupa altura mostrando quase só pendências, e empurra a conversa — que é o que se veio ver.
+   */
+  defaultOpen?: boolean
+  /**
+   * Rótulo do fluxo em curso, exibido em azul ao lado do título — no financiamento é o produto
+   * escolhido ("Consórcio", "MCMV"). Ausente, o cabeçalho fica só com título e contagens.
+   */
+  flowLabel?: string
   labels?: Partial<ConversationContextPanelLabels>
   className?: string
   classNames?: Partial<ConversationContextPanelClassNames>
 }
 
+function statusOf(entry: ConversationContextEntry): ConversationContextStatus {
+  if (entry.status) return entry.status
+  return entry.value ? 'completed' : 'pending'
+}
+
+/** Borda e fundo do card por estado. Pendente é tracejado — ver o comentário no grid. */
+const CARD_STYLE: Record<ConversationContextStatus, string> = {
+  completed: 'bg-white dark:bg-gray-800 border-2 border-green-200 dark:border-green-800 shadow-sm',
+  editing: 'bg-white dark:bg-gray-800 border-2 border-blue-200 dark:border-blue-800 shadow-sm',
+  pending: 'border-2 border-dashed border-gray-200 bg-white/40 dark:border-gray-700 dark:bg-gray-800/30',
+}
+
+const GLYPH_STYLE: Record<ConversationContextStatus, string> = {
+  completed: 'text-green-600 dark:text-green-400',
+  editing: 'text-blue-600 dark:text-blue-400',
+  pending: 'text-gray-400 dark:text-gray-500',
+}
+
+function StatusGlyph({ status }: { status: ConversationContextStatus }) {
+  const size = 11
+  if (status === 'completed') return <Check size={size} aria-hidden />
+  if (status === 'editing') return <Pencil size={size} aria-hidden />
+  return <Clock size={size} aria-hidden />
+}
+
+function CountPill({
+  status,
+  count,
+  className,
+}: {
+  status: ConversationContextStatus
+  count: number
+  className: string
+}) {
+  if (count === 0) return null
+
+  return (
+    <span className={cn('flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium', className)}>
+      <StatusGlyph status={status} />
+      {count}
+    </span>
+  )
+}
+
 export function ConversationContextPanel({
   entries,
+  defaultOpen,
+  flowLabel,
   labels: labelsOverride,
   className,
   classNames,
 }: ConversationContextPanelProps) {
   const labels = { ...DEFAULT_CONVERSATION_CONTEXT_LABELS, ...labelsOverride }
-  const filled = entries.filter((entry) => Boolean(entry.value))
 
-  // Abre sozinho só quando há algo coletado: um painel de seis traços ocupa a altura da conversa
-  // sem informar nada. O contador continua visível fechado, que é o dado útil de relance.
+  const counts = { completed: 0, pending: 0, editing: 0 }
+  for (const entry of entries) counts[statusOf(entry)] += 1
+
+  // Abre sozinho só quando há algo coletado: um painel de seis pendências ocupa a altura da conversa
+  // sem informar nada. As contagens continuam visíveis fechado, que é o dado útil de relance.
   //
   // `undefined` = usuário ainda não mexeu. Guardar só um booleano não serve: o contexto chega
   // depois da montagem, então o estado inicial seria calculado com a lista vazia e o painel ficaria
   // fechado mesmo com dados.
   const isNarrow = useIsNarrow()
   const [manualOpen, setManualOpen] = useState<boolean | undefined>(undefined)
-  // No celular nasce fechado mesmo com dados: aberto, o painel consome ~150px da conversa. O
-  // contador no cabeçalho já entrega a informação de relance.
-  const open = manualOpen ?? (!isNarrow && filled.length > 0)
+  // No celular nasce fechado mesmo com dados: aberto, o painel consome ~150px da conversa.
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && counts.completed > 0)
 
   return (
-    <section className={cn('border-b', classNames?.root, className)}>
-      <button
-        type="button"
-        onClick={() => setManualOpen(!open)}
-        aria-expanded={open}
-        className={cn('flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium', classNames?.toggle)}
+    // Faixa azul clara com separador, como o wrapper do financiamento: sem ela o card encostava
+    // direto no papel de parede da conversa e os dois blocos se misturavam.
+    <div className={cn('border-b bg-blue-50/60 px-3 py-3 dark:border-gray-700 dark:bg-blue-950/20', className)}>
+      <section
+        className={cn(
+          'overflow-hidden rounded-lg border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 dark:border-blue-900 dark:from-blue-950/30 dark:to-indigo-950/30',
+          classNames?.root,
+        )}
       >
-        <span aria-hidden className="text-xs">
-          {open ? '▾' : '▸'}
-        </span>
-        <span>{labels.title}</span>
-        <span className={cn('rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700', classNames?.counter)}>
-          {filled.length}/{entries.length}
-        </span>
-      </button>
-
-      {open ? (
-        <div className={cn('px-4 pb-3', classNames?.body)}>
-          {entries.length === 0 ? (
-            <p className="text-xs text-gray-500">{labels.empty}</p>
-          ) : (
-            <dl className="grid grid-cols-2 gap-2 text-xs">
-              {entries.map((entry) => (
-                <div key={entry.key} className="min-w-0">
-                  <dt className="truncate text-gray-500">
-                    {entry.icon ? `${entry.icon} ` : ''}
-                    {entry.label}
-                  </dt>
-                  <dd className="truncate font-medium">
-                    {entry.value ? <span className="text-green-700 dark:text-green-400">✓ {entry.value}</span> : '—'}
-                  </dd>
-                </div>
-              ))}
-            </dl>
+        <button
+          type="button"
+          onClick={() => setManualOpen(!open)}
+          aria-expanded={open}
+          data-cv-tooltip={open ? labels.collapse : labels.expand} aria-label={open ? labels.collapse : labels.expand}
+          className={cn(
+            'flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2.5 text-left transition-colors hover:bg-blue-100/40 dark:hover:bg-blue-900/20',
+            classNames?.toggle,
           )}
-        </div>
-      ) : null}
-    </section>
+        >
+          <span className="flex min-w-0 items-center gap-2">
+            <span aria-hidden className="text-base leading-none">
+              📋
+            </span>
+            <span className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{labels.title}</span>
+            {flowLabel ? (
+              <span className="truncate text-xs font-medium text-blue-600 dark:text-blue-400">{flowLabel}</span>
+            ) : null}
+            <span
+              className={cn(
+                'inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-medium text-white',
+                classNames?.counter,
+              )}
+            >
+              {entries.length}
+            </span>
+          </span>
+
+          <span className="flex flex-shrink-0 items-center gap-2">
+            <CountPill
+              status="completed"
+              count={counts.completed}
+              className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+            />
+            <CountPill
+              status="editing"
+              count={counts.editing}
+              className="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+            />
+            <CountPill
+              status="pending"
+              count={counts.pending}
+              className="bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+            />
+            {open ? (
+              <ChevronUp size={15} className="flex-shrink-0 text-blue-500" aria-hidden />
+            ) : (
+              <ChevronDown size={15} className="flex-shrink-0 text-blue-500" aria-hidden />
+            )}
+          </span>
+        </button>
+
+        {open ? (
+          /**
+           * Teto de altura com rolagem interna, como no financiamento (`max-h-64 overflow-y-auto`).
+           * Sem isso o painel cresce sem limite — e cresce de verdade: o host anexa as chaves de
+           * contexto que ele não conhece ao fim da lista, então uma conversa com bastante estado
+           * empurrava a conversa inteira para fora da tela.
+           *
+           * A diferença: lá o teto envolve o cabeçalho também, então ele rola junto e sai de vista.
+           * Aqui só o corpo rola — o cabeçalho é o que fecha o painel, e perder o clique de fechar
+           * no meio da rolagem é pior do que a economia de uma linha de markup.
+           */
+          <div
+            className={cn(
+              'cv-scrollbar-thin max-h-64 overflow-y-auto border-t border-blue-200 px-4 pb-4 pt-1 dark:border-blue-900',
+              classNames?.body,
+            )}
+          >
+            {entries.length === 0 ? (
+              <p className="pt-2 text-xs text-gray-500 dark:text-gray-400">{labels.empty}</p>
+            ) : (
+              /**
+               * Três colunas no desktop, como no financiamento — com duas, seis campos viravam uma
+               * coluna alta que empurrava a conversa.
+               *
+               * O que não fizemos igual: lá o painel FILTRA o que não foi coletado, porque a fonte
+               * só guarda o que o cliente respondeu. Aqui a lista de campos é conhecida de antemão,
+               * e "falta endereço" é justamente o que o atendente precisa ver ao assumir. Então o
+               * pendente aparece — tracejado e apagado, para ler como lacuna e não como dado.
+               */
+              <dl className="mt-2 grid grid-cols-2 gap-2 lg:grid-cols-3">
+                {entries.map((entry) => {
+                  const status = statusOf(entry)
+
+                  return (
+                    <div
+                      key={entry.key}
+                      className={cn('min-w-0 rounded-lg p-2.5 transition-all', CARD_STYLE[status])}
+                    >
+                      <dt className="mb-1 flex items-center justify-center gap-1">
+                        {entry.icon ? (
+                          <span aria-hidden className="text-base leading-none">
+                            {entry.icon}
+                          </span>
+                        ) : null}
+                        <span className="truncate text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500 dark:text-gray-400">
+                          {entry.label}
+                        </span>
+                        <span className={cn('flex-shrink-0 leading-none', GLYPH_STYLE[status])}>
+                          <StatusGlyph status={status} />
+                        </span>
+                      </dt>
+                      {/* `title` no valor: truncado no card, o texto completo só existe no tooltip. */}
+                      <dd
+                        className={cn(
+                          'truncate text-center text-xs font-semibold',
+                          entry.value
+                            ? 'text-gray-900 dark:text-gray-100'
+                            : 'italic font-normal text-gray-400 dark:text-gray-500',
+                        )}
+                        data-cv-tooltip={entry.value ?? labels.notCollected}
+                      >
+                        {entry.value ?? labels.notCollected}
+                      </dd>
+                    </div>
+                  )
+                })}
+              </dl>
+            )}
+          </div>
+        ) : null}
+      </section>
+    </div>
   )
 }

package/src/ConversationDocumentsPanel.tsx

@@ -13,6 +13,7 @@ import { useConversationDocuments } from './hooks/useConversationDocuments'
 import { useConversations } from './providers/ConversationsProvider'
 import { FileIcon } from './FileIcon'
 import { cn } from './lib/cn'
+import { PAGINATION_LABELS } from './pagination.constant'
 import { formatDateTime, formatFileSize } from './lib/format'
 
 /** Origens que o filtro oferece. `all` não é origem — é a ausência de filtro. */
@@ -239,6 +240,7 @@ export function ConversationDocumentsPanel({
           </select>
 
           <button
+            data-cv-tooltip={sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest} aria-label={sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest}
             type="button"
             onClick={() => applyFilter(() => setSortDirection(sortDirection === 'desc' ? 'asc' : 'desc'))}
             className={cn('cv-header-action inline-flex items-center gap-1', classNames?.sortButton)}
@@ -250,6 +252,7 @@ export function ConversationDocumentsPanel({
           {/* Só aparece com filtro ativo: botão que não faz nada visível é ruído. */}
           {hasFilters ? (
             <button
+              data-cv-tooltip={labels.clearFilters} aria-label={labels.clearFilters}
               type="button"
               onClick={() =>
                 applyFilter(() => {
@@ -291,7 +294,7 @@ export function ConversationDocumentsPanel({
               {labels.selectAll}
             </label>
             {selectedIds.length > 0 ? (
-              <button type="button" onClick={() => void handleDownloadSelected()} className="cv-header-action">
+              <button data-cv-tooltip={labels.downloadSelected(selectedIds.length)} aria-label={labels.downloadSelected(selectedIds.length)} type="button" onClick={() => void handleDownloadSelected()} className="cv-header-action">
                 {labels.downloadSelected(selectedIds.length)}
               </button>
             ) : null}
@@ -347,7 +350,7 @@ export function ConversationDocumentsPanel({
                     {/* `title` no nome: truncado, o atendente não tem outro jeito de ler inteiro. */}
                     <div
                       className={cn('truncate text-sm font-medium', classNames?.filename)}
-                      title={document.filename}
+                      data-cv-tooltip={document.filename}
                     >
                       {document.filename}
                     </div>
@@ -366,7 +369,7 @@ export function ConversationDocumentsPanel({
                   <button
                     type="button"
                     onClick={() => void handleOpen(document.id, 'inline')}
-                    title={labels.view}
+                    data-cv-tooltip={labels.view}
                     aria-label={`${labels.view}: ${document.filename}`}
                     className={cn('cv-header-icon', classNames?.viewButton)}
                   >
@@ -375,7 +378,7 @@ export function ConversationDocumentsPanel({
                   <button
                     type="button"
                     onClick={() => void handleOpen(document.id, 'attachment')}
-                    title={labels.download}
+                    data-cv-tooltip={labels.download}
                     aria-label={`${labels.download}: ${document.filename}`}
                     className={cn('cv-header-icon', classNames?.downloadButton)}
                   >
@@ -401,7 +404,8 @@ export function ConversationDocumentsPanel({
                 type="button"
                 onClick={() => setPage(page - 1)}
                 disabled={page <= 1}
-                aria-label={labels.sortOldest}
+                aria-label={PAGINATION_LABELS.previous}
+              data-cv-tooltip={PAGINATION_LABELS.previous}
                 className="cv-header-icon disabled:opacity-40"
               >
                 ‹
@@ -411,7 +415,8 @@ export function ConversationDocumentsPanel({
                 type="button"
                 onClick={() => setPage(page + 1)}
                 disabled={page >= lastPage}
-                aria-label={labels.sortMostRecent}
+                aria-label={PAGINATION_LABELS.next}
+              data-cv-tooltip={PAGINATION_LABELS.next}
                 className="cv-header-icon disabled:opacity-40"
               >
                 ›