@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.21

package/src/AudioTranscription.tsx

@@ -0,0 +1,249 @@
+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}
+            title={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
+              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
+          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
+      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

@@ -1,8 +1,18 @@
+export interface AvatarLabels {
+  /** Lido por leitor de tela quando não há nome nem imagem — a silhueta genérica. */
+  unnamedContact: string
+}
+
 export interface AvatarProps {
   name?: string | null
   avatarUrl?: string
   size?: 'sm' | 'md' | 'lg'
   className?: string
+  labels?: Partial<AvatarLabels>
+}
+
+export const DEFAULT_AVATAR_LABELS: AvatarLabels = {
+  unnamedContact: 'Contato sem nome',
 }
 
 const sizeClasses = {
@@ -36,8 +46,9 @@ function getBgColor(name: string | undefined | null): string {
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/Avatar.tsx —
 // mesmas iniciais (primeira+última letra), mesmo hash de cor, mesmas classes de tamanho.
-export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarProps) {
+export function Avatar({ name, avatarUrl, size = 'md', className = '', labels }: AvatarProps) {
   const sizeClass = sizeClasses[size]
+  const unnamedContactLabel = labels?.unnamedContact ?? DEFAULT_AVATAR_LABELS.unnamedContact
 
   if (avatarUrl) {
     return (
@@ -49,15 +60,30 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarP
     )
   }
 
-  const initials = getInitials(name)
   const bgColor = getBgColor(name)
 
+  // Sem nome e sem imagem, a silhueta genérica. Iniciais exigem nome — derivá-las de um telefone
+  // produz rótulo sem significado ("+9"), que é pior que assumir o anonimato.
+  if (!name) {
+    return (
+      <div
+        className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`}
+        role="img"
+        aria-label={unnamedContactLabel}
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor" className="h-[60%] w-[60%]" aria-hidden>
+          <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" />
+        </svg>
+      </div>
+    )
+  }
+
   return (
     <div
       className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`}
-      title={name || undefined}
+      title={name}
     >
-      {initials}
+      {getInitials(name)}
     </div>
   )
 }

package/src/ChannelIcon.tsx

@@ -0,0 +1,87 @@
+/**
+ * Marca visual de cada canal.
+ *
+ * SVG em vez de emoji porque emoji não tem logo de marca: 💬 e 📨 não distinguem WhatsApp de
+ * Messenger para quem bate o olho numa fila de conversas. São marcas **simplificadas** desenhadas
+ * com primitivas — reconhecíveis pela forma e pela cor oficial, sem reproduzir o logotipo original.
+ *
+ * `currentColor` não serve aqui: a cor faz parte da identificação do canal.
+ */
+
+import { CONVERSATION_CHANNEL, capabilitiesOf, type ConversationChannel } from './conversationChannel'
+
+export const CHANNEL_BRAND_COLOR: Readonly<Record<ConversationChannel, string>> = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: '#25D366',
+  [CONVERSATION_CHANNEL.MESSENGER]: '#0084FF',
+  [CONVERSATION_CHANNEL.INSTAGRAM]: '#E4405F',
+  [CONVERSATION_CHANNEL.WEBCHAT]: '#64748B',
+}
+
+export interface ChannelIconProps {
+  channel?: ConversationChannel | undefined
+  size?: number
+  className?: string
+}
+
+function Glyph({ channel }: { channel: ConversationChannel }) {
+  const color = CHANNEL_BRAND_COLOR[channel]
+
+  if (channel === CONVERSATION_CHANNEL.WHATSAPP) {
+    return (
+      <>
+        <circle cx="12" cy="12" r="11" fill={color} />
+        {/* Handset estilizado, o traço que identifica a marca à distância. */}
+        <path
+          d="M8.6 7.2c.3-.1.7 0 .9.3l1 1.6c.2.3.1.7-.1.9l-.7.7c.6 1.3 1.6 2.3 2.9 2.9l.7-.7c.2-.2.6-.3.9-.1l1.6 1c.3.2.4.6.3.9-.4 1-1.4 1.6-2.4 1.4-3-.5-5.4-2.9-5.9-5.9-.2-1 .4-2 1.4-2.4Z"
+          fill="#fff"
+        />
+      </>
+    )
+  }
+
+  if (channel === CONVERSATION_CHANNEL.MESSENGER) {
+    return (
+      <>
+        <circle cx="12" cy="12" r="11" fill={color} />
+        {/* Raio do Messenger. */}
+        <path d="M6.5 15.5 11 10.8l2.4 2.4L17.5 9l-4.6 4.9-2.4-2.4-4 4Z" fill="#fff" stroke="#fff" strokeWidth="1.4" strokeLinejoin="round" />
+      </>
+    )
+  }
+
+  if (channel === CONVERSATION_CHANNEL.INSTAGRAM) {
+    return (
+      <>
+        <rect x="2" y="2" width="20" height="20" rx="6" fill={color} />
+        <rect x="6.5" y="6.5" width="11" height="11" rx="3.5" fill="none" stroke="#fff" strokeWidth="1.6" />
+        <circle cx="12" cy="12" r="2.6" fill="none" stroke="#fff" strokeWidth="1.6" />
+        <circle cx="16.4" cy="7.6" r="1" fill="#fff" />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <circle cx="12" cy="12" r="11" fill={color} />
+      <path d="M6.5 8.5h11v7h-5.5L8.5 18v-2.5h-2v-7Z" fill="#fff" />
+    </>
+  )
+}
+
+export function ChannelIcon({ channel, size = 14, className = '' }: ChannelIconProps) {
+  const resolved: ConversationChannel = channel ?? CONVERSATION_CHANNEL.WHATSAPP
+  const { label } = capabilitiesOf(resolved)
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      className={`inline-block shrink-0 ${className}`.trim()}
+      role="img"
+      aria-label={label}
+    >
+      <Glyph channel={resolved} />
+    </svg>
+  )
+}

package/src/ConversationContextPanel.tsx

@@ -0,0 +1,280 @@
+/**
+ * "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 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',
+  empty: 'Nada coletado ainda nesta conversa.',
+  collapse: 'fechar',
+  expand: 'abrir',
+  notCollected: 'a coletar',
+}
+
+export interface ConversationContextPanelClassNames {
+  root: string
+  toggle: string
+  counter: string
+  body: string
+}
+
+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 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.
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && counts.completed > 0)
+
+  return (
+    // 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,
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => setManualOpen(!open)}
+          aria-expanded={open}
+          title={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,
+          )}
+        >
+          <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',
+                        )}
+                        title={entry.value ?? labels.notCollected}
+                      >
+                        {entry.value ?? labels.notCollected}
+                      </dd>
+                    </div>
+                  )
+                })}
+              </dl>
+            )}
+          </div>
+        ) : null}
+      </section>
+    </div>
+  )
+}