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

package/src/ConversationListItem.tsx

@@ -1,14 +1,38 @@
 import { useMemo } from 'react'
 import { Avatar } from './Avatar'
-import { formatPhone } from './lib/phone'
+import { contactFlag, formatContactHandle } from './conversationChannel'
 import type { ConversationSummary } from './providers/types'
 
+export interface ConversationListItemLabels {
+  /** Tooltip do ponto vermelho: a janela de atendimento de 24h já fechou. */
+  expiredWindow: string
+  /** Tooltip do ponto laranja: a janela de atendimento está perto de fechar. */
+  warningWindow: string
+}
+
+export const DEFAULT_CONVERSATION_LIST_ITEM_LABELS: ConversationListItemLabels = {
+  expiredWindow: 'Janela expirada',
+  warningWindow: 'Janela próxima do fim',
+}
+
 export interface ConversationListItemProps {
   conversation: ConversationSummary
+  labels?: Partial<ConversationListItemLabels>
   active?: boolean
   selected?: boolean
   onClick?: () => void
   onSelect?: (id: string) => void
+  /**
+   * Desliga a borda inferior quando o item é composto dentro de outra linha (ver `ConversationRow`):
+   * com ela ligada, a borda corta a própria linha ao meio, separando o item do rodapé de status.
+   */
+  showDivider?: boolean
+  /**
+   * Desliga o fundo de selecionado. Par do `showDivider`: quando o item é composto dentro de uma
+   * linha maior, quem pinta o realce é a linha — senão só o bloco do item fica cinza e o resto
+   * (checkbox, pills, barra lateral) continua branco, como se metade da linha estivesse selecionada.
+   */
+  highlightActive?: boolean
 }
 
 function formatRelativeTime(dateStr: string): string {
@@ -79,12 +103,22 @@ export const ConversationListItem = ({
   selected = false,
   onClick,
   onSelect,
+  showDivider = true,
+  highlightActive = true,
+  labels,
 }: ConversationListItemProps) => {
+  const expiredWindowLabel = labels?.expiredWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.expiredWindow
+  const warningWindowLabel = labels?.warningWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.warningWindow
   const isActive = active || selected
   const windowStatus = useMemo(() => getWindowStatus(conversation.lastInboundAt), [conversation.lastInboundAt])
   const preview = useMemo(() => lastMessagePreview(conversation), [conversation.lastContent])
-  const name = conversation.clientName || formatPhone(conversation.whatsappNumber) || conversation.whatsappNumber
+  // `contactId` é o identificador neutro; `whatsappNumber` fica como fallback enquanto o backend
+  // não informa canal.
+  const handle = conversation.contactId ?? conversation.whatsappNumber
+  const displayHandle = formatContactHandle({ handle, channel: conversation.channel })
+  const name = conversation.clientName || displayHandle || handle
   const timestamp = formatRelativeTime(conversation.lastAt)
+  const flag = contactFlag({ handle, channel: conversation.channel })
   const isInbound = conversation.lastDirection === 'inbound'
 
   const handleClick = () => {
@@ -95,13 +129,15 @@ export const ConversationListItem = ({
   return (
     <button
       onClick={handleClick}
-      className="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[#f0f2f5] border-b border-[#e9edef]"
+      className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${highlightActive ? "hover:bg-[#f0f2f5]" : ""} ${showDivider ? "border-b border-[#e9edef]" : ""}`}
       style={{
-        backgroundColor: isActive ? '#f0f2f5' : 'transparent',
+        backgroundColor: isActive && highlightActive ? '#f0f2f5' : 'transparent',
       }}
     >
       <div className="relative flex-shrink-0">
-        <Avatar name={name} size="lg" />
+        {/* Só o nome do cliente: passar o telefone faria o avatar exibir dígitos soltos em vez da
+            silhueta de contato sem nome. */}
+        <Avatar name={conversation.clientName} size="lg" />
         {conversation.waitingHuman && (
           <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" />
         )}
@@ -110,18 +146,29 @@ export const ConversationListItem = ({
       <div className="flex-1 min-w-0">
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-1.5 min-w-0">
+            {/* Sem nome, o título já é o telefone — a bandeira vai nele. */}
+            {!conversation.clientName && flag ? <span aria-hidden>{flag}</span> : null}
             <span className="text-[16px] text-[#111b21] truncate">{name}</span>
             {windowStatus && windowStatus.label === 'expired' && (
-              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title="Janela expirada" />
+              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title={expiredWindowLabel} />
             )}
             {windowStatus && windowStatus.label === 'warning' && (
-              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title="Janela próxima do fim" />
+              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title={warningWindowLabel} />
             )}
           </div>
           {timestamp && (
             <span className="text-xs text-[#667781] flex-shrink-0">{timestamp}</span>
           )}
         </div>
+        {/* Telefone só como subtítulo quando o título é o nome — repetir o número embaixo dele
+            mesmo gastaria uma linha para dizer duas vezes a mesma coisa. */}
+        {conversation.clientName ? (
+          <div className="flex items-center gap-1 text-xs text-[#667781]">
+            {flag ? <span aria-hidden>{flag}</span> : null}
+            <span className="truncate">{displayHandle}</span>
+          </div>
+        ) : null}
+
         <div className="flex items-center justify-between mt-0.5">
           <span className="text-sm text-[#667781] truncate max-w-[180px]">
             {preview.icon && <span className="mr-1">{preview.icon}</span>}

package/src/ConversationLocalesProvider.tsx

@@ -13,6 +13,28 @@ export interface ConversationLocales {
     viewImage: string
     listenAudio: string
     viewVideo: string
+    moderationFlagged: string
+    mediaLoading: string
+    mediaRetry: string
+    mediaError: string
+    mediaUnavailable: string
+    imageAlt: string
+    untitledDocument: string
+    downloadFile: string
+  }
+  transcription: {
+    label: string
+    copy: string
+    copied: string
+    transcribe: string
+    transcribing: string
+    retry: string
+    failed: string
+    /** Áudio processado sem fala detectada — distinto de "não transcrito". */
+    empty: string
+    unsupported: string
+    showMore: string
+    showLess: string
   }
   selection: {
     select: string
@@ -36,6 +58,27 @@ const DEFAULT_LOCALES: ConversationLocales = {
     viewImage: 'Ver imagem',
     listenAudio: 'Ouvir áudio',
     viewVideo: 'Ver vídeo',
+    moderationFlagged: 'Linguagem ofensiva',
+    mediaLoading: 'Carregando...',
+    mediaRetry: 'Erro — tentar novamente',
+    mediaError: 'Erro',
+    mediaUnavailable: 'Mídia indisponível',
+    imageAlt: 'Imagem',
+    untitledDocument: 'Documento',
+    downloadFile: 'Baixar',
+  },
+  transcription: {
+    label: 'Transcrição',
+    copy: 'Copiar',
+    copied: 'Copiado!',
+    transcribe: 'Transcrever áudio',
+    transcribing: 'Transcrevendo...',
+    retry: 'Transcrever novamente',
+    failed: 'Falha ao transcrever — tentar novamente',
+    empty: 'Sem fala detectada',
+    unsupported: 'Formato de áudio não suportado para transcrição',
+    showMore: 'ver transcrição completa',
+    showLess: 'ver menos',
   },
   selection: {
     select: 'Selecionar',
@@ -60,6 +103,7 @@ export interface ConversationLocalesProviderProps {
 export function ConversationLocalesProvider({ children, locales }: ConversationLocalesProviderProps) {
   const merged: ConversationLocales = {
     bubble: { ...DEFAULT_LOCALES.bubble, ...locales?.bubble },
+    transcription: { ...DEFAULT_LOCALES.transcription, ...locales?.transcription },
     selection: { ...DEFAULT_LOCALES.selection, ...locales?.selection },
     dateDivider: { ...DEFAULT_LOCALES.dateDivider, ...locales?.dateDivider },
   }

package/src/ConversationRow.tsx

@@ -0,0 +1,137 @@
+/**
+ * Linha da inbox operacional: o `ConversationListItem` cuida do visual padrão (avatar, prévia,
+ * hora, não lidas) e aqui em volta ficam as affordances de trabalho — seleção em massa, sinal da
+ * janela de 24h, tempo parada e retomada de atendimento.
+ *
+ * Fica no pacote, e não em cada produto, porque nada disto é regra de um negócio específico: é
+ * como se opera uma fila de atendimento no WhatsApp.
+ */
+
+import { ConversationListItem } from './ConversationListItem'
+import { capabilitiesOf } from './conversationChannel'
+import { cn } from './lib/cn'
+import { ChannelIcon } from './ChannelIcon'
+import type { ConversationSummary } from './providers/types'
+import {
+  CONVERSATION_WINDOW,
+  formatStalledFor,
+  windowOf,
+  type ConversationWindow,
+} from './conversationWindow'
+
+
+const WINDOW_TITLE: Record<ConversationWindow, string> = {
+  [CONVERSATION_WINDOW.ALL]: '',
+  [CONVERSATION_WINDOW.FRESH]: 'Janela de 24h aberta (menos de 12h)',
+  [CONVERSATION_WINDOW.WARNING]: 'Janela de 24h fechando (12-21h)',
+  [CONVERSATION_WINDOW.CRITICAL]: 'Janela de 24h quase expirada (21-24h)',
+  [CONVERSATION_WINDOW.EXPIRED]: 'Janela de 24h expirada — só template',
+}
+
+// Abaixo disto a conversa é recente e o aviso de "parada" só faria ruído.
+const STALLED_THRESHOLD_MS = 60 * 60 * 1000
+
+const WINDOW_BAR_CLASS: Record<ConversationWindow, string> = {
+  [CONVERSATION_WINDOW.ALL]: 'bg-transparent',
+  [CONVERSATION_WINDOW.FRESH]: 'bg-green-500',
+  [CONVERSATION_WINDOW.WARNING]: 'bg-yellow-500',
+  [CONVERSATION_WINDOW.CRITICAL]: 'bg-red-500',
+  [CONVERSATION_WINDOW.EXPIRED]: 'bg-gray-300',
+}
+
+export type ConversationRowClassNames = {
+  root: string
+  windowBar: string
+}
+
+export type ConversationRowProps = {
+  conversation: ConversationSummary
+  active: boolean
+  selected: boolean
+  now: number
+  busy: boolean
+  onOpen: () => void
+  onToggleSelected: () => void
+  onTakeover: () => void
+  className?: string
+  classNames?: Partial<ConversationRowClassNames>
+}
+
+export function ConversationRow({
+  conversation,
+  active,
+  selected,
+  now,
+  busy,
+  onOpen,
+  onToggleSelected,
+  onTakeover,
+  className,
+  classNames,
+}: ConversationRowProps) {
+  const capabilities = capabilitiesOf(conversation.channel)
+  const window = windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel })
+  const stalledMs = now - new Date(conversation.lastAt).getTime()
+  // "Parada" é sobre a conversa estar sem resposta há tempo, independente de quem conduz. Amarrar
+  // ao `waitingHuman` escondia justamente o caso ruim: conversa assumida e esquecida.
+  const isStalled = stalledMs > STALLED_THRESHOLD_MS
+  const isWaiting = conversation.mode === 'bot' && conversation.waitingHuman
+
+  // Realce e hover ficam na linha inteira: com eles no item, só o bloco dele ficava cinza enquanto
+  // checkbox, barra lateral e pills continuavam brancos — parecia meia linha selecionada.
+  return (
+    <div className={cn('cv-row flex border-b', active && 'cv-row--active', classNames?.root, className)}>
+      {/* Barra lateral com a cor da janela: informa sem competir por espaço com o conteúdo, e não
+          duplica as bolinhas que o próprio ConversationListItem já desenha. */}
+      <span
+        className={cn('w-1 shrink-0', WINDOW_BAR_CLASS[window], classNames?.windowBar)}
+        title={WINDOW_TITLE[window]}
+        aria-label={WINDOW_TITLE[window]}
+      />
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start gap-2 px-2 pt-2">
+          <input
+            type="checkbox"
+            checked={selected}
+            onChange={onToggleSelected}
+            aria-label={`Selecionar conversa ${conversation.whatsappNumber}`}
+            className="mt-3"
+          />
+          <div className="min-w-0 flex-1">
+            {/* Sem divisória: a borda do item cortaria esta linha ao meio, separando-o do rodapé
+                de status que pertence à mesma conversa. */}
+            <ConversationListItem
+              conversation={conversation}
+              active={active}
+              onClick={onOpen}
+              showDivider={false}
+              highlightActive={false}
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-1.5 px-4 pb-2 pl-8">
+          {/* Canal na linha: numa inbox multicanal, saber de onde a conversa veio muda o que o
+              atendente pode fazer nela. */}
+          <span className="cv-pill">
+            <ChannelIcon channel={conversation.channel} /> {capabilities.label}
+          </span>
+          {conversation.mode === 'human' ? (
+            <span className="cv-pill cv-pill--success">🧑‍💼 em atendimento</span>
+          ) : null}
+          {isWaiting ? <span className="cv-pill cv-pill--warning">⏳ aguardando atendimento</span> : null}
+          {!isWaiting && conversation.mode === 'bot' ? <span className="cv-pill">🤖 bot ativo</span> : null}
+          {isStalled ? (
+            <span className="cv-pill cv-pill--danger">⏱️ parada há {formatStalledFor(conversation.lastAt, now)}</span>
+          ) : null}
+          {isWaiting ? (
+            <button type="button" onClick={onTakeover} disabled={busy} className="cv-header-action">
+              ▶️ Continuar Atendimento
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/DateDivider.tsx

@@ -1,18 +1,31 @@
 import { useConversationLocales } from './ConversationLocalesProvider'
 import { isSameDay } from './lib/format'
+import { cn } from './lib/cn'
+
+export interface DateDividerClassNames {
+  root: string
+  label: string
+}
 
 export interface DateDividerProps {
   iso: string
+  className?: string
+  classNames?: Partial<DateDividerClassNames>
 }
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/DateDivider.tsx —
 // sticky no topo do scroll, "Hoje"/"Ontem" localizados, senão data completa pt-BR.
-export function DateDivider({ iso }: DateDividerProps) {
+export function DateDivider({ iso, className, classNames }: DateDividerProps) {
   const { dateDivider } = useConversationLocales()
 
   return (
-    <div className="flex justify-center sticky top-0 z-10 my-2 pointer-events-none">
-      <span className="bg-white/95 dark:bg-gray-800/95 text-gray-600 dark:text-gray-300 text-xs font-medium px-3 py-1 rounded-lg shadow-sm">
+    <div className={cn('flex justify-center sticky top-0 z-10 my-2 pointer-events-none', classNames?.root, className)}>
+      <span
+        className={cn(
+          'bg-white/95 dark:bg-gray-800/95 text-gray-600 dark:text-gray-300 text-xs font-medium px-3 py-1 rounded-lg shadow-sm',
+          classNames?.label,
+        )}
+      >
         {formatDividerLabel(iso, dateDivider)}
       </span>
     </div>

package/src/DocumentsLibrary.tsx

@@ -0,0 +1,322 @@
+/**
+ * Biblioteca de arquivos de TODAS as conversas — a tela de Documentos do painel, fora do
+ * atendimento.
+ *
+ * Distinta do `ConversationDocumentsPanel`: aquele parte de uma conversa aberta e vive dentro dela;
+ * esta varre a empresa e por isso mostra de qual conversa cada arquivo veio, com o número
+ * clicável. Sem essa referência, uma lista global de anexos não responde nenhuma pergunta.
+ */
+
+import { useEffect, useState } from 'react'
+import { ArrowUpDown, Bot, Download, Eye, MessageSquare, Users } from 'lucide-react'
+import { useConversations } from './providers/ConversationsProvider'
+import { DOCUMENT_SOURCE_FILTER, type DocumentSourceFilter } from './ConversationDocumentsPanel'
+import { FileIcon } from './FileIcon'
+import { cn } from './lib/cn'
+import { formatDateTime, formatFileSize } from './lib/format'
+import { formatPhone } from './lib/phone'
+import type { CompanyDocument } from './providers/types'
+
+export interface DocumentsLibraryLabels {
+  title: string
+  searchPlaceholder: string
+  empty: string
+  noResults: string
+  loading: string
+  failure: string
+  view: string
+  download: string
+  openConversation: string
+  sourceFilterAll: string
+  sourceFilterCustomer: string
+  sourceFilterTeam: string
+  sortMostRecent: string
+  sortOldest: string
+  clearFilters: string
+  total: (count: number) => string
+  page: (current: number, last: number) => string
+}
+
+export const DEFAULT_DOCUMENTS_LIBRARY_LABELS: DocumentsLibraryLabels = {
+  title: 'Documentos',
+  searchPlaceholder: 'Buscar por nome do arquivo ou telefone',
+  empty: 'Nenhum arquivo trocado ainda.',
+  noResults: 'Nenhum arquivo encontrado para os filtros aplicados',
+  loading: 'Carregando arquivos…',
+  failure: 'Não foi possível carregar os arquivos.',
+  view: 'Visualizar',
+  download: 'Baixar',
+  openConversation: 'Abrir conversa',
+  sourceFilterAll: 'Todas as origens',
+  sourceFilterCustomer: 'Cliente',
+  sourceFilterTeam: 'Equipe',
+  sortMostRecent: 'Mais recentes',
+  sortOldest: 'Mais antigos',
+  clearFilters: 'Limpar filtros',
+  total: (count: number) => `${count} arquivo${count === 1 ? '' : 's'}`,
+  page: (current: number, last: number) => `${current} / ${last}`,
+}
+
+export interface DocumentsLibraryClassNames {
+  root: string
+  title: string
+  filters: string
+  search: string
+  sourceSelect: string
+  sortButton: string
+  clearButton: string
+  status: string
+  list: string
+  item: string
+  conversationLink: string
+  filename: string
+  meta: string
+  pagination: string
+}
+
+export interface DocumentsLibraryProps {
+  /** Itens por página. O total vem do servidor. */
+  perPage?: number
+  /** Abrir a conversa de origem. Ausente, o número aparece como texto e não como link. */
+  onOpenConversation?: (conversationId: string) => void
+  labels?: Partial<DocumentsLibraryLabels>
+  className?: string
+  classNames?: Partial<DocumentsLibraryClassNames>
+}
+
+const TEAM_SOURCES = new Set(['agent', 'bot'])
+const DEFAULT_PER_PAGE = 20
+
+export function DocumentsLibrary({
+  perPage = DEFAULT_PER_PAGE,
+  onOpenConversation,
+  labels: labelsOverride,
+  className,
+  classNames,
+}: DocumentsLibraryProps) {
+  const labels = { ...DEFAULT_DOCUMENTS_LIBRARY_LABELS, ...labelsOverride }
+  const context = useConversations()
+  const [search, setSearch] = useState('')
+  const [sourceFilter, setSourceFilter] = useState<DocumentSourceFilter>(DOCUMENT_SOURCE_FILTER.ALL)
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
+  const [page, setPage] = useState(1)
+  const [documents, setDocuments] = useState<readonly CompanyDocument[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [failed, setFailed] = useState(false)
+
+  const hasFilters = search !== '' || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== 'desc'
+  const lastPage = Math.max(1, Math.ceil(total / perPage))
+  const fetchAll = context?.api.getAllDocuments
+
+  useEffect(() => {
+    if (!fetchAll) return
+    let active = true
+    setLoading(true)
+    setFailed(false)
+
+    void fetchAll({
+      search,
+      page,
+      limit: perPage,
+      sortDirection,
+      ...(sourceFilter === DOCUMENT_SOURCE_FILTER.ALL ? {} : { source: sourceFilter }),
+    })
+      .then((result) => {
+        // `active` evita que uma resposta antiga sobrescreva a nova: digitar rápido na busca dispara
+        // várias chamadas e a ordem de retorno não é garantida.
+        if (!active) return
+        setDocuments(result.documents)
+        setTotal(result.total)
+      })
+      .catch(() => {
+        if (active) setFailed(true)
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage])
+
+  function applyFilter(change: () => void): void {
+    change()
+    setPage(1)
+  }
+
+  async function handleOpen(uploadId: string, disposition: 'inline' | 'attachment'): Promise<void> {
+    const url = await context?.api.getDocumentUrl(uploadId, disposition)
+    if (url) window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
+  // Host sem `getAllDocuments` não tem o que mostrar aqui — some, em vez de renderizar vazio para
+  // sempre e fazer parecer que a empresa não tem arquivo nenhum.
+  if (!fetchAll) return null
+
+  return (
+    <div className={cn('space-y-3', classNames?.root, className)}>
+      <h2 className={cn('text-lg font-semibold', classNames?.title)}>{labels.title}</h2>
+
+      <div className={cn('flex flex-wrap items-center gap-2', classNames?.filters)}>
+        <input
+          type="search"
+          value={search}
+          onChange={(event) => applyFilter(() => setSearch(event.target.value))}
+          placeholder={labels.searchPlaceholder}
+          aria-label={labels.searchPlaceholder}
+          className={cn('w-full rounded-md border px-3 py-2 text-sm sm:w-64', classNames?.search)}
+        />
+
+        <select
+          value={sourceFilter}
+          onChange={(event) => applyFilter(() => setSourceFilter(event.target.value as DocumentSourceFilter))}
+          aria-label={labels.sourceFilterAll}
+          className={cn('w-full rounded-md border px-2 py-2 text-sm sm:w-40', classNames?.sourceSelect)}
+        >
+          <option value={DOCUMENT_SOURCE_FILTER.ALL}>{labels.sourceFilterAll}</option>
+          <option value={DOCUMENT_SOURCE_FILTER.CUSTOMER}>{labels.sourceFilterCustomer}</option>
+          <option value={DOCUMENT_SOURCE_FILTER.TEAM}>{labels.sourceFilterTeam}</option>
+        </select>
+
+        <button
+          type="button"
+          onClick={() => applyFilter(() => setSortDirection(sortDirection === 'desc' ? 'asc' : 'desc'))}
+          className={cn('cv-header-action inline-flex items-center gap-1', classNames?.sortButton)}
+        >
+          <ArrowUpDown size={14} />
+          {sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest}
+        </button>
+
+        {hasFilters ? (
+          <button
+            type="button"
+            onClick={() =>
+              applyFilter(() => {
+                setSearch('')
+                setSourceFilter(DOCUMENT_SOURCE_FILTER.ALL)
+                setSortDirection('desc')
+              })
+            }
+            className={cn('cv-header-action', classNames?.clearButton)}
+          >
+            {labels.clearFilters}
+          </button>
+        ) : null}
+      </div>
+
+      {loading ? <p className={cn('text-sm text-gray-500', classNames?.status)}>{labels.loading}</p> : null}
+      {failed ? (
+        <p role="alert" className={cn('text-sm text-red-600 dark:text-red-400', classNames?.status)}>
+          {labels.failure}
+        </p>
+      ) : null}
+      {!loading && !failed && documents.length === 0 ? (
+        <p className={cn('text-sm text-gray-500', classNames?.status)}>
+          {hasFilters ? labels.noResults : labels.empty}
+        </p>
+      ) : null}
+
+      <ul className={cn('space-y-2', classNames?.list)}>
+        {documents.map((document) => {
+          const isFromCustomer = !TEAM_SOURCES.has(document.source)
+          const SourceIcon = isFromCustomer ? Users : Bot
+
+          return (
+            <li
+              key={`${document.conversationId}:${document.id}`}
+              className={cn(
+                'flex items-center justify-between gap-3 rounded-lg border px-3 py-2 dark:border-gray-700',
+                classNames?.item,
+              )}
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-3">
+                <FileIcon filename={document.filename} mimeType={document.mimeType} />
+                <div className="min-w-0 flex-1">
+                  <div className={cn('truncate text-sm font-medium', classNames?.filename)} title={document.filename}>
+                    {document.filename}
+                  </div>
+                  <div className={cn('flex flex-wrap items-center gap-x-2 text-xs text-gray-500', classNames?.meta)}>
+                    <span className="inline-flex items-center gap-1">
+                      <SourceIcon size={11} />
+                      {isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam}
+                    </span>
+                    <span>·</span>
+                    <span>{formatDateTime(document.linkedAt)}</span>
+                    <span>·</span>
+                    <span>{formatFileSize(document.sizeBytes)}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* A conversa de origem é o dado que só esta tela tem. Vira botão quando o host sabe
+                  navegar; sem handler, fica texto — link que não leva a lugar nenhum é pior. */}
+              {onOpenConversation ? (
+                <button
+                  type="button"
+                  onClick={() => onOpenConversation(document.conversationId)}
+                  title={labels.openConversation}
+                  className={cn('cv-header-action inline-flex shrink-0 items-center gap-1', classNames?.conversationLink)}
+                >
+                  <MessageSquare size={12} />
+                  {formatPhone(document.conversationId)}
+                </button>
+              ) : (
+                <span className={cn('shrink-0 text-xs text-gray-500', classNames?.conversationLink)}>
+                  {formatPhone(document.conversationId)}
+                </span>
+              )}
+
+              <div className="flex shrink-0 gap-1">
+                <button
+                  type="button"
+                  onClick={() => void handleOpen(document.id, 'inline')}
+                  title={labels.view}
+                  aria-label={`${labels.view}: ${document.filename}`}
+                  className="cv-header-icon"
+                >
+                  <Eye size={14} />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleOpen(document.id, 'attachment')}
+                  title={labels.download}
+                  aria-label={`${labels.download}: ${document.filename}`}
+                  className="cv-header-icon"
+                >
+                  <Download size={14} />
+                </button>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+
+      {total > perPage ? (
+        <div className={cn('flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700', classNames?.pagination)}>
+          <span className="text-gray-400">{labels.total(total)}</span>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setPage(page - 1)}
+              disabled={page <= 1}
+              className="cv-header-icon disabled:opacity-40"
+            >
+              ‹
+            </button>
+            <span className="text-gray-500">{labels.page(page, lastPage)}</span>
+            <button
+              type="button"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= lastPage}
+              className="cv-header-icon disabled:opacity-40"
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}